/* ==========================================================
   Consumer Connect Portal (HTML Demo) - Responsive Overrides
   File: assets/css/responsive.css
   Purpose: Make all demo pages usable on desktop/tablet/mobile
   Note: This file is intentionally "override-only" so it can
         sit after Webflow + portal-extras + inline CSS.
   ========================================================== */

/* ---------- Base / safety ---------- */
*, *::before, *::after { box-sizing: border-box; }

img, svg, video, canvas { max-width: 100%; height: auto; }

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Better tap targets on touch devices */
a, button, .w-button, input, select, textarea { touch-action: manipulation; }
button, .w-button, .button, .side-button { min-height: 44px; }

/* Prevent long tokens (IDs, emails) from blowing out layouts */
.cc-wrap, .cc-muted, .status-txt, .text-block-3, .top-content, .header,
.kpi-label, .kpi-value, .role-badge, .nav-link, .input-label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tables (base): keep normal desktop behavior.
   We only force horizontal scrolling for table-like blocks at tablet/mobile breakpoints. */
table { width: 100%; border-collapse: collapse; }
/* If a page uses fixed width panels, allow flex wrap */
.site-wrapper {
  /* Most pages already use flex in Webflow; this is harmless if not. */
  display: flex;
  min-height: 100vh;
}

/* Main layout guardrails */
.main-block { min-width: 0; } /* allows inner content to shrink */
.right-block { min-width: 0; }

/* KPI cards: allow wrapping */
.grid-ctwrap, .w-layout-grid:not(.complaint-grid):not(.header-grid) {
  grid-auto-flow: row;
}

/* ---------- Tablet (<= 991px) ---------- */


