/* CTC Live final device UI and meeting media fix.
   Purpose: stabilize desktop/laptop, tablet, and mobile without rebuilding modules. */

html, body { max-width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }

/* Meeting room: keep the embedded room usable on every device. */
#ctc-live-meeting-container,
.meeting-stage,
.meeting-room-shell,
.meeting-room-main { min-width: 0; }

#ctc-live-meeting-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

.meeting-room-main .btn,
.meeting-files-drawer .btn,
.meeting-adaptive-panel .btn { white-space: nowrap; }

/* Shared files drawer: prevent cramped controls and broken wrapping. */
.meeting-files-upload-grid { align-items: end; }
.meeting-file-picker,
.meeting-file-visibility { min-width: 0; }
.meeting-file-picker-ui { min-width: 0; width: 100%; }
.meeting-file-picker-ui span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-file-upload-btn { min-width: 128px; }

/* Desktop/laptop: polished full web UI. */
@media (min-width: 1024px) {
  .desktop-layout, .desktop-laptop-layout { display: revert !important; }
  .tablet-layout, .mobile-layout { display: none !important; }

  .app-content, .page-stack, .card, .table-wrap { min-width: 0; }
  .page-title-row, .dashboard-hero, .section-head { gap: 18px; align-items: flex-start; }
  .page-title-row > .action-buttons, .dashboard-hero > .action-row { flex: 0 0 auto; }

  .table-wrap:not(.admin-users-table-wrap) { overflow-x: auto; }
  .data-table, .phase8-table, .recordings-table { width: 100%; }

  .meeting-room-main { grid-template-columns: minmax(0, 1fr) minmax(360px, 400px) !important; }
  .meeting-room-shell--participant .meeting-room-main,
  .meeting-room-shell.is-side-panel-hidden .meeting-room-main,
  .meeting-room-main--clean { grid-template-columns: minmax(0, 1fr) !important; }

  .meeting-stage { min-height: calc(100vh - 96px); }
  .meeting-files-drawer { width: min(780px, calc(100vw - 96px)) !important; }
  .meeting-files-upload-grid { grid-template-columns: minmax(320px, 1fr) minmax(180px, 220px) auto !important; gap: 14px !important; }
}

/* Tablet: adaptive two-column where useful, no squeezed full desktop UI. */
@media (min-width: 768px) and (max-width: 1023px) {
  .desktop-layout { display: none !important; }
  .tablet-layout { display: block !important; }
  .mobile-layout { display: none !important; }

  body:not(.meeting-room-body) .app-content { padding: 20px !important; }
  .dashboard-grid, .dashboard-grid--four, .dashboard-grid--three, .stats-grid, .grid-3,
  .settings-card-grid, .report-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .form-two, .form-three, .form-four, .grid-2 { grid-template-columns: 1fr 1fr !important; }

  .table-wrap, .admin-users-table-wrap { overflow-x: auto !important; }
  .data-table, .admin-users-table { min-width: 860px; }

  .meeting-room-body { overflow: auto !important; }
  .meeting-room-shell { min-height: 100vh !important; height: auto !important; }
  .meeting-room-main { grid-template-columns: 1fr !important; padding: 12px !important; gap: 12px !important; overflow: visible !important; }
  .meeting-stage { min-height: 62vh !important; }
  .meeting-files-drawer { left: 16px !important; right: 16px !important; top: 96px !important; width: auto !important; }
  .meeting-files-upload-grid { grid-template-columns: 1fr 220px !important; }
  .meeting-file-upload-btn { grid-column: 1 / -1; width: max-content; }
}

/* Mobile: simplified stacked access, not cramped desktop. */
@media (max-width: 767px) {
  .desktop-layout, .tablet-layout { display: none !important; }
  .mobile-layout { display: block !important; }

  body:not(.meeting-room-body) .app-content { padding: 14px !important; }
  .dashboard-grid, .dashboard-grid--four, .dashboard-grid--three, .stats-grid, .grid-3, .grid-2,
  .settings-card-grid, .report-card-grid, .form-two, .form-three, .form-four { grid-template-columns: 1fr !important; }
  .page-title-row, .dashboard-hero, .section-head { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .action-buttons, .form-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100%; }
  .action-buttons .btn, .form-actions .btn { width: 100%; justify-content: center; }

  .table-wrap, .admin-users-table-wrap { overflow-x: visible !important; }
  .data-table thead, .admin-users-table thead { display: none !important; }
  .data-table, .data-table tbody, .data-table tr, .data-table td,
  .admin-users-table, .admin-users-table tbody, .admin-users-table tr, .admin-users-table td { display: block !important; width: 100% !important; }
  .data-table tr, .admin-users-table tr { border: 1px solid var(--ctc-border); border-radius: 18px; padding: 12px; margin-bottom: 12px; background: var(--ctc-surface-raised); }
  .data-table td, .admin-users-table td { border: 0 !important; padding: 7px 0 !important; }

  .meeting-room-body { overflow: auto !important; }
  .meeting-room-shell { min-height: 100vh !important; height: auto !important; }
  .meeting-room-topbar { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .meeting-room-main { grid-template-columns: 1fr !important; padding: 10px !important; gap: 10px !important; overflow: visible !important; }
  .meeting-stage { min-height: 58vh !important; border-radius: 16px !important; }
  .meeting-adaptive-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .meeting-adaptive-actions .btn, .meeting-adaptive-actions .room-pill { width: 100%; justify-content: center; }
  .meeting-files-drawer { position: fixed !important; inset: 10px !important; width: auto !important; max-height: calc(100vh - 20px); overflow: auto; }
  .meeting-files-card { padding: 14px !important; }
  .meeting-files-upload-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .meeting-file-upload-btn { width: 100%; }
}