:root{--primary:#1e3a5f;--primary-hover:#152943;--primary-light:#eef2f6;--secondary:#d97706;--secondary-hover:#b45309;--accent:#2563eb;--warm-white:#fdfaf2;--white:#fff;--text:#2c2a27;--muted:#747167;--border:#e8e4d8;--success:#287548;--danger:#b42318;--shadow:0 10px 30px -5px rgba(44,42,39,.05),0 1px 3px rgba(44,42,39,.02);--shadow-hover:0 20px 40px -10px rgba(44,42,39,.1),0 2px 8px rgba(44,42,39,.04)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Instrument Sans','Outfit','Segoe UI',system-ui,sans-serif;background:var(--warm-white);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--warm-white)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:282px;background:#fdfbf7;color:var(--text);border-right:1px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;gap:12px;align-items:center;padding:4px 8px 22px;border-bottom:1px solid var(--border);margin-bottom:15px}.brand-logo{width:64px;height:54px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:10px;padding:4px}.brand b{display:block;font-size:16px;line-height:1.25;color:var(--primary)}.brand small{color:var(--muted)}.sidebar nav{display:grid;gap:4px}.sidebar nav a,.sidebar-foot a{color:var(--text);text-decoration:none;padding:11px 14px;border-radius:8px;font-weight:550;transition:.2s}.sidebar nav a:hover{background:rgba(30,58,95,.05);color:var(--primary)}.sidebar nav a.active{background:var(--primary);color:#fff;font-weight:650;box-shadow:0 4px 12px rgba(30,58,95,.15)}.sidebar-foot{margin-top:auto;border-top:1px solid var(--border);padding:17px 10px 0;display:grid;gap:4px}.sidebar-foot small{color:var(--muted)}.sidebar-foot b{color:var(--primary)}.sidebar-foot a{padding:8px 0;color:var(--secondary);font-weight:700}main{margin-left:282px;width:calc(100% - 282px)}.topbar{min-height:104px;background:var(--primary);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px rgba(0,0,0,.08);padding:23px 34px;display:flex;align-items:center;gap:15px}.topbar h1{margin:0;font-size:26px;color:#fff}.topbar p{margin:5px 0 0;color:#d5dfeb}.menu{display:none}.content{padding:28px 34px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:21px;box-shadow:var(--shadow);transition:.25s}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.stat{border-top:4px solid var(--primary)}.stat:nth-child(2){border-top-color:var(--secondary)}.stat:nth-child(3){border-top-color:var(--accent)}.stat:nth-child(4){border-top-color:var(--success)}.stat b{display:block;font-size:31px;color:var(--primary)}.stat span,.muted{color:var(--muted)}.card h2{font-family:'Outfit',sans-serif;font-size:19px;margin:0 0 16px;color:var(--primary)}.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.table-wrap{overflow:auto;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}table{border-collapse:collapse;width:100%;min-width:760px}th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--border)}th{background:#f8f7f2;color:var(--primary);font-size:13px;font-weight:750;text-transform:uppercase;border-bottom:2px solid var(--border)}tr:hover td{background:rgba(30,58,95,.02)}tr:last-child td{border:0}.badge{display:inline-block;padding:5px 9px;border-radius:6px;background:#e7f3eb;color:var(--success);font-size:12px;font-weight:700}.badge.off{background:#fee4e2;color:var(--danger)}
.btn{display:inline-block;border:1px solid transparent;border-radius:8px;background:var(--primary);color:#fff;text-decoration:none;padding:10px 16px;font-weight:650;cursor:pointer;transition:.2s}.btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(30,58,95,.2)}.btn.gold{background:var(--secondary);color:#fff}.btn.gold:hover{background:var(--secondary-hover)}.btn.light{background:var(--primary-light);border-color:#dce4ed;color:var(--primary);box-shadow:none}.btn.light:hover{background:var(--primary);color:#fff}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.form-card{max-width:900px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}label{font-weight:650;color:var(--text)}input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font:inherit;transition:.2s}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px rgba(30,58,95,.1)}textarea{min-height:110px}.alert{padding:13px 15px;border-radius:8px;margin-bottom:18px;background:#e8f4ec;color:#245d3b;border-left:4px solid var(--success)}.alert.error{background:#fee9e7;color:#9d1d14;border-left-color:#d74a3a}.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:10px;margin-bottom:16px}.qr-box{text-align:center;max-width:520px;margin:auto;border-top:5px solid var(--secondary)}.qr-box img{width:280px;max-width:100%;padding:15px;border:1px solid var(--border);border-radius:12px}.code{font:700 20px ui-monospace,monospace;letter-spacing:2px;color:var(--primary)}.empty{text-align:center;padding:36px;color:var(--muted)}.pager{display:flex;gap:6px;margin-top:15px;flex-wrap:wrap}.pager a{padding:8px 11px;background:#fff;border:1px solid var(--border);border-radius:7px;text-decoration:none;color:var(--primary)}
.public{min-height:100vh;background:linear-gradient(145deg,rgba(30,58,95,.96),rgba(21,41,67,.98));padding:30px 15px}.public-card{background:#fff;max-width:760px;margin:auto;border-radius:14px;padding:28px;box-shadow:0 24px 70px rgba(10,28,48,.36);border-top:5px solid var(--secondary)}.public-brand{text-align:center;margin-bottom:22px}.public-logo{width:150px;height:120px;object-fit:contain}.public-brand h1{font-family:'Outfit',sans-serif;margin:8px 0 5px;color:var(--primary)}
.landing{background:var(--warm-white);min-height:100vh}.landing-nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;max-width:none;margin:0;padding:10px 5vw;background:var(--primary);box-shadow:0 4px 20px rgba(0,0,0,.08)}.landing-brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:750;text-decoration:none}.landing-brand img{width:73px;height:55px;object-fit:contain;background:#fff;border-radius:7px;padding:3px}.landing-actions{display:flex;gap:10px}.landing-actions .btn{border:1px solid rgba(255,255,255,.35)}.landing-actions .btn.light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}.landing-actions .btn.light:hover{background:rgba(255,255,255,.15)}
.media-hero{height:63vh;min-height:500px;max-height:730px;padding:0;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--primary);overflow:hidden;color:#fff}.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}.hero-shade{position:absolute;inset:0;background:linear-gradient(rgba(30,58,95,.44),rgba(13,58,95,.6))}.hero-content{position:relative;z-index:2;width:min(1240px,100%);margin:auto;padding:55px 24px}.eyebrow{display:inline-block;color:#fff;background:rgba(13,58,95,.28);border:1px solid rgba(255,255,255,.4);padding:7px 12px;border-radius:7px;font-weight:650;text-shadow:0 2px 8px rgba(0,0,0,.4)}.hero-content h1{font-family:'Outfit',sans-serif;font-size:clamp(37px,4.7vw,61px);line-height:1.08;letter-spacing:-.025em;max-width:1160px;margin:18px auto;color:#fff;text-shadow:0 3px 20px rgba(0,0,0,.52)}.hero-content p{font-size:18px;color:#fff;max-width:900px;margin:0 auto;text-shadow:0 2px 14px rgba(0,0,0,.62)}.hero-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}.btn.hero-primary{background:var(--secondary);border-color:var(--secondary);padding:12px 20px}.btn.hero-primary:hover{background:var(--secondary-hover)}.btn.hero-secondary{background:rgba(13,58,95,.24);color:#fff;border-color:rgba(255,255,255,.88);padding:12px 20px}.btn.hero-secondary:hover{background:#fff;color:var(--primary)}
.landing-section{max-width:1180px;margin:auto;padding:52px 24px}.section-heading{text-align:center;max-width:700px;margin:0 auto 32px}.section-heading h2{font-family:'Outfit',sans-serif;font-size:34px;color:var(--primary);margin:0 0 8px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature{background:#fff;padding:25px;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);text-align:center;transition:.25s}.feature:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}.feature-icon{width:42px;height:42px;margin:0 auto 10px;display:grid;place-items:center;border-radius:10px;background:var(--primary-light);color:var(--primary);font-size:21px}.feature:nth-child(2) .feature-icon{background:#fff3e2;color:var(--secondary)}.feature:nth-child(3) .feature-icon{background:#e8efff;color:var(--accent)}.feature h3{font-family:'Outfit',sans-serif;color:var(--primary);margin-bottom:7px}.steps{background:#f4f6f8;border-block:1px solid var(--border)}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.step{text-align:center}.step-number{margin:auto;width:52px;height:52px;display:grid;place-items:center;border-radius:10px;background:var(--primary);color:#fff;font-size:20px;font-weight:800;box-shadow:0 4px 12px rgba(30,58,95,.18)}.cta{max-width:1132px;margin:58px auto;padding:43px 40px;background:var(--primary);border-radius:14px;text-align:center;color:#e2e8f0;box-shadow:var(--shadow)}.cta h2{font-family:'Outfit',sans-serif;font-size:33px;margin:0 0 8px;color:#fff}.cta .btn.hero-secondary{border-color:#fff}.landing-footer{background:var(--primary);color:#d8e1eb;text-align:center;padding:34px 20px;border-top:1px solid rgba(255,255,255,.1)}.landing-footer img{width:80px;background:#fff;border-radius:8px;padding:4px}.footer-app-download{margin:18px 0 14px}.apk-download-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.32);border-radius:99px;color:#fff;font-weight:650;font-size:14px;text-decoration:none;transition:all .25s ease;box-shadow:0 4px 14px rgba(0,0,0,.12)}.apk-download-btn:hover{background:#fff;color:var(--primary);border-color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.22)}.apk-download-btn svg{stroke:currentColor;flex:0 0 auto}
.login-page{min-height:100vh;background:var(--warm-white)}.login-shell{margin:0;width:100%;min-height:100vh;display:grid;grid-template-columns:minmax(480px,1.1fr) minmax(440px,.9fr)}.login-visual{position:relative;overflow:hidden;min-height:100vh}.login-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.login-overlay{position:absolute;inset:0;background:linear-gradient(145deg,rgba(30,58,95,.92),rgba(30,58,95,.48) 55%,rgba(12,28,47,.78))}.login-story{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:70px;color:#fff;max-width:760px}.login-story img{width:190px;max-height:155px;object-fit:contain;background:#fff;border-radius:12px;padding:8px;margin-bottom:auto;box-shadow:0 16px 40px rgba(0,0,0,.25)}.login-story h1{font-family:'Outfit',sans-serif;font-size:clamp(40px,4.8vw,68px);line-height:1.04;margin:18px 0}.login-story p{font-size:18px;color:#e8eef5;max-width:610px}.login-panel{display:flex;align-items:center;justify-content:center;background:#fff;padding:44px}.login-form-wrap{width:100%;max-width:470px}.back-home{display:inline-block;color:var(--primary);text-decoration:none;font-weight:700;margin-bottom:65px}.login-kicker{text-transform:uppercase;letter-spacing:2px;color:var(--secondary);font-weight:800;margin:0 0 7px}.login-form-wrap h2{font-family:'Outfit',sans-serif;font-size:36px;color:var(--primary);margin:0 0 8px}.login-form-wrap form{display:grid;gap:20px;margin-top:32px}.password-field{position:relative}.password-field input{padding-right:70px}.password-field button{position:absolute;right:8px;top:7px;border:0;background:var(--primary-light);color:var(--primary);border-radius:7px;padding:7px 10px;font-weight:700;cursor:pointer}.login-submit{width:100%;padding:13px;font-size:16px}.login-help{text-align:center;color:var(--muted);margin-top:25px}.login-mobile-brand{display:none}.consent{display:flex;gap:10px;align-items:flex-start}.consent input{width:auto;margin-top:4px}.media-preview{border-radius:12px;overflow:hidden;background:var(--primary);aspect-ratio:16/9;margin-bottom:13px}.media-preview img,.media-preview video{width:100%;height:100%;display:block;object-fit:cover}.media-manager{align-items:start}.upload-progress{height:11px;background:#e8e4d8;border-radius:99px;overflow:hidden;margin-top:18px}.upload-progress div{height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:99px;transition:width .2s}
.sidebar{overflow-y:auto}.portal-brand{flex-direction:column;text-align:center;gap:4px;padding:5px 8px 17px}.portal-brand .brand-logo{width:100px;height:78px;border:0;background:transparent;padding:0;border-radius:0}.portal-brand b{font-size:17px;margin-top:2px}.portal-brand small{display:block;font-size:13px}.soft-rule{border:0;border-top:1px solid var(--border);margin:20px 0}.password-username{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.report-filters{grid-template-columns:1fr 1fr 1.4fr auto auto}.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.report-wide{margin-top:20px}.report-bar-row{margin:0 0 14px}.report-bar-row>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}.report-bar-row span{font-weight:600}.report-bar-row b{color:var(--primary)}.report-track{height:10px;background:var(--primary-light);border-radius:99px;overflow:hidden}.report-track i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px}.report-table{box-shadow:none}.settings-table input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary)}.settings-table td,.settings-table th{text-align:center}.settings-table td:first-child,.settings-table th:first-child{text-align:left}.field-manager{min-width:1100px}.field-manager th{white-space:nowrap}.field-remove{padding:7px 10px}.add-field-card{margin-top:20px}.field-checks{display:flex;gap:20px;flex-wrap:wrap}.field-checks label{display:flex;gap:8px;align-items:center}.field-checks input{width:18px}.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:10px}.subtabs a{padding:10px 15px;border-radius:8px;text-decoration:none;color:var(--primary);font-weight:700;background:#fff;border:1px solid var(--border)}.subtabs a.active{background:var(--primary);color:#fff;border-color:var(--primary)}.directory-filter{grid-template-columns:1fr auto auto}.lookup-status{display:block;min-height:20px;margin-top:3px}.success-text{color:var(--success);font-weight:700}.error-text{color:var(--danger);font-weight:700}input[readonly]{background:#f3f5f7;color:#405064}
@media(max-width:1050px), (max-device-width: 1050px){.grid{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr 1fr}.report-filters{grid-template-columns:1fr 1fr}}@media(max-width:900px), (max-device-width: 900px){.login-shell{grid-template-columns:1fr}.login-visual{display:none}.login-panel{min-height:100vh;padding:28px}.back-home{margin-bottom:28px}.login-mobile-brand{display:block;text-align:center}.login-mobile-brand img{width:150px}.login-form-wrap h2{font-size:30px}.report-grid{grid-template-columns:1fr}}@media(max-width:760px), (max-device-width: 760px){.sidebar{transform:translateX(-100%);transition:.2s}.nav-open .sidebar{transform:none;box-shadow:12px 0 35px rgba(0,0,0,.2)}.nav-open:after{content:"";position:fixed;inset:0;background:#0008;z-index:5}main{margin:0;width:100%}.topbar{min-height:86px;padding:18px}.menu{display:block;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;border-radius:8px;padding:9px 11px;font-size:19px}.content{padding:18px}.grid,.split,.form-grid,.filters,.feature-grid,.step-grid,.report-filters{grid-template-columns:1fr}.field.full{grid-column:auto}.topbar h1{font-size:21px}.public-card{padding:20px}.landing-nav{min-height:70px;padding:8px 16px}.landing-brand img{width:58px;height:48px}.landing-brand span{font-size:13px}.landing-actions .btn.light{display:none}.media-hero{height:auto;min-height:470px;padding:2.5rem 0}.hero-content{padding:40px 18px}.hero-content h1{font-size:34px}.hero-content p{font-size:16px}.landing-section{padding:40px 18px}.section-heading h2{font-size:29px}.cta{margin:38px 18px;padding:35px 20px}.login-panel{padding:22px}.login-form-wrap h2{font-size:27px}.portal-brand .brand-logo{width:92px;height:72px}}

/* Profile photo editor */
.account-avatar,.topbar-avatar{overflow:hidden;flex:0 0 auto}.account-avatar img,.topbar-avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}.profile-layout{display:grid;grid-template-columns:minmax(0,900px);gap:20px}.profile-card{max-width:none}.profile-photo-row{display:flex;align-items:center;gap:24px;margin:18px 0 20px}.profile-photo-preview{width:138px;height:138px;border-radius:50%;overflow:hidden;background:var(--primary-light);border:5px solid #fff;box-shadow:0 0 0 1px var(--border),0 10px 25px rgba(21,48,82,.12);display:grid;place-items:center;color:var(--primary);font-size:34px;font-weight:800;flex:0 0 auto}.profile-photo-preview img{width:100%;height:100%;object-fit:cover;display:block}.profile-photo-actions{display:flex;align-items:flex-start;flex-direction:column;gap:10px;max-width:560px}.profile-photo-actions form{margin:0}.file-button{cursor:pointer}.edited-photo-wrap{margin:14px 0 22px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft,#f8fafc);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}.edited-photo-wrap[hidden]{display:none}.edited-photo-wrap img{width:78px;height:78px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)}.photo-editor-modal{position:fixed;inset:0;z-index:10000;background:rgba(6,18,34,.72);padding:22px;overflow:auto;display:grid;place-items:center}.photo-editor-modal[hidden]{display:none}.editor-open{overflow:hidden}.photo-editor-dialog{width:min(760px,100%);background:var(--card,#fff);color:var(--text);border-radius:18px;box-shadow:0 25px 80px rgba(0,0,0,.34);padding:22px}.photo-editor-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:16px}.photo-editor-head h2{margin:0 0 5px}.photo-editor-head p{margin:0;color:var(--muted)}.editor-close{border:0;background:var(--primary-light);color:var(--primary);width:38px;height:38px;border-radius:50%;font-size:27px;line-height:1;cursor:pointer}.photo-editor-stage{width:min(520px,100%);aspect-ratio:1;margin:0 auto;position:relative;border-radius:14px;overflow:hidden;background:#dfe5ec;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.photo-editor-stage canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.photo-editor-stage canvas.dragging{cursor:grabbing}.crop-guide{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 0 0 999px rgba(0,0,0,.08)}.crop-guide:before,.crop-guide:after{content:"";position:absolute;background:rgba(255,255,255,.55)}.crop-guide:before{left:33.333%;top:0;bottom:0;width:1px;box-shadow:calc(520px / 3) 0 rgba(255,255,255,.55)}.crop-guide:after{top:33.333%;left:0;right:0;height:1px;box-shadow:0 calc(520px / 3) rgba(255,255,255,.55)}.photo-editor-controls{margin-top:18px;display:grid;gap:14px}.zoom-control{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}.zoom-control input{padding:0}.editor-buttons{display:flex;gap:8px;flex-wrap:wrap}.photo-editor-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;border-top:1px solid var(--border);padding-top:16px}
@media(max-width:650px), (max-device-width: 650px){.profile-photo-row{align-items:flex-start;flex-direction:column}.profile-photo-preview{width:112px;height:112px}.edited-photo-wrap{grid-template-columns:auto 1fr}.edited-photo-wrap .btn{grid-column:1/-1}.photo-editor-modal{padding:8px}.photo-editor-dialog{padding:14px;border-radius:14px}.editor-buttons .btn{flex:1 1 45%;padding:9px}.photo-editor-foot .btn{flex:1}.crop-guide:before,.crop-guide:after{box-shadow:none}}

/* User accounts: numbered list, profile thumbnails and edit popup */
.user-accounts-table{min-width:1120px}.user-accounts-table th:first-child,.user-accounts-table td:first-child{text-align:center;width:64px}.user-row-number{font-weight:750;color:var(--primary)}.user-list-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--primary-light);border:1px solid #dbe3ed;display:grid;place-items:center;color:var(--primary);font-weight:800;letter-spacing:.5px;box-shadow:0 3px 10px rgba(21,48,82,.08)}.user-list-avatar img{width:100%;height:100%;object-fit:cover;display:block}.user-list-avatar.large{width:64px;height:64px;font-size:18px}.user-edit-modal{position:fixed;inset:0;z-index:10020;background:rgba(6,18,34,.68);padding:24px;overflow:auto;display:grid;place-items:center}.user-edit-modal[hidden]{display:none}.user-edit-opened{overflow:hidden}.user-edit-dialog{width:min(780px,100%);background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:0 26px 80px rgba(0,0,0,.3)}.user-edit-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding-bottom:15px;border-bottom:1px solid var(--border)}.user-edit-head h2{margin:0 0 4px}.user-edit-head p{margin:0;color:var(--muted)}.user-edit-close{border:0;background:var(--primary-light);color:var(--primary);width:39px;height:39px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer}.user-edit-person{display:flex;align-items:center;gap:13px;padding:17px 0}.user-edit-person b,.user-edit-person small{display:block}.user-edit-person small{color:var(--muted);margin-top:2px}.user-edit-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
@media(max-width:760px), (max-device-width: 760px){.user-edit-modal{padding:8px}.user-edit-dialog{padding:16px;border-radius:14px}.user-edit-dialog .form-grid{grid-template-columns:1fr}.user-edit-actions .btn{flex:1}.user-accounts-table{min-width:980px}.user-list-avatar{width:40px;height:40px}}

/* Offline recruitment */
.offline-recruitment-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;padding:12px 14px;border:1px solid rgba(0,0,0,.12);border-radius:12px;background:var(--card,#fff)}
.offline-recruitment-banner[data-type="offline"],.offline-recruitment-banner[data-type="warning"]{border-color:#d89b00;background:#fff8e1}.offline-recruitment-banner[data-type="success"]{border-color:#2e8b57;background:#eefaf2}.offline-recruitment-banner[data-type="error"]{border-color:#c33;background:#fff0f0}.offline-actions{display:flex;align-items:center;gap:10px;white-space:nowrap}.btn.small{padding:8px 12px;font-size:.9rem}html[data-network="offline"] #registrationSubmit::after{content:" (save offline)"}@media(max-width:640px), (max-device-width: 640px){.offline-recruitment-banner{align-items:flex-start;flex-direction:column}.offline-actions{width:100%;justify-content:space-between}}

/* V39 — polished landing header, mobile landing and system themed confirmations */
.landing-nav{position:relative;z-index:20;min-height:82px;padding:9px clamp(18px,5vw,72px);background:linear-gradient(135deg,#173654,#21496f);border-bottom:1px solid rgba(255,255,255,.12)}
.landing-brand{gap:13px;min-width:0}.landing-brand img{width:112px;height:62px;padding:0!important;background:transparent!important;border-radius:0!important;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.16))}.landing-brand span{font-size:16px;letter-spacing:.01em;white-space:nowrap}
.landing-actions{align-items:center}.landing-how-link{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:700;padding:10px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);transition:.18s ease}.landing-how-link:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}.landing-how-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.landing-footer img{width:126px!important;max-height:82px;object-fit:contain;background:transparent!important;border-radius:0!important;padding:0!important;filter:drop-shadow(0 2px 6px rgba(0,0,0,.16))}

.system-confirm-backdrop{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:18px;background:rgba(8,18,31,.62);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .16s ease}.system-confirm-backdrop.open{opacity:1;pointer-events:auto}
.system-confirm{width:min(430px,100%);overflow:hidden;border-radius:18px;border:1px solid var(--border,#d8e0e8);background:var(--panel,#fff);color:var(--text,#12233a);box-shadow:0 28px 80px rgba(5,18,34,.35);transform:translateY(8px) scale(.985);transition:transform .16s ease}.system-confirm-backdrop.open .system-confirm{transform:none}
.system-confirm-head{display:flex;align-items:flex-start;gap:13px;padding:22px 22px 12px}.system-confirm-icon{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#fff3e2;color:#e87900}.system-confirm-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.system-confirm-copy h3{margin:1px 0 6px;font:750 19px/1.2 'Outfit',sans-serif;color:var(--primary,#173654)}.system-confirm-copy p{margin:0;color:var(--muted,#667588);font-size:14px;line-height:1.55}.system-confirm-actions{display:flex;justify-content:flex-end;gap:10px;padding:15px 22px 20px}.system-confirm-actions .btn{min-width:92px;justify-content:center}.system-confirm-actions .confirm-yes{background:var(--primary,#173654);border-color:var(--primary,#173654);color:#fff}
html[data-portal-theme="dark"] .system-confirm,html[data-theme="dark"] .system-confirm{background:#101d2a;border-color:#2a3b4d;color:#e8eef5}.system-confirm-backdrop .system-confirm-copy h3{color:inherit}html[data-portal-theme="dark"] .system-confirm-icon,html[data-theme="dark"] .system-confirm-icon{background:#3a2b16;color:#ffad45}

@media(max-width:760px), (max-device-width: 760px){
  .landing{overflow-x:hidden}.landing-nav{min-height:66px;padding:7px 13px;gap:8px}.landing-brand{gap:8px}.landing-brand img{width:78px!important;height:48px!important}.landing-brand span{font-size:12.5px;max-width:124px;overflow:hidden;text-overflow:ellipsis}.landing-how-link{padding:8px 10px;font-size:12px;border-radius:9px}.landing-how-link svg{width:15px;height:15px}
  .media-hero{min-height:520px;height:calc(100svh - 66px);max-height:680px;padding:0;align-items:flex-end}.hero-media{object-position:center 38%}.hero-shade{background:linear-gradient(to bottom,rgba(8,25,43,.18) 0%,rgba(10,31,51,.42) 38%,rgba(8,27,46,.88) 100%)}.hero-content{padding:32px 20px 42px;text-align:left}.eyebrow{font-size:12px;padding:6px 9px;border-radius:8px;margin:0}.hero-content h1{font-size:clamp(34px,10.8vw,45px);line-height:1.02;margin:15px 0 14px;max-width:440px;text-align:left}.hero-content p{font-size:15px;line-height:1.55;margin:0;max-width:440px;text-align:left}.hero-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.hero-buttons .btn{width:100%;min-height:48px;padding:11px 10px;font-size:14px;text-align:center;justify-content:center;border-radius:10px}
  .landing-section{padding:38px 18px}.section-heading{margin-bottom:22px}.section-heading h2{font-size:28px;line-height:1.15}.section-heading p{font-size:14px;line-height:1.55}.feature-grid,.step-grid{gap:12px}.feature,.step{padding:20px 17px;border-radius:14px}.feature{text-align:left}.feature-icon{margin:0 0 12px}.step{text-align:left;background:#fff;border:1px solid var(--border);box-shadow:0 7px 20px rgba(30,58,95,.06)}.step-number{margin:0 0 12px;width:42px;height:42px;border-radius:11px}.cta{margin:28px 14px;padding:28px 19px;border-radius:16px}.cta h2{font-size:27px}.cta p{font-size:14px;line-height:1.6}.landing-footer{padding:28px 16px}.landing-footer img{width:112px!important}
  .system-confirm-backdrop{align-items:end;padding:12px}.system-confirm{border-radius:18px}.system-confirm-head{padding:19px 18px 10px}.system-confirm-actions{padding:13px 18px 18px;display:grid;grid-template-columns:1fr 1fr}.system-confirm-actions .btn{width:100%;min-height:45px}
}
@media(max-width:390px), (max-device-width: 390px){.landing-brand span{display:none}.landing-brand img{width:92px!important}.hero-buttons{grid-template-columns:1fr}.media-hero{min-height:570px}.hero-content{padding-bottom:30px}}

/* ========================================================================
   FLAMINGO PORTAL — APP-LIKE MOBILE SYSTEM LAYER (2026-09-15)
   One final responsive contract for every authenticated portal page.
   Desktop behavior is intentionally untouched.
   ======================================================================== */
@media (max-width: 760px), (max-device-width: 760px) {
  :root { --mobile-gutter:14px; --mobile-radius:14px; --mobile-control:46px; }
  html, body { max-width:100%; overflow-x:hidden; }
  body.portal-body { min-width:0; background:var(--theme-bg,var(--warm-white,#f7f4ee)); font-size:14px; }
  body.portal-body.nav-open { overflow:hidden; }
  .shell { display:block; min-height:100dvh; width:100%; }
  .shell > main { margin:0!important; width:100%!important; min-width:0; }

  /* Drawer navigation: readable like a mobile app, never covering content permanently. */
  #portalSidebar.sidebar {
    position:fixed!important; inset:0 auto 0 0!important; top:0!important; left:0!important;
    width:min(86vw,320px)!important; height:100dvh!important; margin:0!important;
    border-radius:0 18px 18px 0!important; padding:14px 12px 12px!important;
    transform:translateX(-105%)!important; transition:transform .22s ease!important;
    z-index:1002!important; overflow:hidden!important; box-shadow:none!important;
  }
  body.nav-open #portalSidebar.sidebar { transform:translateX(0)!important; box-shadow:18px 0 44px rgba(7,20,35,.28)!important; }
  body.nav-open::after { content:""; position:fixed; inset:0; z-index:1001; background:rgba(4,15,29,.54); backdrop-filter:blur(2px); }
  #portalSidebar .portal-brand { flex:0 0 auto!important; display:grid!important; grid-template-columns:58px minmax(0,1fr)!important; grid-template-rows:auto auto!important; column-gap:10px!important; align-items:center!important; text-align:left!important; padding:8px 8px 13px!important; margin:0 0 7px!important; }
  #portalSidebar .portal-brand .brand-logo { grid-row:1/3; width:58px!important; height:52px!important; margin:0!important; }
  #portalSidebar .brand-copy { min-width:0; }
  #portalSidebar .brand-copy b { font-size:15px!important; line-height:1.2!important; white-space:normal!important; }
  #portalSidebar .brand-copy small { margin-top:2px; font-size:11.5px!important; line-height:1.25; }
  #portalSidebar .sidebar-collapse { display:none!important; }
  #portalSidebar nav { flex:1; min-height:0; overflow-y:auto!important; overscroll-behavior:contain; padding:4px 2px 10px!important; gap:3px!important; }
  #portalSidebar .nav-section { margin:10px 10px 5px!important; font-size:10px!important; }
  #portalSidebar nav a.side-link { min-height:44px!important; padding:9px 10px!important; border-radius:9px!important; gap:10px!important; font-size:13.5px!important; line-height:1.25!important; }
  #portalSidebar nav a.side-link svg { width:20px!important; height:20px!important; flex:0 0 20px!important; }
  #portalSidebar .side-link-label { min-width:0; white-space:normal; }
  #portalSidebar .sidebar-foot { flex:0 0 auto; padding:9px 4px 0!important; gap:7px!important; }
  #portalSidebar .account-row { gap:8px!important; }
  #portalSidebar .account-avatar { width:38px!important; height:38px!important; }
  #portalSidebar .account-copy { min-width:0; }
  #portalSidebar .account-copy b { font-size:12px!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #portalSidebar .account-copy small { font-size:10px!important; }
  #portalSidebar .sidebar-signout { min-width:42px!important; min-height:42px!important; padding:0!important; }
  #portalSidebar .sidebar-signout span { display:none!important; }
  #portalSidebar .theme-toggle { min-height:43px!important; padding:7px 9px!important; }
  #portalSidebar .sidebar-copyright { display:none!important; }

  /* Compact sticky app bar. */
  .topbar {
    position:sticky!important; top:0; z-index:900; width:100%; min-height:72px!important; height:auto!important;
    margin:0!important; padding:10px var(--mobile-gutter)!important; gap:10px!important;
    align-items:center!important; background:var(--primary,#1e3a5f)!important;
    border:0!important; box-shadow:0 4px 18px rgba(8,29,53,.14)!important;
  }
  .topbar .menu { display:grid!important; place-items:center; flex:0 0 42px; width:42px; height:42px; padding:0!important; margin:0!important; border-radius:11px!important; }
  .topbar-copy { min-width:0; flex:1; }
  .topbar-context { display:none!important; }
  .topbar h1 { margin:0!important; font-size:18px!important; line-height:1.2!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar p { margin:3px 0 0!important; font-size:11.5px!important; line-height:1.25!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9; }
  .topbar-meta { display:none!important; }

  .content { width:100%!important; min-width:0!important; padding:14px var(--mobile-gutter) 86px!important; }
  .content > :first-child { margin-top:0; }
  .content img, .content video, .content canvas, .content iframe { max-width:100%; }

  /* Readable cards/panels and headings. */
  .panel, .card, .station-card, .qr-card, .rules-card, .scanner-card, .scan-result,
  .dashboard-analytics-card, .dashboard-chart-card, .analytics-card, .attendance-hub-panel,
  .attendance-tool-card, .notification-composer, .notification-user-picker, .band-panel,
  .leadership-panel, .payment-members-panel, .payment-item-card, .builder-card,
  .personal-scope-banner, .finance-entry-panel {
    width:100%; min-width:0; border-radius:var(--mobile-radius)!important; box-shadow:0 5px 18px rgba(18,41,65,.06)!important;
  }
  .panel { margin-top:12px!important; padding:14px!important; }
  .panel-head { margin:-14px -14px 13px!important; padding:13px 14px!important; gap:10px!important; align-items:flex-start!important; flex-wrap:wrap!important; }
  .panel-head > div, .panel-head > section { min-width:0; flex:1 1 190px; }
  .panel-head h2, .panel-head h3 { font-size:17px!important; line-height:1.25!important; }
  .panel-head p { font-size:12px!important; line-height:1.45!important; }
  .panel-head .btn, .panel-head a.btn { flex:0 1 auto; }
  .empty, .empty-state { padding:28px 14px!important; }

  /* All dashboard/stat grids collapse predictably. */
  .grid, .stats, .metric-cards, .dashboard-mini-stats, .finance-kpis, .service-metric-cards,
  .payment-mini-stats, .scout-summary-grid, .executive-five-grid {
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important;
  }
  .split, .report-grid, .report-columns, .qr-layout, .scanner-layout, .profile-layout,
  .homepage-content-columns, .registration-builder-grid, .notification-layout,
  .payment-item-grid, .chat-app, .dashboard-analytics-grid, .dashboard-chart-grid {
    grid-template-columns:minmax(0,1fr)!important;
  }
  .stat-card, .metric-card, .mini-stat, .dashboard-kpi, .scout-summary-card { min-width:0!important; padding:12px!important; }
  .stat-card strong, .metric-card strong, .dashboard-kpi strong { font-size:21px!important; overflow-wrap:anywhere; }
  .stat-card span, .metric-card span, .dashboard-kpi span { font-size:10.5px!important; line-height:1.3!important; }

  /* Form controls: full width, thumb-friendly, no overlap. */
  .form-grid, .register-grid, .finance-form, .location-form, .crew-assignment-form,
  .payment-item-grid, .inline-builder, .form-stack { grid-template-columns:minmax(0,1fr)!important; gap:12px!important; }
  .form-grid > *, .register-grid > *, .finance-form > *, .location-form > *, .crew-assignment-form > * { min-width:0!important; grid-column:auto!important; }
  .span-2, .field.full { grid-column:auto!important; }
  label, .field { min-width:0!important; }
  input, select, textarea { min-width:0!important; max-width:100%!important; font-size:16px!important; /* prevents iOS auto-zoom */ }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height:var(--mobile-control)!important; padding:10px 11px!important; }
  input[type="checkbox"], input[type="radio"] { min-height:0!important; min-width:0!important; }
  textarea { min-height:100px!important; padding:11px!important; }
  .password-field input { padding-right:72px!important; }
  .form-actions, .modal-actions, .page-actions, .actions, .panel-actions, .table-actions,
  .scanner-controls, .location-actions, .editor-buttons, .photo-editor-foot,
  .attendance-popup-actions, .confirm-actions {
    display:flex!important; flex-wrap:wrap!important; gap:8px!important; width:100%;
  }
  .form-actions > *, .modal-actions > *, .page-actions > *, .actions > *, .panel-actions > *,
  .scanner-controls > *, .location-actions > * { flex:1 1 140px; min-width:0!important; }
  .btn, button.btn, a.btn { min-height:44px!important; padding:9px 12px!important; font-size:13px!important; line-height:1.25; white-space:normal; text-align:center; }

  /* Tabs act like native app segmented/scrollable navigation, never squeeze or overlap. */
  .subtabs, .role-subtabs, .action-tabs, .attendance-main-tabs, .attendance-secondary-tabs,
  .finance-tabs, .report-tabs, .tab-row, .tabs {
    display:flex!important; flex-wrap:nowrap!important; gap:7px!important; width:calc(100% + (var(--mobile-gutter) * 2))!important;
    max-width:none!important; min-width:0!important; margin-left:calc(var(--mobile-gutter) * -1)!important;
    margin-right:calc(var(--mobile-gutter) * -1)!important; padding:3px var(--mobile-gutter) 10px!important;
    overflow-x:auto!important; overflow-y:hidden!important; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    border-bottom:0!important; white-space:nowrap!important;
  }
  .subtabs::-webkit-scrollbar, .role-subtabs::-webkit-scrollbar, .action-tabs::-webkit-scrollbar,
  .attendance-main-tabs::-webkit-scrollbar, .attendance-secondary-tabs::-webkit-scrollbar,
  .finance-tabs::-webkit-scrollbar { display:none; }
  .subtabs > *, .role-subtabs > *, .action-tabs > *, .attendance-main-tabs > *,
  .attendance-secondary-tabs > *, .finance-tabs > *, .tabs > * { flex:0 0 auto!important; width:auto!important; min-width:max-content!important; max-width:none!important; margin:0!important; }
  .subtabs a, .role-subtabs a, .action-tabs .btn, .attendance-main-tabs a, .attendance-secondary-tabs a,
  .finance-tabs a { min-height:40px!important; padding:9px 12px!important; border-radius:999px!important; font-size:12px!important; }

  /* Filters become a clear stacked drawer. */
  .filters, .report-filters, .directory-filter, .attendance-scope-filters, .scouts-filter-grid,
  .inline-filter, .reports-toolbar, .finance-report-toolbar {
    display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:8px!important;
    width:100%!important; grid-template-columns:none!important;
  }
  .filters > *, .report-filters > *, .directory-filter > *, .attendance-scope-filters > *,
  .scouts-filter-grid > *, .inline-filter > *, .reports-toolbar > *, .finance-report-toolbar > * {
    width:100%!important; min-width:0!important; max-width:none!important;
  }
  .mobile-filter-toggle { position:relative; display:flex!important; width:100%!important; justify-content:space-between!important; background:var(--theme-panel,#fff)!important; }
  .mobile-filter-toggle::after { content:"⌄"; font-size:16px; }
  .mobile-filter-toggle[aria-expanded="true"]::after { content:"⌃"; }

  /* All normal data tables become labeled record cards. */
  .table-wrap { width:100%!important; max-width:100%!important; min-width:0!important; overflow:visible!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important; }
  .table-wrap.mobile-card-table table { min-width:0!important; width:100%!important; background:transparent!important; }
  .table-wrap.mobile-card-table thead { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
  .table-wrap.mobile-card-table tbody { display:grid!important; gap:10px!important; width:100%!important; }
  .table-wrap.mobile-card-table tr { display:block!important; width:100%!important; min-width:0!important; padding:11px 12px!important; border:1px solid var(--theme-line,var(--border))!important; border-radius:13px!important; background:var(--theme-panel,#fff)!important; box-shadow:0 4px 14px rgba(18,41,65,.05)!important; }
  .table-wrap.mobile-card-table td { display:grid!important; grid-template-columns:minmax(92px,34%) minmax(0,1fr)!important; gap:9px!important; width:100%!important; min-width:0!important; padding:7px 0!important; border:0!important; border-bottom:1px dashed color-mix(in srgb,var(--theme-line,var(--border)) 75%,transparent)!important; white-space:normal!important; overflow-wrap:anywhere!important; text-align:left!important; }
  .table-wrap.mobile-card-table td:last-child { border-bottom:0!important; }
  .table-wrap.mobile-card-table td::before { content:attr(data-label); color:var(--theme-muted,var(--muted))!important; font-size:10.5px!important; line-height:1.3; font-weight:650!important; text-transform:none!important; }
  .table-wrap.mobile-card-table td[colspan] { display:block!important; }
  .table-wrap.mobile-card-table td[colspan]::before { display:none!important; }
  .table-wrap.mobile-card-table td:first-child { min-width:0!important; }
  .table-wrap.mobile-card-table td:nth-child(n) { white-space:normal!important; }
  .table-wrap.mobile-card-table td:last-child .btn,
  .table-wrap.mobile-card-table td:last-child button,
  .table-wrap.mobile-card-table td:last-child a.btn { min-height:38px!important; margin:2px 4px 2px 0!important; }
  .table-wrap:not(.mobile-card-table) { overflow-x:auto!important; -webkit-overflow-scrolling:touch; }
  .table-wrap:not(.mobile-card-table) table { min-width:680px; }

  /* Pagination stays visible without overflowing. */
  .pagination, .pager { display:flex!important; flex-wrap:wrap!important; gap:6px!important; align-items:center; justify-content:flex-start; }
  .pagination > *, .pager > * { min-width:38px; min-height:38px; display:grid; place-items:center; }

  /* Dialogs become mobile sheets instead of oversized desktop popups. */
  dialog {
    width:calc(100vw - 16px)!important; max-width:calc(100vw - 16px)!important;
    height:auto!important; max-height:calc(100dvh - 18px)!important; margin:auto auto 8px!important;
    padding:0!important; border:0!important; border-radius:18px 18px 12px 12px!important; overflow:auto!important;
  }
  .modal-form { padding:14px!important; gap:13px!important; }
  .modal-head { position:sticky; top:0; z-index:2; margin:-14px -14px 2px!important; padding:13px 14px!important; border-radius:14px 14px 0 0!important; }
  .modal-head h2, .modal-head h3 { font-size:17px!important; line-height:1.25; }
  .detail-modal, .user-edit-dialog, .photo-editor-dialog { width:100%!important; max-width:100%!important; }

  /* QR/scanner pages stay inside viewport. */
  .qr-card, .rules-card, .scanner-card, .scan-result { padding:15px!important; }
  .qr-box { width:min(74vw,260px)!important; height:min(74vw,260px)!important; margin:18px auto 10px!important; }
  .scanner-card #reader { min-height:240px!important; }
  .scan-result dl { grid-template-columns:minmax(88px,34%) minmax(0,1fr)!important; }

  /* Chat and notification experiences become single-column mobile flows. */
  .chat-app { display:grid!important; gap:12px!important; }
  .chat-sidebar { width:100%!important; min-width:0!important; max-height:310px; overflow:auto; }
  .chat-main, .chat-thread, .notification-layout > * { min-width:0!important; width:100%!important; }
  .notification-picker-list { max-height:340px!important; }
  .notification-user-option { min-width:0!important; }

  /* Profile and media tools. */
  .profile-photo-row { gap:14px!important; }
  .profile-photo-actions, .profile-photo-actions form { width:100%!important; }
  .profile-photo-actions .btn { width:100%; }
  .edited-photo-wrap { width:100%; min-width:0; }
  .photo-editor-modal { padding:8px!important; align-items:end!important; }
  .photo-editor-dialog { max-height:calc(100dvh - 16px); overflow:auto; }

  /* Floating save no longer hides bottom content. */

  .flash { position:fixed!important; left:var(--mobile-gutter)!important; right:var(--mobile-gutter)!important; top:82px!important; width:auto!important; max-width:none!important; padding:12px 14px!important; font-size:13px!important; z-index:1200!important; }
}

@media (max-width: 390px), (max-device-width: 390px) {
  :root { --mobile-gutter:11px; }
  .grid, .stats, .metric-cards, .dashboard-mini-stats, .finance-kpis, .service-metric-cards,
  .payment-mini-stats, .scout-summary-grid, .executive-five-grid { grid-template-columns:1fr 1fr!important; gap:7px!important; }
  .stat-card, .metric-card, .mini-stat, .dashboard-kpi, .scout-summary-card { padding:10px!important; }
  .topbar h1 { font-size:17px!important; }
  .topbar p { font-size:10.5px!important; }
  .table-wrap.mobile-card-table td { grid-template-columns:minmax(82px,32%) minmax(0,1fr)!important; gap:7px!important; }
}
\n\n/* 2026-09-15 mobile readability: keep real tables and scroll only the table area. */\n@media (max-width:760px), (max-device-width: 760px){\n  html,body{max-width:100%;overflow-x:hidden!important}\n  .portal-body,.portal-main,.portal-content,.page-content{min-width:0!important;max-width:100%!important}\n  .table-wrap,.table-wrap.mobile-card-table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-inline:contain;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--theme-panel,#fff)!important;box-shadow:none!important}\n  .table-wrap table,.table-wrap.mobile-card-table table{display:table!important;width:max-content!important;min-width:720px!important;max-width:none!important;border-collapse:collapse!important;background:var(--theme-panel,#fff)!important}\n  .table-wrap thead,.table-wrap.mobile-card-table thead{display:table-header-group!important;position:static!important;width:auto!important;height:auto!important;margin:0!important;overflow:visible!important;clip:auto!important;white-space:normal!important}\n  .table-wrap tbody,.table-wrap.mobile-card-table tbody{display:table-row-group!important}\n  .table-wrap tr,.table-wrap.mobile-card-table tr{display:table-row!important;width:auto!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}\n  .table-wrap th,.table-wrap td,.table-wrap.mobile-card-table th,.table-wrap.mobile-card-table td{display:table-cell!important;width:auto!important;min-width:110px!important;max-width:320px!important;padding:10px 12px!important;border-bottom:1px solid var(--border)!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;vertical-align:top!important;font-size:clamp(11.5px,3.1vw,13px)!important;line-height:1.4!important}\n  .table-wrap th,.table-wrap.mobile-card-table th{white-space:nowrap!important;font-size:clamp(10.5px,2.9vw,12px)!important}\n  .table-wrap td::before,.table-wrap.mobile-card-table td::before{display:none!important;content:none!important}\n  .table-wrap td:has(.btn),.table-wrap td:last-child{min-width:140px!important}\n  .table-wrap .btn{min-height:34px!important;padding:7px 10px!important;font-size:11.5px!important;white-space:nowrap!important}\n  .panel,.card,.stat-card{min-width:0!important;max-width:100%!important}\n  input,select,textarea,button,.btn{max-width:100%}\n  .role-subtabs,.subtabs{max-width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch}\n  .role-subtabs a,.subtabs a{flex:0 0 auto!important;white-space:nowrap!important}\n}\n@media (max-width:390px), (max-device-width: 390px){\n  .table-wrap table,.table-wrap.mobile-card-table table{min-width:680px!important}\n  .table-wrap th,.table-wrap td,.table-wrap.mobile-card-table th,.table-wrap.mobile-card-table td{padding:9px 10px!important;font-size:11.5px!important}\n}\n
/* ========================================================================
   2026-09-15 FINAL MOBILE DATA TABLE CONTRACT
   Preserve real tables on phones. Never squeeze text into vertical letters.
   Only the table viewport scrolls horizontally; the page itself never does.
   ======================================================================== */
@media (max-width:760px), (max-device-width: 760px){
  .content,.panel,.card,.table-wrap,.scouts-fit-wrap{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  .table-wrap,.scouts-fit-wrap,.table-wrap.mobile-card-table{
    display:block!important;width:100%!important;overflow-x:auto!important;overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important;touch-action:pan-x pan-y!important;
  }
  .table-wrap>table,.scouts-fit-wrap>table,.scouts-fit-table,.scouts-table-v5,.table-wrap.mobile-card-table>table{
    display:table!important;width:max-content!important;min-width:900px!important;max-width:none!important;table-layout:auto!important;
    border-collapse:collapse!important;
  }
  .table-wrap>table thead,.scouts-fit-wrap>table thead,.table-wrap.mobile-card-table>table thead{display:table-header-group!important}
  .table-wrap>table tbody,.scouts-fit-wrap>table tbody,.table-wrap.mobile-card-table>table tbody{display:table-row-group!important}
  .table-wrap>table tr,.scouts-fit-wrap>table tr,.table-wrap.mobile-card-table>table tr{display:table-row!important;height:auto!important}
  .table-wrap>table th,.table-wrap>table td,.scouts-fit-wrap>table th,.scouts-fit-wrap>table td,.table-wrap.mobile-card-table>table th,.table-wrap.mobile-card-table>table td{
    display:table-cell!important;position:static!important;width:auto!important;max-width:none!important;height:auto!important;
    padding:10px 12px!important;vertical-align:middle!important;white-space:normal!important;
    word-break:keep-all!important;overflow-wrap:normal!important;hyphens:none!important;line-height:1.35!important;
  }
  .table-wrap>table th,.scouts-fit-wrap>table th{white-space:nowrap!important;min-width:100px!important}
  .table-wrap>table td,.scouts-fit-wrap>table td{min-width:120px!important}
  .table-wrap>table th:first-child,.table-wrap>table td:first-child,.scouts-fit-wrap>table th:first-child,.scouts-fit-wrap>table td:first-child{min-width:42px!important;width:42px!important}
  .scouts-table-v5 th:nth-child(2),.scouts-table-v5 td:nth-child(2){min-width:54px!important;width:54px!important}
  .scouts-table-v5 th:nth-child(3),.scouts-table-v5 td:nth-child(3){min-width:270px!important;width:270px!important}
  .scouts-table-v5 th:nth-child(4),.scouts-table-v5 td:nth-child(4){min-width:150px!important}
  .scouts-table-v5 th:nth-child(5),.scouts-table-v5 td:nth-child(5){min-width:145px!important}
  .scouts-table-v5 th:nth-child(6),.scouts-table-v5 td:nth-child(6){min-width:135px!important;white-space:nowrap!important}
  .scouts-table-v5 th:nth-child(7),.scouts-table-v5 td:nth-child(7){min-width:230px!important}
  .member-name-cell{display:flex!important;align-items:center!important;gap:9px!important;min-width:245px!important;width:245px!important}
  .member-name-copy{display:block!important;min-width:0!important;width:190px!important}
  .member-name-copy strong,.member-name-copy small,.scout-name-line{display:block!important;width:auto!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important}
  .member-name-copy strong{font-size:13px!important;line-height:1.3!important}
  .member-name-copy small{font-size:11px!important;line-height:1.3!important;margin-top:3px!important}
  .table-wrap td[data-label]::before,.table-wrap.mobile-card-table td::before{display:none!important;content:none!important}
  .table-wrap .action-tabs{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;min-width:max-content!important}
  .table-wrap .action-tabs .btn,.table-wrap td .btn{white-space:nowrap!important}
  .table-wrap td:has(textarea),.table-wrap td[data-label*="Reason"],.table-wrap td[data-label*="reason"],.table-wrap td[data-label*="Location"]{min-width:260px!important;max-width:360px!important;word-break:normal!important;overflow-wrap:break-word!important}
}
@media (max-width:390px), (max-device-width: 390px){
  .table-wrap>table,.scouts-fit-wrap>table,.scouts-fit-table,.scouts-table-v5{min-width:860px!important}
  .table-wrap>table th,.table-wrap>table td,.scouts-fit-wrap>table th,.scouts-fit-wrap>table td{padding:8px 10px!important;font-size:11.5px!important}
  .scouts-table-v5 th:nth-child(3),.scouts-table-v5 td:nth-child(3){min-width:245px!important;width:245px!important}
  .member-name-cell{min-width:220px!important;width:220px!important}.member-name-copy{width:170px!important}
}

/* ========================================================================
   MODERN VECTOR TAB SYSTEM & TAB ICONS (Zero-Emoji Modern Portal UI)
   ======================================================================== */
.portal-tab-icon,
.tab-icon {
  display: inline-block;
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform 0.18s ease, stroke 0.18s ease;
}

/* Tab containers across all 40+ portal modules */
.role-subtabs,
.subtabs,
.attendance-hub-tabs,
.fin-tabs,
.crew-tabs,
.crew-management-tabs,
.band-tabs,
.leadership-tabs,
.blog-tabs,
.settings-subtabs,
.scout-status-tabs,
.tabs {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 12px;
  margin: 0 0 14px 0;
}

.role-subtabs a,
.subtabs a,
.attendance-hub-tabs a,
.fin-tabs a,
.crew-tabs a,
.crew-management-tabs a,
.band-tabs a,
.leadership-tabs a,
.blog-tabs a,
.settings-subtabs a,
.scout-status-tabs a,
.tabs a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  background: var(--theme-panel, #ffffff);
  border: 1px solid var(--border, #dbe4ee);
  color: var(--text-muted, #5f748d);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.role-subtabs a:hover,
.subtabs a:hover,
.attendance-hub-tabs a:hover,
.fin-tabs a:hover,
.crew-tabs a:hover,
.crew-management-tabs a:hover,
.band-tabs a:hover,
.leadership-tabs a:hover,
.blog-tabs a:hover,
.settings-subtabs a:hover,
.scout-status-tabs a:hover,
.tabs a:hover {
  color: var(--primary, #1e3a5f);
  border-color: #b7cbde;
  background: #f4f8fc;
}

.role-subtabs a:hover .tab-icon,
.subtabs a:hover .tab-icon,
.attendance-hub-tabs a:hover .tab-icon,
.fin-tabs a:hover .tab-icon,
.crew-tabs a:hover .tab-icon,
.crew-management-tabs a:hover .tab-icon,
.band-tabs a:hover .tab-icon,
.leadership-tabs a:hover .tab-icon,
.blog-tabs a:hover .tab-icon,
.settings-subtabs a:hover .tab-icon,
.scout-status-tabs a:hover .tab-icon,
.tabs a:hover .tab-icon {
  transform: translateY(-1px);
}

.role-subtabs a.active,
.subtabs a.active,
.attendance-hub-tabs a.active,
.fin-tabs a.active,
.crew-tabs a.active,
.crew-management-tabs a.active,
.band-tabs a.active,
.leadership-tabs a.active,
.blog-tabs a.active,
.settings-subtabs a.active,
.scout-status-tabs a.active,
.tabs a.active {
  background: #1e3a5f !important;
  border-color: #1e3a5f !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.22);
}

.role-subtabs a.active .tab-icon,
.subtabs a.active .tab-icon,
.attendance-hub-tabs a.active .tab-icon,
.fin-tabs a.active .tab-icon,
.crew-tabs a.active .tab-icon,
.crew-management-tabs a.active .tab-icon,
.band-tabs a.active .tab-icon,
.leadership-tabs a.active .tab-icon,
.blog-tabs a.active .tab-icon,
.settings-subtabs a.active .tab-icon,
.scout-status-tabs a.active .tab-icon,
.tabs a.active .tab-icon {
  stroke: #ffffff;
}

/* Horizontal swipe for touch devices (Mobile phone support) */
@media (max-width: 760px), (max-device-width: 760px) {
  .role-subtabs,
  .subtabs,
  .attendance-hub-tabs,
  .fin-tabs,
  .crew-tabs,
  .crew-management-tabs,
  .band-tabs,
  .leadership-tabs,
  .blog-tabs,
  .settings-subtabs,
  .scout-status-tabs,
  .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    scrollbar-width: none !important;
  }
  .role-subtabs::-webkit-scrollbar,
  .subtabs::-webkit-scrollbar,
  .attendance-hub-tabs::-webkit-scrollbar,
  .fin-tabs::-webkit-scrollbar,
  .crew-tabs::-webkit-scrollbar,
  .crew-management-tabs::-webkit-scrollbar,
  .band-tabs::-webkit-scrollbar,
  .leadership-tabs::-webkit-scrollbar,
  .blog-tabs::-webkit-scrollbar,
  .settings-subtabs::-webkit-scrollbar,
  .scout-status-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none !important;
  }
  .role-subtabs a,
  .subtabs a,
  .attendance-hub-tabs a,
  .fin-tabs a,
  .crew-tabs a,
  .crew-management-tabs a,
  .band-tabs a,
  .leadership-tabs a,
  .blog-tabs a,
  .settings-subtabs a,
  .scout-status-tabs a,
  .tabs a {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 8px 15px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 761px) {
  .finance-unified-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .finance-unified-tabs a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .finance-unified-tabs .finance-tabs-divider {
    flex: 0 0 1px;
    align-self: stretch;
    margin: 6px 5px;
    background: var(--border);
  }
}