/* portal.ochst.edu.ng: a light, document-style student portal. White sheet on a soft background,
   navy header strip, tab navigation, blue student card, collapsible panels. */
.area-portal{background:radial-gradient(700px 420px at 85% -12%,rgba(0,119,255,.26),transparent 65%),radial-gradient(600px 420px at 0% 105%,rgba(243,189,0,.12),transparent 65%),linear-gradient(160deg,#000b1a 0%,#00152f 45%,#00264d 100%);background-attachment:fixed;min-height:100vh;color:var(--text)}
.psh{padding:clamp(.5rem,3vw,2.25rem) clamp(.4rem,2.5vw,1.5rem) 2rem}
.pw-box{position:relative;max-width:1180px;margin:0 auto;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.55);border-radius:10px;box-shadow:0 30px 80px rgba(0,8,24,.5),inset 0 1px 0 rgba(255,255,255,.6);overflow:hidden}
.pw-box::before{content:"";display:block;height:5px;background:linear-gradient(90deg,#00152e,#004080 60%,#f3bd00)}

/* Header, tabs, status ribbon */
.pw-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.6rem}
.pw-brand{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit}
.pw-brand img{width:54px;height:54px;object-fit:contain}
.pw-brand b{display:block;font-size:1.2rem;font-weight:700;color:#334155;line-height:1.2}
.pw-brand small{display:block;color:var(--primary);font-weight:700;font-size:.88rem}
.pw-user{display:flex;flex:none;align-items:center;gap:.8rem}
.pw-user .av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--primary-dark);background:#eef3fa;border:1px solid #d5e0ee;box-shadow:inset 0 0 0 3px #fff}
.pw-user b{font-size:.92rem;color:#1e293b;text-transform:uppercase;max-width:15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.pw-user small{display:block;color:var(--muted);font-size:.78rem}
.pw-user .btn{padding:.5rem 1.1rem;font-size:.85rem;border-radius:5px}
.pw-tabs{display:flex;gap:.15rem;padding:.35rem 1.2rem;border-top:4px solid #d3dbe6;border-bottom:4px solid #d3dbe6;overflow-x:auto;scrollbar-width:thin}
.pw-tabs a{flex:none;padding:.7rem 1.2rem;color:#1e293b;font-weight:600;font-size:.95rem;text-decoration:none;border-radius:2px;white-space:nowrap}
.pw-tabs a:hover{background:#eef3fa;color:var(--primary)}
.pw-tabs a[aria-current=page]{background:var(--grad-navy);color:#fff}
.pw-ribbon{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.55rem;padding:.35rem 1.1rem .35rem 1.6rem;background:linear-gradient(90deg,#fff 0%,#fff 30%,rgba(0,64,128,.72) 75%,#00264d 100%);min-height:2.2rem;font-size:.85rem;color:#475569}
.pw-ribbon .state{padding:.1rem .8rem;border-radius:99px;background:#fff;color:var(--primary-dark);font-weight:700;font-size:.82rem}
.pw-ribbon .state.grad{color:#7a5c00}
.pw-main{padding:1.5rem 1.6rem 2.5rem;min-height:22rem}
.pw-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.2rem 1.6rem;background:var(--grad-navy);color:#d7e5f7;font-size:.85rem}
.pw-foot a{color:#fff;text-decoration:none} .pw-foot a:hover{text-decoration:underline}
.pw-foot .sep{opacity:.5;margin:0 .6rem}

/* Page headings */
.pw-main h1{font-size:1.65rem;font-weight:600;color:#1e293b;margin-bottom:.35rem}
.pw-main>h1::after,.pw-main .pagehead h1::after,.pw-main .pw-split h1::after{content:"";display:block;width:58px;height:4px;border-radius:4px;margin-top:.55rem;background:linear-gradient(90deg,var(--primary) 0 62%,var(--accent) 62%)}
.pw-main>h1+p,.pw-main .pagehead p{margin:.9rem 0 1.25rem}
.pw-main h2{font-size:1.15rem;font-weight:600;color:#1e293b}

/* Controls, tables, panels (light and quiet) */
.area-portal input:not([type=checkbox]):not([type=radio]):not([type=file]),.area-portal select,.area-portal textarea{background:#f0f3f7;border:1px solid #e0e6ee;border-radius:4px;color:#1e293b}
.area-portal input:focus,.area-portal select:focus,.area-portal textarea:focus{background:#fff;border-color:var(--primary-light)}
.area-portal .btn{border-radius:5px}
.area-portal .panel{background:#f6f8fb;border:1px solid #e3e9f1;border-left:4px solid var(--primary);border-radius:4px;box-shadow:none}
.area-portal .table-wrap{border:1px solid #e3e9f1;border-radius:4px;box-shadow:none}
.area-portal th{background:#fff;color:#1e293b;font-size:.88rem;border-bottom:2px solid #d3dbe6}
.area-portal tbody tr:hover td{background:#f8fafd}
.area-portal .flash{border-radius:4px}
.area-portal .offer{background:#f2f7fd;border:1px solid #cfe0f3;border-left:4px solid var(--primary);border-radius:4px;box-shadow:none}
.area-portal .offer h2{color:var(--primary-dark)}
.steps-nav{display:flex;gap:.45rem;margin-bottom:1.25rem;flex-wrap:wrap}
.steps-nav span{display:inline-block;padding:.45rem 1.1rem;border-radius:3px;background:#eef3fa;border:1px solid #d5e0ee;font-weight:600;font-size:.9rem;color:var(--primary)}
.steps-nav span.on{background:var(--grad-navy);color:#fff;border-color:var(--primary-dark)}

/* Dashboard */
.dash{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:1.75rem;align-items:start}
.idcard{background:var(--grad-navy);color:#fff;border-radius:3px;padding:1.4rem 1.3rem 1.5rem}
.idcard .av{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 0 .9rem;background:#fff;color:var(--primary-dark);font:700 1.7rem var(--sans);border:3px solid var(--accent)}
.idcard h2{color:#fff;font-size:1.25rem;font-weight:500;text-transform:uppercase;margin:0 0 1rem;letter-spacing:.01em}
.idcard ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.idcard li{display:flex;gap:.55rem;font-size:.95rem;line-height:1.35;color:#cfe0f5;overflow-wrap:anywhere}
.idcard li::before{content:"\00BB";color:#7fb2ea;font-weight:700}
.idcard li b{color:#fff;margin-right:.3rem;font-weight:700}
.quick{display:flex;gap:.6rem;flex-wrap:wrap;padding-bottom:1.2rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
.quick a{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border:1px solid #cdd6e2;border-radius:3px;background:#fff;color:#1e293b;text-decoration:none;font-size:.9rem}
.quick a:hover{border-color:var(--primary);color:var(--primary)}
.quick a.go{background:var(--grad-navy);color:#fff;border-color:var(--primary-dark)}
.quick svg{width:1rem;height:1rem}
.alert{display:flex;gap:.8rem;align-items:center;padding:.9rem 1.1rem;margin-bottom:1.2rem;border-radius:4px;background:#fff6d1;border:1px solid #f0d36b;border-left:5px solid var(--accent);color:#5c4700}
.alert svg{width:1.3rem;height:1.3rem;flex:none}
.alert div{flex:1;min-width:0} .alert b{display:block;color:#3d3000}
.alert .btn{padding:.5rem 1.1rem;font-size:.88rem}
details.cp{margin-bottom:1.1rem;border:1px solid #d9e5d9;border:1px solid #cfdcec;border-radius:3px;background:#fff}
details.cp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;background:#e6eef8;color:#00264d;font-weight:600}
details.cp>summary::-webkit-details-marker{display:none}
details.cp>summary::before{content:"\2212";font-weight:700;width:1rem;text-align:center}
details.cp:not([open])>summary::before{content:"+"}
details.cp>summary .count{margin-left:auto;font-size:.75rem;background:var(--primary);color:#fff;border-radius:99px;padding:.05rem .6rem}
details.cp>.body{padding:1rem 1.1rem 1.2rem}
.cp table{background:#fff} .cp .table-wrap{border:0}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.item{position:relative;padding:.85rem 1rem .85rem 1.2rem;border:1px solid #e3e9f1;border-radius:3px;background:#f8fafd}
.item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary-light)}
.item.important::before{background:var(--accent)} .item.urgent::before{background:#d92d20}
.item.urgent{background:#fef3f2;border-color:#f3b8b2}
.item h3{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:0 0 .2rem;font-size:1rem;color:#1e293b}
.item h3 svg{width:.95rem;height:.95rem;color:var(--primary)}
.item p{margin:0 0 .4rem;font-size:.93rem;white-space:pre-line;max-width:none}
.item time{font-size:.78rem;color:var(--muted)}
.tag{font-size:.68rem;font-weight:700;padding:.1rem .55rem;border-radius:99px;background:var(--accent-soft);color:#7a5c00;border:1px solid #f0d36b}
.tag.urgent{background:var(--bad-tint);color:var(--bad);border-color:#f3b8b2}
.empty{text-align:center;padding:1.6rem 1rem;color:var(--muted)} .empty b{display:block;color:#334155}
.empty svg{width:1.6rem;height:1.6rem;margin-bottom:.4rem;opacity:.6}
.st{font-weight:600} .st.ok{color:var(--ok)} .st.todo{color:#9a6b00} .st.lock{color:var(--muted)} .st.bad{color:var(--bad)}
.meter{height:6px;border-radius:6px;background:#e3e9f1;overflow:hidden;margin-top:.35rem;max-width:12rem}
.meter i{display:block;height:100%;background:var(--grad-navy)}

/* Profile and password: sub-menu on the left */
.pw-split{display:grid;grid-template-columns:230px minmax(0,1fr);gap:2rem;align-items:start}
.pw-sub{display:grid;gap:0}
.pw-sub .who{padding:0 0 1rem;margin-bottom:.5rem;border-bottom:1px dashed #cdd6e2}
.pw-sub .who .av{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font:700 1.5rem var(--sans);color:var(--primary-dark);background:#eef3fa;border:2px solid #d5e0ee;margin-bottom:.6rem}
.pw-sub .who b{display:block;font-size:.92rem;text-transform:uppercase;color:#1e293b;overflow-wrap:anywhere} .pw-sub .who small{color:var(--muted)}
.pw-sub a{display:block;padding:.75rem .2rem;border-bottom:1px dashed #cdd6e2;color:#64748b;text-decoration:none;font-size:.95rem}
.pw-sub a:hover{color:var(--primary)}
.pw-sub a[aria-current=page]{color:var(--primary);font-weight:700;border-bottom-style:solid;border-bottom-color:var(--primary)}
.pw-split .narrow{max-width:none}

/* Sign in page */
.pw-login{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:2.5rem;padding:2.5rem 1.6rem 3rem;align-items:start}
.pw-welcome h2{font-size:1.5rem;font-weight:500;color:#1e293b;margin-bottom:.8rem}
.pw-welcome p{color:#64748b;line-height:1.8;max-width:60ch}
.pw-welcome ol{color:#64748b;line-height:1.9;padding-left:1.4rem;margin:.2rem 0 1rem}
.pw-loginbox{background:#f1f3f6;padding:1.6rem 1.7rem 1.8rem}
.pw-loginbox .crest{display:block;width:104px;margin:.4rem auto .8rem}
.pw-loginbox h2{text-align:center;font-size:1.05rem;font-weight:500;color:#64748b;margin:0 0 1rem;padding-bottom:1rem;border-bottom:3px solid var(--primary)}
.pw-loginbox .sub{color:#64748b;font-size:.9rem;text-align:center}
.pw-loginbox label{color:#64748b}
.pw-loginbox .btn.block{width:auto;float:right;padding:.65rem 1.9rem;margin-top:.2rem}
.pw-loginbox form::after{content:"";display:block;clear:both}
.pw-loginbox .links{clear:both;text-align:left;padding-top:.6rem}

/* Blue theme layer: glass sheet on the navy page, blue gradient for the boxes that used to be grey */
.pw-head{background:transparent}
.pw-tabs{border-color:rgba(0,64,128,.16)}
.pw-tabs a:hover{background:rgba(0,64,128,.08)}
.pw-ribbon{background:linear-gradient(90deg,transparent 0%,transparent 30%,rgba(0,64,128,.75) 75%,#00264d 100%)}
.pw-loginbox{background:var(--grad-navy);border-radius:8px;color:#d9e5f7;box-shadow:0 18px 40px rgba(0,26,56,.35),inset 0 1px 0 rgba(255,255,255,.18);padding:1.8rem 1.8rem 2rem}
.pw-loginbox .crest{background:#fff;border-radius:22px;padding:.5rem;width:96px;box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 5px rgba(255,255,255,.12)}
.pw-loginbox h2{color:#fff;border-bottom-color:var(--accent);font-weight:600}
.pw-loginbox label{color:#d9e5f7}
.pw-loginbox input:not([type=checkbox]){background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.26)!important;color:#fff!important}
.pw-loginbox input:focus{background:rgba(255,255,255,.18)!important;border-color:var(--accent)!important}
.pw-loginbox .pw button{color:#cfe0f5}
.pw-loginbox .btn.block{background:linear-gradient(135deg,#ffd84a,#f3bd00 55%,#e0a800);color:#0b1d3a;font-weight:700;box-shadow:0 8px 20px rgba(243,189,0,.28)}
.pw-loginbox .links a{color:#ffd84a}
.pw-welcome h2{font-weight:700;color:var(--primary-dark)}
.pw-welcome p{color:#475569}
.area-portal input:not([type=checkbox]):not([type=radio]):not([type=file]),.area-portal select,.area-portal textarea{background:rgba(255,255,255,.75);border-color:rgba(0,64,128,.2)}
.area-portal .panel{background:linear-gradient(135deg,rgba(0,64,128,.10),rgba(0,64,128,.04));border-color:rgba(0,64,128,.16)}
.area-portal .offer{background:linear-gradient(135deg,rgba(0,64,128,.10),rgba(243,189,0,.10));border-color:rgba(0,64,128,.18)}
.area-portal .table-wrap,.cp table{background:rgba(255,255,255,.7)} .area-portal th{background:rgba(255,255,255,.85)}
.area-portal tbody tr:hover td{background:rgba(0,64,128,.05)}
details.cp{background:rgba(255,255,255,.6);border-color:rgba(0,64,128,.18);border-radius:8px;overflow:hidden}
details.cp>summary{background:var(--grad-navy);color:#fff}
details.cp>summary .count{background:var(--accent);color:#0b1d3a;font-weight:700}
.item{background:rgba(255,255,255,.75);border-color:rgba(0,64,128,.14)}
.item.urgent{background:rgba(254,243,242,.9)}
.quick a{background:rgba(255,255,255,.75);border-color:rgba(0,64,128,.22)}
.quick a.go,.pw-tabs a[aria-current=page]{background:var(--grad-navy)}
.idcard{border-radius:8px;box-shadow:0 14px 34px rgba(0,26,56,.3)}
.steps-nav span{background:rgba(0,64,128,.08);border-color:rgba(0,64,128,.18)}
.pw-sub .who .av{background:rgba(255,255,255,.8)}
.pw-foot{background:var(--grad-navy)}
.meter{background:rgba(0,64,128,.14)}

.pw-welcome h3{margin:1.7rem 0 .6rem;font-size:1.15rem;font-weight:700;color:var(--primary-dark)}
.pw-list{margin:.2rem 0 1rem;padding-left:1.3rem;color:#475569;line-height:1.75}
.pw-list li{margin-bottom:.35rem;overflow-wrap:anywhere} .pw-list b{color:#1e293b}
ul.pw-list{list-style:disc}
.pw-caution{font-weight:600;color:#334155}

@media (max-width:900px){
  .dash,.pw-split,.pw-login{grid-template-columns:minmax(0,1fr)}
  .pw-sub{grid-template-columns:1fr 1fr;gap:0 1rem} .pw-sub .who{grid-column:1/-1}
  .pw-login{padding:1.25rem 1rem 2rem;gap:1.5rem} .pw-loginbox{order:-1}
}
@media (max-width:640px){
  .pw-user .btn{padding:.4rem .7rem}
  .cp,.cp>div,.dash>*,.pw-split>*{min-width:0} .cp table{display:block;overflow-x:auto;max-width:100%}
  .pw-head{padding:.8rem 1rem} .pw-brand b{font-size:1rem} .pw-brand img{width:44px;height:44px}
  .pw-user .who-t{display:none}
  .pw-tabs{padding:.25rem .5rem} .pw-tabs a{padding:.65rem .85rem;font-size:.9rem}
  .pw-ribbon{padding-left:1rem;font-size:.8rem} .pw-main{padding:1.1rem 1rem 2rem}
  .alert{flex-wrap:wrap} .pw-foot{padding:1rem}
}
@media print{.pw-head .pw-user,.pw-tabs,.pw-ribbon,.pw-foot,.quick{display:none!important} .psh{padding:0} .pw-box{box-shadow:none}}
.pw-bar{height:4px;background:rgba(0,64,128,.16)}