/* Shared data table: the Vermeldingen "Scanresultaten" pattern, one source of truth for every table of the retailer
   pages (Vermeldingen, the Vindbaarheid blocks). A white rounded card with a thin border; a grey header row in small
   capitals with a platform logo or icon, the name and a grey sub line per column; rows with a grey outline icon and
   the label (and a grey sub line) in the first column, the value in bold and a status icon per column; a problem row
   gets a red left border and its failing cell a light red background; our own row at the top gets a line after it; a
   position is a circle in the colour of the map; tags are small grey pills. The partials are data-table-head,
   data-table-label, data-table-status-icon and data-table-position. Registered before the page sheets, so a page adapts
   it. */
.retailer-data-table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: .75rem; background: white; }
.retailer-data-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
.retailer-data-table th, .retailer-data-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200); vertical-align: top; font-size: .875rem; }
.retailer-data-table thead th { background: var(--gray-50); color: var(--gray-600); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.retailer-data-table tbody th { width: 1%; color: var(--gray-700); font-weight: 500; white-space: nowrap; }
.retailer-data-table > tbody > tr:last-child > * { border-bottom: 0; }
.retailer-data-table tfoot td { border-top: 1px solid var(--gray-200); border-bottom: 0; background: var(--gray-50); color: var(--gray-500); font-size: .8125rem; }

/* Rules of every page, kept in this sheet because it is the one every page of the panel loads (see PageAssets): the
   platform logo of a listing, and Filament's own hint icons, which are plain svgs: iOS only passes a tap on to what
   looks clickable. */
.retailer-platform-icon { display: inline-block; width: 1rem; height: 1rem; margin-inline-end: .375rem; vertical-align: -.2rem; border-radius: .2rem; }
.fi-fo-field-label-ctn [x-tooltip] { cursor: pointer; }

/* Header cell: logo or icon, the name, the ⋯ menu and a grey sub line */
.retailer-data-table thead .retailer-platform-icon { width: .875rem; height: .875rem; vertical-align: -.125rem; }
.retailer-data-table-head-icon { display: inline-block; width: .875rem; height: .875rem; margin-inline-end: .375rem; vertical-align: -.125rem; color: var(--primary-500); }
.retailer-data-table-head-tools { display: inline-flex; align-items: center; gap: .125rem; margin-left: .25rem; vertical-align: middle; }
.retailer-data-table-head .fi-dropdown-panel { text-transform: none; letter-spacing: 0; font-weight: 500; text-align: left; white-space: nowrap; }
.retailer-data-table-sub { display: block; margin-top: .125rem; color: var(--gray-400); font-size: .6875rem; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* First column: a grey outline icon and the label, with an optional grey sub line */
.retailer-data-table-label { display: inline-flex; align-items: center; gap: .5rem; }
.retailer-data-table-label-icon { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--gray-400); }
.retailer-data-table-label-text { display: grid; min-width: 0; }
.retailer-data-table-label-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.retailer-data-table-badge { padding: 0 .5rem; border-radius: 9999px; background: var(--success-600); color: white; font-size: .6875rem; font-weight: 600; line-height: 1.25rem; }
/* A grey badge says what kind of row it is ("Op naam", "Algemeen"), not how it did. */
.retailer-data-table-badge--gray { background: var(--gray-100); color: var(--gray-600); font-weight: 500; }

/* Values, status icons and problem rows */
.retailer-data-table-value { color: var(--gray-950); font-weight: 600; }
.retailer-data-table-filler { width: auto; padding: 0; }
.retailer-data-table-status-cell { width: 7rem; text-align: center; }
.retailer-data-table-status { display: inline-flex; cursor: help; }
.retailer-data-table-status-icon { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.retailer-data-table .retailer-data-table-status-icon { width: 1.375rem; height: 1.375rem; }
.retailer-data-table-status-icon--success { color: var(--success-500); }
.retailer-data-table-status-icon--danger { color: var(--danger-500); }
.retailer-data-table-status-icon--warning { color: var(--warning-500); }
.retailer-data-table-status-icon--gray { color: var(--gray-400); }
.retailer-data-table-row--issue > th { box-shadow: inset 3px 0 0 var(--danger-500); }
.retailer-data-table-cell--issue { background: var(--danger-50); }
.retailer-data-table-cell--warning { background: var(--warning-50); }

/* Row states and numbers: a row that picks something, the picked row (primary tint and line, a problem keeps its red
   line and cell) and right-aligned numbers. Our own row gets no colour: only the own-location icon marks it. */
.retailer-data-table-row--clickable { cursor: pointer; }
.retailer-data-table-row--clickable:not(.retailer-data-table-row--selected):hover > :not(.retailer-data-table-cell--issue) { background: var(--gray-50); }
.retailer-data-table-row--selected > :not(.retailer-data-table-cell--issue) { background: var(--primary-50); }
.retailer-data-table-row--selected:not(.retailer-data-table-row--issue) > th { box-shadow: inset 3px 0 0 var(--primary-500); }
.retailer-data-table .retailer-data-table-number { width: 1%; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Our own row at the top of a list (pinned): a line after it, before the other rows */
.retailer-data-table-row--pinned:not(:last-child) > * { border-bottom: 2px solid var(--gray-300); }

/* Positions: a rank or an average as a bold number on a smooth green (1) → yellow → orange → red (20+) scale
   (data-table-position sets --position-hue), no position a grey dash */
.retailer-data-table-position { color: hsl(var(--position-hue, 0) 75% 36%); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.retailer-data-table-position--none { color: var(--gray-400); font-weight: 500; }

/* Tags: small grey pills */
.retailer-data-table-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.retailer-data-table-tags > li { padding: .125rem .5rem; border-radius: 9999px; background: var(--gray-100); color: var(--gray-700); font-size: .75rem; font-weight: 500; }

/* Dark mode, unscoped, so the tables in modals (rendered outside the page) get it too */
.dark .retailer-data-table-wrap { border-color: var(--gray-700); background: var(--gray-900); }
.dark .retailer-data-table th, .dark .retailer-data-table td { border-color: var(--gray-800); }
.dark .retailer-data-table thead th { background: color-mix(in srgb, var(--gray-800) 45%, var(--gray-900)); color: var(--gray-400); }
.dark .retailer-data-table tbody th { color: var(--gray-300); }
.dark .retailer-data-table-value { color: white; }
.dark .retailer-data-table-badge--gray { background: var(--gray-800); color: var(--gray-300); }
.dark .retailer-data-table-cell--issue { background: color-mix(in srgb, var(--danger-500) 12%, transparent); }
.dark .retailer-data-table-cell--warning { background: color-mix(in srgb, var(--warning-500) 12%, transparent); }
.dark .retailer-data-table-tags > li { background: var(--gray-800); color: var(--gray-200); }
.dark .retailer-data-table-row--pinned:not(:last-child) > * { border-bottom-color: var(--gray-600); }
.dark .retailer-data-table-position { color: hsl(var(--position-hue, 0) 80% 62%); }
.dark .retailer-data-table-position--none { color: var(--gray-500); }
.dark .retailer-data-table-row--clickable:not(.retailer-data-table-row--selected):hover > :not(.retailer-data-table-cell--issue) { background: color-mix(in srgb, var(--gray-800) 50%, var(--gray-900)); }
.dark .retailer-data-table-row--selected > :not(.retailer-data-table-cell--issue) { background: color-mix(in srgb, var(--primary-500) 14%, var(--gray-900)); }
.dark .retailer-data-table tfoot td { border-top-color: var(--gray-800); background: color-mix(in srgb, var(--gray-800) 45%, var(--gray-900)); color: var(--gray-400); }
.retailer-data-table-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Inner variant: every table inside an opened row (Kaart, Google, AI). Clearly a table, but not like the rows around
   it: the table gets retailer-data-table--inner, its frame retailer-data-table-wrap--inner (the thin frame of the shared
   table with smaller corners), a light grey header row with the column names in plain small text (no capitals), lines
   between the rows, tighter rows in a smaller font; no icons and no two-line labels. The name cell
   (retailer-data-table-flat-fill) takes the free width and holds data-table-flat-label: the own-location icon before
   our own name, the grey competitor icon before a tracked competitor, the name in normal weight on one line, the street or site grey after a "·", an ellipsis when it
   does not fit. Our own row has no colour, only that icon; numbers stay right-aligned and coloured. Written with both classes
   and after the dark block, so it also wins over the rules of the outer table it sits in. */
.retailer-data-table-wrap.retailer-data-table-wrap--inner { border-radius: .5rem; }
.retailer-data-table.retailer-data-table--inner th, .retailer-data-table.retailer-data-table--inner td { padding: .5rem .75rem; font-size: .8125rem; vertical-align: middle; }
.retailer-data-table.retailer-data-table--inner thead th { width: auto; padding-block: .375rem; color: var(--gray-600); font-size: .75rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.retailer-data-table.retailer-data-table--inner tbody th { width: 1%; font-weight: 400; white-space: nowrap; }
.retailer-data-table.retailer-data-table--inner .retailer-data-table-flat-fill { width: 100%; max-width: 0; }
.retailer-data-table.retailer-data-table--inner tfoot td { padding-block: .5rem; font-size: .8125rem; }
.retailer-data-table.retailer-data-table--inner .retailer-data-table-row--pinned:not(:last-child) > * { border-bottom-width: 1px; }
.retailer-data-table-flat-label { display: flex; align-items: center; gap: .375rem; min-width: 0; white-space: nowrap; }
.retailer-data-table-flat-label .retailer-platform-icon { flex: none; margin: 0; }
.retailer-data-table-flat-name { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--gray-950); text-overflow: ellipsis; }
a.retailer-data-table-flat-name { color: var(--primary-600); text-decoration: none; }
a.retailer-data-table-flat-name:hover { text-decoration: underline; }
a.retailer-data-table-flat-name:focus-visible { border-radius: .25rem; outline: 2px solid var(--primary-500); outline-offset: 1px; }
.retailer-data-table-flat-label > .retailer-data-table-badge, .retailer-data-table-flat-label > .retailer-own-location-icon, .retailer-data-table-flat-label > .retailer-competitor-icon { flex: none; }
.retailer-data-table-flat-sub { flex: 0 1000 auto; min-width: 0; overflow: hidden; color: var(--gray-500); text-overflow: ellipsis; }
.retailer-data-table-flat-sub::before { content: "·"; margin-inline-end: .375rem; }
.dark .retailer-data-table.retailer-data-table--inner thead th { color: var(--gray-400); }
.dark .retailer-data-table-flat-name { color: white; }
.dark a.retailer-data-table-flat-name { color: var(--primary-400); }
.dark .retailer-data-table-flat-sub { color: var(--gray-400); }

/* The two markers of a name: the location pin of our own location (own-location-icon partial) and the icon of a
   tracked competitor (competitor-icon partial), the same size everywhere, each in one fixed colour (Bob, 2026-10-01):
   green for us, orange for a competitor, as their dots on the map (geogridMarkerColours in retailer-map.js); none
   per slot. Inline next to a name they sit on the text; in a flex label the gap of the label spaces them. The list
   "Op deze plek" of the map has no icons, only a line beside a row (retailer-visibility.css). */
.retailer-own-location-icon, .retailer-competitor-icon { --retailer-marker-icon-colour: var(--success-600); display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1rem; height: 1rem; color: var(--retailer-marker-icon-colour); line-height: 1; vertical-align: -.1875rem; }
.retailer-competitor-icon { --retailer-marker-icon-colour: #ea580c; }
.retailer-own-location-icon-svg, .retailer-competitor-icon-svg { display: block; width: 100%; height: 100%; }
.dark .retailer-own-location-icon { --retailer-marker-icon-colour: var(--success-400); }
.dark .retailer-competitor-icon { --retailer-marker-icon-colour: #fb923c; }

/* Account pages: the row actions of the subscription table. */
.retailer-account-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem; }

/* Kies een locatie: the modal behind ⇅ in the block at the top of the menu. The search, the table and the pages under
   each other; the name of a row is its button for the keyboard, ● marks the current location. */
.retailer-location-switcher { display: grid; gap: 1rem; }
.retailer-location-switcher-table { min-width: 32rem; }
.retailer-location-switcher-table tbody th { width: auto; min-width: 12rem; white-space: normal; }
.retailer-location-switcher-table .retailer-data-table-status-cell { width: 6.5rem; padding-inline: .5rem; }
.retailer-location-switcher-name { display: flex; width: 100%; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.retailer-location-switcher-name .retailer-data-table-label { align-items: flex-start; }
.retailer-location-switcher-name .retailer-data-table-label-text > span:first-child { color: var(--gray-950); font-weight: 600; overflow-wrap: anywhere; }
.retailer-location-switcher-name:hover .retailer-data-table-label-text > span:first-child { text-decoration: underline; }
.retailer-location-switcher-name:focus-visible { border-radius: .25rem; outline: 2px solid var(--primary-500); outline-offset: 2px; }
.retailer-location-switcher-current { color: var(--primary-600); }
.retailer-location-switcher-value { display: inline-flex; align-items: baseline; gap: .25rem; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: help; }
.retailer-location-switcher-value > .retailer-data-table-status-icon { align-self: center; }
.dark .retailer-location-switcher-name .retailer-data-table-label-text > span:first-child { color: white; }
.dark .retailer-location-switcher-current { color: var(--primary-400); }
/* The gold crown beside the name of a Pro location (partials/pro-icon), here and in the block at the top of the menu. */
.retailer-location-switcher-pro { display: inline-flex; width: 1.125rem; height: 1.125rem; margin-inline-start: .25rem; color: #b8860b; vertical-align: -.1875rem; }
.retailer-location-switcher-pro-svg { display: block; width: 100%; height: 100%; }
.dark .retailer-location-switcher-pro { color: #ffd75e; }

/* The block at the top of the menu with two or more locations: ⇅ is the one button of the card, stretched over all of
   it, so a click on the name or the street opens "Kies een locatie" too. */
.fi-sidebar-group > .fi-section.retailer-location-switcher-card { position: relative; cursor: pointer; }
.fi-sidebar-group > .fi-section.retailer-location-switcher-card:hover { background-color: var(--gray-50); }
.dark .fi-sidebar-group > .fi-section.retailer-location-switcher-card:hover { background-color: var(--gray-800); }
.retailer-location-switcher-card .fi-icon-btn { position: static; cursor: pointer; }
.retailer-location-switcher-card .fi-icon-btn::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-xl); }

/* The block of the current location in the menu: the location card, Overzicht (the group without a label) and the
   groups about the location (retailer-location-scope) share one light primary tint, one rounded panel over the gaps
   between them, so it is clear they belong to the selected location. The panel sticks out .5rem on both sides, so its
   icons stay in line with those of Account; an item in it turns white when active or hovered, like the card. */
.fi-sidebar-nav .retailer-location-scope,
.fi-panel-retailer .fi-sidebar-nav-groups > .fi-sidebar-group[data-group-label=""] {
    margin-inline: -.5rem;
    margin-block-end: -1.75rem;
    padding-inline: .5rem;
    padding-block-end: 1.75rem;
    background-color: var(--primary-50);
    --retailer-location-scope-edge: var(--primary-200);
    box-shadow: inset 1px 0 0 var(--retailer-location-scope-edge), inset -1px 0 0 var(--retailer-location-scope-edge);
}
.fi-sidebar-nav .retailer-location-scope-card { box-shadow: inset 1px 0 0 var(--retailer-location-scope-edge), inset -1px 0 0 var(--retailer-location-scope-edge), inset 0 1px 0 var(--retailer-location-scope-edge); padding-block-start: .5rem; border-start-start-radius: var(--radius-xl); border-start-end-radius: var(--radius-xl); }
.fi-sidebar-nav-groups > .retailer-location-scope:not(.retailer-location-scope-card):not(:has(+ .retailer-location-scope)) {
    margin-block-end: 0;
    padding-block-end: .5rem;
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);
    box-shadow: inset 1px 0 0 var(--retailer-location-scope-edge), inset -1px 0 0 var(--retailer-location-scope-edge), inset 0 -1px 0 var(--retailer-location-scope-edge);
}
.retailer-location-scope .fi-sidebar-item-btn:hover,
.retailer-location-scope .fi-sidebar-item-btn:focus-visible,
.retailer-location-scope .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-panel-retailer .fi-sidebar-group[data-group-label=""] .fi-sidebar-item-btn:hover,
.fi-panel-retailer .fi-sidebar-group[data-group-label=""] .fi-sidebar-item-btn:focus-visible,
.fi-panel-retailer .fi-sidebar-group[data-group-label=""] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: white; }
.dark .fi-sidebar-nav .retailer-location-scope,
.dark .fi-panel-retailer .fi-sidebar-nav-groups > .fi-sidebar-group[data-group-label=""] { --retailer-location-scope-edge: color-mix(in oklab, var(--primary-400) 30%, transparent); background-color: color-mix(in oklab, var(--primary-400) 8%, transparent); }
.dark .retailer-location-scope .fi-sidebar-item-btn:hover,
.dark .retailer-location-scope .fi-sidebar-item-btn:focus-visible,
.dark .retailer-location-scope .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.dark .fi-panel-retailer .fi-sidebar-group[data-group-label=""] .fi-sidebar-item-btn:hover,
.dark .fi-panel-retailer .fi-sidebar-group[data-group-label=""] .fi-sidebar-item-btn:focus-visible,
.dark .fi-panel-retailer .fi-sidebar-group[data-group-label=""] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--gray-900); }

/* Upgraden naar Pro: the locations of "Kies een locatie" with a checkbox column, about 5 rows high before it scrolls */
.retailer-pro-checkout-locations { max-height: 22rem; overflow-y: auto; }
.retailer-data-table .retailer-pro-checkout-check { width: 1%; padding-inline-end: 0; vertical-align: middle; }
.retailer-pro-checkout-locations tbody th { vertical-align: middle; }