/* Platform additions on top of the mockup kit (app.css). Tokens only; no hairline card outlines,
   no accent bars, no all-caps labels, no middots. */

.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--fw-bold);
}
.flash .ph { font-size: 1.5rem; flex-shrink: 0; }
.flash-ok { background-color: #E7F3E7; color: #1F4D1F; }
.flash-bad { background-color: #FBE6DC; color: #7A2A08; }

/* Shop / Contractor switch in the top bar, for companies with both sides */
/* A segmented control: the buttons are the compact height and fill the trough, so it lines up with the
   top-bar blocks beside it */
.side-switch {
  display: none;
  gap: 2px;
  padding: 0;
  border-radius: var(--control-radius);
  background-color: var(--c-charcoal);
}
.side-switch button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--c-on-dark);
  font-family: var(--font-display);
  font-weight: var(--btn-fw);
  font-size: var(--btn-fs);
  line-height: 1;
}
.side-switch button .ph { color: var(--c-orange); font-size: var(--btn-icon); }
.side-switch button.is-on { background-color: var(--c-orange); color: var(--c-ink); }
.side-switch button.is-on .ph { color: var(--c-ink); }
@media (min-width: 576px) { .side-switch { display: inline-flex; } }
/* Below 1400px the switch shows its icons only, so the bar keeps room for the logo */
@media (max-width: 1399.98px) {
  .side-switch .side-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side-switch button { justify-content: center; width: var(--control-h-sm); padding: 0; }
}

.view-as-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background-color: var(--c-orange);
  color: var(--c-ink);
  font-weight: var(--fw-bold);
}
.view-as-bar span { display: inline-flex; align-items: center; gap: var(--space-2); }

.side-nav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.side-nav form { margin: 0; }

/* Pagination from Laravel, in the kit's look */
.pager { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.pager a, .pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h-sm);
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--c-white);
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.pager .is-on { background-color: var(--c-ink); color: var(--c-white); }

/* Filter bar above lists: compact fields and buttons (ui-kit.css, Controls), bottoms aligned */
/* A grid, so the Filter and Clear buttons take a cell the width of a field and line up with the fields' bottoms
   instead of dropping to a row of their own at a different width */
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  align-items: end;
  gap: var(--space-5) var(--space-3);  /* rows that wrap get the same room as stacked fields */
  margin-bottom: var(--space-5);
}
.filters .field { margin: 0; min-width: 0; }
.filters .btn { width: 100%; }
.filters .choice { height: var(--control-h); min-height: 0; padding-block: 0; margin: 0; white-space: nowrap; }
.filters .btn { height: var(--control-h); }  /* the Search and Clear buttons stand as tall as the fields beside them */
/* Checkbox filters share a row segment, so a long label never wraps and they stay level with the buttons */
.filters .filter-checks { display: flex; flex-wrap: wrap; gap: var(--space-3); min-width: 0; }
.filters .filter-checks .choice { flex: 1 1 auto; }
@media (min-width: 992px) { .filters .filter-checks { grid-column: span 2; flex-wrap: nowrap; } }
/* Small laptops: the side nav leaves the bar narrow, and an 11rem cell cut "Search Shops" short. A wider
   minimum cell keeps a button's whole label */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .filters { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
}

/* Phones: a long filter form folds behind one Filters button (app.js adds it), so results are not a screen away */
.filters-toggle { display: none; }
@media (max-width: 767.98px) {
  .filters-toggle { display: inline-flex; width: 100%; margin-bottom: var(--space-4); }
  .filters.is-folded { display: none; }
}

/* Simple data table (admin, file log, numbers export preview) */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--space-3); text-align: left; vertical-align: top; }
.data-table thead th { font-family: var(--font-display); font-weight: var(--fw-extrabold); background-color: var(--c-paper); }
.data-table tbody tr:nth-child(even) { background-color: var(--c-paper); }
.table-scroll { position: relative; overflow-x: auto; }  /* relative: a visually hidden header label stays inside the scroller */

