html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ApexCharts — petit espace entre la pastille de couleur et le label de légende.
   Par défaut il y en a zéro, ça colle. */
.apexcharts-legend-marker {
    margin-right: 6px !important;
}

/* ===================================================================
   ApexCharts dark-mode tweaks
   Le tooltip et les axis labels d'ApexCharts utilisent du blanc / noir
   hardcodes qui restent illisibles quand on switch en dark mode. On
   force ici l'utilisation des variables MudBlazor (--mud-palette-*)
   qui s'adaptent au theme courant.
   =================================================================== */

/* Tooltip box (le rectangle qui apparait au hover) */
.apexcharts-tooltip,
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}

/* Header du tooltip (date / categorie) */
.apexcharts-tooltip-title,
.apexcharts-tooltip-title.apexcharts-theme-light,
.apexcharts-tooltip-title.apexcharts-theme-dark {
    background: var(--mud-palette-background-grey) !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

/* Valeurs dans le tooltip */
.apexcharts-tooltip-text,
.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-goals-label,
.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-text-z-label,
.apexcharts-tooltip-text-z-value {
    color: var(--mud-palette-text-primary) !important;
}

/* Tooltip pour les charts xaxis (bar / line) */
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}
.apexcharts-xaxistooltip-bottom:before,
.apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: var(--mud-palette-lines-default) !important;
}
.apexcharts-xaxistooltip-top:before,
.apexcharts-xaxistooltip-top:after {
    border-top-color: var(--mud-palette-lines-default) !important;
}

/* Tooltip series legend marker — adapte le contraste */
.apexcharts-tooltip-marker {
    border: 1px solid var(--mud-palette-text-secondary) !important;
}

/* Hover line / bar overlay (la zone fonce qui apparait au hover sur une bar)
   en light mode elle est noire 20%, en dark mode trop sombre — on force
   un overlay neutre qui marche dans les 2. */
.apexcharts-bar-hover-area,
.apexcharts-area-series .apexcharts-area {
    /* laisse ApexCharts gerer, on ne touche pas */
}

/* ===================================================================
   Click ergonomics — Vision 2.0
   The entire <a> / button must be the click target, not just the text.
   Applies to:
     - MudNavLink     (left drawer items, root + nested under MudNavGroup)
     - MudNavGroup    (the expandable parent header itself)
     - MudTabPanel    (top tab strip, e.g. /clients/{id} Profile/Account/…)
     - MudListItem    (used in some MCP-like dropdown lists)
   =================================================================== */

/* The actual <a> the navlink renders — make it span 100 % of its row,
   give it real height, and put the padding on the link itself so the
   padding is part of the click area. */
a.mud-nav-link,
.mud-nav-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

/* Nested items under <MudNavGroup> get a slightly bigger left indent
   instead of less padding — keeps full clickable width. */
.mud-nav-group .mud-nav-item .mud-nav-link {
    min-height: 40px !important;
    padding-left: 32px !important;
}

/* The MudNavGroup parent row (the one with the chevron). Default has
   small padding which makes the chevron-area cramped. */
.mud-nav-group > .mud-nav-link,
.mud-nav-group .mud-nav-link.mud-nav-link-disabled,
.mud-expand-panel-header,
button.mud-nav-link {
    min-height: 44px !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
}

/* Active row — make it visually obvious which page you're on. */
.mud-nav-link.active {
    font-weight: 600;
}

/* MudTabs — make the whole tab button rectangle the click target.
   Defaults render the icon/text in a child span that catches clicks but
   doesn't always propagate cleanly; we force a generous min-height +
   padding on the <button class="mud-tab"> itself, drop spacing between
   tabs, and disable pointer-events on the inner content so any click
   inside the button area always fires the button. */
.mud-tabs-toolbar .mud-tab,
.mud-tab {
    cursor: pointer !important;
    min-height: 56px !important;
    padding: 0 22px !important;
    margin: 0 !important;
    /* Block default tap-highlight on iOS so the visible "click area" is
       exactly what the user sees — no surprise selection rectangle. */
    -webkit-tap-highlight-color: transparent;
}

/* The icon + label live inside .mud-tab-content (or .mud-tab-icon /
   .mud-tab-label). Stop them from absorbing pointer events — clicks
   pass straight through to the parent <button>. */
.mud-tab-content,
.mud-tab-icon,
.mud-tab-label,
.mud-tab > * {
    pointer-events: none !important;
}

/* Make the toolbar itself a tight flex row so there's no dead space
   between tabs that could swallow clicks. */
.mud-tabs-toolbar-inner-content,
.mud-tabs-toolbar-content,
.mud-tabs-toolbar {
    gap: 0 !important;
}

/* Hover affordance everywhere — clear cursor + subtle row highlight on
   nav links and tabs so the click area is visually obvious. */
.mud-nav-link:hover,
.mud-tab:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

/* MudListItem (used inside some Mud popovers / select dropdowns). */
.mud-list-item {
    cursor: pointer !important;
    min-height: 40px !important;
}

/* RichTextEditor — make <a href> visually distinct in the contenteditable
   div so operators can SEE where their links are. Without this, a plain
   <a> tag renders as black non-underlined text and looks identical to
   the surrounding paragraph. */
