/* =========================================================
   RESPONSIVE ADMIN LAYOUT
   Applied site-wide across the admin panel.
   Makes the existing Bootstrap layout, tables, forms, and
   sidebar behave well on tablets and phones without altering
   any individual page's markup or business logic.
   ========================================================= */

/* Base sizing fix (prevents iOS auto-zoom on inputs) */
html { -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body { overflow-x: hidden; }

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

/* -------------------- Top navbar -------------------- */
header.navbar {
  flex-wrap: nowrap;
  padding-left: 8px;
  padding-right: 8px;
}
header.navbar .navbar-brand {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
header.navbar h4 { font-size: 1.05rem; margin: 0; }

@media (max-width: 767.98px) {
  header.navbar .navbar-brand {
    max-width: 55%;
    padding-left: 2.5rem; /* clears the toggler button */
  }
  .header-center-text { display: none !important; }
  .watch-box { display: none !important; }
}

/* -------------------- Sidebar -------------------- */
#sidebarMenu {
  transition: all .2s ease-in-out;
}
@media (max-width: 767.98px) {
  #sidebarMenu {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    height: calc(100vh - 48px) !important;
    z-index: 1040;
    background: #fff;
    box-shadow: 0 6px 12px rgba(0,0,0,.15);
  }
  #sidebarMenu.show { display: block !important; }
  main { margin-left: 0 !important; width: 100% !important; }
}

/* -------------------- Main content area -------------------- */
main {
  padding-left: 12px;
  padding-right: 12px;
  width: 100%;
}
@media (max-width: 575.98px) {
  main { padding-left: 8px; padding-right: 8px; }
  h1.h2, .h2 { font-size: 1.35rem; }
  h4.section-title, .section-title { font-size: 1.05rem; margin: 20px 0 12px 0; }
}

/* -------------------- Stat / dashboard cards -------------------- */
.stat-card { padding: 16px; }
@media (max-width: 575.98px) {
  .stat-card h2 { font-size: 1.5rem; }
  .stat-card h5 { font-size: .8rem; }
  .chart-box { padding: 12px; }
}

/* -------------------- Tables --------------------
   Wrap-free responsive fallback: if a table isn't already
   inside a .table-responsive container, this still lets the
   user scroll it horizontally on small screens instead of the
   layout breaking. */
.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
  table.table:not(.no-scroll-fix) {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #eee;
  }
  table.table:not(.no-scroll-fix) thead,
  table.table:not(.no-scroll-fix) tbody,
  table.table:not(.no-scroll-fix) tr {
    display: table;
    width: 100%;
    table-layout: auto;
  }
}

/* -------------------- Forms & filter rows -------------------- */
@media (max-width: 575.98px) {
  .row.g-3 > [class*="col-"],
  .row.g-2 > [class*="col-"] { margin-bottom: 8px; }
  .form-control, .form-select, .btn { font-size: .95rem; }
  .card-header { flex-direction: column; align-items: flex-start !important; gap: 8px; }
  .card-header .form-control,
  .card-header input[type="text"] { width: 100% !important; }
}

/* -------------------- Modals -------------------- */
@media (max-width: 575.98px) {
  .modal-dialog { margin: .5rem; }
}

/* -------------------- Buttons / action rows -------------------- */
@media (max-width: 575.98px) {
  .stat-btn { margin-bottom: 8px; }
  .d-flex.flex-wrap > .d-flex { flex-wrap: wrap; }
}

/* -------------------- Footer -------------------- */
@media (max-width: 767.98px) {
  .footer .col-md-4 .footer_1r { text-align: left !important; margin-top: 8px; }
}

/* -------------------- Utility -------------------- */
.overflow-x-auto { overflow-x: auto; }

/* =========================================================
   MODERN UI POLISH (applies as a sensible default on top of
   Bootstrap — pages with their own card/button styling simply
   override these, nothing here is !important except mobile
   accessibility fixes that must win on small screens).
   ========================================================= */
.card {
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
}
.card.shadow-sm { box-shadow: 0 4px 16px rgba(0,0,0,.05) !important; }
.card-header { border-radius: 14px 14px 0 0 !important; font-weight: 600; }

.btn { border-radius: 8px; }
.btn:not(.btn-sm):not(.btn-lg) { padding: 8px 18px; }

.form-control, .form-select {
  border-radius: 8px;
  border: 1px solid #dfe3e8;
}
.form-control:focus, .form-select:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

.badge { font-weight: 600; letter-spacing: .02em; }
.table thead th { font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; border-bottom-width: 2px; }

/* Mobile tap-target accessibility: buttons/links/inputs stay
   comfortably tappable once the viewport gets phone-sized. */
@media (max-width: 575.98px) {
  .btn, .nav-link, .form-control, .form-select, .form-check-input {
    min-height: 42px;
  }
  .btn { display: inline-flex; align-items: center; justify-content: center; }
  .table thead th, .table td { padding: .55rem .5rem; }
}

/* Generic hero/banner block used on modernized dashboards
   (student, parent, admin summary headers). */
.page-hero {
  border-radius: 18px;
  padding: 22px 26px;
  color: #fff;
  margin-bottom: 20px;
}
@media (max-width: 575.98px) {
  .page-hero { padding: 18px; border-radius: 14px; }
}

/* Stat cards: consistent hover lift wherever `.stat-card` is used,
   without needing every page to redefine it. */
.stat-card { transition: transform .2s ease, box-shadow .2s ease; }
.stat-card:hover { transform: translateY(-4px); }
@media (max-width: 575.98px) {
  .stat-card:hover { transform: none; } /* avoid odd jump on touch tap */
}