/* ============================================
   BridgeWork - Responsive Layer
   Loaded LAST so it can correct the fixed-width
   assumptions baked into the earlier stylesheets.

   Breakpoints follow Bootstrap 5:
     < 576px   xs (phone)
     < 768px   sm
     < 992px   md/tablet  -> sidebar becomes an off-canvas drawer
     >= 992px  lg desktop -> sidebar is docked (untouched here)

   Nothing in this file applies at >= 992px, so the desktop
   layout is byte-for-byte what it was before.
   ============================================ */

/* ============================================
   1. Page shell
   ============================================ */

/* Belt-and-suspenders against page-level horizontal scroll: on mobile
   Safari, one overflowing flex/grid child can widen the whole layout
   viewport (fixed-position elements included) even past `overflow-x:
   hidden` on body alone — html needs it too. This clips the symptom;
   the rules below fix the actual offenders so nothing gets cut off. */
html {
  overflow-x: hidden;
}

@media (max-width: 991.98px) {
  /* The drawer itself is handled in components/_sidebar.html (that <style>
     block sits in the body and would otherwise win the cascade).
     Here we only clean up what the shell leaves behind. */

  /* No horizontal page scroll: wide content gets its own scroller below. */
  body.app-body {
    overflow-x: hidden;
  }

  /* The footer is offset for a docked sidebar; on mobile there isn't one.
     Matches the specificity of the .sb-sidenav-toggled rule it corrects. */
  .app-footer,
  body.sb-sidenav-toggled .app-footer {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .app-footer .row > [class^="col-"] {
    text-align: center !important;
  }

  #page-content-wrapper {
    padding: 1.25rem 1rem;
  }

  /* Bootstrap's .p-4 on the same element */
  main#page-content-wrapper.p-4 {
    padding: 1.25rem 1rem !important;
  }
}

@media (max-width: 575.98px) {
  #page-content-wrapper,
  main#page-content-wrapper.p-4 {
    padding: 1rem 0.75rem !important;
  }
}

/* ============================================
   2. Navbar
   ============================================ */

@media (max-width: 767.98px) {
  /* brand-overrides.css pulls this 100px past the right edge, which on a
     phone lands off-screen. Anchor it and let it use the width available. */
  .notification-dropdown {
    width: calc(100vw - 1rem) !important;
    max-width: 340px !important;
    right: auto !important;
  }

  .navbar-brand img {
    height: 28px;
  }
}

/* ------------------------------------------------------------------
   Navbar dropdowns must FLOAT on mobile (bell + user menu)
   Bootstrap makes `.navbar-nav .dropdown-menu` position:static below the
   expand breakpoint (lg = 992px). Our navbar right-side group is a flex-row,
   so a static (in-flow) open menu becomes a flex item and shoves the bell /
   avatar icons sideways every time one opens. Float them (absolute) and
   anchor to the right edge of their toggle so they stay within the viewport.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .navbar .navbar-nav > .nav-item.dropdown {
    position: relative;
  }
  .navbar .navbar-nav .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
  }
  /* Keep the notifications panel inside the screen width */
  .navbar .navbar-nav .notification-dropdown {
    width: min(340px, calc(100vw - 1rem)) !important;
    max-width: 340px !important;
  }
}


/* ============================================
   3. Page headers
   Most pages use a `*-page-header` block whose inner row is a
   space-between flex that cannot fit on a phone. A few pages name it
   differently (monday-board-header, audit-header, monday-report-header) —
   listed explicitly since "*-header" alone is too broad (it would also
   catch modal-header, column-header and other component headers that
   already handle mobile fine on their own).
   ============================================ */

