/* ============================================================
   GCB Atlas — Design Tokens (aligned with RendezVous theme)
   ============================================================ */
:root {
    /* Brand (dark defaults — Mondria orange, overridden by light mode below) */
    --gcb-primary:        #ff4200;
    --gcb-primary-dark:   #d63700;
    --gcb-primary-light:  #ff6a33;
    --gcb-accent:         #4ADE80;
    --gcb-accent-dark:    #22c55e;

    /* Surfaces (dark defaults — Mondria « nuit », overridden by light mode below) */
    --gcb-bg:             #031d2a;
    --gcb-bg-sidebar:     #021826;
    --gcb-surface:        #06283a;
    --gcb-elevated:       #0a3450;
    --gcb-input-bg:       #0a3450;

    /* Text (dark defaults — Mondria pâle) */
    --gcb-text-primary:   #dcf3f9;
    --gcb-text-secondary: #8fb3c4;
    --gcb-text-muted:     #4a6e82;

    /* Borders (sarcelle assombrie) */
    --gcb-border:         #0f4666;
    --gcb-border-strong:  #195876;

    /* Semantic */
    --gcb-success: #4ADE80;
    --gcb-warning: #ffb545;
    --gcb-error:   #ff4d6a;
    --gcb-info:    #4a86ff;

    /* Radius */
    --gcb-radius-sm:   4px;
    --gcb-radius-md:   8px;
    --gcb-radius-lg:   12px;
    --gcb-radius-xl:   16px;
    --gcb-radius-2xl:  20px;
    --gcb-radius-full: 9999px;

    /* Shadows */
    --gcb-shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --gcb-shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --gcb-shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
    --gcb-shadow-xl: 0 16px 48px rgba(0,0,0,0.7);

    /* Transitions */
    --gcb-transition:    150ms ease;
    --gcb-transition-md: 250ms ease;
}

/* Light mode overrides */
html:not(.mud-theme-dark) {
    --gcb-primary:        #1065e5;
    --gcb-primary-dark:   #0447bf;
    --gcb-primary-light:  #327bf5;
    --gcb-bg:             #f5f7fa;
    --gcb-bg-sidebar:     #ffffff;
    --gcb-surface:        #ffffff;
    --gcb-elevated:       #eef1f6;
    --gcb-input-bg:       #f5f7fa;
    --gcb-text-primary:   #374151;
    --gcb-text-secondary: #6b7280;
    --gcb-text-muted:     #9ca3af;
    --gcb-border:         #e0e3eb;
    --gcb-border-strong:  #c8ccd8;
    --gcb-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --gcb-shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --gcb-shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
    --gcb-shadow-xl: 0 16px 48px rgba(0,0,0,0.2);
}

/* ============================================================
   Utility classes
   ============================================================ */

/* Grille Devices — la rangée est un template unique sans en-têtes de colonnes :
   masquer le thead vide (il chevauchait la première ligne avec son trait de tri) */
.devices-grid .mud-table-head {
    display: none;
}

/* Logo Mondria — wordmark clair (#DCF3F9) : l'inversion le rend lisible sur fond clair */
.mondria-logo {
    opacity: 0.9;
}
html:not(.mud-theme-dark) .mondria-logo {
    filter: invert(1) hue-rotate(180deg);
}

/* Nom du produit à côté du wordmark Mondria dans l'AppBar */
.atlas-product-name {
    margin-left: 12px;
    padding-left: 14px;
    border-left: 1px solid var(--mud-palette-divider);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    line-height: 1.1;
    align-self: center;
}

/* Accent border cards */
.accent-border {
    border-left: 3px solid var(--gcb-primary) !important;
}
.accent-border-success { border-left: 3px solid var(--gcb-success) !important; }
.accent-border-warning { border-left: 3px solid var(--gcb-warning) !important; }
.accent-border-info    { border-left: 3px solid var(--gcb-info) !important; }
.accent-border-error   { border-left: 3px solid var(--gcb-error) !important; }

