/* BrightStage AI — phone & tablet layer over the Ubold theme.
   Loaded last (from partials/pwa-head) so it wins over app.min.css, styles.css
   and per-page <style> blocks. Everything is scoped to the logged-in app frame
   (.content-page, .navbar-custom, the floating widgets) so the public webinar
   registration / thank-you pages are untouched.
   Rule of thumb: below 992px the app is a single column, every card is full
   width, wide things scroll inside their own box, nothing overlaps the bottom
   tab bar. */

/* ---------- Tablet and phone (< 992px: the sidebar is a drawer) ---------- */
@media (max-width: 991.98px) {
  /* Nothing may be wider than the screen: when something is, Android Chrome zooms the whole page
     out while scrolling (the bottom tab bar "shrinks"). clip stops the layout viewport growing. */
  html { -webkit-text-size-adjust: 100%; overflow-x: clip; max-width: 100vw; }
  body { overflow-x: clip; max-width: 100vw; }
  .content-page, .content-page .content { overflow-x: clip !important; }

  /* The theme's top bar is position:fixed with no `top`; pin it so a collapsing margin can never push it down. */
  .navbar-custom { top: 0 !important; }
  /* Page frame: no sidebar offset in either direction, tight gutters, header clearance. */
  .content-page,
  body[data-leftbar-size=condensed] .content-page,
  body[data-layout-mode=two-column] .content-page {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 70px !important;
    padding: 0 12px 16px !important;
    overflow: visible !important;
    min-height: calc(100vh - 70px);
  }
  .content-page > .content { padding: 0 !important; }
  .content-page .container-fluid { padding-left: 0 !important; padding-right: 0 !important; max-width: 100%; }
  .content-page .row { margin-left: -6px; margin-right: -6px; }
  .content-page .row > * { padding-left: 6px; padding-right: 6px; }

  /* Page title: one wrapped line instead of a 70px-tall ellipsised strip. */
  .page-title-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 0 6px; }
  .page-title-box .page-title {
    font-size: 1.15rem !important; line-height: 1.3 !important;
    white-space: normal !important; text-overflow: clip !important; overflow: visible !important;
    display: block; width: 100%;
  }
  .page-title-box .page-title-right { float: none !important; margin-top: 0 !important; display: block; width: 100%; }
  .page-title-box .breadcrumb { display: none !important; }

  /* Cards and their content. */
  .content-page .card { margin-bottom: 14px; border-radius: 12px; }
  .content-page .card-body { padding: 14px; }
  .content-page .card .card-body .row > .col-md-12,
  .content-page .card .card-body .row > .col-lg-12 { padding-left: 0; padding-right: 0; }
  .content-page .header-title, .content-page .card-title { white-space: normal; }

  /* Media never wider than the screen. Images keep an explicit height="" attribute (avatars are sized
     that way: height="42" with no width); only images with a fixed width attribute get height:auto. */
  .content-page img { max-width: 100% !important; }
  .content-page img[width]:not([height]) { height: auto; }
  .content-page img.rounded-circle, .content-page .chat-avatar img { width: auto; }
  .content-page iframe, .content-page video, .content-page canvas, .content-page svg,
  .content-page .apexcharts-canvas, .content-page .apexcharts-canvas svg { max-width: 100% !important; }
  .content-page canvas[width] { height: auto; }

  /* Tables: scroll inside their card instead of stretching the page.
     DataTables' own responsive tables (dt-responsive / .dataTable) collapse columns themselves and are left alone. */
  .content-page .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .content-page table.table:not(.dataTable):not(.dt-responsive) {
    display: block; width: 100% !important; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .content-page .dataTables_wrapper { overflow-x: auto; }
  .content-page .dataTables_wrapper .dataTables_length,
  .content-page .dataTables_wrapper .dataTables_filter { float: none; text-align: left; margin-bottom: 8px; }
  .content-page .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }
  .content-page .dataTables_wrapper .dataTables_info,
  .content-page .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; padding-top: 8px; }

  /* Forms: full-width fields, buttons that wrap, labels above inputs. */
  .content-page .form-control, .content-page .form-select, .content-page .select2-container { width: 100% !important; max-width: 100%; }
  .content-page .row.align-items-center > .col-auto,
  .content-page .row.align-items-center > .col { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .content-page .btn { white-space: normal; }
  .content-page .btn-group { flex-wrap: wrap; }
  .content-page .input-group { flex-wrap: wrap; }
  .content-page .form-check-inline { display: block; margin-right: 0; }

  /* Flex rows built for desktop (space-between, no wrap) fold onto their own lines. */
  .content-page .d-flex.justify-content-between { flex-wrap: wrap; gap: 8px; }
  .content-page .d-flex.align-items-center { flex-wrap: wrap; }
  .content-page .justify-content-end { justify-content: flex-start !important; }
  .content-page .text-nowrap:not(td):not(th),
  .content-page .card-body .nowrap:not(table):not(td):not(th) { white-space: normal !important; }
  .content-page .float-end.btn, .content-page .float-end.btn-group { float: none !important; display: inline-flex; margin-top: 6px; }

  /* Modals: edge to edge with a small margin, never wider than the screen. */
  .modal-dialog { margin: 8px auto; max-width: calc(100vw - 16px) !important; }
  .modal-dialog.modal-full-width { width: auto; }
  .modal-content { border-radius: 12px; }
  .modal-body { padding: 14px; }

  /* Floating things: none of them may sit on the bottom tab bar. */
  .floating-widget-btn { bottom: calc(76px + env(safe-area-inset-bottom)) !important; left: 12px !important; width: 44px !important; height: 44px !important; }
  .floating-widget-btn i { font-size: 17px !important; }
  .contact-form-container { bottom: calc(128px + env(safe-area-inset-bottom)) !important; left: 12px !important; width: calc(100% - 24px) !important; max-width: none !important; }
  /* The chat bubble (Charla) is not loaded on phones at all (partials/support-widget); this is the safety net. */
  charla-widget, #charla-widget, .charla-widget, iframe[src*="charla"] { display: none !important; }

  /* Footer text is fine, just keep it clear of the tab bar. */
  .content-page .footer, .footer { position: static !important; padding: 12px 0 0 !important; text-align: center; }

  /* ---- Analytics page ---- */
  /* The filter panel is a fixed right-hand drawer on desktop; on phones it becomes a normal block above the stats. */
  .analytics-filter { position: static !important; right: auto !important; width: 100% !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 8px; background: transparent !important; }
  .analytics-filter .toggle-icon { display: none !important; }
  .analytics-filter #filters { display: block !important; }
  /* The funnel diagram centred its Bootstrap row inside a flex box, which shrank it to a few pixels wide.
     It ships its own scoped copy of Bootstrap (loaded inside the component, i.e. after this file), so these
     selectors carry .content-page to outrank it. */
  .content-page .analytics-flow > .container-fluid.d-flex { display: block !important; padding: 0 !important; }
  .content-page .analytics-flow > .container-fluid > .row { width: 100%; margin: 0; }
  .content-page .analytics-flow .p-5 { padding: 8px !important; }
  .content-page .analytics-flow .p-3 { padding: 4px !important; }
  .content-page .analytics-flow .px-4 { padding-left: 8px !important; padding-right: 8px !important; }
  .content-page .analytics-flow .ps-lg-5 { padding-left: 0 !important; }
  .content-page .analytics-flow .my-auto { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* ---------- Phones (< 768px): grid columns that never stacked now do ---------- */
@media (max-width: 767.98px) {
  /* Bootstrap col-N without a breakpoint prefix keeps its share of the row on every screen size.
     The theme's pages use col-3 / col-4 / col-8 etc. for desktop dashboards; here they fold to full width,
     while pairs (col-5 + col-7, col-6 + col-6: an icon beside a number) stay side by side. */
  .content-page .col-1, .content-page .col-2, .content-page .col-3, .content-page .col-4,
  .content-page .col-8, .content-page .col-9, .content-page .col-10, .content-page .col-11 {
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
  }
  .content-page .offset-1, .content-page .offset-2, .content-page .offset-3, .content-page .offset-4,
  .content-page .offset-5, .content-page .offset-6 { margin-left: 0 !important; }
  .content-page .d-flex > .col-4 { flex: 1 1 100%; }
  /* Exception: the analytics funnel diagram. Its own phone layout was a col-4 box (a third of the row) holding a
     col-8 image (two thirds of that): a 30px icon. Here each step is a centred half-width box with a full-width icon. */
  .content-page .analytics-flow .col-4 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; }
  .content-page .analytics-flow .col-8 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
  .content-page .analytics-flow .offset-4 { margin-left: 25% !important; }
  .content-page .analytics-flow .offset-2 { margin-left: 0 !important; }
  .content-page .analytics-flow .col-6 { flex: 0 0 50% !important; max-width: 50% !important; }
  /* Inside the Live / Replay halves the steps were col-5 offset-5 / col-4 offset-4 boxes: ~70px wide, labels broke mid-word.
     Each step now takes the full half, with its icon capped so the column reads as a list. */
  .content-page .analytics-flow .col-6 [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin-left: 0 !important; }
  .content-page .analytics-flow .col-6 .p-2 { padding: 4px 2px !important; }
  .content-page .analytics-flow .col-6 img { max-width: 96px; display: block; margin: 0 auto; }
  .content-page .analytics-flow .col-6 .fw-bold { font-size: 12px !important; line-height: 1.25; word-break: normal; }
  .content-page .analytics-flow .col-6 h4 { font-size: 1rem; margin-bottom: 4px; }

  /* Stat tiles built as col-5 (icon) + col-7 (number) keep the number readable. */
  .content-page .widget-rounded-circle .card-body { padding: 12px; }
  .content-page .avatar-lg { width: 3.4rem; height: 3.4rem; }

  /* Type: a notch smaller so long names and email addresses fit. */
  .content-page h3 { font-size: 1.35rem; }
  .content-page h4 { font-size: 1.05rem; }
  .content-page .font-24 { font-size: 20px !important; }
  .content-page .badge { white-space: normal; }
  .content-page .card-body .btn + .btn { margin-top: 6px; }
  .content-page .progress { max-width: 100%; }

  /* Wide inline layouts on the integrations pages. */
  .content-page .row.col-md-10 { width: 100%; margin-left: 0; margin-right: 0; }
  .content-page .details-content { flex-wrap: wrap; }

  /* Top bar: give the page title room by hiding the search on phones (the theme already hides most items). */
  .navbar-custom .app-search { display: none !important; }

  /* The floating envelope (plan contact details) sat on top of tab controls at the bottom-left of every
     page; on phones it is hidden (still shown on tablets and desktop). */
  .floating-widget-btn, .contact-form-container { display: none !important; }

  /* PodSpace Chats: three desktop columns stack (sessions, people, chat); keep the chat area usable. */
  .content-page .conversation-list { max-height: 55vh !important; }
  .content-page .nav-pills { gap: 4px; }
  .content-page .nav-pills .nav-link { padding: 6px 10px; font-size: .9rem; }
  .content-page .scroll-container [data-simplebar] { max-height: 260px !important; }
}

/* iOS zooms into any field smaller than 16px; only touch devices get this. */
@media (max-width: 767.98px) and (hover: none) {
  .content-page .form-control, .content-page .form-select, .content-page textarea,
  .content-page .select2-container .select2-selection__rendered { font-size: 16px !important; }
}

/* ---------- Small phones (< 400px) ---------- */
@media (max-width: 399.98px) {
  .content-page, body[data-layout-mode=two-column] .content-page { padding-left: 10px !important; padding-right: 10px !important; }
  .content-page .card-body { padding: 12px; }
  /* Icon + number pairs (col-6 / col-6, col-5 / col-7) stay side by side even here; only the icon shrinks. */
  .content-page .avatar-lg { width: 3rem; height: 3rem; }
  .content-page h3 { font-size: 1.25rem; }
}