:root{ --bg:#f6f4ef;--card:#fff;--text:#1e221f;--muted:#6e756f;--border:#e3ded5; --brand:#1f6b4f;--brand2:#e7f2ed;--gold:#b28a38;--danger:#a03b32;--danger2:#f8e7e4; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif} button,input,select,textarea{font:inherit} button{cursor:pointer;touch-action:manipulation} a{text-decoration:none;color:inherit}.hidden{display:none!important} .container{max-width:1180px;margin:auto;padding:0 14px} .header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border)} .header-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:70px} .brand{display:flex;gap:10px;align-items:center;font-weight:950} .logo{width:44px;height:44px;border-radius:12px;background:var(--brand);color:white;display:grid;place-items:center;font-weight:950} .nav{display:flex;gap:14px;flex-wrap:wrap;font-weight:800;font-size:14px} .btn{border:0;border-radius:10px;padding:9px 13px;min-height:42px;font-weight:900;background:var(--brand);color:#fff} .btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border)} .btn.danger{background:var(--danger2);color:var(--danger);border:1px solid #efcbc5} .hero{padding:70px 0;background:linear-gradient(180deg,#edf6f1,#f6f4ef)} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center} .hero h1{font-size:48px;line-height:1.04;margin:0 0 12px}.hero p{font-size:18px;color:var(--muted);line-height:1.6} .hero-img{background:#fff;border:1px solid var(--border);border-radius:22px;min-height:320px;overflow:hidden;display:grid;place-items:center} .hero-img img{width:100%;height:100%;object-fit:cover} .section{padding:48px 0}.section h2{font-size:30px;margin:0 0 8px}.lead{color:var(--muted);margin-bottom:18px} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .card{background:#fff;border:1px solid var(--border);border-radius:15px;padding:14px} .gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:13px;border:1px solid var(--border)} .footer{background:#17231e;color:#e9f0ec;padding:28px 0;margin-top:36px} .login-wrap{max-width:430px;margin:60px auto;padding:14px}.login-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px} label{display:block;font-size:12px;font-weight:850;color:var(--muted);margin:9px 0 4px} input,select,textarea{width:100%;padding:10px 11px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text);min-width:0} textarea{min-height:96px;resize:vertical} .app{display:grid;grid-template-columns:250px 1fr;min-height:100vh} .sidebar{background:#17324D;color:#F7F3EA;padding:15px;position:sticky;top:0;height:100vh;overflow:auto} .sidebrand{display:flex;gap:10px;align-items:center;margin-bottom:16px}.sidebar .logo{background:#fff;color:var(--brand)} .side-nav{display:grid;gap:4px}.side-btn{width:100%;text-align:left;border:0;background:transparent;color:#dce7e1;border-radius:9px;padding:9px 10px;font-weight:800} .side-btn:hover,.side-btn.active{background:#2d5644;color:#fff} .main{padding:18px;min-width:0}.topbar{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .title{font-size:26px;font-weight:950}.screen{display:none}.screen.active{display:block} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:10px}.stat{background:#fff;border:1px solid var(--border);border-radius:13px;padding:12px} .stat small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:900}.stat b{display:block;font-size:21px;margin-top:4px} .toolbar{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-bottom:10px}.toolbar>*{min-width:130px;flex:1} .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.full{grid-column:1/-1}.actions{display:flex;gap:7px;flex-wrap:wrap} .table-wrap{overflow:auto;background:#fff;border:1px solid var(--border);border-radius:13px} table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:9px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}th{background:#faf9f5} .badge{display:inline-block;padding:4px 7px;border-radius:999px;background:var(--brand2);color:var(--brand);font-size:10px;font-weight:900} .muted{color:var(--muted);font-size:12px}.error{color:var(--danger);font-size:12px}.success{color:var(--brand);font-size:12px} .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}.tab{border:1px solid var(--border);background:#fff;border-radius:9px;padding:8px 10px;font-weight:850}.tab.active{background:var(--brand);color:#fff;border-color:var(--brand)} .preview-img{max-width:160px;max-height:160px;object-fit:cover;border-radius:12px;border:1px solid var(--border)} @media(max-width:900px){.hero-grid{grid-template-columns:1fr}.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.side-nav{grid-template-columns:repeat(3,1fr)}.side-btn{text-align:center;font-size:12px}.grid{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:1fr 1fr}} @media(max-width:540px){.nav{display:none}.grid,.form-grid{grid-template-columns:1fr}.side-nav{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:36px}.hero{padding:44px 0}} .loadingOverlay{position:fixed;inset:0;background:rgba(20,30,25,.32);z-index:9999;display:grid;place-items:center;backdrop-filter:blur(2px)} .loadingBox{background:#fff;border-radius:16px;padding:18px 24px;border:1px solid var(--border);box-shadow:0 16px 50px rgba(0,0,0,.15);display:flex;align-items:center;gap:12px;font-weight:900} .spinner{width:24px;height:24px;border:3px solid #d8e8e0;border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .statusGroup{display:flex;gap:5px;flex-wrap:wrap} .statusBtn{border:1px solid var(--border);background:#fff;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:900} .statusBtn.active[data-status="present"]{background:#e3f4eb;color:#176643;border-color:#bce1cc} .statusBtn.active[data-status="absent"]{background:#fde8e5;color:#a13830;border-color:#f0c3bd} .statusBtn.active[data-status="late"]{background:#fff3d7;color:#8a6519;border-color:#ead79d} .statusBtn.active[data-status="leave"]{background:#ececf7;color:#514d86;border-color:#d4d1eb} .searchResults{border:1px solid var(--border);border-radius:10px;background:#fff;max-height:220px;overflow:auto;margin-top:4px} .searchResult{padding:9px;border-bottom:1px solid var(--border);cursor:pointer} .searchResult:hover{background:var(--brand2)} .progressGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .progressCard{background:#fff;border:1px solid var(--border);border-radius:12px;padding:11px} .progressCard small{display:block;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase} .progressCard b{font-size:19px} .multiClass{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:220px;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:8px} .checkRow{display:flex;gap:7px;align-items:center;font-size:12px} .checkRow input{width:auto} .langBtn{min-height:36px;padding:7px 9px} .studentDetailGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .reportControls{display:flex;gap:8px;align-items:end;flex-wrap:wrap} .reportControls>*{min-width:150px} @media(max-width:700px){.progressGrid,.studentDetailGrid{grid-template-columns:1fr 1fr}} @media(max-width:450px){.progressGrid,.studentDetailGrid,.multiClass{grid-template-columns:1fr}} /* FINAL MOBILE / MEDIA UX */ .mobileMenuBtn{display:none} .sidebarBackdrop{display:none} .publicAlert{background:#fff6d8;border-bottom:1px solid #ead793} .publicAlertInner{max-width:1180px;margin:auto;padding:10px 14px;display:flex;align-items:center;gap:10px} .publicAlertInner img{width:54px;height:54px;object-fit:cover;border-radius:10px;flex:0 0 auto} .publicAlertText{min-width:0}.publicAlertText b{display:block}.publicAlertText p{margin:2px 0 0;color:#695720;font-size:13px} .videoEmbed{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#000} .videoNative{width:100%;aspect-ratio:16/9;border-radius:12px;background:#000} .appealCard{overflow:hidden;padding:0}.appealCard img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.appealBody{padding:14px} .appealMeta{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)} .driveHelp{background:#f5faf7;border:1px dashed #b9d7c8;border-radius:10px;padding:9px;font-size:12px;color:var(--muted)} .demoBox{border:1px solid #d9c986;background:#fff8dc} @media(max-width:900px){ body.menuOpen{overflow:hidden} .mobileMenuBtn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;font-size:20px} .app{display:block} .sidebar{ position:fixed;left:0;top:0;bottom:0;width:min(82vw,300px);height:100vh;z-index:1001; transform:translateX(-105%);transition:transform .2s ease;box-shadow:12px 0 30px rgba(0,0,0,.18) } body.menuOpen .sidebar{transform:translateX(0)} .sidebarBackdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s} body.menuOpen .sidebarBackdrop{opacity:1;pointer-events:auto} .side-nav{display:grid;grid-template-columns:1fr!important} .side-btn{text-align:left!important;font-size:14px!important;padding:11px!important} .main{padding:12px} .topbar{position:sticky;top:0;z-index:50;background:var(--bg);padding:6px 0 10px} } @media(max-width:540px){ .publicAlertInner{align-items:flex-start} .publicAlertInner img{width:46px;height:46px} .hero-img{min-height:220px} } /* MADRASA MANAGEMENT FINAL UPDATE */ .cardHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:9px}.cardHeader h3{margin:0}.collapseBody.hidden,.hidden{display:none!important}.recordList{display:grid;gap:8px;margin-top:10px}.recordRow{border:1px solid var(--border);border-radius:12px;padding:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.recordMain{min-width:0;flex:1}.recordActions{display:flex;gap:6px;flex-wrap:wrap}.softCard{background:#fbfcfa}.fieldError{font-size:11px;color:var(--danger);min-height:13px}.passwordField{display:flex;align-items:stretch}.passwordField input{border-radius:9px 0 0 9px}.passwordToggle{border:1px solid var(--border);border-left:0;background:#f7f8f6;border-radius:0 9px 9px 0;padding:0 11px;font-weight:800}.linkBtn{border:0;background:transparent;color:var(--brand);font-weight:850;padding:8px 0}.footerGrid{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.footerRight{text-align:right;font-size:13px;line-height:1.7}.footer a{color:#fff;text-decoration:underline}.btn.is-loading{opacity:.75;pointer-events:none;position:relative}.btn.is-loading::after{content:"";width:13px;height:13px;border:2px solid rgba(255,255,255,.5);border-top-color:currentColor;border-radius:50%;display:inline-block;margin-left:7px;vertical-align:-2px;animation:spin .7s linear infinite}.btn.secondary.is-loading::after{border-color:#d4ddd8;border-top-color:currentColor}.studentPhotoPicker{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.studentPhotoLarge{width:104px;height:126px;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:#f5f5f5}.studentIdPreview{width:min(100%,360px);border:1px solid #d8dfdb;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#f8f5e8,#fff);box-shadow:0 10px 30px rgba(0,0,0,.08)}.studentIdHead{background:#17324D;color:white;padding:12px;text-align:center}.studentIdBody{padding:14px;display:grid;grid-template-columns:92px 1fr;gap:12px}.studentIdBody img{width:92px;height:112px;object-fit:cover;border-radius:10px;border:2px solid #d6bd71}.studentIdMeta{font-size:13px;line-height:1.65}.sessionCard{border:1px solid var(--border);border-radius:13px;padding:12px}.sessionTop{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;flex-wrap:wrap}.statusLocked{background:#f2f3f1;color:#55615b}.modal{position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:10000;display:grid;place-items:center;padding:15px}.modalCard{position:relative;width:min(760px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;padding:18px;box-shadow:0 20px 70px rgba(0,0,0,.25)}.modalClose{position:absolute;right:10px;top:8px;border:0;background:#f1f1ef;border-radius:50%;width:34px;height:34px;font-size:22px}.studentPortal{min-height:100vh;background:#f6f5f0;padding-bottom:78px}.studentTop{position:sticky;top:0;z-index:20;background:white;border-bottom:1px solid var(--border);padding:10px max(12px,calc((100vw - 1050px)/2));display:flex;justify-content:space-between;align-items:center;gap:10px}.studentMain{max-width:1050px;margin:auto;padding:16px}.studentHeroCard{background:linear-gradient(135deg,#10283F,#17324D);color:#fff;border-radius:20px;padding:18px;display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center}.studentHeroCard img{width:110px;height:135px;object-fit:cover;border-radius:14px;border:3px solid rgba(255,255,255,.65)}.studentHeroCard .muted{color:#E8E0D2}.portalPane{display:none}.portalPane.active{display:block}.studentBottomNav{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(680px,calc(100% - 20px));display:grid;grid-template-columns:repeat(5,1fr);background:white;border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 35px rgba(0,0,0,.12);overflow:hidden;z-index:30}.studentBottomNav button{border:0;background:white;padding:12px 5px;font-size:11px;font-weight:850}.studentBottomNav button.active{background:var(--brand2);color:var(--brand)}.notificationBtn{position:relative}.countBadge{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:999px;background:#b93c32;color:white;font-size:10px;padding:0 4px}.emptyState,.errorState,.loadingState{padding:18px;text-align:center;border:1px dashed var(--border);border-radius:12px;color:var(--muted)}.errorState{color:var(--danger);border-color:#ebc0ba}.studentFilters select,.studentFilters input{min-width:170px} @media(max-width:700px){.footerGrid{display:block}.footerRight{text-align:left;margin-top:12px}.cardHeader{align-items:center}.recordRow{display:block}.recordActions{margin-top:8px}.studentHeroCard{grid-template-columns:82px 1fr}.studentHeroCard img{width:82px;height:102px}.studentBottomNav button{font-size:10px;padding:11px 2px}.reportControls>*{min-width:130px;flex:1}.studentFilters>*{min-width:100%!important}} .studentIdPreview{max-width:520px;border:1px solid #d7cfb4;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 12px 28px #0002}.studentIdHead{background:#17324D;color:#fff;padding:14px 18px;text-align:center;display:grid;gap:2px}.studentIdHead small{letter-spacing:.12em}.studentIdBody{padding:16px;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start}.studentIdBody img{width:120px;height:150px;object-fit:cover;border-radius:10px;border:2px solid #cbb569}.studentIdBody h3{margin-top:0}@media(max-width:520px){.studentIdBody{grid-template-columns:90px 1fr;gap:10px}.studentIdBody img{width:90px;height:120px}} .detailList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.detailItem{padding:10px;border:1px solid #e6e1d3;border-radius:10px;display:grid;gap:4px}.detailItem b{text-transform:capitalize}.detailItem span{overflow-wrap:anywhere}@media(max-width:600px){.detailList{grid-template-columns:1fr}} /* FINAL NAVY / CREAM / GOLD BRAND SYSTEM */ :root{--bg:#F7F3EA;--card:#FFFFFF;--text:#172433;--muted:#66717D;--border:#E2DBCD;--brand:#17324D;--brandDark:#0F2235;--brand2:#EAF0F5;--gold:#C6A15B;--goldSoft:#F4EAD5;--danger:#A33A35;--danger2:#F9E8E5} body{background:var(--bg)} .header{background:rgba(255,253,248,.96)}.logo{background:linear-gradient(145deg,var(--brand),var(--brandDark));box-shadow:0 8px 22px rgba(23,50,77,.2)} .btn{background:var(--brand)}.btn:hover{filter:brightness(.96)}.btn.secondary{background:#fff;color:var(--brand);border-color:#D8D0C1}.goldBtn{background:var(--gold);color:#132333} .sidebar{background:linear-gradient(180deg,#112A42,#0D1E30);color:#F7F3EA}.sidebar .logo{background:var(--gold);color:var(--brandDark)}.side-btn{color:#E7EDF3}.side-btn:hover,.side-btn.active{background:rgba(198,161,91,.18);color:#fff;border-left:3px solid var(--gold)} .footer{background:#0F2235}.badge{background:var(--goldSoft);color:#6B5425}.success{color:#286A57}.req{color:#B2453D}.infoBox{background:#F3EEE4;border:1px solid #DED2BD;border-radius:10px;padding:10px;color:#58616B;font-size:13px} .hero{position:relative;overflow:hidden;padding:82px 0;background:radial-gradient(circle at 82% 20%,rgba(198,161,91,.24),transparent 27%),linear-gradient(135deg,#10283F 0%,#17324D 52%,#244867 100%);color:#fff} .heroGlow{position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;bottom:-220px;background:rgba(198,161,91,.14);filter:blur(2px)} .hero-grid{position:relative;grid-template-columns:1.08fr .92fr;gap:48px}.heroKicker{display:inline-block;color:#F0DDAF;background:rgba(255,255,255,.08);border:1px solid rgba(240,221,175,.28);padding:7px 11px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase} .hero h1{font-size:58px;letter-spacing:-.035em;margin:16px 0 14px}.hero h1 span{color:#E7C982}.hero p{color:#DDE6EE;max-width:650px;font-size:19px}.hero .btn.secondary{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22)} .heroActions{margin-top:24px}.heroTrust{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}.heroTrust span{font-size:12px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#E7EDF3;border:1px solid rgba(255,255,255,.12)} .heroVisual{position:relative}.hero-img{min-height:390px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(145deg,#F4EAD5,#fff);box-shadow:0 28px 70px rgba(0,0,0,.28)}.hero-img:has(img.hidden):after{content:'Upload the hero image from Website CMS';color:#6B7480;font-weight:800;font-size:13px}.heroBadge{position:absolute;left:-20px;bottom:-18px;background:#fff;color:var(--brand);padding:13px 16px;border-radius:14px;box-shadow:0 15px 35px rgba(0,0,0,.2);border:1px solid #E8DDC9}.heroBadge b,.heroBadge small{display:block}.heroBadge small{color:var(--muted);margin-top:2px} .card,.stat,.table-wrap,.login-card{box-shadow:0 5px 20px rgba(23,50,77,.045)} .fieldError{display:block;color:var(--danger);font-size:11px;margin-top:4px;font-weight:700}.invalidField{border-color:var(--danger)!important;background:#FFF9F8!important} .sectionLoader{display:flex;align-items:center;justify-content:center;gap:9px;padding:22px;color:var(--muted)}.miniSpinner{width:20px;height:20px;border:3px solid #D7DFE6;border-top-color:var(--brand);border-radius:50%;animation:spin .75s linear infinite} .idGuardian{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px;align-items:start}.idGuardian .idValue{white-space:normal;overflow-wrap:anywhere;line-height:1.25} @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:30px}.heroVisual{max-width:680px}.heroBadge{left:12px}.hero h1{font-size:48px}} @media(max-width:540px){.hero{padding:58px 0}.hero h1{font-size:39px}.hero p{font-size:16px}.heroActions .btn{width:100%;justify-content:center;text-align:center}.hero-img{min-height:260px}.heroBadge{position:relative;left:auto;bottom:auto;margin:-16px 12px 0}.idGuardian{grid-template-columns:100px minmax(0,1fr)}} /* ===== CLIENT RELEASE QUALITY PASS ===== */ .studentTop .actions{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;flex-wrap:nowrap!important} .studentTop .actions .btn{width:auto!important;white-space:nowrap;margin:0!important} .studentHeroCard{background:linear-gradient(135deg,#10283F,#17324D 58%,#244867)!important;color:#fff!important;border:1px solid rgba(198,161,91,.5)} .studentHeroCard .muted{color:#E8E0D2!important}.studentHeroCard img{border-color:#C6A15B!important} .studentIdHead{background:linear-gradient(135deg,#10283F,#17324D)!important}.studentIdPreview{border-color:#C6A15B!important;background:#FFFDF8!important} .formHint{font-size:12px;color:var(--muted);margin-top:4px}.req{color:#A23C34;font-weight:900}.inputError{border-color:#B94B42!important;box-shadow:0 0 0 3px rgba(185,75,66,.08)!important} /* Marks entry: comfortable desktop sizing */ #marksBody input{min-width:92px;width:100%;font-size:16px;padding:11px 12px}#marksBody td:nth-child(1){min-width:180px}#marksBody td:nth-child(2),#marksBody td:nth-child(3){min-width:110px}#marksBody td:nth-child(4){min-width:180px} @media(max-width:700px){ #exams .softCard{padding:14px!important}#exams .toolbar{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}#exams .toolbar>*{width:100%!important;min-width:0!important} #marksBody,#marksBody tr,#marksBody td{display:block!important;width:100%!important}#marksBody tr{border:1px solid var(--border);border-radius:16px;margin:12px 0;padding:14px;background:#fff;box-shadow:0 5px 18px rgba(23,50,77,.05)} #marksBody td{border:0!important;padding:6px 0!important;min-width:0!important}#marksBody td:first-child{font-size:17px;font-weight:900;color:var(--brand);padding-bottom:10px!important;border-bottom:1px solid var(--border)!important;margin-bottom:5px} #marksBody td:nth-child(2)::before{content:'Marks Obtained';}#marksBody td:nth-child(3)::before{content:'Maximum Marks';}#marksBody td:nth-child(4)::before{content:'Remarks';}#marksBody td:nth-child(5)::before{content:'Action';} #marksBody td:not(:first-child)::before{display:block;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:2px 0 5px} #marksBody input{width:100%!important;min-width:0!important;height:48px!important;font-size:18px!important;padding:10px 12px!important}#marksBody td:nth-child(5) .btn{width:100%} #exams .table-wrap{overflow:visible!important;border:0!important;background:transparent!important}#exams table{min-width:0!important}#exams #marksBody+*{width:100%} #exams thead:has(+ #marksBody),#exams table:has(#marksBody) thead{display:none!important} .studentTop{align-items:center!important}.studentTop .brand{min-width:0;flex:1}.studentTop .brand b{font-size:15px;line-height:1.15}.studentTop .actions{flex:0 0 auto}.studentTop .actions .btn{padding:10px 11px!important;font-size:12px!important} } /* ========================================================= FINAL CLIENT-DEMO RELEASE ========================================================= */ .brandLogoSlot{overflow:hidden;display:grid!important;place-items:center;flex:0 0 auto}.brandLogoImg{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:inherit}.brandLogoFallback{font-size:25px;line-height:1;color:var(--gold)} .sidebrand .brandLogoFallback{color:var(--brandDark)} .sectionHeading{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900;color:var(--goldDark)} .announcementGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.announcementCard{display:flex;gap:14px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(23,50,77,.06)}.announcementCard h3{margin:2px 0 8px}.announcementCard p{margin:0;line-height:1.6}.announcementIcon{width:38px;height:38px;border-radius:12px;background:var(--cream);border:1px solid var(--gold);display:grid;place-items:center;color:var(--goldDark);flex:0 0 auto}.announcementMeta{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .donationPublicGrid .upiDonateCard{text-align:center}.qrFrame{width:min(100%,320px);aspect-ratio:1/1;margin:12px auto;background:#fff;border:1px solid var(--border);border-radius:18px;padding:12px;display:grid;place-items:center}.qrFrame img{width:100%;height:100%;object-fit:contain;border-radius:12px}.paymentMethods{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0}.paymentMethods span{padding:7px 10px;border-radius:999px;background:var(--cream);border:1px solid var(--border);font-size:12px;font-weight:800;color:var(--brand)}.upiIdLine{margin:8px 0;color:var(--brand);word-break:break-all} .logoPreview{max-width:120px;max-height:120px;object-fit:contain} .marksSetupGrid{display:grid;grid-template-columns:1fr 1fr .8fr;gap:12px;margin-bottom:10px}.marksSetupGrid label{display:block;margin-bottom:6px}.marksSetupGrid input,.marksSetupGrid select{width:100%}.marksToolbar{margin:8px 0 12px}.marksTableWrap table{min-width:650px}.marksTableWrap #marksBody input{width:100%;min-width:120px}.marksTableWrap #marksBody td:first-child{min-width:220px} .studentPortal .studentProfileCard,.studentPortal .studentHeroCard,.studentPortal .portalStudentCard{background:linear-gradient(135deg,var(--brandDark),var(--brand))!important;color:#fff!important}.studentPortal .studentProfileCard .muted,.studentPortal .studentHeroCard .muted,.studentPortal .portalStudentCard .muted{color:#e8edf2!important} .modernIdPreview{overflow:hidden;background:var(--cream);border:1px solid var(--gold);border-radius:20px}.modernIdHead{background:var(--brand);color:#fff;display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:12px 14px}.modernIdHead img,.idLogoFallback{width:42px;height:42px;border-radius:10px;background:#fff;object-fit:contain;display:grid;place-items:center;color:var(--goldDark);font-size:24px}.modernIdHead b{display:block;font-size:18px}.modernIdHead small{display:block;opacity:.9;margin-top:2px}.modernIdHead em{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.08em;color:#fff}.modernIdPreview .studentIdBody{padding:16px} .mobileActionMenu{display:none} @media(max-width:700px){ .marksSetupGrid{grid-template-columns:1fr}.marksToolbar{display:grid;grid-template-columns:1fr 1fr;gap:10px}.marksToolbar .btn{width:100%}.marksTableWrap{overflow:visible!important;border:0!important}.marksTableWrap table{min-width:0!important}.marksTableWrap thead{display:none}.marksTableWrap #marksBody,.marksTableWrap #marksBody tr,.marksTableWrap #marksBody td{display:block!important;width:100%!important}.marksTableWrap #marksBody tr{background:#fff;border:1px solid var(--border);border-radius:17px;padding:14px;margin:12px 0;box-shadow:0 6px 18px rgba(23,50,77,.05)}.marksTableWrap #marksBody td{border:0!important;padding:6px 0!important;min-width:0!important}.marksTableWrap #marksBody td::before{content:attr(data-label);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:900;margin-bottom:5px}.marksTableWrap #marksBody td:first-child::before{display:none}.marksTableWrap #marksBody td:first-child{font-size:18px;color:var(--brand);border-bottom:1px solid var(--border)!important;margin-bottom:5px;padding-bottom:10px!important}.marksTableWrap #marksBody input{width:100%!important;min-width:0!important;height:48px;font-size:17px}.marksTableWrap #marksBody .btn{width:100%} #studentsBody .desktopRowActions,#facultyBody .desktopRowActions,#donorsBody .desktopRowActions,#donationsBody .desktopRowActions,#expensesBody .desktopRowActions{display:none!important} #studentsBody .mobileActionMenu,#facultyBody .mobileActionMenu,#donorsBody .mobileActionMenu,#donationsBody .mobileActionMenu,#expensesBody .mobileActionMenu{display:block}.mobileActionMenu summary{list-style:none;cursor:pointer;background:var(--brand);color:#fff;border-radius:12px;padding:11px 14px;text-align:center;font-weight:900;white-space:nowrap}.mobileActionMenu summary::-webkit-details-marker{display:none}.mobileActionPanel{display:grid;gap:7px;margin-top:7px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 12px 25px rgba(23,50,77,.12)}.mobileActionItem{width:100%!important;margin:0!important} .studentTop{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}.studentTop>.actions{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;flex-wrap:nowrap!important}.studentTop>.actions .btn{width:auto!important;white-space:nowrap}.studentTop .brand{min-width:0}.studentTop [data-madrasa-name]{font-size:16px;line-height:1.15} } .topbarBrandLogo{width:46px;height:46px}.heroBadge{display:flex;align-items:center;gap:9px}.heroBadgeLogo{width:36px;height:36px}.footerBrand{display:flex;align-items:center;gap:12px}.footerBrandLogo{width:46px;height:46px} @media(max-width:700px){.topbarBrandLogo{width:42px;height:42px}.topbar .actions:first-child{min-width:0}.topbar [data-app-name]{font-size:clamp(22px,7vw,34px);line-height:1.06;overflow-wrap:anywhere}} /* ===== ULTIMATE CLIENT RELEASE POLISH ===== */ .studentPhotoPreview{width:120px!important;height:150px!important;max-width:120px!important;max-height:150px!important;object-fit:cover!important;border-radius:12px!important;border:2px solid var(--gold)!important;display:block!important;background:#fff!important} #studentPhotoPreviewWrap{max-width:140px!important} #subjectProgressResults .table-wrap{overflow-x:auto!important;overflow-y:hidden!important;max-width:100%!important;-webkit-overflow-scrolling:touch!important} #subjectProgressResults table{min-width:760px!important;width:max-content!important} .cleanProfileGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cleanProfileItem{border:1px solid var(--border);border-radius:13px;padding:12px;background:#fff}.cleanProfileItem b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:5px}.cleanProfileItem span{font-weight:750;color:var(--text);word-break:break-word} .performanceBadge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900;border:1px solid #d8caa5;background:#fff8e7;color:#6f5522}.performanceBadge.excellent{background:#e7f5eb;color:#23673a;border-color:#b6ddc0}.performanceBadge.good{background:#eef5ff;color:#245b91;border-color:#c6d9ef}.performanceBadge.improve{background:#fff1ef;color:#9b4338;border-color:#efc4be} .portalPerformance{display:flex;gap:7px;align-items:center;flex-wrap:wrap} .examSectionHeader{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.examSectionHeader h3{margin:0}.independentMarksCard{margin-bottom:10px}.independentMarksCard>.marksEntryCard{box-shadow:none!important;border:0!important;padding:0!important;background:transparent!important} .reportPreviewHint{background:linear-gradient(135deg,#10283F,#17324D);color:#fff;border-radius:14px;padding:14px;margin-top:10px;border:1px solid rgba(198,161,91,.55)} @media(max-width:700px){.cleanProfileGrid{grid-template-columns:1fr}.studentPhotoPreview{width:105px!important;height:132px!important}.independentMarksCard{padding:14px}.examSectionHeader{align-items:flex-start}.marksToolbar{grid-template-columns:1fr!important}.marksToolbar .btn{width:100%!important}} /* ===== Faculty Time & Attendance ===== */ .facultyClockGrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:12px}.facultyClockCard{overflow:hidden}.statusPill{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;font-weight:800;font-size:.84rem;background:#edf0f3;color:#17324d;white-space:nowrap}.statusOnSite{background:#e8f5ee;color:#17633d}.statusOut{background:#f1ede3;color:#72571c}.statusMissing{background:#f8e8e8;color:#8a2929}.scheduleSummary{display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px 0;color:#455568}.clockActionBox{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}.clockActionBox>div,.miniStat{border:1px solid #e4dfd2;background:#fbf8f1;border-radius:12px;padding:12px}.clockActionBox small,.miniStat small{display:block;color:#6d7782;margin-bottom:4px}.clockActionBox b,.miniStat b{font-size:1.12rem;color:#17324d}.attendanceClockActions .btn{min-width:130px}.checkoutReasonBox{margin-top:12px;padding:12px;border:1px solid #d9c89b;border-radius:12px;background:#fffaf0}.checkoutReasonBox select{margin:6px 0 10px}.checkoutReasonBox .btn{margin-right:6px}.facultyTodaySummary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.movementRow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eee7d9}.movementRow:last-child{border-bottom:0}.movementDot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}.movementDot.in{background:#2c8660}.movementDot.out{background:#ad7a1e}.movementRow>div{flex:1}.lateBadge{background:#fff0df!important;color:#9a4a13!important}.onsiteBadge{background:#e8f5ee!important;color:#17633d!important}.missingBadge{background:#f8e8e8!important;color:#8a2929!important}.facultyOwnerStats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.facultyOwnerStats>div{border:1px solid #e4dfd2;border-radius:12px;padding:12px;background:#fbf8f1}.facultyOwnerStats small{display:block;color:#6d7782}.facultyOwnerStats b{display:block;font-size:1.45rem;color:#17324d;margin-top:3px}.weekdayPicker{display:flex;flex-wrap:wrap;gap:8px}.weekdayPicker label{display:flex;align-items:center;gap:5px;border:1px solid #ded7c9;border-radius:9px;padding:7px 9px;background:#fff;cursor:pointer}.weekdayPicker input{width:auto;margin:0}.settingsSubsection{border-top:1px solid #e6dfd2;padding-top:12px;margin-top:4px}.settingsSubsection h4{margin:0 0 4px;color:#17324d}.attendanceLocationAction .btn{width:100%}.textAction{border:0;background:transparent;padding:4px 0;color:#816522;text-decoration:underline;cursor:pointer;font-weight:700}.successBox,.errorBox{border-radius:10px;padding:10px 12px;margin:10px 0}.successBox{background:#eaf6ef;color:#17633d;border:1px solid #c6e7d3}.errorBox{background:#fff0f0;color:#8a2929;border:1px solid #efcccc}.inlineLoader{display:inline-flex;align-items:center;gap:8px}.miniSpinner{width:15px;height:15px;border:2px solid #d5d9dd;border-top-color:#17324d;border-radius:50%;animation:spin .75s linear infinite} @media(max-width:760px){.facultyClockGrid{grid-template-columns:1fr}.facultyTodaySummary{grid-template-columns:1fr}.facultyOwnerStats{grid-template-columns:1fr 1fr}.clockActionBox{grid-template-columns:1fr}.attendanceClockActions{display:grid;grid-template-columns:1fr 1fr}.attendanceClockActions .btn{min-width:0;width:100%}.checkoutReasonBox .btn{width:100%;margin:5px 0}.weekdayPicker{gap:6px}.weekdayPicker label{font-size:.85rem;padding:6px 8px}} /* Faculty multi-session scheduling */ .scheduleGrid{display:grid;gap:10px;margin-top:12px}.scheduleDayRow{display:grid;grid-template-columns:80px 1fr;gap:12px;align-items:start;padding:10px;border:1px solid var(--border,#ddd4c3);border-radius:14px;background:#fff}.sessionChecks{display:flex;flex-wrap:wrap;gap:8px}.sessionChecks label{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--border,#ddd4c3);border-radius:12px;background:var(--soft,#faf7ef)}.sessionChecks small{color:var(--muted,#68707b)}.sessionChipWrap{display:flex;gap:8px;flex-wrap:wrap}.sessionChip{padding:8px 12px;border:1px solid var(--border,#ddd4c3);border-radius:999px;background:var(--soft,#faf7ef)}.scheduleMiniCard{margin-top:12px}.myScheduleRow{display:grid;grid-template-columns:54px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--border,#eee)}.myScheduleRow:last-child{border-bottom:0}@media(max-width:640px){.scheduleDayRow{grid-template-columns:1fr}.sessionChecks{display:grid;grid-template-columns:1fr}.sessionChecks label{width:100%}.myScheduleRow{grid-template-columns:46px 1fr}} /* ===== Final client-ready schedule + attendance polish ===== */ .sessionLegend{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px}.sessionLegend span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--soft);font-size:12px}.sessionLegend b{color:var(--brand);font-size:13px}.compactScheduleTableWrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:14px}.compactScheduleTable{width:100%;min-width:420px;border-collapse:collapse}.compactScheduleTable th,.compactScheduleTable td{text-align:center;padding:9px 10px;border-bottom:1px solid var(--border)}.compactScheduleTable thead th{background:var(--brand);color:#fff}.compactScheduleTable tbody th{background:var(--soft);color:var(--brand);text-align:left;position:sticky;left:0;z-index:1}.compactScheduleTable input[type="checkbox"]{width:20px;height:20px;accent-color:var(--brand);margin:0}.scheduleQuickActions{display:flex;justify-content:flex-end;margin:7px 0}.myScheduleCards{display:grid;gap:8px}.myScheduleDayCard{display:grid;grid-template-columns:54px 1fr;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:13px;background:#fff}.myScheduleDayCard>b{color:var(--brand)}.scheduleTick{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:7px;padding:5px 0}.scheduleTick>span{color:#2c8660;font-weight:1000}.scheduleTick small{white-space:nowrap;color:var(--muted)}.offBadge{display:inline-flex;padding:4px 9px;border-radius:999px;background:#f1ede3;color:#72571c;font-weight:800;font-size:12px}.attendanceHistoryFilters{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,.6fr) auto;gap:10px;align-items:end;margin-bottom:12px}.attendanceHistoryFilters label{display:block;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:4px} @media(max-width:700px){ .sessionLegend{display:grid;grid-template-columns:1fr 1fr}.sessionLegend span{border-radius:10px;justify-content:flex-start}.compactScheduleTable{min-width:360px}.compactScheduleTable th,.compactScheduleTable td{padding:9px 7px}.myScheduleDayCard{grid-template-columns:42px 1fr}.scheduleTick{grid-template-columns:18px 1fr}.scheduleTick small{grid-column:2;white-space:normal}.attendanceHistoryFilters{grid-template-columns:1fr}.attendanceHistoryFilters .btn{width:100%} .facultyAttendanceTableWrap,.facultyAttendanceHistoryWrap{overflow:visible!important;border:0!important}.facultyAttendanceTableWrap table,.facultyAttendanceHistoryWrap table{min-width:0!important}.facultyAttendanceTableWrap thead,.facultyAttendanceHistoryWrap thead{display:none}.facultyAttendanceTableWrap tbody,.facultyAttendanceTableWrap tr,.facultyAttendanceTableWrap td,.facultyAttendanceHistoryWrap tbody,.facultyAttendanceHistoryWrap tr,.facultyAttendanceHistoryWrap td{display:block;width:100%!important}.facultyAttendanceTableWrap tr,.facultyAttendanceHistoryWrap tr{background:#fff;border:1px solid var(--border);border-radius:15px;padding:12px;margin:10px 0;box-shadow:0 6px 18px rgba(23,50,77,.05)}.facultyAttendanceTableWrap td,.facultyAttendanceHistoryWrap td{border:0!important;padding:5px 0!important}.facultyAttendanceTableWrap td::before,.facultyAttendanceHistoryWrap td::before{content:attr(data-label);display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:900;margin-bottom:2px}.facultyAttendanceTableWrap td:first-child,.facultyAttendanceHistoryWrap td:first-child{font-size:16px;color:var(--brand);padding-bottom:9px!important;border-bottom:1px solid var(--border)!important;margin-bottom:5px} } /* Final client-ready Faculty scheduling + attendance cards */ .facultyAttendanceDateBar{display:grid;grid-template-columns:minmax(180px,260px) minmax(180px,320px);gap:12px;align-items:end;margin:0 0 14px}.facultyAttendanceDateBar label{display:block;font-size:12px;font-weight:850;color:var(--muted);margin-bottom:5px}.facultyAttendanceSessionCards{display:grid;gap:14px;margin-top:14px}.facultyDayCard{border:1px solid var(--border);border-radius:17px;background:#fff;padding:14px;box-shadow:0 7px 24px rgba(23,50,77,.05)}.facultyDayHead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--border)}.facultyDayHead>div{display:grid;gap:2px}.facultyDayHead b{font-size:18px;color:var(--brand)}.facultyDayHead small{color:var(--muted)}.facultySessionCardGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:11px}.facultySessionCard{border:1px solid var(--border);border-radius:14px;background:var(--soft);padding:12px}.facultySessionHead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}.facultySessionHead>div{display:grid;gap:2px}.facultySessionHead b{color:var(--brand);font-size:15px}.facultySessionHead small{color:var(--muted);font-weight:750}.facultySessionFacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.facultySessionFacts>div{background:#fff;border:1px solid var(--border);border-radius:11px;padding:9px;display:grid;gap:4px;min-width:0}.facultySessionFacts small{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:900}.facultySessionFacts b{font-size:15px}.movementDetails{margin-top:9px;border-top:1px solid var(--border);padding-top:8px}.movementDetails summary{cursor:pointer;font-weight:850;color:var(--brand)}.movementDetailRow{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:12px}.earlyBadge{background:#e8f5ef;color:#176744}.earlyLeaveBadge{background:#fff0e7;color:#9a4d16}.lateLeaveBadge,.lateBadge{background:#fff0e4;color:#9b521b}.completedBadge{background:#eaf3ff;color:#24517d}.breakBadge{background:#fff8df;color:#7a5a12}.upcomingBadge{background:#eef2f7;color:#536273}.facultyScheduleCreate{grid-column:1/-1}.facultyScheduleCreate>label{display:block;margin-bottom:7px}.legacyFacultySchedule{display:none!important} @media(max-width:700px){.facultyAttendanceDateBar{grid-template-columns:1fr}.facultySessionCardGrid{grid-template-columns:1fr}.facultyDayCard{padding:11px}.facultyDayHead{align-items:flex-start}.facultyDayHead .textAction{font-size:12px}.facultySessionFacts{grid-template-columns:1fr}.movementDetailRow{grid-template-columns:1fr 1fr}.movementDetailRow span:nth-child(3),.movementDetailRow span:nth-child(4){grid-column:1/-1}.sessionLegend{grid-template-columns:1fr 1fr}.compactScheduleTableWrap{width:100%;overflow-x:auto}.compactScheduleTable{min-width:360px}.facultyScheduleCreate{overflow:hidden}} /* Future-ready academic filters/history */ .checkboxGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:8px 0}.checkboxGrid label,.promotionStudent{display:flex;gap:8px;align-items:center;padding:9px 10px;border:1px solid var(--border,#d9d4c8);border-radius:10px;background:#fff}.checkboxList{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin:10px 0}.promotionStudent span{display:flex;flex-direction:column}.promotionStudent small{opacity:.7}.academicYearSelect{min-width:150px}@media(max-width:700px){.studentFilters{display:grid;grid-template-columns:1fr 1fr}.studentFilters input{grid-column:1/-1}.checkboxList{grid-template-columns:1fr}.reportControls{align-items:end}.reportControls>div{min-width:145px}} /* ===== FINAL CLIENT HARDENING ===== */ .clientBoundedList{max-height:520px;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-gutter:stable} .classSubjectsWorkspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:12px;align-items:start;margin-bottom:10px}.classSubjectsWorkspace>.card{margin:0}.assignedClassSubjectsCard{min-width:0}.assignedClassSubjectsCard .cardHeader{align-items:center}.assignedClassSubjectsCard .cardHeader select{max-width:220px}.assignedSubjectRow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border)}.assignedSubjectRow:last-child{border-bottom:0}.assignedSubjectRow>div{min-width:0}.assignedSubjectRow .muted{white-space:normal;overflow-wrap:anywhere;margin-top:3px}.assignedClassSubjectsCard .recordList{max-height:410px;overflow:auto} .universalMobileActions{display:none}.desktopOnlyActions{display:flex}.compactStudentHero{padding:14px!important;min-height:0!important}.compactStudentHero img,.compactStudentHero .studentPhotoLarge{width:68px!important;height:82px!important;object-fit:cover;border-radius:12px}.compactStudentHero h2{margin:0 0 5px;font-size:20px}.studentDashboardGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.studentDashboardGrid>.card{min-width:0}.studentAnnouncementsCard{grid-column:1/-1}.miniDashboardStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.miniDashboardStats>div{padding:10px;border:1px solid var(--border);border-radius:11px;background:var(--soft);text-align:center}.miniDashboardStats small{display:block;color:var(--muted)}.miniDashboardStats b{display:block;font-size:18px;margin-top:3px}.dashboardPrimary{display:flex;justify-content:space-between;gap:12px;align-items:center}.dashboardScore{text-align:right;display:grid;gap:4px;justify-items:end}.dashboardScore>b{font-size:25px;color:var(--brand)}.studentPhotoFallback{display:grid!important;place-items:center;background:#fff;color:var(--muted)}.priorityAnnouncement{border-left:4px solid var(--gold,#c6a15b);padding-left:10px}.portalProgressHead .actions{flex-wrap:wrap} @media(max-width:700px){.clientBoundedList{max-height:420px}.classSubjectsWorkspace{grid-template-columns:1fr}.assignedClassSubjectsCard .recordList{max-height:360px}.desktopOnlyActions{display:none!important}.universalMobileActions{display:block;position:relative;width:100%}.universalMobileActions summary{list-style:none;cursor:pointer;background:var(--brand);color:#fff;border-radius:10px;padding:10px 12px;text-align:center;font-weight:850;white-space:nowrap}.universalMobileActions summary::-webkit-details-marker{display:none}.universalMobileActionsPanel{display:grid;gap:7px;margin-top:7px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 24px rgba(23,50,77,.14);position:relative;z-index:20}.universalMobileActionsPanel .btn{width:100%;margin:0;min-height:42px}.studentDashboardGrid{grid-template-columns:1fr}.studentAnnouncementsCard{grid-column:auto}.compactStudentHero{display:grid!important;grid-template-columns:68px 1fr;gap:12px;align-items:center}.compactStudentHero h2{font-size:18px}.miniDashboardStats{grid-template-columns:repeat(3,1fr)}.portalProgressHead{align-items:flex-start}.portalProgressHead .actions{width:100%;display:grid;grid-template-columns:1fr}.portalProgressHead .actions .btn,.portalProgressHead .actions select{width:100%}.assignedSubjectRow{align-items:center}} /* Final responsive Class Subjects layout hardening */ .academicSubjectsSplit, .classSubjectsSplit, .class-subjects-split { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:20px !important; align-items:start !important; } .academicSubjectsSplit > *, .classSubjectsSplit > *, .class-subjects-split > * { min-width:0 !important; width:100% !important; position:relative !important; } @media (max-width:900px){ .academicSubjectsSplit, .classSubjectsSplit, .class-subjects-split { grid-template-columns:1fr !important; } } /* ===== Class Subjects workspace overlap fix ===== The Academics parent is itself a CSS grid. The dynamically-created side-by-side workspace must span the full parent grid; otherwise it is constrained to a single grid cell and its two internal columns overflow over neighbouring content. */ #academics > .grid > .classSubjectsWorkspace, #academics .grid > .classSubjectsWorkspace { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 16px !important; align-items: start !important; position: static !important; overflow: visible !important; box-sizing: border-box !important; } #academics .classSubjectsWorkspace > .card { min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; position: static !important; margin: 0 !important; align-self: start !important; } #academics .classSubjectsWorkspace #classSubjectsWrap, #academics .classSubjectsWorkspace #classSubjectForm, #academics .classSubjectsWorkspace .assignedClassSubjectsCard { min-width: 0 !important; max-width: 100% !important; } #academics .classSubjectsWorkspace #classSubjectChecks, #academics .classSubjectsWorkspace #assignedClassSubjectsList { max-height: 390px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } @media (max-width: 900px) { #academics > .grid > .classSubjectsWorkspace, #academics .grid > .classSubjectsWorkspace { grid-template-columns: 1fr !important; } } /* ===== FINAL FUTURE-READY ACADEMIC CONNECTIONS ===== */ .facultyTeachingGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;max-height:55vh;overflow-y:auto;padding-right:4px} .facultyTeachingCard{min-width:0;margin:0!important}.facultyTeachingClass{padding-bottom:8px;border-bottom:1px solid var(--line,#e5e7eb)} .facultyTeachingSubjects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px;max-height:220px;overflow-y:auto}.facultyTeachingSubjects.disabledSubjects{opacity:.55} .paStatus{display:inline-flex;gap:6px}.paStatus .statusBtn{min-width:44px;min-height:40px;font-weight:800}.paStatus .statusBtn.active{transform:none} #attendance .toolbar>div{min-width:150px}.clientBoundedList{max-height:420px;overflow-y:auto} @media(max-width:900px){.facultyTeachingGrid{grid-template-columns:1fr;max-height:60vh}.facultyTeachingSubjects{grid-template-columns:1fr 1fr}#attendance .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}#attendance .toolbar>button{width:100%}} @media(max-width:560px){.facultyTeachingSubjects{grid-template-columns:1fr}#attendance .toolbar{grid-template-columns:1fr}.paStatus .statusBtn{min-width:54px;min-height:44px}} /* FINAL MEDIA PICKER + BRANDING */ .nativeImagePicker{ display:block!important; width:100%!important; max-width:100%!important; min-height:46px!important; padding:7px!important; border:1px solid var(--border)!important; border-radius:10px!important; background:#fff!important; color:var(--text)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; position:static!important; cursor:pointer!important; } .nativeImagePicker::file-selector-button{ border:0; border-radius:8px; padding:8px 12px; margin-right:10px; background:var(--brand); color:white; font-weight:800; cursor:pointer; } .mediaPickerHost{min-width:0!important;overflow:visible!important} .fileSelectionStatus{ margin-top:6px;padding:7px 9px;border-radius:8px;background:#f4f1e9;color:#667085; font-size:13px;overflow-wrap:anywhere } .fileSelectionStatus.ok{background:#eaf6ef;color:#166534} .fileSelectionStatus.bad{background:#fff0ee;color:#9a332a} .chosenFilePreview{display:block!important;margin-top:8px!important;max-width:180px!important;max-height:150px!important;object-fit:contain!important} .logoPreview{max-width:120px!important;max-height:120px!important;object-fit:contain!important} .brandLogoImg{width:100%;height:100%;object-fit:contain;border-radius:inherit} .loginBrandName{font-size:19px;font-weight:950;margin:10px 0 2px;color:var(--brand)} .modalMadrasaIdentity{display:flex;align-items:center;gap:9px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border)} .modalBrandLogo{width:38px!important;height:38px!important} .modalMadrasaIdentity small{display:block;color:#6b7280;margin-top:2px} .settingsLogoUpload{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fbfaf6} @media(max-width:600px){ .nativeImagePicker{font-size:14px} .chosenFilePreview{max-width:130px!important;max-height:120px!important} } /* File selection must remain visible on desktop and mobile */ .mediaPickerHost input[type="file"]{ display:block!important; visibility:visible!important; opacity:1!important; pointer-events:auto!important; position:static!important; width:100%!important; min-height:46px!important; } .fileSelectionStatus{display:block!important} .chosenFilePreview:not(.hidden){display:block!important} /* Admission-style media pickers: native browser file control remains visible and stable. */ .mediaPickerHost input[type=file]{display:block!important;position:static!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;width:100%!important;min-height:44px!important;margin-top:5px!important} .mediaPickerHost .chosenFilePreview{display:block;max-width:180px;max-height:150px;object-fit:contain;margin-top:8px} /* Final independent CMS media controls */ .cmsIndependentMedia{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fbfaf6;min-width:0} .cmsIndependentMedia input[type=file]{display:block!important;width:100%!important;position:static!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;margin-top:8px!important;min-height:44px!important} .cmsCurrentMedia,.cmsSelectedPreview{margin-top:8px;padding:8px;border:1px solid var(--border);border-radius:10px;background:#fff} .cmsCurrentMedia span,.cmsSelectedPreview span{display:block;font-size:12px;font-weight:800;color:#667085;margin-bottom:6px} .cmsCurrentMedia img,.cmsSelectedPreview img{display:block;max-width:220px;max-height:160px;width:auto;height:auto;object-fit:contain;border-radius:8px} .cmsSelectedPreview.hidden{display:none!important} @media(max-width:600px){.cmsCurrentMedia img,.cmsSelectedPreview img{max-width:100%;max-height:145px}} /* Clean independent CMS media UI */ .cmsProfileLayout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:16px;align-items:start} .cmsMediaGrid{display:grid;gap:12px} .cmsMediaCard{min-width:0} .cmsMediaCard input[type=file]{ display:block!important;position:static!important;opacity:1!important;visibility:visible!important; pointer-events:auto!important;width:100%!important;min-height:44px!important;margin:8px 0!important } .cmsMediaCard button{margin-top:9px} .cmsSavedImage,.cmsMediaPreview{margin:8px 0;padding:8px;border:1px solid var(--border);border-radius:10px;background:#fff} .cmsSavedImage img,.cmsMediaPreview img{display:block;max-width:100%;max-height:190px;width:auto;height:auto;object-fit:contain;border-radius:8px;margin-top:6px} .cmsMediaPreview.hidden{display:none!important} @media(max-width:900px){.cmsProfileLayout{grid-template-columns:1fr}.cmsMediaGrid{grid-template-columns:1fr}} /* ===== 31 AUG 2026 REQUESTED CMS / MEDIA / DONATION POLISH ===== */ .mediaVideoFrame{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#000;position:relative}.mediaVideoFrame iframe,.mediaVideoFrame video{position:absolute;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;border:0;display:block}.videoEmbed,.videoNative{max-width:100%;min-width:0}.card:has(.mediaVideoFrame){min-width:0;overflow:hidden} .cmsRecordWithThumb{display:flex;align-items:center;gap:10px}.cmsListThumb{width:72px;height:54px;object-fit:cover;border-radius:9px;border:1px solid var(--border);flex:0 0 auto;background:#f4f4f2}.cmsViewMedia{margin:10px 0;max-width:620px}.cmsViewMedia>img{display:block;width:100%;max-height:360px;object-fit:contain;border-radius:14px;background:#f4f3ef} .announcementModalImage{display:block;width:min(100%,560px);max-height:330px;object-fit:contain;border-radius:14px;margin:0 auto 14px;background:#f5f3ee}.appealModalImage{display:block;width:min(100%,520px);max-height:300px;object-fit:contain;border-radius:14px;margin:0 auto 14px;background:#f5f3ee} .appealPublicGrid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important}.compactPublicAppeal{max-width:420px;width:100%;justify-self:start}.compactPublicAppeal>img{width:100%;height:190px;aspect-ratio:auto!important;object-fit:cover!important;background:#eee}.compactPublicAppeal .appealBody{display:flex;flex-direction:column;gap:8px}.compactPublicAppeal .appealBody h3,.compactPublicAppeal .appealBody p{margin:0}.appealDonateBtn{margin-top:auto;width:100%} .portalUpdatesStack{display:grid;gap:12px}.portalAppealGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.portalAppealCard{border:1px solid var(--border);border-radius:15px;background:#fff;overflow:hidden;min-width:0;display:flex;flex-direction:column}.portalAppealCard>img{width:100%;height:118px;object-fit:cover;display:block;background:#eee}.portalAppealContent{padding:11px;display:flex;flex-direction:column;gap:7px;min-height:0}.portalAppealContent p{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.portalAppealContent .btn{width:100%;margin-top:auto} .donateDialog{max-width:600px;margin:auto}.donateQrWrap{text-align:center;margin:8px 0 18px}.donateQrWrap img{display:block;width:min(230px,72vw);height:min(230px,72vw);object-fit:contain;margin:0 auto 8px;border:1px solid var(--border);border-radius:16px;padding:8px;background:#fff}.donateBankDetails{display:grid;gap:8px}.donateBankDetails>div{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}.donateBankDetails span{word-break:break-word} #faculty .toolbar{margin-bottom:10px}#faculty .toolbar>div{min-width:min(100%,320px)} @media(max-width:700px){.cmsRecordWithThumb{align-items:flex-start}.cmsListThumb{width:64px;height:50px}.appealPublicGrid{grid-template-columns:1fr!important}.compactPublicAppeal{max-width:none}.compactPublicAppeal>img{height:155px}.portalAppealGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.portalAppealCard>img{height:92px}.portalAppealContent{padding:9px}.portalAppealContent b{font-size:13px}.portalAppealContent p{font-size:12px;-webkit-line-clamp:2}.donateBankDetails>div{grid-template-columns:1fr;gap:2px}.donateQrWrap img{width:min(210px,68vw);height:min(210px,68vw)}} @media(max-width:420px){.portalAppealGrid{grid-template-columns:1fr 1fr;gap:8px}.portalAppealCard>img{height:82px}.portalAppealContent .btn{padding:9px 7px;font-size:12px}} /* Complete Urdu interface support */ body.urduMode{font-family:Tahoma,"Noto Nastaliq Urdu","Noto Naskh Arabic",Arial,sans-serif} body.urduMode label,body.urduMode button,body.urduMode th,body.urduMode td,body.urduMode h1,body.urduMode h2,body.urduMode h3,body.urduMode h4,body.urduMode p,body.urduMode .muted{letter-spacing:0} body.urduMode input,body.urduMode textarea,body.urduMode select{text-align:right} body.urduMode input[type="email"],body.urduMode input[type="url"],body.urduMode input[type="tel"],body.urduMode input[type="number"],body.urduMode input[type="date"],body.urduMode input[type="time"]{direction:ltr;text-align:left} body.urduMode .actions,body.urduMode .cardHeader,body.urduMode .topbar,body.urduMode .studentTop{direction:rtl} body.urduMode table{direction:rtl} body.urduMode .studentBottomNav{direction:rtl} /* FINAL PUBLIC + DONATION APPEAL MANAGEMENT LAYOUT — 01 Sep 2026 */ .publicContentCard{padding:0!important;overflow:hidden;min-width:0;display:flex;flex-direction:column}.publicCardBody{padding:14px;min-width:0}.publicCardBody h3{margin:0 0 7px}.publicCardBody p{margin:0;line-height:1.55}.mediaScrollBox{width:100%;max-width:100%;overflow:auto;background:#f4f3ef;border-radius:12px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.publicContentCard>.mediaScrollBox,.finalAppealCard>.mediaScrollBox{border-radius:0}.publicCardMedia{height:180px;max-height:180px}.appealCardMedia{height:150px;max-height:150px}.mediaScrollBox img{display:block;width:100%;height:auto;max-width:100%;min-height:100%;object-fit:contain}.publicVideoMedia{width:100%;max-width:100%;overflow:auto;background:#000}.publicVideoMedia .mediaVideoFrame{min-width:0;margin:0}.finalPublicGrid{align-items:start}.publicViewAllWrap{display:flex;justify-content:center;margin-top:16px}.viewAllCount{opacity:.7}.finalGalleryGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.galleryThumbBtn{appearance:none;border:0;padding:0;background:#fff;border-radius:13px;overflow:hidden;box-shadow:0 5px 18px rgba(23,50,77,.09);cursor:pointer;text-align:left;min-width:0}.galleryThumbBtn img{display:block;width:100%;height:130px;object-fit:cover}.galleryThumbBtn span{display:block;padding:8px 10px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.finalAppealCard{padding:0!important;overflow:hidden;max-width:none!important}.finalAppealCard .appealBody{padding:12px}.compactAnnouncementGrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important}.compactAnnouncementCard{padding:10px!important;gap:10px!important;align-items:flex-start;min-height:112px;overflow:hidden}.announcementThumb{width:76px;height:76px;flex:0 0 76px;object-fit:cover;border-radius:10px;background:#f3f1eb;border:1px solid var(--border)}.announcementThumbFallback{display:grid;place-items:center;font-size:24px;color:var(--goldDark)}.announcementCompactBody{min-width:0;flex:1}.announcementCompactBody h3{font-size:15px;margin:2px 0 5px!important;line-height:1.3}.announcementCompactBody p{font-size:13px;line-height:1.45;margin:0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.announcementCompactBody .announcementMeta{font-size:10px}.textActionBtn{border:0;background:transparent;padding:5px 0 0;color:var(--brand);font-weight:850;cursor:pointer}.publicCatalogOverlay{position:fixed;inset:0;z-index:9995;background:#f7f6f2;overflow:auto}.publicCatalogShell{width:min(1180px,100%);margin:auto;min-height:100%;padding:18px}.publicCatalogHeader{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:rgba(247,246,242,.96);backdrop-filter:blur(8px);padding:8px 0 14px;border-bottom:1px solid var(--border);margin-bottom:18px}.publicCatalogHeader h2{margin:0;text-align:center}.catalogCloseX{width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:25px;cursor:pointer}.publicCatalogBody{padding-bottom:40px}.catalogOpen{overflow:hidden}.appealManageList{display:grid;gap:9px}.appealManageRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--border);border-radius:13px;background:#fff;min-width:0}.appealManageSummary{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.appealManageThumb{width:66px;height:52px;border-radius:9px;object-fit:cover;flex:0 0 66px;border:1px solid var(--border);background:#f4f3ef}.appealManageFallback{display:grid;place-items:center;font-weight:900}.appealManageText{min-width:0}.appealManageText b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.appealManageActions{flex-wrap:nowrap}.modalMediaScroll{width:100%;max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:14px;background:#f4f3ef;margin:10px 0 14px;-webkit-overflow-scrolling:touch}.modalMediaScroll img{display:block;max-width:100%;width:auto;height:auto;margin:auto}.finalBankHeading{margin:0 0 10px}.donationPublicGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important} @media(max-width:700px){.publicCardMedia{height:155px;max-height:155px}.appealCardMedia{height:125px;max-height:125px}.finalGalleryGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.galleryThumbBtn img{height:112px}.compactAnnouncementGrid{grid-template-columns:1fr!important;gap:9px!important}.compactAnnouncementCard{min-height:94px}.announcementThumb{width:64px;height:64px;flex-basis:64px}.announcementCompactBody h3{font-size:14px}.announcementCompactBody p{font-size:12px}.appealManageRow{align-items:flex-start}.appealManageActions{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.appealManageRow{display:grid;grid-template-columns:1fr}.appealManageActions .btn{width:100%;padding:9px 7px}.publicCatalogShell{padding:10px}.publicCatalogHeader{grid-template-columns:auto 1fr auto}.publicCatalogHeader h2{font-size:18px}.donationPublicGrid{grid-template-columns:1fr!important}} /* ===== FINAL MOBILE DENSITY PASS — 01 SEP 2026 ===== */ @media (max-width:700px){ /* Two browse cards per row on mobile, as requested. */ #coursesGrid.finalPublicGrid, #videosGrid.finalPublicGrid, #eventsGrid.finalPublicGrid, #appealsGrid.finalPublicGrid, .publicCatalogBody .finalPublicGrid, #publicAnnouncementsGrid.compactAnnouncementGrid, .publicCatalogBody .compactAnnouncementGrid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } .publicContentCard, .finalAppealCard, .compactAnnouncementCard{ min-width:0!important; width:100%!important; max-width:none!important; border-radius:12px!important; } /* Compact image/video windows. Oversized media scrolls inside its card instead of escaping it. */ .publicCardMedia{height:94px!important;max-height:94px!important;overflow:auto!important} .appealCardMedia{height:92px!important;max-height:92px!important;overflow:auto!important} .publicVideoMedia{height:94px;max-height:94px;overflow:auto!important} .publicVideoMedia .mediaVideoFrame{height:94px!important;aspect-ratio:auto!important;border-radius:0!important} .mediaScrollBox img{min-width:100%;max-width:none;height:100%;min-height:100%;width:auto;object-fit:cover} .publicCardBody{padding:8px!important} .publicCardBody h3,.finalAppealCard h3{font-size:13px!important;line-height:1.25;margin:0 0 4px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .publicCardBody p,.finalAppealCard p{font-size:11px!important;line-height:1.35!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .publicCardBody .muted,.finalAppealCard .muted,.appealMeta{font-size:10px!important} .finalAppealCard .appealBody{padding:8px!important;gap:5px!important} .finalAppealCard .appealDonateBtn{padding:8px 5px!important;font-size:11px!important} /* Announcements are small thumbnail cards, not large text blocks. */ .compactAnnouncementCard{display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;gap:7px!important;padding:7px!important;min-height:82px!important;align-items:start!important} .announcementThumb{width:58px!important;height:58px!important;flex-basis:58px!important;border-radius:8px!important} .announcementCompactBody h3{font-size:12px!important;line-height:1.2!important;margin:1px 0 3px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .announcementCompactBody p{font-size:10px!important;line-height:1.3!important;-webkit-line-clamp:2!important} .announcementCompactBody .announcementMeta{font-size:9px!important} .textActionBtn{font-size:10px!important;padding-top:3px!important} /* Gallery remains a fast two-column thumbnail browser. */ #galleryGrid.finalGalleryGrid,.publicCatalogBody .finalGalleryGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} .galleryThumbBtn img{height:96px!important} .galleryThumbBtn span{padding:6px 7px!important;font-size:11px!important} /* Payment/bank cards stay full width for readable account numbers and QR. */ .donationPublicGrid{grid-template-columns:1fr!important} } @media (max-width:390px){ #coursesGrid.finalPublicGrid, #videosGrid.finalPublicGrid, #eventsGrid.finalPublicGrid, #appealsGrid.finalPublicGrid, .publicCatalogBody .finalPublicGrid, #publicAnnouncementsGrid.compactAnnouncementGrid, .publicCatalogBody .compactAnnouncementGrid, #galleryGrid.finalGalleryGrid, .publicCatalogBody .finalGalleryGrid{gap:6px!important} .compactAnnouncementCard{grid-template-columns:50px minmax(0,1fr)!important;padding:6px!important} .announcementThumb{width:50px!important;height:50px!important;flex-basis:50px!important} } /* COURSE IMAGE NO-SCROLL FIX — 01 SEP 2026 */ .courseCardMedia{overflow:hidden!important} .courseCardMedia img{width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important;object-position:center!important} @media(max-width:700px){.courseCardMedia{overflow:hidden!important}.courseCardMedia img{width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important}} /* CLIENT READY FINAL RESPONSIVE SAFETY */ html,body{max-width:100%;overflow-x:hidden} img,video,iframe,canvas,svg{max-width:100%} .card,.screen,.grid>*{min-width:0;max-width:100%} .publicMediaCard,.appealCard,.compactAnnouncementCard,.courseCard,.eventCard,.videoCard,.galleryThumbBtn{overflow:hidden!important} .publicMediaCard img,.appealCard img,.compactAnnouncementCard img,.courseCard img,.eventCard img,.videoCard img,.galleryThumbBtn img{width:100%!important;height:auto;aspect-ratio:16/9;object-fit:cover!important;overflow:hidden!important} @media(max-width:700px){.finalPublicGrid,.finalGalleryGrid,#coursesGrid,#galleryGrid,#videosGrid,#eventsGrid,#appealsGrid,#publicAnnouncementsGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.card{padding:10px}.btn{max-width:100%}.modalCard{width:min(94vw,680px)!important}.studentTop,.topbar{max-width:100%}} /* ===== PORTAL SCROLL SHELL FIX — 06 Sep 2026 ===== Desktop/laptop: fixed full-height sidebar + independently scrolling main content. Mobile/tablet: off-canvas sidebar; document/main scroll normally. */ @media (min-width: 901px){ html,body{height:100%;overflow:hidden} body:has(#appView.hidden){overflow:auto} #appView.app:not(.hidden){ height:100dvh; min-height:0; overflow:hidden; grid-template-columns:250px minmax(0,1fr); } #appView .sidebar{ position:sticky; top:0; align-self:start; width:250px; height:100dvh; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; } #appView .main{ height:100dvh; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; } #appView .topbar{ position:sticky; top:0; z-index:60; background:var(--bg); padding-top:6px; } } @media (max-width: 900px){ html,body{height:auto;min-height:100%;overflow-x:hidden} #appView.app:not(.hidden){height:auto;min-height:100vh;overflow:visible} #appView .main{ height:auto; min-height:100vh; overflow:visible; } #appView .sidebar{ position:fixed; top:0; bottom:0; left:0; width:min(84vw,300px); height:100dvh; max-height:100dvh; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; } #appView .topbar{position:sticky;top:0;z-index:60} body.menuOpen{overflow:hidden} } /* ===== PUBLIC MEDIA: NO INTERNAL IMAGE SCROLLBARS — 06 Sep 2026 ===== Individual public card media must never scroll. The surrounding page/list may scroll normally. Images fill their media box responsively. */ .publicContentCard > .mediaScrollBox, .finalAppealCard > .mediaScrollBox, .publicCardMedia, .appealCardMedia, .mediaScrollBox, .publicVideoMedia{ overflow:hidden !important; overflow-x:hidden !important; overflow-y:hidden !important; scrollbar-width:none !important; } .mediaScrollBox::-webkit-scrollbar, .publicVideoMedia::-webkit-scrollbar{ display:none !important; width:0 !important; height:0 !important; } .publicCardMedia img, .appealCardMedia img, .publicContentCard > .mediaScrollBox img, .finalAppealCard > .mediaScrollBox img{ display:block !important; width:100% !important; height:100% !important; min-height:0 !important; max-width:100% !important; max-height:100% !important; object-fit:cover !important; object-position:center !important; overflow:hidden !important; } /* ===== MOBILE HERO + VIDEO + OWNER EVENT MEDIA FIX — 06 Sep 2026 ===== */ .reportPreviewHint{display:none!important} .eventOwnerThumb{width:64px;height:48px;border-radius:9px;object-fit:cover;flex:0 0 64px;border:1px solid var(--border);background:#f3f1eb} .eventOwnerMain{display:flex!important;align-items:center;gap:10px;min-width:0} .eventOwnerMain>div{min-width:0} .mobileVideoPoster{display:none} .mobileVideoPlayerShell{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.86);padding:16px;align-items:center;justify-content:center} .mobileVideoPlayerShell:not(.hidden){display:flex} .mobileVideoPlayerBox{width:min(920px,100%);background:#000;border-radius:16px;overflow:hidden;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.45)} .mobileVideoPlayerBox .mediaVideoFrame{width:100%!important;height:auto!important;aspect-ratio:16/9!important;border-radius:0!important;margin:0!important;overflow:hidden!important;background:#000!important} .mobileVideoPlayerBox iframe,.mobileVideoPlayerBox video{width:100%!important;height:100%!important;position:absolute!important;inset:0!important;border:0!important} .mobileVideoClose{position:absolute;top:8px;right:8px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.94);font-size:24px;font-weight:900;cursor:pointer} @media(max-width:700px){ /* Hero image is the first visual after the public header on phones. */ .hero-grid{display:flex!important;flex-direction:column!important} .heroVisual{order:1!important;width:100%!important;margin-bottom:16px!important} .heroCopy{order:2!important} .heroVisual .hero-img{height:clamp(210px,55vw,300px)!important;min-height:210px!important;overflow:hidden!important;border-radius:20px!important} .heroVisual .hero-img img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important} /* Never squeeze embedded players into a 94px scroller. */ .publicVideoMedia{height:auto!important;max-height:none!important;aspect-ratio:16/9!important;overflow:hidden!important;position:relative!important;background:#000!important} .publicVideoMedia .mediaVideoFrame{width:100%!important;height:100%!important;aspect-ratio:16/9!important;border-radius:0!important;overflow:hidden!important;background:#000!important} .publicVideoMedia .mediaVideoFrame iframe,.publicVideoMedia .mediaVideoFrame video{width:100%!important;height:100%!important;position:absolute!important;inset:0!important} .publicVideoCard.mobileVideoReady .publicVideoMedia>.mediaVideoFrame{visibility:hidden!important;pointer-events:none!important} .mobileVideoPoster{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;padding:0!important;background:#000!important;cursor:pointer!important;overflow:hidden!important;z-index:2!important} .mobileVideoPoster img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;opacity:.88} .mobileVideoPoster .mobilePlayIcon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:40px;border-radius:12px;background:rgba(220,0,0,.94);color:#fff;display:grid;place-items:center;font-size:23px;padding-left:3px;box-shadow:0 5px 18px rgba(0,0,0,.28)} .mobileVideoPoster.drivePoster .mobilePlayIcon{background:rgba(23,50,77,.94)} } /* DRIVE VIDEO MOBILE VISIBILITY FIX */ @media(max-width:700px){ .mobileVideoPoster.drivePoster{ background:linear-gradient(135deg,#17324d,#264e72)!important; } .mobileVideoPoster.drivePoster .driveVideoLabel{ position:absolute!important; left:12px!important; bottom:10px!important; right:12px!important; color:#fff!important; font-size:12px!important; font-weight:800!important; text-align:left!important; letter-spacing:.02em!important; text-shadow:0 1px 2px rgba(0,0,0,.4)!important; z-index:3!important; } .mobileVideoPoster.drivePoster img + .driveVideoLabel{ background:rgba(0,0,0,.48)!important; padding:5px 7px!important; border-radius:8px!important; width:max-content!important; max-width:calc(100% - 24px)!important; } } /* DESKTOP GOOGLE DRIVE VIDEO CARD FIX */ .publicVideoCard.publicVideoPosterReady .publicVideoMedia{position:relative!important;background:#000!important;overflow:hidden!important} @media (max-width:700px){ .publicVideoCard.publicVideoPosterReady .publicVideoMedia>.mediaVideoFrame{visibility:hidden!important;pointer-events:none!important} } @media (min-width:701px){ .publicVideoCard.desktopDrivePosterReady .publicVideoMedia>.mediaVideoFrame{visibility:hidden!important;pointer-events:none!important} .publicVideoCard.desktopDrivePosterReady .mobileVideoPoster{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;padding:0!important;background:#000!important;cursor:pointer!important;overflow:hidden!important;z-index:2!important} .publicVideoCard.desktopDrivePosterReady .mobileVideoPoster img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;opacity:.88} .publicVideoCard.desktopDrivePosterReady .mobileVideoPoster .mobilePlayIcon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:46px;border-radius:12px;background:rgba(23,50,77,.94);color:#fff;display:grid;place-items:center;font-size:25px;padding-left:3px;box-shadow:0 5px 18px rgba(0,0,0,.28)} .publicVideoCard.desktopDrivePosterReady .driveVideoLabel{position:absolute!important;left:14px!important;bottom:12px!important;color:#fff!important;font-size:13px!important;font-weight:800!important;letter-spacing:.02em!important;text-shadow:0 1px 2px rgba(0,0,0,.4)!important;z-index:3!important;background:rgba(0,0,0,.48)!important;padding:6px 8px!important;border-radius:8px!important;max-width:calc(100% - 28px)!important} } /* CMS SAVED VIDEO PREVIEW FIX */ .cmsVideoFallback{display:grid!important;place-items:center!important;background:#111!important;color:#fff!important;font-size:26px!important;font-weight:900!important;border-radius:10px!important;overflow:hidden!important} .cmsVideoFallback.drive{background:linear-gradient(135deg,#17324d,#264e72)!important} .cmsVideoFallback span{transform:translateX(1px)} /* VIDEO RECOVERY SAFETY — stable, non-recursive */ .publicVideoCard:not(.publicVideoPosterReady) .publicVideoMedia>.mediaVideoFrame{visibility:visible!important;pointer-events:auto!important} /* ========================================================= PREMIUM PUBLIC WEBSITE — CLIENT IMPRESSION FINAL ========================================================= */ #publicView.premiumPublic{--pnavy:#102d47;--pnavy2:#173b5b;--pgold:#cda858;--pgold2:#e2c47e;--pcream:#fbf8f0;--psoft:#f4eddf;--pborder:rgba(187,145,67,.46);background:linear-gradient(180deg,#fbf8ef 0%,#f8f3e7 100%);color:#17283c} #publicView.premiumPublic .container{width:min(1180px,calc(100% - 36px))} #publicView.premiumPublic .header{position:sticky;top:0;z-index:120;background:rgba(13,42,66,.97)!important;border-bottom:1px solid rgba(218,180,102,.28);backdrop-filter:blur(14px);box-shadow:0 8px 28px rgba(8,26,41,.14)} #publicView.premiumPublic .header-row{min-height:76px;gap:14px} #publicView.premiumPublic .brand{color:#fff;font-family:Georgia,'Times New Roman',serif;font-weight:800;letter-spacing:.01em;gap:11px} #publicView.premiumPublic .brand .logo{border:1px solid rgba(222,188,116,.45);background:rgba(255,255,255,.07);box-shadow:none} #publicView.premiumPublic .brandLogoImg{object-fit:contain!important} #publicView.premiumPublic .nav a{color:rgba(255,255,255,.86);font-weight:700;font-size:14px;position:relative;padding:28px 4px 23px} #publicView.premiumPublic .nav a:hover{color:#f0d58f} #publicView.premiumPublic .nav a:hover:after{content:"";position:absolute;left:4px;right:4px;bottom:16px;height:2px;background:var(--pgold);border-radius:99px} #publicView.premiumPublic .premiumDonateTop{background:linear-gradient(135deg,#e8ca80,#cba34f)!important;color:#132d45!important;border:1px solid #f0d99c!important;box-shadow:0 8px 20px rgba(189,142,54,.24)!important;white-space:nowrap;display:inline-flex!important;align-items:center;gap:7px} #publicView.premiumPublic .langBtn{border-color:rgba(255,255,255,.28)!important;color:#fff!important;background:rgba(255,255,255,.07)!important} #publicView.premiumPublic .header [data-action="login"]{background:#fff!important;color:#15334f!important;border-color:#fff!important} #publicView.premiumPublic .hero{position:relative;min-height:610px;background:var(--pnavy);overflow:hidden;padding:0!important;border-bottom:1px solid var(--pborder)} #publicView.premiumPublic .heroGlow{display:none!important} #publicView.premiumPublic .hero-grid{position:relative;min-height:610px;display:block!important;padding:0!important;width:100%!important;max-width:none!important} #publicView.premiumPublic .heroVisual{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;order:0!important;z-index:0;margin:0!important} #publicView.premiumPublic .hero-img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#17334d!important;box-shadow:none!important} #publicView.premiumPublic .hero-img img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:saturate(.92) contrast(1.02)} #publicView.premiumPublic .heroVisual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,31,50,.96) 0%,rgba(8,31,50,.88) 30%,rgba(8,31,50,.48) 58%,rgba(8,31,50,.12) 100%),linear-gradient(180deg,rgba(8,31,50,.12),rgba(8,31,50,.28));z-index:1;pointer-events:none} #publicView.premiumPublic .heroBadge{display:none!important} #publicView.premiumPublic .heroCopy{position:relative;z-index:3;width:min(1180px,calc(100% - 48px));margin:0 auto;padding:118px 0 92px;max-width:none!important;color:#fff} #publicView.premiumPublic .heroKicker{display:inline-block;color:#efd286;border:1px solid rgba(232,202,128,.38);background:rgba(14,44,69,.55);border-radius:999px;padding:9px 15px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;font-size:12px} #publicView.premiumPublic .hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(48px,6vw,82px);line-height:.98;letter-spacing:-.035em;max-width:760px;margin:24px 0 20px;color:#fff;text-shadow:0 3px 20px rgba(0,0,0,.2)} #publicView.premiumPublic .hero h1 span{color:#e6c46f} #publicView.premiumPublic #heroTagline{max-width:580px;color:rgba(255,255,255,.88);font-size:19px;line-height:1.65} #publicView.premiumPublic .heroActions{margin-top:28px;gap:12px} #publicView.premiumPublic .heroActions .btn{min-height:48px;border-radius:999px;padding:0 22px;font-weight:900} #publicView.premiumPublic .heroActions .btn:first-child{background:#e1bd68;color:#17324b;border-color:#ebd28f} #publicView.premiumPublic .heroActions .secondary{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.5)!important} #publicView.premiumPublic .heroActions .goldBtn{background:#e1bd68!important;color:#17324b!important;border-color:#ebd28f!important} #publicView.premiumPublic .heroTrust{margin-top:28px;gap:9px} #publicView.premiumPublic .heroTrust span{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.075);color:rgba(255,255,255,.9);box-shadow:none} #publicView.premiumPublic .section{padding:72px 0;position:relative} #publicView.premiumPublic .section:nth-of-type(even){background:rgba(255,255,255,.28)} #publicView.premiumPublic h2{font-family:Georgia,'Times New Roman',serif;color:#142e49;letter-spacing:-.02em;font-size:clamp(30px,4vw,46px);margin-bottom:24px} #publicView.premiumPublic .premiumSectionTitle{display:flex;align-items:center;gap:13px} #publicView.premiumPublic .premiumSectionTitle:before{content:attr(data-premium-icon);width:42px;height:42px;display:grid;place-items:center;background:linear-gradient(135deg,#d5ad59,#b88a38);border-radius:11px;color:#fff;font-family:Arial,sans-serif;font-size:21px;box-shadow:0 7px 20px rgba(170,124,47,.16)} #publicView.premiumPublic #about{background:radial-gradient(circle at 50% 0,rgba(214,179,107,.09),transparent 35%),linear-gradient(180deg,#fffdf8,#faf5e9);padding-top:78px} #publicView.premiumPublic #about>.container>h2{text-align:center;font-size:clamp(38px,5vw,58px);margin-bottom:18px} #publicView.premiumPublic #about .lead{max-width:860px;margin:0 auto;text-align:center;color:#586777;font-size:18px;line-height:1.75} #publicView.premiumPublic .aboutOrnament{display:flex;align-items:center;justify-content:center;gap:15px;margin:26px auto 32px;color:#c59d4c} #publicView.premiumPublic .aboutOrnament span{width:76px;height:1px;background:linear-gradient(90deg,transparent,#c59d4c)} #publicView.premiumPublic .aboutOrnament span:last-child{background:linear-gradient(90deg,#c59d4c,transparent)} #publicView.premiumPublic .aboutOrnament i{font-style:normal;font-size:23px} #publicView.premiumPublic #about .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} #publicView.premiumPublic #about .card{position:relative;padding:30px 24px 28px!important;text-align:center;border:1.5px solid var(--pborder)!important;border-radius:22px!important;background:linear-gradient(180deg,#fff,#fffaf0)!important;box-shadow:0 14px 36px rgba(45,53,62,.07)!important;overflow:hidden} #publicView.premiumPublic #about .card:after{content:"";position:absolute;width:120px;height:120px;right:-55px;bottom:-55px;border:18px double rgba(200,162,84,.08);border-radius:50%;pointer-events:none} #publicView.premiumPublic .aboutIcon{width:68px;height:68px;margin:0 auto 17px;border-radius:50%;display:grid;place-items:center;background:#14324d;color:#e6c46e;border:3px solid #e4c677;font-size:28px;font-family:Arial,sans-serif;box-shadow:0 8px 22px rgba(16,45,71,.12)} #publicView.premiumPublic #about .card h3{font-family:Georgia,'Times New Roman',serif;font-size:28px;color:#142e49;margin:0 0 12px} #publicView.premiumPublic #about .card p{color:#526170;line-height:1.65;margin:0} #publicView.premiumPublic .publicContentCard,#publicView.premiumPublic .galleryThumbBtn,#publicView.premiumPublic .compactAnnouncementCard,#publicView.premiumPublic .finalAppealCard,#publicView.premiumPublic #eventsGrid>.card,#publicView.premiumPublic #coursesGrid>.card{border:1.5px solid var(--pborder)!important;background:#fffdf8!important;border-radius:18px!important;box-shadow:0 10px 26px rgba(30,46,60,.065)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden!important} #publicView.premiumPublic .publicContentCard:hover,#publicView.premiumPublic .galleryThumbBtn:hover,#publicView.premiumPublic .finalAppealCard:hover{transform:translateY(-3px);border-color:#c69a43!important;box-shadow:0 16px 34px rgba(30,46,60,.1)!important} #publicView.premiumPublic .publicCardMedia,#publicView.premiumPublic .appealCardMedia{overflow:hidden!important;background:#eee6d8!important} #publicView.premiumPublic .publicCardMedia img,#publicView.premiumPublic .appealCardMedia img,#publicView.premiumPublic .galleryThumbBtn img{width:100%!important;height:100%!important;object-fit:cover!important;overflow:hidden!important} #publicView.premiumPublic #coursesGrid,#publicView.premiumPublic #eventsGrid,#publicView.premiumPublic #videosGrid,#publicView.premiumPublic #appealsGrid{gap:18px!important} #publicView.premiumPublic #coursesGrid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important} #publicView.premiumPublic #eventsGrid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important} #publicView.premiumPublic #videosGrid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important} #publicView.premiumPublic .finalGalleryGrid{gap:14px!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important} #publicView.premiumPublic .galleryThumbBtn span{color:#18364f;padding:10px 11px;font-weight:850} #publicView.premiumPublic .publicCardBody{padding:14px 15px 16px!important} #publicView.premiumPublic .publicCardBody h3{font-family:Georgia,'Times New Roman',serif;color:#17334e;font-size:19px} #publicView.premiumPublic .publicCardBody p{color:#65717d;font-size:14px} #publicView.premiumPublic .publicVideoMedia{border-bottom:1px solid rgba(195,151,70,.25)!important} #publicView.premiumPublic .mobileVideoPoster .driveVideoLabel{display:none!important} #publicView.premiumPublic .mobileVideoPoster:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,20,32,.25));pointer-events:none} #publicView.premiumPublic .mobilePlayIcon{z-index:3!important;border:2px solid rgba(255,255,255,.7)!important} #publicView.premiumPublic .compactAnnouncementGrid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important;gap:16px!important} #publicView.premiumPublic .compactAnnouncementCard{padding:12px!important;min-height:116px!important} #publicView.premiumPublic .announcementThumb{border:1.5px solid var(--pborder)!important} #publicView.premiumPublic .announcementCompactBody h3{font-family:Georgia,'Times New Roman',serif;color:#17334e;font-size:17px} #publicView.premiumPublic .announcementMeta{color:#b28a3f!important;font-weight:800} #publicView.premiumPublic .textActionBtn{color:#a2762a!important} #publicView.premiumPublic .finalAppealCard{border-color:#c99e4d!important;background:linear-gradient(180deg,#fffdf9,#fbf4e5)!important} #publicView.premiumPublic .appealBody{padding:16px!important} #publicView.premiumPublic .appealBody h3{font-family:Georgia,'Times New Roman',serif;color:#17334e;font-size:21px;margin:0 0 7px} #publicView.premiumPublic .appealMeta{color:#846d46} #publicView.premiumPublic .appealDonateBtn{display:inline-flex!important;visibility:visible!important;opacity:1!important;background:linear-gradient(135deg,#e4c273,#c99f4d)!important;color:#14314c!important;border-color:#e6cb8d!important;border-radius:999px!important;font-weight:900!important;margin-top:12px!important;box-shadow:0 6px 16px rgba(176,128,43,.16)} #publicView.premiumPublic #appealsWrap:not(.hidden){display:block!important} #publicView.premiumPublic .donationPublicGrid>.card{border:1.5px solid var(--pborder)!important;border-radius:20px!important;background:#fffdf8!important;box-shadow:0 10px 26px rgba(30,46,60,.06)!important} #publicView.premiumPublic .qrFrame{border-color:var(--pborder)!important;background:#fff!important} #publicView.premiumPublic #contact .card{border:1.5px solid var(--pborder)!important;border-radius:20px!important;background:#fffdf8!important;box-shadow:0 10px 26px rgba(30,46,60,.06)!important} #publicView.premiumPublic footer,#publicView.premiumPublic .footer{background:#102d47!important;color:#fff!important;border-top:1px solid rgba(220,183,105,.35)} @media(max-width:900px){ #publicView.premiumPublic .nav{display:none!important} #publicView.premiumPublic .header-row{min-height:72px;gap:8px} #publicView.premiumPublic .brand span[data-madrasa-name]{max-width:220px;line-height:1.05} #publicView.premiumPublic .hero{min-height:680px} #publicView.premiumPublic .hero-grid{min-height:680px} #publicView.premiumPublic .heroVisual:after{background:linear-gradient(180deg,rgba(8,31,50,.10) 0%,rgba(8,31,50,.35) 42%,rgba(8,31,50,.94) 76%,rgba(8,31,50,.99) 100%)} #publicView.premiumPublic .heroCopy{padding:360px 0 55px;width:calc(100% - 36px)} #publicView.premiumPublic .hero h1{font-size:50px;max-width:650px} #publicView.premiumPublic #about .grid{grid-template-columns:1fr} } @media(max-width:700px){ #publicView.premiumPublic .container{width:calc(100% - 28px)} #publicView.premiumPublic .header-row{padding:8px 0;align-items:center} #publicView.premiumPublic .brand{font-size:15px;min-width:0;flex:1} #publicView.premiumPublic .brand .logo{width:46px;height:46px;flex:0 0 46px} #publicView.premiumPublic .brand span[data-madrasa-name]{font-size:15px;max-width:160px;white-space:normal} #publicView.premiumPublic .premiumDonateTop{padding:0 12px!important;min-height:42px!important;font-size:13px!important} #publicView.premiumPublic .premiumDonateTop span:first-child{display:none} #publicView.premiumPublic .langBtn{min-width:56px;padding:0 10px!important} #publicView.premiumPublic .header [data-action="login"]{display:none!important} #publicView.premiumPublic .hero{min-height:650px} #publicView.premiumPublic .hero-grid{min-height:650px} #publicView.premiumPublic .hero-img img{object-position:center 25%!important} #publicView.premiumPublic .heroCopy{padding:330px 0 42px;width:calc(100% - 30px)} #publicView.premiumPublic .heroKicker{font-size:10px;letter-spacing:.08em;padding:7px 10px} #publicView.premiumPublic .hero h1{font-size:42px;line-height:1.02;margin:16px 0 13px} #publicView.premiumPublic #heroTagline{font-size:15px;line-height:1.5} #publicView.premiumPublic .heroActions{display:grid!important;grid-template-columns:1fr 1fr;gap:9px!important} #publicView.premiumPublic .heroActions .btn{width:100%!important;padding:0 10px!important;font-size:13px!important} #publicView.premiumPublic .heroActions .goldBtn{grid-column:1/-1} #publicView.premiumPublic .heroTrust{gap:6px;flex-wrap:wrap} #publicView.premiumPublic .heroTrust span{font-size:11px;padding:7px 10px} #publicView.premiumPublic .section{padding:48px 0} #publicView.premiumPublic h2{font-size:34px;margin-bottom:18px} #publicView.premiumPublic #about>.container>h2{font-size:40px} #publicView.premiumPublic #about .lead{font-size:15px;line-height:1.65} #publicView.premiumPublic #about .card{display:grid!important;grid-template-columns:64px 1fr;column-gap:14px;text-align:left!important;padding:18px!important;align-items:start} #publicView.premiumPublic .aboutIcon{width:58px;height:58px;margin:0;grid-row:1/3} #publicView.premiumPublic #about .card h3{font-size:24px;margin-top:3px} #publicView.premiumPublic #about .card p{grid-column:2;font-size:14px} #publicView.premiumPublic #coursesGrid,#publicView.premiumPublic #eventsGrid,#publicView.premiumPublic #videosGrid,#publicView.premiumPublic #appealsGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} #publicView.premiumPublic .finalGalleryGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} #publicView.premiumPublic .publicContentCard,#publicView.premiumPublic .galleryThumbBtn,#publicView.premiumPublic .finalAppealCard{border-radius:14px!important} #publicView.premiumPublic .publicCardMedia{height:112px!important;max-height:112px!important} #publicView.premiumPublic .appealCardMedia{height:105px!important;max-height:105px!important} #publicView.premiumPublic .galleryThumbBtn img{height:112px!important} #publicView.premiumPublic .publicCardBody{padding:10px!important} #publicView.premiumPublic .publicCardBody h3{font-size:15px;line-height:1.25} #publicView.premiumPublic .publicCardBody p{font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} #publicView.premiumPublic .compactAnnouncementGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} #publicView.premiumPublic .compactAnnouncementCard{display:block!important;padding:9px!important;min-height:0!important} #publicView.premiumPublic .announcementThumb{width:100%!important;height:96px!important;margin-bottom:8px!important} #publicView.premiumPublic .announcementCompactBody h3{font-size:14px} #publicView.premiumPublic .announcementCompactBody p{-webkit-line-clamp:2;font-size:11px} #publicView.premiumPublic .appealBody{padding:10px!important} #publicView.premiumPublic .appealBody h3{font-size:15px} #publicView.premiumPublic .appealBody p{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #publicView.premiumPublic .appealDonateBtn{width:100%!important;justify-content:center!important;font-size:12px!important;min-height:38px!important} #publicView.premiumPublic .donationPublicGrid{grid-template-columns:1fr!important} } @media(max-width:390px){ #publicView.premiumPublic .premiumDonateTop{padding:0 9px!important;min-width:auto!important} #publicView.premiumPublic .langBtn{font-size:12px!important;min-width:50px} #publicView.premiumPublic .brand span[data-madrasa-name]{max-width:125px;font-size:13px} #publicView.premiumPublic .hero h1{font-size:37px} } /* PREMIUM VIEW MORE BUTTONS */ #publicView.premiumPublic .publicViewAllWrap{ display:flex!important; justify-content:center!important; margin-top:20px!important; } #publicView.premiumPublic .publicViewAllWrap.hidden{display:none!important} #publicView.premiumPublic .publicViewAllWrap .btn{ border-radius:999px!important; padding:0 22px!important; min-height:44px!important; background:#fffaf0!important; color:#17334e!important; border:1.5px solid var(--pborder)!important; box-shadow:0 7px 18px rgba(30,46,60,.07)!important; font-weight:900!important; } #publicView.premiumPublic .publicViewAllWrap .btn:hover{ background:#17334e!important; color:#fff!important; border-color:#17334e!important; } /* ABOUT CARDS: FULL CONTENT, NO VIEW/ARROW CONTROLS */ #publicView.premiumPublic #about .card button, #publicView.premiumPublic #about .card .arrow, #publicView.premiumPublic #about .card .chevron, #publicView.premiumPublic #about .card [class*="arrow"], #publicView.premiumPublic #about .card [class*="chevron"]{ display:none!important; } /* PUBLIC MAP + FULL MOBILE HERO — FINAL */ #publicView .premiumMapCard{margin-top:16px;border:1.5px solid var(--pborder,rgba(187,145,67,.46));border-radius:18px;background:#fffdf8;padding:14px;box-shadow:0 10px 26px rgba(30,46,60,.06);overflow:hidden} #publicView .premiumMapHeading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} #publicView .premiumMapHeading h3{font-family:Georgia,'Times New Roman',serif;color:#17334e;margin:2px 0 0;font-size:22px} #publicView .mapEyebrow{font-size:10px;font-weight:900;letter-spacing:.16em;color:#b2873d} #publicView .mapPinIcon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#17334e;color:#e2c16f;font-size:23px;border:2px solid #e2c16f} #publicView .premiumMapFrame{position:relative;width:100%;aspect-ratio:16/9;border-radius:13px;overflow:hidden;border:1px solid rgba(187,145,67,.42);background:#eee8dc} #publicView .premiumMapFrame iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0!important;display:block!important} #publicView .premiumMapOpen{margin-top:12px;display:inline-flex!important;align-items:center;justify-content:center;border-radius:999px!important;background:linear-gradient(135deg,#e4c273,#c99f4d)!important;color:#14314c!important;border:1px solid #e7cd8d!important;font-weight:900!important} @media(max-width:900px){ #publicView.premiumPublic .hero{min-height:0!important;height:auto!important;background:#102d47!important;overflow:hidden!important} #publicView.premiumPublic .hero-grid{min-height:0!important;height:auto!important;display:flex!important;flex-direction:column!important;padding:0!important} #publicView.premiumPublic .heroVisual{position:relative!important;inset:auto!important;order:0!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;overflow:hidden!important} #publicView.premiumPublic .hero-img{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:0!important;border-radius:0!important;background:#102d47!important} #publicView.premiumPublic .hero-img img{position:relative!important;width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;object-fit:contain!important;object-position:center!important;display:block!important} #publicView.premiumPublic .heroVisual:after{content:""!important;position:absolute!important;inset:0!important;z-index:1!important;background:linear-gradient(180deg,rgba(10,35,55,.02) 0%,rgba(10,35,55,.05) 55%,rgba(10,35,55,.55) 83%,#102d47 100%)!important;pointer-events:none!important} #publicView.premiumPublic .heroCopy{order:1!important;position:relative!important;width:100%!important;max-width:none!important;margin:0!important;padding:26px max(16px,calc((100% - 680px)/2)) 42px!important;background:linear-gradient(180deg,#102d47,#163b59)!important;color:#fff!important} #publicView.premiumPublic .heroCopy:before{content:"";position:absolute;left:0;right:0;top:-45px;height:46px;background:linear-gradient(180deg,transparent,#102d47);pointer-events:none} } @media(max-width:700px){#publicView.premiumPublic .heroCopy{padding:22px 15px 38px!important}#publicView.premiumPublic .hero h1{font-size:38px!important;margin:14px 0 12px!important}#publicView .premiumMapFrame{aspect-ratio:4/3}#publicView .premiumMapOpen{width:100%!important}} /* ========================================================= CLIENT HANDOVER FINAL UI SAFETY — 07 Sep 2026 ========================================================= */ #appView .btn,#publicView .btn,.modalCard .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1.2!important} #appView button.btn{vertical-align:middle} #studentsBody .studentNameWithAvatar{min-width:150px} #academics #yearsList,#academics #classesList,#academics #subjectsList,#academics #classSubjectsList,#exams #examsList,#announcements #announcementList,#promotionStudents,.finalScrollableList{max-height:360px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:3px} #academics .card{min-height:0!important;align-self:start} #subjectProgressResults{max-width:100%;overflow:hidden} #subjectProgressResults .table-wrap{max-width:100%;overflow:auto} #subjectProgressResults .recordList{max-height:300px;overflow-y:auto} @media(min-width:901px){ #publicView.premiumPublic .finalGalleryGrid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:18px!important} #publicView.premiumPublic .galleryThumbBtn img{height:190px!important} } @media(max-width:700px){ #appView .actions>.btn{min-height:42px} #studentsBody .studentNameWithAvatar{min-width:130px} } /* ============================================================ INSTITUTION PUBLIC + CMS FINAL — 2026-09-07 ============================================================ */ .institutionSectionHead{text-align:center;margin-bottom:28px}.institutionSectionHead span,.joinIntro>span{font-size:11px;letter-spacing:.18em;font-weight:900;color:#c49b4e}.institutionSectionHead h2{margin:6px 0 0!important} .institutionDarkSection{background:#2b180c!important;color:#f5e7c8!important;position:relative;overflow:hidden}.institutionDarkSection:before,.institutionImpactSection:before{content:"";position:absolute;inset:0;background-image:linear-gradient(30deg,transparent 48%,rgba(211,166,74,.055) 49%,rgba(211,166,74,.055) 51%,transparent 52%);background-size:84px 84px;pointer-events:none}.institutionDarkSection .institutionSectionHead h2{color:#efd17f!important}.hadithFeatureCard{position:relative;max-width:900px;margin:auto;padding:46px 54px;border:1px solid rgba(224,188,106,.55);border-radius:20px;background:rgba(72,39,17,.56);text-align:center;box-shadow:0 18px 38px rgba(0,0,0,.16)}.hadithArabic{font-family:"Times New Roman",serif;font-size:clamp(28px,4vw,46px);line-height:1.8;color:#f0ca6a;direction:rtl}.hadithRule{height:1px;max-width:620px;margin:20px auto;background:linear-gradient(90deg,transparent,#ca9e49,transparent)}.hadithFeatureCard blockquote{font:italic clamp(18px,2.6vw,28px)/1.65 Georgia,serif;color:#eee0c8;margin:0}.hadithRef{margin-top:12px;color:#c9aa72;font-weight:800}.institutionDarkSection .publicViewAllWrap .btn{background:transparent!important;color:#f0ce79!important;border-color:#c79a49!important} .institutionImpactSection{background:#321b0d!important;color:#ecdcb9!important;position:relative;overflow:hidden}.institutionImpactSection .institutionSectionHead h2{color:#f0cf78!important}.impactGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;position:relative}.impactCard{text-align:center;padding:26px 16px;border:1px solid rgba(216,175,92,.42);border-radius:18px;background:rgba(58,30,13,.62)}.impactIcon{font-size:25px;color:#d9ad54}.impactCard b{display:block;font:700 clamp(31px,4vw,48px) Georgia,serif;color:#f2d173;margin:7px 0}.impactCard span{color:#d7c4a2;font-weight:700} .whyGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.whyGrid article{padding:24px;border:1.5px solid var(--pborder,rgba(187,145,67,.46));border-radius:20px;background:#fffdf8;box-shadow:0 10px 25px rgba(30,46,60,.06)}.whyGrid article>b{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#17334e;color:#e1bd68;font-size:22px}.whyGrid h3{font-family:Georgia,serif;color:#17334e;font-size:20px;margin:15px 0 8px}.whyGrid p{color:#68727c;line-height:1.55;margin:0} .publicStaffGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}.staffPublicCard{text-align:center;padding:24px 18px;border:1.5px solid var(--pborder,rgba(187,145,67,.46));border-radius:20px;background:#fffaf0;box-shadow:0 10px 26px rgba(30,46,60,.06)}.staffPhoto,.staffFallback{width:118px;height:118px;border-radius:50%;margin:0 auto 15px;object-fit:cover;border:4px solid #d4ae61;box-shadow:0 7px 20px rgba(50,38,16,.12)}.staffFallback{display:grid;place-items:center;background:linear-gradient(135deg,#3c2a14,#9a7837);color:#f4d886;font:700 32px Georgia,serif}.staffPublicCard h3{font:700 23px Georgia,serif;color:#2b1c10;margin:7px 0}.staffTitle{color:#9a7542;font-weight:800}.staffPublicCard p{color:#6e6357;font-size:14px;line-height:1.55} .institutionTestimonials{background:#2e190d!important;color:#f2e1bf!important}.institutionTestimonials .institutionSectionHead h2{color:#edcc76!important}.testimonialsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.testimonialCard{text-align:center;padding:28px 22px;border:1px solid rgba(218,174,84,.52);border-radius:20px;background:#41230f;box-shadow:0 14px 30px rgba(0,0,0,.13)}.testimonialCard img,.testimonialAvatar{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:3px solid #e0b75b}.testimonialAvatar{display:grid;place-items:center;background:#c4963f;color:#25180d;font:700 22px Georgia,serif}.testimonialQuote{font:italic 18px/1.65 Georgia,serif;color:#eee0c6;min-height:85px}.testimonialCard h3{color:#f0cd75;margin:16px 0 3px;font-family:Georgia,serif}.institutionTestimonials .muted{color:#bca787!important}.institutionTestimonials .publicViewAllWrap .btn{background:transparent!important;color:#efcb73!important;border-color:#c89946!important} .joinMadrasaSection{background:linear-gradient(180deg,#fffaf0,#f8f0df)!important}.joinIntro{text-align:center;max-width:760px;margin:0 auto 28px}.joinIntro h2{font-family:Georgia,serif;color:#2d1d10;font-size:clamp(34px,4vw,48px);margin:7px 0 12px}.joinIntro p{color:#776752;font-size:17px;line-height:1.6}.joinLayout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.joinSteps{display:grid;gap:14px}.joinSteps>div{display:grid;grid-template-columns:56px 1fr;column-gap:14px;padding:20px;border:1px solid #d7ba80;border-radius:17px;background:#fffdf7}.joinSteps i{grid-row:1/3;width:48px;height:48px;border-radius:12px;background:#17334e;color:#e8c872;display:grid;place-items:center;font-style:normal;font-weight:900}.joinSteps h3{margin:1px 0 6px;font-family:Georgia,serif;color:#372313}.joinSteps p{margin:0;color:#7a6a56}.joinForm{display:grid;gap:12px;padding:26px;border:1.5px solid #cdaa66;border-radius:20px;background:#fffaf0;box-shadow:0 12px 28px rgba(73,50,18,.07)}.joinForm h3{font:700 27px Georgia,serif;color:#342211;text-align:center}.joinForm input,.joinForm select,.joinForm textarea{width:100%;min-height:50px;border:1px solid #cfb47f;border-radius:10px;background:#fffdf8;padding:12px 14px;font-size:15px}.joinForm textarea{min-height:105px} .cmsFeatureForm,.cmsFeatureList{margin-bottom:14px}.featureManageRow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px;border:1px solid var(--border);border-radius:14px;background:#fff;margin-top:9px}.featureManageRow>.recordActions{flex-wrap:nowrap}.featureWithImage{display:flex;align-items:center;gap:12px;min-width:0}.featureWithImage img,.miniAvatar{width:62px;height:62px;border-radius:12px;object-fit:cover;border:1px solid var(--border);flex:0 0 62px}.miniAvatar{display:grid;place-items:center;background:#17334e;color:#e5c473;font-weight:900}.cmsFeaturePreview{display:block;max-width:260px;max-height:220px;object-fit:cover;border-radius:14px;border:1px solid var(--border)}.cmsFeaturePreview.staff,.profilePublicModalPhoto{width:160px;height:160px;object-fit:cover;border-radius:50%;border:4px solid #d0aa5b;display:block;margin:10px auto}.cmsDetailPre{white-space:pre-wrap;word-break:break-word;background:#f6f4ef;border-radius:10px;padding:12px;font-size:12px}.enrollmentManage{align-items:flex-start} .stickyStudentFilters{position:sticky!important;top:72px!important;z-index:55!important;background:rgba(250,249,246,.96)!important;backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:14px;padding:9px;box-shadow:0 6px 18px rgba(20,40,55,.07)} .btn,.actions .btn,.recordActions .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center} @media(min-width:901px){#publicView.premiumPublic .finalGalleryGrid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))!important}#publicView.premiumPublic .galleryThumbBtn img{height:170px!important}} @media(max-width:900px){.whyGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.joinLayout{grid-template-columns:1fr}.stickyStudentFilters{top:70px!important}} @media(max-width:700px){.hadithFeatureCard{padding:30px 18px}.hadithArabic{font-size:27px}.impactGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.impactCard{padding:18px 8px}.impactCard b{font-size:31px}.publicStaffGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.staffPublicCard{padding:15px 9px}.staffPhoto,.staffFallback{width:86px;height:86px}.staffPublicCard h3{font-size:17px}.staffPublicCard p{display:none}.testimonialsGrid{grid-template-columns:1fr}.whyGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.whyGrid article{padding:14px}.whyGrid article>b{width:40px;height:40px}.whyGrid h3{font-size:16px}.whyGrid p{font-size:12px}.featureManageRow{display:grid;grid-template-columns:1fr}.featureManageRow>.recordActions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.featureManageRow>.recordActions .btn{width:100%}.stickyStudentFilters{position:sticky!important;top:64px!important;display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:thin}.stickyStudentFilters>*{flex:0 0 auto;min-width:150px}.stickyStudentFilters #newStudentBtn{min-width:130px}} /* CMS-MANAGED ASATIZA + LEADERSHIP */ .institutionLeadershipSection{background:linear-gradient(180deg,#fffaf0,#f6ecda)!important} .publicLeadershipGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:950px;margin:auto} .leadershipPublicCard{text-align:center;padding:30px 24px;border:1.5px solid var(--pborder,rgba(187,145,67,.46));border-radius:22px;background:#fffdf8;box-shadow:0 12px 30px rgba(40,34,22,.08)} .leadershipPhoto,.leadershipFallback{width:140px;height:140px;border-radius:50%;margin:0 auto 16px;object-fit:cover;border:5px solid #d1ab5c;box-shadow:0 8px 22px rgba(50,38,16,.13)} .leadershipFallback{display:grid;place-items:center;background:linear-gradient(135deg,#17334e,#76572c);color:#edd080;font:700 36px Georgia,serif} .leadershipPublicCard h3{font:700 27px Georgia,serif;color:#2c1e12;margin:8px 0 4px} .leadershipTitle{color:#9a743b;font-weight:900;font-size:16px} .leadershipPublicCard p{color:#6e6255;line-height:1.65;max-width:620px;margin:13px auto 0} .modalPeopleGrid{max-height:70vh;overflow:auto;padding:4px} @media(max-width:700px){ .publicLeadershipGrid{grid-template-columns:1fr} .leadershipPublicCard{padding:22px 16px} .leadershipPhoto,.leadershipFallback{width:112px;height:112px} } /* FINAL STUDENTS + GENERAL UI POLISH */ .studentListPerson{display:flex;align-items:center;gap:12px;min-width:190px} .studentListPhoto,.studentListFallback{width:48px;height:48px;border-radius:50%;flex:0 0 48px;border:2px solid rgba(193,153,73,.38);object-fit:cover;background:#f4ecdc} .studentListFallback{display:grid;place-items:center;background:#17334e;color:#e5c473;font-weight:900;font-size:14px} .studentListName{display:flex;flex-direction:column;gap:2px;min-width:0}.studentListName b{font-size:14px}.studentListName small{color:var(--muted);font-size:11px} .studentRowActions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:250px} #students .table-wrap table{min-width:880px} #students .table-wrap th,#students .table-wrap td{vertical-align:middle;padding-top:11px;padding-bottom:11px} #students .table-wrap th:first-child,#students .table-wrap td:first-child{min-width:220px} #students .table-wrap th:last-child,#students .table-wrap td:last-child{min-width:280px} #students .table-wrap{border:1px solid var(--border);border-radius:16px;background:#fff;max-height:62vh;overflow:auto} #students .table-wrap thead th{position:sticky;top:0;z-index:3;background:#f8f7f3} .studentFilters{gap:8px!important;padding:10px!important} .studentFilters select,.studentFilters input{min-height:44px!important} .recordActions .btn,.studentRowActions .btn,.actions .btn{min-height:40px;line-height:1.15;text-align:center!important;align-items:center!important;justify-content:center!important} .table-wrap{scrollbar-width:thin} @media(max-width:700px){ #students .table-wrap{max-height:60vh} #students .table-wrap table{min-width:760px} .studentListPerson{min-width:170px}.studentListPhoto,.studentListFallback{width:44px;height:44px;flex-basis:44px} .studentRowActions{min-width:225px;gap:5px} .studentRowActions .btn{padding:0 9px!important;font-size:12px!important;min-height:38px!important} } /* ============================================================ MADRASA NAVY / CREAM / GOLD PUBLIC THEME CORRECTION — FINAL Removes brown reference styling from newly added institution sections. ============================================================ */ #publicView.premiumPublic .institutionDarkSection{ background:linear-gradient(135deg,#102d47 0%,#173b5b 100%)!important; color:#f7f3e9!important; padding:52px 0!important; } #publicView.premiumPublic .institutionDarkSection:before, #publicView.premiumPublic .institutionImpactSection:before{ background-image:linear-gradient(30deg,transparent 48%,rgba(227,195,123,.045) 49%,rgba(227,195,123,.045) 51%,transparent 52%)!important; } #publicView.premiumPublic .institutionDarkSection .institutionSectionHead h2, #publicView.premiumPublic .institutionImpactSection .institutionSectionHead h2{ color:#f0d17f!important; } #publicView.premiumPublic .hadithFeatureCard{ max-width:800px!important; padding:30px 34px!important; border:1px solid rgba(224,190,112,.48)!important; background:rgba(255,255,255,.055)!important; box-shadow:0 12px 28px rgba(5,19,31,.16)!important; } #publicView.premiumPublic .hadithArabic{color:#f2d17d!important;font-size:clamp(25px,3.3vw,38px)!important} #publicView.premiumPublic .hadithFeatureCard blockquote{color:#f7f1e5!important;font-size:clamp(16px,2.1vw,22px)!important} #publicView.premiumPublic .hadithRef{color:#dcc285!important} #publicView.premiumPublic .institutionImpactSection{ background:linear-gradient(180deg,#f9f4e9 0%,#fffdf8 100%)!important; color:#17334e!important; padding:52px 0!important; } #publicView.premiumPublic .institutionImpactSection .institutionSectionHead h2{color:#17334e!important} #publicView.premiumPublic .institutionImpactSection .institutionSectionHead span{color:#b58b3e!important} #publicView.premiumPublic .impactGrid{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important; gap:12px!important; max-width:1000px!important; margin:0 auto!important; } #publicView.premiumPublic .impactCard{ min-height:142px!important; padding:18px 12px!important; border:1.5px solid rgba(190,148,68,.42)!important; border-radius:16px!important; background:#fffdf8!important; color:#17334e!important; box-shadow:0 8px 22px rgba(29,48,64,.06)!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; } #publicView.premiumPublic .impactIcon{font-size:20px!important;color:#c49b4d!important;line-height:1!important} #publicView.premiumPublic .impactCard b{ color:#17334e!important; font-size:clamp(27px,3vw,38px)!important; margin:8px 0 4px!important; } #publicView.premiumPublic .impactCard span{color:#887149!important;font-size:13px!important;text-align:center!important} #publicView.premiumPublic .institutionTestimonials{ background:linear-gradient(135deg,#102d47 0%,#173b5b 100%)!important; color:#f8f4eb!important; padding:52px 0!important; } #publicView.premiumPublic .institutionTestimonials .institutionSectionHead h2{color:#f0d17f!important} #publicView.premiumPublic .institutionTestimonials .institutionSectionHead span{color:#d8b66a!important} #publicView.premiumPublic .testimonialsGrid{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important; gap:14px!important; max-width:980px!important; margin:0 auto!important; } #publicView.premiumPublic .testimonialCard{ min-height:0!important; padding:20px 18px!important; border:1px solid rgba(224,190,112,.42)!important; border-radius:16px!important; background:rgba(255,255,255,.055)!important; box-shadow:0 10px 24px rgba(4,18,29,.15)!important; } #publicView.premiumPublic .testimonialCard img, #publicView.premiumPublic .testimonialAvatar{ width:58px!important;height:58px!important;margin-bottom:11px!important;border-color:#e0bd6a!important; } #publicView.premiumPublic .testimonialQuote{ color:#f5efe5!important; min-height:0!important; font-size:15px!important; line-height:1.52!important; display:-webkit-box!important;-webkit-line-clamp:4!important;-webkit-box-orient:vertical!important;overflow:hidden!important; } #publicView.premiumPublic .testimonialCard h3{color:#f0cd75!important;font-size:17px!important;margin:12px 0 2px!important} #publicView.premiumPublic .institutionTestimonials .muted{color:#c9bb9f!important;font-size:12px!important} #publicView.premiumPublic .institutionLeadershipSection{ background:linear-gradient(180deg,#fffdf8 0%,#f7f0e2 100%)!important; padding:48px 0!important; } #publicView.premiumPublic .institutionLeadershipSection .institutionSectionHead{margin-bottom:18px!important} #publicView.premiumPublic .publicLeadershipGrid{ max-width:760px!important; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important; gap:14px!important; } #publicView.premiumPublic .leadershipPublicCard{ padding:18px 18px!important; min-height:0!important; border-radius:17px!important; background:#fffdf8!important; border:1.5px solid rgba(190,148,68,.4)!important; box-shadow:0 8px 22px rgba(30,46,60,.055)!important; } #publicView.premiumPublic .leadershipPhoto, #publicView.premiumPublic .leadershipFallback{ width:92px!important;height:92px!important;margin-bottom:10px!important;border-width:3px!important; } #publicView.premiumPublic .leadershipPublicCard h3{ color:#17334e!important; font-size:20px!important; margin:5px 0 3px!important; } #publicView.premiumPublic .leadershipTitle{color:#b1873d!important;font-size:14px!important} #publicView.premiumPublic .leadershipPublicCard p{ color:#6c7278!important; font-size:13px!important; line-height:1.5!important; margin-top:8px!important; display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important; } #publicView.premiumPublic .institutionStaffSection{ background:#fffdf8!important; padding:52px 0!important; } #publicView.premiumPublic .staffPublicCard{ padding:17px 12px!important; border-radius:16px!important; background:#fffdf8!important; } #publicView.premiumPublic .staffPhoto,#publicView.premiumPublic .staffFallback{ width:92px!important;height:92px!important;margin-bottom:10px!important; } #publicView.premiumPublic .staffPublicCard h3{color:#17334e!important;font-size:18px!important} #publicView.premiumPublic .staffTitle{color:#b1873d!important;font-size:13px!important} @media(max-width:700px){ #publicView.premiumPublic .institutionDarkSection, #publicView.premiumPublic .institutionImpactSection, #publicView.premiumPublic .institutionTestimonials, #publicView.premiumPublic .institutionLeadershipSection, #publicView.premiumPublic .institutionStaffSection{padding:38px 0!important} #publicView.premiumPublic .impactGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important} #publicView.premiumPublic .impactCard{min-height:118px!important;padding:13px 8px!important} #publicView.premiumPublic .impactCard b{font-size:28px!important} #publicView.premiumPublic .testimonialCard{padding:17px 14px!important} #publicView.premiumPublic .leadershipPublicCard{padding:15px 12px!important} #publicView.premiumPublic .leadershipPhoto,#publicView.premiumPublic .leadershipFallback{width:82px!important;height:82px!important} #publicView.premiumPublic .hadithFeatureCard{padding:24px 16px!important} } /* ============================================================ FINAL NAVY / CREAM / GOLD PUBLIC THEME + COMPACT SECTIONS ============================================================ */ #publicView.premiumPublic .institutionDarkSection, #publicView.premiumPublic .institutionImpactSection, #publicView.premiumPublic .institutionTestimonials{ background:linear-gradient(145deg,#102d47,#173b5b)!important; color:#fff!important; } #publicView.premiumPublic .institutionDarkSection:before, #publicView.premiumPublic .institutionImpactSection:before{ background-image: linear-gradient(30deg,transparent 48%,rgba(220,184,103,.055) 49%,rgba(220,184,103,.055) 51%,transparent 52%)!important; } #publicView.premiumPublic .institutionDarkSection .institutionSectionHead h2, #publicView.premiumPublic .institutionImpactSection .institutionSectionHead h2, #publicView.premiumPublic .institutionTestimonials .institutionSectionHead h2{ color:#f0d07c!important; } #publicView.premiumPublic .institutionSectionHead{margin-bottom:20px!important} #publicView.premiumPublic .institutionDarkSection, #publicView.premiumPublic .institutionImpactSection, #publicView.premiumPublic .institutionTestimonials, #publicView.premiumPublic .institutionLeadershipSection, #publicView.premiumPublic .institutionStaffSection{ padding-top:52px!important; padding-bottom:52px!important; } /* Hadith — same Madrasa theme, less height */ #publicView.premiumPublic .hadithFeatureCard{ max-width:820px!important; padding:30px 34px!important; border-color:rgba(232,199,123,.46)!important; background:rgba(255,255,255,.055)!important; box-shadow:0 12px 28px rgba(6,24,39,.16)!important; } #publicView.premiumPublic .hadithArabic{font-size:clamp(25px,3vw,38px)!important;color:#f0ce78!important;line-height:1.65!important} #publicView.premiumPublic .hadithFeatureCard blockquote{font-size:clamp(16px,2vw,22px)!important;color:rgba(255,255,255,.88)!important;line-height:1.55!important} #publicView.premiumPublic .hadithRule{margin:14px auto!important;background:linear-gradient(90deg,transparent,#d3aa59,transparent)!important} #publicView.premiumPublic .hadithRef{color:#d9bd84!important} /* Owner-managed Impact — compact 4/5 card row */ #publicView.premiumPublic .impactGrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:12px!important} #publicView.premiumPublic .impactCard{ padding:18px 12px!important; min-height:130px!important; display:flex;flex-direction:column;justify-content:center; border-color:rgba(231,198,123,.4)!important; background:rgba(255,255,255,.055)!important; border-radius:16px!important; } #publicView.premiumPublic .impactIcon{font-size:20px!important;color:#e4bd67!important} #publicView.premiumPublic .impactCard b{font-size:clamp(27px,3vw,39px)!important;color:#f0cd73!important;margin:4px 0!important} #publicView.premiumPublic .impactCard span{font-size:13px!important;color:rgba(255,255,255,.82)!important} /* Principal / Leadership — intentionally smaller */ #publicView.premiumPublic .institutionLeadershipSection{background:linear-gradient(180deg,#fbf7ed,#f4ecdd)!important} #publicView.premiumPublic .publicLeadershipGrid{max-width:820px!important;gap:14px!important} #publicView.premiumPublic .leadershipPublicCard{ padding:20px 20px!important; border-radius:18px!important; display:grid!important; grid-template-columns:96px 1fr!important; column-gap:18px!important; text-align:left!important; align-items:center!important; background:#fffdf8!important; } #publicView.premiumPublic .leadershipPhoto, #publicView.premiumPublic .leadershipFallback{ width:92px!important;height:92px!important;margin:0!important;grid-row:1/4!important;border-width:3px!important; } #publicView.premiumPublic .leadershipPublicCard h3{font-size:22px!important;margin:0 0 2px!important;color:#17334e!important} #publicView.premiumPublic .leadershipTitle{font-size:14px!important;color:#b18436!important} #publicView.premiumPublic .leadershipPublicCard p{font-size:13px!important;line-height:1.5!important;margin:6px 0 0!important;color:#68717a!important;max-width:none!important} /* Asatiza cards — slightly smaller */ #publicView.premiumPublic .publicStaffGrid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;gap:12px!important} #publicView.premiumPublic .staffPublicCard{padding:17px 12px!important;border-radius:16px!important} #publicView.premiumPublic .staffPhoto, #publicView.premiumPublic .staffFallback{width:88px!important;height:88px!important;margin-bottom:10px!important} #publicView.premiumPublic .staffPublicCard h3{font-size:18px!important;margin:4px 0!important;color:#17334e!important} #publicView.premiumPublic .staffTitle{font-size:13px!important;color:#ad833a!important} #publicView.premiumPublic .staffPublicCard p{font-size:12px!important;line-height:1.45!important;margin-top:8px!important} /* Testimonials — navy theme and less vertical space */ #publicView.premiumPublic .testimonialsGrid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:12px!important} #publicView.premiumPublic .testimonialCard{ padding:18px 16px!important; border-radius:16px!important; border-color:rgba(230,196,118,.42)!important; background:rgba(255,255,255,.055)!important; box-shadow:0 10px 22px rgba(5,23,38,.13)!important; } #publicView.premiumPublic .testimonialCard img, #publicView.premiumPublic .testimonialAvatar{width:54px!important;height:54px!important;margin-bottom:10px!important;border-width:2px!important} #publicView.premiumPublic .testimonialQuote{font-size:15px!important;line-height:1.5!important;min-height:0!important;color:rgba(255,255,255,.88)!important} #publicView.premiumPublic .testimonialCard h3{font-size:17px!important;margin:10px 0 1px!important;color:#f0ce76!important} #publicView.premiumPublic .institutionTestimonials .muted{font-size:12px!important;color:rgba(255,255,255,.58)!important} /* Keep View More controls in theme */ #publicView.premiumPublic .institutionDarkSection .publicViewAllWrap .btn, #publicView.premiumPublic .institutionTestimonials .publicViewAllWrap .btn{ color:#f0ce76!important;border-color:#d0a753!important;background:rgba(255,255,255,.04)!important; } /* General compact public rhythm without crowding */ #publicView.premiumPublic .institutionWhySection .whyGrid article{padding:18px!important} #publicView.premiumPublic .joinSteps>div{padding:16px!important} #publicView.premiumPublic .joinForm{padding:20px!important} /* ============================================================ INLINE BUTTON SPINNER ============================================================ */ .buttonLoading{cursor:wait!important;pointer-events:none!important;opacity:.86!important;gap:8px!important} .inlineBtnSpinner{ width:15px;height:15px;display:inline-block;flex:0 0 15px; border:2px solid currentColor;border-right-color:transparent;border-radius:50%; animation:inlineBtnSpin .7s linear infinite; } .btnLoadingText{display:inline-block} @keyframes inlineBtnSpin{to{transform:rotate(360deg)}} /* CMS and management UI consistency */ #cmsContent .card{border-radius:16px} #cmsContent .featureManageRow{min-height:76px} #cmsContent .recordActions .btn{min-width:74px} .screen .card{overflow:visible} .screen .table-wrap{border-radius:14px} .screen input,.screen select,.screen textarea{border-radius:10px} @media(max-width:700px){ #publicView.premiumPublic .institutionDarkSection, #publicView.premiumPublic .institutionImpactSection, #publicView.premiumPublic .institutionTestimonials, #publicView.premiumPublic .institutionLeadershipSection, #publicView.premiumPublic .institutionStaffSection{padding-top:40px!important;padding-bottom:40px!important} #publicView.premiumPublic .hadithFeatureCard{padding:22px 15px!important} #publicView.premiumPublic .impactGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important} #publicView.premiumPublic .impactCard{min-height:112px!important;padding:14px 8px!important} #publicView.premiumPublic .leadershipPublicCard{grid-template-columns:78px 1fr!important;padding:15px!important;column-gap:12px!important} #publicView.premiumPublic .leadershipPhoto, #publicView.premiumPublic .leadershipFallback{width:74px!important;height:74px!important} #publicView.premiumPublic .leadershipPublicCard h3{font-size:18px!important} #publicView.premiumPublic .publicStaffGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important} #publicView.premiumPublic .staffPhoto, #publicView.premiumPublic .staffFallback{width:74px!important;height:74px!important} #publicView.premiumPublic .testimonialsGrid{grid-template-columns:1fr!important} #publicView.premiumPublic .testimonialCard{padding:16px!important} } /* FINAL CLEAN STUDENT TABLE — SINGLE 5-COLUMN LAYOUT */ #students .table-wrap{max-height:64vh!important;overflow:auto!important;border:1px solid var(--border)!important;border-radius:16px!important;background:#fff!important} #students .table-wrap table{width:100%!important;min-width:820px!important;table-layout:fixed!important;border-collapse:separate!important;border-spacing:0!important} #students .table-wrap thead th{position:sticky!important;top:0!important;z-index:5!important;background:#f7f6f2!important;color:#344454!important;font-size:12px!important;font-weight:850!important;text-transform:uppercase!important;letter-spacing:.04em!important;padding:12px 14px!important;border-bottom:1px solid var(--border)!important;vertical-align:middle!important} #students .table-wrap thead th:nth-child(1){width:31%!important} #students .table-wrap thead th:nth-child(2){width:18%!important} #students .table-wrap thead th:nth-child(3){width:19%!important} #students .table-wrap thead th:nth-child(4){width:12%!important} #students .table-wrap thead th:nth-child(5){width:20%!important} #students .studentCleanRow td{padding:13px 14px!important;vertical-align:middle!important;border-bottom:1px solid rgba(20,45,70,.07)!important;background:#fff!important;height:70px!important} #students .studentCleanRow:hover td{background:#fbfaf6!important} .studentCleanPerson{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important} .studentAvatarWrap{width:46px!important;height:46px!important;flex:0 0 46px!important} .studentCleanAvatar,.studentCleanFallback{width:46px!important;height:46px!important;border-radius:50%!important;display:block;object-fit:cover!important;border:2px solid rgba(197,157,77,.42)!important} .studentCleanFallback{display:grid!important;place-items:center!important;background:#17334e!important;color:#e6c573!important;font-size:13px!important;font-weight:900!important} .studentCleanName{min-width:0!important;overflow:hidden!important} .studentCleanName b{display:block!important;color:#213447!important;font-size:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .studentClassCol,.studentParentCol{font-size:13px!important;color:#52616f!important} .studentStatusCol{text-align:left!important} .studentCleanActions{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:nowrap!important} .studentCleanActions .btn{min-width:58px!important;height:38px!important;min-height:38px!important;padding:0 11px!important;font-size:12px!important;border-radius:9px!important;white-space:nowrap!important} .studentLoadingCell{text-align:center!important;padding:28px!important} .studentEmptyState{text-align:center!important;padding:28px 15px!important;color:var(--muted)!important} .studentMoreActions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin-top:14px!important} .studentMoreActions .btn{width:100%!important;min-height:44px!important} #students .studentFilters{display:grid!important;grid-template-columns:auto minmax(150px,180px) minmax(150px,180px) minmax(150px,180px) minmax(190px,1fr) minmax(130px,150px)!important;gap:8px!important;align-items:center!important;position:sticky!important;top:72px!important;z-index:20!important;background:rgba(249,248,244,.98)!important;padding:10px!important;border:1px solid var(--border)!important;border-radius:14px!important;box-shadow:0 6px 16px rgba(25,45,60,.06)!important} #students .studentFilters>*{min-width:0!important;width:100%!important} #students #newStudentBtn{width:auto!important;white-space:nowrap!important} @media(max-width:1000px){ #students .studentFilters{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:thin!important} #students .studentFilters>*{flex:0 0 155px!important} #students #newStudentBtn{flex-basis:135px!important} } @media(max-width:700px){ #students .table-wrap table{min-width:720px!important} #students .studentCleanRow td{padding:10px!important;height:62px!important} .studentAvatarWrap,.studentCleanAvatar,.studentCleanFallback{width:40px!important;height:40px!important;flex-basis:40px!important} .studentCleanPerson{gap:9px!important} .studentCleanActions .btn{min-width:53px!important;padding:0 8px!important} } /* FINAL DONATION + REPORT DATE UI */ .reportDateControls{display:grid;grid-template-columns:repeat(2,minmax(180px,260px));gap:12px;align-items:end;margin-top:12px} .reportDateControls label{display:block;margin-bottom:6px;font-weight:800;font-size:12px;color:#536170} .reportDateControls input{width:100%;min-height:44px} #donorForm #initialDonationDate{min-height:44px} #donationForm .finalMaterialField{min-width:0} #donationForm .success,#donationForm .error{margin-top:9px;padding:8px 10px;border-radius:9px} @media(max-width:700px){ .reportDateControls{grid-template-columns:1fr 1fr;gap:8px} .reportDateCard .cardHeader{align-items:flex-start} } /* FINAL STUDENT CELL / DONATION CONFLICT GUARDS */ #studentsBody .studentCleanRow>td{overflow:hidden!important} #studentsBody .studentCleanRow>td:nth-child(5){overflow:visible!important} #studentsBody .studentClassCol .studentNameWithAvatar, #studentsBody .studentClassCol .studentMiniAvatar, #studentsBody .studentClassCol .studentCleanAvatar, #studentsBody .studentClassCol .studentCleanPerson{display:none!important} #studentsBody .studentClassCol{white-space:normal!important;word-break:break-word!important} #studentsBody .studentCleanPerson{max-width:100%!important} #studentsBody .studentCleanName{max-width:calc(100% - 58px)!important} #donationForm [data-final-donation-type], #donationForm [data-final-material]{min-width:0!important} #donationForm select[name="donation_type"]{width:100%!important} /* FINAL PHOTO OR INITIALS — NEVER BOTH */ .studentAvatarWrap{position:relative!important;overflow:hidden!important;border-radius:50%!important} .studentAvatarWrap.hasStudentPhoto .studentCleanFallback, .studentAvatarWrap.photoLoaded .studentCleanFallback{display:none!important} .studentAvatarWrap.hasStudentPhoto .studentCleanAvatar{ display:block!important;position:absolute!important;inset:0!important; width:100%!important;height:100%!important;z-index:2!important } .studentAvatarWrap:not(.hasStudentPhoto) .studentCleanFallback{ display:grid!important;position:absolute!important;inset:0!important; width:100%!important;height:100%!important;z-index:1!important } /* ============================================================ FINAL CLIENT-HANDOVER EDIT / ANNOUNCEMENT UI ============================================================ */ .announcementManageCard{ border:1px solid var(--border);border-radius:15px;background:#fff; padding:15px;margin-bottom:10px;box-shadow:0 5px 15px rgba(20,43,61,.04); } .announcementManageHead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .announcementManageTitle{min-width:0;flex:1} .announcementManageTitle h3{margin:0 0 6px;font-size:17px;color:#21394f} .announcementMeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px} .announcementManageBody{ margin-top:11px;padding-top:10px;border-top:1px solid rgba(20,43,61,.07); color:#4f5f6d;line-height:1.55;white-space:pre-wrap;word-break:break-word; } .announcementManageCard .recordActions{display:flex;gap:6px;flex-wrap:wrap} .announcementManageCard .recordActions .btn{min-height:38px;min-width:66px} #studentFormWrap form,#editFacultyFormFinal,#attendanceCorrectionForm,#editDonorForm{ scroll-margin-top:90px; } @media(max-width:700px){ .announcementManageHead{display:grid;grid-template-columns:1fr} .announcementManageCard .recordActions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%} .announcementManageCard .recordActions .btn{width:100%;min-width:0} } /* FINAL FACULTY EDIT PHOTO PREVIEW */ .facultyEditPhotoSection{ padding:14px; border:1px solid var(--border); border-radius:14px; background:#fbfaf6; } .facultyEditPhotoPreviewWrap{ display:flex; justify-content:center; align-items:center; margin:8px 0 12px; } .facultyEditPhotoPreview, .facultyEditPhotoFallback{ width:120px; height:120px; border-radius:50%; object-fit:cover; border:4px solid #d0aa5b; box-shadow:0 8px 20px rgba(30,46,60,.10); } .facultyEditPhotoFallback{ display:grid; place-items:center; background:#17334e; color:#e8c979; font:700 34px Georgia,serif; } .facultyRemovePreviewBtn{margin-top:8px} @media(max-width:700px){ .facultyEditPhotoPreview, .facultyEditPhotoFallback{ width:96px; height:96px; } } /* FINAL EXISTING DONOR MATERIAL FORM */ #donationForm [data-final-material]{display:block} #donationForm [data-final-material].hidden{display:none!important} #donationForm [data-final-donation-type]{display:block} #donationForm select[name="donation_type"]{width:100%;min-height:44px} /* CLIENT FINAL RESPONSIVE FIXES */ .mobileActionMenu{display:none} @media(max-width:700px){ /* Donations: one compact Actions control */ #donationsBody .desktopRowActions{display:none!important} #donationsBody .mobileActionMenu{display:block!important;width:100%} #donationsBody .mobileActionMenu summary{min-width:96px} #donationsBody td:last-child{overflow:visible!important} /* Exams: actions including Publish stay accessible */ #examsList .desktopRowActions{display:none!important} #examsList .mobileActionMenu{display:block!important;width:100%;margin-top:8px} #examsList .recordRow{display:block!important;overflow:visible!important} #examsList .mobileActionPanel{position:relative!important;z-index:5!important} /* Marks must scroll inside their own section and never overlap Existing Exams */ #exams .marksEntryCard{overflow:hidden!important;min-width:0!important} #exams .marksTableWrap{ display:block!important; max-height:62vh!important; overflow-y:auto!important; overflow-x:hidden!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; padding-right:3px!important; } #exams .marksTableWrap #marksBody, #exams .marksTableWrap #marksBody tr, #exams .marksTableWrap #marksBody td{max-width:100%!important} #exams .marksTableWrap #marksBody tr{ position:relative!important; margin:10px 0!important; overflow:hidden!important; contain:layout!important; } #exams .marksTableWrap #marksBody input, #exams .marksTableWrap #marksBody select, #exams .marksTableWrap #marksBody textarea{max-width:100%!important} #exams .marksToolbar{position:sticky!important;top:0!important;z-index:4!important;background:#fff!important;padding-bottom:8px!important} #examsList{clear:both!important;position:relative!important;z-index:1!important} } /* CLIENT READY FINAL RESPONSIVE FIXES */ .finalMobileActions,.finalExamMobileActions{display:none} .finalDesktopActions,.finalExamDesktopActions{display:flex;gap:6px;flex-wrap:wrap} .finalMobileActionPanel{display:grid;gap:7px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px;margin-top:7px;box-shadow:0 10px 24px rgba(23,50,77,.12)} .finalMobileActionPanel .btn{width:100%!important;margin:0!important;min-height:42px!important} @media(max-width:700px){ /* Donations: one Actions button instead of stacked Print/View/Edit/Delete */ #donationsBody .finalDesktopActions{display:none!important} #donationsBody .finalMobileActions{display:block!important} #donationsBody .finalMobileActions summary, .finalExamMobileActions summary{ list-style:none;cursor:pointer;background:var(--brand);color:#fff; border-radius:10px;padding:10px 12px;text-align:center;font-weight:900;white-space:nowrap } #donationsBody .finalMobileActions summary::-webkit-details-marker, .finalExamMobileActions summary::-webkit-details-marker{display:none} /* Marks cards stay inside their own section and scroll instead of covering Existing Exams. */ .marksEntryCard{overflow:hidden!important;min-width:0!important} .marksTableWrap{ display:block!important; max-height:58vh!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; padding-right:4px!important; margin-bottom:12px!important; } .marksTableWrap #marksBody tr{position:relative!important;z-index:1!important;margin:10px 0!important} .marksTableWrap #marksBody input{max-width:100%!important;box-sizing:border-box!important} #examsList{position:relative!important;z-index:2!important;clear:both!important} #exams .card{min-width:0!important;max-width:100%!important} #exams .grid{display:block!important} #exams .grid>.card{margin-bottom:12px!important} /* Existing exam actions are compact. */ .finalExamDesktopActions{display:none!important} .finalExamMobileActions{display:block!important;width:100%!important;margin-top:8px!important} .examFinalRow{display:block!important;overflow:hidden!important} .examFinalRow .recordMain{margin-bottom:8px!important} /* Donation table remains horizontally scrollable but action column is compact. */ #donations .table-wrap{overflow:auto!important;-webkit-overflow-scrolling:touch!important} #donationsBody td:last-child{min-width:120px!important} } /* FINAL MARKS PLACEHOLDERS + SINGLE DONATION ACTION MENU */ #marksBody input::placeholder{color:#9aa3ad;opacity:1} #marksBody input{box-sizing:border-box} .donationDesktopActions{display:flex;gap:6px;flex-wrap:wrap} .donationMobileActions{display:none} .donationMobileActionPanel{ display:grid;gap:7px;margin-top:7px;background:#fff; border:1px solid var(--border);border-radius:12px;padding:8px; box-shadow:0 10px 24px rgba(23,50,77,.12) } .donationMobileActionPanel .btn{width:100%!important;margin:0!important;min-height:42px!important} @media(max-width:700px){ #donationsBody .desktopRowActions, #donationsBody .mobileActionMenu, #donationsBody .finalDesktopActions, #donationsBody .finalMobileActions{display:none!important} #donationsBody .donationDesktopActions{display:none!important} #donationsBody .donationMobileActions{display:block!important} #donationsBody .donationMobileActions summary{ list-style:none;cursor:pointer;background:var(--brand);color:#fff; border-radius:11px;padding:11px 13px;text-align:center; font-weight:900;white-space:nowrap } #donationsBody .donationMobileActions summary::-webkit-details-marker{display:none} } @media(min-width:701px){ #donationsBody .mobileActionMenu, #donationsBody .finalMobileActions, #donationsBody .donationMobileActions{display:none!important} #donationsBody .donationDesktopActions{display:flex!important} } /* FINAL NEW ADMISSION BUTTON + STUDENT FORM MOBILE UX */ #newStudentBtn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:max-content!important; width:auto!important; max-width:100%!important; min-height:44px!important; padding:10px 16px!important; line-height:1.2!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:clip!important; flex:0 0 auto!important; } #studentFormWrap{ scroll-margin-top:92px!important; } #studentFormWrap>.card{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; overflow:hidden!important; } #studentFormWrap .form-grid>*{ min-width:0!important; } #studentFormWrap input, #studentFormWrap select, #studentFormWrap textarea, #studentFormWrap .btn{ max-width:100%!important; box-sizing:border-box!important; } @media(max-width:1000px){ #students .studentFilters{ display:flex!important; align-items:center!important; overflow-x:auto!important; overflow-y:hidden!important; flex-wrap:nowrap!important; gap:8px!important; -webkit-overflow-scrolling:touch!important; scrollbar-width:thin!important; } #students .studentFilters #newStudentBtn{ flex:0 0 auto!important; min-width:136px!important; } #students .studentFilters select, #students .studentFilters input{ flex:0 0 165px!important; min-width:165px!important; } } @media(max-width:700px){ #newStudentBtn{ min-width:128px!important; padding:10px 13px!important; font-size:13px!important; } #studentFormWrap{ scroll-margin-top:78px!important; } #studentFormWrap .form-grid{ grid-template-columns:1fr!important; gap:10px!important; } #studentFormWrap .full{ grid-column:1!important; } #studentFormWrap .actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; } #studentFormWrap .actions .btn{ width:100%!important; min-width:0!important; white-space:normal!important; } } /* FINAL NEW ADMISSION DESKTOP + MOBILE FIX */ #students .studentFilters #newStudentBtn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:150px!important; max-width:none!important; flex:0 0 150px!important; padding:10px 16px!important; box-sizing:border-box!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; line-height:1.2!important; } @media(min-width:1001px){ #students .studentFilters{ display:grid!important; grid-template-columns:150px minmax(170px,190px) minmax(170px,190px) minmax(170px,190px) minmax(230px,1fr) minmax(145px,160px)!important; align-items:center!important; gap:8px!important; overflow:visible!important; } #students .studentFilters #newStudentBtn{ width:150px!important; min-width:150px!important; max-width:150px!important; flex:none!important; white-space:nowrap!important; overflow:visible!important; } } @media(max-width:1000px){ #students .studentFilters{ display:flex!important; overflow-x:auto!important; overflow-y:hidden!important; flex-wrap:nowrap!important; } #students .studentFilters #newStudentBtn{ width:auto!important; min-width:138px!important; max-width:none!important; flex:0 0 138px!important; padding:10px 13px!important; white-space:nowrap!important; overflow:visible!important; } } @media(max-width:420px){ #students .studentFilters #newStudentBtn{ min-width:132px!important; flex-basis:132px!important; font-size:12px!important; } } /* ============================================================ FINAL STUDENTS SCREEN WIDTH + RESPONSIVE TOOLBAR FIX ============================================================ */ #students{ width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; box-sizing:border-box!important; } #students>*{ max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } #students .studentFilters{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } /* Desktop: use flexible columns that fit the real content area beside sidebar. */ @media(min-width:1001px){ #students .studentFilters{ display:grid!important; grid-template-columns: minmax(130px,150px) minmax(150px,1fr) minmax(145px,1fr) minmax(145px,1fr) minmax(180px,1.35fr) minmax(125px,.8fr)!important; gap:8px!important; align-items:center!important; overflow:visible!important; } #students .studentFilters>*{ width:100%!important; min-width:0!important; max-width:100%!important; } #students .studentFilters #newStudentBtn{ width:100%!important; min-width:130px!important; max-width:150px!important; padding:10px 10px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:clip!important; font-size:13px!important; } } /* Medium desktop/tablet: allow toolbar itself to scroll, never entire page. */ @media(max-width:1250px) and (min-width:701px){ #students .studentFilters{ display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch!important; scrollbar-width:thin!important; } #students .studentFilters>*{ flex:0 0 160px!important; width:160px!important; min-width:160px!important; max-width:160px!important; } #students .studentFilters #newStudentBtn{ flex:0 0 140px!important; width:140px!important; min-width:140px!important; max-width:140px!important; } } /* Student ID controls and progress controls must wrap inside the card. */ #students .reportControls{ display:flex!important; flex-wrap:wrap!important; align-items:end!important; gap:8px!important; max-width:100%!important; min-width:0!important; } #students .reportControls>*{ min-width:0!important; max-width:100%!important; } #students .reportControls>div{ flex:1 1 170px!important; } #students .reportControls>.btn{ flex:0 1 auto!important; max-width:100%!important; white-space:normal!important; overflow-wrap:anywhere!important; text-align:center!important; } /* Never allow long download button text to force a card wider. */ #students .btn{ box-sizing:border-box!important; max-width:100%!important; } #students .card{ width:100%!important; max-width:100%!important; min-width:0!important; overflow:hidden!important; } #students .collapseBody{ max-width:100%!important; min-width:0!important; } /* Only data tables get their own horizontal scroll. */ #students .table-wrap{ width:100%!important; max-width:100%!important; overflow-x:auto!important; overflow-y:auto!important; } /* The generated Add/Edit student form is always inside screen width. */ #studentFormWrap{ width:100%!important; max-width:100%!important; min-width:0!important; scroll-margin-top:90px!important; } /* Mobile */ @media(max-width:700px){ #students .studentFilters{ display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important; overflow-y:hidden!important; } #students .studentFilters>*{ flex:0 0 155px!important; width:155px!important; min-width:155px!important; } #students .studentFilters #newStudentBtn{ flex:0 0 132px!important; width:132px!important; min-width:132px!important; max-width:132px!important; font-size:12px!important; } #students .reportControls{ display:grid!important; grid-template-columns:1fr!important; } #students .reportControls>*, #students .reportControls>div, #students .reportControls>.btn{ width:100%!important; max-width:100%!important; min-width:0!important; } } /* ============================================================ FINAL STICKY STUDENT FILTER BAR + EDIT FORM POSITIONING ============================================================ */ #students{ width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; } #students .studentFilters, #students .stickyStudentFiltersFinal{ position:sticky!important; top:8px!important; z-index:45!important; width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; background:rgba(250,248,241,.98)!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; border:1px solid var(--border)!important; border-radius:14px!important; box-shadow:0 8px 18px rgba(22,45,67,.08)!important; padding:8px!important; margin-bottom:10px!important; } /* Desktop: no horizontal page overflow, all filters fit neatly. */ @media(min-width:1101px){ #students .studentFilters, #students .stickyStudentFiltersFinal{ display:grid!important; grid-template-columns: minmax(130px,145px) minmax(150px,1fr) minmax(145px,1fr) minmax(145px,1fr) minmax(210px,1.4fr) minmax(130px,.9fr)!important; gap:8px!important; align-items:center!important; overflow:visible!important; } #students .studentFilters>*, #students .stickyStudentFiltersFinal>*{ width:100%!important; min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } #students #newStudentBtn{ min-width:130px!important; max-width:145px!important; width:100%!important; white-space:nowrap!important; } } /* Tablet / narrower desktop: filter BAR scrolls, not the page. */ @media(max-width:1100px){ #students .studentFilters, #students .stickyStudentFiltersFinal{ display:flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:8px!important; overflow-x:auto!important; overflow-y:hidden!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior-x:contain!important; scrollbar-width:thin!important; } #students .studentFilters>*, #students .stickyStudentFiltersFinal>*{ flex:0 0 155px!important; width:155px!important; min-width:155px!important; max-width:155px!important; } #students #newStudentBtn{ flex:0 0 136px!important; width:136px!important; min-width:136px!important; max-width:136px!important; } } /* Mobile */ @media(max-width:700px){ #students .studentFilters, #students .stickyStudentFiltersFinal{ top:6px!important; padding:7px!important; border-radius:12px!important; } #students .studentFilters>*, #students .stickyStudentFiltersFinal>*{ flex:0 0 145px!important; width:145px!important; min-width:145px!important; max-width:145px!important; } #students #newStudentBtn{ flex:0 0 128px!important; width:128px!important; min-width:128px!important; max-width:128px!important; font-size:12px!important; } } /* Student table keeps its own scrolling behavior. */ #students .table-wrap{ width:100%!important; max-width:100%!important; overflow-x:auto!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; } /* Reliable edit-form landing position. */ #studentFormWrap{ width:100%!important; max-width:100%!important; min-width:0!important; scroll-margin-top:96px!important; } #studentFormWrap>.card, #studentFormWrap form{ max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } /* ============================================================ FINAL TRUE STICKY STUDENT FILTER #students must not be an overflow container; otherwise sticky anchors to that non-scrolling element and appears not to work. ============================================================ */ #appView .main{ overflow-x:hidden!important; } #students{ overflow:visible!important; width:100%!important; max-width:100%!important; min-width:0!important; } #students .studentFilters, #students .stickyStudentFiltersFinal{ position:-webkit-sticky!important; position:sticky!important; top:8px!important; z-index:120!important; background:#faf8f1!important; box-shadow:0 8px 20px rgba(22,45,67,.12)!important; } /* Keep horizontal scrolling confined to the filter bar on narrower devices. */ @media(max-width:1100px){ #students .studentFilters, #students .stickyStudentFiltersFinal{ overflow-x:auto!important; overflow-y:hidden!important; overscroll-behavior-x:contain!important; -webkit-overflow-scrolling:touch!important; } } @media(max-width:700px){ #students .studentFilters, #students .stickyStudentFiltersFinal{ top:6px!important; } }