/* Hover lift */
.hover-lift {
    transition: transform var(--gcb-transition-md), box-shadow var(--gcb-transition-md);
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--gcb-shadow-md);
}

/* Status badges */
.gcb-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--gcb-radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
}
.gcb-badge-success { background: rgba(74,222,128,0.15); color: var(--gcb-success); }
.gcb-badge-warning { background: rgba(255,181,69,0.15); color: var(--gcb-warning); }
.gcb-badge-error   { background: rgba(255,77,106,0.15); color: var(--gcb-error); }
.gcb-badge-info    { background: rgba(74,134,255,0.15); color: var(--gcb-info); }
.gcb-badge-neutral { background: rgba(155,155,155,0.15); color: var(--gcb-text-secondary); }

/* Gradient text */
.gcb-gradient-text {
    background: linear-gradient(135deg, var(--gcb-primary), var(--gcb-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Avatar with gradient */
.gcb-avatar-initials {
    background: linear-gradient(135deg, var(--gcb-primary), var(--gcb-accent));
    color: #ffffff;
    font-weight: 600;
}

/* Page header */
.gcb-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.gcb-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gcb-text-primary);
    margin: 0;
}
.gcb-page-subtitle {
    font-size: 0.875rem;
    color: var(--gcb-text-secondary);
    margin: 0.25rem 0 0;
}

/* Section labels */
.gcb-section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gcb-text-muted);
    margin-bottom: 0.5rem;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gcb-elevated); border-radius: var(--gcb-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gcb-border-strong); }

/* ============================================================
   AppBar brand gradient text
   ============================================================ */
.atlas-brand-text {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, var(--gcb-primary), var(--gcb-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.5;
}

/* ============================================================
   Empty state cards KPI
   ============================================================ */
.gcb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    min-height: 120px;
}

