/* ============================================================================
   Portal table standards - 2026-08-20
   ----------------------------------------------------------------------------
   Adir, looking at /portal/rankings and /portal/search-performance, named four
   defects and said "this fix needs to be in general in all over the app not
   only here so just make sure it's everywhere". They are therefore fixed once,
   here, for every portal data table rather than per page.

   Measured on production before the fix (getComputedStyle, 1920px):
     .kt-card-header        padding-top 20px / padding-bottom 0px   <- (1)
     tbody th (row header)  padding 1px (browser default)           <- (2)
     "KWs" / "Est. visits" / "Avg. position"  text-align: right     <- (3)
     those same headers wrapped onto two lines in a 1438px table    <- (4)

   (1) A card header whose subtitle sits 1px above the table header band reads
       as broken. The block gets the same padding underneath as it has on top.
   (2) A <th scope="row"> is a table cell like any other. With the UA default of
       1px it printed "Top keywords" / "Jumped" / "Dropped" hard against the
       card frame. It now carries the same padding as a <td>.
   (3) Numeric columns align LEFT, not right. Adir's rule, stated twice.
   (4) A header only wraps when the table genuinely needs the room. With 1438px
       of table and four columns there is room, so headers stay on one line.
       Kept above 1200px only, so the existing narrow-viewport wrap rules (which
       are what keep these tables off a horizontal scrollbar) still win.

   Layout and spacing only - no colour, no new component.
   Loaded LAST from App\Support\CyticxDesign::STYLES so it beats the per-page
   sheets that currently set these values.
   ============================================================================ */

/* (1) Card header: match the top padding underneath. ----------------------- */
body.fi-panel-portal .kt-card > .kt-card-header,
body.fi-panel-portal .kt-card > .kt-card-header:last-child {
  padding-bottom: 1.25rem !important;
}

/* A header holding only a title and a button has no subtitle to breathe under,
   but the extra room is still correct - it is the same block in every card. */

/* (2) Row headers are cells, and are padded like cells. -------------------- */
body.fi-panel-portal table.sb-data-table tbody th,
body.fi-panel-portal table.kt-table tbody th,
body.fi-panel-portal table.sb-table tbody th {
  padding: 15px 20px;
  vertical-align: middle;
}

@media (max-width: 600px) {
  body.fi-panel-portal table.sb-data-table tbody th,
  body.fi-panel-portal table.kt-table tbody th,
  body.fi-panel-portal table.sb-table tbody th {
    padding: 15px 0.5rem;
  }
}

/* (3) Numbers align left. --------------------------------------------------
   Held above 600px so the mobile card-table treatment (label left, value
   right inside one stacked row) is untouched - that layout is not a column
   of numbers and the rule does not describe it.

   The repeated class names are deliberate. Several page sheets right-align
   their metric columns with 5-class `!important` selectors
   (e.g. `body.fi-panel-portal.fi-panel-portal .cxp-rankings-page
   .cxp-rankings-pages-table th:nth-child(n+2)`), and `!important` ties are
   broken by specificity. Repeating the class raises this rule above them
   without having to find and edit every page sheet, which is what "make sure
   it's everywhere" requires. */
@media (min-width: 601px) {
  html body.fi-panel-portal.fi-panel-portal.fi-panel-portal table.sb-data-table.sb-data-table.sb-data-table > thead > tr > th,
  html body.fi-panel-portal.fi-panel-portal.fi-panel-portal table.sb-data-table.sb-data-table.sb-data-table > tbody > tr > th,
  html body.fi-panel-portal.fi-panel-portal.fi-panel-portal table.sb-data-table.sb-data-table.sb-data-table > tbody > tr > td,
  html body.fi-panel-portal.fi-panel-portal.fi-panel-portal table.kt-table.kt-table.kt-table > thead > tr > th,
  html body.fi-panel-portal.fi-panel-portal.fi-panel-portal table.kt-table.kt-table.kt-table > tbody > tr > th,
  html body.fi-panel-portal.fi-panel-portal.fi-panel-portal table.kt-table.kt-table.kt-table > tbody > tr > td {
    text-align: left !important;
  }

  /* The sort control is an inline-flex button inside the header cell, so the
     cell's text-align does not reach it. */
  html body.fi-panel-portal.fi-panel-portal.fi-panel-portal table.sb-data-table > thead > tr > th > .cxp-table-sort,
  html body.fi-panel-portal.fi-panel-portal.fi-panel-portal table.kt-table > thead > tr > th > .cxp-table-sort {
    justify-content: flex-start !important;
  }
}

/* (4) Headers stay on one line when the table has room. -------------------- */
@media (min-width: 1200px) {
  html body.fi-panel-portal.fi-panel-portal.fi-panel-portal table.sb-data-table.sb-data-table.sb-data-table > thead > tr > th,
  html body.fi-panel-portal.fi-panel-portal.fi-panel-portal table.kt-table.kt-table.kt-table > thead > tr > th {
    white-space: nowrap !important;
  }
}

/* (5) GBP findings tables follow content weight on desktop. ----------------
   The shared portal skin gives every non-first header a 1% width so short
   metric columns can shrink. That is correct for most data tables, but on
   this three-column table it leaves the long "What we found" cells with only
   their minimum-content width while the first (short) Item column absorbs all
   remaining space. The result is a large dead gap before Status and wrapped
   evidence beside it.

   These tables are rendered by one shared Blade view for the Google Business
   Profile setup, Business listings, and Business name match tabs. On wide
   screens, fit-content lets the table stop at the content's intrinsic width;
   the first two columns hug their labels/badges and the evidence column gets
   the reclaimed space. max-width keeps unusually long evidence inside the
   card. The <=1199 rules intentionally remain unchanged, because that range
   uses the existing fixed, wrapping layout to fit the narrower portal column. */
@media (min-width: 1200px) {
  html body.fi-panel-portal.fi-panel-portal table.cxp-gbp-findings-table {
    box-sizing: border-box;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }

  html body.fi-panel-portal.fi-panel-portal table.cxp-gbp-findings-table > thead > tr > th:first-child,
  html body.fi-panel-portal.fi-panel-portal table.cxp-gbp-findings-table > tbody > tr > td:first-child,
  html body.fi-panel-portal.fi-panel-portal table.cxp-gbp-findings-table > thead > tr > th:nth-child(2),
  html body.fi-panel-portal.fi-panel-portal table.cxp-gbp-findings-table > tbody > tr > td:nth-child(2) {
    width: 1% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  html body.fi-panel-portal.fi-panel-portal table.cxp-gbp-findings-table > thead > tr > th:nth-child(3),
  html body.fi-panel-portal.fi-panel-portal table.cxp-gbp-findings-table > tbody > tr > td:nth-child(3) {
    width: auto !important;
    min-width: 0 !important;
  }

  html body.fi-panel-portal.fi-panel-portal table.cxp-gbp-findings-table > tbody > tr > td:nth-child(3) {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}