*{box-sizing:border-box}
:root{
  --navy:#122b3f;
  --navy-2:#17364e;
  --ink:#14283a;
  --muted:#68747e;
  --cream:#f7f4ee;
  --paper:#fffdfa;
  --line:#dddcd6;
  --sage:#839883;
  --gold:#c9a96c;
  --purple:#7440d8;
  --shadow:0 8px 24px rgba(20,40,58,.08);
}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--cream)}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
.topbar{
  min-height:138px;
  padding:22px 3vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:linear-gradient(105deg,#102a3d 0%,#17384f 62%,#11283a 100%);
  color:white;
  box-shadow:0 3px 14px rgba(0,0,0,.12);
}
.brand{display:flex;align-items:center;gap:22px}
.brand-logo{
  width:94px;height:94px;border-radius:50%;object-fit:cover;
  background:white;border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 5px rgba(255,255,255,.08)
}
.school-name{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,3vw,50px);line-height:1;color:#fff}
.dashboard-name{margin-top:5px;font-size:clamp(14px,1.5vw,22px);letter-spacing:.16em;font-weight:750;color:#e0c48d}
.topbar-right{display:flex;align-items:center;gap:28px}
.staff-mini{display:flex;gap:12px;align-items:center;max-width:310px}
.staff-mini-icon{font-size:29px;color:#b8c5ac}
.staff-mini strong{display:block;font-size:13px;letter-spacing:.09em}
.staff-mini span{display:block;margin-top:5px;font-size:13px;line-height:1.35;color:rgba(255,255,255,.82)}
.top-clock{min-width:120px;padding-left:22px;border-left:1px solid rgba(255,255,255,.2)}
.top-clock strong{display:block;font-size:25px}
.top-clock span{display:block;margin-top:2px;font-size:11px;color:rgba(255,255,255,.74)}

.dashboard{
  width:min(1500px,94vw);
  margin:20px auto 24px;
  display:grid;
  grid-template-columns:minmax(250px,370px) minmax(370px,1fr) minmax(340px,520px);
  grid-template-areas:
    "left hero right"
    "left resources resources";
  gap:18px;
  flex:1
}
.left-rail{grid-area:left;display:flex;flex-direction:column;gap:16px}
.hero{grid-area:hero;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:16px 22px 10px;text-align:center}
.right-rail{grid-area:right;display:flex;flex-direction:column;gap:16px}
.resources{grid-area:resources}

.card{
  background:rgba(255,253,250,.96);
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:var(--shadow);
  padding:20px;
}
.card-title{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:850;letter-spacing:.075em;color:var(--ink)
}
.today-date{margin-top:21px;font-size:18px;font-weight:650}
.today-copy{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.45}

.quick-list{margin-top:14px}
.quick-list a{
  display:grid;grid-template-columns:25px 1fr auto;gap:11px;align-items:center;
  padding:9px 2px;text-decoration:none;border-radius:9px;font-size:14px
}
.quick-list a:hover{background:#f4f1eb}
.quick-list img{width:23px;height:23px;object-fit:contain}
.quick-list b{font-size:22px;color:#8e969c;font-weight:400}

.staff-main{display:flex;align-items:center;gap:13px;margin-top:17px}
.avatar{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  font-size:22px;font-weight:900;color:white;background:linear-gradient(135deg,var(--navy),var(--sage))
}
.staff-ident h3{margin:0;font-size:18px}
.staff-ident span{display:block;margin-top:3px;font-size:12px;color:#3f6a85;overflow-wrap:anywhere}
.staff-ident small{display:block;margin-top:2px;color:#8a9095}
.staff-status{display:flex;justify-content:space-between;gap:14px;margin-top:17px;padding-top:14px;border-top:1px solid var(--line);font-size:12px}
.staff-status b{color:#627b68}
.schedule-btn{
  display:block;margin-top:15px;padding:10px 12px;border-radius:9px;background:var(--navy);
  color:white;text-decoration:none;text-align:center;font-weight:750;font-size:13px
}

.welcome-line{width:100%;display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0 8px}
.welcome-line span{width:58px;height:1px;background:#d8d3cb}
.welcome-line b{font-size:14px;letter-spacing:.24em}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,3.2vw,52px);font-weight:500;margin:4px 0 16px}
.badge-stage{position:relative;width:min(355px,75%);aspect-ratio:1/1;outline:none}
.logo-shell{
  width:100%;height:100%;border-radius:50%;padding:9px;background:var(--navy);
  border:3px solid #eef0e9;box-shadow:0 0 0 3px var(--sage),0 18px 40px rgba(18,43,63,.14);
  overflow:hidden
}
.portal-badge{width:100%;height:100%;border-radius:50%;object-fit:cover;background:white}
.logo-help{margin-top:7px;color:var(--sage);font-size:28px;transform:rotate(-28deg)}
.logo-caption{font-size:15px;line-height:1.45;color:#34495a}
.logo-caption strong{font-size:16px}
blockquote{margin:22px 0 0;font-family:Georgia,serif;font-size:14px;color:#6d7477}
blockquote small{display:block;margin-top:5px;font-family:Inter,system-ui,sans-serif;font-size:11px}

/* Circular upcoming-event hover */
#branchAssignmentHover{
  position:absolute;inset:3%;border-radius:50%;
  background:radial-gradient(circle at 50% 20%,#244961,#112a3e 72%);
  border:1px solid rgba(255,255,255,.45);color:white;overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;transform:scale(.97);
  transition:.18s ease;z-index:5
}
.badge-stage:hover #branchAssignmentHover,.badge-stage:focus-within #branchAssignmentHover,#branchAssignmentHover:hover{
  opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)
}
.branch-assignment-hover-shell{position:absolute;inset:12% 10% 9%;display:flex;flex-direction:column;min-height:0}
.branch-assignment-hover-header{text-align:center;padding:0 8px 10px}
.branch-assignment-hover-title{font-size:15px;font-weight:900;letter-spacing:.08em;color:#e1c58e}
.branch-assignment-hover-subtitle{font-size:10px;color:rgba(255,255,255,.68);margin-top:4px}
#branchAssignmentHoverList{flex:1;min-height:0;overflow:auto;padding-right:4px}
.branch-assignment-hover-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;
  padding:9px 10px;margin-bottom:6px;border-radius:10px;
  background:rgba(255,255,255,.08);text-decoration:none;color:white;text-align:left
}
.branch-assignment-hover-name{display:block;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.branch-assignment-hover-course{display:block;font-size:9px;color:rgba(255,255,255,.62);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.branch-assignment-hover-due{align-self:center;font-size:9px;font-weight:800;color:#d8c18f;text-align:right}
.branch-assignment-hover-due.today{color:#ff9b97}.branch-assignment-hover-due.tomorrow{color:#f0cb7e}
.branch-assignment-hover-empty{padding:22px 12px;font-size:11px;color:rgba(255,255,255,.72)}
.branch-assignment-hover-footer{padding-top:7px}
.branch-assignment-hover-footer a{font-size:10px;font-weight:800;color:#e1c58e;text-decoration:none}

/* Upcoming calendar */
.agenda-card{min-height:450px}
.branch-miniweek-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.branch-miniweek-label{font-size:13px;font-weight:850;letter-spacing:.055em}
.branch-miniweek-open{font-size:12px;text-decoration:none;color:#394b5b}
.branch-miniweek-days{display:grid;gap:9px;margin-top:12px}
.branch-miniweek-day{
  display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;
  border:1px solid #e5e2dc;border-radius:10px;padding:12px;background:#fff
}
.branch-miniweek-day.is-today{border-left:4px solid #315d95}
.branch-miniweek-dayname{font-size:10px;text-transform:uppercase;font-weight:750;color:#6d757c}
.branch-miniweek-date{font-size:25px;font-weight:850;line-height:1}
.branch-miniweek-events{display:grid;gap:7px}
.branch-miniweek-event{
  border:0;background:transparent;padding:0;text-align:left;cursor:pointer;color:var(--ink);font:inherit
}
.branch-miniweek-event-title{font-size:14px;font-weight:750}
.branch-miniweek-event-time{margin-top:3px;font-size:12px;color:#68747e}
.branch-miniweek-connect{border:0;background:#eef2f2;color:#385269;padding:7px 9px;border-radius:7px;font-weight:750;cursor:pointer}
.branch-miniweek-status{margin-top:13px;font-size:11px;color:#7e858a}
.branch-miniweek-loading,.branch-miniweek-noitems{padding:25px 4px;color:#7f8589;font-size:13px}

.panel-title-row{display:flex;align-items:center;justify-content:space-between}
.live-dot{font-size:10px;font-weight:850;letter-spacing:.08em;color:#577464;background:#edf3ee;padding:5px 7px;border-radius:999px}
.announcements-list{margin-top:12px;display:grid;gap:9px;max-height:160px;overflow:auto}
.announcement-status{color:#7c8387;font-size:13px}
.announcement-item,.announcement{
  padding:10px 11px;border-radius:9px;background:#f7f5f1;border:1px solid #ebe6df;font-size:12px
}

.resources{padding:18px 20px 16px}
.resource-row{display:grid;grid-template-columns:repeat(6,minmax(105px,1fr));gap:14px;margin-top:15px}
.resource-row a{
  min-height:120px;border:1px solid #e3dfd8;border-radius:10px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:14px;text-decoration:none;box-shadow:0 2px 7px rgba(20,40,58,.04)
}
.resource-row a:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(20,40,58,.09)}
.resource-row img{width:42px;height:42px;object-fit:contain}
.resource-row span{font-size:13px;text-align:center}

footer{
  min-height:60px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(100deg,#15344a,#10283a);color:#f0e6d0;font-size:12px
}
footer span{font-style:italic} footer b{color:white;letter-spacing:.03em}

@media(max-width:1120px){
  .dashboard{grid-template-columns:300px 1fr;grid-template-areas:"left hero" "left right" "resources resources"}
  .right-rail{grid-area:right}
  .resource-row{grid-template-columns:repeat(3,1fr)}
  .topbar-right .staff-mini{display:none}
}
@media(max-width:760px){
  .topbar{padding:18px;min-height:auto}
  .brand-logo{width:68px;height:68px}.school-name{font-size:27px}.dashboard-name{font-size:12px}
  .top-clock{display:none}
  .dashboard{width:92vw;grid-template-columns:1fr;grid-template-areas:"hero" "left" "right" "resources"}
  .resource-row{grid-template-columns:repeat(2,1fr)}
  .badge-stage{width:min(330px,86vw)}
  footer{flex-direction:column;justify-content:center;padding:14px;text-align:center}
}