/* Horizontal scroll wrapper for injected tables (used by complaint pages, dashboards, etc.) */
.cc-table-scroll{
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.cc-table-scroll > table{
  width: 100%;
}

@media (max-width: 991px)
{
  html, body { overflow-x: hidden; }
  .site-wrapper { overflow-x: hidden; }
  .main-block { margin-right: 0 !important; }
  .right-block { display: none !important; }

  /* Prevent common overflow from flex/grid children */
  .main-block, .main-content, .dash-section, .dash-block, .dash-line, .dash-stats, .dash-details { max-width: 100% !important; min-width: 0 !important; }
  .dash-section *, .dash-block *, .dash-line *, .dash-stats *, .dash-details * { min-width: 0; }

  /* Collapse inline grids used on complaint pages (inline styles win unless we use !important) */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display:grid"] { max-width: 100% !important; }

  /* Long tokens should never force horizontal overflow */
  .dash-section, .dash-block, .dash-line { overflow-wrap: anywhere; word-break: break-word; }

  .cc-table-scroll > table{ width: max-content !important; min-width: 100% !important; max-width: none !important; }
  .cc-table-scroll td, .cc-table-scroll th{ white-space: nowrap; }
  /* Allow narrative blocks inside tables to wrap when explicitly marked */
  .cc-table-scroll .table-txt, .cc-table-scroll .para, .cc-table-scroll .w-richtext{ white-space: normal; }

  /* Convert 3-column desktop shell to 2-row layout:
     Left nav becomes top bar; right panel becomes below content. */
  .site-wrapper { flex-direction: column; }

  .left-block {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    border-right: none !important;
  }

  .logo-padding { padding-top: 12px !important; padding-bottom: 10px !important; }
  .logo-img { max-height: 56px; width: auto; }

  /* Nav becomes horizontal, scrollable if needed */
  .nav-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 8px 12px 12px !important;
    -webkit-overflow-scrolling: touch;
  }

  .nav-link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .nav-icon { width: 20px !important; height: 20px !important; }

  /* Help footer in sidebar becomes compact */
  .help-wrap { padding: 10px 12px 14px !important; }

  .main-block { width: 100% !important; }

  .top-section {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Slide-out / right panel: stop forcing narrow desktop width */
  .right-block {
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
    height: auto !important;
    order: 3; /* after main content */
  }

  /* If panel uses "expanded" to force a desktop overlay, neutralize */
  .right-block.expanded {
    width: 100% !important;
    transform: none !important;
  }

  /* Grids */
  .grid-ctwrap,
  .w-layout-grid:not(.complaint-grid):not(.header-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Forms */
  input, select, textarea { width: 100% !important; }

  /* ---- Table-like blocks: prefer horizontal scrolling on tablet/mobile ---- */
  .table-scroll,
  .cc-table-scroll,
  .table-wrap,
  .cc-table-wrap,
  .tablewrap,
  .table,
  .data-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure the actual table can keep natural column widths */
  .table-wrap table,
  .cc-table-wrap table,
  .tablewrap table,
  .table table,
  table.stat-table {
    width: max-content;
    min-width: 100%;
  }

  /* Default: keep compact columns from wrapping (prevents "squeezed" look) */
  .table-wrap th, .table-wrap td,
  .cc-table-wrap th, .cc-table-wrap td,
  .tablewrap th, .tablewrap td,
  .table th, .table td,
  table.stat-table th, table.stat-table td {
    white-space: nowrap;
    vertical-align: top;
  }

  /* But allow long narrative/value blocks to wrap */
  .table-txt,
  .table-txt.para,
  .long-text,
  .statement,
  .description,
  .notes,
  .complaint-desc,
  .complaint-text {
    white-space: normal;
  }
}

/* ---------- Mobile (<= 767px) ---------- */

@media (max-width: 767px) {
  /* ======================================================
     Consumer Dashboard (/consumer/dashboard.html)
     Complaint list rows (grid) should stack on tablet/mobile
     instead of squeezing columns.
     ====================================================== */
  /* Horizontal scroll wrapper for complaint rows (mobile) */
  .cc-hscroll{
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  /* Make the scrollbar visible as an affordance (where the browser allows styling) */
  .cc-hscroll::-webkit-scrollbar{ height: 10px; }
  .cc-hscroll::-webkit-scrollbar-track{ background: rgba(0,0,0,0.08); border-radius: 999px; }
  .cc-hscroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.28); border-radius: 999px; }

  /* Subtle right-edge fade to hint "scroll for more" */
  .cc-hscroll--hint:after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
  }

  

  /* In horizontally-scrollable "grid tables", each complaint row must remain a vertical list (one row per line),
     not inline-block, otherwise rows can line up horizontally and create huge blank scroll areas. */
  .cc-hscroll .complaint-dd{ display: block !important; width: 100% !important; }
  .cc-hscroll .complaint-toggle{ display: block !important; width: auto !important; }
.complaint-dd, .complaint-toggle, .complaint-grid { max-width: 100% !important; }
  .complaint-grid {
    /* Keep desktop-style columns; on phones we enable horizontal scrolling via a wrapper (.cc-hscroll). */
    max-width: 100% !important;
  }
  .complaint-grid .grid-ctwrap { min-width: 0 !important; }
  .complaint-grid .grid-ctwrap .text-block-5,
  .complaint-grid .grid-ctwrap .status-txt { overflow-wrap: anywhere; word-break: break-word; }


  /* Keep the dashboard header row aligned with the complaint rows, and avoid column squashing */
  .cc-hscroll .header-grid,
  .cc-hscroll .complaint-grid{
    display: grid !important;
    grid-template-columns: 150px 220px 120px 160px 220px 180px 140px !important;
    column-gap: 16px !important;
    align-items: center;
    width: max-content !important;
    max-width: none !important;
  }
  .cc-hscroll .header-grid .grid-ctwrap > div{
    white-space: nowrap !important;
  }
  .cc-hscroll .complaint-grid .grid-ctwrap{
    white-space: nowrap !important;
  }
  /* Actions area */
  .complaint-grid .actions { justify-self: stretch !important; width: 100% !important; }
  .complaint-grid .actions .cc-action-mini {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center !important;
  }
  /* Draft rows with delete icon */
  .complaint-grid .actions.delete {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    justify-content: space-between !important;
  }
  .complaint-grid .actions.delete .cc-action-mini { flex: 1 1 auto !important; width: auto !important; }
  .complaint-grid .actions.delete .trash { flex: 0 0 auto !important; }

  #cc-complaint-detail, [data-cc-field="timeline"]{ max-width: 100%; }
  #cc-complaint-detail *{ max-width: 100%; }

  /* Reduce global padding where Webflow uses wide gutters */
  .main-block,
  .dash-section,
  .top-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* KPI cards become 1-per-row */
  .grid-ctwrap,
  .w-layout-grid:not(.complaint-grid):not(.header-grid) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Buttons in headers stack nicely */
  .top-section .button,
  .top-section .side-button,
  .top-section .bitton-nobg {
    width: auto;
  }

  /* Profile / card sections stop side-by-side layouts */
  .profile-wrap {
    display: block !important;
  }

  /* Any 2-col "form rows" become stacked */
  .w-row { display: block !important; }
  .w-col { width: 100% !important; left: 0 !important; right: 0 !important; }

  /* Dropdowns and filters: full width and tap-friendly */
  .w-dropdown, .w-dropdown-toggle { width: 100% !important; }
  .w-dropdown-toggle { min-height: 44px; }

  /* Slightly smaller nav pills on phones */
  .nav-link { padding: 9px 10px !important; }


  /* Consumer dashboard: keep header row aligned with rows and enable obvious horizontal scroll */
  .cc-hscroll .header-grid,
  .cc-hscroll .complaint-grid{
    min-width: 980px !important; /* ensures 6–7 columns don't squeeze */
  }
  .cc-hscroll .header-grid,
  .cc-hscroll .complaint-grid{
    display: grid !important;
  }
  .cc-hscroll .header-grid .grid-ctwrap,
  .cc-hscroll .complaint-grid .grid-ctwrap{
    white-space: nowrap !important;
  }
  .cc-hscroll .header-grid a,
  .cc-hscroll .complaint-grid a,
  .cc-hscroll .header-grid button,
  .cc-hscroll .complaint-grid button{
    white-space: nowrap !important;
  }


  /* v24: prevent extra empty horizontal scroll space on dashboard grid tables */
  .cc-hscroll .grid-wrap {
    display: inline-block !important;
    width: max-content !important;
    max-width: none !important;
  }
  .cc-hscroll .header-grid,
  .cc-hscroll .complaint-grid {
    width: max-content !important;
    min-width: max-content !important;
  }

}

