/* Mobile / tablet responsiveness overrides (loaded after the main bundle CSS) */
/* `clip` (not `hidden`) so position:sticky sidebars keep working */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe { max-width: 100%; }

/* Dashboard shells (artist + admin): off-canvas sidebar below 1024px */
.app-menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; color: #334155; flex-shrink: 0; cursor: pointer; }
.app-backdrop { display: none; }
.app-short { display: none; }

@media (max-width: 1023.98px) {
  .app-menu-btn { display: inline-flex; }
  .app-sidebar {
    position: fixed !important; top: 0; left: 0; bottom: 0;
    height: 100vh !important; height: 100dvh !important;
    width: 16rem; max-width: 85vw; z-index: 70 !important;
    transform: translateX(-105%); transition: transform .25s ease; overflow-y: auto;
  }
  .app-sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .45); }
  .app-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 65; }
  .app-main-admin { margin-left: 0 !important; }
  .app-main, .app-main-admin { min-width: 0; width: 100%; }
  .app-header { padding-left: 12px !important; padding-right: 12px !important; gap: 8px; }
  .app-title { font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-hide-sm { display: none !important; }
  .admin-content { padding: 16px !important; }
}
@media (max-width: 639.98px) {
  .app-long { display: none; }
  .app-short { display: inline; }
}

/* Public site header: smaller logo on phones so page titles are not hidden under the fixed navbar */
@media (max-width: 767.98px) {
  header.fixed > div { padding-top: 8px !important; padding-bottom: 8px !important; }
  header.fixed img { height: 44px !important; width: auto !important; max-width: 60vw; object-fit: contain; }
}

/* Generic phone safety nets */
@media (max-width: 639.98px) {
  /* header rows with title + actions may wrap instead of squeezing */
  .justify-between.flex:not(.flex-col):not(.flex-nowrap), .admin-content .flex:not(.flex-col):not(.flex-nowrap):not(.grid) { flex-wrap: wrap; }
  .admin-content select, .admin-content input:not([type="checkbox"]):not([type="radio"]) { min-width: 0; max-width: 100%; }
}
/* Wide tables scroll sideways instead of stretching the page on phones/tablets */
@media (max-width: 767.98px) {
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Event / quiz hero banners: fixed height on phones (aspect-ratio would clip long titles) */
@media (max-width: 639.98px) {
  .aspect-\[16\/6\], .aspect-\[16\/5\] { aspect-ratio: auto; height: 210px; }
}

/* Notification dropdowns: keep them inside the screen on phones */
@media (max-width: 639.98px) {
  .notif-dropdown { position: fixed !important; left: 12px !important; right: 12px !important; top: 68px !important; width: auto !important; max-width: none !important; margin-top: 0 !important; }
  .notif-dropdown-nav { top: 92px !important; }
}

/* Maintenance / testing popup: never taller than the screen, scrolls inside on phones */
.maint-card { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.maint-card > button[aria-label="Close"] { position: sticky; top: 8px; margin-left: auto; margin-right: 12px; margin-top: -4px; display: flex; float: right; }
@media (max-width: 639.98px) {
  .maint-body { padding: 20px 18px 22px !important; }
  .maint-body h2 { font-size: 20px !important; }
  .maint-body > div:first-child { margin-bottom: 12px !important; }
}
.maint-body > button { position: sticky; bottom: 8px; z-index: 2; box-shadow: 0 -12px 14px 4px rgba(255, 255, 255, .95); }

/* Live page: dark page background all the way up and a solid navbar, so the fixed navbar never blends into / overlaps the stream area */
body:has(.live-page-container), body:has(.live-page-container) #root, body:has(.live-page-container) #root > div { background-color: #020617 !important; }
body:has(.live-page-container) header.fixed > div { background: #ffffff !important; backdrop-filter: none !important; border-color: #e2e8f0 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.live-page-container { padding-top: 40px !important; }
@media (min-width: 640px) { .live-page-container { padding-top: 72px !important; } }

/* Live page: navbar scrolls away with the page instead of floating over the stream/chat */
body:has(.live-page-container) header.fixed { position: absolute !important; }

@keyframes likepop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }