/* Smart School Portal — visual fidelity audit v0.8.85
   Final visual-polish layer aligned to the approved mobile/desktop portal reference.
   Business DOM, permissions and data contracts remain untouched. */
:root{
  --ssp-v3-shell:min(1240px,calc(100% - 34px));
  --ssp-v3-header:rgba(255,255,255,.94);
  --ssp-v3-line:#dfe9ee;
  --ssp-v3-shadow:0 18px 48px rgba(15,45,64,.08);
  --ssp-v3-shadow-soft:0 8px 24px rgba(15,45,64,.055);
}

/* Shared shell and interaction polish */
body.portal-role{background:
  radial-gradient(circle at 90% -10%,rgba(var(--ssp-role-rgb),.11),transparent 30%),
  linear-gradient(180deg,#f9fcfd 0,#f2f7fa 52%,#f7fafc 100%)!important}
body.portal-role :is(a,button,input,select,textarea):focus-visible{outline:3px solid rgba(var(--ssp-role-rgb),.22)!important;outline-offset:2px}
body.portal-role :is(.card,.ps-card,.sb-panel,.manager-quick-card,.quick-card){transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
body.portal-role :is(.card,.ps-card,.sb-panel):hover{border-color:rgba(var(--ssp-role-rgb),.18)!important}
body.portal-role .portal-lobby-link{background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
body.portal-role .portal-lobby-link::before{content:"▦"}

/* Desktop app-frame feel — avoids stretching content across large monitors */
body.portal-role :is(.main,.shell,.ps-shell,.activity-standalone-shell,.sb-shell){max-width:100%}
@media(min-width:1180px){
  body.portal-role #schoolView>.main{min-width:0}
  body.portal-role #schoolView>.main>.topbar{padding-inline:24px}
  body.portal-role main.shell{width:var(--ssp-v3-shell)!important}
  body.portal-role .ps-shell{width:min(1180px,calc(100% - 36px))!important}
}

/* Unified top bars */
body.portal-role :is(.topbar,.ps-topbar,.sb-header){background:var(--ssp-v3-header)!important;backdrop-filter:blur(18px)!important;border-bottom:1px solid rgba(var(--ssp-role-rgb),.10)!important}
body.portal-role .topbar{min-height:76px!important;padding-block:10px!important}
body.portal-role .topbar h2{font-size:18px!important;letter-spacing:-.01em}
body.portal-role .topbar .eyebrow{font-size:10px!important;font-weight:900!important;letter-spacing:.02em}
body.portal-role .status-pill{border:1px solid #dce8ed!important;background:#fff!important;border-radius:999px!important;padding:8px 11px!important;box-shadow:none!important}
body.portal-role .status-pill .status-dot{box-shadow:0 0 0 4px rgba(23,171,112,.10)}

/* ROLE HERO — give each portal a recognisable visual signature */
body.portal-role :is(.hero,.ps-hero,.activity-standalone-header){isolation:isolate}
body.portal-role :is(.hero,.ps-hero,.activity-standalone-header)::before{
  content:"";position:absolute;inset-inline-end:-40px;top:-55px;width:210px;height:210px;border-radius:58px;
  transform:rotate(24deg);background:linear-gradient(145deg,rgba(var(--ssp-role-rgb),.16),rgba(var(--ssp-role-rgb),.025));
  border:1px solid rgba(var(--ssp-role-rgb),.10);z-index:-1;pointer-events:none
}
body.portal-role :is(.hero,.ps-hero) h1{letter-spacing:-.025em}
body.portal-role :is(.hero,.ps-hero) p{max-width:690px}

/* SCHOOL / MANAGER */
body.portal-role-manager #overviewPanel{gap:12px!important}
body.portal-role-manager #overviewPanel>.section-head:first-child{min-height:205px!important;padding:30px!important}
body.portal-role-manager #overviewPanel>.section-head:first-child::before{
  content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(var(--ssp-role-rgb),.035),transparent 42%);z-index:0
}
body.portal-role-manager #overviewPanel>.section-head:first-child h3{letter-spacing:-.025em}
body.portal-role-manager #overviewPanel>.metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important}
body.portal-role-manager #overviewPanel>.metrics .metric{min-height:98px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
body.portal-role-manager #overviewPanel>.metrics .metric span{font-size:11px!important}
body.portal-role-manager #overviewPanel>.metrics .metric strong{font-size:27px!important;line-height:1!important}
body.portal-role-manager .manager-quick-actions button::after{content:"‹";position:absolute;inset-inline-end:13px;top:12px;color:var(--ssp-role);font-size:16px;opacity:.45}
body.portal-role-manager .manager-quick-actions button b{font-size:14px!important}
body.portal-role-manager .manager-quick-actions button small{font-size:10.5px!important}

/* SCHOOL PUBLIC/PROFILE portal */
body.portal-role-school #schoolProfilePanel>.section-head:first-child{min-height:205px!important;padding:30px!important}
body.portal-role-school #schoolProfilePanel>.section-head:first-child:after{
  content:"الهوية • الأخبار • الخدمات • الإنجازات";position:absolute;inset-inline-start:30px;bottom:24px;color:rgba(var(--ssp-role-rgb),.60);font-size:10px;font-weight:900
}

/* TEACHER */
body.portal-role-teacher main.shell>.hero{min-height:215px!important}
body.portal-role-teacher .hero-summary{min-width:360px!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;overflow:hidden!important}
body.portal-role-teacher .hero-summary>div{padding:14px 16px!important;text-align:center!important;border-inline-start:1px solid #e6edf0!important}
body.portal-role-teacher .hero-summary>div:first-child{border-inline-start:0!important}
body.portal-role-teacher .hero-summary span{display:block!important;font-size:9.5px!important;color:#71838d!important}
body.portal-role-teacher .hero-summary strong{display:block!important;color:var(--ssp-role)!important;font-size:22px!important;margin-top:4px!important}
body.portal-role-teacher .portal-tabs{position:sticky!important;top:82px!important;z-index:12!important;overflow:auto!important;scrollbar-width:none!important}
body.portal-role-teacher .portal-tabs::-webkit-scrollbar{display:none}
body.portal-role-teacher .portal-tabs .tab{white-space:nowrap!important}
body.portal-role-teacher .quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
body.portal-role-teacher .quick-card{position:relative!important}
body.portal-role-teacher .quick-card::after{content:"‹";position:absolute;inset-inline-end:12px;top:12px;color:var(--ssp-role);opacity:.38;font-weight:900}
body.portal-role-teacher .today-card .timeline{border-radius:14px!important;background:#fbfdfe!important}

/* ACTIVITY */
body.portal-role-activity .activity-standalone-shell{width:min(1320px,calc(100% - 32px))!important}
body.portal-role-activity .activity-standalone-header{min-height:138px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important}
body.portal-role-activity .activity-standalone-header h1{font-size:26px!important;letter-spacing:-.02em}
body.portal-role-activity .activity-standalone-header p{font-size:12px!important;max-width:650px!important;line-height:1.7!important}
body.portal-role-activity .activity-actions{position:relative;z-index:2}
body.portal-role-activity .activity-tabs{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px)!important;border-radius:16px!important}
body.portal-role-activity .activity-hero{box-shadow:var(--ssp-v3-shadow-soft)!important}
body.portal-role-activity :is(.activity-stat,.activity-card,.activity-panel){border-radius:18px!important}

/* SERVICE PORTALS: guidance, subscriptions, communications */
body.portal-role .ps-topbar-inner{width:min(1180px,calc(100% - 32px))!important;min-height:74px!important}
body.portal-role .ps-brand img{width:46px!important;height:46px!important}
body.portal-role .ps-actions a,body.portal-role .ps-actions button{border-radius:11px!important}
body.portal-role .ps-hero{min-height:226px!important;padding:30px!important;align-items:center!important}
body.portal-role .ps-hero-copy{max-width:720px!important;position:relative!important;padding-inline-start:76px!important}
body.portal-role .ps-hero-copy::before{
  content:"◉";position:absolute;inset-inline-start:0;top:2px;width:56px;height:56px;display:grid;place-items:center;border-radius:18px;
  background:rgba(var(--ssp-role-rgb),.10);color:var(--ssp-role);font-size:25px;font-weight:900;border:1px solid rgba(var(--ssp-role-rgb),.12)
}
body.portal-role-guidance .ps-hero-copy::before{content:"◎"}
body.portal-role-subscriptions .ps-hero-copy::before{content:"▣"}
body.portal-role-communications .ps-hero-copy::before{content:"•••";font-size:18px;letter-spacing:2px}
body.portal-role .ps-kicker{font-size:10px!important;letter-spacing:.02em!important}
body.portal-role .ps-hero h1{font-size:clamp(29px,4vw,42px)!important;margin:7px 0 9px!important}
body.portal-role .ps-hero p{font-size:12.5px!important;line-height:1.9!important}
body.portal-role .ps-hero-badge,body.portal-role .ps-account{min-width:235px!important;background:rgba(255,255,255,.90)!important;backdrop-filter:blur(9px)!important;border:1px solid rgba(var(--ssp-role-rgb),.13)!important;border-radius:18px!important;padding:15px!important;box-shadow:var(--ssp-v3-shadow-soft)!important}
body.portal-role .ps-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important}
body.portal-role .ps-metric,body.portal-role .ps-metrics article{min-height:92px!important;border-radius:16px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background:linear-gradient(145deg,#fff,var(--ssp-role-soft))!important;border-color:rgba(var(--ssp-role-rgb),.11)!important}
body.portal-role .ps-section{border-radius:21px!important;box-shadow:0 10px 28px rgba(16,47,65,.035)!important}
body.portal-role .ps-grid{gap:10px!important}
body.portal-role .ps-card{min-height:142px!important;position:relative!important;overflow:hidden!important;padding:17px!important}
body.portal-role .ps-card::after{content:"‹";position:absolute;inset-inline-end:13px;top:12px;color:var(--ssp-role);opacity:.30;font-size:18px;font-weight:900}
body.portal-role .ps-card h3{font-size:15.5px!important}
body.portal-role .ps-card p{font-size:11.5px!important}

/* SMART BELL customer portal */
body.portal-role-bell[data-smart-bell-page="account"]{--navy:#5d4713;--navy2:#725816;--blue:var(--ssp-role);--cyan:var(--ssp-role-soft);background:linear-gradient(180deg,#fbfcfd,#f7f4ea)!important}
body.portal-role-bell[data-smart-bell-page="account"] .sb-header{box-shadow:0 5px 20px rgba(62,47,13,.035)!important}
body.portal-role-bell[data-smart-bell-page="account"] .sb-brand img{width:44px!important;height:44px!important}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero{margin:22px auto 14px;min-height:210px;padding:28px;border-radius:24px;border:1px solid rgba(var(--ssp-role-rgb),.16);background:
  radial-gradient(circle at 90% 16%,rgba(var(--ssp-role-rgb),.16),transparent 29%),
  linear-gradient(130deg,#fff 0 68%,var(--ssp-role-soft) 100%);box-shadow:var(--ssp-v3-shadow);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;overflow:hidden;position:relative}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero::after{content:"";position:absolute;inset-inline-end:34px;bottom:-25px;font-size:126px;opacity:.075;pointer-events:none}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero-copy{position:relative;z-index:1;max-width:700px}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero .sb-kicker{color:var(--ssp-role)!important;letter-spacing:.02em!important}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero h1{font-size:clamp(29px,4vw,42px);margin:8px 0;color:#3f341b;letter-spacing:-.025em}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero p{margin:0;color:#766c54;line-height:1.85;max-width:650px}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero-chips span{background:#fff;border:1px solid rgba(var(--ssp-role-rgb),.16);border-radius:999px;padding:7px 10px;color:#70591d;font-size:10px;font-weight:900}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero-badge{position:relative;z-index:2;min-width:220px;background:rgba(255,255,255,.88);border:1px solid rgba(var(--ssp-role-rgb),.14);border-radius:18px;padding:15px;box-shadow:var(--ssp-v3-shadow-soft)}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero-badge span,body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero-badge strong,body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero-badge small{display:block}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero-badge span{font-size:10px;color:#8c7a4e}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero-badge strong{font-size:17px;margin:5px 0;color:#493b18}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero-badge small{font-size:10px;color:#857758}
body.portal-role-bell[data-smart-bell-page="account"] .sb-account-layout{gap:14px!important}
body.portal-role-bell[data-smart-bell-page="account"] .sb-sidebar{border-radius:20px!important;box-shadow:var(--ssp-v3-shadow-soft)!important}
body.portal-role-bell[data-smart-bell-page="account"] .sb-panel{border-radius:20px!important;box-shadow:0 8px 25px rgba(56,44,14,.035)!important}

/* STORE */
body.portal-role-store .store-header{backdrop-filter:blur(18px)!important;background:rgba(255,255,255,.94)!important}
body.portal-role-store .hero-store{border-radius:25px!important;box-shadow:var(--ssp-v3-shadow)!important;border:1px solid rgba(var(--ssp-role-rgb),.11)!important;overflow:hidden!important}
body.portal-role-store .product-card{border-radius:18px!important;box-shadow:0 8px 25px rgba(31,45,92,.045)!important}

/* Dense in-school specialist panels */
body.portal-role-guidance #guidanceCenterPanel>.page-intro,
body.portal-role-guidance #guidanceManagementPanel>.page-intro,
body.portal-role-broadcast #morningBroadcastPanel>.page-intro{min-height:195px!important;padding:28px!important}
body.portal-role-guidance #guidanceCenterPanel>.page-intro h2,
body.portal-role-guidance #guidanceManagementPanel>.page-intro h2,
body.portal-role-broadcast #morningBroadcastPanel>.page-intro h3{letter-spacing:-.025em!important}
body.portal-role-guidance .guidance-metrics .metric{min-height:94px!important}

/* Tablet */
@media(max-width:980px){
  body.portal-role-manager #overviewPanel>.metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.portal-role-manager .manager-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.portal-role-teacher .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.portal-role-teacher .hero-summary{min-width:0!important;width:100%!important;margin-top:16px!important}
  body.portal-role .ps-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero{grid-template-columns:1fr!important}
  body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero-badge{min-width:0!important}
}

/* Mobile: match the approved card-driven reference */
@media(max-width:680px){
  body.portal-role{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  body.portal-role .portal-lobby-link{padding:8px 9px!important;font-size:10px!important}
  body.portal-role .topbar{min-height:66px!important;padding:8px 12px!important}
  body.portal-role .top-actions{gap:6px!important}
  body.portal-role .status-pill{display:none!important}

  body.portal-role-manager #overviewPanel>.section-head:first-child,
  body.portal-role-school #schoolProfilePanel>.section-head:first-child{min-height:220px!important;padding:18px!important}
  body.portal-role-manager #overviewPanel>.section-head:first-child h3,
  body.portal-role-school #schoolProfilePanel>.section-head:first-child h3{font-size:28px!important}
  body.portal-role-manager #overviewPanel>.metrics{grid-template-columns:repeat(2,1fr)!important;gap:7px!important}
  body.portal-role-manager #overviewPanel>.metrics .metric{min-height:84px!important;padding:12px!important}
  body.portal-role-manager .manager-quick-actions{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  body.portal-role-manager .manager-quick-actions button{min-height:112px!important;padding:13px!important}

  body.portal-role-teacher main.shell{width:min(100% - 18px,600px)!important;padding-top:10px!important}
  body.portal-role-teacher main.shell>.hero{min-height:235px!important;padding:19px!important;display:block!important;border-radius:20px!important}
  body.portal-role-teacher main.shell>.hero h1{font-size:28px!important}
  body.portal-role-teacher .hero-summary{grid-template-columns:repeat(3,1fr)!important;margin-top:15px!important}
  body.portal-role-teacher .hero-summary>div{padding:10px 6px!important}
  body.portal-role-teacher .hero-summary strong{font-size:18px!important}
  body.portal-role-teacher .portal-tabs{top:66px!important;border-radius:14px!important;padding:5px!important}
  body.portal-role-teacher .portal-tabs .tab{font-size:10px!important;padding:8px 10px!important}
  body.portal-role-teacher .quick-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  body.portal-role-teacher .quick-card{min-height:126px!important;padding:13px!important}

  body.portal-role-activity .activity-standalone-shell{width:min(100% - 18px,620px)!important;padding:9px 0 24px!important}
  body.portal-role-activity .activity-standalone-header{min-height:170px!important;display:block!important;padding:18px!important;border-radius:20px!important}
  body.portal-role-activity .activity-actions{margin-top:15px!important}

  body.portal-role .ps-topbar-inner{width:min(100% - 18px,620px)!important;min-height:64px!important}
  body.portal-role .ps-brand img{width:38px!important;height:38px!important}
  body.portal-role .ps-brand strong{font-size:13px!important}
  body.portal-role .ps-brand small{font-size:9px!important}
  body.portal-role .ps-hero{min-height:238px!important;padding:19px!important;display:block!important;border-radius:20px!important}
  body.portal-role .ps-hero-copy{padding-inline-start:0!important;padding-top:65px!important}
  body.portal-role .ps-hero-copy::before{inset-inline-start:auto!important;inset-inline-end:0!important;top:0!important}
  body.portal-role .ps-hero h1{font-size:28px!important}
  body.portal-role .ps-hero-badge,body.portal-role .ps-account{margin-top:14px!important;min-width:0!important;width:100%!important}
  body.portal-role .ps-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body.portal-role .ps-card{min-height:154px!important;padding:13px!important}
  body.portal-role .ps-card h3{font-size:13.5px!important}
  body.portal-role .ps-card p{font-size:10px!important;line-height:1.55!important}
  body.portal-role .ps-section{padding:14px!important;border-radius:18px!important}

  body.portal-role-bell[data-smart-bell-page="account"] .sb-shell{width:min(100% - 18px,620px)!important}
  body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero{margin-top:10px!important;min-height:245px!important;padding:19px!important;border-radius:20px!important}
  body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero h1{font-size:28px!important}
  body.portal-role-bell[data-smart-bell-page="account"] .sb-account-hero::after{font-size:90px!important;inset-inline-end:10px!important}

  body.portal-role-guidance #guidanceCenterPanel>.page-intro,
  body.portal-role-guidance #guidanceManagementPanel>.page-intro,
  body.portal-role-broadcast #morningBroadcastPanel>.page-intro{min-height:200px!important;padding:18px!important}
}

@media(max-width:420px){
  body.portal-role .ps-grid{grid-template-columns:1fr!important}
  body.portal-role .ps-card{min-height:118px!important}
  body.portal-role-teacher .quick-grid{grid-template-columns:1fr 1fr!important}
}

@media print{
  body.portal-role{background:#fff!important}
  body.portal-role :is(.portal-lobby-link,.ps-topbar,.topbar,.sb-header,.portal-tabs){box-shadow:none!important;backdrop-filter:none!important}
}