/* SEPALS Parent Portal - Reference Mobile Final 2026-09-10 */
:root{
  --ref-blue:#0b78d0;--ref-blue2:#08b7d6;--ref-navy:#0a3470;--ref-bg:#f3f7fc;
  --ref-card:#fff;--ref-line:#e0eaf5;--ref-text:#17365f;--ref-muted:#8291aa;
  --ref-present:#18b99a;--ref-absent:#ff4d62;--ref-leave:#ff8a20;--ref-short:#766ee9;
  --ref-late:#e34fca;--ref-off:#194bc3;--ref-unmarked:#b8bec8;--ref-shadow:0 10px 28px rgba(34,82,142,.09)
}
*{box-sizing:border-box}
html,body{background:var(--ref-bg)!important;color:var(--ref-text)!important}
body.portal-authenticated{background:linear-gradient(180deg,#edf6ff 0,#f6f9fd 260px,#f3f7fc 100%)!important}
.portal-topbar{background:linear-gradient(105deg,var(--ref-blue),var(--ref-blue2))!important;box-shadow:0 8px 22px rgba(3,118,187,.20)!important}
.portal-topbar .menu-button{background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important}
.portal-topbar .menu-button i{color:#fff!important}
.portal-topbar .topbar-brand img{background:#fff!important;border:2px solid rgba(255,255,255,.9)!important;padding:2px!important;border-radius:50%!important;object-fit:contain!important}
.portal-topbar .topbar-brand strong{font-weight:900!important;letter-spacing:-.15px!important}.portal-topbar .topbar-brand span{opacity:.88!important}
.notification-button{background:rgba(255,255,255,.15)!important;border-color:rgba(255,255,255,.2)!important}.notification-button b{background:#ff435e!important;color:#fff!important}
.parent-avatar{border:2px solid rgba(255,255,255,.7)!important;background:#fff!important;color:#0a6ec6!important}
.portal-main{background:transparent!important}.content-shell{max-width:1220px!important}
.card,.section-card,.empty-state{border:1px solid var(--ref-line)!important;background:#fff!important;border-radius:20px!important;box-shadow:var(--ref-shadow)!important}
.page-heading h1{color:#0a326c!important}.page-heading p{color:#7d8fa9!important}
.child-switcher select{border-color:#d8e5f4!important;border-radius:12px!important;background:#fff!important;color:#17365f!important}

/* Dashboard */
.ref-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:13px}.ref-welcome h1{margin:0;font-size:26px;letter-spacing:-.5px;color:#0b3270}.ref-welcome p{margin:5px 0 0;font-size:10px;color:#7b8eaa}
.ref-child-card{display:grid;grid-template-columns:82px 1fr auto;align-items:center;gap:16px;padding:15px 17px;margin-bottom:12px;border:1px solid #dce8f5;border-radius:22px;background:linear-gradient(135deg,#fff,#f7fbff);box-shadow:var(--ref-shadow)}
.ref-child-photo{width:78px;height:88px;border-radius:22px;overflow:hidden;background:#e8f2fc;display:grid;place-items:center;color:#0a75c8;font-size:26px;font-weight:900;border:4px solid #fff;box-shadow:0 8px 20px rgba(20,83,150,.13)}.ref-child-photo img{width:100%;height:100%;object-fit:cover}
.ref-child-main h2{margin:0;font-size:23px;color:#0c2f65;line-height:1.1}.ref-child-main p{margin:5px 0 0;font-size:10px;color:#70849f}.ref-child-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.ref-pill{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;background:#edf5ff;color:#0b64bd;font-size:8px;font-weight:850}
.ref-child-side{text-align:right}.ref-child-side small{display:block;font-size:7px;color:#8393aa;text-transform:uppercase;letter-spacing:.6px}.ref-child-side strong{display:block;margin-top:3px;font-size:13px;color:#0b4e9f}.ref-child-side a{display:inline-flex;margin-top:9px;text-decoration:none;color:#0b6fca;font-size:8px;font-weight:850}
.ref-dashboard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 15px}.ref-stat{min-height:108px;border-radius:19px;padding:14px;color:#fff;position:relative;overflow:hidden;text-decoration:none;box-shadow:0 10px 22px rgba(32,89,155,.10)}.ref-stat:after{content:"";position:absolute;width:76px;height:76px;border-radius:50%;right:-25px;bottom:-28px;background:rgba(255,255,255,.13)}.ref-stat i{font-size:18px}.ref-stat span{display:block;margin-top:13px;font-size:8px;opacity:.9}.ref-stat strong{display:block;margin-top:3px;font-size:20px}.ref-stat.att{background:linear-gradient(135deg,#31c89e,#11ad99)}.ref-stat.fee{background:linear-gradient(135deg,#58a8f8,#317fe7)}.ref-stat.diary{background:linear-gradient(135deg,#8b78f1,#6556dc)}.ref-stat.status{background:linear-gradient(135deg,#ff855d,#fa5f5f)}
.ref-menu-title{display:flex;align-items:center;justify-content:space-between;margin:13px 2px 9px}.ref-menu-title strong{font-size:14px;color:#0b326c}.ref-menu-title span{font-size:9px;color:#8191a9}
.ref-menu-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:15px}.ref-menu-grid a{min-height:90px;text-decoration:none;color:#17365f;background:#fff;border:1px solid #e1eaf5;border-radius:17px;padding:11px 7px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;box-shadow:0 6px 16px rgba(37,82,140,.05);font-size:8px;font-weight:800}.ref-menu-grid a i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;background:#edf5ff;color:#0a65c4}.ref-menu-grid a:nth-child(2) i{background:#e8f8f4;color:#12a68f}.ref-menu-grid a:nth-child(3) i{background:#f1edff;color:#6d59df}.ref-menu-grid a:nth-child(4) i{background:#fff1e9;color:#f07a36}.ref-menu-grid a:nth-child(5) i{background:#ffedf1;color:#ef4f69}.ref-menu-grid a:nth-child(6) i{background:#e8f8f7;color:#10a4a8}
.ref-dashboard-row{display:grid;grid-template-columns:1.35fr .85fr;gap:12px}.ref-mini-card{padding:15px}.ref-mini-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.ref-mini-head strong{font-size:12px}.ref-mini-head a{font-size:8px;color:#0b6fca;text-decoration:none;font-weight:800}.ref-notice{display:grid;grid-template-columns:8px 1fr auto;gap:9px;align-items:start;padding:9px 0;border-top:1px solid #eef3f8}.ref-notice:first-of-type{border-top:0}.ref-notice>i{width:7px;height:7px;border-radius:50%;margin-top:5px;background:#ff8a20}.ref-notice strong{font-size:9px;display:block}.ref-notice p{font-size:8px;color:#8190a6;margin:3px 0 0;line-height:1.5}.ref-notice time{font-size:7px;color:#93a0b2}.ref-receipt-mini{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #eef3f8;text-decoration:none;color:inherit}.ref-receipt-mini:first-of-type{border-top:0}.ref-receipt-mini i{width:33px;height:33px;border-radius:10px;background:#eaf5ff;color:#0b68c6;display:grid;place-items:center}.ref-receipt-mini div{flex:1}.ref-receipt-mini strong{font-size:9px;display:block}.ref-receipt-mini small{font-size:7.5px;color:#8290a5}.ref-receipt-mini b{font-size:7px;color:#0b6ecb}

/* Page title strip */
.ref-screen-title{display:flex;align-items:center;gap:10px;margin-bottom:12px}.ref-back{width:38px;height:38px;border-radius:12px;background:#eaf4ff;color:#0870ca;display:grid;place-items:center;text-decoration:none}.ref-screen-title h1{font-size:24px;margin:0;color:#0b326d}.ref-screen-title p{font-size:9px;color:#8191aa;margin:3px 0 0}

/* Fee / ledger */
.ref-ledger-hero{display:flex;align-items:center;gap:14px;padding:18px 19px;border-radius:23px;background:linear-gradient(110deg,#087bca,#08bdd3);color:#fff;box-shadow:0 13px 30px rgba(6,133,194,.23);margin-bottom:14px}.ref-ledger-hero .icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b78c8;font-size:20px}.ref-ledger-hero span{display:block;font-size:10px;opacity:.9}.ref-ledger-hero strong{display:block;margin-top:3px;font-size:25px}.ref-ledger-hero small{display:block;margin-top:5px;font-size:8px;opacity:.82}
.ref-ledger-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:13px}.ref-ledger-summary>div{background:#fff;border:1px solid #e0eaf5;border-radius:15px;padding:11px}.ref-ledger-summary span{font-size:7.5px;color:#8593a7}.ref-ledger-summary strong{display:block;margin-top:4px;font-size:13px}.ref-ledger-summary .good strong{color:#11a36e}.ref-ledger-summary .bad strong{color:#e8465c}
.ref-ledger{position:relative;padding-left:25px}.ref-ledger:before{content:"";position:absolute;left:8px;top:16px;bottom:16px;width:2px;background:#d9e5ef}.ref-challan{position:relative;background:#fff;border:1px solid #e0eaf5;border-radius:20px;padding:15px 15px 13px;margin-bottom:12px;box-shadow:var(--ref-shadow)}.ref-challan:before{content:"";position:absolute;left:-23px;top:22px;width:13px;height:13px;border-radius:50%;background:#12b76a;border:3px solid #fff;box-shadow:0 0 0 2px #d8e5ef}.ref-challan-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.ref-challan-title strong{font-size:13px;color:#0874bd}.ref-challan-title small{display:block;margin-top:3px;font-size:8px;color:#8d98a9;line-height:1.55}.ref-paid{background:#0fbb3b;color:#fff;border-radius:11px;padding:6px 10px;font-size:8px;font-weight:900}.ref-fee-lines{margin-top:13px;padding-top:10px;border-top:1px solid #e8eef5}.ref-fee-line{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:10px;color:#3e4e65}.ref-fee-line strong{font-size:11px}.ref-fee-line.paid-line strong{color:#16a74d}.ref-fee-line.balance-line{border-top:1px solid #edf1f5;margin-top:4px;padding-top:9px}.ref-fee-line.balance-line strong{color:#ff4356;font-size:13px}.ref-download{margin-top:10px;width:100%;height:38px;border:0;border-radius:10px;background:#e9f5ff;color:#0870c9;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:7px;font-size:9px;font-weight:900}.ref-download:hover{background:#dcefff}.ref-ledger-empty{padding:32px;text-align:center;color:#8794a8}

/* Attendance calendar */
.ref-student-strip{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #e0eaf5;border-radius:18px;padding:11px 13px;margin-bottom:13px;box-shadow:var(--ref-shadow)}.ref-student-strip .photo{width:48px;height:48px;border-radius:50%;background:#eaf3fb;overflow:hidden;display:grid;place-items:center;color:#0b72c8;font-weight:900}.ref-student-strip .photo img{width:100%;height:100%;object-fit:cover}.ref-student-strip strong{font-size:13px}.ref-student-strip small{display:block;margin-top:3px;font-size:8px;color:#8592a7}
.ref-month-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;margin:6px 0 13px}.ref-month-nav a{width:42px;height:42px;border-radius:14px;border:1px solid #d9e6f6;background:#fff;color:#0a76d1;display:grid;place-items:center;text-decoration:none;font-size:15px}.ref-month-nav strong{text-align:center;font-size:20px;color:#0870d4}.ref-calendar{background:#fff;border:1px solid #e0eaf5;border-radius:22px;padding:15px;box-shadow:var(--ref-shadow)}.ref-weekdays,.ref-days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.ref-weekdays span{text-align:center;font-size:8px;font-weight:850;color:#526071;padding:4px 0 7px}.ref-day{aspect-ratio:1/1;min-width:0;border-radius:10px;display:grid;place-items:center;font-size:10px;font-weight:900;color:#fff;background:var(--ref-unmarked)}.ref-day.blank{background:transparent}.ref-day.present{background:var(--ref-present)}.ref-day.absent{background:var(--ref-absent)}.ref-day.leave{background:var(--ref-leave)}.ref-day.short_leave{background:var(--ref-short)}.ref-day.late{background:var(--ref-late)}.ref-day.off{background:var(--ref-off)}.ref-day.future,.ref-day.unmarked{background:#bec3cb;color:#fff}.ref-day.today{box-shadow:0 0 0 3px rgba(11,116,207,.18)}
.ref-att-legend{margin-top:15px;border-top:1px solid #edf2f7;padding-top:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px}.ref-legend-row{display:grid;grid-template-columns:23px 1fr auto;align-items:center;gap:8px}.ref-legend-icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:9px}.ref-legend-row span:nth-child(2){font-size:10px}.ref-legend-row b{min-width:34px;text-align:center;padding:4px 8px;border-radius:999px;color:#fff;font-size:8px}.present-bg{background:var(--ref-present)}.absent-bg{background:var(--ref-absent)}.leave-bg{background:var(--ref-leave)}.short-bg{background:var(--ref-short)}.late-bg{background:var(--ref-late)}.off-bg{background:var(--ref-off)}
.ref-att-note{margin-top:9px;font-size:7.5px;color:#8b98a9;text-align:center}

/* Leave */
.ref-leave-types{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}.ref-leave-option{position:relative}.ref-leave-option input{position:absolute;opacity:0;pointer-events:none}.ref-leave-option label{display:flex;align-items:center;gap:9px;padding:12px;border-radius:15px;border:1px solid #dfe9f5;background:#fff;cursor:pointer}.ref-leave-option label i{width:34px;height:34px;border-radius:11px;background:#fff2e7;color:#f0842e;display:grid;place-items:center}.ref-leave-option.short label i{background:#efedff;color:#7268df}.ref-leave-option input:checked+label{border-color:#77aee4;background:#f1f8ff;box-shadow:0 0 0 3px rgba(14,117,205,.08)}.ref-leave-option.short input:checked+label{border-color:#8b82e8;background:#f4f2ff}.ref-leave-option label strong{font-size:9px}.ref-leave-option label small{display:block;font-size:7px;color:#8593a8;margin-top:2px}

/* Login */
body.sepals-ref-login{min-height:100vh;margin:0;background:linear-gradient(145deg,#0879cd,#0ab6d4 48%,#edf7ff 48.2%,#f8fbff);font-family:Inter,system-ui,sans-serif}.ref-login-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}.ref-login-brand{padding:55px;display:flex;flex-direction:column;justify-content:center;color:#fff;position:relative;overflow:hidden}.ref-login-brand:after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;background:rgba(255,255,255,.08);right:-140px;bottom:-160px}.ref-login-school{display:flex;align-items:center;gap:13px;position:relative;z-index:1}.ref-login-school img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:22px;padding:4px;box-shadow:0 12px 30px rgba(0,50,100,.18)}.ref-login-school strong{display:block;font-size:19px}.ref-login-school span{display:block;font-size:9px;margin-top:4px;opacity:.85}.ref-login-brand h1{font-size:45px;line-height:1.05;margin:32px 0 12px;max-width:600px;letter-spacing:-1.5px;position:relative;z-index:1}.ref-login-brand p{font-size:13px;line-height:1.7;max-width:550px;opacity:.9;position:relative;z-index:1}.ref-login-features{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px;position:relative;z-index:1}.ref-login-features span{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:8px;border:1px solid rgba(255,255,255,.17)}.ref-login-side{display:flex;align-items:center;justify-content:center;padding:30px}.ref-login-card{width:min(100%,420px);background:#fff;border:1px solid #dce9f6;border-radius:26px;padding:28px;box-shadow:0 25px 70px rgba(20,76,137,.16)}.ref-login-logo-mobile{display:none;text-align:center;margin-bottom:18px}.ref-login-logo-mobile img{width:76px;height:76px;object-fit:contain}.ref-login-card h2{margin:0;font-size:25px;color:#0b326b}.ref-login-card>p{font-size:9px;color:#8090a8;line-height:1.55;margin:7px 0 19px}.ref-login-alert{padding:10px 12px;border-radius:12px;background:#fff0f1;color:#c44353;font-size:8px;margin-bottom:12px}.ref-login-field{margin-bottom:12px}.ref-login-field label{display:block;font-size:7px;font-weight:900;color:#657a96;margin:0 0 6px 4px;letter-spacing:.6px}.ref-input{height:49px;border:1px solid #d9e6f4;border-radius:14px;display:flex;align-items:center;gap:9px;padding:0 12px;background:#fbfdff}.ref-input:focus-within{border-color:#5ba7e8;box-shadow:0 0 0 4px rgba(31,132,216,.08)}.ref-input i{color:#5a83ad}.ref-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:10px;color:#17365f}.ref-pass-toggle{border:0;background:transparent;color:#6082a5;cursor:pointer}.ref-login-btn{width:100%;height:49px;border:0;border-radius:14px;background:linear-gradient(100deg,#0877ce,#08b7d2);color:#fff;font-weight:900;font-size:10px;cursor:pointer;box-shadow:0 9px 20px rgba(7,126,199,.22)}.ref-login-help{margin-top:14px;padding:10px 12px;background:#f3f8ff;border-radius:12px;color:#71839b;font-size:8px;line-height:1.55}.ref-login-security{margin-top:13px;text-align:center;font-size:7.5px;color:#8a98aa}

/* Make existing secondary pages match */
.portal-form input,.portal-form select,.portal-form textarea,.form-field input,.form-field select,.form-field textarea{border-color:#dce8f4!important;border-radius:12px!important}.primary-button,.primary-btn,.button:not(.secondary){background:linear-gradient(100deg,#0876ca,#0aaed0)!important;border:0!important}.outline-btn,.button.secondary{border-color:#cfe0f2!important;color:#0870c9!important;background:#fff!important}.document-row{border-color:#edf2f7!important}.doc-icon,.section-icon{background:#eaf5ff!important;color:#0870c9!important}.status-pill.pending{background:#fff3db!important;color:#a8690e!important}.status-pill.approved{background:#e4f7ed!important;color:#178b5a!important}.status-pill.rejected{background:#ffe8eb!important;color:#c63f53!important}

@media(max-width:900px){
  .content-shell{max-width:760px!important;margin:0 auto!important}.ref-dashboard-stats{grid-template-columns:repeat(4,1fr)}.ref-menu-grid{grid-template-columns:repeat(4,1fr)}.ref-login-shell{grid-template-columns:1fr}.ref-login-brand{display:none}.ref-login-side{min-height:100vh;background:linear-gradient(180deg,#0a85d1 0,#09b6d1 26%,#f4f9ff 26.2%);padding:24px 14px}.ref-login-logo-mobile{display:block}.ref-login-card{margin-top:60px}
}
@media(max-width:640px){
  body.portal-authenticated{padding-bottom:68px!important}.portal-topbar{height:64px!important}.portal-main{padding-top:75px!important}.content-shell{padding:8px 10px 78px!important}.page-heading{margin-bottom:10px!important}.page-heading h1{font-size:20px!important}.page-heading p{font-size:8px!important}.child-switcher{width:100%!important;margin-top:7px!important}.child-switcher select{width:100%!important;height:40px!important}
  .ref-welcome{align-items:flex-start;flex-direction:column;margin:3px 2px 11px}.ref-welcome h1{font-size:20px}.ref-welcome p{font-size:8px}.ref-child-card{grid-template-columns:62px 1fr;padding:12px;gap:10px;border-radius:18px}.ref-child-photo{width:60px;height:66px;border-radius:17px}.ref-child-main h2{font-size:17px}.ref-child-main p{font-size:8px}.ref-child-meta{margin-top:6px}.ref-pill{font-size:7px;padding:4px 6px}.ref-child-side{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;text-align:left;padding-top:8px;border-top:1px solid #eef3f8}.ref-child-side a{margin:0}.ref-dashboard-stats{grid-template-columns:repeat(2,1fr);gap:8px}.ref-stat{min-height:94px;padding:11px}.ref-stat span{margin-top:9px}.ref-stat strong{font-size:17px}.ref-menu-grid{grid-template-columns:repeat(4,1fr);gap:7px}.ref-menu-grid a{min-height:76px;border-radius:14px;padding:7px 3px;font-size:7px;gap:6px}.ref-menu-grid a i{width:32px;height:32px;border-radius:10px;font-size:14px}.ref-dashboard-row{grid-template-columns:1fr}.ref-screen-title{margin:0 0 10px}.ref-back{width:34px;height:34px}.ref-screen-title h1{font-size:20px}.ref-screen-title p{font-size:7.5px}
  .ref-ledger-hero{padding:14px;border-radius:18px}.ref-ledger-hero .icon{width:45px;height:45px}.ref-ledger-hero strong{font-size:21px}.ref-ledger-summary{grid-template-columns:repeat(3,1fr);gap:6px}.ref-ledger-summary>div{padding:9px 7px}.ref-ledger-summary strong{font-size:11px}.ref-ledger{padding-left:20px}.ref-ledger:before{left:6px}.ref-challan{padding:13px 12px;margin-bottom:10px;border-radius:18px}.ref-challan:before{left:-19px;width:12px;height:12px}.ref-challan-title strong{font-size:12px}.ref-fee-line{font-size:9px}.ref-fee-line strong{font-size:10px}
  .ref-calendar{padding:11px;border-radius:18px}.ref-weekdays,.ref-days{gap:5px}.ref-day{border-radius:9px;font-size:9px}.ref-month-nav strong{font-size:17px}.ref-month-nav{grid-template-columns:38px 1fr 38px}.ref-month-nav a{width:38px;height:38px}.ref-att-legend{grid-template-columns:1fr 1fr;gap:7px 9px}.ref-legend-row{grid-template-columns:20px 1fr auto;gap:6px}.ref-legend-icon{width:20px;height:20px}.ref-legend-row span:nth-child(2){font-size:8.5px}.ref-legend-row b{min-width:29px;padding:3px 6px}.ref-student-strip .photo{width:42px;height:42px}.ref-student-strip strong{font-size:11px}
  .ref-leave-types{grid-template-columns:1fr 1fr}.ref-login-card{padding:23px 18px;border-radius:23px}.ref-login-card h2{font-size:22px}
}
@media(max-width:380px){.ref-menu-grid{grid-template-columns:repeat(3,1fr)}.ref-att-legend{grid-template-columns:1fr}.ref-ledger-summary{grid-template-columns:1fr 1fr}.ref-ledger-summary>div:last-child{grid-column:1/-1}}
@media print{.mobile-bottom-nav,.portal-sidebar,.portal-topbar,.portal-overlay,.ref-screen-title .ref-back{display:none!important}.portal-main{margin:0!important;padding:0!important}.content-shell{padding:0!important}.ref-challan,.ref-calendar,.card{box-shadow:none!important}}