/**
 * Barden Boko College — mobile-first responsive layer + print/PDF safety
 * -------------------------------------------------------------------------
 * Loaded after custom.css (and dashboard.css on dashboard routes).
 * - Screen: mobile-first defaults, fluid images, scrollable tables, tap targets.
 * - Print: A4-friendly resets; does NOT hide .site-section (main content lives there).
 */

/* -------------------------------------------------------------------------- */
/* Mobile-first screen defaults (320px+ base)                                  */
/* -------------------------------------------------------------------------- */

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

/* Avoid horizontal scroll from full-bleed children (public site) */
body:not(.dashboard-body) {
  overflow-x: hidden;
}

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

/* Fluid horizontal padding with safe areas (notches) */
.site-wrap .container,
.site-wrap .container-fluid {
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
}

/* Tables: horizontal scroll on small screens only (print resets below) */
@media screen {
  .bbc-table-scroll,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .bbc-table-scroll table {
    margin-bottom: 0;
  }

  /* Nested / direct tables inside card body (mobile horizontal scroll) */
  @media (max-width: 991.98px) {
    .dashboard-card-body:has(> table.table) {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
    }
  }
}

/* Touch-friendly primary actions (WCAG ~44px) */
@media screen and (max-width: 767.98px) {
  .btn:not(.btn-sm):not(.btn-link):not(.close),
  .site-navbar .cta a span,
  button.btn {
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .form-box .btn.btn-block,
  .btn.btn-block {
    width: 100%;
  }
}

/* Dashboard: use full width on narrow screens */
@media screen and (max-width: 767.98px) {
  .dashboard-content {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .dashboard-content-inner {
    max-width: 100%;
  }

  .dashboard-logo {
    font-size: 1.125rem;
    margin-left: 0 !important;
  }

  .page-header .page-title {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
  }
}

/* Progressive enhancement: slightly larger typography on wider screens */
@media screen and (min-width: 768px) {
  body:not(.dashboard-body) {
    overflow-x: visible;
  }
}

/* -------------------------------------------------------------------------- */
/* Public header: brand + hamburger on one row; name stays horizontal (ellipsis) */
/* -------------------------------------------------------------------------- */

.site-navbar-row {
  gap: 0.5rem;
}

.site-navbar-brand-col {
  flex: 1 1 auto;
  min-width: 0;
  /* Leave space for 44px menu button + gap */
  max-width: calc(100% - 3.25rem);
}

@media screen and (min-width: 992px) {
  .site-navbar-brand-col {
    flex: 0 1 auto;
    max-width: none;
  }

  .site-navbar-center {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* One line on small screens; full wrapping on lg+ */
.school-brand--header {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  word-break: normal !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

@media screen and (min-width: 992px) {
  .school-brand--header {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

/* -------------------------------------------------------------------------- */
/* Touch-friendly form controls (login, admissions, portals)                   */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 767.98px) {
  .form-box .form-control,
  .form-box select.form-control,
  .site-section .form-control:not(textarea) {
    min-height: 44px;
  }

  /*
   * Dashboard toolbars: explicit .dashboard-toolbar-flex (no :has() required — old browsers).
   * :has() kept as progressive enhancement for rows without the class.
   */
  .dashboard-content-inner .row.dashboard-toolbar-flex.mb-3 > .col-12 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
  }

  .dashboard-content-inner .row.dashboard-toolbar-flex.mb-3 > .col-12 > a.btn,
  .dashboard-content-inner .row.dashboard-toolbar-flex.mb-3 > .col-12 > button.btn,
  .dashboard-content-inner .row.dashboard-toolbar-flex.mb-3 > .col-12 > input.btn,
  .dashboard-content-inner .row.dashboard-toolbar-flex.mb-3 > .col-12 > .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: min(100%, 10rem);
    margin-bottom: 0 !important;
  }

  .dashboard-content-inner .row.dashboard-toolbar-flex.mb-3 > .col-12 .btn-group {
    flex: 1 1 100%;
  }

  /* Same utility when toolbar columns are .col-md-* (promote/assign forms) */
  .dashboard-content-inner .row.dashboard-toolbar-flex.mb-3 > [class*="col-"] > .btn,
  .dashboard-content-inner .row.dashboard-toolbar-flex.mb-3 > [class*="col-"] > .btn-lg,
  .dashboard-content-inner .row.dashboard-toolbar-flex.mb-3 > [class*="col-"] > div > .btn,
  .dashboard-content-inner .row.dashboard-toolbar-flex.mb-3 > [class*="col-"] > div > .btn-lg {
    width: 100%;
  }

  /* Toolbar not using Bootstrap row/col (e.g. single div.mb-3) */
  .dashboard-content-inner .dashboard-toolbar-flex:not(.row) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
  }

  .dashboard-content-inner .dashboard-toolbar-flex:not(.row) > a.btn,
  .dashboard-content-inner .dashboard-toolbar-flex:not(.row) > button.btn,
  .dashboard-content-inner .dashboard-toolbar-flex:not(.row) > .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: min(100%, 10rem);
    margin-bottom: 0 !important;
  }

  .dashboard-content-inner .row.mb-3 > .col-12:has(> a.btn, > button.btn, > input.btn, > .btn) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
  }

  .dashboard-content-inner .row.mb-3 > .col-12:has(> a.btn, > button.btn, > .btn) > a.btn,
  .dashboard-content-inner .row.mb-3 > .col-12:has(> a.btn, > button.btn, > .btn) > button.btn,
  .dashboard-content-inner .row.mb-3 > .col-12:has(> a.btn, > button.btn, > .btn) > input.btn,
  .dashboard-content-inner .row.mb-3 > .col-12:has(> a.btn, > button.btn, > .btn) > .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: min(100%, 10rem);
    margin-bottom: 0 !important;
  }

  .dashboard-content-inner .row.mb-3 > .col-12 .btn-group {
    flex: 1 1 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Print & “Save as PDF” (browser print dialog)                                 */
/* -------------------------------------------------------------------------- */

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  html {
    font-size: 12pt;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    overflow: visible !important;
  }

  /* Undo screen-only scroll wrappers so tables keep full layout */
  .bbc-table-scroll,
  .table-responsive {
    overflow: visible !important;
    max-width: none !important;
    width: 100% !important;
  }

  .table {
    width: 100% !important;
  }

  /* Main content wrappers: visible and unclipped (do NOT use display:none on these) */
  .site-section {
    display: block !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
  }

  .dashboard-content,
  .dashboard-content-inner {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Typical chrome — safe to hide if not already hidden by page includes */
  .site-navbar,
  .site-mobile-menu,
  .dashboard-header,
  .dashboard-sidebar,
  .no-print,
  .sidebar-toggle {
    display: none !important;
  }

  .intro-section,
  .single-cover {
    display: none !important;
  }
}