/* GBY Driver responsive layout fixes */

/* Prevent accidental horizontal scroll on mobile */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Better mobile tap behavior */
button,
select,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Mobile bottom navigation */
@media (max-width: 767px) {
  #sidebar {
    height: 72px;
  }

  #sidebar .nav-btn {
    min-height: 52px;
    padding: 8px 4px !important;
    text-align: center !important;
    font-size: 11px;
    line-height: 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }

  #sidebar .nav-btn .label {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #content {
    min-height: calc(100vh - 72px);
  }

  /* Forms feel less cramped on phones */
  #content input,
  #content select,
  #content textarea,
  #content button {
    font-size: 16px;
  }

  /* Tables should not break phone layout */
  #content table {
    min-width: 720px;
  }

  #content .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Settings cards/lists: actions do not fly away on mobile */
  #instrList > div,
  #usersList > div,
  #groupsList > div {
    gap: 10px;
  }

  #instrList button,
  #usersList button,
  #groupsList button {
    min-height: 38px;
    border-radius: 10px;
    white-space: nowrap;
  }

  #instrList .flex,
  #usersList .flex,
  #groupsList .flex {
    flex-wrap: wrap;
  }

  /* Modals on small screens */
  .fixed .max-w-6xl,
  .fixed .max-w-md {
    max-width: calc(100vw - 24px);
  }
}

/* Desktop keeps old sidebar behavior */
@media (min-width: 768px) {
  #sidebar.w-20 .nav-btn {
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* Instruction cards, videos and links mobile fix */

.instruction-card,
#topicsContainer > div,
#instrList > div {
  max-width: 100%;
  overflow: hidden;
}

.instruction-card iframe,
.instruction-card video,
#topicsContainer iframe,
#topicsContainer video {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
  border-radius: 14px;
  display: block;
}

.instruction-card a,
.instruction-card button,
#topicsContainer a,
#topicsContainer button {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

.instruction-actions,
.instruction-links,
#topicsContainer .flex {
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 767px) {
  .instruction-card,
  #topicsContainer > div {
    padding: 14px !important;
  }

  .instruction-card iframe,
  #topicsContainer iframe {
    min-height: 190px;
  }

  .instruction-card a,
  .instruction-card button,
  #topicsContainer a,
  #topicsContainer button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
/* Instructions mobile video and action buttons fix */

.instruction-card,
#topicsContainer > div,
#instrList > div,
#usersList > div,
#groupsList > div {
  max-width: 100%;
  overflow: hidden;
}

.instruction-card iframe,
.instruction-card video,
#topicsContainer iframe,
#topicsContainer video {
  max-width: 100%;
}

.instruction-video-wrap {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #020617;
}

.instruction-video {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

.instruction-links a,
.instruction-links button {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 767px) {
  .instruction-links a,
  .instruction-links button {
    width: 100%;
  }

  #instrList > div,
  #usersList > div,
  #groupsList > div {
    align-items: flex-start !important;
  }

  #instrList > div > div,
  #usersList > div > div,
  #groupsList > div > div {
    max-width: 100%;
  }
}

/* Final instruction video fit fix */

.instruction-card {
  max-width: 100%;
  overflow: hidden;
}

.topic-content {
  max-width: 100%;
  overflow: hidden;
}

.instruction-video-box {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #020617;
}

.instruction-video-frame {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border: 0;
  display: block;
}

.instruction-links {
  width: 100%;
  max-width: 100%;
}

.instruction-links a,
.instruction-links button {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 767px) {
  #topicsContainer {
    width: 100%;
    max-width: 100%;
  }

  #topicsContainer .topic {
    width: 100%;
    max-width: 100%;
  }

  .instruction-video-box {
    aspect-ratio: 16 / 9;
  }

  .topic-content {
    padding: 12px !important;
  }
}
/* Google Drive video: desktop iframe, mobile open button */

.drive-video-block {
  width: 100%;
  max-width: 100%;
}

.drive-video-mobile-button {
  display: none;
}

.drive-video-desktop {
  display: block;
}

@media (max-width: 767px) {
  .drive-video-desktop {
    display: none;
  }

  .drive-video-mobile-button {
    display: flex;
    width: 100%;
    min-height: 120px;
    border-radius: 16px;
    background: #1d4ed8;
    color: white;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    font-weight: 700;
    padding: 18px;
    text-decoration: none;
  }

  .drive-video-play {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    padding-left: 4px;
  }
}
/* Instruction video layout */

.instruction-video-box {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #020617;
}

.instruction-video-frame {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border: 0;
  display: block;
}

.instruction-links {
  width: 100%;
  max-width: 100%;
}

.instruction-links a {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drive-video-desktop {
  display: block;
}

@media (max-width: 767px) {
  .drive-video-desktop {
    display: none;
  }
}