/* Inline action forms in rows */
.inline-form { display: inline; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Thread view */
.thread { display: flex; flex-direction: column; gap: var(--space-3); }
.msg { max-width: 46rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background-color: var(--c-paper); }
.msg.is-mine { align-self: flex-end; background-color: #FCE9D6; }
.msg-meta { font-size: var(--fs-sm); color: var(--c-muted, #6B6B6B); margin-bottom: var(--space-1); }

/* Public search pages (find-shops, find-work) on the marketing domain */
.public-top { background-color: var(--c-ink); border-bottom: var(--header-rail) solid var(--c-orange); }
.public-top-inner { display: flex; align-items: center; gap: var(--space-3); min-height: 72px; max-width: 1320px; margin: 0 auto; padding: 0 var(--space-4); }
.public-main { max-width: 1320px; margin: 0 auto; padding: var(--space-7) var(--space-4); }
.locked { filter: blur(5px); user-select: none; }

/* Shared lane: Report button (a <details> that opens a short form), unread notifications */
.report-box > summary { list-style: none; cursor: pointer; }
.report-box > summary::-webkit-details-marker { display: none; }
.row-item.is-unread { background-color: var(--c-orange-soft); }
.public-top .app-top-actions .btn { --bs-btn-padding-x: var(--space-4); height: var(--control-h-sm); }

/* The side nav grew to 11 to 12 items; keep it whole on laptop-height screens */
.side-nav-btn { min-height: var(--control-h-sm); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--c-on-dark); font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.0625rem; }
.side-nav-btn .ph { font-size: 1.4rem; color: var(--c-orange); flex-shrink: 0; }
.side-nav-btn:hover { background-color: var(--c-charcoal); }
@media (max-height: 1000px) {
  .app-side { gap: var(--space-3); padding-block: var(--space-4); }
  .side-nav a, .side-nav-btn { font-size: 1rem; }
}

/* Top bar buttons: the marketing site's Log In / Menu blocks (site/css/layout.css .site-login),
   so the dashboard and the homepage share one header style. Label beside the icon from 992px;
   on phones the label sits under the icon, as on the site. */
.top-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-sm);
  padding: 0 var(--space-4);
  border-radius: var(--control-radius);
  background-color: var(--c-charcoal);
  color: var(--c-on-dark);
  font-family: var(--font-display);
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.top-btn .ph { font-size: var(--btn-icon); }
.top-btn:hover { background-color: var(--c-orange); color: var(--c-ink); }
.top-btn .count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.3rem;
  border-radius: 0.7rem;
  background-color: var(--c-orange);
  color: var(--c-ink);
  font-size: 0.8125rem;
  font-weight: var(--fw-black);
  line-height: 1.4rem;
  text-align: center;
}
/* Below 1200px the labels sit under the icons: with them beside, the bar ran out of room and squeezed the logo */
@media (max-width: 1199.98px) {
  .top-btn {
    flex-direction: column;
    gap: 3px;
    min-width: var(--control-h-sm);
    padding: 0 var(--space-2);
    font-size: 0.6875rem;   /* a label under an icon, tab-bar size, as on the site's phone header */
    letter-spacing: 0.02em;
  }
  .top-btn .ph { font-size: 1.375rem; }
  .app-company { display: none; }
}

/* Phones: the bar keeps the logo, the side as an icon, Search, Alerts and Account. Main Site and Admin
   move to the Account page (shared/settings/edit.blade.php), so every label stays whole down to 320px */
.app-side-label { position: relative; }
.app-side-label .side-text { display: inline; }
@media (max-width: 575.98px) {
  .app-top-inner { gap: var(--space-2); padding-inline: var(--space-3); }
  .app-top-actions { gap: var(--space-1); }
  .top-btn-wide { display: none; }
  .app-side-label { display: inline-flex; padding: 0; background: none; }
  .app-side-label .ph { font-size: 1.5rem; }
  .app-side-label .side-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top-search-icon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 576px) {
  .app-side-label { display: inline-flex; }
}
@media (max-width: 359.98px) {
  .top-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* To-do tiles: one row whatever the count (shop 4, contractor 5, installer 4) */
@media (min-width: 992px) {
  .todo { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

/* Wave 3A: global search in the top bar. A box from 992px; an icon button to the search page on phones. */
.top-search { display: none; align-items: stretch; height: var(--control-h-sm); border-radius: var(--control-radius); background-color: var(--c-white); overflow: hidden; }
.top-search input { width: 14rem; height: 100%; min-width: 0; border: 0; border-radius: 0; padding: 0 var(--control-px); background: transparent; color: var(--c-ink); font-size: var(--control-fs); font-weight: var(--fw-regular); }
.top-search input:focus { outline: none; }
.top-search:focus-within { box-shadow: 0 0 0 3px var(--c-orange); }
.top-search button { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); border: 0; background-color: var(--c-orange); color: var(--c-ink); font-size: 1.4rem; }
.top-search button:hover { background-color: var(--c-orange-hover); }
@media (min-width: 992px) {
  .top-search { display: inline-flex; }
  .top-search-icon { display: none; }
}
@media (min-width: 1400px) {
  .top-search input { width: 18rem; }
}

/* A page with no side nav takes the full width (never the side nav's narrow column) */
.app-shell.no-side { display: block; }
/* The logo keeps its full width once the bar has room; the search box gives way first */
@media (min-width: 992px) {
  .app-logo { flex-shrink: 0; }
  .top-search { flex-shrink: 1; min-width: 0; }
  .top-search input { width: auto; flex: 1 1 14rem; max-width: 14rem; }
}
@media (min-width: 1400px) {
  .top-search input { max-width: 18rem; }
}

/* A select inside a table cell is as wide as its longest option (Settings, Notifications: "Daily Digest", "In-App Only") */
.data-table td select { width: auto; min-width: 9.5rem; }

/* Past-work photos: one shape, cropped, so a mixed set lines up in its grid */
.photo-tile { aspect-ratio: 4 / 3; object-fit: cover; }

/* Phones: wide data tables become one card per row (app.js marks them .table-cards and labels each cell
   with its column header). The first cell is the row's title; the rest read as label and value. */
@media (max-width: 767.98px) {
  .table-scroll:has(> .table-cards) { overflow-x: visible; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td, .table-cards tbody th { display: block; width: 100%; }
  .table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-cards tbody { display: grid; gap: var(--space-3); }
  .table-cards tbody tr,
  .table-cards tbody tr:nth-child(even) { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background-color: var(--c-paper); }
  .table-cards tbody :is(td, th) { position: relative; display: block; min-height: 1.5em; padding: 0 0 0 max(6.5rem, 38%); overflow-wrap: anywhere; }
  .table-cards tbody :is(td, th)::before { content: attr(data-label); position: absolute; left: 0; top: 0.15em; width: calc(max(6.5rem, 38%) - var(--space-3)); font-family: var(--font-display); font-weight: var(--fw-extrabold); color: var(--c-ink); font-size: var(--fs-sm); }
  .table-cards tbody :is(td, th):first-child { display: block; padding-left: 0; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.125rem; }
  .table-cards tbody :is(td, th):first-child::before { content: none; }
  .table-cards tbody :is(td, th):empty { display: none; }
  .table-cards .actions, .table-cards .inline-form { justify-content: flex-start; }
}
@media (max-width: 767.98px) {
  .table-cards tbody td > :is(.chip, .chips, .btn, .actions, form) { justify-self: start; }
}

/* The same cards in the narrow side column of a two-column page (Who Opened What on a job) */
@media (min-width: 1200px) {
  .app-grid-2 > :last-child .table-scroll:has(> .table-cards) { overflow-x: visible; }
  .app-grid-2 > :last-child .table-cards, .app-grid-2 > :last-child .table-cards tbody, .app-grid-2 > :last-child .table-cards tr, .app-grid-2 > :last-child .table-cards td, .app-grid-2 > :last-child .table-cards tbody th { display: block; width: 100%; }
  .app-grid-2 > :last-child .table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-grid-2 > :last-child .table-cards tbody { display: grid; gap: var(--space-3); }
  .app-grid-2 > :last-child .table-cards tbody tr,
  .app-grid-2 > :last-child .table-cards tbody tr:nth-child(even) { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background-color: var(--c-paper); }
  .app-grid-2 > :last-child .table-cards tbody :is(td, th) { position: relative; display: block; min-height: 1.5em; padding: 0 0 0 max(6.5rem, 38%); overflow-wrap: anywhere; }
  .app-grid-2 > :last-child .table-cards tbody :is(td, th)::before { content: attr(data-label); position: absolute; left: 0; top: 0.15em; width: calc(max(6.5rem, 38%) - var(--space-3)); font-family: var(--font-display); font-weight: var(--fw-extrabold); color: var(--c-ink); font-size: var(--fs-sm); }
  .app-grid-2 > :last-child .table-cards tbody :is(td, th):first-child { display: block; padding-left: 0; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.125rem; }
  .app-grid-2 > :last-child .table-cards tbody :is(td, th):first-child::before { content: none; }
  .app-grid-2 > :last-child .table-cards tbody :is(td, th):empty { display: none; }
  .app-grid-2 > :last-child .table-cards .actions, .app-grid-2 > :last-child .table-cards .inline-form { justify-content: flex-start; }
}

/* Row actions in a table stay on one line (Revise beside Withdraw, not stacked at two widths) */
@media (min-width: 768px) {
  .data-table .actions { flex-wrap: nowrap; }
  .data-table .actions .btn, .data-table td > .btn { white-space: nowrap; }
}

/* The keyword box leading a filter bar takes two cells, so a search term has room to be read */
@media (min-width: 576px) {
  .filters > .field:first-child:has(input[name="q"]) { grid-column: span 2; }
}
/* Table cards: a cell with nothing in it drops out instead of showing a bare label */
.table-cards td.is-empty { display: none !important; }
/* A cell whose column has no header text (a contact line, a tick box) reads as plain text across the card */
@media (max-width: 767.98px) {
  .table-cards tbody td:not([data-label]), .table-cards tbody td[data-label=""] { padding-left: 0; }
}

/* Long lists (thousands of companies): the "Showing 1–24 of 1,286" line with Sort By, removable filter chips,
   Load More on phones, and the Nearby States block under a thin search */
.list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.list-count { margin: 0; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.125rem; }
.list-sort { display: flex; align-items: flex-end; gap: var(--space-2); min-width: min(100%, 15rem); margin: 0; }
.list-sort .field { margin: 0; flex: 1 1 auto; }
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.filter-chips a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--c-sand);
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.filter-chips a .ph { font-size: 1.1em; }
.filter-chips .chip-clear { background-color: var(--c-ink); color: var(--c-white); }
.pager-more { display: none; }
@media (max-width: 767.98px) {
  .list-sort { width: 100%; }
  .pager-more { display: inline-flex; width: 100%; margin-top: var(--space-5); }
  .pager-more[aria-busy="true"] { opacity: .6; }
}
.nearby { margin-top: var(--space-6); }
.nearby-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
/* Page links on a white card read as controls, not loose numbers */
.app-card .pager a, .app-card .pager span:not(.is-on) { background-color: var(--c-sand); }
.pager a:hover { background-color: var(--c-ink); color: var(--c-white); }