/* StudifyPro Agents — portal design system (matches hosted redesign) */
:root{--nav:#25216b;--nav2:#3730a3;--accent:#f4522d;--ink:#1c2130;--muted:#777b91;--bg:#f4f5fb;--card:#fff;--line:#e6e8f2;--ok:#0a8a4a;--warn:#b45309;--bad:#c62828;--radius:12px}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;font-size:15px}
a{color:inherit;text-decoration:none}

/* ---------- top bar ---------- */
header.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,var(--nav),var(--nav2));color:#fff;padding:.7rem 1.2rem;box-shadow:0 2px 10px rgba(20,16,60,.25)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.05rem;color:#fff}
.brand .logo{width:30px;height:30px;border-radius:8px;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem}
.brand em{font-style:normal;font-weight:600;color:#c9cbe6}
.top-right{display:flex;align-items:center;gap:.8rem}
.top-user{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.hamb{display:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;width:36px;height:36px;font-size:1.1rem;cursor:pointer}

/* ---------- layout ---------- */
html,body{overflow-x:clip}            /* hard stop: nothing may widen the page (cards stay screen-width) */
.layout{display:flex;min-height:calc(100vh - 52px)}
aside{width:240px;flex:0 0 240px;background:#fff;border-right:1px solid var(--line);padding:1rem .8rem;display:flex;flex-direction:column;gap:.35rem}
aside .group{font-size:.68rem;letter-spacing:.09em;color:var(--muted);font-weight:700;margin:.9rem .4rem .25rem;text-transform:uppercase}
aside .group:first-child{margin-top:.1rem}
.nav{display:flex;flex-direction:column;gap:.15rem}
.nav a{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:9px;color:#3c4257;font-weight:500;font-size:.9rem;transition:background .15s,color .15s}
.nav a:hover{background:#f0f1fa}
.nav a.current{background:var(--nav);color:#fff;box-shadow:0 4px 12px rgba(37,33,107,.28)}
.nav a .nav-icon{width:1.2rem;text-align:center;font-size:.95rem;opacity:.85}
.aside-note{margin-top:auto;font-size:.72rem;color:var(--muted);padding:.7rem .5rem;line-height:1.5}

main.content{flex:1;min-width:0;padding:1.6rem clamp(.9rem,3vw,2.2rem) 3rem;max-width:1240px}
.crumb{font-size:.75rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.intro p{font-size:.85rem;color:var(--muted);margin-top:.1rem}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:.9rem 0 1.3rem;flex-wrap:wrap}
.pagehead h2{font-size:1.5rem;letter-spacing:-.01em}
.pagehead p{color:var(--muted);font-size:.9rem;margin-top:.15rem}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:1rem}
.grid.stats{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}   /* min() keeps cells inside the screen on narrow phones */
.grid.two{grid-template-columns:1.4fr 1fr;margin-top:1rem}
.grid.form-two{grid-template-columns:1fr 1fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:0 1px 3px rgba(25,25,60,.05);max-width:100%;min-width:0}
.card *{min-width:0}                                                                 /* grid/flex children may shrink below content size instead of widening the card */
.card .value{overflow-wrap:anywhere}
.card.stat small{color:var(--muted);font-size:.75rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.card.stat .value{font-size:1.55rem;font-weight:800;margin:.25rem 0 .1rem}
.card.stat .sub{font-size:.78rem;color:var(--muted)}
.sectionhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}
.banner{background:#eef0ff;border:1px solid #dcdffb;color:#33386b;border-radius:10px;padding:.75rem 1rem;font-size:.88rem;margin-bottom:1.1rem}
.banner.ok{background:#e9f7ef;border-color:#bfe6cf;color:#14532d}
.banner.warn{background:#fdf3e3;border-color:#f2ddb8;color:#7c4a03}
.banner.bad{background:#fdecec;border-color:#f3c4c4;color:#8c1d18}
.footer{margin-top:2.2rem;font-size:.75rem;color:var(--muted)}
.footer a{color:var(--nav2);font-weight:600}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:620px}
.table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:.55rem .7rem;border-bottom:2px solid var(--line)}
.table td{padding:.65rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:#f7f8fd}
.amount{font-weight:700;white-space:nowrap}
.tag{display:inline-block;padding:.18rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;background:#e9f7ef;color:var(--ok);white-space:nowrap}
.tag.pending{background:#fdf3e3;color:var(--warn)}
.tag.bad{background:#fdecec;color:var(--bad)}
.tag.neutral{background:#eef0f6;color:#4a5066}
.tag.accent{background:#fdeae5;color:#a33a1c}

/* ---------- forms ---------- */
form .field{margin-bottom:1rem}
label{display:block;font-size:.8rem;font-weight:700;color:#3c4257;margin-bottom:.35rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],select,textarea{width:100%;padding:.62rem .75rem;border:1px solid #cfd3e4;border-radius:9px;font:inherit;font-size:.92rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(55,48,163,.25);border-color:var(--nav2)}
textarea{min-height:96px;resize:vertical}
.help{font-size:.76rem;color:var(--muted);margin-top:.3rem}
.req{color:var(--bad)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--nav);color:#fff;border:none;border-radius:9px;padding:.62rem 1.1rem;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:filter .15s,transform .05s;box-shadow:0 4px 12px rgba(37,33,107,.22)}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn.outline{background:#fff;color:var(--nav);border:1.5px solid var(--nav);box-shadow:none}
.btn.outline:hover{background:#f0f1fa}
.btn.ghost{background:transparent;color:var(--nav2);box-shadow:none;border:1px solid transparent}
.btn.ghost:hover{background:#f0f1fa}
.btn.danger{background:var(--bad);box-shadow:0 4px 12px rgba(198,40,40,.2)}
.btn.sm{padding:.4rem .8rem;font-size:.8rem;border-radius:8px}
.btn.block{width:100%}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.textlink{color:var(--nav2);font-weight:700;font-size:.85rem}
.textlink:hover{text-decoration:underline}

/* ---------- misc ---------- */
.row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.6rem 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.row:last-child{border-bottom:none}
.pill{display:inline-flex;align-items:center;gap:.35rem;background:#eef0f6;color:#4a5066;border-radius:999px;padding:.3rem .8rem;font-size:.78rem;font-weight:700}
.list{display:flex;flex-direction:column;gap:.55rem}
.listitem{display:flex;justify-content:space-between;align-items:center;gap:.8rem;border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;background:#fafbff}
.listitem b{font-size:.9rem}
.listitem .meta{font-size:.76rem;color:var(--muted)}
.token-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:.06em;font-weight:700;background:#f0f1fa;border:1px dashed #b9bedd;border-radius:9px;padding:.7rem .9rem;display:block;word-break:break-all}
.steps{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.step{flex:1;min-width:120px;text-align:center;font-size:.75rem;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:9px;padding:.5rem .4rem}
.step.on{background:var(--nav);color:#fff;border-color:var(--nav)}
.step.done{background:#e9f7ef;color:var(--ok);border-color:#bfe6cf}
.kv{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.kv:last-child{border-bottom:none}
.kv b{font-weight:700}
.muted{color:var(--muted)}
.center{text-align:center}
.mt1{margin-top:1rem}.mt2{margin-top:1.6rem}.mb1{margin-bottom:1rem}
.authwrap{max-width:460px;margin:2.5rem auto;padding:0 1rem}
.authwrap .card{padding:1.6rem}
.authwrap h2{margin-bottom:.3rem}
.authwrap .sub{color:var(--muted);font-size:.88rem;margin-bottom:1.2rem}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);background:var(--nav);color:#fff;padding:.7rem 1.2rem;border-radius:10px;font-size:.88rem;box-shadow:0 8px 24px rgba(20,16,60,.35);z-index:99;display:none}
.toast.show{display:block}
.err{color:var(--bad);font-size:.8rem;margin-top:.35rem;display:none}
.err.show{display:block}

/* ---------- responsive: mobile = no slider nav; hamburger opens a dropdown menu panel ---------- */
@media (max-width:1050px){aside{width:200px;flex-basis:200px}.grid.two{grid-template-columns:1fr}}
@media (max-width:700px){
  header.top{padding:.6rem .8rem}
  .brand{font-size:.95rem}
  .top-right{gap:.5rem;flex:none}
  #logoutBtn{display:inline-flex;padding:.35rem .7rem;font-size:.78rem}  /* logout lives in the topbar, always visible */
  .hamb{display:inline-flex;align-items:center;justify-content:center}
  .layout{display:block}
  /* Slider nav removed on mobile: hidden by default, shown only as a dropdown panel when ≡ is tapped */
  aside{display:none;width:auto;flex:none;border-right:none;position:relative;padding:0}
  aside.mob-open{display:block;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(20,16,60,.14);padding:.7rem .8rem;z-index:60}
  aside.mob-open .nav{flex-direction:column;overflow:visible;gap:.15rem}
  aside.mob-open .nav a{border-radius:9px;border:none;padding:.55rem .6rem;font-size:.9rem;white-space:normal}
  aside.mob-open .nav a .nav-icon{display:inline}
  aside.mob-open .group{display:block;margin-top:.5rem}
  main.content{padding:1.1rem .9rem 2.5rem}
  .pagehead h2{font-size:1.25rem}
  .grid.stats{grid-template-columns:1fr 1fr}
  .grid.form-two{grid-template-columns:1fr}
}
@media (max-width:370px){.grid.stats{grid-template-columns:1fr}}
@media print{header.top,aside,.btn,.actions{display:none!important}body{background:#fff}.card{border:none;box-shadow:none}}

/* ---- PWA notification centre (bell, badge, dropdown) ---- */
.bell{position:relative;background:transparent;border:0;color:#fff;font-size:17px;cursor:pointer;padding:6px 8px;line-height:1}
.bell .badge{position:absolute;top:0;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#e5484d;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.notif-dd{display:none;position:fixed;top:52px;right:12px;width:min(340px,calc(100vw - 24px));max-height:70vh;overflow:auto;background:#fff;border:1px solid #e3e8f0;border-radius:14px;box-shadow:0 18px 44px rgba(10,20,50,.22);z-index:1200}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eef1f6;position:sticky;top:0;background:#fff}
.notif-empty{padding:18px 14px;color:#667085;font-size:13px}
.notif-item{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid #f2f4f8;text-decoration:none;color:#1c2434}
.notif-item:hover{background:#f7f9fc}
.notif-item .dot{width:8px;height:8px;border-radius:50%;background:#d7dde8;margin-top:5px;flex:none}
.notif-item.unread .dot{background:#2f6bff}
.notif-item.unread .nt b,.notif-item.unread .nt{font-weight:600}
.notif-item .nt{flex:1;font-size:13px;line-height:1.35}
.notif-item .nt small{display:block;color:#667085;font-weight:400;margin-top:2px}
.notif-item time{color:#98a2b3;font-size:11px;white-space:nowrap;margin-top:2px}
.notif-foot{display:block;text-align:center;padding:11px;font-size:12.5px;font-weight:600;color:#2f6bff;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid #d7dde8;color:#344054}
@media(min-width:701px){.notif-dd{top:58px;right:20px}}