/* Maps Radzen's CSS variables onto SEVERITY5 design tokens and sets app-wide
   base styles. Load order in the host: Radzen base theme, tokens.css, theme.css.
   Override Radzen via variables, never selectors — survives Radzen upgrades. */

:root {
    --rz-primary: var(--s5-color-primary);
    --rz-primary-light: color-mix(in srgb, var(--s5-color-primary) 70%, #ffffff);
    --rz-primary-lighter: color-mix(in srgb, var(--s5-color-primary) 16%, transparent);
    --rz-primary-dark: var(--s5-color-primary-strong);
    --rz-primary-darker: color-mix(in srgb, var(--s5-color-primary-strong) 80%, #000000);

    --rz-secondary: var(--s5-color-accent);
    --rz-success: var(--s5-success);
    --rz-danger: var(--s5-danger);
    --rz-warning: var(--s5-warning);
    --rz-info: var(--s5-info);

    --rz-base-background-color: var(--s5-bg);
    --rz-body-background-color: var(--s5-bg);
    --rz-content-background-color: var(--s5-surface);
    --rz-panel-background-color: var(--s5-surface);

    --rz-text-color: var(--s5-text);
    --rz-text-secondary-color: var(--s5-text-muted);
    --rz-text-title-color: var(--s5-text);
    --rz-text-contrast-color: var(--s5-text-on-primary);

    --rz-border-radius: var(--s5-radius-sm);
    --rz-input-background-color: var(--s5-surface-muted);
    --rz-input-border: 1px solid var(--s5-border);
    --rz-input-value-color: var(--s5-text);
    --rz-input-placeholder-color: var(--s5-text-muted);

    --rz-grid-header-background-color: var(--s5-surface-muted);
    --rz-grid-stripe-background-color: transparent;
    --rz-grid-hover-background-color: color-mix(in srgb, var(--s5-color-primary) 8%, transparent);
    --rz-grid-foot-background-color: var(--s5-surface-muted);
    --rz-grid-foot-cell-color: var(--s5-text);

    /* Modern grid chrome: kill the light default borders that read as
       white hairlines on the dark theme. */
    --rz-grid-border: none;
    --rz-grid-cell-border: none;
    --rz-grid-header-border: 1px solid var(--s5-border);
    --rz-grid-header-cell-border: none;
    --rz-grid-foot-cell-border-top: 1px solid var(--s5-border);
    --rz-grid-frozen-cell-shadow: none;

    /* Dropdown highlight was white-on-white: selected + hover states must
       carry dark-theme colors explicitly. */
    --rz-dropdown-item-hover-background-color: color-mix(in srgb, var(--s5-color-primary) 16%, transparent);
    --rz-dropdown-item-hover-color: var(--s5-text);
    --rz-dropdown-item-selected-background-color: color-mix(in srgb, var(--s5-color-primary) 26%, transparent);
    --rz-dropdown-item-selected-color: var(--s5-text);
    --rz-multiselect-item-hover-background-color: color-mix(in srgb, var(--s5-color-primary) 16%, transparent);
    --rz-multiselect-item-hover-color: var(--s5-text);
    --rz-multiselect-item-selected-background-color: color-mix(in srgb, var(--s5-color-primary) 26%, transparent);
    --rz-multiselect-item-selected-color: var(--s5-text);

    --rz-dialog-background-color: var(--s5-surface);
    --rz-notification-content-color: var(--s5-text);

    /* Radzen's neutral "base" ramp ships LIGHT (base-100 #f5f5f5 … base-200
       #eeeeee … base-900 #212121) because the app loads material-base.css.
       Left unmapped, that ramp bleeds through as unreadable text:
         • filled Base buttons paint --rz-base-200 (near-white) behind
           --rz-text-color (near-white on the dark theme) — white-on-white;
         • every menu / pager / autocomplete / listbox hover paints
           --rz-base-100 (near-white) behind light hover text — text vanishes
           the instant you point at the row.
       Remap the ramp onto S5 surface tokens. Those tokens already flip with
       the theme (see tokens.css [data-theme="light"]), so a single mapping
       keeps both light AND dark legible — no second block needed. */
    --rz-base: var(--s5-surface-muted);
    --rz-base-50: var(--s5-bg);
    --rz-base-100: var(--s5-surface-muted);
    --rz-base-200: var(--s5-surface-muted);
    --rz-base-300: var(--s5-border);
    --rz-base-light: var(--s5-surface);
    --rz-base-lighter: var(--s5-surface);
    --rz-base-dark: var(--s5-text-muted);
    --rz-base-darker: var(--s5-text);
    /* Text painted ON those base surfaces must follow the theme foreground,
       not Radzen's baked-in near-black (#212121 on-base) — which would be
       black-on-dark once the surface goes dark. */
    --rz-on-base: var(--s5-text);
    --rz-on-base-light: var(--s5-text);
    --rz-on-base-lighter: var(--s5-text);

    /* Menu / context-menu / split-button hover: Radzen keys these off
       --rz-base-100 (now themed above) but also hard-references it for the
       hover text target on some skins — pin the pair explicitly so the
       office context menus and profile menu never flash white-on-white. */
    --rz-menu-item-hover-background-color: color-mix(in srgb, var(--s5-color-primary) 12%, transparent);
    --rz-menu-item-hover-color: var(--s5-text);
    --rz-menu-item-color: var(--s5-text);
    --rz-menu-item-icon-color: var(--s5-text-muted);
    --rz-menu-item-icon-hover-color: var(--s5-text);
}

/* Row separators: one soft line, no vertical cell rules — the dated
   "spreadsheet border" look came from Radzen's per-cell borders. */
.rz-grid-table td,
.rz-grid-table th {
    border-left: none !important;
    border-right: none !important;
}

.rz-grid-table td {
    border-bottom: 1px solid color-mix(in srgb, var(--s5-border) 60%, transparent) !important;
}

.rz-grid-table tr:last-child td {
    border-bottom: none !important;
}

.rz-data-grid {
    border: 1px solid var(--s5-border) !important;
    border-radius: var(--s5-radius) !important;
    overflow: hidden;
}

body {
    background: var(--s5-bg);
    color: var(--s5-text);
    font-family: var(--s5-font-family);
    margin: 0;
}

/* ── Hover hints ────────────────────────────────────────────
   Clean, theme-aware tooltips on any element with [data-hint].
   Default position is to the RIGHT (for the left nav rail);
   [data-hint-pos="bottom"] flips it below (top bars, buttons). */
[data-hint] { position: relative; }
[data-hint]::after {
    content: attr(data-hint);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--s5-surface-muted, #171a27);
    color: var(--s5-text, #e7e9f3);
    border: 1px solid var(--s5-border, #232738);
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--s5-shadow, 0 4px 24px rgba(0, 0, 0, 0.35));
    opacity: 0;
    pointer-events: none;
    z-index: 1200;
    transition: opacity 0.12s ease, transform 0.12s ease;
}
[data-hint]:hover::after,
[data-hint]:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    transition-delay: 0.35s;
}
[data-hint-pos="bottom"]::after {
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
[data-hint-pos="bottom"]:hover::after,
[data-hint-pos="bottom"]:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}

/* In-app media/document viewer (S5MediaViewer via IS5DialogService.ShowMedia/
   ShowDocument). The viewer paints its own dark chrome edge-to-edge, so kill
   the Radzen dialog's default padding and let it fill the panel. */
.s5-media-dialog .rz-dialog-content { padding: 0 !important; }
.s5-media-dialog .rz-dialog { padding: 0 !important; }
.s5-media-dialog .rz-dialog-content > * { height: 100%; }

/* ── Mobile: data grids → cards ───────────────────────────────
   On a phone a wide desktop table (name|phone|city|…) forces sideways
   scroll and feels like a webpage. Below the mobile breakpoint we reflow
   every S5DataGrid (.s5-grid) into stacked, tappable cards: header row
   hidden, each row a bordered card, the first cell the bold title, the
   rest muted detail lines. Desktop is untouched (rules only ≤820px). */
@media (max-width: 820px) {
    .s5-grid .rz-datatable-thead,
    .s5-grid .rz-datatable-scrollable-header,
    .s5-grid thead { display: none !important; }

    .s5-grid .rz-grid-table,
    .s5-grid .rz-datatable-data,
    .s5-grid tbody { display: block !important; width: 100% !important; }

    .s5-grid .rz-data-row,
    .s5-grid tbody > tr {
        display: block !important;
        width: 100% !important;
        border: 1px solid var(--s5-border) !important;
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 12px 14px;
        background: color-mix(in srgb, var(--s5-bg) 88%, white 4%);
        position: relative;
    }
    /* kill Radzen's zebra + hover backgrounds on the card */
    .s5-grid .rz-datatable-even,
    .s5-grid .rz-datatable-odd { background: color-mix(in srgb, var(--s5-bg) 88%, white 4%) !important; }

    .s5-grid .rz-data-row > .rz-cell-data,
    .s5-grid tbody > tr > td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        border: none !important;
        padding: 1px 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        color: var(--s5-text-muted);
        font-size: 0.86rem;
    }
    /* first cell = the title (name), prominent */
    .s5-grid .rz-data-row > .rz-cell-data:first-child,
    .s5-grid tbody > tr > td:first-child {
        color: var(--s5-text);
        font-weight: 700;
        font-size: 1rem;
        margin-bottom: 2px;
        padding-right: 1.2rem !important; /* room for the chevron */
    }
    /* empty cells (e.g. an unset tag column) shouldn't leave blank lines */
    .s5-grid .rz-data-row > .rz-cell-data:empty,
    .s5-grid tbody > tr > td:empty { display: none !important; }

    /* tap affordance */
    .s5-grid .rz-data-row::after {
        content: "›";
        position: absolute;
        top: 12px;
        right: 12px;
        color: var(--s5-text-muted);
        font-size: 1.3rem;
        line-height: 1;
    }
}

/* ── Customer map markers (s5-customer-map.js) ── */
.s5cm-pin { position: relative; width: 18px; height: 18px; }
.s5cm-dot {
    position: absolute; inset: 3px; border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.5);
}
.s5cm-dot-primary { inset: 1px; box-shadow: 0 0 0 3px rgba(0,0,0,0.55); }
.s5cm-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid currentColor;
    animation: s5cm-pulse 1.8s ease-out infinite;
    opacity: 0.7;
}
@keyframes s5cm-pulse {
    0%   { transform: scale(0.6); opacity: 0.8; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
.s5cm-you {
    width: 16px; height: 16px; border-radius: 50%;
    background: #3b82f6; border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(59,130,246,0.9);
}

/* Native-app feel: kill the long-press callout menu + accidental text
   selection everywhere (they float iOS bars over the app). Inputs and
   explicitly-selectable text still select. */
* { -webkit-touch-callout: none; }
html, body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable="true"], .s5-selectable { -webkit-user-select: text; user-select: text; }

/* Media/document viewer: full-screen on phones so opening a photo/PDF stays a
   mobile experience, not a floating desktop panel. */
@media (max-width: 820px) {
    .rz-dialog-wrapper:has(.s5-media-dialog),
    .s5-media-dialog {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
    }
    .s5-media-dialog .rz-dialog-content { height: 100vh !important; }
}