.rte-body a {
    color: #1f6fb2;
    text-decoration: underline;
    cursor: text;
}
.rte-body a:hover {
    color: #003D62;
}

/* Page-level "subtitle2 + Color.Secondary" descriptors — the orange
   text under page titles that explained where data was stored (e.g.
   "Stored in AW_CRM.dbo.Ticket_User…"). User asked to drop them
   everywhere; hiding via CSS keeps the source untouched (the dev-
   facing metadata is still right there in the .razor) but the end-
   user no longer sees an orange wall of dev notes. */
.mud-typography-subtitle2.mud-secondary-text {
    display: none !important;
}

/* ===================================================================
   Mobile layout — Vision 2.0
   The whole portal was sized for desktop: 32px container padding, big
   page headers, MudTable's mobile "card" mode that wastes a full row
   per cell, ~280px-wide search inputs that bleed off-screen, etc. The
   rules below make every page survive a 360px viewport without
   touching individual pages.
   =================================================================== */

/* Page container: comfortable padding on desktop, tight on phones.
   Replaces the old hard-coded "px-8 py-6" on MudContainer. */
.app-page-container {
    padding-left: 32px !important;
    padding-right: 32px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

@media (max-width: 600px) {
    .app-page-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Page titles — h4 default is ~2.125rem which dominates the screen
       on a phone. Pull it down to something readable. */
    .mud-typography-h4 {
        font-size: 1.4rem !important;
        line-height: 1.25 !important;
    }
    .mud-typography-h5 {
        font-size: 1.2rem !important;
        line-height: 1.25 !important;
    }
    .mud-typography-h6 {
        font-size: 1.05rem !important;
    }

    /* MudPaper used as filter/header cards — pa-4 (16px) is fine, but
       most pages stack a MudGrid of inputs inside. Tighten the gutters
       so two columns don't fight for space. */
    .mud-paper.pa-4 {
        padding: 12px !important;
    }

    /* Search/filter inputs frequently set Style="max-width:280px" inline.
       On a 360px viewport with 12px page padding that leaves 24px for
       neighbouring buttons. Force them to fill the available row. */
    .mud-input-control,
    .mud-select {
        max-width: 100% !important;
    }

    /* MudStack Row="true" used in page headers (icon + title + spacer +
       buttons). On phones the buttons get squashed off-screen. Allow
       wrapping. */
    .mud-stack-row {
        flex-wrap: wrap !important;
        row-gap: 6px !important;
    }

    /* MudTabs — the "Domains / Keywords / Adult keywords" strip on the
       Blacklist page renders with side-arrows because tabs overflow.
       Reduce per-tab padding so more tabs fit. */
    .mud-tabs-toolbar .mud-tab,
    .mud-tab {
        min-height: 48px !important;
        padding: 0 12px !important;
        font-size: 0.85rem !important;
    }

    /* MudTable in stacked/card mode (Breakpoint=Sm/Md).
       Mud's default on phones makes each cell its own line and pins
       values right — even short tables like Blacklist (ID + name + 2
       icons) waste 4 vertical lines per row. We want short rows on a
       single line and long rows to wrap naturally.

       Approach: row = horizontal flex-wrap container, cells = inline
       auto-width chunks, no Mud-injected labels (they were noise), and
       any cell that holds an action button/icon flows to the far end. */
    .mud-table-row.mud-table-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 4px !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid var(--mud-palette-divider);
    }
    .mud-table-row .mud-table-cell {
        display: inline-flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 0 !important;
        border: 0 !important;
        min-height: 0 !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
        text-align: left !important;
        word-break: break-word !important;
    }
    /* Drop the data-label pseudo Mud injects in stacked mode — it
       reads like "Domain : foo.com   Actions : 🖉 🗑" which is
       overkill on small tables. */
    .mud-table-cell[data-label]::before {
        content: none !important;
        display: none !important;
    }
    /* Action cells (only buttons/icons) push to the right edge so the
       layout reads "data data data ... [edit] [delete]". */
    .mud-table-cell:has(> .mud-button-root:only-child),
    .mud-table-cell:has(> .mud-icon-button:only-child),
    .mud-table-cell:has(> .mud-icon-button:first-child:nth-last-child(-n+3)) {
        margin-left: auto !important;
    }
    /* Custom group header rows (when GroupBy is used). */
    .mud-table-cell.mud-table-cell-custom-group {
        font-weight: 600;
        padding: 8px 4px !important;
        flex: 1 1 100% !important;
    }

    /* Pagination footer / "Page X / Y" controls — let them wrap. */
    .mud-table-pagination-toolbar {
        flex-wrap: wrap !important;
        height: auto !important;
    }

    /* MudButton with StartIcon — on phones, hide labels would be too
       aggressive, but at least keep them from forcing the row to grow. */
    .mud-button {
        padding: 6px 10px !important;
        min-width: 0 !important;
    }

    /* Drawer width: the responsive drawer becomes Temporary at <Md but
       defaults to 240px. On a 360px screen that's fine, but the nav
       items had min-height:44px + 16px padding which crowded the user
       — tighten slightly. */
    .mud-drawer .mud-nav-link {
        min-height: 40px !important;
        padding: 6px 14px !important;
        font-size: 0.95rem !important;
    }

    /* Footer */
    .app-footer {
        padding: 10px 8px !important;
        font-size: 0.7rem !important;
    }
}