/* ------------------------------------------------------------------
   Customer Information (/customers) — the redesigned panel (demo: public/demo/customer-information.html).

   EVERYTHING here is written under `.cx`, the wrapper templates/reference/customer/index.html.twig puts
   round the page. The vehicle card, the view switch, the pager, the badges and the buttons are shared
   with other screens (equipment, stock, the boards), so a rule against those classes on their own would
   restyle all of them; scoped under `.cx` they cannot be reached. Do not "simplify" a selector here by
   dropping the `.cx`.

   Theme: light is the default; `[data-bs-theme="dark"]` swaps the tokens for the green-black palette.
   Specificity: app.css (loaded first) styles .vehicle-card up to (0,2,0) in dark, so the card rules
   carry `.cx .vehicle-card.customer-card` (0,3,0) rather than leaning on source order or !important.
   ------------------------------------------------------------------ */

.cx {
    --cx-panel: #ffffff;
    --cx-card: #ffffff;
    --cx-card-hover: #f4fbf8;
    --cx-field: #ffffff;
    --cx-line: #d9dfe7;
    --cx-line-2: #c9d1dc;
    --cx-ink: #1d2126;
    --cx-muted: #5f6b7a;
    --cx-green: #00de91;
    --cx-green-ink: #04170f;
    --cx-green-text: #0a7a52;
    --cx-active: #e6f8f0;
    --cx-chip-bg: #e3f6ec;
    --cx-chip-line: #8ecaa1;
    --cx-avatar: #1fbf7e;
    --cx-avatar-co-bg: #e8ecf1;
    --cx-avatar-co-ink: #4b5563;
    --cx-focus: #00b87a;
    color: var(--cx-ink);
}
[data-bs-theme="dark"] .cx {
    --cx-panel: #0b1a15;
    --cx-card: #0c1b16;
    --cx-card-hover: #0d201a;
    --cx-field: #0a1713;
    --cx-line: #16302a;
    --cx-line-2: #1f4036;
    --cx-ink: #e8f1ed;
    --cx-muted: #8fa59c;
    --cx-green: #2ddf94;
    --cx-green-text: #2ddf94;
    --cx-active: #0b2119;
    --cx-chip-bg: #0b2a1e;
    --cx-chip-line: #1d7a56;
    --cx-avatar-co-bg: #1c2b27;
    --cx-avatar-co-ink: #c4d3cd;
    --cx-focus: #2ddf94;
}

/* Wide page: the five-across grid wants the room the default 1200px cap would take away. */
.app__main.app__main--board:has(> .cx),
.app__main.app__main--board:has(.cx) { max-width: none; }

.cx .cx-icon { width: 1rem; height: 1rem; flex: none; }

/* ---- Header ---- */
.cx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.cx .cx-head .page-title { font-size: 1.9rem; font-weight: 600; margin: 0.1rem 0 0.3rem; }
.cx-head__sub { margin: 0; font-size: 0.9rem; color: var(--cx-muted); }
.cx-head__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.cx .cx-head__actions .btn { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding-inline: 1.5rem; font-weight: 600; border-radius: 8px; }
.cx .cx-head__actions .cx-icon { width: 1.1rem; height: 1.1rem; }

/* ---- Toolbar: scope, count, search, view switch on one row ---- */
.cx-bar { display: flex; align-items: center; gap: 1.25rem; margin: 1.3rem 0 1.25rem; flex-wrap: wrap; }
.cx-bar__cards { display: flex; align-items: center; gap: 1.25rem; flex: 1 1 22rem; min-width: 0; }
.cx-bar__cards[hidden] { display: none; }
.cx-bar__views { margin-inline-start: auto; }
.cx .panel-count { font-size: 0.8rem; color: var(--cx-muted); }
.cx-search {
    flex: 1 1 auto; max-width: 37rem; min-width: 0; display: flex; align-items: center; gap: 0.6rem;
    height: 2.6rem; padding: 0 0.85rem; border: 1px solid var(--cx-line-2); border-radius: 8px;
    background: var(--cx-field); color: var(--cx-muted); margin: 0;
}
.cx-search:focus-within { border-color: var(--cx-focus); }
.cx .cx-search .table-tools__search {
    flex: 1 1 auto; min-width: 0; width: auto; height: auto; padding: 0; border: 0; outline: 0;
    background: transparent; color: var(--cx-ink); font-size: 0.85rem; box-shadow: none;
}
.cx .cx-search .table-tools__search::placeholder { color: var(--cx-muted); opacity: 1; }