/* ---------- Small phones (<= 479px) ---------- */
@media (max-width: 479px) {
  /* Ensure long titles do not overflow */
  h1, h2, h3 { overflow-wrap: anywhere; }

  /* Reduce top bar clutter */
  .top-section { gap: 8px !important; }

  /* Make the "File a Complaint" button fit */
  .button { padding-left: 14px !important; padding-right: 14px !important; }

  /* Nav: allow a bit more compactness */
  .nav-icon { width: 18px !important; height: 18px !important; }
}


/* ---------- Header + inner content wrapping ---------- */
.top-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.top-section h1 {
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.15;
  margin: 0;
  overflow-wrap: anywhere;
}
.top-section > div { min-width: 0; }
.role-badge { white-space: nowrap; }

/* Common flex rows should wrap instead of overflowing */
.filters, .filter-row, .toolbar, .actions, .btn-row, .button-row,
.form-row, .form-grid, .field-row, .header-actions {
  flex-wrap: wrap !important;
  min-width: 0;
}

/* Inputs and selects should shrink nicely */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="datetime-local"], select, textarea {
  max-width: 100%;
}

/* Avoid cards/panels forcing wide layouts */
.kpi-grid, .dash-section, .card, .cc-card, .panel, .content-card, .w-richtext {
  min-width: 0;
}

