/* Responsive layer for phones and iPad/tablets. Keep this file last. */
:root{
  --aseel-mobile-gap: 12px;
  --aseel-mobile-radius: 18px;
}

*{
  box-sizing:border-box;
}

img,
video,
canvas,
iframe,
svg{
  max-width:100%;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-width:0 !important;
}

input,
select,
textarea,
button{
  font-size:16px;
}

button,
a,
.student-btn,
.aseel-btn,
.nav-item,
.student-card,
.aseel-exam-card{
  touch-action:manipulation;
}

@media (pointer:coarse){
  .student-card:hover,
  .student-quick-card:hover,
  .sidebar .nav-item:hover,
  .aseel-option:hover{
    transform:none !important;
  }
}

@media (min-width:721px) and (max-width:980px){
  html,
  body{
    height:100% !important;
    overflow:hidden !important;
  }

  .app{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 248px !important;
    gap:12px !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    padding:12px !important;
    overflow:hidden !important;
    direction:ltr !important;
  }

  #sidebar-container{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    width:248px !important;
    height:calc(100dvh - 24px) !important;
    overflow:hidden !important;
    direction:rtl !important;
  }

  .sidebar,
  aside.sidebar{
    grid-column:2 !important;
    grid-row:1 !important;
    position:sticky !important;
    top:0 !important;
    width:248px !important;
    min-width:248px !important;
    max-width:248px !important;
    height:calc(100dvh - 24px) !important;
    max-height:calc(100dvh - 24px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    direction:rtl !important;
  }

  .main,
  main.main{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
    height:calc(100dvh - 24px) !important;
    max-height:calc(100dvh - 24px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:0 !important;
    direction:rtl !important;
    align-self:start !important;
    justify-self:stretch !important;
  }

  .student-grid,
  .aseel-exam-grid,
  .student-quick-grid,
  .student-kpis,
  .aseel-exam-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:1180px){
  :root{
    --student-side-width: 248px;
  }
  .app{
    gap:12px !important;
    padding:12px !important;
  }
  .sidebar,
  aside.sidebar{
    width:248px !important;
    min-width:248px !important;
    max-width:248px !important;
  }
  .student-grid,
  .aseel-exam-grid,
  .student-quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:720px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow:auto !important;
    overflow-x:hidden !important;
  }

  body{
    padding:0 !important;
    width:100% !important;
    max-width:100vw !important;
  }

  .app{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100vw !important;
    height:auto !important;
    min-height:100dvh !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-x:hidden !important;
    padding:10px !important;
    gap:10px !important;
  }

  .main,
  main.main{
    order:1 !important;
    width:100% !important;
    min-height:auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-x:hidden !important;
    padding:0 0 92px !important;
  }

  #sidebar-container{
    order:2 !important;
    position:fixed !important;
    inset:auto 8px 8px 8px !important;
    z-index:900 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    max-height:82px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:8px !important;
    border-radius:22px !important;
    background:rgba(255,255,255,.88) !important;
    backdrop-filter:blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
    box-shadow:0 18px 44px rgba(8,36,61,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
    scrollbar-width:none !important;
  }

  .sidebar,
  aside.sidebar{
    position:static !important;
    inset:auto !important;
    top:auto !important;
    order:0 !important;
    z-index:auto !important;
    width:max-content !important;
    min-width:max-content !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body:not(:has(#sidebar-container)) .sidebar,
  body:not(:has(#sidebar-container)) aside.sidebar{
    position:fixed !important;
    inset:auto 8px 8px 8px !important;
    z-index:900 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    max-height:82px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:8px !important;
    border-radius:22px !important;
    background:rgba(255,255,255,.88) !important;
    border:1px solid rgba(255,255,255,.68) !important;
    box-shadow:0 18px 44px rgba(8,36,61,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
    backdrop-filter:blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
    scrollbar-width:none !important;
  }

  #sidebar-container::-webkit-scrollbar,
  .sidebar::-webkit-scrollbar,
  aside.sidebar::-webkit-scrollbar{
    display:none !important;
  }

  .sidebar::before,
  aside.sidebar::before,
  .sidebar .logo,
  .sidebar .side-brand,
  .sidebar .nav::before,
  aside.sidebar nav.nav::before,
  .sidebar .logout-btn{
    display:none !important;
  }

  .sidebar .nav,
  aside.sidebar nav.nav{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    width:max-content !important;
    min-width:100% !important;
    padding:0 !important;
  }

  .sidebar .nav-item{
    flex:0 0 auto !important;
    min-width:88px !important;
    min-height:62px !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:5px !important;
    padding:8px 10px !important;
    border-radius:17px !important;
    font-size:12px !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  .sidebar .nav-label{
    text-align:center !important;
    white-space:nowrap !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }

  .sidebar .nav-icon,
  .sidebar .nav-item svg{
    width:18px !important;
    height:18px !important;
    padding:6px !important;
    border-radius:12px !important;
  }

  .sidebar .nav-item.active::before{
    right:50% !important;
    top:auto !important;
    bottom:4px !important;
    width:24px !important;
    height:3px !important;
    transform:translateX(50%) !important;
    border-radius:999px !important;
  }

  .topbar,
  .page-header,
  .hero,
  .welcome-card,
  .student-modern-hero,
  .aseel-exam-hero,
  .student-hero-card,
  .student-progress-card,
  .student-panel{
    border-radius:var(--aseel-mobile-radius) !important;
    padding:16px !important;
  }

  .topbar{
    min-height:auto !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    overflow:hidden !important;
  }

  .topbar,
  .page-header,
  .hero,
  .welcome-card,
  .student-modern-hero,
  .aseel-exam-hero,
  .student-hero-card,
  .student-progress-card,
  .student-panel,
  .student-card,
  .aseel-exam-panel,
  .aseel-exam-card{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow:hidden !important;
  }

  .topbar > *,
  .page-header > *,
  .student-modern-hero > *,
  .aseel-exam-hero > *{
    min-width:0 !important;
    max-width:100% !important;
  }

  .page-header-content,
  .student-hero-card,
  .student-modern-hero,
  .aseel-exam-hero{
    text-align:center !important;
  }

  h1,
  h2,
  h3,
  p,
  .page-title,
  .page-subtitle,
  .student-modern-hero p,
  .aseel-exam-hero p{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }

  .student-modern-hero,
  .aseel-exam-hero,
  .student-home-hero,
  .student-home-grid,
  .student-live-card{
    grid-template-columns:1fr !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .student-modern-hero h1,
  .aseel-exam-hero h1,
  .student-hero-card h1,
  .page-title,
  .hero-title{
    font-size:clamp(23px,6vw,30px) !important;
    line-height:1.35 !important;
  }

  .student-kpis,
  .student-grid,
  .student-row-grid,
  .aseel-exam-kpis,
  .aseel-exam-grid,
  .student-quick-grid,
  .aseel-exam-form,
  .student-filterbar{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .student-card,
  .aseel-exam-card,
  .aseel-error-card,
  .aseel-teacher-exam-card,
  .student-kpi,
  .aseel-exam-kpi,
  .card,
  .content-card,
  .exam-card,
  .video-card,
  .live-card,
  .notification-card,
  .stat-card,
  .section-card,
  .profile-card,
  .panel{
    border-radius:18px !important;
    padding:14px !important;
    min-width:0 !important;
  }

  .student-card-head,
  .student-section-title,
  .student-panel-head{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .student-actions,
  .aseel-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
  }

  .student-btn,
  .aseel-btn{
    width:100% !important;
    min-height:46px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .student-filterbar input,
  .student-filterbar select,
  .aseel-exam-field input,
  .aseel-exam-field select,
  input,
  select,
  textarea{
    min-height:48px !important;
    width:100% !important;
  }

  .student-modal-overlay{
    align-items:stretch !important;
    justify-content:stretch !important;
    padding:10px !important;
  }

  .student-modal,
  .modal,
  .dialog,
  [role="dialog"]{
    width:100% !important;
    max-width:100% !important;
    max-height:calc(100dvh - 20px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    border-radius:22px !important;
    padding:16px !important;
  }

  table{
    display:block !important;
    width:100% !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
  }
}

@media (max-width:640px){
  .app{
    padding:8px !important;
  }

  .main,
  main.main{
    padding-bottom:88px !important;
  }

  #sidebar-container{
    inset:auto 6px 6px 6px !important;
    max-height:76px !important;
    border-radius:20px !important;
  }

  .sidebar .nav-item{
    min-width:78px !important;
    min-height:58px !important;
    padding:7px 8px !important;
  }

  .sidebar .nav-label{
    font-size:11px !important;
  }

  .student-modern-mark,
  .aseel-exam-mark{
    width:52px !important;
    height:52px !important;
    border-radius:16px !important;
  }

  .student-kpi,
  .aseel-exam-kpi{
    min-height:76px !important;
  }

  .student-kpi b,
  .aseel-exam-kpi b{
    font-size:22px !important;
  }

  .student-card h3,
  .aseel-exam-card h3,
  .aseel-error-card h3{
    font-size:18px !important;
  }

  .student-chip-list,
  .aseel-chip-list{
    gap:6px !important;
  }

  .student-chip,
  .aseel-chip{
    font-size:11px !important;
    padding:5px 8px !important;
  }
}

@media (max-width:900px){
  .aseel-exam-screen{
    padding:8px !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    overflow:hidden !important;
  }

  .aseel-exam-top,
  .aseel-exam-bottom{
    padding:10px !important;
    border-radius:16px !important;
    flex-wrap:wrap !important;
  }

  .aseel-exam-body{
    grid-template-columns:1fr !important;
    gap:8px !important;
    overflow:hidden !important;
  }

  .aseel-question-box{
    min-height:0 !important;
    padding:16px !important;
    border-radius:18px !important;
  }

  .aseel-question-box h2{
    font-size:21px !important;
  }

  .aseel-option{
    min-height:52px !important;
    padding:12px !important;
  }

  .aseel-question-map{
    order:-1 !important;
    max-height:110px !important;
    padding:12px !important;
    border-radius:18px !important;
  }

  .aseel-question-map h3{
    display:none !important;
  }

  .aseel-map-grid{
    display:flex !important;
    gap:8px !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
    scrollbar-width:none !important;
  }

  .aseel-map-grid::-webkit-scrollbar{
    display:none !important;
  }

  .aseel-map-btn{
    flex:0 0 42px !important;
    width:42px !important;
    height:40px !important;
  }
}

/* Remove explanatory page subtitles across the platform; keep titles and controls only. */
.page-subtitle,
.student-modern-hero p,
.aseel-exam-hero p,
.monitor-showcase p,
.schedule-hero p,
.hero-section .hero-desc,
.hero-card .hero-desc,
.welcome-card .hero-desc,
.page-header > p{
  display:none !important;
}

@media (orientation:landscape) and (max-height:540px){
  .sidebar,
  aside.sidebar,
  #sidebar-container{
    max-height:68px !important;
  }
  .main,
  main.main{
    padding-bottom:76px !important;
  }
  .aseel-exam-screen{
    padding:6px !important;
  }
  .aseel-question-map{
    max-height:82px !important;
  }
}