@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Playfair+Display:wght@600;700&display=swap");*{box-sizing:border-box}body{margin:0;font-family:Inter;color:#172333;background:#f4f6f9}button,input{font:inherit}.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#06182f,#123b62)}.loginbox{background:#fff;width:min(480px,92%);padding:44px;border-radius:20px;box-shadow:0 30px 80px #0004}.logo{width:58px;height:58px;border:1px solid #caa34a;color:#b28729;display:grid;place-items:center;font-weight:800}.eyebrow{margin-top:28px;font-size:11px;letter-spacing:3px;color:#9b7725;font-weight:800}.login h1{font:700 50px/1 "Playfair Display";margin:12px 0}.login h1 span{color:#b58d30}.login p{color:#718093;font-size:13px;margin-bottom:30px}label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;margin:17px 0 7px}input{width:100%;padding:13px;border:1px solid #dde3ea;border-radius:9px}button{border:0;border-radius:9px;padding:14px;background:#071a35;color:#fff;font-weight:800;width:100%;margin-top:22px}#err{color:#b33b3b;font-size:12px;margin-top:12px}
.app{display:flex;min-height:100vh}.side{position:fixed;width:240px;inset:0 auto 0 0;background:#071a35;color:#fff;padding:22px 15px}.brand{font-weight:800;padding:10px;border-bottom:1px solid #23405d;padding-bottom:22px}.nav{margin-top:24px}.nav button{text-align:left;background:none;color:#b9c7d6;margin:3px 0;padding:11px;width:100%}.nav button.active,.nav button:hover{background:#12385c;color:#fff}.logout{position:absolute;bottom:20px;left:15px;width:210px;background:#102d4b}.main{margin-left:240px;width:calc(100% - 240px)}.top{height:70px;background:#fff;border-bottom:1px solid #e2e7ed;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:12px;color:#697587}.page{padding:30px;max-width:1500px;margin:auto}.hidden{display:none}.hero{background:linear-gradient(110deg,#071a35,#123c66);color:#fff;padding:28px;border-radius:17px}.hero h1,.title{font-family:"Playfair Display"}.hero h1{font-size:35px;margin:8px 0}.eyebrow2{font-size:10px;letter-spacing:2px;color:#d8bc70}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:17px 0}.card,.stat,.day,.session{background:#fff;border:1px solid #e2e7ed;border-radius:13px;padding:18px}.stat b{font-size:27px;display:block}.stat span,.sub{color:#718093;font-size:12px}.days{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}.day{min-height:135px}.day.today{border:2px solid #caa34a}.day strong{font-size:12px}.tag{display:inline-block;background:#edf2f7;padding:5px 7px;border-radius:5px;font-size:9px;margin:3px 2px 0 0}.lock{color:#929ca8;font-size:10px;margin-top:12px}.sessions{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.session h3{margin:0 0 4px}.activity{border-top:1px solid #e4e8ee;padding-top:16px;margin-top:16px}.activity:first-child{border-top:0;margin-top:0}.actions{display:flex;gap:7px}.smallbtn{width:auto;margin:0;padding:9px 11px;font-size:11px}.gold{background:#fff6da;color:#6d5315}.photos{display:flex;gap:9px;margin-top:10px}.photo{width:150px;height:105px;border:1px dashed #b9c3cf;border-radius:9px;display:grid;place-items:center;overflow:hidden;font-size:10px;color:#7b8795}.photo img{width:100%;height:100%;object-fit:cover}.brief{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.brief div{background:#f7f9fb;padding:12px;border-radius:8px;font-size:12px;line-height:1.5}.brief b{display:block;font-size:10px;text-transform:uppercase;color:#718093;margin-bottom:4px}.library{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.modal{position:fixed;inset:0;background:#031326bb;display:none;place-items:center;padding:20px}.modal.show{display:grid}.modalbox{background:#fff;border-radius:15px;padding:24px;width:min(850px,100%);max-height:90vh;overflow:auto}.close{width:auto;margin:0;float:right;padding:7px 12px;background:#edf1f5;color:#172333}@media(max-width:900px){.side{width:70px}.brand{font-size:0}.nav button{font-size:0}.main{margin-left:70px;width:calc(100% - 70px)}.stats{grid-template-columns:repeat(2,1fr)}.days{grid-template-columns:repeat(3,1fr)}.library{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.side{display:none}.main{margin:0;width:100%}.page{padding:17px}.stats,.sessions,.brief,.library{grid-template-columns:1fr}.days{grid-template-columns:repeat(2,1fr)}.top{padding:0 15px}}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{overflow-x:hidden}button,.nav button,.photo{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mobile-menu{display:none!important}@media(max-width:900px){.side{width:270px;left:-280px;transition:left .25s ease;box-shadow:20px 0 50px #0004;z-index:100}.side.open{left:0}.brand{font-size:14px}.brand small{display:block;font-size:9px;margin-top:5px}.nav button{font-size:13px;text-align:left;padding:14px}.logout{width:240px}.main{margin-left:0;width:100%}.top{height:64px;padding:0 14px;gap:10px}.top b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-menu{display:block!important;width:42px;height:42px;padding:0;margin:0;background:#071a35;font-size:22px;flex:0 0 42px}.page{padding:18px 14px 35px}.hero{padding:22px 18px}.hero h1{font-size:29px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stat{padding:14px}.stat b{font-size:22px}.days{grid-template-columns:1fr;gap:10px}.day{min-height:auto;padding:16px}.sessions{grid-template-columns:1fr;gap:12px}.session{padding:15px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.smallbtn{width:100%;min-height:44px;margin:0}.photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.photo{width:100%;height:135px;min-width:0}.brief{grid-template-columns:1fr;gap:9px}.brief div{font-size:13px;padding:14px}.modal{padding:10px;align-items:end}.modalbox{width:100%;max-height:92vh;border-radius:18px 18px 0 0;padding:18px 15px 28px}.modalbox h2{font-size:21px;padding-right:38px}.modalbox .close{position:absolute;right:22px;top:18px;width:42px;height:42px;border-radius:50%;font-size:22px}.modalbox img{max-width:100%!important;max-height:68vh!important}.library{grid-template-columns:1fr}}@media(max-width:430px){.top{height:60px}.top b{max-width:150px}.hero h1{font-size:25px}.actions{grid-template-columns:1fr}.photo{height:120px}}

/* =========================================================
   IEC TEACHER PORTAL — FINAL MOBILE NAVIGATION
   ========================================================= */
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
button{font:inherit}
.mobile-menu{display:none}

@media (max-width:900px){
  .side{
    display:block !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:min(300px,86vw) !important;
    height:100dvh !important;
    height:100vh !important;
    transform:translate3d(-105%,0,0) !important;
    transition:transform .25s ease !important;
    z-index:10001 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .side.mobile-open{
    transform:translate3d(0,0,0) !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  #menuOverlay{
    display:none;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    height:100vh !important;
    background:rgba(0,0,0,.62) !important;
    z-index:10000 !important;
    cursor:pointer;
  }
  #menuOverlay.mobile-open{display:block !important}

  .mobile-menu{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border:0 !important;
    border-radius:12px !important;
    background:#071a35 !important;
    color:#fff !important;
    font-size:22px !important;
    line-height:1 !important;
    cursor:pointer !important;
    z-index:10002 !important;
    position:relative !important;
  }

  .main{margin-left:0 !important;width:100% !important;min-width:0}
  .top{height:64px;padding:8px 12px;gap:9px;position:relative;z-index:20}
  .top b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .side .brand{display:block !important;padding:22px 18px 16px}
  .side .nav{display:flex !important;flex-direction:column !important;padding:8px 12px 90px !important;gap:5px !important}
  .side .nav button{
    display:flex !important;
    width:100% !important;
    min-height:48px !important;
    align-items:center !important;
    padding:13px 14px !important;
    margin:0 !important;
    text-align:left !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .side .logout{
    position:absolute !important;
    left:15px !important;
    bottom:18px !important;
    width:calc(100% - 30px) !important;
    min-height:46px !important;
    z-index:2 !important;
  }

  .page{padding:16px 13px 35px}
  .hero{padding:20px 17px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .days,.sessions,.library{grid-template-columns:1fr;gap:10px}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .smallbtn{width:100%;min-height:46px;margin:0}
  .photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .photo{width:100%;height:135px;min-width:0}
  .brief{grid-template-columns:1fr;gap:9px}

  .modal{padding:10px;align-items:end}
  .modalbox{
    width:100%;
    max-width:100%;
    max-height:92dvh;
    max-height:92vh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:18px 18px 0 0;
    padding:18px 15px 28px;
  }
  .modalbox .close{width:42px;height:42px;min-width:42px}
}

@media (max-width:430px){
  .top{height:60px}
  .top b{font-size:11px;max-width:160px}
  .hero h1{font-size:25px}
  .actions{grid-template-columns:1fr}
  .photos{grid-template-columns:1fr 1fr}
  .photo{height:120px}
}