@media (max-width: 767.98px) {
  /* The header element is itself the space-between flex row on most pages;
     on a few it wraps one. flex-wrap/gap are no-ops on non-flex elements,
     so covering both is safe. */
  [class*="page-header"],
  [class*="page-header"] > .d-flex.justify-content-between,
  [class*="page-header"] > div > .d-flex.justify-content-between,
  [class*="page-header"] .header-actions,
  .monday-board-header,
  .audit-header,
  .monday-report-header,
  .week-summary {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  /* time_entries.html's ".monday-time-header" is the worst offender found
     on that page: a title plus its ENTIRE filter toolbar (search box, two
     date inputs, a user select, Filtrar/Limpiar buttons and the active
     filter chips) squeezed into one no-wrap space-between row. Wrapping the
     header isn't enough on its own — .tasks-toolbar (a flex item here) has
     to drop to its own full-width line first so it has room to wrap its
     own controls onto as many lines as it needs. */
  .monday-time-header {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .monday-time-header .tasks-toolbar {
    width: 100% !important;
  }

  /* reports.html: project selector (select + Mostrar + CSV + XLSX buttons)
     and a few label/value flex rows with no flex-wrap of their own. */
  .project-selector-bar,
  .project-selector-form,
  .budget-stats,
  .user-hours-item,
  .monday-progress-label {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* A long user email (.user-hours-item) needs the flex item itself
     allowed to shrink below its content size — flex items default to
     min-width: auto, which is what pushes the hours badge off-screen
     instead of wrapping. */
  .user-hours-item .user-cell {
    min-width: 0;
  }

  .user-hours-item .email {
    overflow-wrap: anywhere;
  }

  [class*="page-header"] h1,
  .monday-board-title h1 {
    font-size: 1.4rem !important;
  }

  [class*="page-header"] h2 {
    font-size: 1.25rem !important;
  }

  /* The actions cluster (view-switcher, "Plantillas", "Nuevo desde
     Template"...) forces its own line so it doesn't fight the title for
     space, and wraps internally too in case it still doesn't fit. */
  .monday-board-actions {
    flex-wrap: wrap !important;
    width: 100%;
  }

  .view-switcher {
    flex-wrap: wrap !important;
  }

  /* board.html's per-project header: title + up to 6 action buttons
     (Nueva Tarea, Riesgos, Importar Excel...) plus a progress bar, all in
     one no-wrap space-between row. kanban.html's per-project toolbar has
     the same title-left/nav-right shape and is missing flex-wrap too.
     (board.html's own .board-toolbar and gantt.html's .gantt-toolbar
     already wrap — only these two were missed.) */
  .board-header,
  .kanban-toolbar {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  /* Same no-wrap space-between shape, found across a broader sweep of every
     template's inline <style> block: a title/label on one side and one or
     more buttons on the other, sized for desktop. */
  .detail-card-header,       /* task_detail.html — every card header (Registros
                                 de Tiempo, Comentarios, Archivos...) */
  .attachments-header,       /* task_edit.html */
  .area-header-bar,          /* department_tasks_report.html — area name can
                                 run long ("Gerente Comercial / Técnico") */
  .page-title-bar,           /* department_tasks_report.html — title + Excel/
                                 PDF/Volver buttons */
  .pagination-wrapper,       /* audit_log.html, clients.html */
  .project-card-footer {     /* projects.html — "Tarjetas" view */
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* This selector is more specific than Bootstrap's own .modal-footer (which
     already wraps by default) and had dropped that wrap while switching to
     space-between — restore it so multi-button footers don't clip. */
  .task-modal .modal-footer {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
}

/* ============================================
   4. Toolbars and filter bars
   ============================================ */

@media (max-width: 991.98px) {
  .tasks-toolbar,
  .filter-buttons,
  .time-filter-chips,
  .inline-form-fields,
  .btn-toolbar {
    flex-wrap: wrap !important;
    height: auto !important;
  }

  .search-box input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .search-box {
    flex: 1 1 100%;
  }

  /* tasks.html stats bar (En Progreso / En Revisión / Completadas / Backlog
     counts) — no flex-wrap, 24px gaps between 4 items. */
  .tasks-stats {
    flex-wrap: wrap !important;
    gap: 0.75rem 1.25rem !important;
  }

  /* tasks.html's "Tareas · N tareas · progress bar" strip above the grid:
     fixed height:64px in board-shared.css, no flex-wrap — title, badge, a
     220px progress bar and its percentage text all fighting for one line. */
  .project-board-header {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 64px;
    gap: 0.5rem !important;
  }

  .project-board-header .project-progress {
    width: 100% !important;
  }
}

@media (max-width: 575.98px) {
  /* Selects/inputs pinned to a desktop width inside filter rows */
  .form-select-sm[style*="min-width"],
  .form-control-sm[style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ============================================
   5. Tables
   Several tables are rendered bare (no .table-responsive wrapper) inside a
   custom container. Turn those containers into horizontal scrollers instead
   of restructuring the markup, so table-dependent JS keeps working.
   ============================================ */

@media (max-width: 991.98px) {
  /* Dedicated table wrappers: safe to turn into scrollers.
     .monday-clients-table and .audit-table are NOT here — see sections 5c
     and 5e below, they get the same table-to-cards treatment as
     .monday-board-row instead: a people list (avatar + name first) and a
     record log (one entry's worth of fields per row, one field — Detalles
     — often much taller than the rest) both read better as cards than as
     a horizontally-scrolled table. The audit table in particular had a
     concrete bug from staying a scroll-table: the Detalles cell's height
     (its content can run several lines) sets the whole <tr>'s height even
     while scrolled away, leaving the visible Fecha/Acción/Entidad columns
     floating in a lot of dead vertical space per row. */
  .monday-time-table,
  .monday-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* These tables set `width: 100%` themselves (same selector, defined later
     in each page's own <style> block — e.g. .monday-time-table table at
     time_entries.html:107). For a <table>, an explicit `width` is NOT just
     a suggestion the way it is for other boxes: per the CSS 2.1 table
     sizing algorithm, once `width` is anything other than `auto`, the
     browser treats that as the table's real width and shrinks cell content
     to fit inside it — `min-width` does not reliably act as a floor against
     that on a <table> element the way it would on a div, and did not here
     (confirmed on-device: task titles were rendering 3-4 characters per
     line instead of the row scrolling, even with min-width:720px present).
     The fix is to cancel `width: 100%` back to `auto` so the table falls
     back to its normal content-driven sizing — the same behavior an
     unstyled <table> has by default — and only THEN does min-width (as a
     floor) and white-space: nowrap (so cells don't wrap at all) reliably
     push it past the container and into its own horizontal scrollbar. */
  .monday-time-table table,
  .monday-table,
  .user-table,
  .project-summary-table {
    width: auto !important;
    min-width: 720px !important;
  }

  .monday-time-table,
  .monday-table-container,
  .user-table,
  .project-summary-table {
    white-space: nowrap !important;
  }

  /* Cells that deliberately ellipsize instead of scrolling (e.g.
     .description-cell) already set white-space: nowrap themselves — this
     inherited value doesn't change their behavior, just everything else
     that used to silently wrap. */

  /* Tables sitting directly in a generic card (task detail) scroll on their
     own — making the card scroll would clip the dropdown in its header. */
  .time-table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Bootstrap's own wrapper, where it is already used */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   5b. Task/board grid rows → stacked cards
   .monday-board-row/-header (tasks.html and board.html's table view) is a
   9-column CSS grid sized for desktop: checkbox, WBS, title, project,
   status, priority, due date, assignee, hours. board-shared.css's own
   mobile rule (loaded AFTER this file — templates inject it via
   {% block head %}, which sits below this stylesheet in base.html, so it
   would win ties without !important here) only narrows the grid to 4
   tracks without removing the other 5 cells. Those keep existing in the
   DOM, so they spill into grid columns past the visible width and vanish
   behind `.monday-board { overflow: hidden }` — status, priority, due
   date, assignee and hours become invisible AND unreachable on a phone,
   not just ugly. Turn each row into a wrapping card instead: every cell
   keeps its content, just flows onto as many lines as it needs. Column
   headers stop meaning anything once cells wrap, so hide them — the usual
   table-to-cards pattern.
   ============================================ */

@media (max-width: 767.98px) {
  .monday-board-header {
    display: none !important;
  }

  .monday-board-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 10px !important;
    padding: 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .monday-board-row > div {
    padding: 2px 0 !important;
  }

  /* Title is the primary identifier — give it the full line so it never
     fights the checkbox/WBS badge that precede it in the DOM for space. */
  .monday-board-row .task-title-cell {
    flex: 1 1 100% !important;
  }

  /* board-shared.css's own mobile rule hides this; it's useful context on
     a card, so keep it, just let it wrap instead of clipping to one line. */
  .monday-board-row .task-description {
    display: block !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .monday-board-row .hours-cell {
    margin-left: auto;
    text-align: right;
  }

  /* board.html's own toolbar/table wrapper needs the same scroll safety
     net as the dedicated table containers above, for anything on that page
     not covered by this card conversion (e.g. the header cell above the
     table before JS renders rows). */
  .monday-board {
    overflow-x: hidden;
  }
}

/* ============================================
   5c. Clients table → stacked cards
   .monday-clients-table (clients.html) is a 7-column table (avatar+name,
   auth, status, project count, per-status breakdown, pending approvals,
   actions). Unlike the dense data grids above, this is fundamentally a
   people list — avatar and name are what someone scans for — so cards read
   far better here than a horizontally-scrolled table would. Same technique
   as .monday-board-row: hide the header, let the row wrap, give the name
   its own full-width line.
   ============================================ */

@media (max-width: 767.98px) {
  .monday-clients-table thead {
    display: none;
  }

  .monday-clients-table,
  .monday-clients-table table,
  .monday-clients-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .monday-clients-table tr.client-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 10px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--monday-border, #e6e8eb);
  }

  .monday-clients-table tr.client-row:last-child {
    border-bottom: none;
  }

  /* Each column is a <td> with no border of its own in card mode — the row
     above carries the separator instead, or every cell would show a partial
     underline instead of one clean line under the whole card. */
  .monday-clients-table td {
    display: block !important;
    padding: 0 !important;
    border-bottom: none !important;
  }

  /* Name + avatar is the primary identifier — full line, like the task
     title in .monday-board-row above. */
  .monday-clients-table td:first-child {
    flex: 1 1 100% !important;
  }

  /* Empty-state row (colspan="7" — meaningless once the table isn't a grid
     layout, but harmless left as the row's only child). */
  #emptyRow {
    display: block !important;
    border-bottom: none !important;
  }
}

/* ============================================
   5d. Risks table → stacked cards
   risks.html is a real Bootstrap <table> (already inside .table-responsive,
   unlike the earlier custom grids) with a title column pinned to
   `max-width: 260px` inline and NO nowrap — so on mobile it neither
   scrolled nor stayed compact: the title wrapped to 5-8 short lines while
   every other column (badges, short text) stayed at its natural width
   beside it, making each row tall and lopsided instead of either a clean
   scroll or a clean card. Same conversion as the two sections above.
   ============================================ */

@media (max-width: 767.98px) {
  .risk-table-card table thead {
    display: none;
  }

  .risk-table-card,
  .risk-table-card .table-responsive,
  .risk-table-card table,
  .risk-table-card tbody {
    display: block !important;
    width: 100% !important;
  }

  .risk-table-card table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 6px 10px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #e2e8f0;
  }

  .risk-table-card table tr:last-child {
    border-bottom: none;
  }

  .risk-table-card table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    /* Neutralize the inline max-width:260px (title) / max-width:200px
       (mitigation plan) set in the template for the desktop table layout. */
    max-width: none !important;
  }

  .risk-table-card table td:first-child {
    flex: 1 1 100% !important;
  }

  /* Description (under the title) and the mitigation plan cell both
     ellipsis-truncate to one line for the desktop table row height budget.
     A card has room to spare — let both wrap and show in full instead of
     clipping. */
  .risk-table-card table td [style*="text-overflow"] {
    max-width: 100% !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }
}

/* ============================================
   5e. Audit log table → stacked cards
   audit_log.html's own <style> already sets .audit-table { width: 100% }
   (the same table-squeeze trap fixed elsewhere), but the more visible
   problem here is structural: Detalles (the 4th column) can run several
   lines of changed-field text while Fecha/Acción/Entidad are one line
   each — in a table layout every cell in a row shares the row's height,
   so scrolled to the visible columns, most of each row is dead space
   under a short badge. Cards, with Detalles given its own full-width
   line, use that space instead of leaving it empty.
   ============================================ */

@media (max-width: 767.98px) {
  .audit-table thead {
    display: none;
  }

  .audit-table-container,
  .audit-table,
  .audit-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .audit-table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 6px 10px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .audit-table tr:last-child {
    border-bottom: none;
  }

  .audit-table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Detalles (4th column, index 4) is the one cell whose content routinely
     runs several lines — give it the full card width on its own line
     instead of squeezing it in next to Fecha/Acción/Entidad. */
  .audit-table td:nth-child(4) {
    flex: 1 1 100% !important;
  }

  .audit-table .changes-preview {
    max-width: 100% !important;
  }
}

/* ============================================
   6. Admin settings
   The setting rows are label-left / control-right flex rows with control
   min-widths up to 480px, set inline on the element.
   ============================================ */

@media (max-width: 767.98px) {
  .setting-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem;
  }

  .setting-control,
  .setting-control[style] {
    min-width: 0 !important;
    width: 100% !important;
    text-align: left !important;
  }

  .settings-section-body {
    padding: 1rem !important;
  }

  /* Bootstrap's .pagination is a flex row with no flex-wrap by default; a
     page with several numbered links (audit_log.html, clients.html,
     time_entries.html) can run past the viewport. */
  .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 0.4rem;
  }
}

/* ============================================
   7. Boards, kanban and Gantt
   These are inherently wide; make sure they scroll rather than overflow
   the page, and that the surrounding chrome collapses.
   ============================================ */

@media (max-width: 991.98px) {
  .kanban-container,
  .gantt-container,
  .heatmap-container,
  .monday-board {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-column {
    min-width: 260px !important;
    max-width: 260px !important;
  }
}

/* ============================================
   8. Cards, stats and charts
   ============================================ */

@media (max-width: 767.98px) {
  .card-body {
    padding: 1rem !important;
  }

  .card-header {
    padding: 0.75rem 1rem !important;
  }

  .card-header.d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .stat-card .display-6 {
    font-size: 1.75rem !important;
  }

  /* Chart wrappers carry an inline desktop height; cap it on phones. Chart.js
     is responsive and re-measures its container, so this is safe. Bare
     canvases are left alone — Chart.js owns their sizing. */
  .chart-container {
    height: 240px !important;
  }
}

/* ============================================
   9. Modals
   ============================================ */

@media (max-width: 575.98px) {
  .modal-dialog:not(.modal-fullscreen) {
    margin: 0.5rem !important;
  }

  .modal-lg,
  .modal-xl {
    max-width: calc(100% - 1rem) !important;
  }

  .modal-body {
    padding: 1rem !important;
  }

  .modal-footer {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
}

/* ============================================
   10. Long content safety
   ============================================ */

@media (max-width: 767.98px) {
  /* Long titles, emails and URLs are a common source of overflow. */
  .text-break-mobile,
  .dropdown-header small,
  .task-title,
  .project-title {
    overflow-wrap: anywhere;
  }

  /* department_tasks_report.html: real cause of the clipped project chip
     is .task-meta itself — it has flex-wrap:wrap (so its own badges should
     wrap) AND flex-shrink:0 (so, as a flex item of .task-item, it refuses
     to ever be sized narrower than the sum of all its children laid out on
     ONE line). Those two contradict: flex-wrap:wrap only kicks in once a
     container's imposed width is narrower than its content, and
     flex-shrink:0 is exactly what stops that imposed width from ever
     happening. .task-meta ends up rendered at ~560px — wider than the
     phone screen — and .area-card's own overflow:hidden clips it right at
     the card edge with no ellipsis, no scrollbar, nothing to show data was
     cut. Letting it shrink (and un-flooring it with min-width:0, since
     flex items default to min-width:auto regardless of flex-shrink) is
     what actually lets its own flex-wrap take effect. white-space:normal
     on the two nowrap children is additional insurance once the row is
     narrow enough that even a single badge might not fit. */
  .task-meta {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .project-chip,
  .due-date {
    white-space: normal !important;
  }

  /* Code/pre blocks in the AI chat and changelog */
  pre {
    overflow-x: auto !important;
    max-width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}