/*
 * EDSPIRE SCHOOL MANAGEMENT SYSTEM V18.2.1
 * Academics duplicate-heading + mobile header consistency hotfix
 * Presentation/responsive CSS only. No database or business logic changes.
 */

/* Mobile topbar authority for the ERP. Keep all page-specific actions in page content. */
@media (max-width:768px){
  html,body{max-width:100%;overflow-x:hidden}
  .topbar{
    position:relative!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    gap:8px 8px!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding-top:calc(8px + env(safe-area-inset-top))!important;
    padding-right:calc(10px + env(safe-area-inset-right))!important;
    padding-bottom:10px!important;
    padding-left:calc(10px + env(safe-area-inset-left))!important;
    overflow:visible!important;
  }
  .topbar>.iconbtn{
    grid-column:1!important;
    grid-row:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    max-width:44px!important;
    padding:0!important;
    margin:0!important;
  }
  .topbar>.top-heading{display:none!important}
  .topbar>.top-actions{
    grid-column:3!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    min-width:0!important;
    margin:0!important;
  }
  .topbar>.dash-global-search{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    justify-self:stretch!important;
  }
  .topbar .dash-global-search input{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    height:44px!important;
    font-size:13px!important;
    padding-right:12px!important;
  }
  .topbar .quick-add,
  .topbar [data-topbar-page-action]{display:none!important}
  .topbar .quick-links-drop{display:block!important;width:44px!important;min-width:44px!important;max-width:44px!important}
  .topbar .quick-links-drop>summary{width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;padding:0!important}
  .topbar .quick-links-drop .quick-label,
  .topbar .quick-links-drop .quick-caret{display:none!important}
  .topbar .top-drop>summary,
  .topbar .avatar,
  .topbar .logout-link{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    max-width:44px!important;
    padding:0!important;
    margin:0!important;
  }
  .topbar .user-menu{
    display:flex!important;
    align-items:center!important;
    gap:3px!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    border-left:0!important;
  }
  .topbar .user-copy{display:none!important}
  .topbar .top-drop-menu{
    max-width:calc(100vw - 16px)!important;
  }
  .topbar[data-mobile-mode="1"] .top-actions{max-width:100%!important}
  .topbar[data-mobile-mode="1"] .top-actions>[data-topbar-control]{flex:0 0 44px!important}
  .topbar[data-mobile-mode="1"] .user-menu{flex:0 0 auto!important}
  .content{
    min-width:0!important;
    padding-left:calc(10px + env(safe-area-inset-left))!important;
    padding-right:calc(10px + env(safe-area-inset-right))!important;
  }
}

/* Academics presentation authority. These routes share one page-header pattern. */
@media screen and (max-width:768px){
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .workflow-page-head{
    display:block!important;
    padding:16px 18px!important;
    margin-bottom:12px!important;
    min-width:0!important;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .workflow-page-head h1{
    margin:0 0 6px!important;
    font-size:clamp(1.55rem,6vw,2rem)!important;
    line-height:1.16!important;
    overflow-wrap:anywhere;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .workflow-page-head p{
    margin:0!important;
    font-size:.95rem!important;
    line-height:1.45!important;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .workflow-page-actions{
    display:flex!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    width:100%!important;
    margin-top:12px!important;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .workflow-page-actions>.btn,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .workflow-page-actions>button{
    min-height:44px!important;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .form-grid,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .grid2,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .grid3{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .field,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .field.full{
    grid-column:auto!important;
    min-width:0!important;
    width:100%!important;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) input,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) select,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) textarea{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) input,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) select{
    min-height:46px!important;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) textarea{min-height:92px}
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .form-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .form-actions>.btn,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .form-actions>button{
    min-height:44px!important;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .acad-filter-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .acad-filter-row>*{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

@media screen and (max-width:430px){
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .workflow-page-head{padding:16px!important}
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .workflow-page-actions>.btn,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .workflow-page-actions>button{
    flex:1 1 calc(50% - 4px)!important;
    text-align:center!important;
    justify-content:center!important;
  }
}

@media screen and (max-width:390px){
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .workflow-page-actions>.btn,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .workflow-page-actions>button,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .form-actions>.btn,
  body:is(.route-academics,.route-classes,.route-sections,.route-subjects,.route-class-subjects,.route-timetable,.route-timetable-form,.route-academic-sessions,.route-academic-working-days,.route-academic-holidays,.route-academic-calendar-settings) .form-actions>button{
    flex:1 1 100%!important;
    width:100%!important;
  }
}