/* Shared responsive fixes for all role templates */

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

.content {
  padding-top: 0 !important;
}

.page-header {
  margin-top: 0 !important;
}

.topbar {
  margin-bottom: 0 !important;
}

/* Student template fix: avoid extra top offset from positioned children */
/* .main-wrapper > * {
  position: unset !important;
  z-index: auto !important;
} */

.logo__image {
  display: block;
  height: clamp(34px, 5vw, 50px);
  width: auto;
  max-width: min(220px, 52vw);
  object-fit: contain;
}

.inst-brand .logo__image,
.corp-brand .logo__image,
.brand .logo__image {
  height: clamp(30px, 4.5vw, 44px);
  max-width: min(200px, 48vw);
}

.topbar__brand-logo,
.inst-topbar-logo,
.corp-topbar-logo,
.nav-brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .top-nav__inner,
  .inst-topbar,
  .corp-topnav,
  .admin-topbar {
    min-height: 64px;
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px;
  }

  .top-nav__menu,
  .inst-topmenu,
  .corp-topmenu {
    display: none !important;
  }

  .logo__image {
    height: clamp(30px, 6vw, 42px);
    max-width: min(170px, 56vw);
  }

  .topbar__brand-logo .logo__image,
  .inst-topbar-logo .logo__image,
  .corp-topbar-logo .logo__image,
  .nav-brand-logo .logo__image {
    height: clamp(28px, 6vw, 40px);
    max-width: min(150px, 52vw);
  }

  .main-content,
  .inst-content,
  .corp-content,
  .admin-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 575.98px) {
  .content {
    padding-top: 0 !important;
  }

  .logo__image {
    height: 30px;
    max-width: 145px;
  }

  .page-head,
  .inst-pagehead,
  .corp-pagehead {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .page-head .btn,
  .inst-pagehead .btn,
  .corp-pagehead .btn {
    width: 100%;
  }

  .table-responsive {
    overflow-x: auto;
  }
}

/*
 * Student cart (cart.php): thead must use theme green + white text.
 * ID + !important beats Bootstrap 5.3 .table > :not(caption) > * > * on th/td.
 * Loaded after student-dashboard.css so :root --green is defined.
 */
#studentCartTable thead th {
  --bs-table-bg: var(--green, #059669) !important;
  --bs-table-color: #fff !important;
  --bs-table-border-color: rgba(255, 255, 255, 0.28) !important;
  background-color: var(--green, #059669) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
}

/* Placeholder text only: 3px smaller than field text (typed values unchanged) */
.form-control::placeholder,
textarea.form-control::placeholder,
.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {
  font-size: calc(1rem - 3px);
  opacity: 1;
}

.form-control-sm::placeholder,
.form-control-sm::-webkit-input-placeholder {
  font-size: calc(0.875rem - 3px);
  opacity: 1;
}

.form-control-lg::placeholder,
.form-control-lg::-webkit-input-placeholder {
  font-size: calc(1.25rem - 3px);
  opacity: 1;
}