/**
 * Global responsive layer for all School MS portals.
 * Loaded last so it overrides fixed widths / desktop-only layouts.
 * Breakpoints: 1199 (tablet landscape), 991 (tablet), 767 (phone), 575 (small phone)
 */

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

body {
  overflow-x: hidden;
}

img,
video,
canvas,
iframe {
  max-width: 100%;
}
/* Only fluid images without an explicit height attr — otherwise header
   avatars (height="42") and similar sized markup get blown up to intrinsic size. */
img:not([height]) {
  height: auto;
}
svg {
  max-width: 100%;
}

.home-section,
.home-section .main_content,
.mainSection,
.content,
.container,
.container-fluid {
  max-width: 100%;
}

/* Soft-wrap long unbroken strings in tables/cards */
.table td,
.table th,
.card,
.eCard,
.list-group-item {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------- */
/* Mobile sidebar backdrop                                                     */
/* -------------------------------------------------------------------------- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 23, 20, 0.45);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

@media screen and (max-width: 991px) {
  .sidebar {
    z-index: 110;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
  }
}

/* -------------------------------------------------------------------------- */
/* Auto table scroll wrappers                                                  */
/* -------------------------------------------------------------------------- */
.table-responsive,
.ol-table-wrap,
.dt-responsive,
.dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table,
.ol-table-wrap > .table {
  margin-bottom: 0;
}

/* Tables without a wrapper still get horizontal scroll via JS-injected wrap,
   but also soft-fail here if parent overflows */
.home-section .table {
  min-width: 0;
}

@media screen and (max-width: 991px) {
  .table {
    font-size: 13px;
  }

  .table th,
  .table td {
    white-space: nowrap;
  }

  /* Allow intentional wrap cells */
  .table td.wrap,
  .table th.wrap,
  .table .text-wrap {
    white-space: normal;
  }
}

/* -------------------------------------------------------------------------- */
/* Header / page chrome                                                        */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .home-header {
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .home-header .header-search,
  .home-header .search-form,
  .home-header form.d-flex {
    width: 100%;
    max-width: 100%;
  }

  .mainSection-title,
  .main_content,
  .ol-card,
  .eCard,
  .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .mainSection-title .d-flex,
  .page-title-box,
  .eBreadcrumb-2 {
    flex-wrap: wrap;
    gap: 8px;
  }

  .mainSection-title h4,
  .mainSection-title h3,
  .mainSection-title h2 {
    font-size: 1.25rem;
  }

  /* Action button rows under titles */
  .mainSection-title .btn,
  .mainSection-title .eBtn,
  .page-header-actions .btn,
  .page-header-actions .eBtn {
    width: auto;
    max-width: 100%;
  }
}

@media screen and (max-width: 575px) {
  .mainSection-title h4,
  .mainSection-title h3 {
    font-size: 1.1rem;
  }
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                     */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .eBtn {
    min-width: 0 !important;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 40px;
    padding: 8px 14px;
    white-space: normal;
  }

  .btn-toolbar,
  .button-toolbar,
  .d-flex.gr-15,
  .kh-actions,
  .fin-actions {
    flex-wrap: wrap !important;
    gap: 8px;
    justify-content: flex-start !important;
  }

  .btn-group {
    flex-wrap: wrap;
  }
}

/* -------------------------------------------------------------------------- */
/* Cards / grids / dashboards                                                  */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .row > [class*="col-"] {
    max-width: 100%;
  }

  .eCard,
  .ol-card,
  .card {
    margin-bottom: 1rem;
  }

  /* Common KPI / stat strips */
  .dashboard-stat,
  .eDashboard,
  .stat-card,
  .kpi-row,
  .lib-stat-grid,
  .exam-stat-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media screen and (max-width: 575px) {
  .dashboard-stat,
  .eDashboard,
  .stat-card,
  .kpi-row,
  .lib-stat-grid,
  .exam-stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                       */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .form-control,
  .form-select,
  select.form-control,
  .select2-container {
    max-width: 100% !important;
  }

  .select2-container {
    width: 100% !important;
  }

  .row.mb-3 > [class*="col-"],
  .form-group,
  .eForm-label,
  label.col-form-label {
    margin-bottom: 0.35rem;
  }

  /* Stack labeled horizontal forms */
  .row.g-3 > [class*="col-md-"],
  .row.g-2 > [class*="col-md-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Modals / offcanvas / dropdowns                                              */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 575px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-content {
    border-radius: 12px;
  }

  .dropdown-menu {
    max-width: min(320px, calc(100vw - 24px));
  }
}

/* -------------------------------------------------------------------------- */
/* DataTables                                                                  */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100%;
    margin-bottom: 0.75rem;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
    display: block;
    margin-top: 0.35rem;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.35rem 0.55rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Charts                                                                      */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  canvas {
    max-width: 100% !important;
  }

  .chart-container,
  .apexcharts-canvas,
  .chartjs-render-monitor {
    max-width: 100% !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Messaging                                                                   */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .msg-shell .msg-side {
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid #e5ebe7;
  }

  .msg-shell .msg-main {
    min-height: 50vh;
  }

  .msg-shell .msg-thread {
    max-height: 45vh;
  }

  /* Legacy chat layout */
  .chat_users,
  .chat_body {
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Calendar / FullCalendar                                                     */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .fc .fc-toolbar {
    flex-direction: column;
    gap: 8px;
    align-items: stretch !important;
  }

  .fc .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .fc .fc-button {
    padding: 0.35rem 0.55rem !important;
    font-size: 12px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Tabs / nav pills                                                            */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .nav-tabs,
  .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------------------- */
/* Fixed / sticky widths that break phones                                     */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .min-w-330px,
  .min-w-250px,
  .min-w-245px,
  .min-w-200px {
    min-width: 0 !important;
  }

  .w-330px,
  .w-250px,
  .w-200px {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Common filter bars */
  .filter-bar,
  .export-options,
  .table-header,
  .ol-card-body > .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
}

/* -------------------------------------------------------------------------- */
/* Auth / sign-in                                                              */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .signin-page,
  .login-page,
  .auth-wrap {
    padding: 1rem !important;
  }

  .signin-page .card,
  .login-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Print stays desktop-ish; don't break print layouts                          */
/* -------------------------------------------------------------------------- */
@media print {
  .sidebar,
  .sidebar-backdrop,
  .home-header,
  .menuList,
  .closeIcon {
    display: none !important;
  }

  .home-section {
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Utility helpers usable in any blade                                         */
/* -------------------------------------------------------------------------- */
.ol-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.ol-stack-sm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media screen and (max-width: 575px) {
  .ol-hide-xs { display: none !important; }
  .ol-full-xs { width: 100% !important; max-width: 100% !important; }
}

/* -------------------------------------------------------------------------- */
/* Shrink oversized desktop paddings on phones                                 */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .home-section .main_content,
  .home-content,
  .ol-body,
  .eSection,
  .mainSection {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .row.g-4,
  .row.gy-4,
  .row.gx-4 {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
  }
}

@media screen and (max-width: 575px) {
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.2rem !important; }
  h4 { font-size: 1.1rem !important; }

  .btn-lg {
    padding: 0.5rem 0.9rem;
    font-size: 0.95rem;
  }
}

/* ===========================================================================
   Avatars and inline images
   ---------------------------------------------------------------------------
   The markup across the portals sizes images with the HTML attribute
   `height="42"`. That attribute takes a bare number of pixels — it was
   previously written `height="42px"`, which is invalid, so browsers discarded
   it and every avatar fell back to its intrinsic size. The placeholder is
   247x247, which is why a missing profile photo blew the header apart on every
   dashboard.

   The attributes are fixed, but an attribute alone still leaves the image
   stretched whenever the file is not square. These rules make the size a
   property of the layout rather than of whatever was uploaded, so the same
   bug cannot come back through a new template or an odd photo.
   =========================================================================== */

/* The account button in the header, and the same block inside its dropdown. */
.user-profile img,
.user-profile-inner img,
#defaultDropdown img,
.dropdown-toggle > div > img,
.eDropdown-menu .user-profile img {
  width: 42px;
  height: 42px;
  min-width: 42px;      /* flex containers must not squash it */
  max-width: 42px;
  object-fit: cover;    /* fill the box without distorting the face */
  object-position: center;
  border-radius: 50%;
  background-color: #eef1f0;
  display: block;
}

/* Square-cornered variant used in a few dropdowns. */
.user-profile img.radious-5px,
.eDropdown-menu img.radious-5px {
  border-radius: 8px;
}

/* Sidebar and header logos: cap the height, let the width follow the artwork. */
.logo-details img,
.img_wrapper img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

/* Last line of defence. An image carrying an explicit pixel height must never
   be wider than its column, whatever its intrinsic size. */
img[height] {
  max-width: 100%;
}

/* Profile pages show a larger portrait; keep it square and contained. */
.profile-img img,
.profile_img img,
.user-img img,
.userImg img,
.user-info-basic .userImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-info-basic .userImg {
  overflow: hidden;
}

/* Student dashboard welcome banner — compact, not a KPI card */
.student-welcome {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.004);
  padding: 14px 18px;
}
.student-welcome h4 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #181c32;
  line-height: 1.3;
}
.student-welcome p {
  font-size: 0.9rem;
  color: #797c8b;
  line-height: 1.4;
}

/* On small screens, header profile shows avatar only (name stays in dropdown) */
@media screen and (max-width: 767px) {
  .header-menu > ul > li.user-profile > .btn-group > button > .px-2 {
    display: none;
  }
}