/**
 * fyn-responsive.css
 * ──────────────────
 * Responsive overlay for the FYN Ticket UI.
 *
 * Strategy: load AFTER fyn-theme.css and override systemic responsive
 * issues without touching individual view files. Targets:
 *   - Topbar: shrink/hide elements progressively at narrow widths
 *   - Tables: ensure all table wrappers scroll horizontally on mobile
 *   - Grids: collapse multi-column grids below tablet breakpoints
 *   - Modals/panels: keep within the viewport
 *   - Forms: single-column on phones
 *   - Tap targets: ensure buttons/icons are at least 40px on touch
 *
 * Breakpoints (max-width):
 *   1280  large laptop
 *   1024  small laptop / tablet landscape
 *   768   tablet portrait
 *   640   small tablet / large phone
 *   480   phone
 *   360   small phone
 */

/* ════════════════════════════════════════════════════════════════════
 * GLOBAL — never let the page scroll horizontally
 * ════════════════════════════════════════════════════════════════════ */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* Tables that have min-width should scroll inside their wrapper, never break the page */
.fyn-ticket-wrap,
.tl-table-wrap,
.dataTables_wrapper,
.table-responsive,
.fyn-form-card .table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* Ensure table wrapper doesn't clip — the original `.fyn-ticket-wrap` had
   overflow:hidden, which clipped the 900px-wide table on narrow screens. */
.fyn-ticket-wrap { overflow: visible !important; }
.fyn-ticket-wrap > .table-scroll,
.fyn-ticket-wrap > .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fyn-ticket-table { -webkit-overflow-scrolling: touch; }

/* DataTables scroll wrapper */
.dataTables_wrapper > .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* ════════════════════════════════════════════════════════════════════
 * 1280px — large laptop
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .fyn-page { padding: 18px 20px; }
  .fyn-topbar { padding: 0 18px; }
}

/* ════════════════════════════════════════════════════════════════════
 * 1024px — small laptop / tablet landscape
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Modules: 2 columns up to here */
  .fyn-modules { grid-template-columns: repeat(2, 1fr) !important; }

  /* Detail grids (ticket detail) collapse to 1fr 1fr is fine, leave */

  /* Inline 1fr 1fr 300px patterns: collapse the 300px sidebar onto next row */
  .dash-analytics-grid { grid-template-columns: 1fr !important; }

  /* Side panels (slide-in) become full width */
  #tlPan, #fynTrackerPanel { width: min(560px, 100vw) !important; max-width: 100vw !important; }
}

