/* Global responsive hardening for public + admin pages */
html, body { max-width: 100%; overflow-x: hidden; }
body { -webkit-text-size-adjust: 100%; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
.card, .modal-content, .alert, .dropdown-menu { overflow-wrap: anywhere; }
.text-break-safe, p, h1, h2, h3, h4, h5, h6, td, th, label, .dropdown-item, .nav-link, .card-body { overflow-wrap: anywhere; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > table { margin-bottom: 0; }
.form-control, .form-select, .btn { max-width: 100%; }
.btn { white-space: normal; }
.btn-sm { line-height: 1.25; }
.row { min-width: 0; }
[class*="col-"] { min-width: 0; }
.navbar-brand { min-width: 0; max-width: 72vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar-brand span, .navbar-brand strong { overflow: hidden; text-overflow: ellipsis; }
.dropdown-menu { max-width: calc(100vw - 24px); }
.badge { white-space: normal; }

/* Common page headers/action rows */
@media (max-width: 767.98px) {
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.3rem; }
  h4 { font-size: 1.15rem; }
  .card-body { padding: 1rem; }
  .d-flex.justify-content-between:not(.navbar .d-flex):not(.top-bar):not(.bottom-bar),
  .d-flex.align-items-center.justify-content-between:not(.navbar .d-flex):not(.top-bar):not(.bottom-bar) {
    flex-wrap: wrap;
    gap: .65rem;
  }
  .d-flex.justify-content-between > .btn,
  .d-flex.justify-content-between > a.btn,
  .d-flex.justify-content-between > form,
  .d-flex.justify-content-between > div {
    min-width: 0;
  }
  .table:not(.no-mobile-table) { font-size: .88rem; }
  .table-responsive .table { min-width: 640px; }
  .modal-dialog { margin: .75rem; }
  .input-group { flex-wrap: wrap; gap: .35rem; }
  .input-group > .form-control, .input-group > .form-select, .input-group > .btn { width: 100%; border-radius: .375rem !important; }
}

@media (max-width: 575.98px) {
  .navbar { margin-bottom: 1rem !important; }
  .navbar-brand { max-width: 66vw; font-size: 1.05rem; }
  .brand-logo { height: 32px; max-width: 42px; }
  .dropdown-menu-end { right: auto; left: 0; }
  .btn, .form-control, .form-select { font-size: .93rem; }
  .btn-group, .btn-toolbar { flex-wrap: wrap; gap: .4rem; }
  .rounded-pill { border-radius: 1rem !important; }
  .px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}

/* Quiz/Practice shared mobile focus-mode layout */
@media (max-width: 768px) {
  .top-bar { flex-wrap: wrap; gap: 8px; }
  .top-bar > * { min-width: 0; }
  .top-bar .form-select { max-width: 145px; }
  .exam-container { width: 100%; }
  .question-area, .palette-area { width: 100%; }
  .option-box { align-items: flex-start; word-break: break-word; }
  .palette-grid { grid-template-columns: repeat(6, minmax(34px, 1fr)); }
  .bottom-bar { gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bottom-bar .btn-group-left { flex: 1 1 auto; min-width: max-content; }
  .bottom-bar > .btn { flex: 0 0 auto; }
}

@media (max-width: 430px) {
  body { padding-bottom: 92px; }
  .top-bar { align-items: stretch; }
  .top-bar > .d-flex { width: 100%; justify-content: space-between; }
  .top-bar > select, .top-bar > .timer-box, .top-bar > button, .top-bar > a { flex: 1 1 auto; }
  .palette-grid { grid-template-columns: repeat(5, minmax(32px, 1fr)); }
  .bottom-bar { flex-wrap: nowrap; }
  .btn-custom { font-size: .74rem !important; padding: 6px 8px !important; }
}

/* Header compact mobile layout fix */
@media (max-width: 991.98px) {
  .navbar > .container,
  .navbar > .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .navbar .navbar-brand {
    flex: 1 1 0;
    min-width: 0;
    max-width: none !important;
    margin-right: 0 !important;
    font-size: clamp(1rem, 4.2vw, 1.35rem) !important;
    line-height: 1.15;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .navbar .navbar-brand .brand-logo {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    max-width: 42px;
  }
  .mobile-header-actions {
    flex: 0 0 auto;
    gap: 6px !important;
  }
  .nav-icon-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    border-radius: 14px !important;
    font-size: 1rem !important;
  }
  .navbar-toggler {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0 !important;
  }
  #mobileSearchBar,
  #navbarNav {
    flex: 0 0 100%;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .navbar > .container,
  .navbar > .container-fluid {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .navbar .navbar-brand {
    font-size: 1.03rem !important;
    letter-spacing: -0.4px;
  }
  .navbar .navbar-brand .brand-logo {
    width: 36px;
    height: 36px;
    max-width: 36px;
    margin-right: 7px !important;
  }
  .nav-icon-btn,
  .navbar-toggler {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    border-radius: 12px !important;
  }
  .navbar-toggler-icon {
    width: 1.25em;
    height: 1.25em;
  }
}

@media (max-width: 360px) {
  .navbar .navbar-brand {
    font-size: .95rem !important;
  }
  .navbar .navbar-brand .brand-logo {
    width: 32px;
    height: 32px;
    max-width: 32px;
  }
  .nav-icon-btn,
  .navbar-toggler {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
  }
  .mobile-header-actions { gap: 4px !important; }
}