/* Salah El-Din Center - Student portal bundle. */



/* v34 — Apply admin/login colors to teacher and student panels */

:root{
  --sd-navy:#18304d;
  --sd-navy-2:#24496e;
  --sd-blue:#325c86;
  --sd-sky:#8fb9dd;
  --sd-ice:#f3f7fc;
  --sd-card:rgba(248,251,255,.94);
  --sd-line:#d9e4ef;
  --sd-text:#27405e;
  --sd-muted:#74869a;
}

body:has(.teacher-app),
body:has(.portal-shell){
  font-family:"El Messiri", sans-serif!important;
  background:
    radial-gradient(circle at 12% 10%,rgba(143,185,221,.18),transparent 28%),
    radial-gradient(circle at 88% 8%,rgba(50,92,134,.13),transparent 32%),
    linear-gradient(180deg,#f5f9fd 0%,#eef4fb 58%,#e7f0f8 100%)!important;
  color:var(--sd-text)!important;
}

.teacher-app,
.portal-shell,
.teacher-app *,
.portal-shell *,
.teacher-app button,
.teacher-app input,
.teacher-app select,
.teacher-app textarea,
.portal-shell button,
.portal-shell input,
.portal-shell select,
.portal-shell textarea{
  font-family:"El Messiri", sans-serif!important;
}

/* Teacher layout */
.teacher-app{
  background:transparent!important;
  color:var(--sd-text)!important;
}
.teacher-sidebar{
  background:
    radial-gradient(circle at 18% 8%,rgba(143,185,221,.20),transparent 26%),
    linear-gradient(180deg,#10233d 0%,#18304d 48%,#24496e 100%)!important;
  color:#fff!important;
  border-left:1px solid rgba(255,255,255,.18)!important;
  box-shadow:18px 0 48px rgba(6,26,45,.14)!important;
}
.teacher-brand span{
  background:linear-gradient(135deg,#f3f7fc,#8fb9dd)!important;
  color:#10233d!important;
}
.teacher-brand b{color:#fff!important}
.teacher-brand small{color:rgba(255,255,255,.76)!important}
.teacher-sidebar nav a{
  color:rgba(255,255,255,.86)!important;
  border:1px solid transparent!important;
  background:transparent!important;
}
.teacher-sidebar nav a:hover,
.teacher-sidebar nav a.active{
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.20)!important;
  color:#fff!important;
}
.teacher-main{
  background:transparent!important;
}
.teacher-topbar{
  background:rgba(248,251,255,.82)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:24px!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:0 18px 44px rgba(6,26,45,.08)!important;
}
.teacher-topbar h1,
.teacher-topbar p{
  color:var(--sd-text)!important;
}
.teacher-tools input{
  background:#fff!important;
  border:1px solid var(--sd-line)!important;
  color:var(--sd-text)!important;
}
.teacher-app .panel,
.teacher-app .card,
.teacher-app .card-soft,
.teacher-app .stat-card,
.teacher-app .readonly-grid>div,
.teacher-app .assignment-card,
.teacher-app .student-card{
  background:rgba(248,251,255,.92)!important;
  border:1px solid rgba(217,228,239,.92)!important;
  color:var(--sd-text)!important;
  box-shadow:0 18px 44px rgba(6,26,45,.07)!important;
}
.teacher-app .panel-head h2,
.teacher-app h2,
.teacher-app h3,
.teacher-app b{
  color:var(--sd-text)!important;
}
.teacher-app .stat-card::after{
  background:linear-gradient(135deg,rgba(50,92,134,.14),rgba(143,185,221,.10))!important;
}

/* Student portal */
.portal-shell{
  color:var(--sd-text)!important;
}
.portal-hero{
  background:
    radial-gradient(circle at 18% 16%,rgba(143,185,221,.20),transparent 30%),
    linear-gradient(135deg,#18304d 0%,#24496e 54%,#325c86 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:0 28px 70px rgba(24,48,77,.20)!important;
}
.portal-hero h1,
.portal-hero p,
.portal-hero span{
  color:#fff!important;
}
.portal-back{
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
}
.portal-brand{
  background:linear-gradient(135deg,#f3f7fc,#8fb9dd)!important;
  color:#10233d!important;
}
.portal-shell .login-card,
.portal-shell .student-header-card,
.portal-shell .card,
.portal-shell .card-soft,
.portal-shell .stat,
.portal-shell .booking-item,
.portal-shell .eval-card{
  background:rgba(248,251,255,.92)!important;
  border:1px solid rgba(217,228,239,.92)!important;
  color:var(--sd-text)!important;
  box-shadow:0 18px 44px rgba(6,26,45,.07)!important;
}
.portal-shell h2,
.portal-shell h3,
.portal-shell b,
.portal-shell dt{
  color:var(--sd-text)!important;
}
.portal-shell input,
.portal-shell select,
.portal-shell textarea{
  background:#fff!important;
  border:1px solid var(--sd-line)!important;
  color:var(--sd-text)!important;
}
.portal-shell input:focus,
.teacher-app input:focus,
.teacher-app select:focus,
.teacher-app textarea:focus,
.portal-shell select:focus,
.portal-shell textarea:focus{
  border-color:rgba(59,106,152,.72)!important;
  box-shadow:0 0 0 4px rgba(59,106,152,.12)!important;
}

/* Shared buttons */
.teacher-app button,
.teacher-app .btn,
.teacher-app a.btn,
.portal-shell button,
.portal-shell .btn,
.portal-shell a.btn,
.portal-shell .student-actions a{
  background:linear-gradient(180deg,#325c86 0%,#284a70 100%)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 10px 20px rgba(40,74,112,.20)!important;
}
.teacher-app button.light,
.teacher-app .btn.light,
.portal-shell .btn.light,
.portal-shell .light{
  background:#f3f7fc!important;
  color:var(--sd-text)!important;
  border:1px solid var(--sd-line)!important;
  box-shadow:none!important;
}
.teacher-app .good:not(.pill):not(.status),
.portal-shell .good:not(.pill):not(.status){
  background:linear-gradient(180deg,#3f9d7b,#2f8f6b)!important;
  color:#fff!important;
}
.teacher-app .danger:not(.pill):not(.status),
.portal-shell .danger:not(.pill):not(.status){
  background:linear-gradient(180deg,#e56a6a,#d85656)!important;
  color:#fff!important;
}
.teacher-app table,
.portal-shell table{
  background:rgba(248,251,255,.92)!important;
}
.teacher-app thead th,
.portal-shell thead th{
  background:#f3f7fc!important;
  color:#3e5c7b!important;
}
.teacher-app tbody td,
.portal-shell tbody td{
  border-bottom:1px solid rgba(217,228,239,.72)!important;
}
.teacher-app .code,
.portal-shell .code,
.portal-shell .student-code{
  background:rgba(143,185,221,.16)!important;
  color:#24496e!important;
  border:1px solid rgba(143,185,221,.28)!important;
}
.teacher-app .flash,
.portal-shell .alert{
  border-radius:16px!important;
}
.teacher-app .flash.ok,
.portal-shell .alert.info{
  background:rgba(143,185,221,.12)!important;
  border:1px solid rgba(143,185,221,.22)!important;
  color:#24496e!important;
}

/* v35 teacher separate page mode */
.teacher-app.teacher-page-mode [data-panel]{
  display:none!important;
}
.teacher-app.teacher-page-mode [data-panel].active{
  display:block!important;
  animation:teacherPanelFade .18s ease;
}
@keyframes teacherPanelFade{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.teacher-app.teacher-page-mode .teacher-sidebar nav a.active{
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.24)!important;
  color:#fff!important;
}
.teacher-app.teacher-page-mode .teacher-home-panel{
  background:rgba(248,251,255,.92)!important;
  border:1px solid rgba(217,228,239,.92)!important;
  border-radius:24px!important;
  padding:18px!important;
  box-shadow:0 18px 44px rgba(6,26,45,.07)!important;
}
.teacher-app.teacher-page-mode .teacher-home-panel .stats-grid{
  margin:0!important;
}
.teacher-app.teacher-page-mode .panel,
.teacher-app.teacher-page-mode .teacher-home-panel{
  scroll-margin-top:20px;
}

/* v36 real teacher pages */
.teacher-app.teacher-real-pages .teacher-sidebar nav a.active{
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.24)!important;
  color:#fff!important;
}
.teacher-app.teacher-real-pages .teacher-home-panel{
  background:rgba(248,251,255,.92)!important;
  border:1px solid rgba(217,228,239,.92)!important;
  border-radius:24px!important;
  padding:18px!important;
  box-shadow:0 18px 44px rgba(6,26,45,.07)!important;
}
.teacher-app.teacher-real-pages .teacher-home-panel .stats-grid{
  margin:0!important;
}
.teacher-app.teacher-real-pages .panel,
.teacher-app.teacher-real-pages .teacher-home-panel{
  animation:teacherRealPageFade .18s ease;
}
@keyframes teacherRealPageFade{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}



/* Student Portal v37 polish — same admin/teacher visual language */
.portal-shell{
  width:min(1220px,100%);
  margin:0 auto;
  padding:24px;
}
.portal-hero{
  position:relative;
  overflow:hidden;
  border-radius:30px!important;
  min-height:170px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:26px!important;
}
.portal-hero::after{
  content:"";
  position:absolute;
  inset:-80px auto auto -80px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  pointer-events:none;
}
.portal-hero .portal-kicker{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-weight:800;
}
.portal-hero h1{
  margin:10px 0 0!important;
  font-size:2.05rem!important;
  font-weight:800!important;
}
.portal-back{
  position:absolute;
  top:18px;
  left:18px;
  min-height:38px;
  padding:8px 14px;
  border-radius:999px!important;
  z-index:2;
}
.portal-brand{
  width:64px!important;
  height:64px!important;
  flex:0 0 64px;
  border-radius:22px!important;
  display:grid!important;
  place-items:center!important;
  font-weight:900!important;
  box-shadow:0 16px 30px rgba(2,12,24,.18)!important;
}
.portal-shell .login-card{
  max-width:420px;
  margin:28px auto 0!important;
  border-radius:26px!important;
  padding:24px!important;
  position:relative;
  overflow:hidden;
}
.portal-shell .login-card::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:20px;
  border:1px solid rgba(143,185,221,.20);
  pointer-events:none;
}
.portal-shell .login-card h2{
  text-align:center;
  font-size:1.6rem;
  margin:0 0 18px!important;
}
.portal-login-form{
  display:grid;
  gap:14px;
  position:relative;
  z-index:1;
}
.portal-login-form input{
  min-height:50px!important;
  border-radius:14px!important;
  text-align:center!important;
  font-weight:800;
}
.portal-login-form button{
  min-height:48px!important;
  border-radius:14px!important;
  font-weight:900!important;
}
.student-header-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-radius:26px!important;
  padding:22px!important;
  margin:22px 0!important;
}
.student-header-card h2{
  margin:10px 0 6px!important;
  font-size:1.7rem!important;
}
.student-code{
  display:inline-flex!important;
  padding:7px 12px!important;
  border-radius:999px!important;
  font-weight:900!important;
}
.student-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.portal-shell .stats-grid{
  margin:0 0 16px!important;
  gap:14px!important;
}
.portal-shell .stat{
  border-radius:22px!important;
  padding:18px!important;
}
.portal-shell .stat b{
  font-size:1.7rem!important;
}
.portal-grid{
  gap:16px!important;
}
.portal-grid .card{
  border-radius:24px!important;
  padding:18px!important;
}
.portal-grid .card h3{
  margin:0 0 14px!important;
  font-size:1.15rem!important;
  font-weight:900!important;
}
.details-list{
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:9px 12px;
}
.details-list dt{
  color:var(--sd-muted);
  font-weight:800;
}
.details-list dd{
  margin:0;
  font-weight:800;
}
.booking-list{
  display:grid;
  gap:10px;
}
.booking-item{
  padding:14px!important;
  border-radius:18px!important;
}
.booking-item b,
.booking-item span,
.booking-item small{
  display:block;
}
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.card-head input{
  max-width:260px;
  min-height:42px!important;
  border-radius:999px!important;
}
.portal-shell .table-wrap{
  border-radius:18px!important;
  overflow:auto;
  border:1px solid var(--sd-line)!important;
}
.portal-shell table{
  min-width:780px;
}
.portal-shell th,
.portal-shell td{
  padding:12px 14px!important;
}
.eval-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.eval-card{
  border-radius:18px!important;
  padding:14px!important;
}
@media(max-width:760px){
  .portal-shell{padding:14px}
  .portal-hero{
    display:grid;
    text-align:center;
    justify-items:center;
    padding-top:58px!important;
  }
  .student-header-card{
    display:grid;
  }
  .details-list{
    grid-template-columns:1fr;
  }
  .card-head{
    display:grid;
  }
  .card-head input{
    max-width:none;
  }
  .eval-grid{
    grid-template-columns:1fr;
  }
}

/* v59 — final responsive hardening for the student/parent portal */
html,body{max-width:100%;overflow-x:hidden!important}
.portal-shell,.portal-shell *{box-sizing:border-box}
.portal-shell{width:min(1220px,100%)!important;max-width:100%!important;margin:0 auto!important;padding:18px!important;overflow-x:hidden!important}
.portal-shell .login-card,.portal-shell .student-header-card,.portal-shell .stats-grid,.portal-shell .portal-grid,.portal-shell .card,.portal-shell .stat{min-width:0!important;max-width:100%!important}
.portal-shell .login-card{width:min(480px,100%)!important;margin:34px auto!important;padding:22px!important}
.portal-shell .portal-login-form{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
.portal-shell .portal-login-form input,.portal-shell .portal-login-form button{width:100%!important;max-width:100%!important;min-width:0!important}
.portal-compact-nav-v56{width:min(1220px,100%)!important;max-width:100%!important;box-sizing:border-box!important}
.portal-shell .student-header-card{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;flex-wrap:wrap!important;padding:18px!important}
.portal-shell .student-header-card h2,.portal-shell .student-header-card p{overflow-wrap:anywhere!important}
.portal-shell .student-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.portal-shell .stats-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:12px!important}
.portal-shell .portal-grid{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:14px!important;width:100%!important}
.portal-shell .span-4{grid-column:span 4!important}.portal-shell .span-8{grid-column:span 8!important}.portal-shell .span-12{grid-column:1/-1!important}
.portal-shell .details-list{grid-template-columns:minmax(95px,140px) minmax(0,1fr)!important;min-width:0!important}
.portal-shell .booking-list,.portal-shell .eval-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
.portal-shell .card-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important}
.portal-shell .card-head input{flex:1 1 210px!important;min-width:0!important;max-width:100%!important}
.portal-shell .table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
.portal-shell table{width:100%!important;min-width:650px!important}
.portal-shell th,.portal-shell td{white-space:normal!important;vertical-align:top!important}
.portal-shell img,.portal-shell video,.portal-shell iframe{max-width:100%!important;height:auto!important}
@media(max-width:900px){
  .portal-shell{padding:12px!important}
  .portal-shell .span-4,.portal-shell .span-8,.portal-shell .span-12{grid-column:1/-1!important}
  .portal-shell .student-header-card{display:grid!important;text-align:right!important}
  .portal-shell .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .portal-shell .card{padding:14px!important;border-radius:18px!important}
}
@media(max-width:560px){
  .portal-shell{padding:8px!important}
  .portal-compact-nav-v56{padding:0 8px!important}
  .portal-compact-nav-v56 .portal-back{width:100%!important;justify-content:center!important}
  .portal-shell .login-card{margin:18px auto!important;padding:16px!important;border-radius:18px!important}
  .portal-shell .student-header-card{padding:14px!important;border-radius:18px!important}
  .portal-shell .student-header-card h2{font-size:1.18rem!important;line-height:1.45!important}
  .portal-shell .stats-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .portal-shell .stat{padding:12px!important;border-radius:16px!important}
  .portal-shell .stat b{font-size:1.25rem!important}
  .portal-shell .portal-grid{gap:10px!important}
  .portal-shell .details-list{grid-template-columns:1fr!important;gap:4px 0!important}
  .portal-shell .booking-list,.portal-shell .eval-grid{grid-template-columns:1fr!important}
  .portal-shell .card-head{display:grid!important}
  .portal-shell table{min-width:560px!important;font-size:.82rem!important}
  .portal-shell th,.portal-shell td{padding:9px 10px!important}
}
@media(max-width:380px){
  .portal-shell .stats-grid{grid-template-columns:1fr!important}
  .portal-shell table{min-width:520px!important}
}