.cx .view-switch { border: 1px solid var(--cx-line-2); border-radius: 8px; background: var(--cx-field); }
.cx .view-switch__btn {
    display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.5rem; padding: 0 1.25rem;
    background: transparent; color: var(--cx-muted); font-size: 0.85rem;
}
.cx .view-switch__btn + .view-switch__btn { border-inline-start: 1px solid var(--cx-line-2); }
.cx .view-switch__btn:hover { color: var(--cx-ink); }
.cx .view-switch__btn.is-active { background: var(--cx-green); color: var(--cx-green-ink); font-weight: 600; }
/* The Card/Table switch reads as an outlined selection rather than a filled one (the Live/All scope
   keeps the filled green). */
.cx .cx-bar__views .view-switch__btn.is-active {
    background: var(--cx-active); color: var(--cx-green-text); box-shadow: inset 0 0 0 1px var(--cx-green); font-weight: 400;
}

/* ---- Card grid ---- */
.cx .customer-card-grid { grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 0.75rem 0.65rem; }
.cx .vehicle-card.customer-card {
    background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 8px; box-shadow: none; overflow: hidden;
    min-height: 8.7rem; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cx .vehicle-card.customer-card:hover,
.cx .vehicle-card.customer-card:focus-visible { border-color: var(--cx-green); background: var(--cx-card-hover); }
.cx .vehicle-card.customer-card:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cx .customer-card .vehicle-card__body { padding: 0.75rem 0.75rem 0.7rem 0.65rem; gap: 0; flex: 1 1 auto; }
.cx .customer-card__top { display: flex; align-items: center; gap: 0.7rem; }
.cx .customer-card__top > .cx-icon { margin-inline-start: auto; color: var(--cx-muted); width: 0.9rem; height: 0.9rem; align-self: flex-start; margin-top: 0.35rem; }
.cx .customer-card__id { min-width: 0; flex: 1 1 auto; }
.cx .customer-card .vehicle-card__reg { font-family: var(--bs-font-ui); font-size: 0.82rem; font-weight: 600; color: var(--cx-ink); line-height: 1.25; overflow-wrap: anywhere; }
.cx .customer-card .vehicle-card__model { font-size: 0.72rem; font-weight: 400; color: var(--cx-muted); margin-top: 0.15rem; }
.cx .customer-card__avatar {
    width: 2.15rem; height: 2.15rem; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--cx-avatar); color: var(--cx-green-ink); font-weight: 700; font-size: 0.8rem;
}
.cx .customer-card__avatar--company { background: var(--cx-avatar-co-bg); color: var(--cx-avatar-co-ink); }
.cx .customer-card__avatar .cx-icon { width: 1.15rem; height: 1.15rem; }
.cx .customer-card__contact {
    display: flex; align-items: center; gap: 0.65rem; margin-top: 0.5rem; font-size: 0.72rem; color: var(--cx-muted); min-width: 0;
}
.cx .customer-card__contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cx .customer-card__vehicles { align-items: center; flex-wrap: nowrap; gap: 0.35rem; margin-top: 0.7rem; font-size: 0.72rem; color: var(--cx-ink); }
.cx .customer-card__vehicles > .cx-icon { color: var(--cx-muted); }
.cx .customer-card__count { white-space: nowrap; }
.cx .customer-card__vehicles .badge-flag--green {
    font-family: var(--bs-font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
    padding: 0.18rem 0.3rem; border-radius: 4px; background: var(--cx-chip-bg); border: 1px solid var(--cx-chip-line); color: var(--cx-green-text);
}

/* ---- Pager ---- */
.cx .pager { gap: 0.5rem; margin-top: 1rem; }
.cx .pager__btn {
    min-width: 2.3rem; min-height: 2.2rem; border: 1px solid var(--cx-line-2); border-radius: 7px; background: var(--cx-field);
    color: var(--cx-ink); font-size: 0.8rem; padding: 0 0.85rem;
}
.cx .pager__btn.is-active { background: var(--cx-green); border-color: var(--cx-green); color: var(--cx-green-ink); font-weight: 700; }
.cx .pager__btn:hover:not(:disabled):not(.is-active) { border-color: var(--cx-green); }
.cx .pager__btn:disabled { color: var(--cx-muted); opacity: 0.6; }

/* ---- Table view: same frame, so switching views keeps the page's look ---- */
.cx .panel { background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 8px; box-shadow: none; }

@media (max-width: 760px) {
    .cx-bar__views { margin-inline-start: 0; }
    .cx-search { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cx .vehicle-card.customer-card { transition: none; }
}

/* ---- Table view, in the shared look ----
   The table's frame is the same black panel, neon-green edge and soft glow as the other pages; rows are compact and hover quietly; the
   name leads with the card avatar; type is a chip, email and phone sit on two lines, the vehicle count is a figure, and the action
   buttons are small and keep to one line. Long names / addresses wrap rather than stretch the table. */
.cx .panel[data-view="table"] {
    border: 1.5px solid transparent; border-radius: 12px; overflow: hidden;
    background: linear-gradient(var(--cx-card), var(--cx-card)) padding-box, linear-gradient(155deg, #05b36e 0%, #048a56 55%, #02442d 100%) border-box;
    box-shadow: 0 0 22px -4px rgba(5, 179, 110, 0.11), inset 0 0 26px -14px rgba(5, 179, 110, 0.11);
}
[data-bs-theme="dark"] .cx .panel[data-view="table"] { background: linear-gradient(#000, #000) padding-box, linear-gradient(155deg, #05b36e 0%, #048a56 55%, #02442d 100%) border-box; }
.cx .panel[data-view="table"][hidden] { display: none; }
.cx .panel[data-view="table"] > .empty-state { padding: 0.9rem 1rem; text-align: start; font-size: 0.85rem; color: var(--cx-muted); }
.cx .cx-table { background: none; border-radius: 0; }
.cx .cx-table .table-tools { margin: 0; padding: 0.6rem 0.85rem; gap: 0.6rem; border-bottom: 1px solid var(--cx-line); }
.cx .cx-table .table-tools input, .cx .cx-table .table-tools select {
    box-sizing: border-box; min-height: 2.1rem; padding: 0.3rem 0.8rem; border: 1px solid var(--cx-line-2); border-radius: 8px;
    background-color: var(--cx-field); color: var(--cx-ink); font: inherit; font-size: 0.84rem;
}
[data-bs-theme="dark"] .cx .cx-table .table-tools input, [data-bs-theme="dark"] .cx .cx-table .table-tools select { background-color: #000; border-color: #333; }
.cx .cx-table .data-table { width: 100%; }
.cx .cx-table .data-table thead th {
    padding: 0.55rem 0.8rem; white-space: nowrap; font-family: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em;
    text-transform: none; color: var(--cx-muted); border-bottom: 1px solid var(--cx-line); background: transparent;
}
.cx .cx-table .data-table tbody td { padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--cx-line); font-size: 0.86rem; vertical-align: middle; overflow-wrap: anywhere; }
[data-bs-theme="dark"] .cx .cx-table .data-table tbody td { border-bottom-color: #1c1c1c; }
.cx .cx-table .data-table tbody tr:last-child td { border-bottom: 0; }
.cx .cx-table .data-table tbody tr:hover { background: var(--cx-card-hover); }
[data-bs-theme="dark"] .cx .cx-table .data-table tbody tr:hover { background: #141414; }
.cx .cx-table__name { display: flex; align-items: center; gap: 0.65rem; min-width: 12rem; }
.cx .cx-table .cx-table__avatar { width: 1.8rem; height: 1.8rem; font-size: 0.7rem; }
.cx .cx-table .cx-table__avatar .cx-icon { width: 1rem; height: 1rem; }
.cx .cx-table .entity-link { color: var(--cx-ink); text-decoration: none; font-weight: 600; }
.cx .cx-table .entity-link:hover { text-decoration: underline; }
.cx .cx-table__contact { color: var(--cx-muted); line-height: 1.35; }
.cx .cx-table__contact > span { display: block; }
.cx .cx-table__count { display: inline-block; min-width: 1.6rem; padding: 0.1rem 0.45rem; border-radius: 999px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cx-ink); background: color-mix(in srgb, var(--cx-muted) 16%, transparent); }
.cx .cx-table .data-table__actions { width: 1%; white-space: nowrap; }
.cx .cx-table .data-table__actions > * { display: inline-flex; vertical-align: middle; }
.cx .cx-table .data-table__actions form { margin: 0; }
.cx .cx-table .btn--sm { height: 1.85rem; padding: 0 0.7rem; font-size: 0.78rem; border-radius: 8px; font-weight: 600; }

/* ---- Table view, with no wasted space ----
   The panel shrinks to the table's own width (growing with long names or addresses up to the page width) instead of stretching
   a few short columns across the row; padding is trimmed, email and phone share one line, and nothing keeps a minimum width. */
.cx .panel[data-view="table"]:has(.cx-table) { width: fit-content; max-width: 100%; min-width: min(100%, 26rem); }
.cx .cx-table .table-tools { padding: 0.4rem 0.6rem; }
.cx .cx-table .data-table thead th { padding: 0.4rem 0.6rem; }
.cx .cx-table .data-table tbody td { padding: 0.3rem 0.6rem; }
.cx .cx-table .data-table thead th:first-child, .cx .cx-table .data-table tbody td:first-child { padding-inline-start: 0.75rem; }
.cx .cx-table .data-table thead th:last-child, .cx .cx-table .data-table tbody td:last-child { padding-inline-end: 0.75rem; }
.cx .cx-table__name { min-width: 0; gap: 0.5rem; }
.cx .cx-table__contact > span { display: inline; }
.cx .cx-table__contact > span + span::before { content: " · "; color: var(--cx-muted); }
.cx .cx-table .data-table__num { text-align: center; }
.cx .cx-table .data-table thead th.data-table__num { text-align: center; }
.cx .cx-table .data-table__actions { padding-inline-start: 0.4rem; }
.cx .cx-table .data-table__actions > * + * { margin-inline-start: 0.25rem; }

/* The table view's own search box draws its magnifying glass as a background image at the left, so the text needs room clear of it
   (the general field padding above had pulled the text back over the icon). */
.cx .cx-table .table-tools input.table-tools__search { padding-inline-start: 2.4rem; background-position: 0.8rem center; }

/* Company customers: the building icon beside the name is neon blue (cards and table alike). */
.cx { --cx-company-blue: #00a2f5; }
[data-bs-theme="dark"] .cx { --cx-company-blue: #1fb8ff; }
.cx .customer-card__avatar--company { color: var(--cx-company-blue); background: color-mix(in srgb, var(--cx-company-blue) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cx-company-blue) 55%, transparent); }
.cx .customer-card__avatar--company .cx-icon { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cx-company-blue) 55%, transparent)); }