.gcb-empty-state-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--mud-palette-primary-rgb, 16, 101, 229), 0.06);
    border: 1px solid rgba(var(--mud-palette-primary-rgb, 16, 101, 229), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.backdrop-blur {
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.name-column {
    width: 70%;
}

.quantity-column {
    width: 30%;
}

.semi-transparent-progress {
    opacity: 0.9; /* Ajustez la valeur pour définir le niveau de transparence */
}

.pale-text-with-shadow {
    color: rgba(255, 255, 255, 0.7); /* Couleur plus pâle */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Drop shadow */
}

.page-padding {
    padding-left: 20px; /* Adjust the padding value as needed */
    padding-right: 20px; /* Adjust the padding value as needed */
}

.chat-container {
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1rem;
    border-radius: 8px;
}

.transparent-border {
    border: none !important;
    background-color: #fff;
    border-radius: 8px;
}

.custom-chip {
    border: 2px solid rgba(0, 0, 0, 0.1); /* Contour plus foncé */
    background-color: rgba(0, 0, 0, 0.1); /* Intérieur transparent à 30% */
    color: lightgray; /* Couleur du texte */
}


/* Add smooth scrolling */
html, body {
    scroll-behavior: smooth;
    background-color: var(--mud-palette-background) !important;
}

.mud-main-content {
    height: 100%;
    min-height: 100vh;
    display: flex;
}

.mud-chip {
    font-size: var(--mud-typography-default-size);
}

    .mud-chip.mud-chip-size-small {
        font-size: var(--mud-typography-body1-size);
    }

.mud-tabs {
    background-color: var(--mud-palette-surface);
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: var(--mud-typography-subtitle1-size);
}

.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-input > textarea.mud-input-root {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-expand-panel .mud-expand-panel-header {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-button-year {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-table-cell {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-typography-subtitle2 {
    font-size: var(--mud-typography-subtitle2-size);
    color: var(--mud-palette-text-secondary);
}

.mud-typography-body1 {
    font-size: var(--mud-typography-body1-size);
}

.mud-typography-body2 {
    font-size: var(--mud-typography-body2-size);
}

.mud-button-outlined-size-small {
    font-size: var(--mud-typography-body2-size);
}

.mud-grid.readonly-grid > .mud-grid-item {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-bottom: 2px;
}

.mud-nav-link {
    white-space: normal !important;
}

/* ── Navigation drawer — effet de sélection (repris du portail Mia /
   DockerAutomation) : pill arrondie teintée primaire + barrette orange à
   gauche + icône primaire ─────────────────────────────────────────── */
.mud-nav-link {
    border-radius: var(--gcb-radius-md) !important;
    margin: 1px 0 !important;
    position: relative !important;
    transition: background var(--gcb-transition), color var(--gcb-transition) !important;
}
.mud-nav-link:hover:not(.active) {
    background: color-mix(in srgb, var(--gcb-text-primary) 7%, transparent) !important;
}
.mud-nav-link.active {
    background: rgba(var(--mud-palette-primary-rgb), 0.12) !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 550 !important;
}
.mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: -8px; /* au bord du menu (pa-2) */
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 20px;
    background: var(--mud-palette-primary);
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}
.mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary) !important;
    opacity: 1 !important;
}
/* L'état actif suffit comme retour visuel — pas d'anneau de focus navigateur */
.mud-nav-link:focus,
.mud-nav-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.user-button {
    text-transform: none;
    background: rgba(var(--mud-palette-primary-rgb), 0.1)
}

.side-menu .mud-chip.mud-chip-size-small {
    font-size: 0.625rem;
    height: 1.125rem;
}

.mud-table.mud-data-grid .mud-toolbar {
    height: auto !important;
    padding: 1rem
}


.mud-table.mud-data-grid .mud-toolbar-gutters {
    height: auto !important;
    padding: 1rem
}

.mud-table.mud-data-grid .mud-table-toolbar {
    height: auto !important;
    padding: 1rem
}

.mud-table.mud-data-grid .mud-table-pagination-toolbar {
    height: auto !important;
    padding: 0rem !important;
}

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

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

/* Updated loading-logo with increased size and pulse effect */
.loading-logo {
    opacity: 1;
    width: 225px; /* Enlarged logo size */
    height: auto; /* Maintain aspect ratio */
    animation: pulse 3s infinite;
}

/* Utility classes */
.transition {
    transition: opacity 1s ease-in-out;
}

.fade-out {
    opacity: 0;
}

.fade-in {
    opacity: 1;
}

.loading-container {
    text-align: center;
    margin-top: 15vh;
}

.loading-text {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6em;
    font-weight: bold;
    color: var(--gcb-primary);
    margin-top: 1em;
}

.logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 4em;
    font-weight: bold;
    color: var(--gcb-primary);
    margin-top: 1em;
}

/* Keyframes for the pulse effect */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.full-height {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* DataGrid Organization improvements - Modern styling */
.cursor-pointer {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.cursor-pointer:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

/* Organization card with hover effect */
.mud-paper {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-paper:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Smooth color transitions for chips */
.mud-chip {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Link styling */
a {
    color: var(--mud-palette-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--mud-palette-primary-darken);
    text-decoration: underline;
}

.mud-icon-button {
    transition: background-color 0.2s ease;
}

/* Loading overlay smooth fade */
.mud-overlay {
    /* backdrop-filter: blur(2px); */
    transition: opacity 0.3s ease;
}

/* DataGrid row hover enhancement */
.mud-table-row:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.02) !important;
    transition: background-color 0.2s ease;
}

/* Tooltip improvements */
.mud-tooltip {
    backdrop-filter: blur(8px);
    background-color: rgba(33, 33, 33, 0.95) !important;
}

/* Menu animations */
.mud-menu-popover {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom scrollbar for better UX */
.mud-table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mud-table-container::-webkit-scrollbar-track {
    background: var(--mud-palette-background-grey);
    border-radius: 4px;
}

.mud-table-container::-webkit-scrollbar-thumb {
    background: var(--mud-palette-grey-light);
    border-radius: 4px;
}

.mud-table-container::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-grey);
}

.mud-table-container {
    background-color: var(--mud-palette-background-default) !important;
}

.mud-paper[style*="Elevation:2"], .mud-paper.pa-4 {
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
    /* fond + bordure : voir section « Mondria glass » en fin de fichier */
}

/* ============================================================
   Atlas page vocabulary — shared chrome for list & report pages
   (page header, clickable stat tiles, data-grid shell)
   ============================================================ */

/* Page header: title + subtitle on the left, actions on the right */
.atlas-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    min-height: 44px;
}

.atlas-page-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.atlas-page-sub {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.atlas-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Éditeur RCA : rangées chronologie / actions correctives ──
   Grid explicite : le champ texte principal (événement / action) reçoit
   tout l'espace restant, les champs fixes gardent une largeur lisible. */
.rca-timeline-row {
    display: grid;
    grid-template-areas: "when what delete";
    grid-template-columns: 205px minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
}

.rca-action-row {
    display: grid;
    grid-template-areas: "type desc owner due done delete";
    grid-template-columns: 150px minmax(220px, 1fr) 200px 165px auto auto;
    gap: 8px 12px;
    align-items: center;
}

.rca-cell-when   { grid-area: when; }
.rca-cell-what   { grid-area: what; }
.rca-cell-type   { grid-area: type; }
.rca-cell-desc   { grid-area: desc; }
.rca-cell-owner  { grid-area: owner; }
.rca-cell-due    { grid-area: due; }
.rca-cell-done   { grid-area: done; }
.rca-cell-delete { grid-area: delete; justify-self: end; }

/* Écrans intermédiaires : l'action descend sur sa propre ligne pleine largeur */
@media (max-width: 1000px) {
    .rca-action-row {
        grid-template-areas:
            "type owner due delete"
            "desc desc desc desc"
            "done done done done";
        grid-template-columns: 150px minmax(0, 1fr) 165px auto;
    }
}

/* Mobile : tout empilé, poubelle en fin de rangée */
@media (max-width: 640px) {
    .rca-timeline-row {
        grid-template-areas:
            "when delete"
            "what what";
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rca-action-row {
        grid-template-areas:
            "type owner"
            "desc desc"
            "due done"
            "delete delete";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Responsive KPI/filter tile row — no breakpoints needed */
.atlas-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

/* Stat tile: native button for keyboard access.
   Semantic accent is driven by --stat-accent / --stat-accent-rgb. */
.atlas-stat {
    --stat-accent: var(--mud-palette-primary);
    --stat-accent-rgb: var(--mud-palette-primary-rgb);
    /* Ink = accent, darkened in light mode so text/icons stay ≥ 3:1 */
    --stat-ink: var(--stat-accent);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-height: 64px;
    min-width: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    font-family: inherit;
    text-align: left;
    color: inherit;
    transition: border-color 150ms ease, background-color 150ms ease;
}

button.atlas-stat {
    cursor: pointer;
}

button.atlas-stat:hover {
    border-color: rgba(var(--stat-accent-rgb), 0.55);
    background: linear-gradient(rgba(var(--stat-accent-rgb), 0.05), rgba(var(--stat-accent-rgb), 0.05)), var(--atlas-glass-bg);
}

button.atlas-stat:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.atlas-stat.atlas-stat--active {
    border-color: var(--stat-accent);
    background: linear-gradient(rgba(var(--stat-accent-rgb), 0.09), rgba(var(--stat-accent-rgb), 0.09)), var(--atlas-glass-bg);
}

button.atlas-stat.atlas-stat--active:hover {
    border-color: var(--stat-accent);
    background: linear-gradient(rgba(var(--stat-accent-rgb), 0.12), rgba(var(--stat-accent-rgb), 0.12)), var(--atlas-glass-bg);
}

/* Semantic variants */
.atlas-stat--info     { --stat-accent: var(--mud-palette-info);     --stat-accent-rgb: var(--mud-palette-info-rgb); }
.atlas-stat--success  { --stat-accent: var(--mud-palette-success);  --stat-accent-rgb: var(--mud-palette-success-rgb); }
.atlas-stat--warning  { --stat-accent: var(--mud-palette-warning);  --stat-accent-rgb: var(--mud-palette-warning-rgb); }
.atlas-stat--error    { --stat-accent: var(--mud-palette-error);    --stat-accent-rgb: var(--mud-palette-error-rgb); }
.atlas-stat--tertiary { --stat-accent: var(--mud-palette-tertiary); --stat-accent-rgb: var(--mud-palette-tertiary-rgb); }

html:not(.mud-theme-dark) .atlas-stat {
    --stat-ink: color-mix(in srgb, var(--stat-accent) 62%, #111827);
}

.atlas-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    flex-shrink: 0;
    background: rgba(var(--stat-accent-rgb), 0.12);
    color: var(--stat-ink);
}

.atlas-stat-icon .mud-icon-root {
    font-size: 1.25rem;
    color: var(--stat-ink);
}

.atlas-stat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.atlas-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atlas-stat-value {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Count carries the semantic color only when it demands attention */
.atlas-stat-value--accent {
    color: var(--stat-ink);
}

.atlas-stat-hint {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

/* Data-grid shell: one consistent frame around every large grid */
.atlas-grid-shell {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

/* Metric card: qty leads the header row, ahead of the title/subtitle,
   instead of sitting alone in a tall centered block below it — keeps the
   whole card short. Used by the Card*Metric / CardMissing* / CardOrganizationConfigIssues
   / CardUsers family. */
.atlas-metric-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default) !important;
    background: transparent !important;
    transition: border-color 150ms ease;
}

/* Neutralize the glass ::before ring (.mud-card.mud-paper) so these cards
   match the flat chrome of sibling MudPaper cards (e.g. CardOpenTickets). */
.atlas-metric-card::before {
    content: none !important;
}

.atlas-metric-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}

.atlas-metric-qty {
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.atlas-metric-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.atlas-metric-title {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
    overflow-wrap: break-word;
    hyphens: auto;
}

.atlas-metric-sub {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: break-word;
    hyphens: auto;
}

.atlas-metric-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: auto;
}

.atlas-metric-foot--center {
    justify-content: center;
}

/* Compact icon-tile rows (backup status, Windows 11 compatibility, etc.):
   a single divided list instead of a stack of nested bordered cards, qty
   sits beside the label instead of stacked above it. */
.atlas-tile-list {
    display: flex;
    flex-direction: column;
}

.atlas-tile-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.atlas-tile-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.atlas-tile-row + .atlas-tile-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.atlas-tile-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mud-palette-action-default-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.atlas-tile-content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.atlas-tile-qty {
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.atlas-tile-text {
    min-width: 0;
}

.atlas-tile-label {
    font-size: 0.875rem;
    opacity: 0.8;
    font-weight: 500;
    line-height: 1.25;
}

.atlas-tile-hint {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 2px;
}

/* Tile rows rendered as native buttons (keyboard access): strip UA chrome */
button.atlas-tile-row {
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-align: left;
}

button.atlas-tile-row:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Two side-by-side panels (e.g. top increases / top decreases) that
   stack on narrow screens */
.atlas-split-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

/* IP address badges: quiet monospace pills for lists of IPs in device
   tables. Data, not state — neutral surface, no semantic color. */
.atlas-ip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.atlas-ip-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 5px;
    background: var(--mud-palette-action-default-hover);
    border: 1px solid var(--mud-palette-lines-default);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .atlas-stat,
    .atlas-metric-card,
    .mud-icon-button,
    .mud-chip,
    .mud-paper {
        transition: none;
    }
}

/* ============================================================
   Mondria glass — effet dégradé des cards de mondria.com
   Recette du site : .glass (fond pâle translucide) + .lum-border
   (bordure dégradée 135° pâle → sarcelle, dessinée par un ::before
   masqué de 1px). Appliqué ici aux cards, tuiles stat et datagrids.
   ============================================================ */
:root {
    --atlas-glass-bg: linear-gradient(135deg,
        rgba(220, 243, 249, 0.08),
        rgba(220, 243, 249, 0.03) 45%,
        rgba(25, 88, 118, 0.18));
    --atlas-lum-border: linear-gradient(135deg,
        rgba(220, 243, 249, 0.38),
        rgba(220, 243, 249, 0.07) 38%,
        rgba(25, 88, 118, 0.60));
    /* Teinte quasi nulle des en-têtes de colonnes : le backdrop-blur fait le
       travail d'occlusion au scroll ; au repos, flouter un dégradé lisse est
       invisible, donc l'en-tête épouse exactement le fond de la card */
    --atlas-glass-header-bg: color-mix(in srgb, var(--mud-palette-background) 12%, transparent);
}

/* Variante claire (équivalent .glass-clair / .lum-border-clair) */
html:not(.mud-theme-dark) {
    --atlas-glass-bg: linear-gradient(135deg,
        #ffffff,
        rgba(255, 255, 255, 0.85) 45%,
        rgba(25, 88, 118, 0.06));
    --atlas-lum-border: linear-gradient(135deg,
        rgba(3, 29, 42, 0.24),
        rgba(3, 29, 42, 0.06) 38%,
        rgba(25, 88, 118, 0.45));
    --atlas-glass-header-bg: color-mix(in srgb, #ffffff 25%, transparent);
}

/* Surfaces recevant l'effet (.atlas-glass = opt-in manuel) */
.atlas-glass,
.atlas-stat,
.atlas-grid-shell,
.mud-card.mud-paper,
.mud-table.mud-data-grid,
.mud-paper[style*="Elevation:2"],
.mud-paper.pa-4 {
    position: relative;
    background: var(--atlas-glass-bg);
    border-color: transparent;
}

/* Bordure lumineuse : anneau de 1px découpé au mask (technique mondria.com) */
.atlas-glass::before,
.atlas-stat::before,
.atlas-grid-shell::before,
.mud-card.mud-paper::before,
.mud-table.mud-data-grid::before,
.mud-paper[style*="Elevation:2"]::before,
.mud-paper.pa-4::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--atlas-lum-border);
    pointer-events: none;
    /* Au-dessus des cellules sticky de MudBlazor (z-index 2-3), sinon
       l'anneau disparaît derrière la barre d'en-têtes */
    z-index: 4;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: opacity 150ms ease;
}

/* Quand la tuile stat affiche sa bordure d'accent, on éteint l'anneau dégradé */
button.atlas-stat:hover::before,
.atlas-stat--active::before {
    opacity: 0;
}

/* Wrappers existants avec bordure divider en style inline (pattern répandu
   autour des datagrids) : ils adoptent le glass sans retoucher chaque composant.
   !important requis pour battre le style inline. On exclut les panneaux internes
   qui posent volontairement un fond background (contraste). */
.mud-paper[style*="border: 1px solid var(--mud-palette-divider)"]:not([style*="background: var(--mud-palette-background)"]) {
    position: relative;
    border-color: transparent !important;
    background: var(--atlas-glass-bg) !important;
}
.mud-paper[style*="border: 1px solid var(--mud-palette-divider)"]:not([style*="background: var(--mud-palette-background)"])::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--atlas-lum-border);
    pointer-events: none;
    z-index: 4;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* Un datagrid déjà encadré (.atlas-grid-shell, wrapper divider ou card glass)
   ne double pas l'effet */
.atlas-grid-shell .mud-table.mud-data-grid,
.mud-card .mud-table.mud-data-grid,
.mud-paper[style*="border: 1px solid var(--mud-palette-divider)"] .mud-table.mud-data-grid {
    background: transparent;
    box-shadow: none;
}
.atlas-grid-shell .mud-table.mud-data-grid::before,
.mud-card .mud-table.mud-data-grid::before,
.mud-paper[style*="border: 1px solid var(--mud-palette-divider)"] .mud-table.mud-data-grid::before {
    display: none;
}

/* Onglets à l'intérieur d'une card glass : pas de bande surface opaque */
.mud-card .mud-tabs {
    background-color: transparent;
}

/* L'intérieur du datagrid laisse transparaître le dégradé du cadre
   (les en-têtes sticky gardent leur fond opaque MudBlazor) */
.mud-table.mud-data-grid .mud-table-container {
    background: transparent !important;
}
.mud-table.mud-data-grid .mud-toolbar,
.mud-table.mud-data-grid .mud-table-pagination {
    background: transparent;
}

/* Rangées-cartes des grids (papers « row template » avec border-bottom divider
   inline, pattern organizations/devices) : transparentes pour laisser
   transparaître le dégradé du cadre */
.mud-table.mud-data-grid .mud-paper[style*="border-bottom: 1px solid var(--mud-palette-divider)"] {
    background-color: transparent;
}

/* Barre d'en-têtes de colonnes — traitement STANDARD pour tous les datagrids
   (sticky ou non, encadrés ou nus) : voile léger + backdrop-blur qui reste
   assorti au dégradé au repos et voile les rangées au scroll (FixedHeader),
   plus une ligne de séparation visible (TableLines #0a3450 ne l'est pas). */
.mud-table.mud-data-grid .mud-table-head .mud-table-cell,
.mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell,
.mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-loading {
    background-color: var(--atlas-glass-header-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ============================================================
   Gradient Icon Badges (style HelpDesk dark dashboard)
   ============================================================ */
.grad-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.grad-badge .mud-icon-root { font-size: 1.2rem; color: #fff !important; }

.grad-pink    { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.grad-blue    { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.grad-green   { background: linear-gradient(135deg, #10b981, #34d399); }
.grad-purple  { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.grad-orange  { background: linear-gradient(135deg, #f97316, #fbbf24); }
.grad-teal    { background: linear-gradient(135deg, #14b8a6, #06b6d4); }
.grad-red     { background: linear-gradient(135deg, #ef4444, #f97316); }
.grad-indigo  { background: linear-gradient(135deg, #6366f1, #8b5cf6); }

/* ============================================================
   Logo Mondria (wordmark) — le SVG est pâle (#DCF3F9), donc on
   le rend via un mask recoloré avec la couleur de texte du thème
   pour qu'il reste lisible en mode clair comme en mode sombre.
   ============================================================ */
.atlas-mondria-logo {
    display: inline-block;
    width: 57px;
    height: 20px;
    flex-shrink: 0;
    background-color: var(--mud-palette-text-primary);
    -webkit-mask: url('../img/mondria.svg') no-repeat center / contain;
    mask: url('../img/mondria.svg') no-repeat center / contain;
}

/* ============================================================
   Tables de services (svc-*) — vocabulaire partagé entre la page
   /servicestenant et le dialog Services des organisations.
   S'utilise dans un shell .atlas-grid-shell.
   ============================================================ */
.svc-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--atlas-glass-header-bg);
}

.svc-section-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.svc-section-count {
    padding: 1px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.svc-table-wrap {
    overflow-x: auto;
}

.svc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.svc-table th {
    padding: 8px 16px;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.svc-table td {
    padding: 10px 16px;
    vertical-align: top;
    border-bottom: 1px solid var(--mud-palette-table-lines, var(--mud-palette-lines-default));
}

.svc-table tbody tr:last-child td {
    border-bottom: none;
}

.svc-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.svc-name--suppressed {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

.svc-desc {
    margin-top: 2px;
    max-width: 65ch;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.svc-col-status {
    width: 130px;
    white-space: nowrap;
}

.svc-col-qty {
    width: 90px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.svc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
}

.svc-badge--success {
    --badge-ink: var(--mud-palette-success);
    color: var(--badge-ink);
    background: rgba(var(--mud-palette-success-rgb), 0.12);
}

/* En mode clair, le vert de la palette manque de contraste sur fond pâle */
html:not(.mud-theme-dark) .svc-badge--success {
    --badge-ink: color-mix(in srgb, var(--mud-palette-success) 55%, #111827);
}

.svc-badge--success .mud-icon-root {
    font-size: 0.875rem;
    color: var(--badge-ink);
}

.svc-badge--muted {
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.svc-dash {
    color: var(--mud-palette-text-disabled);
}

.svc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    color: var(--mud-palette-text-secondary);
}