/* ---------- Mobile menu toggle (hamburger) ---------- */
.cc-mobile-menu-toggle {
  display: none; /* enabled at mobile breakpoints */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  cursor: pointer;
}
.cc-mobile-menu-toggle:active { transform: scale(0.98); }

.cc-burger { display: inline-flex; width: 20px; height: 16px; }
.cc-burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cc-burger > span {
  display: block;
  width: 20px;
  height: 2px;
  background: #1f2d3d;
  border-radius: 2px;
  margin: 0;
}

.cc-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  /* Keep below the drawer; overlay covers the rest of the page */
  z-index: 9000;
}

/* ---------- Tablet (<= 991px) additions ---------- */
@media (max-width: 991px)
{
  html, body { overflow-x: hidden; }
  .site-wrapper { overflow-x: hidden; }
  .main-block { margin-right: 0 !important; }
  .right-block { display: none !important; }

  /* Prevent common overflow from flex/grid children */
  .main-block, .main-content, .dash-section, .dash-block, .dash-line, .dash-stats, .dash-details { max-width: 100% !important; min-width: 0 !important; }
  .dash-section *, .dash-block *, .dash-line *, .dash-stats *, .dash-details * { min-width: 0; }

  /* Collapse inline grids used on complaint pages (inline styles win unless we use !important) */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display:grid"] { max-width: 100% !important; }

  /* Long tokens should never force horizontal overflow */
  .dash-section, .dash-block, .dash-line { overflow-wrap: anywhere; word-break: break-word; }

  /* KPI grids generally become 2 columns */
  .kpi-grid, .w-layout-grid.kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- Mobile (<= 767px) ---------- */
@media (max-width: 767px) {
  /* Show hamburger */
  .cc-mobile-menu-toggle { display: inline-flex; }

  /* Off-canvas left menu */
  .left-block {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    width: 280px !important;
    max-width: 86vw;
    z-index: 10000;
    transform: translateX(-105%);
    transition: transform 180ms ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    background: #fff;
    opacity: 1;
  }
  body.cc-menu-open .left-block { transform: translateX(0); }

  /* Overlay should not sit on top of the drawer; start after drawer width */
  body.cc-menu-open .cc-menu-overlay {
    display: block;
    left: 280px;
  }

  /* Ensure the hamburger stays clickable above overlay */
  .cc-mobile-menu-toggle { position: relative; z-index: 10001; }

  /* Make left nav vertical again inside the drawer */
  .nav-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .nav-link { width: 100%; }

  /* Ensure content uses full width behind the drawer */
  .site-wrapper { flex-direction: column; }
  .main-block, .right-block { width: 100% !important; }
  .main-block{ margin-right: 0 !important; }
  .right-block{ display: none !important; }


  /* KPI grids become 1 column */
  .kpi-grid, .w-layout-grid.kpi-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reduce padding/gutters commonly used on pages */
  .main-block { padding-left: 14px !important; padding-right: 14px !important; }
  .dash-section { padding-left: 0 !important; padding-right: 0 !important; }

  /* Tables: keep scrolling behavior from tablet rules; don't globally force wrapping */

  /* ------- Complaint / Case detail pages (staff) ------- */
  /* These pages use inline grid styles; override to stack cleanly on phones */
  .dash-section > div[style*="grid-template-columns: 1.2fr 0.8fr"],
  .dash-section > div[style*="grid-template-columns:1.2fr 0.8fr"],
  .dash-section > div[style*="grid-template-columns: 1.2fr 0.8fr;"] {
    grid-template-columns: 1fr !important;
  }
  .dash-section div[style*="grid-template-columns: repeat(2"],
  .dash-section div[style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  /* More robust: any inline grid inside dash-section should stack on phones */
  .dash-section [style*="display:grid"][style*="grid-template-columns"],
  .dash-section [style*="display: grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Prevent long fields from overflowing */
  .dash-section [data-cc-field],
  .dash-section strong,
  .dash-section span,
  .dash-section div {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ------- Consumer view-complaint pages ------- */
  /* Keep the "simulated table" readable: allow horizontal scroll instead of squeezing columns */
  .submission-data .table-wrap,
  .submission-data .tablewrap,
  .submission-data .cc-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .submission-data table.main-table {
    width: max-content;
    min-width: 100%;
  }
  .submission-data table.main-table th,
  .submission-data table.main-table td {
    white-space: nowrap;
    vertical-align: top;
  }
  /* Let long narrative values wrap if they exist */
  .submission-data .table-txt,
  .submission-data .table-txt.para {
    white-space: normal;
  }

  /* Meta summary grid: keep it readable */
  .cc-case-meta-list {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Small phones (<= 479px) ---------- */
@media (max-width: 479px) {
  .cc-mobile-menu-toggle { border-radius: 12px; }
  .left-block { width: 270px !important; }
  .role-badge { white-space: normal; }
}


/* ------------------------------
   Complaint pages: stop global overflow on tablet/mobile
   (Webflow desktop layout keeps space for right rail)
--------------------------------*/
@media (max-width: 991px){
  /* Ensure no stray layout gutter causes whole-page horizontal scroll */
  .main-block{ margin-right: 0 !important; }
  .right-block{ display: none !important; }

  /* Defensive: prevent any section/cards from exceeding viewport */
  .main-block, .main-block *{ box-sizing: border-box; }
  .main-block{ max-width: 100% !important; }
  .dash-section, .dash-section *{ max-width: 100%; }

  /* Any grid with explicit columns should stack on small screens */
  .dash-section [style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  .dash-section [style*="grid-template-rows"]{ grid-template-rows: auto !important; }
  .dash-section [style*="display: grid"]{ width: 100% !important; }

  /* Long tokens (IDs, URLs, emails) shouldn't force overflow */
  .dash-section, .dash-section *{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Media should never overflow */
  img, svg, canvas, video{ max-width: 100% !important; height: auto !important; }
}

/* ------------------------------
   Horizontal scroll for "table-like" blocks (tablet/mobile only)
--------------------------------*/
@media (max-width: 991px){
  /* Generic scroll wrapper (added by JS or applied to existing wrappers) */
  .cc-table-scroll,
  .cc-table-wrap,
  .table-wrap,
  .tablewrap{
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Real tables: keep natural width so columns don't squeeze */
  .cc-table-scroll > table,
  .cc-table-wrap > table,
  .table-wrap > table,
  .tablewrap > table{
    width: max-content !important;
    min-width: 100%;
    border-collapse: collapse;
  }

  /* Cells: don't wrap by default to preserve column readability */
  .cc-table-scroll td, .cc-table-scroll th,
  .cc-table-wrap td, .cc-table-wrap th,
  .table-wrap td, .table-wrap th,
  .tablewrap td, .tablewrap th{
    white-space: nowrap;
  }

  /* Explicit narrative cells can wrap */
  .cc-table-scroll .table-txt,
  .cc-table-wrap .table-txt,
  .table-wrap .table-txt,
  .tablewrap .table-txt{
    white-space: normal;
  }
}



/* === Consumer view-complaint pages: improve mobile/tablet layout === */
@media (max-width: 991px){
  /* Webflow inline extracts sometimes set main-block overflow-x:hidden; allow inner scroll areas to show */
  .main-block{ overflow-x: visible !important; }

  /* The consumer "submission-data" case details grid should stack, not keep a 3-col grid on small screens */
  .submission-data .w-layout-grid.form-grid._3{
    display: block !important;
  }
  .submission-data .w-layout-grid.form-grid._3 > *{
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px;
  }

  /* Ensure table-like blocks scroll horizontally instead of squeezing */
  .submission-data .table-wrap{
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .submission-data .table-wrap > table{
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
  }
  .submission-data .table-wrap td,
  .submission-data .table-wrap th{
    white-space: nowrap;
  }
  /* Allow long narrative text inside .para to wrap normally */
  .submission-data .table-wrap .para,
  .submission-data .table-wrap .table-txt.para{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}