/**
 * Friction Radar — mobile layout (≤639px narrow, ≤899px bottom sheet).
 * Loads after senra-theme.css. Targets built class names from the Vite bundle.
 */

/* --- Global: no horizontal scroll, readable type --- */
html {
  overflow-x: hidden;
}

body,
#root {
  overflow-x: hidden;
  max-width: 100vw;
}

.app {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 639px) {
  .top-bar {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  :root {
    font-size: 14px;
  }

  .muted,
  .search-briefing,
  .search-banner,
  .stats-strip,
  .tab-panel,
  .sector-card,
  .streets-list,
  .issues-tab {
    font-size: 14px;
  }

  .search-briefing__list,
  .search-briefing__note,
  .data-table tbody td,
  .detail-panel__body-text,
  .detail-panel__address,
  .bullet-list,
  .compact-list,
  .talking-panel__list {
    font-size: 13px !important;
    line-height: 1.45;
  }

  .search-briefing__label,
  .stats-strip__scope,
  .search-briefing__crime-cat-n {
    font-size: 11px !important;
  }
}

/* --- Map: min height; compact discreet legend (not a tall stack) --- */
@media (max-width: 639px) {
  .map-container {
    min-height: 250px !important;
    height: min(55vh, 420px) !important;
  }

  .map-shell {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .map-legend {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.45rem;
    bottom: 5px;
    left: 5px;
    right: auto;
    width: auto;
    max-width: min(92%, calc(100% - 10px));
    padding: 0.18rem 0.38rem !important;
    font-size: 0.5625rem !important;
    font-weight: 500;
    line-height: 1.2;
    opacity: 0.94;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  }

  .map-legend__lbl--full {
    display: none !important;
  }

  .map-legend__lbl--compact {
    display: inline !important;
  }

  .legend-item,
  .legend-toggle {
    min-height: 0 !important;
    padding: 0.12rem 0.2rem !important;
    box-sizing: border-box;
    align-items: center;
    width: auto !important;
  }

  .legend-toggle {
    justify-content: flex-start;
  }

  .legend-item {
    gap: 0.2rem !important;
  }

  .legend-toggle {
    gap: 0.2rem !important;
  }

  .legend-dot.issue {
    width: 6px !important;
    height: 6px !important;
    border-width: 1px !important;
  }

  .legend-square {
    width: 5px !important;
    height: 5px !important;
  }

  .legend-dot.crime {
    width: 5px !important;
    height: 5px !important;
  }
}

/* --- Search briefing & crime categories --- */
@media (max-width: 639px) {
  .search-briefing {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
    padding: 0.875rem 1rem !important;
    box-sizing: border-box;
    max-width: calc(100vw - 1.5rem);
  }

  .search-banner,
  .stats-strip,
  .welcome-banner,
  .data-refresh-line,
  .week-priorities,
  .quick-actions,
  .app-footer,
  .tabs {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
    max-width: calc(100vw - 1.5rem);
    box-sizing: border-box;
  }

  .quick-actions__card {
    min-height: 44px;
    padding: 0.65rem 0.75rem;
  }

  .search-briefing__crime-cat-list {
    width: 100%;
  }

  .search-briefing__crime-cat-btn {
    width: 100%;
    min-height: 44px;
    align-items: center;
    box-sizing: border-box;
    white-space: normal;
    text-align: left;
  }

  .search-briefing__crime-cat-name {
    white-space: normal;
    word-break: break-word;
  }

  .search-briefing__did-you-mean {
    padding: 0.75rem 1rem !important;
  }

  .search-briefing__did-you-mean-list {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .search-briefing__did-you-mean-list li {
    margin-bottom: 0.5rem;
  }

  .search-briefing__did-you-mean-list li:last-child {
    margin-bottom: 0;
  }

  .search-briefing__did-you-mean-btn {
    display: block !important;
    width: 100% !important;
    min-height: 44px;
    padding: 0.65rem 0.75rem !important;
    text-align: left !important;
    text-decoration: none !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-page);
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
  }

  .search-briefing__row-btn {
    min-height: 44px;
    box-sizing: border-box;
  }

  .search-input,
  .btn {
    min-height: 44px;
    box-sizing: border-box;
  }

  .btn {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* --- Tabs: touch targets --- */
@media (max-width: 639px) {
  .tab {
    min-height: 44px;
    padding: 0.5rem 0.5rem;
    font-size: 13px;
  }

  .ward-scope-toggle__btn {
    min-height: 44px;
  }

  .issues-tab__sort-btn {
    min-height: 44px;
    padding: 0.35rem 0.65rem;
  }
}

/* --- Issues table → cards (mobile) --- */
@media (max-width: 639px) {
  .issues-tab .table-wrap {
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .issues-tab .data-table,
  .issues-tab .data-table tbody,
  .issues-tab .data-table tr,
  .issues-tab .data-table td {
    display: block;
    width: 100%;
  }

  .issues-tab .data-table thead {
    display: none;
  }

  .issues-tab .data-table tr.click-row {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.65rem;
    background: var(--bg-elevated);
    box-shadow: var(--shadow-sm);
  }

  .issues-tab .data-table td {
    border: none !important;
    padding: 0.35rem 0 !important;
    text-align: left !important;
    font-size: 13px;
  }

  /* Hide: Last updated, Reported, Status */
  .issues-tab .data-table tr.click-row td:nth-child(1),
  .issues-tab .data-table tr.click-row td:nth-child(2),
  .issues-tab .data-table tr.click-row td:nth-child(7) {
    display: none !important;
  }

  /* Order: Title, Street, Category, Days open */
  .issues-tab .data-table tr.click-row td:nth-child(5) {
    order: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    padding-top: 0.15rem !important;
    padding-bottom: 0.35rem !important;
  }

  .issues-tab .data-table tr.click-row td:nth-child(6) {
    order: 2;
  }

  .issues-tab .data-table tr.click-row td:nth-child(4) {
    order: 3;
  }

  .issues-tab .data-table tr.click-row td:nth-child(3) {
    order: 4;
  }

  .issues-tab .data-table tr.click-row td:nth-child(6)::before {
    content: "Street";
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
  }

  .issues-tab .data-table tr.click-row td:nth-child(4)::before {
    content: "Category";
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
  }

  .issues-tab .data-table tr.click-row td:nth-child(3)::before {
    content: "Days open";
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
  }

  .issues-tab .data-table .cell-title {
    max-width: none;
  }
}

/* --- Planning table → cards (direct child of .tab-panel only) --- */
@media (max-width: 639px) {
  .tab-panel > .table-wrap {
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .tab-panel > .table-wrap .data-table,
  .tab-panel > .table-wrap .data-table tbody,
  .tab-panel > .table-wrap .data-table tr,
  .tab-panel > .table-wrap .data-table td {
    display: block;
    width: 100%;
  }

  .tab-panel > .table-wrap .data-table thead {
    display: none;
  }

  .tab-panel > .table-wrap .data-table tr.click-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.65rem;
    background: var(--bg-elevated);
    box-shadow: var(--shadow-sm);
  }

  .tab-panel > .table-wrap .data-table td {
    border: none !important;
    padding: 0.35rem 0 !important;
    text-align: left !important;
    font-size: 13px;
  }

  /* Hide Reference + Received on small screens */
  .tab-panel > .table-wrap .data-table tr.click-row td:nth-child(2),
  .tab-panel > .table-wrap .data-table tr.click-row td:nth-child(6) {
    display: none !important;
  }

  .tab-panel > .table-wrap .planning-proposal-cell {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: inherit !important;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
    margin: 0.15rem 0 0.35rem;
  }

  .tab-panel > .table-wrap .data-table tr.click-row td:nth-child(3)::before {
    content: "Address";
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
  }

  .tab-panel > .table-wrap .data-table tr.click-row td:nth-child(4)::before {
    content: "Proposal";
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
  }

  .tab-panel > .table-wrap .data-table tr.click-row td:nth-child(1)::before {
    content: "Objections";
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
  }

  .tab-panel > .table-wrap .data-table tr.click-row td:nth-child(5)::before {
    content: "Status";
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
  }

  /* Order: address, proposal, objections, status */
  .tab-panel > .table-wrap .data-table tr.click-row td:nth-child(3) {
    order: 1;
  }
  .tab-panel > .table-wrap .data-table tr.click-row td:nth-child(4) {
    order: 2;
  }
  .tab-panel > .table-wrap .data-table tr.click-row td:nth-child(1) {
    order: 3;
  }
  .tab-panel > .table-wrap .data-table tr.click-row td:nth-child(5) {
    order: 4;
  }

  .tab-panel > .table-wrap .data-table tr.click-row {
    display: flex;
    flex-direction: column;
  }
}

/* --- Streets: compact summary line (badges hidden via App.css ≤639px) --- */
@media (max-width: 639px) {
  .streets-list__head {
    align-items: flex-start !important;
    gap: 0.45rem !important;
  }

  .streets-list__head-main {
    min-width: 0;
  }

  .streets-list__title-row {
    width: 100%;
  }

  .streets-list__name {
    flex: 1 1 auto !important;
    min-width: 0;
  }

  .streets-list__mobile-summary {
    font-size: 13px !important;
    line-height: 1.4 !important;
    width: 100%;
  }
}

/* --- Sector cards: expanded body --- */
@media (max-width: 639px) {
  .sector-card-body {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .sector-card-body .talking-panel,
  .sector-card-body .block,
  .sector-card-body .table-wrap {
    max-width: 100%;
    box-sizing: border-box;
  }

  .talking-panel__list,
  .bullet-list,
  .compact-list,
  .checklist {
    word-break: break-word;
    overflow-wrap: anywhere;
    padding-left: 1rem;
    margin-right: 0;
  }

  .sector-card-body .data-table {
    font-size: 12px;
  }

  .score-breakdown {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* --- Detail panel: bottom 50%, scroll, full-width actions --- */
@media (max-width: 899px) {
  .detail-panel {
    max-height: 50vh !important;
    max-height: 50dvh !important;
    height: 50vh !important;
    height: 50dvh !important;
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
  }

  .detail-panel__scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .detail-panel__title,
  .detail-panel__ref,
  .detail-panel__address,
  .detail-panel__subtitle,
  .detail-panel__body-text,
  .crime-detail {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .detail-panel__body-text {
    overflow-x: hidden;
  }

  .detail-panel__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 0.5rem !important;
    padding-bottom: 0.5rem;
    box-sizing: border-box;
  }

  .detail-panel__actions .btn,
  .detail-panel__actions .detail-panel__link-btn {
    width: 100% !important;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
  }

  .detail-panel__close {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }
}

/* --- Sectors tab panel padding --- */
@media (max-width: 639px) {
  .tab-panel {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
  }

  .sector-list {
    gap: 0.65rem;
  }

  .sector-card-head {
    min-height: 44px;
    padding: 0.65rem 0.75rem;
  }
}

/* Desktop: keep planning proposal column readable in wide table */
@media (min-width: 640px) {
  .planning-proposal-cell {
    max-width: min(36vw, 420px);
    word-break: break-word;
    vertical-align: top;
    line-height: 1.4;
  }
}