/* ════════════════════════════════════════════════════════════════════
 * 768px — tablet portrait
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Topbar: shrink padding, hide user role label */
  .fyn-topbar { padding: 0 12px; height: 56px; gap: 8px; }
  .fyn-logo-text { font-size: 15px; }
  .fyn-user-pill { padding: 3px 8px 3px 3px; }
  .fyn-user-name { font-size: 12px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fyn-user-role-txt { display: none; }
  .fyn-icon-btn { width: 34px; height: 34px; }

  /* Search bar: keep visible but flexible */
  .fyn-search-wrap { max-width: none; flex: 1 1 120px; }

  /* Page padding */
  .fyn-page { padding: 14px; }

  /* Modules: 1 column */
  .fyn-modules { grid-template-columns: 1fr !important; }

  /* Stats grid: 1 column at this point - was 3 cols repeat */
  .fyn-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-item + .stat-item { border-left: none; }
  .stat-item:nth-child(2) { border-left: 1px solid var(--fyn-border); }
  .stat-item:nth-child(3) { border-top: 1px solid var(--fyn-border); }

  /* Form rows */
  .fyn-form-row, .fyn-form-row-3 { grid-template-columns: 1fr !important; }
  .fyn-form-body { padding: 18px 16px; gap: 14px; }
  .fyn-form-head, .fyn-form-footer { padding: 14px 16px; }

  /* Detail grid */
  .fyn-detail-grid { grid-template-columns: 1fr !important; }

  /* Notif/settings/user panels: cap width */
  .fyn-notif-panel { width: min(320px, calc(100vw - 24px)); right: -8px; }
  .fyn-settings-panel { width: min(260px, calc(100vw - 24px)); right: -8px; }
  .fyn-user-dropdown { width: min(220px, calc(100vw - 24px)); right: -8px; }

  /* Toolbar: stack filter row vertically */
  .fyn-ticket-toolbar { padding: 12px 14px; gap: 8px; }
  .fyn-filter-group { width: 100%; }
  .fyn-filter-btn { padding: 5px 11px; font-size: 11.5px; }

  /* Modals: take more of the viewport */
  .fyn-modal-card { width: calc(100% - 24px); max-width: 100%; padding: 22px 20px; max-height: 90vh; }

  /* Toast: keep on screen */
  .fyn-toast { right: 12px; left: 12px; max-width: calc(100% - 24px); }

  /* Buttons in form footer: full width if cramped */
  .fyn-form-footer { flex-direction: row; flex-wrap: wrap; }
  .fyn-form-footer .fyn-btn-cancel,
  .fyn-form-footer .fyn-btn-submit { flex: 1 1 auto; min-width: 120px; }

  /* Tables: ensure wrap parent allows horizontal scroll */
  .fyn-ticket-table { font-size: 12px; }
  .fyn-ticket-table th, .fyn-ticket-table td { padding: 10px 9px; }

  /* Dashboard KPI bar */
  .dash-kpi-bar { grid-template-columns: 1fr 1fr !important; }

  /* Inline sticky/fixed widths in home dashboard analytics tracker */
  #fynTrackerPanel { width: 100vw !important; max-width: 100vw !important; }

  /* Aside panels in side drawers stack vertically */
  .tl-pan-aside { width: 100% !important; min-height: 0 !important; }

  /* SLA management page header rows */
  .slm-toolbar, .slm-head-row { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
 * 640px — large phone / small tablet
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Topbar: hide settings icon — accessible via user dropdown if needed */
  .fyn-topbar { gap: 6px; }
  .fyn-logo-text { font-size: 14px; }

  /* User pill: hide name text completely on smallest, keep just avatar */
  .fyn-user-name { max-width: 60px; }

  /* Stats grid: 1 column */
  .fyn-stats-grid { grid-template-columns: 1fr !important; }
  .stat-item + .stat-item { border-left: none !important; border-top: 1px solid var(--fyn-border); }

  /* Larger tap targets on icons */
  .fyn-icon-btn { width: 38px; height: 38px; }

  /* Stat values shrink */
  .stat-value { font-size: 24px; }

  /* Module headers stack their action button below */
  .fyn-module-header { flex-wrap: wrap; gap: 8px; }
  .fyn-view-link { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════
 * 480px — phone
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .fyn-page { padding: 10px; }
  .fyn-topbar { padding: 0 8px; height: 52px; }

  /* Hide logo text — keep just the icon to save space */
  .fyn-logo-text { display: none; }

  /* User pill: avatar only, no name, no chevron */
  .fyn-user-name, .fyn-user-role-txt, .fyn-chevron { display: none; }
  .fyn-user-pill { padding: 2px; border: none; background: transparent; }

  /* Settings icon hidden — least-used in topbar */
  #fynSettingsWrap { display: none; }

  /* Notif panel and user dropdown anchor to right edge of screen */
  .fyn-notif-panel, .fyn-user-dropdown, .fyn-settings-panel {
    position: fixed !important;
    top: 56px !important;
    right: 4px !important;
    left: auto !important;
    width: calc(100vw - 8px) !important;
    max-width: 360px;
  }

  /* Form/modal buttons wrap and stretch */
  .fyn-form-footer { flex-direction: column-reverse; }
  .fyn-form-footer .fyn-btn-cancel,
  .fyn-form-footer .fyn-btn-submit { width: 100%; padding: 11px 16px; }

  /* Modal cards take full width */
  .fyn-modal-card { padding: 18px 14px; border-radius: 12px; }

  /* Modal heading shrinks */
  .fyn-modal-title { font-size: 16px; }

  /* Form labels compact */
  .fyn-form-group label { font-size: 10.5px; }
  .fyn-form-ctrl { padding: 9px 11px; font-size: 13px; }

  /* Ticket table: tighter cells */
  .fyn-ticket-table th, .fyn-ticket-table td { padding: 8px 7px; font-size: 11.5px; }

  /* Filter buttons even tighter */
  .fyn-filter-btn { padding: 5px 9px; font-size: 11px; }

  /* Dashboard KPI: single column */
  .dash-kpi-bar { grid-template-columns: 1fr !important; }

  /* Toast spans most of width */
  .fyn-toast { top: 60px; padding: 10px 14px; font-size: 12px; }

  /* DataTables filter and length on their own lines */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter { float: none; text-align: left; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
 * 360px — small phone (older Android, iPhone SE 1st gen)
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .fyn-page { padding: 8px; }
  .fyn-topbar { padding: 0 6px; }

  /* Notif and panels even more compact */
  .fyn-notif-panel { padding-bottom: 0; }
  .fyn-notif-item { padding: 10px 14px 10px 22px; }
  .fyn-notif-icon { width: 28px; height: 28px; font-size: 12px; }
  .fyn-notif-title { font-size: 11.5px; }
  .fyn-notif-desc { font-size: 11px; }

  /* Forms */
  .fyn-modal-card { padding: 14px 12px; }
}

/* ════════════════════════════════════════════════════════════════════
 * Inline grid styles in views — these can't be re-targeted by media
 * query alone because they use `style="grid-template-columns:..."`.
 * The pragmatic option: use attribute selectors at narrow widths.
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Any inline grid with 3 equal columns collapses to 1 on tablets */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  /* Any inline grid with 2 equal columns collapses to 1 on phones */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Any inline grid with a fixed 300px column collapses to 1 column */
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 300px"] { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════════
 * Tap target accessibility — touch devices need 40px+ targets
 * ════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Anything that's a click handler should be at least 36px */
  .fyn-filter-btn, .fyn-btn-cancel, .fyn-btn-submit,
  .btn, button:not(.fyn-modal-close):not(.fyn-toggle) { min-height: 36px; }

  /* Menu items in dropdowns */
  .fyn-ud-item { padding: 12px 14px; }

  /* Better for thumbs */
  .fyn-notif-item { padding: 14px 16px 14px 24px; }
}

/* ════════════════════════════════════════════════════════════════════
 * Print — make ticket detail printable cleanly
 * ════════════════════════════════════════════════════════════════════ */
@media print {
  .fyn-topbar, .fyn-nav, .fyn-toast, .fyn-modal-overlay,
  #tlPan, #fynTrackerPanel, .fyn-icon-btn, .fyn-filter-group,
  .fyn-btn-cancel, .fyn-btn-submit, .fyn-form-footer { display: none !important; }
  body { background: #fff; }
  .fyn-ticket-table { min-width: 0 !important; }
  .fyn-ticket-table th, .fyn-ticket-table td { font-size: 10pt; padding: 6px; }
}

/* ─────────────────────────────────────────────────────────────────
   DASHBOARD CARDS — MOBILE COMPACT MODE v2
   More aggressive than v1: keeps KPIs in a 2-col grid down to 380px
   (was 1-col at 640px), drops padding harder, hides redundant
   sub-labels on the smallest screens.
   ───────────────────────────────────────────────────────────────── */

/* Tablet ≤ 1024px — modest tightening */
@media (max-width: 1024px) {
  .dash-kpi { padding: 13px 13px !important; gap: 10px !important; }
  .dash-kpi-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
  .dash-kpi-icon svg { width: 17px !important; height: 17px !important; }
  .dash-kpi-val { font-size: 21px !important; }
  .dash-kpi-bar { gap: 10px !important; }

  .as-card, .cl-card, .sla-tracker { padding: 14px !important; margin-bottom: 11px !important; }
  .sla-bucket { padding: 9px 11px !important; }
  .sla-bucket-num { font-size: 21px !important; }
}

/* Phone ≤ 640px — keep KPIs 2-col, NOT 1-col (much better density) */
@media (max-width: 640px) {
  .dash-kpi-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  .dash-kpi {
    padding: 8px 9px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }
  .dash-kpi-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
  }
  .dash-kpi-icon svg { width: 14px !important; height: 14px !important; stroke-width: 2.2 !important; }
  .dash-kpi-val { font-size: 17px !important; line-height: 1 !important; }
  .dash-kpi-lbl { font-size: 11px !important; margin-top: 2px !important; font-weight: 700 !important; line-height: 1.15 !important; }
  .dash-kpi-sub { display: none !important; } /* drop the small sub-label, the value+label is enough on phone */

  /* SLA Tracker — keep 4-across, drop the verbose sub-label */
  .sla-tracker { padding: 10px !important; margin-bottom: 9px !important; border-radius: 10px !important; }
  .sla-tracker-hdr { margin-bottom: 7px !important; flex-wrap: wrap !important; gap: 4px !important; }
  .sla-tracker-title { font-size: 11.5px !important; }
  .sla-tracker-sub { font-size: 10px !important; }
  .sla-tracker-grid { gap: 5px !important; grid-template-columns: repeat(4,1fr) !important; }
  .sla-bucket { padding: 7px 5px !important; border-radius: 6px !important; border-left-width: 3px !important; }
  .sla-bucket-num { font-size: 16px !important; line-height: 1 !important; }
  .sla-bucket-lbl { font-size: 10px !important; margin-top: 2px !important; font-weight: 700 !important; }
  .sla-bucket-sub { display: none !important; }

  /* Cards (associate/client) — much tighter */
  .as-card, .cl-card { padding: 10px !important; margin-bottom: 8px !important; border-radius: 10px !important; }
  .as-card-hdr, .cl-card-hdr { margin-bottom: 7px !important; font-size: 11.5px !important; }
  .as-card-hdr-sub, .cl-card-hdr-sub { font-size: 10px !important; }

  /* Today's focus list */
  .as-focus-row { padding: 7px 0 !important; gap: 7px !important; }
  .as-focus-icon { font-size: 13px !important; width: 18px !important; }
  .as-focus-title { font-size: 11.5px !important; }
  .as-focus-desc { font-size: 10.5px !important; }
  .as-focus-sub { font-size: 11px !important; }

  /* Activity / SLA score row */
  .as-row-2col { gap: 8px !important; margin-bottom: 8px !important; }
  .as-activity-row { padding: 5px 0 !important; font-size: 11px !important; gap: 6px !important; }
  .as-activity-time { min-width: 50px !important; font-size: 9.5px !important; }
  .as-sla-bar { height: 7px !important; margin: 5px 0 4px !important; }
  .as-sla-stats { gap: 10px !important; font-size: 10.5px !important; }
  .as-sla-stat-num { font-size: 13px !important; }
  .as-team-row { gap: 12px !important; flex-wrap: wrap !important; }
  .as-team-stat-num { font-size: 17px !important; }
  .as-team-stat-lbl { font-size: 10px !important; }

  /* Client action banner */
  .cl-action-banner { padding: 10px 11px !important; margin-bottom: 9px !important; border-radius: 10px !important; }
  .cl-action-hdr { font-size: 9.5px !important; }
  .cl-action-title { font-size: 12px !important; margin: 2px 0 8px !important; }
  .cl-action-row { padding: 7px 0 !important; gap: 7px !important; }
  .cl-action-line1 { font-size: 11px !important; }
  .cl-action-line2 { font-size: 10px !important; }
  .cl-action-wait { font-size: 9.5px !important; padding: 2px 6px !important; }

  /* Recent updates timeline */
  .cl-update-row { padding: 6px 0 !important; gap: 7px !important; }
  .cl-update-icon { width: 22px !important; height: 22px !important; font-size: 11px !important; border-radius: 6px !important; }
  .cl-update-body { font-size: 11px !important; }
  .cl-update-time { font-size: 9.5px !important; }

  /* Tables */
  .as-tbl, .cl-tbl { font-size: 11px !important; }
  .as-tbl th, .cl-tbl th { padding: 5px 5px !important; font-size: 9px !important; }
  .as-tbl td, .cl-tbl td { padding: 6px 5px !important; }
  .as-chip, .cl-chip { font-size: 9px !important; padding: 2px 6px !important; }
  .as-tbl-reqid, .cl-tbl-reqid { font-size: 10.5px !important; }
  .as-sla-cell { font-size: 9.5px !important; }

  /* Page header — pack tightly */
  .fyn-page-header {
    margin-bottom: 10px !important;
    padding: 9px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .fyn-page-title { font-size: 17px !important; gap: 7px !important; }
  .fyn-page-title-icon { width: 26px !important; height: 26px !important; border-radius: 7px !important; }
  .fyn-page-title-icon svg { width: 14px !important; height: 14px !important; }
  .fyn-page-subtitle { font-size: 10.5px !important; margin-top: 1px !important; line-height: 1.3 !important; }
  .fyn-btn-new {
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
    gap: 5px !important;
  }
  .fyn-btn-new svg { width: 11px !important; height: 11px !important; }

  /* Admin Products Overview — tighten cards */
  .dash-prod-card { padding: 10px !important; }
  .dash-prod-name { font-size: 12px !important; }
  .dash-prod-desc { font-size: 10px !important; }
  .dash-prod-stat-num { font-size: 16px !important; }
  .dash-prod-stat-lbl { font-size: 9px !important; }
  .dash-prod-icon { width: 32px !important; height: 32px !important; }

  /* Admin trend chart card title */
  .dash-chart-title { font-size: 12px !important; }
}

/* Small phones ≤ 480px — final pass */
@media (max-width: 480px) {
  .dash-kpi-val { font-size: 16px !important; }
  .dash-kpi-lbl { font-size: 10.5px !important; }
  .dash-kpi { padding: 7px 8px !important; gap: 7px !important; }
  .dash-kpi-icon { width: 26px !important; height: 26px !important; }
  .dash-kpi-icon svg { width: 13px !important; height: 13px !important; }

  .sla-bucket-num { font-size: 15px !important; }

  /* Header — smaller still */
  .fyn-page-title { font-size: 15px !important; }
  .fyn-page-subtitle { font-size: 10px !important; }
  .fyn-btn-new { padding: 6px 10px !important; font-size: 11px !important; }
}

/* Tiny phones ≤ 380px — hide subtitle, icon-only button */
@media (max-width: 380px) {
  .fyn-page-subtitle { display: none !important; }  /* page wastes 2 lines on subtitle wrap */

  /* "+ New Ticket" → just "+ New" to save chars */
  .fyn-btn-new { padding: 6px 9px !important; font-size: 10.5px !important; }

  .dash-kpi-bar { grid-template-columns: 1fr 1fr !important; gap: 5px !important; }
  .dash-kpi { padding: 6px 7px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   v2-FINAL — additional 2-per-row treatments on phone
   ───────────────────────────────────────────────────────────────── */

/* Phone ≤ 640px */
@media (max-width: 640px) {
  /* Associate: keep the Activity + SLA Score block as 2-per-row
     (was collapsing to 1-per-row at ≤1024px in the inline view CSS). */
  .as-row-2col {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Admin Products Overview: replace the carousel with a 2-col grid.
     The carousel was a single visible card with prev/next nav; on phone
     a static grid of 2 columns shows more at once and removes the JS
     transform handling that doesn't pay rent at this size. */
  .dash-prod-carousel-btn,
  .dash-prod-dots {
    display: none !important;
  }
  .dash-prod-track-outer {
    overflow: visible !important;
    border-radius: 0 !important;
  }
  .dash-prod-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    transform: none !important;       /* override JS-set carousel offsets */
    transition: none !important;
  }
  .dash-prod-card {
    flex: 1 1 auto !important;        /* override carousel's flex-basis: 25% */
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Tiny phones ≤ 380px — Products Overview stays 2-col but more compact */
@media (max-width: 380px) {
  .dash-prod-grid { gap: 6px !important; }
  .dash-prod-hdr { padding: 9px 10px 6px !important; gap: 7px !important; }
  .dash-prod-icon { width: 26px !important; height: 26px !important; }
  .dash-prod-stat { padding: 7px 8px !important; }

  /* Activity + SLA Score may cramp on tiniest screens — fall back to 1-col */
  .as-row-2col { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────
   v2-FINAL+ — Trend chart, Week vs Last Week, Status Breakdown
   The chart cards weren't getting compact-mode treatment in v2;
   their headers were overflowing and the trend bars/labels were
   running into the card edges. This pass packs them.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Chart-style cards (Ticket Trend, Week vs Last Week) — tighter,
     and a hard overflow:hidden so anything inside that misbehaves
     can't cause the page to scroll horizontally. */
  .dash-chart-wrap {
    padding: 11px 12px 9px !important;
    border-radius: 11px !important;
    overflow: hidden !important;
  }
  .dash-chart-hdr {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    margin-bottom: 8px !important;
  }
  .dash-chart-title { font-size: 12.5px !important; }
  .dash-chart-sub   { font-size: 10px !important; }

  /* Trend chart inline summary stats (Opened / Resolved totals on the right
     side of the header). They were 16px monospace + dividers, taking too
     much horizontal space and pushing the title around. Halve everything. */
  .dash-chart-hdr [style*="font-size:16px"] {
    font-size: 13px !important;
  }
  .dash-chart-hdr [style*="font-size:10px"] {
    font-size: 9px !important;
  }

  /* Week vs Last Week — the "X tickets vs last week" subtitle pinned
     to the right of the title. Smaller font + allow wrap. */
  .dash-chart-wrap > div:first-child {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  .dash-chart-wrap > div:first-child > span:last-child {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  /* Trend chart bars/labels area — reduce gap so 8 months fit cleanly */
  #trendChart, #trendLabels {
    gap: 4px !important;
    padding: 0 !important;
  }
  #trendLabels > div { font-size: 8.5px !important; }
  #trendChart { height: 70px !important; }   /* was 90px */

  /* Sidebar panels (Status Breakdown, Top Companies, Top Assignees) */
  .dash-panel {
    border-radius: 10px !important;
    overflow: hidden !important;            /* belt+braces; was already there */
  }
  .dash-panel-hdr {
    padding: 9px 12px 7px !important;
    font-size: 11.5px !important;
  }
  .dash-panel-hdr a { font-size: 10.5px !important; }
  .dash-panel-hdr span:last-child { font-size: 10px !important; }

  .dash-trend-row {
    padding: 7px 12px !important;
    gap: 8px !important;
    font-size: 11px !important;
  }
  /* Status breakdown / top companies — shrink the fixed label column */
  .dash-trend-row > div:first-child:not(.dash-trend-bar-wrap) {
    width: 64px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }
  .dash-trend-row > div:last-child {
    width: 18px !important;
    font-size: 11px !important;
  }
}

/* Tiny phones ≤ 380px — even tighter */
@media (max-width: 380px) {
  .dash-chart-wrap { padding: 9px 10px 7px !important; }
  .dash-chart-title { font-size: 12px !important; }
  #trendChart { height: 60px !important; }
  #trendLabels > div { font-size: 8px !important; }

  .dash-trend-row { padding: 6px 10px !important; gap: 7px !important; }
  .dash-trend-row > div:first-child:not(.dash-trend-bar-wrap) {
    width: 58px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Product card header — hide redundant total number on phone
   The header puts icon + name + total all in one flex row. On a
   narrow 2-col card the long product names ("FynamicsGST",
   "FYN GATEWAY") collide visually with the right-aligned total.
   The Open + Closed numbers in the stats footer below already
   convey the total, so dropping the header total is the cleanest fix.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* The total number is the third (last) child of .dash-prod-hdr.
     It has inline style font-family:'DM Mono'. Hide it. */
  .dash-prod-hdr > div:last-child:not(.dash-prod-icon) {
    display: none !important;
  }
  /* With total gone, the middle (name+desc) column gets the space it
     needs. Reinforce min-width:0 + word-break for safety. */
  .dash-prod-hdr > div:nth-child(2) {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .dash-prod-name {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.25 !important;
  }
}