/* ============================================
   ANARE-CI — Portal Modern Design
   Inspired by modern admin panels:
   - Rounded inputs & selects
   - Cards with colored left borders
   - 2-column form layouts
   - Clean tables with search
   - KPI dashboard cards
   ============================================ */

/* ============================================
   DESIGN TOKENS — ANARE-CI GPL
   Modern Institutional · v0.5
   ============================================ */
:root {
    /* === Brand === */
    --anare-primary: #001A6E;            /* Bleu marine ANARE-CI (Pantone 662C) */
    --anare-primary-hover: #0a2e91;
    --anare-primary-light: #E8EBF7;       /* Fond pâle pour active states */
    --anare-primary-soft: #F0F3FA;
    --anare-primary-deep: #00134E;        /* Pour gradients ou contrastes forts */
    --anare-secondary: #455a64;
    --anare-action: #FF7A1F;              /* Orange focus / action signalétique */
    --anare-action-light: rgba(255, 122, 31, 0.15);

    /* === Surfaces === */
    --anare-bg: #f6f8fa;                  /* Fond portail global */
    --anare-surface: #ffffff;             /* Cartes, panels */
    --anare-surface-alt: #f8f9fa;         /* Inputs, zones secondaires */
    --anare-surface-hover: #f1f3f5;

    /* === Text === */
    --anare-text: #1a2027;                /* Texte principal */
    --anare-text-muted: #495057;          /* Labels, captions importantes */
    --anare-text-subtle: #6c757d;         /* Texte placeholder, metadata */
    --anare-text-on-primary: #ffffff;

    /* === Borders === */
    --anare-border: #e9ecef;
    --anare-border-strong: #dee2e6;
    --anare-border-focus: var(--anare-action);

    /* === Spacing (4px base) === */
    --anare-space-1: 0.25rem;             /* 4px */
    --anare-space-2: 0.5rem;              /* 8px */
    --anare-space-3: 0.75rem;             /* 12px */
    --anare-space-4: 1rem;                /* 16px */
    --anare-space-5: 1.5rem;              /* 24px */
    --anare-space-6: 2rem;                /* 32px */
    --anare-space-7: 3rem;                /* 48px */

    /* === Radius === */
    --anare-radius-sm: 0.375rem;          /* 6px — petites pills, badges */
    --anare-radius-md: 0.5rem;             /* 8px — boutons, inputs */
    --anare-radius-lg: 0.75rem;            /* 12px — cartes principales */
    --anare-radius-xl: 1rem;               /* 16px — modals, hero cards */
    --anare-radius-pill: 2rem;
    --anare-radius-full: 9999px;

    /* === Elevation === */
    --anare-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --anare-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.08);
    --anare-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);
    --anare-shadow-focus: 0 0 0 3px var(--anare-action-light);

    /* === Typography scale === */
    --anare-fs-xs: 0.7rem;                /* 11.2px — micro labels */
    --anare-fs-sm: 0.8125rem;             /* 13px — captions */
    --anare-fs-md: 0.9375rem;             /* 15px — body */
    --anare-fs-lg: 1.0625rem;             /* 17px — body large */
    --anare-fs-h3: 1.25rem;               /* 20px — section title */
    --anare-fs-h2: 1.5rem;                /* 24px — page title */
    --anare-fs-h1: 2rem;                  /* 32px — hero title */

    /* === Motion === */
    --anare-transition: 0.2s ease;
    --anare-transition-slow: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --anare-transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === Layout === */
    --anare-sidebar-width: 256px;
    --anare-sidebar-collapsed: 72px;
    --anare-topbar-height: 68px;
    --anare-content-max: 1440px;

    /* === Legacy aliases (retro-compat — ne pas utiliser dans le nouveau code) === */
    --anare-border-radius: var(--anare-radius-md);
    --anare-input-radius: var(--anare-radius-sm);
    --anare-card-radius: var(--anare-radius-lg);
    --anare-shadow: var(--anare-shadow-md);
    --anare-shadow-hover: var(--anare-shadow-lg);
}

/* ============================================
   GLOBAL PORTAL OVERRIDES
   ============================================ */

.o_portal_wrap {
    background-color: #f8f9fb;
}

/* Rounded inputs, selects, textareas globally */
.o_portal_wrap .form-control,
.o_portal_wrap .form-select {
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    background-color: #f8f9fa;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    min-height: 48px;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), background-color var(--anare-transition);
}
.o_portal_wrap .form-control:focus,
.o_portal_wrap .form-select:focus {
    border-color: #FF7A1F;
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(255, 122, 31, 0.15);
}
.o_portal_wrap .form-control::placeholder {
    color: #6c757d;
    font-size: 0.875rem;
}
.o_portal_wrap .form-select {
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Labels above fields */
.o_portal_wrap .anare-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

/* Field value display */
.o_portal_wrap .anare-field-value {
    font-size: 0.95rem;
    color: #212529;
    padding: 0.4rem 0;
}

/* ============================================
   CARDS — Modern with colored left border
   ============================================ */

.o_portal_wrap .anare-card {
    border-radius: var(--anare-card-radius);
    border: none;
    box-shadow: var(--anare-shadow);
    transition: transform var(--anare-transition), box-shadow var(--anare-transition);
    overflow: hidden;
}
.anare-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--anare-shadow-hover);
}

/* Card with colored left border (info banners) */
.anare-card-accent {
    border-left: 4px solid var(--anare-primary) !important;
    border-radius: var(--anare-card-radius);
    background: #fff;
    box-shadow: var(--anare-shadow);
}
.anare-card-accent.accent-info { border-left-color: #0dcaf0 !important; }
.anare-card-accent.accent-success { border-left-color: #198754 !important; }
.anare-card-accent.accent-warning { border-left-color: #ffc107 !important; }
.anare-card-accent.accent-danger { border-left-color: #dc3545 !important; }
.anare-card-accent.accent-primary { border-left-color: var(--anare-primary) !important; }
.anare-card-accent.accent-purple { border-left-color: #6f42c1 !important; }
.anare-card-accent.accent-orange { border-left-color: #FF7A1F !important; }

/* Connected section cards (no gap between them) */
.anare-section-group {
    border-radius: var(--anare-card-radius);
    box-shadow: var(--anare-shadow);
    background: #fff;
    overflow: hidden;
}
.anare-section-group > .anare-section-card {
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
}
.anare-section-group > .anare-section-card + .anare-section-card .anare-section-header {
    border-top: 1px solid #e9ecef;
}

/* Section cards (form sections like "Formulaire") */
.anare-section-card {
    border-radius: var(--anare-card-radius);
    border: none;
    box-shadow: var(--anare-shadow);
    background: #fff;
    overflow: hidden;
}
.anare-section-card .anare-section-header {
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 1.1rem;
    color: #212529;
    border-bottom: 1px solid #e9ecef;
    background: #E8EBF7;
}
.anare-section-card .anare-section-body {
    padding: 1.5rem 2rem;
}

/* ============================================
   KPI DASHBOARD CARDS
   ============================================ */

.anare-kpi-card {
    border-radius: var(--anare-card-radius);
    border: 1px solid #eef0f2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: transform var(--anare-transition), box-shadow var(--anare-transition), border-color var(--anare-transition);
    background: #fff;
    overflow: hidden;
}
.anare-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--anare-shadow-hover);
    border-color: #d0d5dd;
}
.anare-kpi-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.anare-kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #212529;
}
.anare-kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}

/* ============================================
   TABLES — Clean modern style
   ============================================ */

.anare-table-wrapper {
    border-radius: var(--anare-card-radius);
    overflow: hidden;
    box-shadow: var(--anare-shadow);
    background: #fff;
}
.anare-table-wrapper table {
    margin-bottom: 0;
}
.anare-table-wrapper thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #555;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}
.anare-table-wrapper tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}
.anare-table-wrapper tbody tr {
    transition: background-color 0.15s ease;
}
.anare-table-wrapper tbody tr:hover {
    background-color: #f8f9fb;
}
.anare-table-wrapper tbody tr:last-child td {
    border-bottom: none;
}

/* Table toolbar (search + filters) */
.anare-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}
.anare-table-toolbar .anare-search-box {
    position: relative;
    max-width: 300px;
    flex: 1;
}
.anare-table-toolbar .anare-search-box input {
    padding-left: 2.25rem;
    border-radius: 2rem;
    border: 1px solid #dee2e6;
    font-size: 0.875rem;
}
.anare-table-toolbar .anare-search-box input:focus {
    border-color: var(--anare-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 26, 110, 0.15);
}
.anare-table-toolbar .anare-search-box .anare-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 0.85rem;
}

/* Filter pills */
.anare-filter-pills .btn {
    border-radius: 2rem;
    padding: 0.25rem 0.875rem;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Pagination info */
.anare-pagination-info {
    font-size: 0.85rem;
    color: #6c757d;
}

/* ============================================
   BADGES — Rounded pill style
   ============================================ */

.o_portal_wrap .badge {
    font-weight: 500;
    font-size: 0.78rem;
    padding: 0.35em 0.75em;
    border-radius: 2rem;
}

/* ============================================
   FORM LAYOUTS — 2-column with labels above
   ============================================ */

.anare-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}
.anare-form-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--anare-text-muted, #6b7280);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--anare-border, #e5e7eb);
}
.anare-form-grid .anare-form-group {
    display: flex;
    flex-direction: column;
}
.anare-form-grid .anare-form-group.full-width {
    grid-column: 1 / -1;
}
.anare-form-grid .anare-form-group .form-control,
.anare-form-grid .anare-form-group .form-select {
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .anare-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Alternative form label (normal case, cleaner look) */
.anare-form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}
.anare-form-label .text-danger {
    color: #dc3545 !important;
    font-weight: 500;
}

/* Required asterisk styling */
.anare-required-star {
    color: #dc3545;
    margin-left: 2px;
}

/* Registre L8 : signaler tous les champs obligatoires par une étoile rouge (*) */
label.required::after,
label.o_form_label.o_required_modifier::after {
    content: " *";
    color: #dc3545;
    font-weight: 700;
}

/* Phone input with intl-tel-input integration */
.anare-phone-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.anare-phone-input-wrapper .iti {
    width: 100%;
}
.anare-phone-input-wrapper .iti__flag-container {
    padding: 0;
}
.anare-phone-input-wrapper .iti--separate-dial-code .iti__selected-flag {
    background-color: #f8f9fa;
    border-radius: 10px 0 0 10px;
    border-right: 1px solid #e8e8e8;
    height: 100%;
    padding: 0 0.75rem;
}
.anare-phone-input-wrapper input {
    padding-left: 100px !important;
}

/* Custom phone input with country code (styled like screenshot) */
.anare-phone-field {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    min-height: 48px;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), background-color var(--anare-transition);
}
.anare-phone-field:focus-within {
    border-color: #FF7A1F;
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(255, 122, 31, 0.15);
}
.anare-phone-field .anare-phone-country {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    border-right: 1px solid #e8e8e8;
    background-color: #fff;
    cursor: pointer;
    min-width: 100px;
    height: 100%;
}
.anare-phone-field .anare-phone-country img {
    width: 24px;
    height: 16px;
    border-radius: 2px;
}
.anare-phone-field .anare-phone-country span {
    font-size: 0.9rem;
    color: #212529;
}
.anare-phone-field .anare-phone-country i {
    font-size: 0.7rem;
    color: #6c757d;
}
.anare-phone-field input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    outline: none;
}
.anare-phone-field input::placeholder {
    color: #6c757d;
}

/* Date input styling */
.o_portal_wrap input[type="date"] {
    position: relative;
}
.o_portal_wrap input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}

/* Textarea styling */
.o_portal_wrap textarea.form-control {
    border-radius: 15px;
    min-height: 100px;
}

/* ============================================
   INFO BANNER — Colored left border card
   ============================================ */

.anare-info-banner {
    border-left: 4px solid var(--anare-primary);
    border-radius: var(--anare-card-radius);
    background: #fff;
    padding: 1rem 1.25rem;
    box-shadow: var(--anare-shadow);
    margin-bottom: 1.25rem;
}
.anare-info-banner .anare-info-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.25rem;
}
.anare-info-banner .anare-info-badge {
    font-size: 0.8rem;
}
.anare-info-banner.accent-orange {
    border-left-color: #FF7A1F !important;
}
.anare-info-banner .anare-info-subtitle {
    font-size: 0.85rem;
    color: #6c757d;
}

/* ============================================
   BREADCRUMB STYLE
   ============================================ */

/* Agrandir l'icône home du breadcrumb natif Odoo */
.o_portal_submenu.breadcrumb .fa-home,
.o_portal_navbar .breadcrumb .fa-home {
    font-size: 1.5rem;
    color: var(--anare-primary, #FF7A1F);
    transition: color 0.2s ease, transform 0.2s ease;
}
.o_portal_submenu.breadcrumb .fa-home:hover,
.o_portal_navbar .breadcrumb .fa-home:hover {
    color: var(--anare-secondary, #27ae60);
    transform: scale(1.1);
}

.anare-breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.anare-breadcrumb a {
    color: #6c757d;
    text-decoration: none;
}
.anare-breadcrumb a:hover {
    color: var(--anare-primary);
}
.anare-breadcrumb .anare-breadcrumb-sep {
    color: #6c757d;
    margin: 0 0.5rem;
}
.anare-breadcrumb .anare-breadcrumb-current {
    color: #212529;
    font-weight: 600;
}

/* ============================================
   VALIDATION BUTTON
   ============================================ */

/* ============================================
   CHARTS (Dashboard)
   ============================================ */

.anare-chart-card {
    border-radius: var(--anare-card-radius);
    border: none;
    box-shadow: var(--anare-shadow);
    background: #fff;
    overflow: hidden;
}
.anare-chart-card .anare-chart-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #e9ecef;
    background: #fafbfc;
}
.anare-chart-card .anare-chart-body {
    padding: 1rem;
    min-height: 220px;
}
.anare-chart-card .anare-chart-body canvas {
    max-height: 220px;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.anare-empty-state {
    text-align: center;
    padding: 3rem 1rem;
}
.anare-empty-state .anare-empty-icon {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
    display: block;
}
.anare-empty-state p {
    color: #6c757d;
    font-size: 0.95rem;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.anare-btn-action {
    border-radius: 2rem;
    padding: 0.4rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--anare-transition);
}

/* ============================================
   STOCK MANAGEMENT FORMS
   ============================================ */

.o_dgh_picking_form [data-anare-accent="remove-line"] {
    padding: 0.25rem 0.5rem;
    text-decoration: none;
}
.o_dgh_picking_form [data-anare-accent="remove-line"]:hover {
    background: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
}
.o_dgh_validate_form tbody tr.table-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
}
.anare-partial-warning {
    border-left: 4px solid #ffc107;
}
.anare-backorder-card {
    transition: box-shadow var(--anare-transition);
    border-radius: var(--anare-card-radius) !important;
}
.anare-backorder-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}
.o_dgh_return_form input[type="number"] {
    max-width: 120px;
}

/* ============================================
   AUTO-REFRESH INDICATOR
   ============================================ */

.anare-refresh-indicator i {
    animation: anare-pulse 2s ease-in-out infinite;
}
.anare-refresh-indicator.refreshing i {
    animation: anare-spin 0.8s linear infinite;
}
@keyframes anare-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@keyframes anare-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   TOASTS
   ============================================ */

.toast-container .toast {
    min-width: 300px;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.toast-header.bg-success,
.toast-header.bg-danger,
.toast-header.bg-info { color: #fff; }
.toast-header.bg-warning { color: #333; }

/* ============================================
   FILTER/SEARCH JS (legacy support)
   ============================================ */

.o_dgh_filterable_table tbody tr {
    transition: opacity 0.15s ease;
}
.o_dgh_searchable_table input[data-anare-search]:focus {
    border-color: var(--anare-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 26, 110, 0.15);
}
.o_dgh_filterable_table .btn-group .btn.active {
    font-weight: 600;
}

/* ============================================
   DOCUMENTS SECTION — Notebook style
   ============================================ */

.anare-notebook-section {
    border: 1px solid #dee2e6;
    border-radius: var(--anare-card-radius);
    background: #fff;
    overflow: hidden;
}

/* Tabs */
.anare-notebook-tabs.nav-tabs {
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    padding: 0 0.5rem;
    margin-bottom: 0;
}
.anare-notebook-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: #495057;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.65rem 1rem;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.anare-notebook-tabs .nav-link:hover {
    color: var(--anare-primary);
    border-bottom-color: rgba(0, 26, 110, 0.3);
    background: transparent;
}
.anare-notebook-tabs .nav-link.active {
    color: var(--anare-primary);
    border-bottom-color: var(--anare-primary);
    background: transparent;
    font-weight: 600;
}
.anare-notebook-tabs .nav-link .badge {
    font-size: 0.7rem;
    vertical-align: middle;
}

/* Scrollable document list */
.anare-documents-scroll {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: auto;
}
.anare-documents-scroll::-webkit-scrollbar {
    width: 6px;
}
.anare-documents-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.anare-documents-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}
.anare-documents-scroll::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

/* Table */
.anare-documents-table {
    font-size: 0.9rem;
}
.anare-documents-table thead th {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
    border-bottom-width: 1px;
    padding: 0.55rem 0.75rem;
    background: #f8f9fa;
}
.anare-documents-table tbody td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}
.anare-document-row {
    transition: background-color 0.15s ease;
}
.anare-document-row:hover {
    background-color: rgba(0, 26, 110, 0.04);
}
.anare-document-row .btn-group .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 0;
}
.anare-document-row .btn-group .btn:first-child {
    border-radius: 4px 0 0 4px;
}
.anare-document-row .btn-group .btn:last-child {
    border-radius: 0 4px 4px 0;
}
.anare-document-row .btn-group .btn:hover {
    background-color: var(--anare-primary);
    border-color: var(--anare-primary);
    color: #fff;
}

/* Tab content */
.anare-notebook-section .tab-content {
    padding: 0;
}
.anare-notebook-section .anare-empty-state {
    padding: 2.5rem 1rem;
}

/* Chatter (Suivi tab) */
.anare-notebook-section .o_portal_messages {
    max-height: 400px;
    overflow-y: auto;
}
.anare-notebook-section .o_portal_chatter {
    padding: 0 !important;
}
.anare-notebook-section .o_portal_chatter_composer {
    border-radius: var(--anare-card-radius);
}
.anare-notebook-section .o_portal_chatter_message {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
}
.anare-notebook-section .o_portal_chatter_message:last-child {
    border-bottom: none;
}
.anare-notebook-section .o_portal_chatter_avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Upload modal */
#uploadDocumentModal .modal-content {
    border-radius: var(--anare-card-radius);
    overflow: hidden;
}
#uploadDocumentModal .modal-header {
    padding: 1rem 1.25rem;
}
#uploadDocumentModal .modal-body {
    padding: 1.25rem;
}
#uploadDocumentModal .form-control:focus {
    border-color: var(--anare-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 26, 110, 0.15);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    .anare-kpi-card .card-body {
        padding: 0.5rem !important;
    }
    .anare-kpi-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    .anare-kpi-value {
        font-size: 1.15rem;
    }
    .anare-kpi-label {
        font-size: 0.65rem;
    }
    .o_portal_wrap .btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .anare-table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .anare-table-toolbar .anare-search-box {
        max-width: 100%;
    }
    .o_portal_wrap h4 {
        font-size: 1.15rem;
    }
    .o_dgh_picking_form .table-responsive { font-size: 0.85rem; }
    .o_dgh_picking_form select,
    .o_dgh_picking_form input { font-size: 0.85rem; }
    .anare-documents-scroll { max-height: 250px; }
    .anare-documents-table { font-size: 0.82rem; }
    .anare-documents-table thead th,
    .anare-documents-table tbody td { padding: 0.45rem 0.5rem; }
    .anare-notebook-tabs .nav-link { font-size: 0.82rem; padding: 0.5rem 0.75rem; }
}

/* ============================================
   SIG MAP STYLES (Native Odoo-inspired)
   ============================================ */

/* Single-line header (Grand Livre style) */
.o_dgh_sig_filters {
    border-bottom: 1px solid var(--o-border-color, #dee2e6);
}
.o_dgh_sig_filters .btn-sm {
    font-size: 0.78rem;
    padding: 0.2rem 0.5rem;
    cursor: default;
}

/* Searchbar */
.o_dgh_sig_searchbar:hover {
    border-color: #86b7fe !important;
}

/* Filter panel (3-column native SearchBarMenu style) */
.o_dgh_sig_filter_panel {
    background-color: #fff;
}

/* Filter items hover */
.o_dgh_sig_filter_item {
    cursor: pointer;
    padding-left: 2px;
    border-radius: 4px;
}
.o_dgh_sig_filter_item:hover {
    background-color: #f8f9fa;
}

/* ===== Marqueurs Leaflet ===== */
.anare-sig-marker {
    position: relative;
}

.anare-sig-marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background: #0d6efd;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.anare-sig-marker-pin::after {
    content: '';
    width: 14px;
    height: 14px;
    margin: 2px 0 0 2px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
}

.anare-sig-marker-pin i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 12px;
    z-index: 1;
    margin-top: -2px;
    margin-left: 1px;
}

.anare-sig-marker-pulse {
    background: rgba(13, 110, 253, 0.4);
    border-radius: 50%;
    height: 14px;
    width: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 8px 0 0 -7px;
    transform: rotateX(55deg);
    z-index: -2;
    animation: anare-sig-pulse 1.5s ease-out infinite;
}

@keyframes anare-sig-pulse {
    0% { transform: rotateX(55deg) scale(1); opacity: 1; }
    100% { transform: rotateX(55deg) scale(2); opacity: 0; }
}

/* Badge Transit sur marqueur */
.anare-sig-transit-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #0dcaf0;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fff;
    z-index: 10;
}

/* ===== Popup Leaflet ===== */
.anare-sig-popup .leaflet-popup-content-wrapper {
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0;
}

.anare-sig-popup .leaflet-popup-content {
    margin: 0;
    padding: 0.75rem;
    min-width: 220px;
}

.anare-sig-popup .leaflet-popup-tip {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.anare-sig-popup-content .badge {
    font-weight: 500;
}

/* ===== Tooltip Leaflet ===== */
.anare-sig-tooltip {
    background-color: #fff;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0;
    font-family: inherit;
}

.anare-sig-tooltip .leaflet-tooltip-content {
    padding: 0;
}

.anare-sig-tooltip::before {
    border-top-color: #fff;
}

.anare-sig-tooltip-content {
    padding: 0.6rem 0.85rem;
    min-width: 180px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.anare-sig-tooltip-content strong.d-block {
    color: #212529;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.35rem;
}

.anare-sig-tooltip-content .small {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.anare-sig-tooltip-content .small i {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.anare-sig-tooltip-content .badge {
    font-weight: 500;
    padding: 0.2em 0.5em;
}

/* ============================================
   PROFILE SIDEBAR
   ============================================ */

.anare-profile-sidebar {
    background: #fff;
    border-radius: var(--anare-card-radius);
    box-shadow: var(--anare-shadow);
    padding: 1.5rem;
    width: 100%;
}

/* Desktop: aligné en haut comme le natif */
@media (min-width: 992px) {
    .o_portal_wrap .col-lg-4 {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .anare-profile-sidebar {
        position: sticky;
        top: 1rem;
    }
}

/* Mobile: afficher la colonne profil */
@media (max-width: 991.98px) {
    /* Forcer l'affichage de la colonne sur mobile */
    .o_portal_wrap .col-lg-4.d-none.d-lg-flex {
        display: flex !important;
        order: -1;
        margin-bottom: 1.5rem;
    }
    .anare-profile-sidebar {
        padding: 1.25rem;
    }
    .anare-profile-avatar {
        width: 80px;
        height: 80px;
    }
    .anare-profile-name {
        font-size: 1.1rem;
    }
    .anare-profile-info-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
    .anare-profile-info-item {
        gap: 0.75rem;
    }
    .anare-profile-info-value {
        font-size: 0.85rem;
    }
}

/* Header: Avatar + Identity */
.anare-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1.25rem;
}

.anare-profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--anare-primary);
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 26, 110, 0.15);
}

.anare-profile-identity {
    width: 100%;
}

.anare-profile-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.anare-profile-company {
    font-size: 0.95rem;
    color: var(--anare-primary);
    margin-bottom: 0;
    font-weight: 500;
}

/* Info items */
.anare-profile-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.anare-profile-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.anare-profile-info-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: linear-gradient(135deg, var(--anare-primary), #0a2e91);
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.anare-profile-info-content {
    flex: 1;
    min-width: 0;
}

.anare-profile-info-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 0.15rem;
    font-weight: 600;
}

.anare-profile-info-value {
    display: block;
    font-size: 0.9rem;
    color: #212529;
    word-break: break-word;
    line-height: 1.4;
}

.anare-profile-info-value a {
    color: #212529;
    text-decoration: none;
}

.anare-profile-info-value a:hover {
    color: var(--anare-primary);
}

/* Edit button */
.anare-profile-edit-btn {
    border-radius: var(--anare-card-radius);
    padding: 0.75rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.anare-profile-edit-btn:hover {
    background-color: var(--anare-primary);
    border-color: var(--anare-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 26, 110, 0.25);
}

/* Contact commercial */
.anare-profile-contact {
    background: #f8f9fa;
    border-radius: var(--anare-card-radius);
    overflow: hidden;
}

.anare-profile-contact-header {
    background: linear-gradient(135deg, var(--anare-primary), #0a2e91);
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.anare-profile-contact-body {
    padding: 1rem;
}

.anare-profile-contact-body a {
    color: inherit;
    text-decoration: none;
}

.anare-profile-contact-body a:hover {
    color: var(--anare-primary);
}

/* Offcanvas mobile - améliorer l'affichage */
#accountOffCanvas .anare-profile-sidebar {
    box-shadow: none;
    border-radius: 0;
    padding: 1rem;
}

#accountOffCanvas .anare-profile-avatar {
    width: 70px;
    height: 70px;
}

#accountOffCanvas .anare-profile-name {
    font-size: 1rem;
}

#accountOffCanvas .anare-profile-info-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.85rem;
}

#accountOffCanvas .anare-profile-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

#accountOffCanvas .anare-profile-info {
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#accountOffCanvas .anare-profile-edit-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* ============================================
   DASHBOARD V3 — Hero · Filter · KPIs (premium)
   ============================================ */

.anare-dashboard-content[data-dashboard="v3"] {
    padding: var(--anare-space-5) var(--anare-space-6);
    max-width: var(--anare-content-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-6);
}

@media (max-width: 991.98px) {
    .anare-dashboard-content[data-dashboard="v3"] {
        padding: var(--anare-space-4);
        gap: var(--anare-space-5);
    }
}

/* === HERO === */
.anare-hero {
    /* Soft green wash — sans bordure, ton ANARE-CI léger */
    background:
        radial-gradient(720px 440px at 100% -10%, rgba(0, 26, 110, 0.14), transparent 60%),
        radial-gradient(640px 420px at -5% 110%, rgba(46, 125, 50, 0.10), transparent 65%),
        linear-gradient(135deg, #f4faf5 0%, #ecf6ed 55%, #d8ecdc 100%);
    border: none;
    border-radius: var(--anare-radius-xl);
    padding: var(--anare-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-5);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
        0 8px 22px -16px rgba(0, 26, 110, 0.18);
}
.anare-hero::before {
    /* Green halo, top-right — léger */
    content: '';
    position: absolute;
    top: -45%;
    right: -10%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(0, 26, 110, 0.20) 0%,
        rgba(46, 125, 50, 0.08) 45%,
        transparent 70%);
    pointer-events: none;
    filter: blur(4px);
}
.anare-hero::after {
    /* Subtle dot mesh — low contrast texture */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(15, 23, 42, 0.04) 1px, transparent 1.5px);
    background-size: 22px 22px;
    background-position: 0 0;
    pointer-events: none;
    opacity: 0.7;
    mask-image: linear-gradient(135deg, transparent 30%, #000 70%);
    -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000 70%);
}

.anare-hero-text {
    position: relative;
    z-index: 1;
}
.anare-hero-title {
    font-size: var(--anare-fs-h1);
    font-weight: 700;
    color: var(--anare-text);
    letter-spacing: -0.02em;
    margin: 0 0 var(--anare-space-1);
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
}
.anare-hero-wave {
    display: inline-block;
    animation: anare-wave 2.5s ease-in-out infinite;
    transform-origin: 70% 70%;
}
@keyframes anare-wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
}
.anare-hero-sub {
    font-size: var(--anare-fs-md);
    color: var(--anare-text-muted);
    margin: 0;
    line-height: 1.5;
}
.anare-hero-sub strong {
    color: var(--anare-primary);
    font-weight: 600;
}

/* === Period filter === */
.anare-hero-filter {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-3);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    padding: var(--anare-space-4);
    box-shadow: var(--anare-shadow-sm);
}

.anare-hero-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-4);
    flex-wrap: wrap;
}

.anare-hero-filter-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--anare-space-4);
    flex-wrap: wrap;
    padding-top: var(--anare-space-3);
    border-top: 1px dashed var(--anare-border);
}

.anare-period-presets {
    display: inline-flex;
    background: var(--anare-surface-alt);
    border-radius: var(--anare-radius-pill);
    padding: 3px;
    gap: 2px;
}
.anare-period-preset {
    background: transparent;
    border: none;
    color: var(--anare-text-muted);
    font-size: var(--anare-fs-sm);
    font-weight: 500;
    padding: var(--anare-space-2) var(--anare-space-3);
    border-radius: var(--anare-radius-pill);
    cursor: pointer;
    transition: background var(--anare-transition), color var(--anare-transition);
    white-space: nowrap;
}
.anare-period-preset:hover {
    color: var(--anare-text);
}
.anare-period-preset.active {
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
    box-shadow: 0 1px 2px rgba(0, 26, 110, 0.18);
}
.anare-period-preset:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}

.anare-period-custom {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    flex-wrap: wrap;
}
.anare-period-custom-label {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.anare-period-input {
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    padding: 6px 10px;
    font-size: var(--anare-fs-sm);
    color: var(--anare-text);
    min-width: 140px;
    transition: border-color var(--anare-transition), background var(--anare-transition);
}
.anare-period-input:hover {
    border-color: var(--anare-border-strong);
    background: var(--anare-surface);
}
.anare-period-input:focus {
    outline: none;
    border-color: var(--anare-primary);
    background: var(--anare-surface);
    box-shadow: 0 0 0 3px var(--anare-primary-light);
}
.anare-period-arrow {
    color: var(--anare-text-subtle);
    font-weight: 600;
}
.anare-period-apply {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: var(--anare-space-2) var(--anare-space-3);
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
    border: none;
    border-radius: var(--anare-radius-md);
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
}
.anare-period-apply:hover {
    background: var(--anare-primary-hover);
    box-shadow: var(--anare-shadow-md);
    transform: translateY(-1px);
}
.anare-period-apply:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}

.anare-hero-filter-hint {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    flex: 1;
    min-width: 0;
}
.anare-hero-filter-hint i {
    color: var(--anare-primary);
    flex-shrink: 0;
}

/* "Depuis toujours" preset — visually distinct */
.anare-period-preset-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.anare-period-preset-all i {
    font-size: 0.85rem;
}

/* Period summary (right of meta row) */
.anare-period-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: 6px var(--anare-space-3);
    background: var(--anare-primary-soft);
    border: 1px solid var(--anare-primary-light);
    border-radius: var(--anare-radius-pill);
    font-size: var(--anare-fs-xs);
    color: var(--anare-primary);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}
.anare-period-summary > i {
    flex-shrink: 0;
    font-size: 0.8rem;
}
.anare-period-summary-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.anare-period-summary-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--anare-primary-deep);
}
.anare-period-summary-value {
    font-weight: 600;
    color: var(--anare-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .anare-hero-filter-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    .anare-period-summary {
        white-space: normal;
        line-height: 1.4;
    }
}

@media (max-width: 768px) {
    .anare-hero {
        padding: var(--anare-space-5) var(--anare-space-4);
    }
    .anare-hero-title {
        font-size: 1.5rem;
    }
    .anare-hero-filter {
        flex-direction: column;
        align-items: stretch;
    }
    .anare-period-presets {
        overflow-x: auto;
    }
}

/* === KPI CARDS === */
.anare-kpi-section {
    width: 100%;
}
.anare-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--anare-space-4);
}

@media (max-width: 1399px) {
    .anare-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .anare-kpi-row { grid-template-columns: repeat(2, 1fr); gap: var(--anare-space-3); }
}
@media (max-width: 480px) {
    .anare-kpi-row { grid-template-columns: 1fr; }
}

.anare-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-2);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    padding: var(--anare-space-4);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
}
.anare-kpi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--kpi-color, var(--anare-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--anare-transition-slow);
}
.anare-kpi:hover {
    border-color: var(--kpi-color, var(--anare-primary));
    box-shadow: var(--anare-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.anare-kpi:hover::before {
    transform: scaleX(1);
}
.anare-kpi:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
.anare-kpi[data-color="orange"] { --kpi-color: #ff8c42; --kpi-bg: rgba(255, 140, 66, 0.12); }
.anare-kpi[data-color="green"]  { --kpi-color: #28c76f; --kpi-bg: rgba(40, 199, 111, 0.12); }
.anare-kpi[data-color="purple"] { --kpi-color: #7367f0; --kpi-bg: rgba(115, 103, 240, 0.12); }
.anare-kpi[data-color="teal"]   { --kpi-color: #00cfe8; --kpi-bg: rgba(0, 207, 232, 0.12); }
.anare-kpi[data-color="amber"]  { --kpi-color: #ff9f43; --kpi-bg: rgba(255, 159, 67, 0.12); }
.anare-kpi[data-color="red"]    { --kpi-color: #ea5455; --kpi-bg: rgba(234, 84, 85, 0.12); }

.anare-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.anare-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--anare-radius-md);
    background: var(--kpi-bg, var(--anare-primary-light));
    color: var(--kpi-color, var(--anare-primary));
    font-size: 1.05rem;
}

/* Trend badges */
.anare-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--anare-radius-pill);
    line-height: 1.2;
    white-space: nowrap;
}
.anare-kpi-trend i { font-size: 0.6rem; }
.anare-kpi-trend.up {
    color: #15803d;
    background: rgba(34, 197, 94, 0.12);
}
.anare-kpi-trend.down {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.10);
}
.anare-kpi-trend.neutral {
    color: var(--anare-text-subtle);
    background: var(--anare-surface-alt);
}
.anare-kpi-trend-static {
    color: var(--anare-text-subtle);
    background: var(--anare-surface-alt);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--anare-radius-pill);
}
.anare-kpi-trend-static i {
    font-size: 0.45rem;
    color: #22c55e;
}

.anare-kpi-label {
    font-size: var(--anare-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-text-subtle);
}

.anare-kpi-value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--anare-text);
    letter-spacing: -0.02em;
    transition: opacity var(--anare-transition);
}
.anare-kpi-value.fade {
    opacity: 0.4;
}

.anare-kpi-spark {
    position: relative;
    height: 36px;
    margin: 0 -4px -4px;
    overflow: hidden;
}
.anare-kpi-spark canvas {
    width: 100% !important;
    height: 100% !important;
}

/* === SKELETON === */
.anare-skeleton {
    display: inline-block;
    background: linear-gradient(90deg, var(--anare-surface-alt) 0%, var(--anare-border) 50%, var(--anare-surface-alt) 100%);
    background-size: 200% 100%;
    animation: anare-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--anare-radius-sm);
}
.anare-skeleton-value {
    width: 70%;
    height: 1.6rem;
    border-radius: var(--anare-radius-sm);
}
@keyframes anare-skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* === CHART EMPTY STATES === */
.anare-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--anare-space-6) var(--anare-space-4);
    color: var(--anare-text-subtle);
    min-height: 220px;
}
.anare-chart-empty[hidden] { display: none; }
.anare-chart-empty i {
    font-size: 2.5rem;
    color: var(--anare-border-strong);
    margin-bottom: var(--anare-space-3);
}
.anare-chart-empty p {
    font-size: var(--anare-fs-md);
    font-weight: 500;
    color: var(--anare-text-muted);
    margin: 0 0 var(--anare-space-1);
}
.anare-chart-empty small {
    font-size: var(--anare-fs-xs);
}
.anare-chart-empty a {
    color: var(--anare-primary);
    font-weight: 600;
    text-decoration: none;
}
.anare-chart-empty a:hover { text-decoration: underline; }

/* === Chart Card V3 — premium === */
.anare-chart-card-v3 {
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    overflow: hidden;
    box-shadow: var(--anare-shadow-sm);
    transition: box-shadow var(--anare-transition), border-color var(--anare-transition);
}
.anare-chart-card-v3:hover {
    box-shadow: var(--anare-shadow-md);
    border-color: var(--anare-border-strong);
}

.anare-chart-header-v3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-4);
    padding: var(--anare-space-4) var(--anare-space-5);
    background: linear-gradient(180deg, var(--anare-surface-alt) 0%, var(--anare-surface) 100%);
    border-bottom: 1px solid var(--anare-border);
    flex-wrap: wrap;
}

.anare-chart-header-main {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    flex: 1;
    min-width: 0;
}

.anare-chart-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    font-size: 1.05rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.anare-chart-icon-primary {
    background: linear-gradient(135deg, var(--anare-primary-light), var(--anare-primary-soft));
    color: var(--anare-primary);
    box-shadow: inset 0 0 0 1px var(--anare-primary-soft);
}
.anare-chart-icon-teal {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.18), rgba(8, 145, 178, 0.05));
    color: #0e7490;
    box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.18);
}
.anare-chart-icon-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(245, 158, 11, 0.05));
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}
.anare-chart-icon-indigo {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.05));
    color: #4f46e5;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
}

.anare-chart-titles {
    flex: 1;
    min-width: 0;
}
.anare-chart-titles h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--anare-text);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}
.anare-chart-titles p {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    margin: 0;
    line-height: 1.4;
}

/* Stats inline (Activity card) */
.anare-chart-stats {
    display: flex;
    align-items: center;
    gap: var(--anare-space-5);
    padding-left: var(--anare-space-3);
    border-left: 1px dashed var(--anare-border);
}
.anare-chart-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}
.anare-chart-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--anare-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}
.anare-chart-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--anare-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .anare-chart-header-v3 {
        flex-direction: column;
        align-items: stretch;
        gap: var(--anare-space-3);
    }
    .anare-chart-stats {
        padding-left: 0;
        border-left: none;
        border-top: 1px dashed var(--anare-border);
        padding-top: var(--anare-space-3);
        justify-content: space-between;
    }
    .anare-chart-stat {
        text-align: left;
    }
}

.anare-chart-body-v3 {
    background: var(--anare-surface);
    padding: var(--anare-space-4) var(--anare-space-5) var(--anare-space-5);
    min-height: 300px;
    position: relative;
}
.anare-chart-body-v3 canvas {
    max-height: 320px;
}

/* === ROLE OPS CARD with tabs === */
.anare-role-ops-card .anare-chart-header-v2 {
    flex-wrap: wrap;
    gap: var(--anare-space-3);
}
.anare-role-ops-tabs {
    display: inline-flex;
    background: var(--anare-surface-alt);
    border-radius: var(--anare-radius-md);
    padding: 2px;
    gap: 2px;
}
.anare-role-ops-tab {
    background: transparent;
    border: none;
    color: var(--anare-text-subtle);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-sm);
    cursor: pointer;
    transition: background var(--anare-transition), color var(--anare-transition);
}
.anare-role-ops-tab:hover {
    color: var(--anare-primary);
    background: var(--anare-primary-light);
}
.anare-role-ops-tab.active {
    background: var(--anare-surface);
    color: var(--anare-primary);
    box-shadow: var(--anare-shadow-sm);
}
.anare-role-ops-pane {
    min-height: 300px;
}
.anare-role-ops-pane[hidden] { display: none; }
.anare-role-ops-pane[data-pane="donut"] canvas,
.anare-role-ops-pane[data-pane="stacked"] canvas {
    max-height: 320px;
}

/* Table inside role ops (premium look) */
.anare-role-ops-pane[data-pane="table"] table {
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.anare-role-ops-pane[data-pane="table"] thead th {
    background: var(--anare-surface-alt);
    color: var(--anare-text-subtle);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--anare-space-3);
    border-bottom: 1px solid var(--anare-border);
}
.anare-role-ops-pane[data-pane="table"] tbody td {
    padding: var(--anare-space-3);
    font-size: var(--anare-fs-sm);
    border-bottom: 1px solid var(--anare-border);
}
.anare-role-ops-pane[data-pane="table"] tbody tr:last-child td {
    border-bottom: none;
}
.anare-role-ops-pane[data-pane="table"] tbody tr:hover {
    background: var(--anare-primary-soft);
}

/* Hide legacy v2 dashboard layout (replaced by v3) */
.anare-dashboard-content[data-dashboard="v3"] .anare-overview-section,
.anare-dashboard-content[data-dashboard="v3"] .anare-overview-header,
.anare-dashboard-content[data-dashboard="v3"] .anare-sparkline-grid {
    display: none;
}

/* ============================================
   STOCK PAGE — premium dashboard-like layout
   ============================================ */

.anare-page[data-page="stock"] .anare-page-hero-aside {
    flex-wrap: wrap;
    gap: var(--anare-space-2);
}
.anare-page-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: 6px var(--anare-space-3);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    color: var(--anare-text-muted);
    font-size: var(--anare-fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition);
}
.anare-page-hero-btn:hover {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    border-color: var(--anare-primary);
}
.anare-page-hero-btn i {
    font-size: 0.8rem;
}

/* KPI row in 5 columns for stock page */
.anare-kpi-row-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--anare-space-4);
}
@media (max-width: 1399px) { .anare-kpi-row-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .anare-kpi-row-5 { grid-template-columns: repeat(2, 1fr); gap: var(--anare-space-3); } }
@media (max-width: 480px)  { .anare-kpi-row-5 { grid-template-columns: 1fr; } }

.anare-kpi-foot {
    margin-top: var(--anare-space-1);
    padding-top: var(--anare-space-2);
    border-top: 1px dashed var(--anare-border);
}

/* Tree loading state */
.anare-stock-tree-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--anare-space-2);
    padding: var(--anare-space-7) var(--anare-space-4);
    color: var(--anare-text-subtle);
    font-size: var(--anare-fs-sm);
}
.anare-stock-tree-loading i {
    font-size: 1.25rem;
    color: var(--anare-primary);
}

/* Section "Stock détaillé par entrepôt" */
.anare-stock-warehouses {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-4);
}
.anare-stock-warehouses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-3);
    flex-wrap: wrap;
}
.anare-stock-warehouses-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--anare-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.anare-stock-warehouses-title i {
    color: var(--anare-primary);
    font-size: 1rem;
}
.anare-stock-warehouses-count {
    font-size: var(--anare-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-text-subtle);
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border);
    padding: 4px 10px;
    border-radius: var(--anare-radius-pill);
}
.anare-stock-warehouse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: var(--anare-space-4);
}
@media (max-width: 991px) {
    .anare-stock-warehouse-grid { grid-template-columns: 1fr; }
}

/* === Warehouse card V2 — premium === */
.anare-stock-wh-v2 {
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    overflow: hidden;
    position: relative;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
}
.anare-stock-wh-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--wh-color, var(--anare-primary));
}
.anare-stock-wh-v2:hover {
    border-color: var(--wh-color, var(--anare-primary));
    box-shadow: var(--anare-shadow-md);
    transform: translateY(-2px);
}
.anare-stock-wh-v2-ok      { --wh-color: #16a34a; --wh-bg: rgba(34, 197, 94, 0.06); }
.anare-stock-wh-v2-warning { --wh-color: #f59e0b; --wh-bg: rgba(245, 158, 11, 0.06); }
.anare-stock-wh-v2-danger  { --wh-color: #dc2626; --wh-bg: rgba(239, 68, 68, 0.06); }
.anare-stock-wh-v2-low     { --wh-color: #94a3b8; --wh-bg: var(--anare-surface-alt); }

/* Header */
.anare-stock-wh-v2-head {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4);
    background: linear-gradient(180deg, var(--wh-bg, var(--anare-surface-alt)) 0%, var(--anare-surface) 100%);
    border-bottom: 1px solid var(--anare-border);
}
.anare-stock-wh-v2-head-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.10);
}
.anare-stock-wh-v2-head-icon[data-fill="ok"]      { background: linear-gradient(135deg, #22c55e, #16a34a); }
.anare-stock-wh-v2-head-icon[data-fill="warning"] { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.anare-stock-wh-v2-head-icon[data-fill="danger"]  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.anare-stock-wh-v2-head-icon[data-fill="low"]     { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }

.anare-stock-wh-v2-head-text {
    flex: 1;
    min-width: 0;
}
.anare-stock-wh-v2-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--anare-text);
    margin: 0 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.anare-stock-wh-v2-meta {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    flex-wrap: wrap;
}
.anare-stock-wh-v2-type {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wh-color, var(--anare-primary));
    background: var(--wh-bg, var(--anare-primary-light));
    padding: 2px 8px;
    border-radius: var(--anare-radius-pill);
    border: 1px solid currentColor;
}
.anare-stock-wh-v2-city {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
}
.anare-stock-wh-v2-city i {
    color: var(--wh-color, var(--anare-primary));
    font-size: 0.7rem;
}

/* Status pill */
.anare-stock-wh-v2-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--anare-radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.anare-stock-wh-v2-status-ok      { background: rgba(34, 197, 94, 0.12);  color: #15803d; }
.anare-stock-wh-v2-status-warning { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.anare-stock-wh-v2-status-danger  { background: rgba(239, 68, 68, 0.12);  color: #b91c1c; }
.anare-stock-wh-v2-status-low     { background: var(--anare-surface-alt);   color: var(--anare-text-subtle); }
.anare-stock-wh-v2-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.anare-stock-wh-v2-status-danger .anare-stock-wh-v2-status-dot {
    animation: anare-status-pulse 2s ease-out infinite;
}

/* Big metric */
.anare-stock-wh-v2-metric {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--anare-space-4);
    padding: var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    align-items: center;
}
.anare-stock-wh-v2-total {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}
.anare-stock-wh-v2-total-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--anare-text);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.anare-stock-wh-v2-total-unit {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--anare-text-subtle);
}

/* Fill */
.anare-stock-wh-v2-fill {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.anare-stock-wh-v2-fill-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.anare-stock-wh-v2-fill-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-text-subtle);
}
.anare-stock-wh-v2-fill-pct {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.anare-stock-wh-v2-fill-pct[data-fill="ok"]      { color: #15803d; }
.anare-stock-wh-v2-fill-pct[data-fill="warning"] { color: #b45309; }
.anare-stock-wh-v2-fill-pct[data-fill="danger"]  { color: #b91c1c; }
.anare-stock-wh-v2-fill-pct[data-fill="low"]     { color: var(--anare-text-subtle); }

.anare-stock-wh-v2-fill-bar {
    width: 100%;
    height: 8px;
    background: var(--anare-border);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.anare-stock-wh-v2-fill-bar > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.anare-stock-wh-v2-fill-bar > span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: anare-shimmer 2.4s ease-in-out infinite;
}
@keyframes anare-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.anare-stock-wh-v2-fill-bar > span[data-fill="ok"]      { background: linear-gradient(90deg, #22c55e, #16a34a); }
.anare-stock-wh-v2-fill-bar > span[data-fill="warning"] { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.anare-stock-wh-v2-fill-bar > span[data-fill="danger"]  { background: linear-gradient(90deg, #ef4444, #dc2626); }
.anare-stock-wh-v2-fill-bar > span[data-fill="low"]     { background: linear-gradient(90deg, #cbd5e1, #94a3b8); }

.anare-stock-wh-v2-fill-foot {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
}
.anare-stock-wh-v2-fill-foot strong {
    color: var(--anare-text-muted);
    font-weight: 700;
}

/* Products */
.anare-stock-wh-v2-products {
    padding: var(--anare-space-3) var(--anare-space-4) var(--anare-space-4);
}
.anare-stock-wh-v2-products-head {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-text-subtle);
    margin-bottom: var(--anare-space-2);
    padding-bottom: var(--anare-space-2);
    border-bottom: 1px dashed var(--anare-border);
}
.anare-stock-wh-v2-products-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-2);
}
.anare-stock-wh-v2-products-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.anare-stock-wh-v2-product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-2);
    font-size: var(--anare-fs-sm);
}
.anare-stock-wh-v2-product-name {
    color: var(--anare-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.anare-stock-wh-v2-product-qty {
    flex-shrink: 0;
    color: var(--anare-text);
    font-variant-numeric: tabular-nums;
}
.anare-stock-wh-v2-product-qty strong {
    font-weight: 700;
}
.anare-stock-wh-v2-product-qty small {
    color: var(--anare-text-subtle);
    font-weight: 500;
    margin-left: 2px;
}
.anare-stock-wh-v2-product-bar {
    width: 100%;
    height: 4px;
    background: var(--anare-surface-alt);
    border-radius: 2px;
    overflow: hidden;
}
.anare-stock-wh-v2-product-bar > span {
    display: block;
    height: 100%;
    background: var(--wh-color, var(--anare-primary));
    border-radius: 2px;
    opacity: 0.7;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Empty state inside V2 card */
.anare-stock-wh-v2-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--anare-space-2);
    padding: var(--anare-space-5) var(--anare-space-4);
    color: var(--anare-text-subtle);
    font-size: var(--anare-fs-sm);
    text-align: center;
}
.anare-stock-wh-v2-empty i {
    font-size: 1.75rem;
    color: var(--anare-border-strong);
}

/* === Warehouse card v1 (kept for fallback / legacy) === */
.anare-stock-wh-card {
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    overflow: hidden;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition);
}
.anare-stock-wh-card:hover {
    border-color: var(--anare-border-strong);
    box-shadow: var(--anare-shadow-md);
}
.anare-stock-wh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4);
    background: linear-gradient(180deg, var(--anare-surface-alt) 0%, var(--anare-surface) 100%);
    border-bottom: 1px solid var(--anare-border);
}
.anare-stock-wh-head-left {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    flex: 1;
    min-width: 0;
}
.anare-stock-wh-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    font-size: 1rem;
}
.anare-stock-wh-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.anare-stock-wh-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--anare-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anare-stock-wh-type {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-primary);
    background: var(--anare-primary-light);
    padding: 2px 8px;
    border-radius: var(--anare-radius-pill);
    align-self: flex-start;
}
.anare-stock-wh-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}
.anare-stock-wh-total-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--anare-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.anare-stock-wh-total-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-text-subtle);
    margin-top: 2px;
}

/* Warehouse table */
.anare-stock-wh-body {
    padding: 0;
}
.anare-stock-wh-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: var(--anare-fs-sm);
}
.anare-stock-wh-table thead th {
    background: var(--anare-surface-alt);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-text-subtle);
    padding: var(--anare-space-2) var(--anare-space-4);
    text-align: left;
    border-bottom: 1px solid var(--anare-border);
}
.anare-stock-wh-table tbody td {
    padding: var(--anare-space-2) var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    vertical-align: middle;
}
.anare-stock-wh-table tbody tr:last-child td {
    border-bottom: none;
}
.anare-stock-wh-table tbody tr:hover {
    background: var(--anare-primary-soft);
}
.anare-stock-wh-table tbody td:nth-child(2) {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--anare-text);
}

/* Product cell with leading dot */
.anare-stock-product {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
}
.anare-stock-product-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--anare-primary);
    flex-shrink: 0;
}

/* Empty state inside warehouse card */
.anare-stock-wh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--anare-space-2);
    padding: var(--anare-space-5) var(--anare-space-4);
    color: var(--anare-text-subtle);
    font-size: var(--anare-fs-sm);
    text-align: center;
}
.anare-stock-wh-empty i {
    font-size: 1.75rem;
    color: var(--anare-border-strong);
}

/* === Account page (/my/account) — premium === */

/* Identity summary banner */
.anare-account-identity {
    display: flex;
    align-items: center;
    gap: var(--anare-space-4);
    padding: var(--anare-space-4) var(--anare-space-5);
    background: linear-gradient(135deg, var(--anare-primary-soft), var(--anare-surface));
    border: 1px solid var(--anare-primary-soft);
    border-radius: var(--anare-radius-lg);
    box-shadow: var(--anare-shadow-sm);
    flex-wrap: wrap;
}
.anare-account-identity-avatar {
    flex-shrink: 0;
    position: relative;
}
.anare-account-identity-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--anare-surface);
    box-shadow: 0 0 0 3px var(--anare-primary-light);
}
.anare-account-identity-text {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.anare-account-identity-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-text-subtle);
}
.anare-account-identity-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--anare-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.anare-account-identity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--anare-space-3);
    margin-top: 4px;
}
.anare-account-identity-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--anare-fs-sm);
    color: var(--anare-text-muted);
}
.anare-account-identity-meta-item i {
    color: var(--anare-primary);
    font-size: 0.85rem;
}
.anare-account-identity-actions {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}
.anare-account-identity-security {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--anare-radius-md);
    background: var(--anare-surface);
    border: 1px solid rgba(0, 26, 110, 0.18);
    color: var(--anare-primary);
    font-size: var(--anare-fs-sm);
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
}
.anare-account-identity-security:hover {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0, 26, 110, 0.16);
    transform: translateY(-1px);
}
.anare-account-identity-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--anare-radius-md);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    color: var(--anare-text-muted);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition);
}
.anare-account-identity-logout:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.40);
    text-decoration: none;
}

/* Form card */
.anare-account-card {
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    overflow: hidden;
    box-shadow: var(--anare-shadow-sm);
}
.anare-account-card-header {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4) var(--anare-space-5);
    background: linear-gradient(180deg, var(--anare-surface-alt), var(--anare-surface));
    border-bottom: 1px solid var(--anare-border);
}
.anare-account-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: linear-gradient(135deg, var(--anare-primary-light), var(--anare-primary-soft));
    color: var(--anare-primary);
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px var(--anare-primary-soft);
}
.anare-account-card-titles h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--anare-text);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}
.anare-account-card-titles p {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    margin: 0;
    line-height: 1.4;
}
.anare-account-card-body {
    padding: var(--anare-space-5);
}

/* Form styling — overrides Bootstrap defaults inside anare-account-form */
.anare-account-form .row {
    --bs-gutter-x: var(--anare-space-4);
    --bs-gutter-y: var(--anare-space-3);
}

/* Section header inside form */
.anare-account-section-head {
    display: flex !important;
    align-items: center;
    gap: var(--anare-space-3);
    padding-top: var(--anare-space-3);
    margin-top: var(--anare-space-2);
    margin-bottom: var(--anare-space-2);
}
.anare-account-section-head:not(:first-of-type) {
    padding-top: var(--anare-space-5);
    border-top: 1px dashed var(--anare-border);
    margin-top: var(--anare-space-4);
}
.anare-account-form .row > .anare-account-section-head:first-of-type {
    padding-top: 0;
    margin-top: 0;
}
.anare-account-section-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: linear-gradient(135deg, var(--anare-primary-light), var(--anare-primary-soft));
    color: var(--anare-primary);
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px var(--anare-primary-soft);
}
.anare-account-section-text h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--anare-text);
    margin: 0;
    letter-spacing: -0.01em;
}
.anare-account-section-text p {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    margin: 0;
    line-height: 1.4;
}

/* Input with leading icon */
.anare-input-icon-wrap {
    position: relative;
    display: block;
}
.anare-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--anare-text-subtle);
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 2;
    transition: color var(--anare-transition);
    width: 16px;
    text-align: center;
}
.anare-input-icon-wrap:focus-within .anare-input-icon {
    color: var(--anare-primary);
}
/* Force higher specificity than .anare-account-form .form-control */
.anare-account-form input.anare-input-with-icon,
.anare-account-form select.anare-input-with-icon,
.anare-account-form textarea.anare-input-with-icon,
.anare-account-form .form-control.anare-input-with-icon {
    padding-left: 46px !important;
}
.anare-account-form .anare-input-with-icon::placeholder {
    color: var(--anare-text-subtle);
}

/* Readonly companion fields (Identifiant ANARE-CI, Membre depuis…) */
.anare-account-form .anare-input-readonly,
.anare-account-form .form-control.anare-input-readonly {
    background: var(--anare-surface-alt) !important;
    border-color: var(--anare-border) !important;
    color: var(--anare-text-muted) !important;
    cursor: default !important;
    font-weight: 500;
}
.anare-account-form .anare-input-readonly:focus {
    box-shadow: none !important;
    border-color: var(--anare-border) !important;
    background: var(--anare-surface-alt) !important;
}
.anare-account-form .anare-readonly-field .anare-input-icon {
    color: var(--anare-primary);
}

/* Hide country selector — toutes les adresses sont en Côte d'Ivoire.
   Le <select> reste dans le DOM (caché) pour que sa valeur soit
   toujours envoyée lors du submit. */
.anare-account-form #div_country {
    display: none !important;
}

/* Layout overrides — 2 colonnes par ligne sur desktop */
@media (min-width: 768px) {
    /* "Votre nom" — passe en 50% (était col-lg-12 par défaut) */
    .anare-account-form #div_name {
        flex: 0 0 auto !important;
        width: 50% !important;
        max-width: 50% !important;
    }
    /* Rue & Appartement — 50/50 */
    .anare-account-form #div_street,
    .anare-account-form #div_street2 {
        flex: 0 0 auto !important;
        width: 50% !important;
        max-width: 50% !important;
    }
    /* Code postal · Ville — 50/50 */
    .anare-account-form #div_zip,
    .anare-account-form #div_city {
        flex: 0 0 auto !important;
        width: 50% !important;
        max-width: 50% !important;
    }
    /* Si une région/état est rendue par Odoo, pleine largeur en dessous */
    .anare-account-form #div_state {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}
.anare-account-form .form-label,
.anare-account-form label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--anare-text-muted);
    margin-bottom: 6px;
    display: block;
}
.anare-account-form .form-control,
.anare-account-form .form-select,
.anare-account-form input[type="text"],
.anare-account-form input[type="email"],
.anare-account-form input[type="tel"],
.anare-account-form input[type="number"],
.anare-account-form select,
.anare-account-form textarea {
    background: var(--anare-surface-alt) !important;
    border: 1px solid var(--anare-border) !important;
    border-radius: var(--anare-radius-md) !important;
    padding: 10px 14px !important;
    font-size: var(--anare-fs-sm) !important;
    color: var(--anare-text) !important;
    min-height: 44px !important;
    transition: border-color var(--anare-transition), background var(--anare-transition), box-shadow var(--anare-transition) !important;
}
.anare-account-form .form-control:hover,
.anare-account-form .form-select:hover,
.anare-account-form input:hover {
    border-color: var(--anare-border-strong) !important;
}
.anare-account-form .form-control:focus,
.anare-account-form .form-select:focus,
.anare-account-form input:focus,
.anare-account-form textarea:focus,
.anare-account-form select:focus {
    background: var(--anare-surface) !important;
    border-color: var(--anare-primary) !important;
    box-shadow: 0 0 0 3px var(--anare-primary-light) !important;
    outline: none !important;
}
.anare-account-form .form-control::placeholder,
.anare-account-form input::placeholder {
    color: var(--anare-text-subtle) !important;
}
.anare-account-form .form-text {
    font-size: var(--anare-fs-xs) !important;
    color: var(--anare-text-subtle) !important;
    margin-top: 4px !important;
}

/* Form footer (submit + cancel buttons) */
.anare-account-form .o_portal_address_footer,
.anare-account-form .footer,
.anare-account-form .row + div:last-child,
.anare-account-form button[type="submit"] {
    /* Reset any spacing collision */
}
.anare-account-form button[type="submit"],
.anare-account-form .btn-primary,
.anare-account-card-body button[type="submit"] {
    background: var(--anare-primary) !important;
    border-color: var(--anare-primary) !important;
    color: var(--anare-text-on-primary) !important;
    border-radius: var(--anare-radius-md) !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 26, 110, 0.18), 0 4px 10px rgba(0, 26, 110, 0.12) !important;
    transition: all var(--anare-transition) !important;
}
.anare-account-form button[type="submit"]:hover,
.anare-account-form .btn-primary:hover {
    background: var(--anare-primary-hover) !important;
    border-color: var(--anare-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 26, 110, 0.22), 0 8px 18px rgba(0, 26, 110, 0.18) !important;
}
.anare-account-form .btn-link,
.anare-account-form a.btn,
.anare-account-form a {
    color: var(--anare-primary);
}
.anare-account-form a:hover {
    color: var(--anare-primary-hover);
}

/* Hide native "Discard" button + "or" separator from address_footer */
.anare-account-form a.btn-outline-secondary,
.anare-account-form .d-flex.flex-column.flex-md-row > .position-relative {
    display: none !important;
}
/* Right-align the remaining "Save" button */
.anare-account-form .d-flex.flex-column.flex-md-row {
    justify-content: flex-end !important;
}

/* Errors block */
.anare-account-card-body #errors:not(:empty) {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--anare-radius-md);
    padding: var(--anare-space-3) var(--anare-space-4);
    margin-bottom: var(--anare-space-4);
    color: #b91c1c;
    font-size: var(--anare-fs-sm);
}

/* Invalid feedback inline */
.anare-account-form .invalid-feedback,
.anare-account-form .is-invalid + .invalid-feedback {
    font-size: var(--anare-fs-xs);
    color: #b91c1c;
    margin-top: 4px;
}
.anare-account-form .form-control.is-invalid,
.anare-account-form .is-invalid {
    border-color: rgba(239, 68, 68, 0.50) !important;
    background: rgba(239, 68, 68, 0.04) !important;
}

@media (max-width: 575px) {
    .anare-account-identity {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .anare-account-identity-actions {
        align-self: stretch;
        justify-content: flex-end;
    }
    .anare-account-card-body { padding: var(--anare-space-4); }
}

/* === Portal account security (/my/security) === */
.o_portal_security_body {
    width: min(100%, 980px) !important;
    margin: var(--anare-space-5) auto var(--anare-space-7) !important;
    padding: var(--anare-space-5) !important;
    border: 1px solid rgba(0, 26, 110, 0.12);
    border-radius: var(--anare-radius-xl);
    background:
        radial-gradient(circle at top right, rgba(255, 122, 31, 0.10), transparent 34%),
        linear-gradient(180deg, #ffffff, #fbfdfb);
    box-shadow: var(--anare-shadow-md);
}
.o_portal_security_body > .d-flex.gap-2.my-3 {
    align-items: center;
    gap: var(--anare-space-3) !important;
    margin: 0 0 var(--anare-space-5) !important;
    padding-bottom: var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
}
.o_portal_security_body > .d-flex.gap-2.my-3 .btn {
    width: 40px;
    height: 40px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    border: 1px solid var(--anare-border);
    background: #fff;
    color: var(--anare-primary);
}
.o_portal_security_body > .d-flex.gap-2.my-3 h3 {
    margin: 0 !important;
    color: var(--anare-text);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 850;
    letter-spacing: 0;
}
.o_portal_security_body section {
    position: relative;
    margin: 0 0 var(--anare-space-4);
    padding: var(--anare-space-4);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--anare-shadow-sm);
}
.o_portal_security_body section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--anare-radius-lg) var(--anare-radius-lg) 0 0;
    background: linear-gradient(90deg, var(--anare-primary), var(--anare-action));
}
.o_portal_security_body section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--anare-space-3);
    color: var(--anare-text);
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: 0;
}
.o_portal_security_body section h4::before {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--anare-radius-md);
    background: rgba(0, 26, 110, 0.10);
    color: var(--anare-primary);
    font-family: FontAwesome;
    font-size: 0.92rem;
}
.o_portal_security_body a,
.o_portal_security_body .o_button_icon {
    color: var(--anare-primary) !important;
}
.o_portal_security_body section[name="portal_change_password"] h4::before {
    content: "\f084";
}
.o_portal_security_body section:has(#auth_totp_portal_enable) h4::before,
.o_portal_security_body section:has(#auth_totp_portal_disable) h4::before {
    content: "\f023";
}
.o_portal_security_body section[name="portal_revoke_all_devices_popup"] h4::before,
.o_portal_security_body section:has(#portal_revoke_all_sessions_popup) h4::before {
    content: "\f1da";
}
.o_portal_security_body section[name="portal_deactivate_account"] h4::before {
    content: "\f071";
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
}
.o_portal_security_body label {
    margin-bottom: 6px;
    color: var(--anare-text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.o_portal_security_body .input-group {
    min-height: 46px;
}
.o_portal_security_body .form-control {
    min-height: 46px;
    border: 1px solid var(--anare-border) !important;
    border-radius: var(--anare-radius-md) 0 0 var(--anare-radius-md) !important;
    background: var(--anare-surface-alt) !important;
    color: var(--anare-text) !important;
    font-weight: 650;
}
.o_portal_security_body .form-control:focus {
    border-color: var(--anare-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(0, 26, 110, 0.12) !important;
}
.o_portal_security_body .o_show_password {
    min-width: 46px;
    border-color: var(--anare-border) !important;
    background: var(--anare-surface-alt) !important;
    color: var(--anare-primary) !important;
}
.o_portal_security_body .btn {
    min-height: 42px;
    border-radius: var(--anare-radius-md) !important;
    font-weight: 800;
}
.o_portal_security_body .btn-light,
.o_portal_security_body .btn-primary,
.o_portal_security_body #auth_totp_portal_enable,
.o_portal_security_body #auth_totp_portal_revoke_all_devices {
    border-color: var(--anare-primary) !important;
    background: var(--anare-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 26, 110, 0.16);
}
.o_portal_security_body .btn-light:hover,
.o_portal_security_body .btn-primary:hover,
.o_portal_security_body #auth_totp_portal_enable:hover,
.o_portal_security_body #auth_totp_portal_revoke_all_devices:hover {
    background: var(--anare-primary-hover) !important;
    border-color: var(--anare-primary-hover) !important;
    color: #fff !important;
}
.o_portal_security_body #auth_totp_portal_disable {
    color: #b91c1c !important;
    font-weight: 800;
    text-decoration: none;
}
.o_portal_security_body .alert {
    border-radius: var(--anare-radius-md);
    border-width: 1px;
    font-weight: 700;
}
.o_portal_security_body .alert-secondary {
    border-color: rgba(255, 122, 31, 0.28);
    background: rgba(255, 122, 31, 0.10);
    color: #8a4b12;
}
.o_portal_security_body .alert-success,
.o_portal_security_body .text-success {
    color: var(--anare-primary) !important;
}
.o_portal_security_body .table {
    overflow: hidden;
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
}
.o_portal_security_body .table thead th {
    border-bottom: 1px solid var(--anare-border);
    background: var(--anare-surface-alt);
    color: var(--anare-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
}
.o_portal_security_body .table tbody td {
    vertical-align: middle;
}

@media (min-width: 768px) {
    .o_portal_security_body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--anare-space-4);
    }
    .o_portal_security_body > .alert,
    .o_portal_security_body > .d-flex.gap-2.my-3 {
        grid-column: 1 / -1;
    }
    .o_portal_security_body section:has(table),
    .o_portal_security_body section[name="portal_deactivate_account"] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .o_portal_security_body {
        margin-top: var(--anare-space-3) !important;
        padding: var(--anare-space-3) !important;
        border-radius: var(--anare-radius-lg);
    }
}

/* Security page layout v2 — structured ANARE-CI shell */
body.anare-has-sidebar .anare-security-page.o_portal_security_body {
    width: min(100%, 1180px) !important;
    margin: var(--anare-space-5) auto var(--anare-space-7) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.anare-has-sidebar .anare-security-page > .d-flex.gap-2.my-3 {
    display: none !important;
}

.anare-security-hero {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--anare-space-4);
    min-height: 150px;
    padding: var(--anare-space-5);
    border: 1px solid rgba(0, 26, 110, 0.14);
    border-radius: var(--anare-radius-xl);
    background:
        linear-gradient(135deg, rgba(0, 26, 110, 0.95), rgba(13, 74, 54, 0.92)),
        radial-gradient(circle at top right, rgba(255, 122, 31, 0.38), transparent 40%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.anare-security-hero-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--anare-radius-lg);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.55rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.anare-security-hero-copy {
    max-width: 720px;
}

.anare-security-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.anare-security-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--anare-action);
    box-shadow: 0 0 0 5px rgba(255, 122, 31, 0.18);
}

.anare-security-hero h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 900;
    letter-spacing: 0;
}

.anare-security-hero p {
    max-width: 680px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.96rem;
    line-height: 1.65;
}

body.anare-has-sidebar .anare-security-page section.anare-security-card {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-3);
    min-height: 100%;
    margin: 0;
    padding: var(--anare-space-5);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    background: var(--anare-surface);
    box-shadow: var(--anare-shadow-sm);
}

body.anare-has-sidebar .anare-security-page section.anare-security-card::before {
    height: 5px;
    background: linear-gradient(90deg, var(--anare-primary), rgba(0, 26, 110, 0.38));
}

body.anare-has-sidebar .anare-security-page section.anare-security-card-2fa::before {
    background: linear-gradient(90deg, var(--anare-primary), var(--anare-action));
}

body.anare-has-sidebar .anare-security-page section.anare-security-card-danger::before {
    background: linear-gradient(90deg, #b91c1c, #f97316);
}

/* Cache la section d'activation 2FA injectée par auth_totp_portal sur /my/security.
   La gestion 2FA est centralisée côté ANARE-CI (admin + auto-activation par mail/SMS),
   on ne veut pas que l'utilisateur portail l'active/désactive manuellement. */
body.anare-has-sidebar .anare-security-page section.totp_portal,
body.anare-has-sidebar .anare-security-page section[id*="totp_portal"],
body.anare-has-sidebar .anare-security-page button#auth_totp_portal_enable,
body.anare-has-sidebar .anare-security-page button#auth_totp_portal_disable,
body.anare-has-sidebar .anare-security-page section:has(> form button#auth_totp_portal_enable),
body.anare-has-sidebar .anare-security-page section:has(> form button#auth_totp_portal_disable) {
    display: none !important;
}

.anare-security-card-sub {
    margin: -4px 0 var(--anare-space-2);
    color: var(--anare-text-subtle);
    font-size: var(--anare-fs-sm);
    line-height: 1.55;
}

body.anare-has-sidebar .anare-security-page .oe_reset_password_form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--anare-space-3);
}

body.anare-has-sidebar .anare-security-page .oe_reset_password_form .mb-4,
body.anare-has-sidebar .anare-security-page .oe_reset_password_form .mb-3,
body.anare-has-sidebar .anare-security-page .oe_reset_password_form .mb-1 {
    margin: 0 !important;
}

body.anare-has-sidebar .anare-security-page .alert {
    margin: 0;
}

body.anare-has-sidebar .anare-security-page .alert i {
    margin-right: 6px;
}

body.anare-has-sidebar .anare-security-page section:has(#auth_totp_portal_enable),
body.anare-has-sidebar .anare-security-page section:has(#auth_totp_portal_disable) {
    background:
        linear-gradient(180deg, rgba(0, 26, 110, 0.04), rgba(255, 255, 255, 0.96)),
        var(--anare-surface);
}

body.anare-has-sidebar .anare-security-page #portal_revoke_all_sessions_popup,
body.anare-has-sidebar .anare-security-page #auth_totp_portal_enable,
body.anare-has-sidebar .anare-security-page #auth_totp_portal_revoke_all_devices,
body.anare-has-sidebar .anare-security-page section[name="portal_deactivate_account"] > .btn {
    align-self: flex-start;
    margin-top: auto;
}

body.anare-has-sidebar .anare-security-page section[name="portal_deactivate_account"] > .btn {
    border-color: rgba(185, 28, 28, 0.18) !important;
    background: rgba(185, 28, 28, 0.08) !important;
    color: #991b1b !important;
    box-shadow: none !important;
}

body.anare-has-sidebar .anare-security-page section[name="portal_deactivate_account"] > .btn:hover {
    border-color: #b91c1c !important;
    background: #b91c1c !important;
    color: #fff !important;
}

@media (min-width: 992px) {
    body.anare-has-sidebar .anare-security-page.o_portal_security_body {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--anare-space-4);
    }

    body.anare-has-sidebar .anare-security-page > .alert {
        grid-column: 1 / -1;
    }

    body.anare-has-sidebar .anare-security-page .anare-security-card-password {
        grid-column: span 7;
    }

    body.anare-has-sidebar .anare-security-page .anare-security-card-2fa {
        grid-column: span 5;
    }

    body.anare-has-sidebar .anare-security-page .anare-security-card-sessions,
    body.anare-has-sidebar .anare-security-page .anare-security-card-danger {
        grid-column: span 6;
    }
}

@media (max-width: 767px) {
    .anare-security-hero {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        padding: var(--anare-space-4);
    }

    body.anare-has-sidebar .anare-security-page section.anare-security-card {
        margin-top: var(--anare-space-3);
        padding: var(--anare-space-4);
    }
}

/* Native portal security dialogs aligned with ANARE-CI modals */
body.anare-has-sidebar #portal_deactivate_account_modal .modal-dialog,
body.anare-has-sidebar .modal:not(.anare-confirm-modal):not(.anare-support-modal) .modal-dialog {
    max-width: 620px;
}

body.anare-has-sidebar #portal_deactivate_account_modal .modal-content,
body.anare-has-sidebar .modal:not(.anare-confirm-modal):not(.anare-support-modal) .modal-content {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 26, 110, 0.12);
    border-radius: var(--anare-radius-xl);
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

body.anare-has-sidebar #portal_deactivate_account_modal .modal-content::before,
body.anare-has-sidebar .modal:not(.anare-confirm-modal):not(.anare-support-modal) .modal-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--anare-primary), var(--anare-action));
}

body.anare-has-sidebar #portal_deactivate_account_modal .modal-header,
body.anare-has-sidebar .modal:not(.anare-confirm-modal):not(.anare-support-modal) .modal-header {
    align-items: flex-start;
    padding: var(--anare-space-5) var(--anare-space-5) var(--anare-space-3);
    border: 0;
    background: #fff !important;
    color: var(--anare-text) !important;
}

body.anare-has-sidebar #portal_deactivate_account_modal .modal-title,
body.anare-has-sidebar .modal:not(.anare-confirm-modal):not(.anare-support-modal) .modal-title {
    color: var(--anare-text);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0;
}

body.anare-has-sidebar #portal_deactivate_account_modal .modal-body,
body.anare-has-sidebar .modal:not(.anare-confirm-modal):not(.anare-support-modal) .modal-body {
    padding: 0 var(--anare-space-5) var(--anare-space-4);
    color: var(--anare-text-muted);
}

body.anare-has-sidebar #portal_deactivate_account_modal .modal-body p,
body.anare-has-sidebar .modal:not(.anare-confirm-modal):not(.anare-support-modal) .modal-body p {
    color: var(--anare-text-muted);
    line-height: 1.55;
}

body.anare-has-sidebar #portal_deactivate_account_modal .modal-body hr,
body.anare-has-sidebar .modal:not(.anare-confirm-modal):not(.anare-support-modal) .modal-body hr {
    opacity: 1;
    border-color: var(--anare-border);
}

body.anare-has-sidebar #portal_deactivate_account_modal .modal-footer,
body.anare-has-sidebar .modal:not(.anare-confirm-modal):not(.anare-support-modal) .modal-footer {
    gap: var(--anare-space-2);
    justify-content: flex-end !important;
    padding: var(--anare-space-4) var(--anare-space-5) var(--anare-space-5);
    border: 0;
    background: var(--anare-surface-alt);
}

body.anare-has-sidebar #portal_deactivate_account_modal .btn,
body.anare-has-sidebar .modal:not(.anare-confirm-modal):not(.anare-support-modal) .btn {
    min-height: 42px;
    border-radius: var(--anare-radius-md);
    font-weight: 800;
}

body.anare-has-sidebar #portal_deactivate_account_modal .btn-danger {
    border-color: #b91c1c;
    background: #b91c1c;
}

body.anare-has-sidebar #portal_deactivate_account_modal .modal-footer .btn:not(.btn-danger),
body.anare-has-sidebar .modal:not(.anare-confirm-modal):not(.anare-support-modal) .modal-footer .btn:not(.btn-primary):not(.btn-danger) {
    border: 1px solid var(--anare-border);
    background: #fff;
    color: var(--anare-text-muted);
}

/* === Transporteurs page — selection grid + sticky footer === */
.anare-transp-form {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-4);
}

.anare-transp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--anare-space-3);
    padding: var(--anare-space-4);
}
@media (max-width: 575px) { .anare-transp-grid { grid-template-columns: 1fr; } }

/* Single card (clickable label) */
.anare-transp-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3);
    background: var(--anare-surface);
    border: 1.5px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    cursor: pointer;
    transition: border-color var(--anare-transition), background var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
    overflow: hidden;
}
.anare-transp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--anare-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--anare-transition-slow);
}
.anare-transp-card:hover {
    border-color: var(--anare-primary);
    box-shadow: var(--anare-shadow-md);
    transform: translateY(-2px);
}
.anare-transp-card.is-selected {
    border-color: var(--anare-primary);
    background: linear-gradient(135deg, var(--anare-primary-soft), var(--anare-surface));
}
.anare-transp-card.is-selected::before {
    transform: scaleX(1);
}
.anare-transp-card:focus-within {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}

.anare-transp-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Avatar (initials) */
.anare-transp-card-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--anare-surface-alt);
    color: var(--anare-text-muted);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 2px solid var(--anare-border);
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition);
}
.anare-transp-card.is-selected .anare-transp-card-avatar {
    background: linear-gradient(135deg, var(--anare-primary), var(--anare-primary-hover));
    color: var(--anare-text-on-primary);
    border-color: var(--anare-primary);
    box-shadow: 0 2px 6px rgba(0, 26, 110, 0.30);
}

/* Body */
.anare-transp-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.anare-transp-card-name {
    font-size: var(--anare-fs-md);
    font-weight: 700;
    color: var(--anare-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anare-transp-card-meta {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    flex-wrap: wrap;
}
.anare-transp-card-city {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
}
.anare-transp-card-city i {
    color: var(--anare-primary);
    font-size: 0.7rem;
}
.anare-transp-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--anare-radius-pill);
    background: rgba(34, 197, 94, 0.10);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.anare-transp-card-badge i {
    font-size: 0.6rem;
}

/* Check indicator */
.anare-transp-card-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--anare-surface);
    border: 2px solid var(--anare-border-strong);
    color: transparent;
    font-size: 0.7rem;
    transition: background var(--anare-transition), border-color var(--anare-transition), color var(--anare-transition), transform var(--anare-transition-spring);
}
.anare-transp-card.is-selected .anare-transp-card-check {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: var(--anare-text-on-primary);
    transform: scale(1);
    box-shadow: 0 2px 6px rgba(0, 26, 110, 0.25);
}
.anare-transp-card .anare-transp-card-check {
    transform: scale(0.8);
}

/* No results state */
.anare-transp-noresults {
    text-align: center;
    padding: var(--anare-space-6) var(--anare-space-4);
    color: var(--anare-text-subtle);
}
.anare-transp-noresults i {
    font-size: 2rem;
    color: var(--anare-border-strong);
    margin-bottom: var(--anare-space-2);
    display: block;
}
.anare-transp-noresults p {
    font-weight: 600;
    color: var(--anare-text-muted);
    margin: 0 0 4px;
}
.anare-transp-noresults small {
    font-size: var(--anare-fs-xs);
}

/* Sticky footer */
.anare-transp-footer {
    position: sticky;
    bottom: var(--anare-space-4);
    margin-top: var(--anare-space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3) var(--anare-space-5);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    z-index: 20;
    flex-wrap: wrap;
}
.anare-transp-footer-state {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    font-size: var(--anare-fs-sm);
    color: var(--anare-text-muted);
}
.anare-transp-footer-state i {
    color: var(--anare-primary);
}
.anare-transp-footer-state strong {
    color: var(--anare-primary);
    font-weight: 700;
    font-size: 1.05rem;
    margin-right: 2px;
}
.anare-transp-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
}
.anare-transp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    height: 40px;
    padding: 0 var(--anare-space-4);
    border-radius: var(--anare-radius-md);
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--anare-transition);
}
.anare-transp-btn-secondary {
    background: var(--anare-surface);
    color: var(--anare-text-muted);
    border-color: var(--anare-border-strong);
}
.anare-transp-btn-secondary:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
    text-decoration: none;
}
.anare-transp-btn-primary {
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
    box-shadow: 0 1px 2px rgba(0, 26, 110, 0.18), 0 4px 10px rgba(0, 26, 110, 0.12);
}
.anare-transp-btn-primary:hover {
    background: var(--anare-primary-hover);
    color: var(--anare-text-on-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 26, 110, 0.22), 0 8px 18px rgba(0, 26, 110, 0.18);
}

/* === Stock map (Où est le gaz ?) — Leaflet + side list === */
.anare-stock-map-wrap {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--anare-space-4);
    padding: var(--anare-space-4);
    min-height: 540px;
}
@media (max-width: 1199px) {
    .anare-stock-map-wrap { grid-template-columns: 1fr; }
}

.anare-stock-map {
    height: 540px;
    min-height: 540px;
    border-radius: var(--anare-radius-lg);
    overflow: hidden;
    border: 1px solid var(--anare-border);
    background: var(--anare-surface-alt);
    z-index: 0;
}

.anare-stock-map-aside {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-3);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    overflow: hidden;
    max-height: 540px;
}
.anare-stock-map-aside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--anare-space-3) var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    background: linear-gradient(180deg, var(--anare-surface), var(--anare-surface-alt));
}
.anare-stock-map-aside-header h4 {
    font-size: var(--anare-fs-sm);
    font-weight: 700;
    color: var(--anare-text);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.anare-stock-map-aside-count {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--anare-radius-pill);
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
}

/* Legend */
.anare-stock-map-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px var(--anare-space-3);
    padding: var(--anare-space-3) var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    background: var(--anare-surface-alt);
}
.anare-stock-map-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-muted);
}
.anare-stock-map-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.anare-stock-map-legend-dot[data-fill="ok"]      { background: #16a34a; }
.anare-stock-map-legend-dot[data-fill="warning"] { background: #f59e0b; }
.anare-stock-map-legend-dot[data-fill="danger"]  { background: #dc2626; }
.anare-stock-map-legend-dot[data-fill="low"]     { background: #94a3b8; }

/* Site list */
.anare-stock-map-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--anare-space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.anare-stock-map-item {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-2) var(--anare-space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--anare-radius-md);
    cursor: pointer;
    text-align: left;
    transition: background var(--anare-transition), border-color var(--anare-transition);
    width: 100%;
}
.anare-stock-map-item:hover {
    background: var(--anare-primary-soft);
    border-color: var(--anare-primary-soft);
}
.anare-stock-map-item.is-active {
    background: var(--anare-primary-light);
    border-color: var(--anare-primary);
}
.anare-stock-map-item-pin {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    color: #fff;
    font-size: 0.85rem;
}
.anare-stock-map-item-pin[data-fill="ok"]      { background: linear-gradient(135deg, #22c55e, #16a34a); }
.anare-stock-map-item-pin[data-fill="warning"] { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.anare-stock-map-item-pin[data-fill="danger"]  { background: linear-gradient(135deg, #ef4444, #dc2626); }
.anare-stock-map-item-pin[data-fill="low"]     { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }

.anare-stock-map-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.anare-stock-map-item-name {
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    color: var(--anare-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anare-stock-map-item-meta {
    display: flex;
    gap: var(--anare-space-2);
    font-size: 0.7rem;
    color: var(--anare-text-subtle);
}
.anare-stock-map-item-bar {
    width: 100%;
    height: 3px;
    background: var(--anare-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.anare-stock-map-item-bar > span {
    display: block;
    height: 100%;
    transition: width 0.5s ease;
}
.anare-stock-map-item-bar > span[data-fill="ok"]      { background: #16a34a; }
.anare-stock-map-item-bar > span[data-fill="warning"] { background: #f59e0b; }
.anare-stock-map-item-bar > span[data-fill="danger"]  { background: #dc2626; }
.anare-stock-map-item-bar > span[data-fill="low"]     { background: #94a3b8; }

.anare-stock-map-item-fill {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.anare-stock-map-item-fill[data-fill="ok"]      { color: #15803d; }
.anare-stock-map-item-fill[data-fill="warning"] { color: #b45309; }
.anare-stock-map-item-fill[data-fill="danger"]  { color: #b91c1c; }
.anare-stock-map-item-fill[data-fill="low"]     { color: var(--anare-text-subtle); }

/* === Custom Leaflet markers === */
.anare-pin-wrap { background: transparent !important; border: none !important; }
.anare-pin {
    position: relative;
    width: 44px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.25));
}
.anare-pin-shape {
    width: 36px;
    height: 36px;
    border-radius: 50% 50% 50% 0;
    background: var(--pin-color, var(--anare-primary));
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    color: #fff;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.20);
}
.anare-pin-shape i {
    transform: rotate(45deg);
    font-size: 0.85rem;
}
.anare-pin-fill {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: var(--pin-color, var(--anare-primary));
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--anare-radius-pill);
    border: 1.5px solid var(--pin-color, var(--anare-primary));
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.anare-pin-pulse {
    position: absolute;
    top: 0;
    left: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, 0);
    border-radius: 50%;
    background: var(--pin-color, var(--anare-primary));
    opacity: 0.5;
    animation: anare-pin-pulse 1.6s ease-out infinite;
}
@keyframes anare-pin-pulse {
    0%   { transform: translate(-50%, 0) scale(0.8); opacity: 0.6; }
    100% { transform: translate(-50%, 0) scale(2.0); opacity: 0; }
}

/* === Custom Leaflet popup === */
.anare-stock-map-popup .leaflet-popup-content-wrapper {
    border-radius: var(--anare-radius-lg);
    padding: 0;
    border: 1px solid var(--anare-border);
    box-shadow: var(--anare-shadow-lg);
    overflow: hidden;
}
.anare-stock-map-popup .leaflet-popup-content {
    margin: 0;
    line-height: 1.4;
}
.anare-stock-popup {
    width: 100%;
}
.anare-stock-popup-header {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: var(--anare-space-3) var(--anare-space-4);
    background: linear-gradient(135deg, var(--anare-primary-light), var(--anare-primary-soft));
    border-bottom: 1px solid var(--anare-border);
}
.anare-stock-popup-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
    font-size: 0.95rem;
}
.anare-stock-popup-header h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--anare-text);
    margin: 0;
    line-height: 1.2;
}
.anare-stock-popup-type {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-primary);
}

.anare-stock-popup-fill {
    padding: var(--anare-space-3) var(--anare-space-4) var(--anare-space-2);
}
.anare-stock-popup-fill-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.anare-stock-popup-fill-head span {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--anare-text-subtle);
}
.anare-stock-popup-fill-head strong {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.anare-stock-popup-fill-head strong[data-fill="ok"]      { color: #15803d; }
.anare-stock-popup-fill-head strong[data-fill="warning"] { color: #b45309; }
.anare-stock-popup-fill-head strong[data-fill="danger"]  { color: #b91c1c; }
.anare-stock-popup-fill-head strong[data-fill="low"]     { color: var(--anare-text-subtle); }
.anare-stock-popup-fill-bar {
    width: 100%;
    height: 6px;
    background: var(--anare-border);
    border-radius: 3px;
    overflow: hidden;
}
.anare-stock-popup-fill-bar > span {
    display: block;
    height: 100%;
    transition: width 0.5s ease;
    border-radius: 3px;
}
.anare-stock-popup-fill-bar > span[data-fill="ok"]      { background: linear-gradient(90deg, #22c55e, #16a34a); }
.anare-stock-popup-fill-bar > span[data-fill="warning"] { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.anare-stock-popup-fill-bar > span[data-fill="danger"]  { background: linear-gradient(90deg, #ef4444, #dc2626); }
.anare-stock-popup-fill-bar > span[data-fill="low"]     { background: linear-gradient(90deg, #cbd5e1, #94a3b8); }

.anare-stock-popup-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--anare-space-2);
    padding: var(--anare-space-2) var(--anare-space-4);
    background: var(--anare-surface-alt);
    border-top: 1px solid var(--anare-border);
    border-bottom: 1px solid var(--anare-border);
}
.anare-stock-popup-meta > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
}
.anare-stock-popup-meta span {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--anare-text-subtle);
}
.anare-stock-popup-meta strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--anare-text);
    font-variant-numeric: tabular-nums;
}
.anare-stock-popup-meta strong small {
    font-size: 0.65rem;
    color: var(--anare-text-subtle);
    font-weight: 500;
}

.anare-stock-popup-addr {
    padding: var(--anare-space-2) var(--anare-space-4);
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    border-bottom: 1px solid var(--anare-border);
}
.anare-stock-popup-addr i {
    color: var(--anare-primary);
    margin-right: 4px;
}

.anare-stock-popup-products {
    list-style: none;
    margin: 0;
    padding: var(--anare-space-2) var(--anare-space-4) var(--anare-space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.anare-stock-popup-products li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: var(--anare-fs-sm);
    border-bottom: 1px solid var(--anare-border);
}
.anare-stock-popup-products li:last-child {
    border-bottom: none;
}
.anare-stock-popup-product-name {
    color: var(--anare-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: var(--anare-space-2);
}
.anare-stock-popup-product-qty {
    font-weight: 700;
    color: var(--anare-text);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.anare-stock-popup-product-qty small {
    color: var(--anare-text-subtle);
    font-weight: 500;
    margin-left: 2px;
}
.anare-stock-popup-products-more {
    font-size: var(--anare-fs-xs);
    color: var(--anare-primary);
    font-style: italic;
    text-align: center;
    justify-content: center !important;
    border-bottom: none !important;
}
.anare-stock-popup-empty {
    text-align: center;
    color: var(--anare-text-subtle);
    font-size: var(--anare-fs-xs);
    padding: var(--anare-space-3) var(--anare-space-4);
    margin: 0;
}

/* === Stock flow (legacy / fallback) === */
.anare-flow {
    padding: var(--anare-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-4);
}
.anare-flow-track {
    display: grid;
    grid-template-columns: 1fr 60px 1fr 60px 1fr 60px 1fr;
    gap: var(--anare-space-2);
    align-items: stretch;
}
@media (max-width: 1199px) {
    .anare-flow-track {
        grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
    }
}
@media (max-width: 991px) {
    .anare-flow-track {
        grid-template-columns: 1fr;
        gap: var(--anare-space-3);
    }
    .anare-flow-connector { display: none !important; }
}

/* Stage column */
.anare-flow-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 14px;
}
.anare-flow-stage-step {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--anare-surface);
    border: 2px solid var(--anare-primary);
    border-radius: 50%;
    color: var(--anare-primary);
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: var(--anare-shadow-sm);
}
.anare-flow-stage.is-empty .anare-flow-stage-step {
    border-color: var(--anare-border-strong);
    color: var(--anare-text-subtle);
}

/* Stage card (clickable to expand) */
.anare-flow-stage-card {
    width: 100%;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    padding: 28px var(--anare-space-3) var(--anare-space-3);
    cursor: pointer;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition), background var(--anare-transition);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--anare-space-2);
}
.anare-flow-stage-card:hover:not(:disabled) {
    border-color: var(--anare-primary);
    box-shadow: var(--anare-shadow-md);
    transform: translateY(-2px);
}
.anare-flow-stage-card.is-open {
    border-color: var(--anare-primary);
    background: var(--anare-primary-soft);
    box-shadow: var(--anare-shadow-md);
}
.anare-flow-stage-card:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: var(--anare-surface-alt);
}
.anare-flow-stage-card:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}

.anare-flow-stage-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--anare-primary-light), var(--anare-primary-soft));
    color: var(--anare-primary);
    font-size: 1.5rem;
    box-shadow: inset 0 0 0 1px var(--anare-primary-soft);
}
.anare-flow-stage.is-empty .anare-flow-stage-icon {
    background: var(--anare-surface-alt);
    color: var(--anare-text-subtle);
    box-shadow: inset 0 0 0 1px var(--anare-border);
}

.anare-flow-stage-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--anare-space-2);
}
.anare-flow-stage-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--anare-text);
    text-align: center;
    letter-spacing: -0.01em;
}
.anare-flow-stage-desc {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    text-align: center;
    line-height: 1.3;
    margin-bottom: var(--anare-space-1);
}
.anare-flow-stage-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--anare-space-2);
    width: 100%;
    margin-top: var(--anare-space-1);
    padding-top: var(--anare-space-2);
    border-top: 1px dashed var(--anare-border);
}
.anare-flow-stage-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.anare-flow-stage-stat-v {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--anare-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.anare-flow-stage-stat-v small {
    font-size: 0.65rem;
    color: var(--anare-text-subtle);
    font-weight: 500;
}
.anare-flow-stage-stat-l {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--anare-text-subtle);
}

/* Fill bar */
.anare-flow-fill-bar {
    width: 100%;
    height: 6px;
    background: var(--anare-border);
    border-radius: 3px;
    overflow: hidden;
    margin-top: var(--anare-space-1);
}
.anare-flow-fill-bar-track {
    display: block;
    height: 100%;
    background: var(--anare-primary);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.anare-flow-fill-bar-track[data-fill="ok"]      { background: linear-gradient(90deg, #22c55e, #15803d); }
.anare-flow-fill-bar-track[data-fill="warning"] { background: linear-gradient(90deg, #f59e0b, #b45309); }
.anare-flow-fill-bar-track[data-fill="danger"]  { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.anare-flow-fill-bar-track[data-fill="low"]     { background: linear-gradient(90deg, #94a3b8, #64748b); }

.anare-flow-stage-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--anare-fs-xs);
    font-weight: 600;
    color: var(--anare-primary);
    margin-top: var(--anare-space-1);
}
.anare-flow-stage-toggle i {
    transition: transform var(--anare-transition-slow);
}
.anare-flow-stage-card.is-open .anare-flow-stage-toggle i {
    transform: rotate(180deg);
}

/* Connector between stages */
.anare-flow-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 14px;
}
.anare-flow-connector-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--anare-border-strong), var(--anare-primary), var(--anare-border-strong));
    transform: translateY(-50%);
}
.anare-flow-connector-arrow {
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    box-shadow: 0 2px 6px rgba(0, 26, 110, 0.30);
    border: 3px solid var(--anare-surface);
}

/* Details panel below the track */
.anare-flow-details {
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    overflow: hidden;
    animation: anare-flow-details-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes anare-flow-details-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.anare-flow-details-header {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3) var(--anare-space-4);
    background: linear-gradient(180deg, var(--anare-surface), var(--anare-surface-alt));
    border-bottom: 1px solid var(--anare-border);
}
.anare-flow-details-header > i {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-sm);
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    font-size: 0.9rem;
}
.anare-flow-details-header h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--anare-text);
    margin: 0;
}
.anare-flow-details-count {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-primary);
    background: var(--anare-primary-light);
    padding: 4px 10px;
    border-radius: var(--anare-radius-pill);
}
.anare-flow-sites {
    padding: var(--anare-space-4);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--anare-space-3);
}

/* Site card inside details */
.anare-flow-site {
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    padding: var(--anare-space-3);
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition);
}
.anare-flow-site:hover {
    border-color: var(--anare-primary);
    box-shadow: var(--anare-shadow-sm);
}
.anare-flow-site-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-2);
    margin-bottom: var(--anare-space-2);
}
.anare-flow-site-title {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    font-size: var(--anare-fs-sm);
    font-weight: 700;
    color: var(--anare-text);
    overflow: hidden;
    text-overflow: ellipsis;
}
.anare-flow-site-title i {
    color: var(--anare-primary);
    flex-shrink: 0;
}
.anare-flow-site-fill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--anare-radius-pill);
    flex-shrink: 0;
}
.anare-flow-site-fill[data-fill="ok"]      { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.anare-flow-site-fill[data-fill="warning"] { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.anare-flow-site-fill[data-fill="danger"]  { background: rgba(239, 68, 68, 0.10); color: #b91c1c; }
.anare-flow-site-fill[data-fill="low"]     { background: var(--anare-surface-alt); color: var(--anare-text-subtle); }

.anare-flow-site-bar {
    width: 100%;
    height: 4px;
    background: var(--anare-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--anare-space-3);
}
.anare-flow-site-bar-track {
    display: block;
    height: 100%;
    transition: width 0.6s ease;
    background: var(--anare-primary);
}
.anare-flow-site-bar-track[data-fill="ok"]      { background: #22c55e; }
.anare-flow-site-bar-track[data-fill="warning"] { background: #f59e0b; }
.anare-flow-site-bar-track[data-fill="danger"]  { background: #ef4444; }
.anare-flow-site-bar-track[data-fill="low"]     { background: #94a3b8; }

.anare-flow-site-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--anare-space-2);
    padding: var(--anare-space-2);
    background: var(--anare-surface-alt);
    border-radius: var(--anare-radius-sm);
    margin-bottom: var(--anare-space-2);
}
.anare-flow-site-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}
.anare-flow-site-meta-l {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--anare-text-subtle);
}
.anare-flow-site-meta-v {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--anare-text);
    font-variant-numeric: tabular-nums;
}
.anare-flow-site-meta-v small {
    font-size: 0.65rem;
    color: var(--anare-text-subtle);
    font-weight: 500;
}

.anare-flow-site-addr {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    margin-bottom: var(--anare-space-2);
    display: flex;
    align-items: center;
    gap: 4px;
}
.anare-flow-site-addr i {
    color: var(--anare-primary);
    font-size: 0.75rem;
}

.anare-flow-site-products {
    list-style: none;
    margin: 0;
    padding: var(--anare-space-2) 0 0;
    border-top: 1px solid var(--anare-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.anare-flow-site-products li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: var(--anare-fs-sm);
}
.anare-flow-site-product-name {
    color: var(--anare-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: var(--anare-space-2);
}
.anare-flow-site-product-qty {
    font-weight: 700;
    color: var(--anare-text);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.anare-flow-site-product-qty small {
    color: var(--anare-text-subtle);
    font-weight: 500;
    margin-left: 2px;
}
.anare-flow-site-products-more {
    font-size: var(--anare-fs-xs);
    color: var(--anare-primary);
    font-style: italic;
    text-align: center;
    justify-content: center !important;
}
.anare-flow-site-empty {
    text-align: center;
    color: var(--anare-text-subtle);
    font-size: var(--anare-fs-xs);
    padding: var(--anare-space-3) 0 0;
    margin: 0;
    border-top: 1px solid var(--anare-border);
}

/* Empty state for entire flow */
.anare-stock-flow-empty,
.anare-stock-tree-error {
    text-align: center;
    padding: var(--anare-space-7) var(--anare-space-4);
    color: var(--anare-text-subtle);
}
.anare-stock-flow-empty i,
.anare-stock-tree-error i {
    font-size: 2.5rem;
    color: var(--anare-border-strong);
    margin-bottom: var(--anare-space-3);
    display: block;
}
.anare-stock-tree-error i {
    color: #b91c1c;
}

/* Refresh indicator pulse on the hero pill (live feel) */
.anare-refresh-indicator.refreshing .anare-status-dot {
    background: var(--anare-action) !important;
}
.anare-refresh-indicator.refreshing .anare-status-dot::before {
    background: var(--anare-action) !important;
}

/* ============================================
   INTERNAL LIST PAGES — receptions / livraisons / transferts / rebuts
   ============================================ */

.anare-page {
    padding: var(--anare-space-5) var(--anare-space-6);
    max-width: var(--anare-content-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-5);
}
@media (max-width: 991.98px) {
    .anare-page { padding: var(--anare-space-4); gap: var(--anare-space-4); }
}

/* === Page hero (above stats banner) === */
.anare-page-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--anare-space-4);
    flex-wrap: wrap;
}
.anare-page-hero-text { min-width: 0; }
.anare-page-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--anare-text);
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    line-height: 1.2;
}
.anare-page-hero-sub {
    font-size: var(--anare-fs-md);
    color: var(--anare-text-muted);
    margin: 0;
    line-height: 1.5;
    max-width: 640px;
}
.anare-page-hero-aside {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
}
.anare-page-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: 6px var(--anare-space-3);
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.20);
    border-radius: var(--anare-radius-pill);
    color: #15803d;
    font-size: var(--anare-fs-xs);
    font-weight: 600;
}

/* === Stats banner === */
.anare-stats-banner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--anare-space-3);
}
.anare-stats-banner-3 { grid-template-columns: repeat(3, 1fr); }
.anare-stats-banner-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199.98px) {
    .anare-stats-banner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
    .anare-stats-banner,
    .anare-stats-banner-3,
    .anare-stats-banner-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .anare-stats-banner,
    .anare-stats-banner-3,
    .anare-stats-banner-4 { grid-template-columns: 1fr; }
}

.anare-stat-card {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    padding: var(--anare-space-3);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.anare-stat-card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--stat-color, var(--anare-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--anare-transition-slow);
}
.anare-stat-card:hover {
    border-color: var(--stat-color, var(--anare-primary));
    box-shadow: var(--anare-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.anare-stat-card:hover::after,
.anare-stat-card.active::after {
    transform: scaleX(1);
}
.anare-stat-card.active {
    border-color: var(--stat-color, var(--anare-primary));
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, var(--stat-bg, var(--anare-primary-soft)) 100%);
}

.anare-stat-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    font-size: 0.9rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.anare-stat-icon-primary { background: var(--anare-primary-light); color: var(--anare-primary); }
.anare-stat-icon-gray    { background: var(--anare-surface-alt);   color: var(--anare-text-muted); }
.anare-stat-icon-amber   { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.anare-stat-icon-green   { background: rgba(34, 197, 94, 0.12);  color: #15803d; }
.anare-stat-card[data-anare-quickfilter="all"]      { --stat-color: var(--anare-primary); --stat-bg: var(--anare-primary-soft); }
.anare-stat-card[data-anare-quickfilter="draft"]    { --stat-color: var(--anare-text-subtle); --stat-bg: var(--anare-surface-alt); }
.anare-stat-card[data-anare-quickfilter="assigned"] { --stat-color: #b45309; --stat-bg: rgba(245, 158, 11, 0.06); }
.anare-stat-card[data-anare-quickfilter="done"]     { --stat-color: #15803d; --stat-bg: rgba(34, 197, 94, 0.06); }

.anare-stat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anare-stat-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--anare-text-subtle);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.anare-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--anare-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* === List card === */
.anare-list-card {
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    overflow: clip;
    box-shadow: var(--anare-shadow-sm);
}

/* Toolbar (search + actions) */
.anare-list-toolbar {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4) var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border);
    flex-wrap: wrap;
}
.anare-list-toolbar-search {
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    padding: 0 var(--anare-space-3);
    height: 40px;
    transition: border-color var(--anare-transition), background var(--anare-transition);
}
.anare-list-toolbar-search:focus-within {
    border-color: var(--anare-primary);
    background: var(--anare-surface);
    box-shadow: 0 0 0 3px var(--anare-primary-light);
}
.anare-list-toolbar-search > i {
    color: var(--anare-text-subtle);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.anare-list-toolbar-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--anare-fs-sm);
    color: var(--anare-text);
    min-width: 0;
}
.anare-list-toolbar-search input::placeholder { color: var(--anare-text-subtle); }

.anare-list-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
}
.anare-list-toolbar-count {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    margin-right: var(--anare-space-2);
}
.anare-list-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    height: 40px;
    padding: 0 var(--anare-space-3);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    color: var(--anare-text-muted);
    font-size: var(--anare-fs-sm);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition);
}
.anare-list-toolbar-btn:hover {
    background: var(--anare-primary-light);
    border-color: var(--anare-primary);
    color: var(--anare-primary);
    text-decoration: none;
}
.anare-list-toolbar-btn:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
.anare-list-toolbar-btn-icon {
    width: 40px;
    padding: 0;
    justify-content: center;
}
.anare-list-toolbar-btn-icon i { font-size: 0.9rem; }
.anare-list-toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--anare-border);
    margin: 0 var(--anare-space-1);
}
.anare-list-toolbar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--anare-radius-pill);
    margin-left: 4px;
    min-width: 18px;
    line-height: 1.4;
}

/* Pills statuts */
.anare-list-pills {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: var(--anare-space-3) var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border);
    overflow-x: auto;
}
.anare-list-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    height: 36px;
    padding: 0 var(--anare-space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--anare-radius-pill);
    color: var(--anare-text-muted);
    font-size: var(--anare-fs-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition);
}
.anare-list-pill:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
}
.anare-list-pill.active {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    border-color: var(--anare-primary-soft);
    font-weight: 600;
}
.anare-list-pill:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
.anare-list-pill-badge {
    background: var(--anare-surface-alt);
    color: var(--anare-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--anare-radius-pill);
    line-height: 1.4;
}
.anare-list-pill.active .anare-list-pill-badge {
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
}
.anare-list-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--anare-text-subtle);
    flex-shrink: 0;
}
.anare-list-pill-dot[data-state="draft"]    { background: var(--anare-text-subtle); }
.anare-list-pill-dot[data-state="assigned"] { background: #f59e0b; }
.anare-list-pill-dot[data-state="done"]     { background: #22c55e; }

/* Advanced filters wrapper — invisible by default, drawer mode when opened */
.anare-list-advanced-filters .o_dgh_filter_toolbar {
    margin: 0;
    padding: 0;
    border: none;
}
/* Barre de filtres actifs — visible uniquement quand des filtres sont appliqués */
.anare-list-advanced-filters .o_dgh_filter_toolbar > form > .d-flex {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border);
    background: var(--anare-primary-light);
    min-height: 0;
}
/* Masquer quand aucun badge actif */
.anare-list-advanced-filters .o_dgh_filter_toolbar > form > .d-flex:not(:has(.badge)) {
    display: none !important;
}
/* Cacher les éléments déjà présents dans .anare-list-toolbar */
.anare-list-advanced-filters .o_dgh_filter_toolbar > form > .d-flex > [data-action="toggle-filters"],
.anare-list-advanced-filters .o_dgh_filter_toolbar > form > .d-flex > .anare-export-group,
.anare-list-advanced-filters .o_dgh_filter_toolbar > form > .d-flex > .ms-auto {
    display: none !important;
}
/* Label "Filtres actifs :" devant les chips */
.anare-list-advanced-filters .anare-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.anare-list-advanced-filters .anare-active-filters::before {
    content: "Filtres actifs :";
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--anare-primary);
    white-space: nowrap;
    margin-right: 0.25rem;
}
.anare-list-advanced-filters .anare-active-filters .badge {
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--anare-radius-sm);
    padding: 0.3em 0.65em;
    background: var(--anare-surface) !important;
    color: var(--anare-primary) !important;
    border: 1px solid var(--anare-primary) !important;
}

/* === POPUP MODE for filter panel === */
.anare-filter-panel.anare-drawer {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(820px, 96vw);
    height: auto;
    max-height: min(88vh, 680px);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    box-shadow: 0 32px 64px rgba(15, 23, 42, 0.20), 0 0 0 1px rgba(15, 23, 42, 0.06);
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.97);
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 1200;
    overflow: hidden;
    pointer-events: none;
}
.anare-filter-panel.anare-drawer.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* Popup header */
.anare-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--anare-space-4) var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border);
    background: var(--anare-surface);
    flex-shrink: 0;
}
.anare-drawer-title {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    font-size: 1rem;
    font-weight: 700;
    color: var(--anare-text);
    letter-spacing: -0.01em;
}
.anare-drawer-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--anare-radius-sm);
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    font-size: 0.85rem;
}
.anare-drawer-close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    color: var(--anare-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--anare-transition), color var(--anare-transition),
                border-color var(--anare-transition), transform var(--anare-transition);
}
.anare-drawer-close:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
    border-color: var(--anare-border-strong);
    transform: rotate(90deg);
}
.anare-drawer-close:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}

/* Popup body — colonnes côte à côte + scroll interne */
.anare-filter-panel.anare-drawer > form {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
}
.anare-filter-panel.anare-drawer .row {
    flex-direction: row !important;
    overflow-y: auto;
    padding: var(--anare-space-5);
    margin: 0 !important;
    gap: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    align-items: flex-start;
}
.anare-filter-panel.anare-drawer .col-lg {
    flex: 1 1 0 !important;
    min-width: 140px;
    max-width: none !important;
    width: auto !important;
    border-right: 1px solid var(--anare-border) !important;
    border-bottom: none !important;
    padding: 0 var(--anare-space-4) !important;
}
.anare-filter-panel.anare-drawer .col-lg:first-child {
    padding-left: 0 !important;
}
.anare-filter-panel.anare-drawer .col-lg:last-child {
    border-right: none !important;
    padding-right: 0 !important;
}
/* Section title in popup */
.anare-filter-panel.anare-drawer .anare-filter-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-text-subtle);
    border-bottom: 2px solid var(--anare-primary-light);
    padding-bottom: var(--anare-space-2);
    margin-bottom: var(--anare-space-3);
}
.anare-filter-panel.anare-drawer .anare-filter-section-title i {
    color: var(--anare-primary) !important;
}
/* Filter options in popup (radios) */
.anare-filter-panel.anare-drawer .anare-filter-option {
    padding: 7px 10px;
    border-radius: var(--anare-radius-sm);
    font-size: var(--anare-fs-sm);
    color: var(--anare-text-muted);
    cursor: pointer;
    transition: background var(--anare-transition), color var(--anare-transition);
    margin: 0;
}
.anare-filter-panel.anare-drawer .anare-filter-option:hover {
    background: var(--anare-primary-soft);
    color: var(--anare-text);
}
.anare-filter-panel.anare-drawer .anare-filter-option:has(input:checked) {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    font-weight: 600;
}
.anare-filter-panel.anare-drawer .anare-filter-option input[type="radio"],
.anare-filter-panel.anare-drawer .anare-filter-option input[type="checkbox"] {
    accent-color: var(--anare-primary);
}

/* Popup footer */
.anare-popup-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem var(--anare-space-5);
    background: var(--anare-surface);
    box-shadow: inset 0 1px 0 var(--anare-border);
}

/* Bouton Ignorer */
.anare-popup-btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.3rem;
    border-radius: var(--anare-radius-md);
    border: 1.5px solid var(--anare-border-strong);
    background: var(--anare-surface);
    color: var(--anare-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: background var(--anare-transition), border-color var(--anare-transition), color var(--anare-transition);
}
.anare-popup-btn-reset:hover {
    background: var(--anare-surface-alt);
    border-color: var(--anare-text-muted);
    color: var(--anare-text);
}

/* Bouton Appliquer */
.anare-popup-btn-apply {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    border-radius: var(--anare-radius-md);
    border: 1.5px solid var(--anare-primary);
    background: var(--anare-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: background var(--anare-transition), border-color var(--anare-transition), box-shadow var(--anare-transition);
    box-shadow: 0 2px 8px rgba(0, 26, 110, 0.25);
}
.anare-popup-btn-apply:hover {
    background: var(--anare-primary-hover);
    border-color: var(--anare-primary-hover);
    box-shadow: 0 4px 12px rgba(0, 26, 110, 0.35);
}

/* Backdrop */
.anare-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.40);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1075;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.anare-drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

/* Lock body scroll when popup open */
body.anare-drawer-open {
    overflow: hidden;
}

/* Mobile — bottom sheet */
@media (max-width: 575px) {
    .anare-filter-panel.anare-drawer {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        max-height: 90dvh;
        border-radius: var(--anare-radius-xl) var(--anare-radius-xl) 0 0;
        transform: translateY(100%);
        transition: opacity 0.22s ease, transform 0.28s ease;
        opacity: 1;
    }
    .anare-filter-panel.anare-drawer.show {
        transform: translateY(0);
    }
    .anare-filter-panel.anare-drawer .row {
        flex-direction: column !important;
    }
    .anare-filter-panel.anare-drawer .col-lg {
        border-right: none !important;
        border-bottom: 1px solid var(--anare-border) !important;
        padding: 0 0 var(--anare-space-4) 0 !important;
    }
    .anare-filter-panel.anare-drawer .col-lg:last-child {
        border-bottom: none !important;
    }
}

/* === Table === */
.anare-list-table-wrap {
    overflow-x: auto;
}
.anare-list-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: var(--anare-fs-sm);
}
.anare-list-table thead {
    background: var(--anare-surface-alt);
}
.anare-list-table thead th {
    background: var(--anare-surface-alt);
    color: var(--anare-text-subtle);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--anare-space-3) var(--anare-space-4);
    text-align: left;
    border-bottom: 1px solid var(--anare-border);
    white-space: nowrap;
}
.anare-list-th-state { text-align: right !important; }
.anare-list-table tbody td {
    padding: var(--anare-space-3) var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    vertical-align: middle;
}
.anare-list-table tbody tr.anare-list-row {
    transition: background var(--anare-transition);
}
.anare-list-table tbody tr.anare-list-row:hover {
    background: var(--anare-primary-soft);
}

/* Toolbar primary "+" button (create new) */
.anare-list-toolbar-btn-add {
    background: var(--anare-primary) !important;
    border-color: var(--anare-primary) !important;
    color: var(--anare-text-on-primary) !important;
    box-shadow: 0 1px 2px rgba(0, 26, 110, 0.18), 0 4px 10px rgba(0, 26, 110, 0.12);
}
.anare-list-toolbar-btn-add:hover {
    background: var(--anare-primary-hover) !important;
    border-color: var(--anare-primary-hover) !important;
    color: var(--anare-text-on-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 26, 110, 0.22), 0 8px 18px rgba(0, 26, 110, 0.18);
}
.anare-list-toolbar-btn-add i {
    font-size: 0.95rem !important;
    font-weight: 700;
}

/* === Custom tooltip (data-tooltip attribute) — opens BELOW the element === */
.anare-tooltip {
    position: relative;
}
.anare-tooltip::before,
.anare-tooltip::after {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transition-delay: 0s;
}
.anare-tooltip::before {
    content: attr(data-tooltip);
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, -4px);
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--anare-radius-sm);
    white-space: nowrap;
    z-index: 1080;
    box-shadow: var(--anare-shadow-md);
}
.anare-tooltip::after {
    content: '';
    top: calc(100% + 4px);
    left: 50%;
    transform: translate(-50%, -4px);
    border: 6px solid transparent;
    border-bottom-color: rgba(15, 23, 42, 0.95);
    width: 0;
    height: 0;
    z-index: 1080;
}
.anare-tooltip:hover::before,
.anare-tooltip:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0.3s;
}
.anare-tooltip:hover::after,
.anare-tooltip:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0.3s;
}
.anare-list-cell-muted {
    color: var(--anare-text-subtle);
    font-size: var(--anare-fs-sm);
}

/* Reference column (icon + name + optional sub) */
.anare-list-ref {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-3);
    text-decoration: none;
    color: inherit;
}
.anare-list-ref:hover { text-decoration: none; color: inherit; }
.anare-list-ref:hover .anare-list-ref-name { color: var(--anare-primary); }
.anare-list-ref-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-sm);
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    font-size: 0.85rem;
}
.anare-list-ref-icon-danger {
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
}
.anare-list-ref-icon-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
.anare-list-ref-icon-indigo {
    background: rgba(99, 102, 241, 0.10);
    color: #4f46e5;
}

/* Numeric column */
.anare-list-th-num,
.anare-list-cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.anare-list-cell-num strong {
    font-weight: 700;
    color: var(--anare-text);
}
.anare-list-ref-text { display: flex; flex-direction: column; line-height: 1.3; }
.anare-list-ref-name {
    font-weight: 600;
    color: var(--anare-text);
    transition: color var(--anare-transition);
}
.anare-list-ref-sub {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
}

/* Role chip — colored by data attribute */
.anare-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: color-mix(in srgb, var(--role-color, var(--anare-primary)) 12%, white);
    color: var(--role-color, var(--anare-primary));
    border: 1px solid color-mix(in srgb, var(--role-color, var(--anare-primary)) 30%, transparent);
    border-radius: var(--anare-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.anare-role-chip i { font-size: 0.7rem; }

/* State chip — colored dot + text */
.anare-state-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--anare-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.anare-state-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.anare-state-draft     { background: rgba(108, 117, 125, 0.10); color: #495057; border-color: rgba(108, 117, 125, 0.20); }
.anare-state-waiting   { background: rgba(99, 102, 241, 0.10); color: #4338ca; border-color: rgba(99, 102, 241, 0.25); }
.anare-state-confirmed { background: rgba(8, 145, 178, 0.10);  color: #0e7490; border-color: rgba(8, 145, 178, 0.25); }
.anare-state-assigned  { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.30); }
.anare-state-done      { background: rgba(34, 197, 94, 0.12);  color: #15803d; border-color: rgba(34, 197, 94, 0.30); }
.anare-state-cancel    { background: rgba(239, 68, 68, 0.10);  color: #b91c1c; border-color: rgba(239, 68, 68, 0.25); }
.anare-state-en_transit { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.30); }
.anare-state-recu      { background: rgba(34, 197, 94, 0.12);  color: #15803d; border-color: rgba(34, 197, 94, 0.30); }

/* Infrastructure-specific state chips */
.anare-infra-state-en_service       { background: rgba(34, 197, 94, 0.12);  color: #15803d; border: 1px solid rgba(34, 197, 94, 0.30); }
.anare-infra-state-en_construction  { background: rgba(245, 158, 11, 0.12); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.30); }
.anare-infra-state-arret_temporaire { background: rgba(8, 145, 178, 0.10);  color: #0e7490; border: 1px solid rgba(8, 145, 178, 0.25); }
.anare-infra-state-ferme            { background: rgba(108, 117, 125, 0.10); color: #495057; border: 1px solid rgba(108, 117, 125, 0.20); }
.anare-infra-state-unknown          { background: var(--anare-surface-alt); color: var(--anare-text-subtle); border: 1px solid var(--anare-border); }
[class*="anare-infra-state-"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--anare-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Inline code (infrastructure code field) */
.anare-list-code {
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-sm);
    padding: 2px 8px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Mono", Menlo, monospace;
    font-size: 0.78rem;
    color: var(--anare-text-muted);
}

/* Pending version flag (infra) */
.anare-list-ref-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
    font-size: 0.62rem;
    margin-left: 6px;
    vertical-align: middle;
}

/* === Inline row actions (access management) === */
.anare-list-th-actions {
    text-align: right !important;
    width: 1%;
    white-space: nowrap;
}
.anare-list-actions-cell {
    text-align: right;
}
.anare-list-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.anare-list-action-form {
    margin: 0;
    display: inline-flex;
}
.anare-list-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-sm);
    color: var(--anare-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition);
    font-size: 0.8rem;
}
.anare-list-action-btn:hover {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    border-color: var(--anare-primary);
    text-decoration: none;
}
.anare-list-action-btn.anare-list-action-danger:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.40);
}
.anare-list-action-btn.anare-list-action-success:hover {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.40);
}

/* Inactive row dimming */
.anare-list-row-inactive {
    opacity: 0.55;
}
.anare-list-row-inactive:hover {
    opacity: 0.85;
}

/* Avatar initials in anare-list-ref-icon (access page) */
.anare-list-ref-icon strong {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--anare-primary);
}

/* Agrement-specific state chips (ANARE-CI workflow) */
.anare-agrement-state-brouillon     { background: rgba(108, 117, 125, 0.10); color: #495057; border: 1px solid rgba(108, 117, 125, 0.20); }
.anare-agrement-state-soumis        { background: rgba(8, 145, 178, 0.10);  color: #0e7490; border: 1px solid rgba(8, 145, 178, 0.25); }
.anare-agrement-state-en_validation { background: rgba(245, 158, 11, 0.12); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.30); }
.anare-agrement-state-valide        { background: rgba(34, 197, 94, 0.12);  color: #15803d; border: 1px solid rgba(34, 197, 94, 0.30); }
.anare-agrement-state-rejete        { background: rgba(239, 68, 68, 0.10);  color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.25); }
.anare-agrement-state-expire        { background: rgba(15, 23, 42, 0.06);   color: #1a2027; border: 1px solid rgba(15, 23, 42, 0.15); }
.anare-agrement-state-suspendu      { background: rgba(99, 102, 241, 0.10); color: #4338ca; border: 1px solid rgba(99, 102, 241, 0.25); }
.anare-agrement-state-renouvele     { background: rgba(0, 26, 110, 0.10);   color: var(--anare-primary); border: 1px solid rgba(0, 26, 110, 0.25); }
.anare-agrement-state-unknown       { background: var(--anare-surface-alt); color: var(--anare-text-subtle); border: 1px solid var(--anare-border); }
[class*="anare-agrement-state-"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--anare-radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Right-align state column */
.anare-list-table tbody td:last-child { text-align: right; }

/* List footer (pagination) */
.anare-list-footer {
    padding: var(--anare-space-3) var(--anare-space-5);
    border-top: 1px solid var(--anare-border);
    background: var(--anare-surface-alt);
    display: flex;
    justify-content: center;
}
.anare-list-footer .pagination {
    margin: 0;
    gap: 4px;
}
.anare-list-footer .pagination .page-link {
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-sm) !important;
    color: var(--anare-text-muted);
    padding: 0.4rem 0.75rem;
    font-size: var(--anare-fs-sm);
    margin: 0;
    background: var(--anare-surface);
    transition: all var(--anare-transition);
}
.anare-list-footer .pagination .page-link:hover {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    border-color: var(--anare-primary);
}
.anare-list-footer .pagination .page-item.active .page-link {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: var(--anare-text-on-primary);
}
.anare-list-footer .pagination .page-item.disabled .page-link {
    color: var(--anare-text-subtle);
    background: var(--anare-surface-alt);
}

/* === Empty state premium === */
.anare-empty-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--anare-space-7) var(--anare-space-5);
    gap: var(--anare-space-3);
}
.anare-empty-illu {
    position: relative;
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--anare-space-2);
}
.anare-empty-illu i {
    position: relative;
    z-index: 2;
    font-size: 2.5rem;
    color: var(--anare-primary);
}
.anare-empty-illu-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--anare-primary-light) 0%, var(--anare-primary-soft) 60%, transparent 100%);
    z-index: 1;
}
.anare-empty-illu-halo::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed var(--anare-primary-soft);
    animation: anare-empty-rotate 18s linear infinite;
}
@keyframes anare-empty-rotate {
    to { transform: rotate(360deg); }
}
.anare-empty-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--anare-text);
    margin: 0;
}
.anare-empty-sub {
    font-size: var(--anare-fs-md);
    color: var(--anare-text-subtle);
    margin: 0 0 var(--anare-space-3);
    max-width: 480px;
}
.anare-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: var(--anare-space-3) var(--anare-space-5);
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
    border-radius: var(--anare-radius-md);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 26, 110, 0.18), 0 4px 10px rgba(0, 26, 110, 0.12);
    transition: background var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
}
.anare-empty-cta:hover {
    background: var(--anare-primary-hover);
    color: var(--anare-text-on-primary);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 26, 110, 0.20), 0 8px 18px rgba(0, 26, 110, 0.18);
}
.anare-empty-cta-secondary {
    background: var(--anare-surface);
    color: var(--anare-primary);
    border: 1px solid var(--anare-primary);
    box-shadow: var(--anare-shadow-sm);
}
.anare-empty-cta-secondary:hover {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
}

/* Responsive table → cards on mobile */
@media (max-width: 575px) {
    .anare-list-table thead { display: none; }
    .anare-list-table, .anare-list-table tbody, .anare-list-table tr, .anare-list-table td {
        display: block;
        width: 100%;
    }
    .anare-list-table tbody tr.anare-list-row {
        background: var(--anare-surface);
        border: 1px solid var(--anare-border);
        border-radius: var(--anare-radius-md);
        padding: var(--anare-space-3);
        margin-bottom: var(--anare-space-3);
    }
    .anare-list-table tbody tr.anare-list-row td {
        border: none;
        padding: 4px 0;
    }
    .anare-list-table tbody td:last-child { text-align: left; }
    .anare-list-table-wrap { padding: var(--anare-space-3); }
}

/* ============================================
   DASHBOARD V2 - NOUVEAU DESIGN
   ============================================ */

/* Wrapper principal */
.anare-dashboard-wrapper {
    display: flex;
    min-height: 100vh;
    background: #f0f2f5;
}

/* === SIDEBAR (legacy v1 — neutralisé, conservé pour compat) ===
   Les styles actifs vivent dans la section "ANARE-CI PORTAL SIDEBAR — Modern
   Institutional v2" plus bas. Voir .anare-sidebar / .anare-nav-item / .anare-nav-group.
   Les blocs ci-dessous sont vides intentionnellement. */
.anare-sidebar-legacy-v1-removed {
    /* placeholder — les anciennes définitions ont été supprimées */
}
/* Bloc original supprimé — remplacé par sidebar v2 (Modern Institutional)
.anare-sidebar { width: 260px;
    background: #fff;
    box-shadow: 2px 0 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
}

.anare-sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
}

.anare-sidebar-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--anare-primary);
}

.anare-sidebar-nav {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.anare-nav-item {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.5rem;
    color: #6c757d;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.anare-nav-item i {
    width: 24px;
    font-size: 1rem;
    margin-right: 0.75rem;
}

.anare-nav-item span:first-of-type {
    flex: 1;
    font-weight: 500;
}

.anare-nav-item:hover {
    background: linear-gradient(90deg, rgba(0, 26, 110, 0.1) 0%, transparent 100%);
    color: var(--anare-primary);
}

.anare-nav-item.active {
    background: linear-gradient(90deg, rgba(0, 26, 110, 0.15) 0%, transparent 100%);
    color: var(--anare-primary);
    font-weight: 600;
}

.anare-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--anare-primary);
    border-radius: 0 4px 4px 0;
}

.anare-nav-badge {
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}

.anare-nav-divider-legacy-v1-removed { display: none; }
*/

/* === MAIN CONTENT === */
.anare-main-content {
    flex: 1;
    margin-left: 260px;
    padding: 1.5rem 2rem;
    overflow-y: auto;
}

.anare-breadcrumb-bar {
    margin-bottom: 0.5rem;
}

.anare-breadcrumb {
    font-size: 0.9rem;
    color: #6c757d;
}

.anare-breadcrumb a {
    color: #6c757d;
    text-decoration: none;
}

.anare-breadcrumb a:hover {
    color: var(--anare-primary);
}

.anare-breadcrumb .fa-home {
    font-size: 1.1rem;
}

.anare-breadcrumb-sep {
    margin: 0 0.5rem;
    color: #6c757d;
}

.anare-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 1.5rem;
}

/* === KPI CARDS V2 - Colorful === */
.anare-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.anare-kpi-card-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 120px;
}

.anare-kpi-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    color: #fff;
    text-decoration: none;
}

.anare-kpi-v2-content {
    flex: 1;
}

.anare-kpi-v2-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.anare-kpi-v2-label {
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.anare-kpi-v2-link {
    font-size: 0.8rem;
    opacity: 0.8;
}

.anare-kpi-v2-icon {
    font-size: 3rem;
    opacity: 0.3;
}

/* Gradient colors */
.anare-kpi-orange { background: linear-gradient(135deg, #ff9f43 0%, #ff6b35 100%); }
.anare-kpi-green { background: linear-gradient(135deg, #28c76f 0%, #1e9d50 100%); }
.anare-kpi-purple { background: linear-gradient(135deg, #7367f0 0%, #5a4fcf 100%); }
.anare-kpi-teal { background: linear-gradient(135deg, #00cfe8 0%, #00a8c5 100%); }
.anare-kpi-yellow { background: linear-gradient(135deg, #ffc107 0%, #e6a800 100%); }
.anare-kpi-red { background: linear-gradient(135deg, #ea5455 0%, #cf3a3b 100%); }

/* === OVERVIEW SECTION === */
.anare-overview-section {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.anare-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.anare-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.25rem;
}

.anare-section-subtitle {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0;
}

.anare-overview-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.anare-period-selector {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 3px;
}

.anare-period-selector .btn {
    border: none;
    background: transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
}

.anare-period-selector .btn.active {
    background: var(--anare-primary);
    color: #fff;
}

/* Date range filter card */
.anare-filter-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.anare-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.anare-filter-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    padding-left: 2px;
}

.anare-filter-input {
    width: 130px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: #212529;
    background: #f8f9fa;
    transition: all 0.2s ease;
}

.anare-filter-input:hover {
    border-color: #dee2e6;
    background: #fff;
}

.anare-filter-input:focus {
    border-color: var(--anare-primary);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 26, 110, 0.1);
}

.anare-filter-separator {
    color: #6c757d;
    font-size: 0.75rem;
    padding: 0 0.25rem;
    margin-top: 0.75rem;
}

.anare-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, var(--anare-primary) 0%, var(--anare-primary-hover) 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.anare-filter-btn:hover {
    background: linear-gradient(135deg, var(--anare-primary-hover) 0%, var(--anare-primary-deep) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 26, 110, 0.3);
}

.anare-filter-btn:active {
    transform: translateY(0);
}

.anare-filter-btn i {
    font-size: 0.75rem;
}

.anare-export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.anare-export-btn:hover {
    background: #e9ecef;
    color: #495057;
}

.anare-export-btn i {
    font-size: 0.85rem;
}

/* Responsive filter card */
@media (max-width: 768px) {
    .anare-filter-card {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.75rem;
    }

    .anare-filter-separator {
        display: none;
    }

    .anare-filter-btn {
        flex: 1;
        justify-content: center;
        margin-top: 0.25rem;
    }
}

/* === SPARKLINE CARDS === */
.anare-sparkline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.anare-sparkline-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: box-shadow 0.2s ease;
}

.anare-sparkline-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.anare-sparkline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.anare-sparkline-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.anare-sparkline-trend {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.anare-sparkline-trend.up {
    color: #28c76f;
    background: rgba(40,199,111,0.1);
}

.anare-sparkline-trend.down {
    color: #ea5455;
    background: rgba(234,84,85,0.1);
}

.anare-sparkline-trend.neutral {
    color: #6c757d;
    background: rgba(108,117,125,0.1);
}

.anare-sparkline-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.anare-sparkline-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.5rem;
}

/* Wrapper container for sparkline chart - MUST have fixed height for Chart.js */
.anare-sparkline-wrapper {
    position: relative;
    height: 40px;
    width: 100%;
    overflow: hidden;
}

.anare-sparkline-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
}

/* === CHARTS V2 === */
.anare-charts-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.anare-charts-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.anare-chart-card-v2 {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #e9ecef;
}

.anare-chart-header-v2 {
    padding: 0.75rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    color: #495057;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.anare-chart-header-v2 h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0;
    color: #212529;
}

.anare-chart-header-v2 p {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0;
}

.anare-chart-badge {
    background: #e9ecef;
    color: #495057;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.anare-chart-body-v2 {
    background: #fff;
    padding: 1.5rem;
    min-height: 280px;
}

.anare-chart-body-v2 canvas {
    max-height: 280px;
}

/* Chart headers - neutral style */
.anare-chart-gradient-blue .anare-chart-header-v2,
.anare-chart-gradient-purple .anare-chart-header-v2,
.anare-chart-gradient-green .anare-chart-header-v2,
.anare-chart-gradient-orange .anare-chart-header-v2 {
    background: #f8f9fa;
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
    .anare-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .anare-sparkline-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .anare-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .anare-sidebar.open {
        transform: translateX(0);
    }
    .anare-main-content {
        margin-left: 0;
        padding: 1rem;
    }
    .anare-charts-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .anare-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .anare-kpi-card-v2 {
        padding: 1rem;
        min-height: 100px;
    }
    .anare-kpi-v2-value {
        font-size: 1.75rem;
    }
    .anare-kpi-v2-icon {
        font-size: 2rem;
    }
    .anare-sparkline-grid {
        grid-template-columns: 1fr;
    }
    .anare-overview-header {
        flex-direction: column;
        align-items: stretch;
    }
    .anare-overview-actions {
        justify-content: space-between;
    }
}

@media (max-width: 576px) {
    .anare-kpi-grid {
        grid-template-columns: 1fr;
    }
    .anare-page-title {
        font-size: 1.5rem;
    }
}


/* ============================================
   ANARE-CI PORTAL TOPBAR — Sticky header premium
   ============================================ */
.anare-topbar {
    position: fixed;
    top: 0;
    left: var(--anare-sidebar-width);
    right: 0;
    height: var(--anare-topbar-height);
    background: var(--anare-surface);
    border-bottom: 1px solid var(--anare-border);
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-4);
    padding: 0 var(--anare-space-5);
    transition: left var(--anare-transition-slow), box-shadow var(--anare-transition), border-color var(--anare-transition);
}

/* Scrolled state: subtle shadow, no border */
.anare-topbar.scrolled {
    box-shadow: 0 1px 12px rgba(15, 23, 42, 0.06);
    border-bottom-color: transparent;
}

.anare-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    flex: 1;
    min-width: 0;
}

.anare-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
}

/* Mobile hamburger */
.anare-topbar-mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--anare-border);
    color: var(--anare-text-muted);
    width: 38px;
    height: 38px;
    border-radius: var(--anare-radius-md);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition);
}
.anare-topbar-mobile-toggle:hover {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    border-color: var(--anare-primary);
}
.anare-topbar-mobile-toggle:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}

/* === Breadcrumb pill premium === */
.anare-breadcrumb-pill {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.anare-breadcrumb-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: linear-gradient(135deg, var(--anare-primary-light), var(--anare-primary-soft));
    color: var(--anare-primary);
    font-size: 1.05rem;
    box-shadow: inset 0 0 0 1px var(--anare-primary-soft);
    transition: transform var(--anare-transition-spring), box-shadow var(--anare-transition);
}

.anare-topbar:hover .anare-breadcrumb-icon {
    transform: scale(1.04);
    box-shadow: inset 0 0 0 1px var(--anare-primary), 0 4px 12px rgba(0, 26, 110, 0.10);
}

.anare-breadcrumb-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.2;
    overflow: hidden;
    min-width: 0;
}

.anare-breadcrumb-kicker {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--anare-text-subtle);
    line-height: 1.4;
}

.anare-breadcrumb-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--anare-text);
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* === Topbar primary CTA === */
.anare-topbar-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: 0 var(--anare-space-4);
    height: 40px;
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
    border-radius: var(--anare-radius-md);
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 26, 110, 0.18), 0 4px 10px rgba(0, 26, 110, 0.12);
    transition: background var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
    white-space: nowrap;
}
.anare-topbar-cta:hover {
    background: var(--anare-primary-hover);
    color: var(--anare-text-on-primary);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 26, 110, 0.20), 0 8px 18px rgba(0, 26, 110, 0.18);
    transform: translateY(-1px);
}
.anare-topbar-cta:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 26, 110, 0.18);
}
.anare-topbar-cta:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
.anare-topbar-cta i {
    font-size: 0.85rem;
}

/* === Topbar custom actions slot === */
.anare-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
}
.anare-topbar-actions:empty {
    display: none;
}

/* === Vertical dividers === */
.anare-topbar-divider {
    display: inline-block;
    width: 1px;
    height: 24px;
    background: var(--anare-border);
    margin: 0 var(--anare-space-1);
}
.anare-topbar-divider-strong {
    height: 32px;
    background: var(--anare-border-strong);
    margin: 0 var(--anare-space-3);
}

/* === Search trigger (input-like) === */
.anare-topbar-search {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-3);
    height: 40px;
    padding: 0 var(--anare-space-3);
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    color: var(--anare-text-subtle);
    cursor: pointer;
    transition: background var(--anare-transition), border-color var(--anare-transition), color var(--anare-transition);
    min-width: 240px;
    text-align: left;
}
.anare-topbar-search:hover {
    background: var(--anare-surface);
    border-color: var(--anare-primary);
    color: var(--anare-text);
}
.anare-topbar-search:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
.anare-topbar-search > i {
    font-size: 0.85rem;
    color: var(--anare-text-subtle);
}
.anare-search-placeholder {
    flex: 1;
    font-size: var(--anare-fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anare-search-kbd {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border-strong);
    color: var(--anare-text-muted);
    font-family: -apple-system, BlinkMacSystemFont, "SF Mono", Menlo, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 0 var(--anare-border-strong);
}

/* === Mega CTA "+ Nouveau" === */
.anare-topbar-create {
    position: relative;
}
.anare-topbar-create .anare-topbar-cta {
    cursor: pointer;
    border: none;
    height: 40px;
}
.anare-topbar-cta-caret {
    font-size: 0.65rem !important;
    margin-left: 2px;
    transition: transform var(--anare-transition-slow);
}
.anare-topbar-create.open .anare-topbar-cta-caret {
    transform: rotate(180deg);
}

.anare-topbar-create-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 320px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    box-shadow: var(--anare-shadow-lg);
    padding: var(--anare-space-2);
    z-index: 1050;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--anare-transition), transform var(--anare-transition-slow);
}
.anare-topbar-create.open .anare-topbar-create-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.anare-create-menu-header {
    font-size: var(--anare-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-text-subtle);
    padding: var(--anare-space-2) var(--anare-space-3);
    margin-bottom: var(--anare-space-1);
}
.anare-create-menu-item {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-2) var(--anare-space-3);
    border-radius: var(--anare-radius-md);
    color: var(--anare-text);
    text-decoration: none;
    transition: background var(--anare-transition);
}
.anare-create-menu-item:hover {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    text-decoration: none;
}
.anare-create-menu-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    font-size: 0.95rem;
    transition: background var(--anare-transition), color var(--anare-transition);
}
.anare-create-menu-item:hover .anare-create-menu-icon {
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
}
.anare-create-menu-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
    min-width: 0;
}
.anare-create-menu-title {
    font-size: var(--anare-fs-sm);
    font-weight: 600;
}
.anare-create-menu-sub {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
}
.anare-create-menu-item:hover .anare-create-menu-sub {
    color: var(--anare-primary);
    opacity: 0.8;
}
.anare-create-menu-sep {
    height: 1px;
    background: var(--anare-border);
    margin: var(--anare-space-2) var(--anare-space-3);
}

/* === Topbar profile (avatar dropdown menu) === */
.anare-topbar-profile {
    position: relative;
}
.anare-topbar-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    background: transparent;
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-pill);
    cursor: pointer;
    transition: background var(--anare-transition), border-color var(--anare-transition), box-shadow var(--anare-transition);
}
.anare-topbar-profile-trigger:hover {
    background: var(--anare-surface-alt);
    border-color: var(--anare-primary);
}
.anare-topbar-profile-trigger:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
.anare-topbar-profile.open .anare-topbar-profile-trigger {
    background: var(--anare-primary-light);
    border-color: var(--anare-primary);
}
.anare-topbar-profile-avatar {
    display: inline-flex;
}
.anare-topbar-profile-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--anare-surface);
}
.anare-topbar-profile-caret {
    color: var(--anare-text-subtle);
    font-size: 0.65rem;
    transition: transform var(--anare-transition-slow);
}
.anare-topbar-profile.open .anare-topbar-profile-caret {
    transform: rotate(180deg);
    color: var(--anare-primary);
}

/* Dropdown menu */
.anare-topbar-profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    box-shadow: var(--anare-shadow-lg);
    z-index: 1050;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--anare-transition), transform var(--anare-transition-slow);
    overflow: hidden;
}
.anare-topbar-profile.open .anare-topbar-profile-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.anare-topbar-profile-menu-head {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3) var(--anare-space-4);
    background: linear-gradient(135deg, var(--anare-primary-light), var(--anare-primary-soft));
    border-bottom: 1px solid var(--anare-border);
}
.anare-topbar-profile-menu-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--anare-surface);
    box-shadow: var(--anare-shadow-sm);
}
.anare-topbar-profile-menu-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.anare-topbar-profile-menu-name {
    font-size: var(--anare-fs-sm);
    font-weight: 700;
    color: var(--anare-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anare-topbar-profile-menu-sub {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anare-topbar-profile-menu-sub i {
    color: var(--anare-primary);
    font-size: 0.65rem;
}
.anare-topbar-profile-menu-sub strong {
    color: var(--anare-text);
    font-weight: 700;
}
.anare-topbar-profile-menu-body {
    padding: var(--anare-space-2);
}
.anare-topbar-profile-menu-item {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-2) var(--anare-space-3);
    color: var(--anare-text-muted);
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: var(--anare-fs-sm);
    font-weight: 500;
    border-radius: var(--anare-radius-md);
    transition: background var(--anare-transition), color var(--anare-transition);
}
.anare-topbar-profile-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--anare-text-subtle);
    transition: color var(--anare-transition);
}
.anare-topbar-profile-menu-item:hover {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    text-decoration: none;
}
.anare-topbar-profile-menu-item:hover i {
    color: var(--anare-primary);
}
.anare-topbar-profile-menu-danger:hover {
    background: rgba(220, 53, 69, 0.08) !important;
    color: #dc3545 !important;
}
.anare-topbar-profile-menu-danger:hover i {
    color: #dc3545 !important;
}
.anare-topbar-profile-menu-sep {
    height: 1px;
    background: var(--anare-border);
    margin: var(--anare-space-2) 0;
}

/* === Sidebar — Aide & Support card (replaces profile-card at bottom) === */
.anare-support-card {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3);
    background: linear-gradient(135deg, var(--anare-primary-soft), var(--anare-surface));
    border: 1px solid var(--anare-primary-soft);
    border-radius: var(--anare-radius-lg);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font: inherit;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
    position: relative;
    overflow: hidden;
}
.anare-support-card:hover {
    border-color: var(--anare-primary);
    box-shadow: var(--anare-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.anare-support-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(0, 26, 110, 0.25);
    animation: anare-support-pulse 3.5s ease-out infinite;
}
@keyframes anare-support-pulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(0, 26, 110, 0.25); }
    50%      { box-shadow: 0 2px 6px rgba(0, 26, 110, 0.25), 0 0 0 6px rgba(0, 26, 110, 0.10); }
}
.anare-support-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.anare-support-title {
    font-size: var(--anare-fs-sm);
    font-weight: 700;
    color: var(--anare-text);
    line-height: 1.2;
}
.anare-support-sub {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    line-height: 1.3;
}
.anare-support-arrow {
    color: var(--anare-primary);
    font-size: 0.8rem;
    transition: transform var(--anare-transition);
}
.anare-support-card:hover .anare-support-arrow {
    transform: translateX(3px);
}

/* === System status indicator === */
.anare-topbar-status-wrap {
    position: relative;
}
.anare-topbar-status {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    height: 36px;
    padding: 0 var(--anare-space-3);
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: var(--anare-radius-pill);
    color: #15803d;
    font-size: var(--anare-fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--anare-transition), border-color var(--anare-transition), box-shadow var(--anare-transition);
}
.anare-topbar-status:hover {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.45);
}
.anare-topbar-status:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
.anare-status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}
.anare-status-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: #22c55e;
    opacity: 0.4;
    animation: anare-status-pulse 2.5s ease-out infinite;
}
.anare-status-dot-large {
    width: 10px;
    height: 10px;
}
@keyframes anare-status-pulse {
    0% { transform: scale(0.6); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Status popover */
.anare-status-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    box-shadow: var(--anare-shadow-lg);
    z-index: 1050;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--anare-transition), transform var(--anare-transition-slow);
    overflow: hidden;
}
.anare-topbar-status-wrap.open .anare-status-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.anare-status-menu-header {
    padding: var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), transparent);
}
.anare-status-menu-title {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    font-size: var(--anare-fs-md);
    font-weight: 600;
    color: var(--anare-text);
    margin-bottom: 4px;
}
.anare-status-menu-sub {
    display: block;
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    padding-left: 18px;
}
.anare-status-menu-list {
    padding: var(--anare-space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.anare-status-service {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-2) var(--anare-space-3);
    border-radius: var(--anare-radius-md);
    font-size: var(--anare-fs-sm);
    color: var(--anare-text-muted);
    transition: background var(--anare-transition);
}
.anare-status-service:hover {
    background: var(--anare-surface-alt);
}
.anare-status-service-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-sm);
    background: var(--anare-surface-alt);
    color: var(--anare-text-subtle);
    font-size: 0.8rem;
}
.anare-status-service-name {
    flex: 1;
    font-weight: 500;
}
.anare-status-service-state {
    font-size: var(--anare-fs-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--anare-radius-pill);
}
.anare-status-service-state.ok {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}
.anare-status-service-state.warn {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
.anare-status-service-state.err {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}
.anare-status-menu-footer {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: var(--anare-space-3) var(--anare-space-4);
    border-top: 1px solid var(--anare-border);
    background: var(--anare-surface-alt);
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
}

/* === Notifications bell === */
/* Wrapper qui ancre le popover sur la cloche (position: relative) */
.anare-topbar-bell-wrap {
    position: relative;
    display: inline-flex;
}
.anare-topbar-bell {
    position: relative;
}
.anare-bell-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: var(--anare-radius-pill);
    min-width: 16px;
    text-align: center;
    line-height: 1;
    border: 2px solid var(--anare-surface);
}
.anare-bell-badge[hidden] {
    display: none;
}
/* Popover ancré au wrapper de la cloche, sort vers le bas-droite */
.anare-notif-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    box-shadow: var(--anare-shadow-lg);
    z-index: 1050;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--anare-transition), transform var(--anare-transition-slow);
}
.anare-notif-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.anare-notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--anare-space-3) var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    font-weight: 600;
    color: var(--anare-text);
}
.anare-notif-clear {
    background: transparent;
    border: none;
    color: var(--anare-text-subtle);
    font-size: var(--anare-fs-xs);
    cursor: pointer;
    padding: 0;
}
.anare-notif-clear:not(:disabled):hover {
    color: var(--anare-primary);
}
.anare-notif-clear:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.anare-notif-empty {
    padding: var(--anare-space-6) var(--anare-space-4);
    text-align: center;
    color: var(--anare-text-subtle);
}
.anare-notif-empty i {
    font-size: 2rem;
    color: var(--anare-border-strong);
    margin-bottom: var(--anare-space-3);
    display: block;
}
.anare-notif-empty p {
    font-weight: 500;
    color: var(--anare-text-muted);
    margin-bottom: var(--anare-space-1);
}
.anare-notif-empty small {
    font-size: var(--anare-fs-xs);
}

/* === Command palette === */
.anare-cmdk-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1090;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--anare-transition);
}
.anare-cmdk-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.anare-cmdk {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%) scale(0.96);
    width: min(640px, 92vw);
    max-height: 70vh;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--anare-transition), transform var(--anare-transition-spring);
}
.anare-cmdk.open {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
}
.anare-cmdk-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4) var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border);
}
.anare-cmdk-input-icon {
    color: var(--anare-text-subtle);
    font-size: 1rem;
}
.anare-cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--anare-text);
    padding: 0;
}
.anare-cmdk-input::placeholder {
    color: var(--anare-text-subtle);
}
.anare-cmdk-esc {
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border-strong);
    color: var(--anare-text-muted);
    font-family: -apple-system, BlinkMacSystemFont, "SF Mono", Menlo, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}
.anare-cmdk-results {
    flex: 1;
    overflow-y: auto;
    padding: var(--anare-space-2);
    min-height: 200px;
}
.anare-cmdk-section + .anare-cmdk-section {
    margin-top: var(--anare-space-3);
}
.anare-cmdk-section-title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--anare-text-subtle);
    padding: var(--anare-space-2) var(--anare-space-3) var(--anare-space-1);
}
.anare-cmdk-item {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-2) var(--anare-space-3);
    border-radius: var(--anare-radius-md);
    color: var(--anare-text);
    text-decoration: none;
    transition: background var(--anare-transition);
    cursor: pointer;
}
.anare-cmdk-item.selected,
.anare-cmdk-item:hover {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    text-decoration: none;
}
.anare-cmdk-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-sm);
    background: var(--anare-surface-alt);
    color: var(--anare-text-muted);
    font-size: 0.9rem;
    transition: background var(--anare-transition), color var(--anare-transition);
}
.anare-cmdk-item.selected .anare-cmdk-item-icon,
.anare-cmdk-item:hover .anare-cmdk-item-icon {
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
}
.anare-cmdk-item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.3;
    min-width: 0;
}
.anare-cmdk-item-label {
    font-size: var(--anare-fs-sm);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anare-cmdk-item-sub {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anare-cmdk-item.selected .anare-cmdk-item-sub,
.anare-cmdk-item:hover .anare-cmdk-item-sub {
    color: var(--anare-primary);
    opacity: 0.7;
}
.anare-cmdk-item-arrow {
    flex-shrink: 0;
    color: var(--anare-text-subtle);
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity var(--anare-transition), transform var(--anare-transition);
}
.anare-cmdk-item.selected .anare-cmdk-item-arrow,
.anare-cmdk-item:hover .anare-cmdk-item-arrow {
    opacity: 1;
    color: var(--anare-primary);
    transform: translateX(2px);
}
.anare-cmdk-empty {
    text-align: center;
    padding: var(--anare-space-6) var(--anare-space-4);
    color: var(--anare-text-subtle);
}
.anare-cmdk-empty i {
    font-size: 2rem;
    color: var(--anare-border-strong);
    margin-bottom: var(--anare-space-3);
    display: block;
}
.anare-cmdk-empty p {
    margin: 0;
    font-size: var(--anare-fs-sm);
}
.anare-cmdk-footer {
    display: flex;
    align-items: center;
    gap: var(--anare-space-4);
    padding: var(--anare-space-3) var(--anare-space-5);
    border-top: 1px solid var(--anare-border);
    background: var(--anare-surface-alt);
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
}
.anare-cmdk-footer kbd {
    display: inline-block;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border-strong);
    color: var(--anare-text-muted);
    font-family: -apple-system, BlinkMacSystemFont, "SF Mono", Menlo, monospace;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 4px;
}

/* === Utility icon buttons === */
.anare-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--anare-radius-md);
    color: var(--anare-text-subtle);
    background: transparent;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--anare-transition), color var(--anare-transition);
}
.anare-topbar-btn:hover {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    text-decoration: none;
}
.anare-topbar-btn:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
.anare-topbar-btn i {
    font-size: 1rem;
}

/* === Responsive === */
@media (max-width: 1279.98px) {
    /* Below 1280: search becomes icon-only, status label hidden */
    .anare-topbar-search {
        min-width: auto;
        width: 40px;
        padding: 0;
        justify-content: center;
    }
    .anare-search-placeholder,
    .anare-search-kbd {
        display: none;
    }
    .anare-topbar-divider-strong {
        display: none;
    }
    .anare-status-label {
        display: none;
    }
    .anare-topbar-status {
        width: 36px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 991.98px) {
    .anare-topbar {
        left: 0;
        padding: 0 var(--anare-space-4);
    }
    .anare-topbar-mobile-toggle {
        display: inline-flex;
    }
    .anare-breadcrumb-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }
    .anare-breadcrumb-title {
        font-size: 1rem;
    }
    .anare-topbar-cta {
        padding: 0 var(--anare-space-3);
        height: 38px;
    }
    .anare-topbar-cta > span {
        display: none;
    }
    .anare-topbar-cta-caret {
        display: none !important;
    }
    .anare-topbar-cta {
        width: 40px;
        padding: 0;
        justify-content: center;
    }
    .anare-topbar-create-menu {
        right: -8px;
        min-width: 280px;
    }
    .anare-notif-menu {
        right: var(--anare-space-3);
        width: calc(100vw - var(--anare-space-5));
        max-width: 360px;
    }
}

@media (max-width: 575px) {
    .anare-topbar {
        padding: 0 var(--anare-space-3);
        gap: var(--anare-space-2);
    }
    .anare-breadcrumb-kicker {
        display: none;
    }
    .anare-breadcrumb-title {
        font-size: 0.95rem;
    }
    .anare-topbar-divider {
        display: none;
    }
    /* Hide secondary controls on tiny screens to keep CTA prioritized */
    .anare-topbar-search,
    .anare-topbar-bell,
    .anare-topbar-status-wrap,
    .anare-topbar-right > .anare-topbar-btn:not(:last-child) {
        display: none;
    }
    .anare-cmdk {
        top: 4vh;
        max-height: 92vh;
    }
}

/* ============================================
   ANARE-CI PORTAL SIDEBAR — Modern Institutional v2
   ============================================ */

.anare-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--anare-sidebar-width);
    background: var(--anare-surface);
    border-right: 1px solid var(--anare-border);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform var(--anare-transition-slow), width var(--anare-transition-slow);
    box-shadow: 1px 0 0 0 rgba(15, 23, 42, 0.02), 4px 0 16px -8px rgba(15, 23, 42, 0.04);
}

/* Header : logo + bouton collapse */
.anare-sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4) var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border);
    min-height: var(--anare-topbar-height);
    position: relative;
}

.anare-sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--anare-text-subtle);
    font-size: 1.1rem;
    cursor: pointer;
    padding: var(--anare-space-1) var(--anare-space-2);
    border-radius: var(--anare-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--anare-transition), background-color var(--anare-transition);
}
.anare-sidebar-toggle:hover {
    color: var(--anare-primary);
    background: var(--anare-primary-light);
}
.anare-sidebar-toggle:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
/* Le bouton burger reste réservé au mobile */
.anare-sidebar-toggle-mobile { display: none; }
@media (max-width: 991.98px) {
    .anare-sidebar-toggle-mobile { display: inline-flex; }
}

/* Bouton collapse desktop (top-right du header) */
.anare-sidebar-collapse-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    color: var(--anare-text-subtle);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition), transform var(--anare-transition);
    box-shadow: var(--anare-shadow-sm);
}
.anare-sidebar-collapse-btn:hover {
    color: var(--anare-primary);
    border-color: var(--anare-primary);
    background: var(--anare-primary-light);
    transform: scale(1.05);
}
.anare-sidebar-collapse-btn:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
@media (max-width: 991.98px) {
    .anare-sidebar-collapse-btn { display: none; }
}

.anare-sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    text-decoration: none;
    color: var(--anare-primary);
    flex: 1;
    transition: opacity var(--anare-transition);
}
.anare-sidebar-logo-img {
    height: 36px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    transition: max-width var(--anare-transition);
}
.anare-sidebar-logo-text {
    font-size: var(--anare-fs-h3);
    font-weight: 700;
    color: var(--anare-primary);
    letter-spacing: -0.01em;
}

/* Navigation container */
.anare-sidebar-nav {
    flex: 1;
    padding: var(--anare-space-3) var(--anare-space-3) var(--anare-space-2);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-3);
}
.anare-sidebar-nav::-webkit-scrollbar { width: 4px; }
.anare-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--anare-border-strong);
    border-radius: 2px;
}
.anare-sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--anare-text-subtle); }

/* ----- Section group (couleur héritée par les enfants via CSS variables) ----- */
.anare-nav-group {
    --section-color: var(--anare-primary);
    --section-tint: var(--anare-primary-light);
    --section-soft: var(--anare-primary-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.anare-nav-group[data-section="overview"] {
    --section-color: #475569;       /* slate */
    --section-tint: rgba(71, 85, 105, 0.10);
    --section-soft: rgba(71, 85, 105, 0.04);
}
.anare-nav-group[data-section="ops"] {
    --section-color: var(--anare-primary);
    --section-tint: var(--anare-primary-light);
    --section-soft: var(--anare-primary-soft);
}
.anare-nav-group[data-section="regul"] {
    --section-color: #b45309;       /* amber-deep */
    --section-tint: rgba(245, 158, 11, 0.12);
    --section-soft: rgba(245, 158, 11, 0.05);
}
.anare-nav-group[data-section="admin"] {
    --section-color: #4f46e5;       /* indigo */
    --section-tint: rgba(99, 102, 241, 0.12);
    --section-soft: rgba(99, 102, 241, 0.05);
}

/* Section label (eyebrow par section) */
.anare-nav-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-2);
    padding: var(--anare-space-2) var(--anare-space-3) 4px;
    border-radius: var(--anare-radius-md);
    cursor: pointer;
    user-select: none;
    transition: background var(--anare-transition), color var(--anare-transition);
}
.anare-nav-section:hover {
    background: var(--section-soft);
}
.anare-nav-section:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
.anare-nav-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--section-color);
    opacity: 0.85;
}
.anare-nav-section::after {
    content: "\f107";
    font-family: FontAwesome;
    color: var(--section-color);
    font-size: 0.75rem;
    opacity: 0.78;
    transition: transform var(--anare-transition), opacity var(--anare-transition);
}
.anare-nav-group.is-open .anare-nav-section::after {
    transform: rotate(180deg);
}
.anare-nav-group:not(.is-open) > .anare-nav-item {
    display: none;
}

/* ----- Nav item ----- */
.anare-nav-item {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: 8px var(--anare-space-3);
    color: var(--anare-text-muted);
    text-decoration: none;
    font-size: var(--anare-fs-md);
    border-radius: var(--anare-radius-md);
    position: relative;
    transition: background var(--anare-transition), color var(--anare-transition), transform var(--anare-transition);
}

.anare-nav-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: var(--section-soft);
    color: var(--section-color);
    font-size: 0.95rem;
    box-shadow: inset 0 0 0 1px transparent;
    transition: background var(--anare-transition), color var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
}
.anare-nav-item-icon i {
    width: auto;
    font-size: 0.95rem;
    text-align: center;
}

.anare-nav-item-label {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anare-nav-item:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
    text-decoration: none;
    transform: translateX(2px);
}
.anare-nav-item:hover .anare-nav-item-icon {
    background: var(--section-tint);
    transform: scale(1.05);
}

/* État actif — rail vert plein + gradient bg + icône premium */
.anare-nav-item.active {
    background: linear-gradient(90deg, var(--section-tint) 0%, transparent 80%);
    color: var(--section-color);
    font-weight: 600;
    transform: none;
}
.anare-nav-item.active .anare-nav-item-label {
    font-weight: 600;
    color: var(--section-color);
}
.anare-nav-item.active .anare-nav-item-icon {
    background: var(--anare-surface);
    color: var(--section-color);
    box-shadow: inset 0 0 0 1px var(--section-tint),
                0 4px 12px -4px color-mix(in srgb, var(--section-color) 30%, transparent);
}
.anare-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--section-color);
    border-radius: 0 3px 3px 0;
}

.anare-nav-item:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}

/* Badge counter */
.anare-nav-badge {
    background: var(--section-color);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
    display: none;
    line-height: 1.4;
    flex-shrink: 0;
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--section-color) 35%, transparent);
}
.anare-nav-badge[data-counter] {
    /* Visible only when set by JS (display: inline-block) */
}
.anare-nav-item.active .anare-nav-badge {
    background: var(--section-color);
}

/* Divider (legacy, conservé) */
.anare-nav-divider {
    height: 1px;
    background: var(--anare-border);
    margin: var(--anare-space-3) var(--anare-space-2);
}

/* ----- Mode collapsed (desktop, body.anare-sidebar-collapsed) ----- */
@media (min-width: 992px) {
    body.anare-sidebar-collapsed {
        --anare-sidebar-width: var(--anare-sidebar-collapsed);
    }
    body.anare-sidebar-collapsed .anare-sidebar-logo {
        opacity: 0;
        pointer-events: none;
        max-width: 0;
        overflow: hidden;
    }
    body.anare-sidebar-collapsed .anare-sidebar-header {
        padding: var(--anare-space-3);
        justify-content: center;
    }
    body.anare-sidebar-collapsed .anare-sidebar-collapse-btn {
        margin: 0 auto;
    }
    /* Masquer labels, sections, badges (override le display:inline-block que JS pose
       sur les badges quand un compteur est défini) */
    body.anare-sidebar-collapsed .anare-nav-section,
    body.anare-sidebar-collapsed .anare-nav-item-label {
        display: none;
    }
    body.anare-sidebar-collapsed .anare-nav-group > .anare-nav-item {
        display: flex;
    }
    body.anare-sidebar-collapsed .anare-nav-badge {
        display: none !important;
    }
    body.anare-sidebar-collapsed .anare-nav-group {
        align-items: center;
    }
    body.anare-sidebar-collapsed .anare-nav-item {
        justify-content: center;
        padding: 6px;
        width: 44px;
        margin: 0 auto;
    }
    body.anare-sidebar-collapsed .anare-nav-item.active::before {
        left: -10px;
    }
    /* Permettre aux tooltips de s'échapper de la sidebar latéralement.
       NOTE : overflow-x:visible avec overflow-y:auto retombe en auto/auto
       côté navigateur (spec CSS). Donc en collapsed, on passe la nav en
       overflow:visible (les items font ~44px×9 → ~400px, tient toujours
       dans la viewport). */
    body.anare-sidebar-collapsed .anare-sidebar-nav {
        overflow: visible;
    }
    body.anare-sidebar-collapsed .anare-nav-group,
    body.anare-sidebar-collapsed .anare-nav-item {
        overflow: visible;
    }
    /* Tooltip droite au hover en mode collapsed.
       Utilise un attribut custom (data-anare-tooltip) pour ne PAS déclencher
       le tooltipService global d'Odoo qui s'attache à tout [data-tooltip]. */
    body.anare-sidebar-collapsed .anare-nav-item[data-anare-tooltip]::after {
        content: attr(data-anare-tooltip);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--anare-text);
        color: #fff;
        padding: 6px 12px;
        border-radius: var(--anare-radius-md);
        font-size: 0.78rem;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        box-shadow: var(--anare-shadow-md);
        z-index: 1050;
    }
    body.anare-sidebar-collapsed .anare-nav-item[data-anare-tooltip]:hover::after {
        opacity: 1;
        transition-delay: 0.2s;
    }
    /* NB : pas de tooltip au survol quand la sidebar est OUVERTE.
       Le libellé est déjà visible à côté de l'icône — ajouter une bulle
       au hover serait redondant et désagréable (effet "démèle auto"). */
    /* Cache le profil/role switcher en mode collapsed pour clarté */
    body.anare-sidebar-collapsed .anare-sidebar-profile {
        padding: var(--anare-space-2);
    }
    body.anare-sidebar-collapsed .anare-role-switcher,
    body.anare-sidebar-collapsed .anare-role-badge-fixed,
    body.anare-sidebar-collapsed .anare-support-text,
    body.anare-sidebar-collapsed .anare-support-arrow {
        display: none;
    }
    body.anare-sidebar-collapsed .anare-support-card {
        padding: var(--anare-space-2);
        justify-content: center;
    }
}

/* ============================================
   SIDEBAR PROFILE — User card with menu popover
   ============================================ */
.anare-sidebar-profile {
    padding: var(--anare-space-3);
    margin-top: auto;
    border-top: 1px solid var(--anare-border);
    background: var(--anare-surface-alt);
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-3);
}

/* Profile card wrapper (for popover positioning) */
.anare-profile-card {
    position: relative;
}

.anare-profile-trigger {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    width: 100%;
    padding: var(--anare-space-2);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), background var(--anare-transition);
    box-shadow: var(--anare-shadow-sm);
}

.anare-profile-trigger:hover {
    border-color: var(--anare-primary);
    box-shadow: var(--anare-shadow-md);
    background: var(--anare-surface);
}

.anare-profile-trigger:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}

.anare-profile-card.open .anare-profile-trigger {
    border-color: var(--anare-primary);
    box-shadow: var(--anare-shadow-md);
}

/* Avatar */
.anare-profile-avatar {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.anare-profile-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--anare-border);
    background: var(--anare-surface);
}

/* Online status dot (small green pulse on avatar bottom-right) */
.anare-profile-trigger .anare-profile-avatar::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border: 2px solid var(--anare-surface-alt);
    border-radius: 50%;
}

/* Details */
.anare-profile-details {
    overflow: hidden;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.anare-profile-name {
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    color: var(--anare-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.anare-profile-sub {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
    overflow: hidden;
}

.anare-profile-sub > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anare-profile-sub i {
    flex-shrink: 0;
    font-size: 0.65rem;
    color: var(--anare-primary);
}

.anare-profile-status-dot {
    color: #22c55e !important;
    font-size: 0.5rem !important;
}

.anare-profile-sub strong {
    color: var(--anare-text-muted);
    font-weight: 600;
}

.anare-profile-caret {
    flex-shrink: 0;
    color: var(--anare-text-subtle);
    font-size: 0.85rem;
    padding: var(--anare-space-1);
    transition: color var(--anare-transition);
}

.anare-profile-card.open .anare-profile-caret,
.anare-profile-trigger:hover .anare-profile-caret {
    color: var(--anare-primary);
}

/* Menu popover (opens upward) */
.anare-profile-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    box-shadow: var(--anare-shadow-lg);
    padding: var(--anare-space-2);
    z-index: 1050;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--anare-transition), transform var(--anare-transition-slow);
}

.anare-profile-card.open .anare-profile-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.anare-profile-menu-item {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-2) var(--anare-space-3);
    color: var(--anare-text-muted);
    text-decoration: none;
    border-radius: var(--anare-radius-md);
    font-size: var(--anare-fs-sm);
    font-weight: 500;
    transition: background var(--anare-transition), color var(--anare-transition);
}

.anare-profile-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--anare-text-subtle);
    transition: color var(--anare-transition);
}

.anare-profile-menu-item:hover {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    text-decoration: none;
}

.anare-profile-menu-item:hover i {
    color: var(--anare-primary);
}

.anare-profile-menu-item.anare-profile-menu-danger:hover {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
}

.anare-profile-menu-item.anare-profile-menu-danger:hover i {
    color: #dc3545;
}

.anare-profile-menu-sep {
    height: 1px;
    background: var(--anare-border);
    margin: var(--anare-space-2) 0;
}

/* Legacy classes — kept for retro-compat but unused in new layout */
.anare-profile-info {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
}
.anare-profile-roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--anare-space-1);
}
.anare-role-badge {
    display: inline-block;
    font-size: var(--anare-fs-xs);
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: var(--anare-radius-sm);
    background: var(--anare-primary-light);
    color: var(--anare-primary);
}

/* Body adjustments when sidebar is present */
body.anare-has-sidebar {
    padding-left: var(--anare-sidebar-width);
    padding-top: var(--anare-topbar-height);
    background: var(--anare-bg);
}

@media (max-width: 991.98px) {
    body.anare-has-sidebar {
        padding-left: 0;
    }
}

body.anare-has-sidebar #wrapwrap {
    min-height: 100vh;
}

/* Hide native Odoo portal sidebar elements */
body.anare-has-sidebar .o_portal_my_details,
body.anare-has-sidebar .o_portal_side_content,
body.anare-has-sidebar #accountOffCanvas,
body.anare-has-sidebar [data-bs-target="#accountOffCanvas"],
body.anare-has-sidebar .o_portal_wrap h3.my-3,
body.anare-has-sidebar .d-lg-flex.justify-content-end.col-lg-4 {
    display: none !important;
}

/* Hide native Odoo website header/footer (replaced by ANARE-CI topbar) */
body.anare-has-sidebar #wrapwrap > header,
body.anare-has-sidebar #wrapwrap > footer,
body.anare-has-sidebar > header,
body.anare-has-sidebar > footer,
body.anare-has-sidebar #wrapwrap > .o_header_standard,
body.anare-has-sidebar header.o_header_standard,
body.anare-has-sidebar #top {
    display: none !important;
}

/* Native Odoo portal breadcrumb (replaced by topbar breadcrumb) */
body.anare-has-sidebar .o_portal_navbar,
body.anare-has-sidebar .breadcrumb,
body.anare-has-sidebar nav.o_portal_submenu,
body.anare-has-sidebar .o_portal .o_portal_submenu {
    display: none !important;
}

/* Make main content full width */
body.anare-has-sidebar .o_portal_wrap .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

body.anare-has-sidebar .o_portal_my_home .col-lg-4 {
    display: none !important;
}

/* Responsive sidebar */
@media (max-width: 991px) {
    .anare-sidebar {
        transform: translateX(-100%);
        box-shadow: var(--anare-shadow-lg);
    }

    .anare-sidebar.open {
        transform: translateX(0);
    }

    /* Internal sidebar toggle hidden — topbar-mobile-toggle takes over */
    .anare-sidebar-toggle {
        display: none !important;
    }
}

@media (min-width: 992px) {
    /* Hide internal toggle on desktop too — sidebar is always visible */
    .anare-sidebar .anare-sidebar-toggle {
        display: none;
    }
}

/* ============================================
   STOCK METRICS — Arbre "Où est le gaz ?"
   ============================================ */
.anare-tree-header {
    cursor: pointer;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #eef0f2;
    background-color: #f8f9fa;
    font-weight: 600;
}
.anare-tree-header:hover { background-color: #eef0f2; }
.anare-tree-item {
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}
.anare-tree-item:hover { background-color: #f8f9fa; }
.anare-tree-leaf {
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.875rem;
}
/* Caret rotation for collapse toggle */
[data-bs-toggle="collapse"] > .fa-caret-right {
    display: inline-block;
    transition: transform 0.2s ease;
    width: 12px;
    text-align: center;
}
[data-bs-toggle="collapse"][aria-expanded="true"] > .fa-caret-right,
[data-bs-toggle="collapse"]:not(.collapsed) > .fa-caret-right {
    transform: rotate(90deg);
}
[data-bs-toggle="collapse"].collapsed > .fa-caret-right,
[data-bs-toggle="collapse"][aria-expanded="false"] > .fa-caret-right {
    transform: rotate(0);
}

/* ============================================
   PORTAL FILTER TOOLBAR
   ============================================ */
.anare-filter-toolbar {
    position: relative;
}

/* Panel (hidden by default) */
.anare-filter-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1040;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: var(--anare-card-radius, 0.75rem);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    padding: 1rem;
    margin-top: 0.25rem;
}
.anare-filter-panel.show {
    display: block;
}

/* Filter columns */
.anare-filter-col {
    border-right: 1px solid #eef0f2;
    padding: 0 0.75rem;
}
.anare-filter-col:last-child {
    border-right: none;
}
.anare-filter-section-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: #495057;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--anare-primary, #001A6E);
}

/* Filter options (radio/checkbox list) */
.anare-filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.anare-filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    margin: 0;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #495057;
    transition: background-color 0.15s;
}
.anare-filter-option:hover {
    background-color: #f8f9fa;
}
.anare-filter-option input[type="radio"],
.anare-filter-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--anare-primary, #001A6E);
}

/* Scrollable filter list */
.anare-filter-scroll {
    max-height: 180px;
    overflow-y: auto;
}
.anare-filter-scroll::-webkit-scrollbar {
    width: 4px;
}
.anare-filter-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

/* Custom date range */
.anare-custom-dates input[type="date"] {
    font-size: 0.82rem;
    padding: 0.25rem 0.5rem;
}

/* Active filter badges */
.anare-active-filters .badge {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Export buttons */
.anare-export-group .btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
}

/* Region tooltip (SIG map CI overlay) */
.anare-region-tooltip {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid #90a4ae !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #001A6E !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
.anare-region-tooltip::before {
    border-top-color: #90a4ae !important;
}

/* Responsive */
@media (max-width: 768px) {
    .anare-filter-panel {
        position: relative;
        margin-top: 0.5rem;
    }
    .anare-filter-panel .row > .col-lg {
        border-right: none !important;
        border-bottom: 1px solid #eef0f2;
        padding: 0.5rem 0;
    }
    .anare-filter-panel .row > .col-lg:last-child {
        border-bottom: none;
    }
}

/* ============================================
   ROLE SWITCHER (sidebar) — Modern Institutional
   ============================================ */
.anare-role-switcher {
    position: relative;
}

.anare-role-switcher-label {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    font-size: var(--anare-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-text-subtle);
    margin-bottom: var(--anare-space-2);
    padding: 0 var(--anare-space-1);
}

.anare-role-switcher-label i {
    color: var(--anare-primary);
    font-size: 0.75rem;
}

/* Trigger card — multi-line */
.anare-role-switcher-current {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    width: 100%;
    padding: var(--anare-space-3);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    color: var(--anare-text);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), background var(--anare-transition);
    box-shadow: var(--anare-shadow-sm);
}

.anare-role-switcher-current:hover,
.anare-role-switcher-current.active {
    border-color: var(--anare-primary);
    box-shadow: var(--anare-shadow-md);
    background: var(--anare-surface);
}

.anare-role-switcher-current:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}

.anare-role-trigger-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    font-size: 0.95rem;
    transition: background var(--anare-transition), color var(--anare-transition);
}

.anare-role-switcher-current:hover .anare-role-trigger-icon,
.anare-role-switcher-current.active .anare-role-trigger-icon {
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
}

.anare-role-trigger-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.anare-role-trigger-title {
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    color: var(--anare-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anare-role-trigger-sub {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.anare-role-trigger-caret {
    flex-shrink: 0;
    color: var(--anare-text-subtle);
    font-size: 0.7rem;
    transition: transform var(--anare-transition-slow), color var(--anare-transition);
    transform: rotate(180deg); /* default: pointing down */
}

.anare-role-switcher-current.active .anare-role-trigger-caret {
    transform: rotate(0deg); /* pointing up when open */
    color: var(--anare-primary);
}

/* Popover panel */
.anare-role-switcher-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    box-shadow: var(--anare-shadow-lg);
    padding: var(--anare-space-3);
    z-index: 1050;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--anare-transition), transform var(--anare-transition-slow);
    max-height: 60vh;
    overflow-y: auto;
}

.anare-role-switcher-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Tiles container */
.anare-role-tiles {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-1);
    margin-bottom: var(--anare-space-3);
}

/* Single tile */
.anare-role-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-2);
    background: var(--anare-surface-alt);
    border: 1px solid transparent;
    border-radius: var(--anare-radius-md);
    cursor: pointer;
    transition: background var(--anare-transition), border-color var(--anare-transition);
    margin: 0;
    user-select: none;
}

.anare-role-tile input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.anare-role-tile:hover {
    background: var(--anare-primary-light);
    border-color: var(--anare-primary-soft);
}

.anare-role-tile:has(input:checked) {
    background: var(--anare-primary-light);
    border-color: var(--anare-primary);
}

.anare-role-tile-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-sm);
    background: var(--anare-surface);
    color: var(--anare-text-muted);
    font-size: 0.8rem;
    transition: background var(--anare-transition), color var(--anare-transition);
}

.anare-role-tile:has(input:checked) .anare-role-tile-icon {
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
}

.anare-role-tile-name {
    flex: 1;
    font-size: var(--anare-fs-sm);
    font-weight: 500;
    color: var(--anare-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anare-role-tile:has(input:checked) .anare-role-tile-name {
    color: var(--anare-primary);
    font-weight: 600;
}

.anare-role-tile-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--anare-surface);
    border: 1.5px solid var(--anare-border-strong);
    color: transparent;
    font-size: 0.6rem;
    transition: background var(--anare-transition), border-color var(--anare-transition), color var(--anare-transition);
}

.anare-role-tile:has(input:checked) .anare-role-tile-check {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: var(--anare-text-on-primary);
}

.anare-role-tile-all {
    background: var(--anare-primary-soft);
}

.anare-role-tile-all .anare-role-tile-name {
    font-weight: 600;
}

/* Apply button */
.anare-role-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--anare-space-2);
    width: 100%;
    padding: var(--anare-space-3);
    background: var(--anare-primary);
    color: var(--anare-text-on-primary);
    border: none;
    border-radius: var(--anare-radius-md);
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
}

.anare-role-apply-btn:hover {
    background: var(--anare-primary-hover);
    box-shadow: var(--anare-shadow-md);
    transform: translateY(-1px);
}

.anare-role-apply-btn:active {
    transform: translateY(0);
}

.anare-role-apply-btn:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}

.anare-role-switcher-divider {
    height: 1px;
    background: var(--anare-border);
    margin: var(--anare-space-2) 0;
}

/* Fixed role badge (single role) */
.anare-role-badge-fixed {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: var(--anare-space-2) var(--anare-space-3);
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    color: var(--anare-primary);
    background: var(--anare-primary-light);
    border-radius: var(--anare-radius-md);
    border: 1px solid var(--anare-primary-soft);
}

/* ============================================ */
/*  ROLE SELECTION PAGE (/my/role-select)       */
/* ============================================ */
.anare-role-select-page {
    padding: 2rem 1rem;
}

.anare-role-select-header .anare-role-select-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8EBF7, #c8e6c9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* ============================================ */
/* Rôles autorisés — cards sélectionnables       */
/* ============================================ */
.anare-role-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--anare-space-3);
}
@media (max-width: 575px) {
    .anare-role-pick-grid { grid-template-columns: 1fr; }
}

.anare-role-pick-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3);
    background: var(--anare-surface);
    border: 1.5px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    cursor: pointer;
    transition: border-color var(--anare-transition), background var(--anare-transition),
                box-shadow var(--anare-transition), transform var(--anare-transition);
    overflow: hidden;
    margin: 0;
}
.anare-role-pick-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--anare-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--anare-transition-slow);
}
.anare-role-pick-card:hover {
    border-color: var(--anare-primary);
    box-shadow: var(--anare-shadow-md);
    transform: translateY(-2px);
}
.anare-role-pick-card.is-selected {
    border-color: var(--anare-primary);
    background: linear-gradient(135deg, var(--anare-primary-soft), var(--anare-surface));
}
.anare-role-pick-card.is-selected::before {
    transform: scaleX(1);
}
.anare-role-pick-card:focus-within {
    outline: 2px solid var(--anare-action);
    outline-offset: 2px;
}
.anare-role-pick-cb {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}

/* Icône avec couleur du rôle */
.anare-role-pick-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--anare-surface-alt);
    border: 2px solid var(--anare-border);
    font-size: 1.1rem;
    transition: background var(--anare-transition), border-color var(--anare-transition),
                color var(--anare-transition);
}
.anare-role-pick-card.is-selected .anare-role-pick-icon {
    border-color: currentColor;
    background: rgba(255,255,255,0.85);
}

/* Nom du rôle */
.anare-role-pick-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.anare-role-pick-name {
    font-size: var(--anare-fs-md);
    font-weight: 700;
    color: var(--anare-text);
    line-height: 1.2;
}
.anare-role-pick-hint {
    font-size: var(--anare-fs-xs);
    color: var(--anare-text-subtle);
}

/* Indicateur check */
.anare-role-pick-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--anare-surface);
    border: 2px solid var(--anare-border-strong);
    color: transparent;
    font-size: 0.7rem;
    transform: scale(0.8);
    transition: background var(--anare-transition), border-color var(--anare-transition),
                color var(--anare-transition), transform var(--anare-transition-spring);
}
.anare-role-pick-card.is-selected .anare-role-pick-check {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: var(--anare-text-on-primary);
    transform: scale(1);
    box-shadow: 0 2px 6px rgba(0, 26, 110, 0.25);
}

/* Toolbar rôles */
.anare-role-pick-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-3);
    margin-bottom: var(--anare-space-3);
    padding: var(--anare-space-2) var(--anare-space-3);
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
}
.anare-role-pick-toolbar-info {
    font-size: var(--anare-fs-sm);
    color: var(--anare-text-subtle);
}
.anare-role-pick-toolbar-info strong { color: var(--anare-text); }
.anare-role-pick-toolbar-actions {
    display: flex;
    gap: var(--anare-space-2);
}
.anare-role-pick-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--anare-fs-xs);
    font-weight: 600;
    color: var(--anare-text-subtle);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    cursor: pointer;
    transition: all var(--anare-transition);
}
.anare-role-pick-toolbar-btn:hover {
    color: var(--anare-primary);
    border-color: var(--anare-primary);
    background: var(--anare-primary-soft);
}

.anare-role-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.anare-role-card {
    position: relative;
    cursor: pointer;
    border-radius: 0.875rem;
    border: 2px solid #dee2e6;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    display: block;
}

.anare-role-card:hover {
    border-color: var(--role-color, #2196f3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.anare-role-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.anare-role-radio:checked + .anare-role-card-inner {
    /* handled via JS class or :has */
}

.anare-role-card:has(.anare-role-radio:checked) {
    border-color: var(--role-color, #2196f3);
    background: color-mix(in srgb, var(--role-color, #2196f3) 8%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--role-color, #2196f3) 25%, transparent);
}

.anare-role-card:has(.anare-role-radio:checked) .anare-role-card-check {
    opacity: 1;
    transform: scale(1);
}

.anare-role-card-inner {
    padding: 1.5rem 1rem;
    text-align: center;
}

.anare-role-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--role-color, #2196f3) 12%, white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    color: var(--role-color, #2196f3);
}

.anare-role-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.anare-role-card-check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--role-color, #2196f3);
    font-size: 1.1rem;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s, transform 0.2s;
}

/* ============================================ */
/*  ROLE CHECKBOXES (access create/edit form)   */
/* ============================================ */
.anare-role-check-item {
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fafafa;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.anare-role-check-item:has(input:checked) {
    border-color: #001A6E;
    background: #F0F3FA;
}

.anare-role-check-item .form-check-input {
    margin-top: 0;
    flex-shrink: 0;
}

.anare-role-check-label {
    margin-bottom: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
}

/* ============================================ */
/*  NO HABILITATION MESSAGE                     */
/* ============================================ */
.anare-no-habilitation {
    text-align: center;
    padding: 3rem 2rem;
}

.anare-no-habilitation-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #e65100;
}

/* Responsive role cards */
@media (max-width: 576px) {
    .anare-role-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .anare-role-card-inner {
        padding: 1rem 0.75rem;
    }
}

/* ============================================
   ANARE-CI — Version Change Highlighting
   ============================================ */

/* Portal: highlight changed fields with left border + background */
.anare-field-changed {
    background-color: rgba(255, 193, 7, 0.08);
    border-left: 3px solid #ffc107;
    padding-left: 0.75rem !important;
    border-radius: 0.25rem;
}

.anare-field-changed .anare-form-label .badge {
    font-size: 0.65em;
    vertical-align: middle;
    font-weight: 500;
}

/* Backend: badge styling next to fields */
.o_form_view .anare-badge-changed {
    font-size: 0.7em;
    vertical-align: middle;
    white-space: nowrap;
    padding: 0.2em 0.5em;
}

/* ==========================================================================
   DASHBOARD — Mini stock map
   ========================================================================== */
.anare-mini-map-card .anare-chart-body-v3 {
    padding: 0;
}

.anare-mini-map-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: 8px 14px;
    border-radius: var(--anare-radius-md);
    background: var(--anare-primary-soft);
    color: var(--anare-primary);
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition), transform var(--anare-transition);
}
.anare-mini-map-cta:hover {
    background: var(--anare-primary);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.anare-mini-map-cta i {
    font-size: 0.8rem;
    transition: transform var(--anare-transition);
}
.anare-mini-map-cta:hover i {
    transform: translateX(3px);
}

.anare-mini-map-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    min-height: 380px;
    background: var(--anare-surface);
}

.anare-mini-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 380px;
    background: var(--anare-surface-alt);
    border-right: 1px solid var(--anare-border);
}
.anare-mini-map .leaflet-container {
    width: 100%;
    height: 100%;
    background: #f1f5f9;
}

.anare-mini-map-stats {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4);
    background: linear-gradient(180deg, var(--anare-surface-alt) 0%, var(--anare-surface) 100%);
}

.anare-mini-map-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--anare-space-3);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition);
}
.anare-mini-map-stat:hover {
    border-color: var(--anare-primary-soft);
    box-shadow: var(--anare-shadow-sm);
}

.anare-mini-map-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--anare-text-subtle);
    font-weight: 600;
}
.anare-mini-map-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--anare-text);
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
}
.anare-mini-map-stat-unit {
    font-size: 0.72rem;
    color: var(--anare-text-subtle);
    font-weight: 500;
}

.anare-mini-map-fillbar {
    margin-top: 6px;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--anare-border);
    overflow: hidden;
}
.anare-mini-map-fillbar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width 0.6s ease, background 0.4s ease;
}
.anare-mini-map-fillbar > span[data-fill="ok"]      { background: linear-gradient(90deg, #22c55e, #16a34a); }
.anare-mini-map-fillbar > span[data-fill="warning"] { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.anare-mini-map-fillbar > span[data-fill="danger"]  { background: linear-gradient(90deg, #ef4444, #dc2626); }
.anare-mini-map-fillbar > span[data-fill="low"]     { background: linear-gradient(90deg, #cbd5e1, #94a3b8); }

.anare-mini-map-stat-status .anare-mini-map-stat-value {
    font-size: 1rem;
    font-weight: 600;
}
.anare-mini-map-stat-status .anare-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

@media (max-width: 992px) {
    .anare-mini-map-wrap {
        grid-template-columns: 1fr;
    }
    .anare-mini-map {
        border-right: none;
        border-bottom: 1px solid var(--anare-border);
        min-height: 320px;
    }
    .anare-mini-map-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .anare-mini-map-stat {
        flex: 1 1 calc(50% - var(--anare-space-3) / 2);
        min-width: 140px;
    }
}
@media (max-width: 576px) {
    .anare-mini-map-stats {
        flex-direction: column;
    }
    .anare-mini-map-stat {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   DASHBOARD — Opérations par rôle (Leaderboard v2)
   Op palette (kept in sync with OP_COLORS in dashboard_charts.js)
     receptions  → #001A6E (ANARE-CI green)
     livraisons  → #0891b2 (teal)
     transferts  → #6366f1 (indigo)
   ========================================================================== */
.anare-role-ops-card-v2 .anare-chart-header-v3 {
    flex-wrap: wrap;
    gap: var(--anare-space-3);
}

/* Header summary pill — premium accent */
.anare-role-ops-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.04));
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 999px;
    font-size: var(--anare-fs-sm);
    color: #4f46e5;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.anare-role-ops-summary::before {
    content: "\f0e7"; /* fa-bolt */
    font-family: FontAwesome;
    font-size: 0.85rem;
    color: #6366f1;
    line-height: 1;
}
.anare-role-ops-summary strong {
    color: #312e81;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.anare-role-ops-summary-label,
.anare-role-ops-summary-unit {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #6366f1;
}

.anare-role-ops-body-v2 {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: var(--anare-space-5);
    align-items: stretch;
    padding: var(--anare-space-5);
    background:
        radial-gradient(800px 320px at 0% 0%, rgba(99, 102, 241, 0.04), transparent 60%),
        radial-gradient(700px 280px at 100% 100%, rgba(0, 26, 110, 0.04), transparent 60%);
}

/* Donut zone */
.anare-role-ops-donut-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--anare-space-4);
    padding: var(--anare-space-4);
    background:
        radial-gradient(circle at 50% 35%, rgba(99, 102, 241, 0.08), transparent 65%),
        linear-gradient(180deg, var(--anare-surface) 0%, var(--anare-surface-alt) 100%);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    min-height: 300px;
    overflow: hidden;
}
.anare-role-ops-donut-wrap::after {
    /* Soft top sheen */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 30%);
    border-radius: inherit;
}
.anare-role-ops-donut-wrap canvas {
    max-height: 220px;
    max-width: 220px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 6px 18px rgba(15, 23, 42, 0.08));
}

.anare-role-ops-donut-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    width: 100%;
    padding-top: var(--anare-space-3);
    border-top: 1px solid color-mix(in srgb, var(--anare-border) 60%, transparent);
    position: relative;
    z-index: 1;
}
.anare-role-ops-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: var(--anare-text);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.anare-role-ops-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: #cbd5e1;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Leaderboard list */
.anare-role-ops-leaderboard {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

@keyframes anare-role-rank-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.anare-role-rank {
    --role-color: #94a3b8;
    position: relative;
    display: grid;
    grid-template-columns: 38px 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--anare-space-3);
    padding: 12px 16px 12px 18px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: 14px;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
    animation: anare-role-rank-in 0.45s ease-out both;
    overflow: hidden;
}
.anare-role-rank:nth-child(1) { animation-delay: 0.00s; }
.anare-role-rank:nth-child(2) { animation-delay: 0.05s; }
.anare-role-rank:nth-child(3) { animation-delay: 0.10s; }
.anare-role-rank:nth-child(4) { animation-delay: 0.15s; }
.anare-role-rank:nth-child(5) { animation-delay: 0.20s; }
.anare-role-rank:nth-child(n+6) { animation-delay: 0.25s; }

.anare-role-rank::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--role-color), color-mix(in srgb, var(--role-color) 60%, transparent));
}
.anare-role-rank:hover {
    border-color: color-mix(in srgb, var(--role-color) 35%, var(--anare-border));
    box-shadow: 0 4px 16px -8px color-mix(in srgb, var(--role-color) 40%, transparent),
                var(--anare-shadow-sm);
    transform: translateX(2px);
}

/* Leader (top 1) */
.anare-role-rank.is-leader {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--role-color) 10%, var(--anare-surface)) 0%, var(--anare-surface) 70%),
        var(--anare-surface);
    border-color: color-mix(in srgb, var(--role-color) 35%, var(--anare-border));
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--role-color) 35%, transparent),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
    padding-top: 14px;
    padding-bottom: 14px;
}
.anare-role-rank.is-leader::before {
    width: 5px;
    background: linear-gradient(180deg, var(--role-color), color-mix(in srgb, var(--role-color) 50%, transparent));
}
.anare-role-rank.is-leader::after {
    /* Faint corner glow */
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, color-mix(in srgb, var(--role-color) 18%, transparent), transparent 70%);
    pointer-events: none;
}

/* Position badge — circle for all, leader gets filled pill */
.anare-role-rank-pos {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--role-color);
    background: color-mix(in srgb, var(--role-color) 8%, var(--anare-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-color) 30%, transparent);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.anare-role-rank.is-leader .anare-role-rank-pos {
    color: #fff;
    background: linear-gradient(135deg, var(--role-color), color-mix(in srgb, var(--role-color) 75%, #000));
    box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--role-color) 50%, transparent),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
    position: relative;
}
.anare-role-rank.is-leader .anare-role-rank-pos::after {
    content: "★";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fbbf24;
    color: #fff;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.5),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}

.anare-role-rank-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--role-color) 18%, var(--anare-surface)),
        color-mix(in srgb, var(--role-color) 5%, var(--anare-surface)));
    color: var(--role-color);
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-color) 28%, transparent),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
}

.anare-role-rank-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.anare-role-rank-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--anare-space-2);
}
.anare-role-rank-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--anare-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}
.anare-role-rank.is-leader .anare-role-rank-name {
    font-size: 1rem;
}
.anare-role-rank-share {
    font-size: 1rem;
    font-weight: 800;
    color: var(--role-color);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    line-height: 1;
}
.anare-role-rank-share small {
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 1px;
    opacity: 0.8;
}

/* Bar — segments with subtle inner highlight */
.anare-role-rank-bar {
    display: flex;
    width: 100%;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--anare-border) 70%, transparent);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.anare-role-rank-bar-seg {
    position: relative;
    display: block;
    height: 100%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.anare-role-rank-bar-seg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, transparent 50%, rgba(0, 0, 0, 0.06) 100%);
    pointer-events: none;
}
.anare-role-rank-bar-seg:first-child { border-radius: 999px 0 0 999px; }
.anare-role-rank-bar-seg:last-child  { border-radius: 0 999px 999px 0; }
.anare-role-rank-bar-seg:only-child  { border-radius: 999px; }

/* Chips — tinted by op color, alignées sur une seule ligne 3 colonnes égales */
.anare-role-rank-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 3px;
}
.anare-role-rank-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--anare-text);
    font-variant-numeric: tabular-nums;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.anare-role-rank-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--anare-shadow-sm);
}
.anare-role-rank-chip[data-op="receptions"] {
    background: rgba(0, 26, 110, 0.06);
    border-color: rgba(0, 26, 110, 0.18);
    color: #14532d;
}
.anare-role-rank-chip[data-op="livraisons"] {
    background: rgba(8, 145, 178, 0.07);
    border-color: rgba(8, 145, 178, 0.20);
    color: #0e6a82;
}
.anare-role-rank-chip[data-op="transferts"] {
    background: rgba(99, 102, 241, 0.07);
    border-color: rgba(99, 102, 241, 0.20);
    color: #4338ca;
}
.anare-role-rank-chip small {
    font-weight: 500;
    opacity: 0.75;
}
.anare-role-rank-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* Total — large pill bg behind the number */
.anare-role-rank-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 6px 14px;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--role-color);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background: color-mix(in srgb, var(--role-color) 7%, var(--anare-surface));
    border: 1px solid color-mix(in srgb, var(--role-color) 18%, transparent);
    border-radius: 12px;
    align-self: center;
    letter-spacing: -0.02em;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
}
.anare-role-rank.is-leader .anare-role-rank-total {
    color: #fff;
    background: linear-gradient(135deg, var(--role-color), color-mix(in srgb, var(--role-color) 80%, #000));
    border-color: transparent;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--role-color) 50%, transparent),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
}

@media (max-width: 992px) {
    .anare-role-ops-body-v2 {
        grid-template-columns: 1fr;
        gap: var(--anare-space-4);
    }
    .anare-role-ops-donut-wrap {
        min-height: auto;
    }
    .anare-role-ops-donut-wrap canvas {
        max-height: 180px;
        max-width: 180px;
    }
}
@media (max-width: 576px) {
    .anare-role-rank {
        grid-template-columns: 32px 38px minmax(0, 1fr);
        padding: 12px;
    }
    .anare-role-rank-total {
        grid-column: 1 / -1;
        justify-self: end;
        margin-top: 4px;
    }
}

/* ==========================================================================
   CREATE PAGE — Single-page premium form (réception, livraison, transfert)
   Layout : hero + 2-col (TOC sticky + sections) + sticky bottom action bar
   ========================================================================== */
.anare-create-page {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-5);
    padding-bottom: 96px; /* leave room for sticky footer */
    max-width: 1240px;
    margin: 0 auto;
}

/* ---- HERO compact ---- */
.anare-create-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--anare-space-5);
    padding: var(--anare-space-5) var(--anare-space-6);
    background:
        radial-gradient(540px 320px at 100% -20%, rgba(0, 26, 110, 0.10), transparent 60%),
        linear-gradient(180deg, var(--anare-surface) 0%, var(--anare-surface-alt) 100%);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    box-shadow: var(--anare-shadow-sm);
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.anare-create-hero-main {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-3);
    min-width: 0;
    flex: 1 1 auto;
}
.anare-create-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--anare-text-subtle);
    font-weight: 500;
}
.anare-create-breadcrumb a {
    color: var(--anare-text-muted);
    text-decoration: none;
    transition: color var(--anare-transition);
}
.anare-create-breadcrumb a:hover {
    color: var(--anare-primary);
}
.anare-create-breadcrumb i {
    font-size: 0.6rem;
    color: var(--anare-border-strong);
}
.anare-create-breadcrumb span[aria-current] {
    color: var(--anare-text);
    font-weight: 600;
}

.anare-create-hero-title-row {
    display: flex;
    align-items: center;
    gap: var(--anare-space-4);
    min-width: 0;
}
.anare-create-hero-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--anare-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: linear-gradient(135deg, var(--anare-primary-light), var(--anare-primary-soft));
    color: var(--anare-primary);
    box-shadow: inset 0 0 0 1px var(--anare-primary-soft),
                0 6px 16px -8px rgba(0, 26, 110, 0.30);
}
.anare-create-hero-icon-incoming {
    background: linear-gradient(135deg, rgba(0, 26, 110, 0.16), rgba(0, 26, 110, 0.04));
    color: var(--anare-primary);
}
.anare-create-hero-icon-outgoing {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.18), rgba(8, 145, 178, 0.04));
    color: #0e7490;
    box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.16),
                0 6px 16px -8px rgba(8, 145, 178, 0.30);
}
.anare-create-hero-icon-internal {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.04));
    color: #4f46e5;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.16),
                0 6px 16px -8px rgba(99, 102, 241, 0.30);
}

.anare-create-hero-text {
    min-width: 0;
}
.anare-create-hero-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--anare-text);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.anare-create-hero-sub {
    margin: 4px 0 0;
    color: var(--anare-text-muted);
    font-size: var(--anare-fs-sm);
    line-height: 1.4;
}

.anare-create-hero-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    flex-shrink: 0;
}

/* ---- Buttons ---- */
.anare-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    border-radius: var(--anare-radius-md);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition), transform var(--anare-transition), box-shadow var(--anare-transition);
    line-height: 1;
    white-space: nowrap;
}
.anare-create-btn i { font-size: 0.85rem; }
.anare-create-btn-ghost {
    background: var(--anare-surface);
    border-color: var(--anare-border);
    color: var(--anare-text-muted);
}
.anare-create-btn-ghost:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
    border-color: var(--anare-border-strong);
    text-decoration: none;
}
.anare-create-btn-primary {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(0, 26, 110, 0.40);
}
.anare-create-btn-primary:hover {
    background: var(--anare-primary-hover);
    border-color: var(--anare-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(0, 26, 110, 0.50);
}

/* ---- Error alert ---- */
.anare-create-alert {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--anare-radius-lg);
    font-size: var(--anare-fs-sm);
    line-height: 1.4;
}
.anare-create-alert > i {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.anare-create-alert strong {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}
.anare-create-alert-error {
    background: rgba(225, 29, 72, 0.06);
    border: 1px solid rgba(225, 29, 72, 0.20);
    color: #9f1239;
}

/* ---- Layout 2 cols ---- */
.anare-create-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--anare-space-5);
    align-items: flex-start;
}

/* ---- TOC sticky ---- */
.anare-create-toc {
    position: sticky;
    top: calc(var(--anare-topbar-height) + var(--anare-space-4));
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    padding: var(--anare-space-4);
    box-shadow: var(--anare-shadow-sm);
    align-self: start;
}
.anare-create-toc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--anare-space-3);
    border-bottom: 1px solid var(--anare-border);
    margin-bottom: var(--anare-space-3);
}
.anare-create-toc-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--anare-text-subtle);
}
.anare-create-toc-step-indicator {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-variant-numeric: tabular-nums;
    color: var(--anare-text-subtle);
}
.anare-create-toc-step-indicator strong {
    font-size: 1rem;
    font-weight: 800;
    color: var(--anare-primary);
}
.anare-create-toc-step-indicator small {
    font-size: 0.78rem;
}

.anare-create-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.anare-create-toc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--anare-radius-md);
    text-decoration: none;
    color: var(--anare-text-muted);
    transition: background var(--anare-transition), color var(--anare-transition);
    position: relative;
}
.anare-create-toc-item:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
    text-decoration: none;
}
.anare-create-toc-item.is-active {
    background: var(--anare-primary-light);
    color: var(--anare-primary);
}
.anare-create-toc-item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--anare-primary);
    border-radius: 0 4px 4px 0;
}
.anare-create-toc-bullet {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--anare-text-subtle);
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition);
    position: relative;
}
.anare-create-toc-bullet i {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
}
.anare-create-toc-item.is-active .anare-create-toc-bullet {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: #fff;
}
.anare-create-toc-item.is-completed .anare-create-toc-bullet {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: #fff;
}
.anare-create-toc-item.is-completed .anare-create-toc-bullet .anare-create-toc-num {
    display: none;
}
.anare-create-toc-item.is-completed .anare-create-toc-bullet i {
    display: inline-flex;
}

.anare-create-toc-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.anare-create-toc-title {
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    line-height: 1.2;
}
.anare-create-toc-hint {
    font-size: 0.72rem;
    color: var(--anare-text-subtle);
    font-weight: 500;
    line-height: 1.3;
}
.anare-create-toc-item.is-active .anare-create-toc-hint {
    color: color-mix(in srgb, var(--anare-primary) 65%, transparent);
}

.anare-create-toc-meta {
    margin: var(--anare-space-3) 0 0;
    padding-top: var(--anare-space-3);
    border-top: 1px solid var(--anare-border);
    font-size: 0.72rem;
    color: var(--anare-text-subtle);
    display: flex;
    align-items: center;
    gap: 6px;
}
.anare-create-toc-meta i {
    color: var(--anare-text-subtle);
}

/* ---- Sections column ---- */
.anare-create-sections {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-5);
}

.anare-create-section {
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    box-shadow: var(--anare-shadow-sm);
    scroll-margin-top: calc(var(--anare-topbar-height) + var(--anare-space-4));
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition);
}
.anare-create-section:focus-within {
    border-color: color-mix(in srgb, var(--anare-primary) 35%, var(--anare-border));
    box-shadow: 0 0 0 4px var(--anare-primary-soft), var(--anare-shadow-sm);
}

.anare-create-section-head {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4) var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border);
    background: linear-gradient(180deg, var(--anare-surface-alt) 0%, var(--anare-surface) 100%);
    border-radius: var(--anare-radius-xl) var(--anare-radius-xl) 0 0;
}
.anare-create-section-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--anare-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--anare-surface-alt);
    color: var(--anare-text-muted);
    box-shadow: inset 0 0 0 1px var(--anare-border);
}
.anare-create-section-icon-primary {
    background: linear-gradient(135deg, var(--anare-primary-light), var(--anare-primary-soft));
    color: var(--anare-primary);
    box-shadow: inset 0 0 0 1px var(--anare-primary-soft);
}
.anare-create-section-icon-teal {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.16), rgba(8, 145, 178, 0.04));
    color: #0e7490;
    box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.16);
}
.anare-create-section-icon-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.04));
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}
.anare-create-section-icon-indigo {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.04));
    color: #4f46e5;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.16);
}
.anare-create-section-titles {
    flex: 1;
    min-width: 0;
}
.anare-create-section-titles h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--anare-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.anare-create-section-titles p {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--anare-text-subtle);
    line-height: 1.35;
}

.anare-create-section-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--anare-primary);
    border: 1px solid var(--anare-primary);
    color: #fff;
    border-radius: var(--anare-radius-md);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--anare-transition), transform var(--anare-transition), box-shadow var(--anare-transition);
    white-space: nowrap;
}
.anare-create-section-action:hover {
    background: var(--anare-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(0, 26, 110, 0.40);
}
.anare-create-section-action i {
    font-size: 0.78rem;
}

.anare-create-section-body {
    padding: var(--anare-space-5);
}
.anare-create-section-body.p-0 {
    padding: 0;
}

/* ---- Form fields (refresh inside create page) ---- */
.anare-create-page .anare-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--anare-space-4);
}
.anare-create-page .anare-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.anare-create-page .anare-form-group.full-width {
    grid-column: 1 / -1;
}
.anare-create-page .anare-form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--anare-text);
    margin: 0;
    letter-spacing: 0.005em;
}
.anare-create-page .form-control,
.anare-create-page .form-select {
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    padding: 10px 14px;
    font-size: var(--anare-fs-sm);
    color: var(--anare-text);
    min-height: 44px;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), background var(--anare-transition);
}
.anare-create-page .form-control:focus,
.anare-create-page .form-select:focus {
    border-color: var(--anare-primary);
    background: var(--anare-surface);
    box-shadow: 0 0 0 3px var(--anare-primary-light);
    outline: none;
}
.anare-create-page .form-control::placeholder {
    color: var(--anare-text-subtle);
    opacity: 1;
}
.anare-form-hint {
    font-size: 0.72rem;
    color: var(--anare-text-subtle);
    line-height: 1.3;
}

/* ---- Lines table ---- */
.anare-create-lines-wrap {
    position: relative;
}
.anare-create-lines-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}
.anare-create-lines-table thead th {
    background: var(--anare-surface-alt);
    border-bottom: 1px solid var(--anare-border);
    text-align: left;
    padding: 10px var(--anare-space-4);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--anare-text-subtle);
    white-space: nowrap;
}
.anare-create-lines-table tbody td {
    padding: 8px var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    vertical-align: middle;
}
.anare-create-lines-table tbody tr:last-child td {
    border-bottom: none;
}
.anare-create-lines-table tbody tr:hover td {
    background: var(--anare-primary-soft);
}
.anare-create-lines-table .form-control,
.anare-create-lines-table .form-select {
    min-height: 38px;
    padding: 6px 10px;
    font-size: 0.85rem;
    border-radius: 8px;
}
.anare-create-lines-table .btn-link,
.anare-create-lines-table button[type="button"] {
    color: var(--anare-text-subtle);
    background: transparent;
    border: 1px solid var(--anare-border);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition);
    text-decoration: none;
}
.anare-create-lines-table button[type="button"]:hover {
    background: rgba(225, 29, 72, 0.08);
    color: #be123c;
    border-color: rgba(225, 29, 72, 0.30);
}

.anare-create-lines-empty {
    padding: var(--anare-space-7) var(--anare-space-4);
    text-align: center;
    color: var(--anare-text-subtle);
}
.anare-create-lines-empty i {
    font-size: 2rem;
    color: var(--anare-border-strong);
    margin-bottom: var(--anare-space-2);
    display: block;
}
.anare-create-lines-empty p {
    margin: 0 0 4px;
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    color: var(--anare-text-muted);
}
.anare-create-lines-empty small {
    font-size: 0.78rem;
}

/* ---- Sticky bottom action bar ---- */
.anare-create-footer {
    position: fixed;
    bottom: 0;
    left: var(--anare-sidebar-width, 260px);
    right: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-4);
    padding: var(--anare-space-3) var(--anare-space-6);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--anare-border);
    box-shadow: 0 -8px 24px -16px rgba(15, 23, 42, 0.20);
}
.anare-create-footer-summary {
    display: flex;
    align-items: center;
    gap: var(--anare-space-5);
}
.anare-create-footer-stat {
    display: flex;
    align-items: center;
    gap: 10px;
}
.anare-create-footer-stat-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--anare-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.anare-create-footer-stat > div {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.anare-create-footer-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--anare-text-subtle);
}
.anare-create-footer-stat strong {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--anare-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.anare-create-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .anare-create-layout {
        grid-template-columns: 1fr;
    }
    .anare-create-toc {
        position: static;
    }
}
@media (max-width: 768px) {
    .anare-create-hero {
        flex-direction: column;
        align-items: stretch;
        padding: var(--anare-space-4);
    }
    .anare-create-hero-actions {
        justify-content: flex-end;
    }
    .anare-create-page .anare-form-grid {
        grid-template-columns: 1fr;
    }
    .anare-create-section-head {
        padding: var(--anare-space-3) var(--anare-space-4);
    }
    .anare-create-section-body {
        padding: var(--anare-space-4);
    }
    .anare-create-footer {
        left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--anare-space-3);
        padding: var(--anare-space-3) var(--anare-space-4);
    }
    .anare-create-footer-summary {
        justify-content: space-between;
    }
    .anare-create-footer-actions {
        justify-content: flex-end;
    }
}

/* ==========================================================================
   DETAIL PAGE — Picking detail (réception/livraison/transfert)
   Hero + status pill + meta sidebar + content sections + sticky footer
   ========================================================================== */
.anare-detail-page {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-5);
    padding-bottom: 96px; /* sticky footer */
    max-width: 1240px;
    margin: 0 auto;
}

/* ---- Alert variants (extend create alerts) ---- */
.anare-create-alert-success {
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.22);
    color: #166534;
}
.anare-create-alert-info {
    background: rgba(8, 145, 178, 0.06);
    border: 1px solid rgba(8, 145, 178, 0.22);
    color: #0e6a82;
}

/* ---- Button variants (extend create buttons) ---- */
.anare-create-btn-warning {
    background: var(--anare-surface);
    border-color: rgba(245, 158, 11, 0.40);
    color: #b45309;
}
.anare-create-btn-warning:hover {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.55);
    color: #92400e;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ---- Hero (extends create hero with status aside) ---- */
.anare-detail-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--anare-space-5);
    padding: var(--anare-space-5) var(--anare-space-6);
    background:
        radial-gradient(540px 320px at 100% -20%, rgba(0, 26, 110, 0.10), transparent 60%),
        linear-gradient(180deg, var(--anare-surface) 0%, var(--anare-surface-alt) 100%);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    box-shadow: var(--anare-shadow-sm);
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.anare-detail-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--anare-text-subtle);
    margin-bottom: 4px;
}

.anare-detail-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--anare-space-2);
    flex-shrink: 0;
}

/* Status pill */
.anare-detail-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    color: var(--anare-text-muted);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    line-height: 1;
    white-space: nowrap;
}
.anare-detail-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
    flex-shrink: 0;
}
.anare-detail-status-pill[data-state="draft"] {
    color: var(--anare-text-subtle);
    background: var(--anare-surface-alt);
}
.anare-detail-status-pill[data-state="waiting"] {
    color: #0e6a82;
    background: rgba(8, 145, 178, 0.08);
    border-color: rgba(8, 145, 178, 0.24);
}
.anare-detail-status-pill[data-state="confirmed"] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.28);
}
.anare-detail-status-pill[data-state="assigned"] {
    color: #92400e;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.38);
}
.anare-detail-status-pill[data-state="done"] {
    color: #166534;
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.32);
}
.anare-detail-status-pill[data-state="cancel"] {
    color: #9f1239;
    background: rgba(225, 29, 72, 0.08);
    border-color: rgba(225, 29, 72, 0.26);
}

/* Agrement states */
.anare-detail-status-pill[data-state-agrement="brouillon"] {
    color: var(--anare-text-subtle);
    background: var(--anare-surface-alt);
}
.anare-detail-status-pill[data-state-agrement="soumis"] {
    color: #0e6a82;
    background: rgba(8, 145, 178, 0.10);
    border-color: rgba(8, 145, 178, 0.28);
}
.anare-detail-status-pill[data-state-agrement="en_validation"] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.32);
}
.anare-detail-status-pill[data-state-agrement="valide"] {
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.34);
}
.anare-detail-status-pill[data-state-agrement="rejete"] {
    color: #9f1239;
    background: rgba(225, 29, 72, 0.10);
    border-color: rgba(225, 29, 72, 0.30);
}
.anare-detail-status-pill[data-state-agrement="expire"] {
    color: #1e293b;
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.24);
}
.anare-detail-status-pill[data-state-agrement="suspendu"] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.28);
}
.anare-detail-status-pill[data-state-agrement="renouvele"] {
    color: #1e3a8a;
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.30);
}

/* Infrastructure states */
.anare-detail-status-pill[data-state-infra="en_service"] {
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.34);
}
.anare-detail-status-pill[data-state-infra="en_construction"] {
    color: #0e6a82;
    background: rgba(8, 145, 178, 0.10);
    border-color: rgba(8, 145, 178, 0.28);
}
.anare-detail-status-pill[data-state-infra="arret_temporaire"] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.32);
}
.anare-detail-status-pill[data-state-infra="ferme"] {
    color: #9f1239;
    background: rgba(225, 29, 72, 0.10);
    border-color: rgba(225, 29, 72, 0.30);
}

/* Backorder pill (link in hero aside) */
.anare-detail-backorder-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: #4338ca;
    text-decoration: none;
    transition: background var(--anare-transition), transform var(--anare-transition);
}
.anare-detail-backorder-pill strong {
    font-weight: 700;
    color: #312e81;
}
.anare-detail-backorder-pill:hover {
    background: rgba(99, 102, 241, 0.14);
    transform: translateY(-1px);
    text-decoration: none;
    color: #4338ca;
}

/* ---- Layout 2 cols ---- */
.anare-detail-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--anare-space-5);
    align-items: flex-start;
}

/* ---- Meta sidebar ---- */
.anare-detail-meta {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-3);
    position: sticky;
    top: calc(var(--anare-topbar-height) + var(--anare-space-4));
    align-self: start;
}
.anare-detail-meta-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--anare-text-subtle);
    padding: 0 var(--anare-space-2) var(--anare-space-2);
}
.anare-detail-meta-card {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: 12px 14px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition);
}
.anare-detail-meta-card:hover {
    border-color: var(--anare-border-strong);
    box-shadow: var(--anare-shadow-sm);
}
.anare-detail-meta-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--anare-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    box-shadow: inset 0 0 0 1px var(--anare-primary-soft);
}
.anare-detail-meta-icon-teal {
    background: rgba(8, 145, 178, 0.14);
    color: #0e7490;
    box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.18);
}
.anare-detail-meta-icon-amber {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}
.anare-detail-meta-icon-indigo {
    background: rgba(99, 102, 241, 0.14);
    color: #4f46e5;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
}
.anare-detail-meta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.anare-detail-meta-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--anare-text-subtle);
    line-height: 1.2;
}
.anare-detail-meta-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--anare-text);
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}
.anare-detail-meta-value.text-muted { color: var(--anare-text-subtle) !important; font-weight: 500; }
.anare-detail-meta-value.text-muted.small { font-size: 0.78rem; }
.anare-detail-meta-link {
    color: var(--anare-primary);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.anare-detail-meta-link:hover {
    color: var(--anare-primary-hover);
    border-bottom-style: solid;
    text-decoration: none;
}

/* ---- Content column ---- */
.anare-detail-content {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-5);
}

/* Lines table inside detail (slight overrides) */
.anare-detail-page .anare-create-lines-table tbody tr:hover td {
    background: var(--anare-primary-soft);
}

/* ---- Tabs section ---- */
.anare-detail-tabs-section .anare-create-section-body {
    overflow: hidden;
}
.anare-detail-tabs {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0 var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border);
    background: var(--anare-surface-alt);
}
.anare-detail-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--anare-text-muted);
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--anare-transition), border-color var(--anare-transition), background var(--anare-transition);
    margin-bottom: -1px;
}
.anare-detail-tab i {
    font-size: 0.9rem;
}
.anare-detail-tab:hover {
    color: var(--anare-text);
    background: var(--anare-surface);
}
.anare-detail-tab.active {
    color: var(--anare-primary);
    border-bottom-color: var(--anare-primary);
    background: var(--anare-surface);
}
.anare-detail-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}
.anare-detail-tab.active .anare-detail-tab-badge {
    background: var(--anare-primary);
    color: #fff;
}
.anare-detail-tab-content {
    padding: 0;
}
.anare-detail-tab-content > .tab-pane {
    padding: var(--anare-space-5);
}
.anare-detail-tab-content > .tab-pane#tab_documents {
    padding: 0;
}
.anare-detail-tab-content > .tab-pane#tab_documents .anare-documents-scroll {
    max-height: 460px;
    overflow-y: auto;
}

/* Empty state */
.anare-detail-empty {
    padding: var(--anare-space-7) var(--anare-space-5);
    text-align: center;
    color: var(--anare-text-subtle);
}
.anare-detail-empty i {
    display: block;
    font-size: 2.4rem;
    color: var(--anare-border-strong);
    margin-bottom: var(--anare-space-2);
}
.anare-detail-empty p {
    margin: 0 0 4px;
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    color: var(--anare-text-muted);
}
.anare-detail-empty small {
    font-size: 0.78rem;
}

/* Chatter wrapper */
.anare-detail-chatter h5,
.anare-detail-chatter .o_portal_messages h3,
.anare-detail-chatter .o_portal_messages h4 {
    font-size: var(--anare-fs-sm);
    font-weight: 700;
    color: var(--anare-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--anare-space-3);
}

/* Validation lines table — input style */
.anare-detail-lines-edit input[name="qty_done[]"] {
    border: 1px solid var(--anare-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 600;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition);
}
.anare-detail-lines-edit input[name="qty_done[]"]:focus {
    border-color: var(--anare-primary);
    box-shadow: 0 0 0 3px var(--anare-primary-light);
    outline: none;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .anare-detail-layout {
        grid-template-columns: 1fr;
    }
    .anare-detail-meta {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--anare-space-3);
    }
    .anare-detail-meta-eyebrow { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (max-width: 768px) {
    .anare-detail-hero {
        flex-direction: column;
        align-items: stretch;
        padding: var(--anare-space-4);
    }
    .anare-detail-hero-aside {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .anare-detail-meta {
        grid-template-columns: 1fr;
    }
    .anare-detail-tabs {
        padding: 0 var(--anare-space-3);
        overflow-x: auto;
    }
    .anare-detail-tab {
        padding: 10px 12px;
        white-space: nowrap;
    }
    .anare-detail-tab-content > .tab-pane {
        padding: var(--anare-space-3);
    }
}

/* ==========================================================================
   CONFIRM MODAL — Action de confirmation (désactivation, suppression…)
   ========================================================================== */
.anare-confirm-modal .modal-dialog {
    max-width: 460px;
}
.anare-confirm-modal-content {
    position: relative;
    border: none;
    border-radius: var(--anare-radius-xl);
    background: var(--anare-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    padding: var(--anare-space-6);
    overflow: hidden;
}
.anare-confirm-modal-content::before {
    /* Subtle warm accent at the top */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        rgba(245, 158, 11, 0.40),
        rgba(225, 29, 72, 0.40));
}

.anare-confirm-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--anare-radius-md);
    color: var(--anare-text-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition);
    z-index: 2;
}
.anare-confirm-modal-close:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
    border-color: var(--anare-border);
}

.anare-confirm-modal-header {
    text-align: center;
    margin-bottom: var(--anare-space-4);
    padding-top: var(--anare-space-2);
}
.anare-confirm-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: var(--anare-space-3);
    font-size: 1.6rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.anare-confirm-modal-icon-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06));
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.20),
                0 8px 20px -8px rgba(245, 158, 11, 0.30);
}
.anare-confirm-modal-icon-danger {
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.16), rgba(225, 29, 72, 0.04));
    color: #be123c;
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.20),
                0 8px 20px -8px rgba(225, 29, 72, 0.30);
}

.anare-confirm-modal-title {
    margin: 0 0 6px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--anare-text);
    letter-spacing: -0.01em;
}
.anare-confirm-modal-subtitle {
    margin: 0;
    font-size: var(--anare-fs-sm);
    color: var(--anare-text-muted);
    line-height: 1.45;
}

.anare-confirm-modal-list {
    list-style: none;
    margin: 0 0 var(--anare-space-5);
    padding: var(--anare-space-4);
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.anare-confirm-modal-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--anare-text);
    line-height: 1.4;
}
.anare-confirm-modal-list li i {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    font-size: 0.78rem;
    margin-top: 1px;
}

.anare-confirm-modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--anare-space-2);
}
.anare-confirm-modal-footer .anare-create-btn,
.anare-confirm-modal-footer .d-inline,
.anare-confirm-modal-footer .d-inline .anare-create-btn {
    flex: 1;
    justify-content: center;
}
.anare-confirm-modal-footer .d-inline {
    display: flex !important;
}

/* Avatar initiales dans hero (édition délégué) */
.anare-edit-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--anare-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--anare-primary);
    background: linear-gradient(135deg, var(--anare-primary-light), var(--anare-primary-soft));
    box-shadow: inset 0 0 0 1px var(--anare-primary-soft),
                0 6px 16px -8px rgba(0, 26, 110, 0.30);
    text-transform: uppercase;
}

/* Danger button variant */
.anare-create-btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(220, 38, 38, 0.45);
}
.anare-create-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(220, 38, 38, 0.55);
}

@media (max-width: 480px) {
    .anare-confirm-modal-content {
        padding: var(--anare-space-4);
    }
    .anare-confirm-modal-footer {
        flex-direction: column-reverse;
    }
    .anare-confirm-modal-footer .anare-create-btn,
    .anare-confirm-modal-footer .d-inline {
        width: 100%;
    }
}

/* ==========================================================================
   SUPPORT MODAL — Formulaire de contact (mailto)
   ========================================================================== */
.anare-support-modal .modal-dialog {
    max-width: 540px;
}
.anare-support-modal-content {
    position: relative;
    border: none;
    border-radius: var(--anare-radius-xl);
    background: var(--anare-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    padding: var(--anare-space-6);
    overflow: hidden;
}
.anare-support-modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--anare-primary), color-mix(in srgb, var(--anare-primary) 40%, transparent));
}
.anare-support-modal-header {
    display: flex;
    align-items: flex-start;
    gap: var(--anare-space-4);
    margin-bottom: var(--anare-space-5);
    padding-top: var(--anare-space-2);
}
.anare-support-modal-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: linear-gradient(135deg, var(--anare-primary-light), var(--anare-primary-soft));
    color: var(--anare-primary);
    box-shadow: inset 0 0 0 1px var(--anare-primary-soft),
                0 8px 20px -8px rgba(0, 26, 110, 0.30);
}
.anare-support-modal-title {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--anare-text);
    letter-spacing: -0.01em;
}
.anare-support-modal-sub {
    margin: 0;
    font-size: var(--anare-fs-sm);
    color: var(--anare-text-muted);
    line-height: 1.45;
}
.anare-support-modal-sub strong {
    color: var(--anare-text);
    font-weight: 600;
}

.anare-support-form {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-3);
    margin-bottom: var(--anare-space-4);
}
.anare-support-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.anare-support-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--anare-text);
    margin: 0;
}
.anare-support-form .form-control,
.anare-support-form .form-select {
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    padding: 10px 14px;
    font-size: var(--anare-fs-sm);
    color: var(--anare-text);
    min-height: 42px;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition);
}
.anare-support-form .form-control:focus,
.anare-support-form .form-select:focus {
    border-color: var(--anare-primary);
    box-shadow: 0 0 0 3px var(--anare-primary-light);
    outline: none;
}
.anare-support-form textarea.form-control {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}
.anare-support-hint {
    font-size: 0.72rem;
    color: var(--anare-text-subtle);
    line-height: 1.35;
}
.anare-support-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--anare-primary-soft);
    border: 1px solid var(--anare-primary-light);
    border-radius: var(--anare-radius-md);
    font-size: 0.78rem;
    color: var(--anare-primary);
}
.anare-support-meta i {
    font-size: 0.85rem;
}

@media (max-width: 480px) {
    .anare-support-modal-content {
        padding: var(--anare-space-4);
    }
    .anare-support-modal-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ==========================================================================
   GUIDED TOUR — Onboarding premium (overlay + spotlight + tooltip enrichi)
   ========================================================================== */

/* Container racine */
.anare-tour-root {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9990;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.anare-tour-root.is-active {
    opacity: 1;
    pointer-events: auto;
}
body.anare-tour-active { overflow: hidden; }

/* Overlay transparent — capture clics pour skip-on-click */
.anare-tour-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    cursor: pointer;
}

/* Spotlight — rect transparent + box-shadow géant qui dim partout */
.anare-tour-spotlight {
    position: fixed;
    top: -9999px;
    left: -9999px;
    background: transparent;
    border-radius: var(--anare-radius-lg);
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62),
                0 0 0 2px rgba(255, 255, 255, 0.36),
                0 0 28px 6px rgba(255, 255, 255, 0.10);
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease;
    pointer-events: none;
    z-index: 9991;
}
/* Pulse animation — halo respirant pour attirer l'œil */
@keyframes anare-tour-pulse {
    0%, 100% {
        box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62),
                    0 0 0 2px rgba(255, 255, 255, 0.36),
                    0 0 28px 6px rgba(255, 255, 255, 0.10),
                    0 0 0 0 rgba(34, 197, 94, 0.50);
    }
    50% {
        box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62),
                    0 0 0 3px rgba(255, 255, 255, 0.45),
                    0 0 32px 10px rgba(255, 255, 255, 0.16),
                    0 0 0 12px rgba(34, 197, 94, 0.0);
    }
}
.anare-tour-spotlight.is-pulsing {
    animation: anare-tour-pulse 2.4s ease-in-out infinite;
}

/* Tooltip — card avec icon hero + content + dots + footer */
.anare-tour-tooltip {
    position: fixed;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    box-shadow: 0 28px 64px -8px rgba(15, 23, 42, 0.22),
                0 8px 20px rgba(15, 23, 42, 0.10);
    z-index: 9995;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease,
                top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.anare-tour-root.is-active .anare-tour-tooltip {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.anare-tour-root.is-active .anare-tour-tooltip.pos-top,
.anare-tour-root.is-active .anare-tour-tooltip.pos-right,
.anare-tour-root.is-active .anare-tour-tooltip.pos-bottom,
.anare-tour-root.is-active .anare-tour-tooltip.pos-left { transform: none; }

/* Slide-up subtil entre étapes */
@keyframes anare-tour-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.anare-tour-tooltip.is-entering .anare-tour-icon-wrap,
.anare-tour-tooltip.is-entering .anare-tour-tooltip-body {
    animation: anare-tour-step-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.anare-tour-tooltip.is-entering .anare-tour-tooltip-body { animation-delay: 0.05s; }

/* Ribbon top */
.anare-tour-tooltip::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--anare-primary), color-mix(in srgb, var(--anare-primary) 50%, transparent));
    border-radius: var(--anare-radius-xl) var(--anare-radius-xl) 0 0;
}

/* Arrow pointer — petit losange qui sort du tooltip vers la cible */
.anare-tour-arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    z-index: -1;
    pointer-events: none;
    /* On masque les côtés non utiles via clip-path : seul le coin "vers la cible" est visible */
}
.anare-tour-tooltip.pos-top .anare-tour-arrow {
    border-top: none;
    border-left: none;
    box-shadow: 1px 1px 0 0 rgba(15, 23, 42, 0.04);
}
.anare-tour-tooltip.pos-bottom .anare-tour-arrow {
    border-bottom: none;
    border-right: none;
    box-shadow: -1px -1px 0 0 rgba(15, 23, 42, 0.04);
}
.anare-tour-tooltip.pos-left .anare-tour-arrow {
    border-bottom: none;
    border-left: none;
    box-shadow: 1px -1px 0 0 rgba(15, 23, 42, 0.04);
}
.anare-tour-tooltip.pos-right .anare-tour-arrow {
    border-top: none;
    border-right: none;
    box-shadow: -1px 1px 0 0 rgba(15, 23, 42, 0.04);
}

/* Skip absolute top-right */
.anare-tour-skip {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--anare-radius-sm);
    color: var(--anare-text-subtle);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition);
    z-index: 1;
}
.anare-tour-skip:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
    border-color: var(--anare-border);
}

/* ===== Icon hero (cercle gradient avec halo subtil) ===== */
.anare-tour-icon-wrap {
    display: flex;
    justify-content: center;
    padding: var(--anare-space-5) var(--anare-space-4) 0;
    position: relative;
}
.anare-tour-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3),
                0 8px 20px -8px rgba(15, 23, 42, 0.18);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.anare-tour-icon::before {
    /* Halo radial doux derrière l'icône */
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.15), transparent 60%);
    z-index: -1;
}
.anare-tour-icon-primary {
    background: linear-gradient(135deg, var(--anare-primary), color-mix(in srgb, var(--anare-primary) 70%, #000));
    color: #fff;
}
.anare-tour-icon-teal {
    background: linear-gradient(135deg, #0891b2, #0e6a82);
    color: #fff;
}
.anare-tour-icon-amber {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    color: #fff;
}
.anare-tour-icon-indigo {
    background: linear-gradient(135deg, #6366f1, #4338ca);
    color: #fff;
}
.anare-tour-icon-success {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
}
.anare-tour-icon-success::before {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.30), transparent 60%);
}

/* Body */
.anare-tour-tooltip-body {
    padding: var(--anare-space-4) var(--anare-space-5) var(--anare-space-3);
    text-align: center;
}
.anare-tour-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--anare-text-subtle);
    margin-bottom: 6px;
}
.anare-tour-title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--anare-text);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.anare-tour-desc {
    margin: 0;
    font-size: var(--anare-fs-sm);
    color: var(--anare-text-muted);
    line-height: 1.55;
}

/* Bullets visuelles (optionnel par étape) */
.anare-tour-bullets {
    list-style: none;
    margin: var(--anare-space-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
.anare-tour-bullets li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    font-size: 0.82rem;
    color: var(--anare-text);
    line-height: 1.4;
}
.anare-tour-bullets li i {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--anare-primary-light);
    color: var(--anare-primary);
    font-size: 0.78rem;
}

/* Step dots navigation */
.anare-tour-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 0 var(--anare-space-5) var(--anare-space-3);
}
.anare-tour-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--anare-border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.anare-tour-dot:hover {
    background: var(--anare-border-strong);
}
.anare-tour-dot.is-completed {
    background: color-mix(in srgb, var(--anare-primary) 60%, var(--anare-border));
}
.anare-tour-dot.is-active {
    width: 24px;
    background: var(--anare-primary);
    box-shadow: 0 2px 8px -2px rgba(0, 26, 110, 0.40);
}
.anare-tour-dot:focus-visible {
    outline: 2px solid var(--anare-action);
    outline-offset: 3px;
}

/* Footer : Prev + keys hints + Next */
.anare-tour-tooltip-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-2);
    padding: var(--anare-space-3) var(--anare-space-4);
    background: var(--anare-surface-alt);
    border-top: 1px solid var(--anare-border);
    border-radius: 0 0 var(--anare-radius-xl) var(--anare-radius-xl);
}
.anare-tour-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--anare-radius-md);
    font-size: var(--anare-fs-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--anare-transition), color var(--anare-transition), border-color var(--anare-transition), transform var(--anare-transition);
    font: inherit;
    line-height: 1;
}
.anare-tour-btn i { font-size: 0.78rem; }
.anare-tour-btn-ghost {
    background: var(--anare-surface);
    border-color: var(--anare-border);
    color: var(--anare-text-muted);
}
.anare-tour-btn-ghost:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
    border-color: var(--anare-border-strong);
}
.anare-tour-btn-primary {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(0, 26, 110, 0.40);
}
.anare-tour-btn-primary:hover {
    background: var(--anare-primary-hover);
    border-color: var(--anare-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(0, 26, 110, 0.50);
}

/* Keyboard hints (subtle) — hide on hero variant (buttons trop longs) */
.anare-tour-keys {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: var(--anare-text-subtle);
    font-weight: 500;
    flex-shrink: 1;
    min-width: 0;
}
.anare-tour-tooltip.is-hero .anare-tour-keys {
    display: none;
}
/* Boutons foot : ne shrinkent pas, le texte reste lisible */
.anare-tour-tooltip-foot .anare-tour-btn {
    flex-shrink: 0;
}
/* Première étape : seul le bouton next est visible → centrer */
.anare-tour-tooltip.is-first-step .anare-tour-tooltip-foot {
    justify-content: center;
}
.anare-tour-keys kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.7rem;
    color: var(--anare-text-muted);
    box-shadow: 0 1px 0 0 var(--anare-border-strong);
}
.anare-tour-keys span {
    margin-left: 2px;
}

/* ===== Variant hero (welcome / finish) — plus dramatique ===== */
.anare-tour-tooltip.is-hero .anare-tour-icon-wrap {
    padding-top: var(--anare-space-6);
}
.anare-tour-tooltip.is-hero .anare-tour-icon {
    width: 76px;
    height: 76px;
    font-size: 1.9rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3),
                0 12px 28px -10px rgba(15, 23, 42, 0.30);
}
.anare-tour-tooltip.is-hero .anare-tour-icon::before {
    inset: -28px;
}
.anare-tour-tooltip.is-hero .anare-tour-title {
    font-size: 1.35rem;
}
.anare-tour-tooltip.is-hero .anare-tour-tooltip-body {
    padding-bottom: var(--anare-space-4);
}

/* Animation rayons subtils sur le hero icon (welcome/finish) */
.anare-tour-tooltip.is-hero .anare-tour-icon-wrap::before,
.anare-tour-tooltip.is-hero .anare-tour-icon-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    transform: translate(-50%, -40%);
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--anare-primary) 18%, transparent), transparent 70%);
    animation: anare-tour-hero-glow 3s ease-in-out infinite;
}
.anare-tour-tooltip.is-hero .anare-tour-icon-wrap::after {
    animation-delay: -1.5s;
    width: 140px;
    height: 140px;
}
@keyframes anare-tour-hero-glow {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -40%) scale(1); }
    50%      { opacity: 0.9; transform: translate(-50%, -40%) scale(1.08); }
}

/* Responsive */
@media (max-width: 480px) {
    .anare-tour-tooltip { width: calc(100vw - 24px); }
    .anare-tour-tooltip-foot { flex-wrap: wrap; }
    .anare-tour-keys { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .anare-tour-root,
    .anare-tour-spotlight,
    .anare-tour-tooltip,
    .anare-tour-overlay,
    .anare-tour-icon-wrap::before,
    .anare-tour-icon-wrap::after,
    .anare-tour-tooltip.is-entering .anare-tour-icon-wrap,
    .anare-tour-tooltip.is-entering .anare-tour-tooltip-body {
        transition: none !important;
        animation: none !important;
    }
    .anare-tour-spotlight.is-pulsing {
        animation: none !important;
    }
}



/* ============================================================================
   ADMIN DASHBOARD (rendu sur /my pour les internal users)
   ============================================================================
   Layout en story : hero, focus action, stats agrément, grid activité+access.
   Pas une grille uniforme — on guide l'oeil par la hiérarchie.
   ============================================================================ */

.anare-admin-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-5);
}

/* ============== HERO (container, pas une grid) ==============
   Le hero v1 utilisait sa propre grid 1.3fr / 1fr qui créait une zone vide
   à droite quand le contenu interne était en .anare-admin-hero-content. La
   v3 confine la grid au content interne ; le hero parent n'est qu'un
   conteneur de fond + ornements.
   ============================================================ */
.anare-admin-hero {
    position: relative;
    overflow: hidden;
    padding: var(--anare-space-6);
    border-radius: var(--anare-radius-xl);
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.18), transparent 60%),
        linear-gradient(135deg, var(--anare-primary-deep, #00134E) 0%, var(--anare-primary, #001A6E) 100%);
    color: #fff;
    box-shadow: 0 16px 40px -16px rgba(15, 23, 42, 0.30);
}

.anare-admin-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    margin-bottom: var(--anare-space-3);
    border-radius: var(--anare-radius-pill);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    backdrop-filter: blur(8px);
}

.anare-admin-hero-eyebrow i { font-size: 0.85rem; }

.anare-admin-hero-title {
    margin: 0 0 var(--anare-space-2);
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.anare-admin-hero-wave {
    display: inline-block;
    margin-left: 8px;
    transform-origin: 70% 70%;
    animation: anare-admin-wave 2.5s ease-in-out infinite;
}

@keyframes anare-admin-wave {
    0%, 50%, 100% { transform: rotate(0deg); }
    10%, 30%      { transform: rotate(14deg); }
    20%           { transform: rotate(-8deg); }
}

.anare-admin-hero-sub {
    margin: 0;
    max-width: 50ch;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Stats inline dans le hero */
.anare-admin-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--anare-space-3);
    padding-top: var(--anare-space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

@media (min-width: 992px) {
    .anare-admin-hero-stats {
        grid-template-columns: repeat(4, 1fr);
        padding-top: 0;
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.18);
        padding-left: var(--anare-space-5);
    }
}

.anare-admin-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.anare-admin-hero-stat-value {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.anare-admin-hero-stat-label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* ============== FOCUS CARD (action prioritaire) ============== */
.anare-admin-focus {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--anare-space-5);
    padding: var(--anare-space-5) var(--anare-space-6);
    border-radius: var(--anare-radius-xl);
    background: var(--anare-surface, #fff);
    border: 1px solid var(--anare-border, #e9ecef);
    border-left: 4px solid var(--anare-warning, #f59e0b);
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.08);
    transition: box-shadow var(--anare-transition);
}

.anare-admin-focus[data-empty="1"] {
    border-left-color: var(--anare-success, #22c55e);
}

.anare-admin-focus:hover {
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.12);
}

@media (max-width: 768px) {
    .anare-admin-focus {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--anare-space-3);
    }
}

.anare-admin-focus-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-lg);
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    font-size: 1.5rem;
}

.anare-admin-focus[data-empty="1"] .anare-admin-focus-icon {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

@media (max-width: 768px) {
    .anare-admin-focus-icon {
        margin: 0 auto;
    }
}

.anare-admin-focus-eyebrow {
    color: var(--anare-text-muted, #495057);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.anare-admin-focus-headline {
    display: flex;
    align-items: baseline;
    gap: var(--anare-space-2);
    flex-wrap: wrap;
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .anare-admin-focus-headline {
        justify-content: center;
    }
}

.anare-admin-focus-count {
    color: var(--anare-text, #1a2027);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.anare-admin-focus-label {
    color: var(--anare-text, #1a2027);
    font-size: 1.05rem;
    font-weight: 600;
}

.anare-admin-focus-sub {
    margin: 0;
    color: var(--anare-text-muted, #495057);
    font-size: 0.875rem;
    line-height: 1.4;
}

.anare-admin-focus-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--anare-radius-md);
    background: var(--anare-primary, #001A6E);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--anare-transition), transform var(--anare-transition), box-shadow var(--anare-transition);
    flex-shrink: 0;
}

.anare-admin-focus-cta:hover {
    background: var(--anare-primary-hover, #0a2e91);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -6px rgba(0, 26, 110, 0.45);
}

.anare-admin-focus-cta--ghost {
    background: transparent;
    color: var(--anare-text-muted);
    border: 1px solid var(--anare-border-strong, #dee2e6);
}

.anare-admin-focus-cta--ghost:hover {
    background: var(--anare-surface-hover, #f6f8fa);
    color: var(--anare-text);
}


/* ============== STATS AGRÉMENT ============== */
.anare-admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--anare-space-3);
}

.anare-admin-stat {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4);
    border-radius: var(--anare-radius-lg);
    background: var(--anare-surface, #fff);
    border: 1px solid var(--anare-border, #e9ecef);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
}

.anare-admin-stat:hover {
    border-color: var(--stat-tone, var(--anare-primary));
    box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.anare-admin-stat[data-tone="info"]    { --stat-tone: #0891b2; --stat-bg: rgba(8, 145, 178, 0.12); --stat-fg: #0e7490; }
.anare-admin-stat[data-tone="success"] { --stat-tone: #22c55e; --stat-bg: rgba(34, 197, 94, 0.12); --stat-fg: #15803d; }
.anare-admin-stat[data-tone="danger"]  { --stat-tone: #dc2626; --stat-bg: rgba(220, 38, 38, 0.12); --stat-fg: #b91c1c; }

.anare-admin-stat-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: var(--stat-bg, rgba(0,0,0,0.06));
    color: var(--stat-fg, var(--anare-text-muted));
    font-size: 1.2rem;
}

.anare-admin-stat-body { flex: 1; min-width: 0; }

.anare-admin-stat-label {
    color: var(--anare-text-muted, #495057);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

.anare-admin-stat-value {
    color: var(--anare-text, #1a2027);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}

.anare-admin-stat-hint {
    color: var(--anare-text-subtle, #6c757d);
    font-size: 0.75rem;
    line-height: 1.3;
}


/* ============== GRID 2 colonnes (Activité + Raccourcis) ============== */
.anare-admin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--anare-space-4);
}

@media (min-width: 1100px) {
    .anare-admin-grid {
        grid-template-columns: 1.5fr 1fr;
    }
}

.anare-admin-card {
    display: flex;
    flex-direction: column;
    background: var(--anare-surface, #fff);
    border: 1px solid var(--anare-border, #e9ecef);
    border-radius: var(--anare-radius-lg);
    overflow: hidden;
}

.anare-admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4) var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border, #e9ecef);
}

.anare-admin-card-header-meta {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    min-width: 0;
}

.anare-admin-card-header-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: linear-gradient(135deg,
        rgba(0, 26, 110, 0.10),
        rgba(46, 125, 50, 0.04));
    color: var(--anare-primary, #001A6E);
    font-size: 1rem;
}

.anare-admin-card-title {
    margin: 0;
    color: var(--anare-text, #1a2027);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.anare-admin-card-subtitle {
    margin: 2px 0 0;
    color: var(--anare-text-subtle, #6c757d);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.anare-admin-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--anare-primary, #001A6E);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: color var(--anare-transition), gap var(--anare-transition);
}

.anare-admin-card-link:hover {
    color: var(--anare-primary-hover);
    text-decoration: none;
    gap: 8px;
}

.anare-admin-card-link i { font-size: 0.7rem; }

.anare-admin-card-body { padding: 0; }


/* ============== Activité récente (liste verticale) ============== */
.anare-admin-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.anare-admin-activity-row {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3) var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border, #e9ecef);
    color: inherit;
    text-decoration: none;
    transition: background var(--anare-transition);
}

.anare-admin-activity-list li:last-child .anare-admin-activity-row { border-bottom: 0; }

.anare-admin-activity-row:hover {
    background: var(--anare-surface-alt, #f8f9fa);
    color: inherit;
    text-decoration: none;
}

.anare-admin-activity-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--anare-text-subtle, #6c757d);
}

.anare-admin-activity-dot-soumis        { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.anare-admin-activity-dot-en_validation { background: #0891b2; box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18); }
.anare-admin-activity-dot-valide        { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.anare-admin-activity-dot-rejete        { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }

.anare-admin-activity-main { flex: 1; min-width: 0; }

.anare-admin-activity-name {
    display: flex;
    align-items: baseline;
    gap: var(--anare-space-2);
    overflow: hidden;
    margin-bottom: 2px;
}

.anare-admin-activity-ref {
    color: var(--anare-text, #1a2027);
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.anare-admin-activity-actor {
    color: var(--anare-text-muted, #495057);
    font-size: 0.8125rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anare-admin-activity-meta {
    display: flex;
    align-items: center;
    gap: var(--anare-space-1);
    color: var(--anare-text-subtle, #6c757d);
    font-size: 0.75rem;
}

.anare-admin-activity-state {
    padding: 1px 8px;
    border-radius: var(--anare-radius-pill);
    background: var(--anare-surface-alt, #f8f9fa);
    color: var(--anare-text-muted, #495057);
    font-weight: 600;
}

.anare-admin-activity-state-soumis        { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.anare-admin-activity-state-en_validation { background: rgba(8, 145, 178, 0.12);  color: #0e7490; }
.anare-admin-activity-state-valide        { background: rgba(34, 197, 94, 0.12);  color: #15803d; }
.anare-admin-activity-state-rejete        { background: rgba(220, 38, 38, 0.12);  color: #b91c1c; }

.anare-admin-activity-sep { opacity: 0.5; }

.anare-admin-activity-chevron {
    flex-shrink: 0;
    color: var(--anare-text-subtle, #6c757d);
    font-size: 0.7rem;
    opacity: 0.5;
    transition: transform var(--anare-transition), opacity var(--anare-transition);
}

.anare-admin-activity-row:hover .anare-admin-activity-chevron {
    opacity: 1;
    transform: translateX(2px);
}

.anare-admin-empty {
    padding: var(--anare-space-6) var(--anare-space-4);
    text-align: center;
    color: var(--anare-text-subtle, #6c757d);
}

.anare-admin-empty i {
    display: block;
    font-size: 2.2rem;
    margin-bottom: var(--anare-space-2);
    opacity: 0.35;
}

.anare-admin-empty p {
    margin: 0;
    font-size: 0.875rem;
}


/* ============== Raccourcis (liste verticale, icônes colorées) ============== */
.anare-admin-shortcut-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.anare-admin-shortcut-row {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3) var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border, #e9ecef);
    color: inherit;
    text-decoration: none;
    transition: background var(--anare-transition);
}

.anare-admin-shortcut-list li:last-child .anare-admin-shortcut-row { border-bottom: 0; }

.anare-admin-shortcut-row:hover {
    background: var(--anare-surface-alt, #f8f9fa);
    text-decoration: none;
    color: inherit;
}

.anare-admin-shortcut-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    font-size: 1rem;
}

.anare-admin-shortcut-icon--purple { background: rgba(124, 58, 237, 0.12); color: #6d28d9; }
.anare-admin-shortcut-icon--blue   { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.anare-admin-shortcut-icon--teal   { background: rgba(8, 145, 178, 0.12); color: #0e7490; }
.anare-admin-shortcut-icon--orange { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.anare-admin-shortcut-icon--gray   { background: rgba(100, 116, 139, 0.12); color: #475569; }

.anare-admin-shortcut-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.anare-admin-shortcut-label {
    color: var(--anare-text, #1a2027);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

.anare-admin-shortcut-hint {
    color: var(--anare-text-subtle, #6c757d);
    font-size: 0.75rem;
    line-height: 1.3;
}

.anare-admin-shortcut-arrow {
    flex-shrink: 0;
    color: var(--anare-text-subtle, #6c757d);
    font-size: 0.7rem;
    opacity: 0.4;
    transition: transform var(--anare-transition), opacity var(--anare-transition);
}

.anare-admin-shortcut-row:hover .anare-admin-shortcut-arrow {
    opacity: 1;
    transform: translateX(2px);
}


/* ============================================================================
   ADMIN SCREENS — pages /my/admin/*
   ============================================================================
   Layout commun aux écrans admin (liste demandes, détail demande, etc.).
   Réutilise les tokens anare-* du portail pour rester cohérent.
   ============================================================================ */

.anare-admin-screen {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-5);
}

/* ============== Page header (titre + sous-titre + icône halo) ============== */
.anare-admin-page-header {
    display: flex;
    align-items: center;
    gap: var(--anare-space-4);
    padding: var(--anare-space-2) 0;
}

.anare-admin-page-header-meta {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
}

.anare-admin-page-header-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-lg);
    background: linear-gradient(135deg,
        rgba(0, 26, 110, 0.12),
        rgba(46, 125, 50, 0.04));
    color: var(--anare-primary);
    font-size: 1.5rem;
    box-shadow: inset 0 0 0 1px rgba(0, 26, 110, 0.18);
}

.anare-admin-page-title {
    margin: 0;
    color: var(--anare-text);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.anare-admin-page-subtitle {
    margin: 4px 0 0;
    color: var(--anare-text-muted);
    font-size: 0.95rem;
    line-height: 1.4;
}


/* ============== Tabs (filtre par état) ============== */
.anare-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--anare-space-1);
    padding: 4px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    width: fit-content;
}

.anare-admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--anare-radius-md);
    color: var(--anare-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--anare-transition), color var(--anare-transition);
}

.anare-admin-tab:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
    text-decoration: none;
}

.anare-admin-tab.is-active {
    background: var(--anare-text);
    color: #fff;
}

.anare-admin-tab.is-active:hover {
    color: #fff;
}

.anare-admin-tab i {
    font-size: 0.85rem;
    opacity: 0.8;
}

.anare-admin-tab.is-active i { opacity: 1; }

.anare-admin-tab-count {
    padding: 1px 8px;
    border-radius: var(--anare-radius-pill);
    background: var(--anare-surface-alt);
    color: var(--anare-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.anare-admin-tab.is-active .anare-admin-tab-count {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.anare-admin-tab[data-tone="warning"].is-active { background: #b45309; }
.anare-admin-tab[data-tone="info"].is-active    { background: #0e7490; }
.anare-admin-tab[data-tone="success"].is-active { background: #15803d; }
.anare-admin-tab[data-tone="danger"].is-active  { background: #b91c1c; }


/* ============== Toolbar (search + meta) ============== */
.anare-admin-toolbar {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    flex-wrap: wrap;
}

.anare-admin-search-form { flex: 1; min-width: 240px; }

.anare-admin-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--anare-surface-alt);
    color: var(--anare-text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    transition: background var(--anare-transition), color var(--anare-transition);
}

.anare-admin-search-clear:hover {
    background: var(--anare-text-muted);
    color: #fff;
    text-decoration: none;
}

.anare-admin-toolbar-meta {
    color: var(--anare-text-subtle);
    font-size: 0.875rem;
    margin-left: auto;
}

.anare-admin-toolbar-count strong {
    color: var(--anare-text);
    font-weight: 700;
}


/* ============== Liste de demandes (rows cliquables) ============== */
.anare-admin-list {
    display: flex;
    flex-direction: column;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    overflow: hidden;
}

.anare-admin-list-row {
    display: flex;
    align-items: center;
    gap: var(--anare-space-4);
    padding: var(--anare-space-3) var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border);
    color: inherit;
    text-decoration: none;
    transition: background var(--anare-transition);
}

.anare-admin-list-row:last-child { border-bottom: 0; }

.anare-admin-list-row:hover {
    background: var(--anare-surface-alt);
    color: inherit;
    text-decoration: none;
}

.anare-admin-list-row-main { flex: 1; min-width: 0; }

.anare-admin-list-row-name {
    display: flex;
    align-items: baseline;
    gap: var(--anare-space-2);
    margin-bottom: 4px;
}

.anare-admin-list-row-ref {
    color: var(--anare-text);
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
}

.anare-admin-list-row-actor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--anare-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anare-admin-list-row-actor i { opacity: 0.6; font-size: 0.75rem; }

.anare-admin-list-row-meta {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    color: var(--anare-text-subtle);
    font-size: 0.8125rem;
    flex-wrap: wrap;
}

.anare-admin-list-row-tag,
.anare-admin-list-row-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.anare-admin-list-row-tag i,
.anare-admin-list-row-date i { opacity: 0.6; font-size: 0.75rem; }

.anare-admin-list-row-status { flex-shrink: 0; }

.anare-admin-list-row-arrow {
    flex-shrink: 0;
    color: var(--anare-text-subtle);
    font-size: 0.75rem;
    opacity: 0.4;
    transition: transform var(--anare-transition), opacity var(--anare-transition);
}

.anare-admin-list-row:hover .anare-admin-list-row-arrow {
    opacity: 1;
    transform: translateX(2px);
}


/* ============== Pills d'état admin (réutilisables sur liste + détail) ============== */
.anare-admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--anare-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    white-space: nowrap;
}

.anare-admin-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.anare-admin-pill-brouillon       { background: rgba(100, 116, 139, 0.14); color: #475569; }
.anare-admin-pill-soumis          { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.anare-admin-pill-en_validation   { background: rgba(8, 145, 178, 0.14);  color: #0e7490; }
.anare-admin-pill-valide          { background: rgba(34, 197, 94, 0.14);  color: #15803d; }
.anare-admin-pill-rejete          { background: rgba(220, 38, 38, 0.14);  color: #b91c1c; }
.anare-admin-pill-expire          { background: rgba(100, 116, 139, 0.14); color: #475569; }
.anare-admin-pill-suspendu        { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.anare-admin-pill-renouvele       { background: rgba(34, 197, 94, 0.14);  color: #15803d; }


/* ============== Pagination ============== */
.anare-admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3) 0;
}

.anare-admin-pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--anare-radius-md);
    border: 1px solid var(--anare-border-strong);
    background: var(--anare-surface);
    color: var(--anare-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--anare-transition), border-color var(--anare-transition);
}

.anare-admin-pagination-btn:hover {
    background: var(--anare-surface-alt);
    border-color: var(--anare-text-muted);
    text-decoration: none;
    color: var(--anare-text);
}

.anare-admin-pagination-info {
    color: var(--anare-text-muted);
    font-size: 0.875rem;
}

.anare-admin-pagination-info strong {
    color: var(--anare-text);
    font-weight: 700;
}


/* ============== Empty state ============== */
.anare-admin-empty-state {
    padding: var(--anare-space-7) var(--anare-space-4);
    text-align: center;
    background: var(--anare-surface);
    border: 1px dashed var(--anare-border-strong);
    border-radius: var(--anare-radius-lg);
    color: var(--anare-text-muted);
}

.anare-admin-empty-state i {
    display: block;
    font-size: 3rem;
    margin-bottom: var(--anare-space-3);
    opacity: 0.3;
}

.anare-admin-empty-state h3 {
    margin: 0 0 var(--anare-space-2);
    color: var(--anare-text);
    font-size: 1.1rem;
    font-weight: 700;
}

.anare-admin-empty-state p {
    margin: 0;
    font-size: 0.9rem;
}

.anare-admin-empty--small {
    padding: var(--anare-space-4) var(--anare-space-3);
    text-align: center;
    color: var(--anare-text-subtle);
    font-size: 0.875rem;
}


/* ============================================================================
   ÉCRAN DÉTAIL DEMANDE
   ============================================================================ */

.anare-admin-detail-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-3);
}

.anare-admin-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--anare-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--anare-transition), gap var(--anare-transition);
}

.anare-admin-detail-back:hover {
    color: var(--anare-primary);
    text-decoration: none;
    gap: 12px;
}

.anare-admin-detail-nav-arrows {
    display: flex;
    gap: 4px;
}

.anare-admin-detail-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--anare-radius-md);
    border: 1px solid var(--anare-border-strong);
    background: var(--anare-surface);
    color: var(--anare-text-muted);
    text-decoration: none;
    transition: background var(--anare-transition), border-color var(--anare-transition);
}

.anare-admin-detail-arrow:hover {
    background: var(--anare-surface-alt);
    border-color: var(--anare-text-muted);
    color: var(--anare-text);
    text-decoration: none;
}


/* Banner success/danger */
.anare-admin-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3) var(--anare-space-4);
    border-radius: var(--anare-radius-md);
    border-left: 4px solid;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
}

.anare-admin-banner i {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.anare-admin-banner div { display: flex; flex-direction: column; gap: 2px; }

.anare-admin-banner strong {
    color: var(--anare-text);
    font-weight: 700;
    font-size: 0.95rem;
}

.anare-admin-banner span {
    color: var(--anare-text-muted);
    font-size: 0.875rem;
}

.anare-admin-banner-success {
    border-left-color: #22c55e;
    background: rgba(34, 197, 94, 0.04);
}
.anare-admin-banner-success i { color: #15803d; }

.anare-admin-banner-danger {
    border-left-color: #dc2626;
    background: rgba(220, 38, 38, 0.04);
}
.anare-admin-banner-danger i { color: #b91c1c; }


/* Detail header (titre + actions) */
.anare-admin-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--anare-space-4);
    padding: var(--anare-space-5);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    flex-wrap: wrap;
}

.anare-admin-detail-header-meta {
    display: flex;
    gap: var(--anare-space-3);
    align-items: center;
    flex: 1;
    min-width: 0;
}

.anare-admin-detail-header-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-lg);
    background: linear-gradient(135deg,
        rgba(0, 26, 110, 0.12),
        rgba(46, 125, 50, 0.04));
    color: var(--anare-primary);
    font-size: 1.6rem;
    box-shadow: inset 0 0 0 1px rgba(0, 26, 110, 0.18);
}

.anare-admin-detail-eyebrow {
    display: block;
    color: var(--anare-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

.anare-admin-detail-title {
    margin: 0 0 var(--anare-space-2);
    color: var(--anare-text);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.anare-admin-detail-status {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    flex-wrap: wrap;
}

.anare-admin-detail-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--anare-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.anare-admin-detail-tag i { opacity: 0.7; font-size: 0.75rem; }


/* Action buttons (workflow) */
.anare-admin-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.anare-admin-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--anare-radius-md);
    border: 1px solid transparent;
    background: var(--anare-surface);
    color: var(--anare-text);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--anare-transition);
}

.anare-admin-action-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.anare-admin-action-btn--primary {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: #fff;
}

.anare-admin-action-btn--primary:hover {
    background: var(--anare-primary-hover);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(0, 26, 110, 0.45);
}

.anare-admin-action-btn--success {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.anare-admin-action-btn--success:hover {
    background: #15803d;
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(34, 197, 94, 0.45);
}

.anare-admin-action-btn--danger {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.30);
    color: #b91c1c;
}

.anare-admin-action-btn--danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.anare-admin-action-btn--ghost {
    background: var(--anare-surface);
    border-color: var(--anare-border-strong);
    color: var(--anare-text-muted);
}

.anare-admin-action-btn--ghost:hover {
    background: var(--anare-surface-alt);
    border-color: var(--anare-text-muted);
    color: var(--anare-text);
}


/* Grid détail (info + aside) */
.anare-admin-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--anare-space-4);
}

@media (min-width: 1100px) {
    .anare-admin-detail-grid {
        grid-template-columns: 1.6fr 1fr;
    }
}

.anare-admin-detail-aside {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-4);
}

.anare-admin-card-body--padded {
    padding: var(--anare-space-4) var(--anare-space-5);
}

/* Info grid (clé/valeur) */
.anare-admin-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--anare-space-4);
    margin: 0;
}

.anare-admin-info-grid > div {
    min-width: 0;
}

.anare-admin-info-grid dt {
    color: var(--anare-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.anare-admin-info-grid dd {
    margin: 0;
    color: var(--anare-text);
    font-size: 0.95rem;
    font-weight: 500;
    word-break: break-word;
}

.anare-admin-info-notes {
    margin-top: var(--anare-space-5);
    padding-top: var(--anare-space-4);
    border-top: 1px solid var(--anare-border);
}

.anare-admin-info-notes h3 {
    margin: 0 0 var(--anare-space-2);
    color: var(--anare-text);
    font-size: 0.95rem;
    font-weight: 700;
}

.anare-admin-info-notes-body {
    color: var(--anare-text);
    font-size: 0.9rem;
    line-height: 1.5;
}


/* Acteur block (aside) */
.anare-admin-actor-block {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-2);
}

.anare-admin-actor-name {
    color: var(--anare-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.anare-admin-actor-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--anare-text-muted);
    font-size: 0.875rem;
}

.anare-admin-actor-meta i {
    width: 16px;
    color: var(--anare-text-subtle);
    font-size: 0.85rem;
}

.anare-admin-actor-meta a {
    color: var(--anare-primary);
    text-decoration: none;
}

.anare-admin-actor-meta a:hover {
    text-decoration: underline;
}


/* Documents (aside) */
.anare-admin-card-count {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--anare-radius-pill);
    background: var(--anare-surface-alt);
    color: var(--anare-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
}

.anare-admin-doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.anare-admin-doc-row {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: var(--anare-space-3) var(--anare-space-5);
    border-bottom: 1px solid var(--anare-border);
    color: inherit;
    text-decoration: none;
    transition: background var(--anare-transition);
}

.anare-admin-doc-list li:last-child .anare-admin-doc-row { border-bottom: 0; }

.anare-admin-doc-row:hover {
    background: var(--anare-surface-alt);
    text-decoration: none;
    color: inherit;
}

.anare-admin-doc-row > i {
    color: var(--anare-text-muted);
    font-size: 1rem;
    flex-shrink: 0;
}

.anare-admin-doc-name {
    flex: 1;
    color: var(--anare-text);
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anare-admin-doc-arrow {
    color: var(--anare-text-subtle);
    font-size: 0.75rem;
    opacity: 0.5;
    transition: opacity var(--anare-transition);
}

.anare-admin-doc-row:hover .anare-admin-doc-arrow { opacity: 1; }


/* ============================================================================
   ADMIN — Stats row tonifiée (sur la liste demandes)
   ============================================================================
   Réutilise .anare-stat-card existant mais avec data-tone sémantique
   (warning, info, success, danger) au lieu de data-anare-quickfilter, et un
   état .is-active distinct pour montrer le filtre courant.
   ============================================================================ */

.anare-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--anare-space-3);
}

.anare-stats-row-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
    .anare-stats-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .anare-stats-row-4 { grid-template-columns: 1fr; }
}

.anare-stat-card[data-tone="warning"] { --stat-color: #b45309; --stat-bg: rgba(245, 158, 11, 0.10); }
.anare-stat-card[data-tone="info"]    { --stat-color: #0e7490; --stat-bg: rgba(8, 145, 178, 0.10); }
.anare-stat-card[data-tone="success"] { --stat-color: #15803d; --stat-bg: rgba(34, 197, 94, 0.10); }
.anare-stat-card[data-tone="danger"]  { --stat-color: #b91c1c; --stat-bg: rgba(220, 38, 38, 0.10); }

.anare-stat-card.is-active {
    border-color: var(--stat-color, var(--anare-primary));
    box-shadow: inset 0 0 0 1px var(--stat-color, var(--anare-primary)),
                var(--anare-shadow-md);
}

.anare-stat-card.is-active::after {
    transform: scaleX(1);
    opacity: 1;
}


/* ============================================================================
   ADMIN — Liste : lien acteur dans cellule de table
   ============================================================================ */

.anare-list-actor-link {
    color: var(--anare-text-muted);
    text-decoration: none;
    transition: color var(--anare-transition);
}

.anare-list-actor-link:hover {
    color: var(--anare-primary);
    text-decoration: none;
}


/* ============================================================================
   ADMIN — List pills en <a> (au lieu de <button>)
   ============================================================================ */

a.anare-list-pill,
a.anare-list-pill:hover,
a.anare-list-pill:focus,
a.anare-list-pill.active {
    text-decoration: none;
}

a.anare-list-pill {
    color: var(--anare-text-muted);
}

a.anare-list-pill:hover {
    color: var(--anare-text);
}

a.anare-list-pill.active {
    color: var(--anare-primary);
}


/* ============================================================================
   ADMIN — Empty premium text helper
   ============================================================================ */

.anare-empty-text {
    margin: var(--anare-space-2) 0 0;
    color: var(--anare-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 40ch;
    text-align: center;
}


/* ============================================================================
   ADMIN — Acteurs GPL : chips de rôles dans la table
   ============================================================================ */

.anare-list-roles {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.anare-list-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--anare-radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.anare-list-role-chip i {
    font-size: 0.7rem;
    opacity: 0.85;
}

.anare-list-role-chip-more {
    background: var(--anare-surface-alt);
    color: var(--anare-text-muted);
    cursor: help;
}


/* Badge externe dans la sidebar (pour "Inventaire" qui ouvre Odoo) */
.anare-nav-badge-external {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--anare-surface-alt);
    color: var(--anare-text-subtle);
    border-radius: var(--anare-radius-sm);
    padding: 2px 6px;
    font-size: 0.7rem;
}

.anare-nav-badge-external i { opacity: 0.7; }


/* Detail main column (acteur detail) */
.anare-admin-detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-4);
}


/* ============================================================================
   SIG (CARTOGRAPHIE) — REFONTE UX
   ============================================================================
   Layout en hero : la carte prend toute la largeur et ~70vh de haut.
   Filtres essentiels en barre compacte au-dessus, filtres avancés dans
   un drawer expandable. Stats KPI sous la carte.
   ============================================================================ */

.anare-sig-page {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-4);
}

/* ============== Header ============== */
.anare-sig-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-4);
    flex-wrap: wrap;
}

.anare-sig-header-meta {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
}

.anare-sig-header-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-lg);
    background: linear-gradient(135deg,
        rgba(0, 26, 110, 0.12),
        rgba(46, 125, 50, 0.04));
    color: var(--anare-primary);
    font-size: 1.5rem;
    box-shadow: inset 0 0 0 1px rgba(0, 26, 110, 0.18);
}

.anare-sig-title {
    margin: 0;
    color: var(--anare-text);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.anare-sig-subtitle {
    margin: 4px 0 0;
    color: var(--anare-text-muted);
    font-size: 0.95rem;
}

/* Toggle Infra / Acteurs (segment control) */
.anare-sig-view-toggle {
    display: inline-flex;
    padding: 4px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-pill);
    box-shadow: var(--anare-shadow-sm);
}

.anare-sig-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--anare-radius-pill);
    background: transparent;
    color: var(--anare-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--anare-transition), color var(--anare-transition);
}

.anare-sig-view-btn:hover {
    color: var(--anare-text);
}

.anare-sig-view-btn.is-active {
    background: var(--anare-primary);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(0, 26, 110, 0.40);
}

.anare-sig-view-btn i { font-size: 0.85rem; }


/* ============== Map card (hero) ============== */
.anare-sig-map-card {
    display: flex;
    flex-direction: column;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    box-shadow: var(--anare-shadow-sm);
    overflow: hidden;
}


/* ============== Toolbar : filtres essentiels ============== */
.anare-sig-toolbar {
    display: flex;
    align-items: flex-end;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3) var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    background: var(--anare-surface);
    flex-wrap: wrap;
}

.anare-sig-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 140px;
}

.anare-sig-filter-group--wide {
    flex: 2;
    min-width: 220px;
}

.anare-sig-filter-label {
    color: var(--anare-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.anare-sig-filter-label i { opacity: 0.7; font-size: 0.8em; }

.anare-sig-select {
    height: 36px;
    padding: 0 var(--anare-space-2);
    border: 1px solid var(--anare-border-strong);
    border-radius: var(--anare-radius-md);
    background: var(--anare-surface);
    color: var(--anare-text);
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition);
    width: 100%;
    cursor: pointer;
}

.anare-sig-select:focus,
.anare-sig-select:focus-within {
    outline: none;
    border-color: var(--anare-primary);
    box-shadow: 0 0 0 3px rgba(0, 26, 110, 0.12);
}

select.anare-sig-select[multiple] {
    height: 36px;
    overflow: hidden;
}

.anare-sig-toolbar-actions {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.anare-sig-btn {
    height: 36px;
    padding: 0 var(--anare-space-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--anare-radius-md);
    border: 1px solid transparent;
    background: var(--anare-surface);
    color: var(--anare-text);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--anare-transition), border-color var(--anare-transition), color var(--anare-transition), transform var(--anare-transition);
}

.anare-sig-btn:hover { transform: translateY(-1px); }

.anare-sig-btn--primary {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: #fff;
}

.anare-sig-btn--primary:hover {
    background: var(--anare-primary-hover);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(0, 26, 110, 0.40);
}

.anare-sig-btn--ghost {
    background: var(--anare-surface);
    border-color: var(--anare-border-strong);
    color: var(--anare-text-muted);
}

.anare-sig-btn--ghost:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
}

.anare-sig-btn--ghost[aria-expanded="true"] {
    background: var(--anare-primary-light);
    border-color: var(--anare-primary);
    color: var(--anare-primary);
}

.anare-sig-btn--icon {
    width: 36px;
    padding: 0;
    justify-content: center;
    background: var(--anare-surface);
    border-color: var(--anare-border-strong);
    color: var(--anare-text-muted);
}

.anare-sig-btn--icon:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
}


/* ============== Multiselect (acteurs) ============== */
.anare-sig-multiselect {
    position: relative;
}

.anare-sig-multiselect .sig-multiselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.anare-sig-multiselect .sig-multiselect-trigger > i {
    color: var(--anare-text-subtle);
    font-size: 0.75rem;
}

.anare-sig-multiselect .sig-multiselect-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    color: var(--anare-text);
    font-size: 0.875rem;
}

.anare-sig-multiselect .sig-multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--anare-z-popover, 1080);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    box-shadow: var(--anare-shadow-lg);
    display: none;
    overflow: hidden;
}

.anare-sig-multiselect.is-open .sig-multiselect-dropdown,
.anare-sig-multiselect .sig-multiselect-dropdown.show {
    display: block;
}

.anare-sig-multiselect-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--anare-space-2);
    border-bottom: 1px solid var(--anare-border);
}

.anare-sig-multiselect-search i {
    color: var(--anare-text-subtle);
    font-size: 0.75rem;
}

.anare-sig-multiselect-search input {
    flex: 1;
    border: 0;
    outline: none;
    font-size: 0.875rem;
    background: transparent;
    color: var(--anare-text);
}

.anare-sig-multiselect .sig-multiselect-options {
    max-height: 260px;
    overflow-y: auto;
}

.anare-sig-multiselect .sig-multiselect-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px var(--anare-space-3);
    cursor: pointer;
    margin: 0;
    font-size: 0.875rem;
    color: var(--anare-text);
    transition: background var(--anare-transition);
}

.anare-sig-multiselect .sig-multiselect-option:hover {
    background: var(--anare-surface-alt);
}

.anare-sig-multiselect .sig-multiselect-option input {
    margin: 0;
}

.anare-sig-multiselect-label-bold { font-weight: 700; }


/* ============== Drawer filtres avancés ============== */
.anare-sig-advanced-panel {
    display: flex;
    align-items: flex-end;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3) var(--anare-space-4);
    background: var(--anare-surface-alt);
    border-bottom: 1px solid var(--anare-border);
    flex-wrap: wrap;
    animation: anare-sig-slide var(--anare-duration-2) var(--anare-easing-soft);
}

.anare-sig-advanced-panel[hidden] { display: none; }

@keyframes anare-sig-slide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============== Map wrap (carte + overlay légende) ============== */
.anare-sig-map-wrap {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
    background: var(--anare-surface-alt);
}

.anare-sig-map {
    width: 100%;
    height: 100%;
}

.anare-sig-map-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: var(--anare-text-muted);
    font-size: 0.875rem;
}


/* ============== Légende overlay (bas-gauche de la carte) ============== */
.anare-sig-legend {
    position: absolute;
    bottom: var(--anare-space-3);
    left: var(--anare-space-3);
    z-index: 500; /* au-dessus de Leaflet */
    width: 240px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    box-shadow: var(--anare-shadow-lg);
    overflow: hidden;
}

.anare-sig-legend-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px var(--anare-space-3);
    background: var(--anare-surface-alt);
    border-bottom: 1px solid var(--anare-border);
    color: var(--anare-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.anare-sig-legend-header i { font-size: 0.85rem; opacity: 0.7; }

.anare-sig-legend-body {
    padding: var(--anare-space-2) var(--anare-space-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.anare-sig-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--anare-text);
    font-size: 0.75rem;
}

.anare-sig-legend-dot {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.anare-sig-legend-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px var(--anare-space-3);
    border-top: 1px solid var(--anare-border);
    background: var(--anare-surface-alt);
    font-size: 0.7rem;
    color: var(--anare-text-muted);
    flex-wrap: wrap;
}

.anare-sig-legend-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.anare-sig-legend-status i { font-size: 0.5rem; }

@media (max-width: 768px) {
    .anare-sig-legend {
        position: relative;
        bottom: auto;
        left: auto;
        width: auto;
        margin: var(--anare-space-3);
    }
    .anare-sig-map-wrap { height: 50vh; min-height: 360px; }
}


/* ============== Stats (KPI compacts sous la carte) ============== */
.anare-sig-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--anare-space-3);
}

.anare-sig-stat {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3) var(--anare-space-4);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    transition: border-color var(--anare-transition), box-shadow var(--anare-transition), transform var(--anare-transition);
}

.anare-sig-stat:hover {
    border-color: var(--stat-tone, var(--anare-primary));
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.anare-sig-stat[data-tone="primary"] { --stat-tone: #001A6E; --stat-bg: rgba(0, 26, 110, 0.10); --stat-fg: #001A6E; }
.anare-sig-stat[data-tone="success"] { --stat-tone: #15803d; --stat-bg: rgba(34, 197, 94, 0.10); --stat-fg: #15803d; }
.anare-sig-stat[data-tone="warning"] { --stat-tone: #b45309; --stat-bg: rgba(245, 158, 11, 0.10); --stat-fg: #b45309; }
.anare-sig-stat[data-tone="danger"]  { --stat-tone: #b91c1c; --stat-bg: rgba(220, 38, 38, 0.10); --stat-fg: #b91c1c; }
.anare-sig-stat[data-tone="info"]    { --stat-tone: #0e7490; --stat-bg: rgba(8, 145, 178, 0.10); --stat-fg: #0e7490; }

.anare-sig-stat-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: var(--stat-bg, var(--anare-surface-alt));
    color: var(--stat-fg, var(--anare-text-muted));
    font-size: 1rem;
}

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

.anare-sig-stat-label {
    color: var(--anare-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.anare-sig-stat-value {
    color: var(--anare-text);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}


/* ============== Card stock par rôle (panneau optionnel) ============== */
.anare-sig-card {
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    overflow: hidden;
}

.anare-sig-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--anare-space-3) var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    color: var(--anare-text);
    font-size: 0.875rem;
    font-weight: 700;
}

.anare-sig-card-header i {
    color: var(--anare-text-muted);
    font-size: 0.95rem;
}

.anare-sig-card-body {
    padding: var(--anare-space-3) var(--anare-space-4);
}


/* ============================================================================
   ADMIN DASHBOARD V3 — Coup de jeunesse
   ============================================================================
   Hero immersif avec ornements flottants + focus action inline.
   Tiles bento modernes pour les KPI système (gradients, halo, hover).
   ============================================================================ */

/* ============== HERO V3 ============== */
.anare-admin-hero--v3 {
    position: relative;
    overflow: hidden;
    padding: var(--anare-space-7) var(--anare-space-6);
    border-radius: var(--anare-radius-xl);
    background:
        radial-gradient(circle at 18% 22%, rgba(102, 187, 106, 0.45) 0%, transparent 42%),
        radial-gradient(circle at 88% 78%, rgba(13, 58, 16, 0.55) 0%, transparent 50%),
        linear-gradient(135deg, #0f3a14 0%, #001A6E 45%, #0a2e91 100%);
    color: #fff;
    box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
    isolation: isolate;
    animation: anare-hero-rise var(--anare-duration-4) var(--anare-easing-soft);
}

@keyframes anare-hero-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Bandes lumineuses subtiles (effet glass) */
.anare-admin-hero--v3::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 35%),
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.02) 0px,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px,
            transparent 80px
        );
    z-index: -1;
}

/* Orbs décoratives flottantes */
.anare-admin-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.55;
    z-index: -1;
    pointer-events: none;
}

.anare-admin-hero-orb--1 {
    top: -60px; left: -40px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, #66bb6a 0%, transparent 70%);
    animation: anare-orb-float 12s ease-in-out infinite;
}

.anare-admin-hero-orb--2 {
    bottom: -80px; right: 10%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, #0a2e91 0%, transparent 70%);
    animation: anare-orb-float 16s ease-in-out infinite reverse;
}

.anare-admin-hero-orb--3 {
    top: 20%; right: -100px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, #66bb6a 0%, transparent 70%);
    opacity: 0.35;
    animation: anare-orb-float 14s ease-in-out infinite 2s;
}

@keyframes anare-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, -16px) scale(1.06); }
}

/* Layout interne : 2 zones strictes (texte | focus card) */
.anare-admin-hero-content {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--anare-space-5);
    align-items: stretch;
}

@media (min-width: 992px) {
    .anare-admin-hero-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--anare-space-6);
    }
}

.anare-admin-hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-3);
    justify-content: center;
}

/* Eyebrow avec pulse live */
.anare-admin-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--anare-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    backdrop-filter: blur(10px);
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.anare-admin-hero-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #66bb6a;
    box-shadow: 0 0 0 0 rgba(102, 187, 106, 0.8);
    animation: anare-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes anare-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(102, 187, 106, 0.8); }
    70%  { box-shadow: 0 0 0 10px rgba(102, 187, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(102, 187, 106, 0); }
}

/* Titre XXL */
.anare-admin-hero-title {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

.anare-admin-hero-wave {
    display: inline-block;
    margin-left: 8px;
    transform-origin: 70% 70%;
    animation: anare-wave 2.5s ease-in-out infinite;
}

@keyframes anare-wave {
    0%, 50%, 100% { transform: rotate(0deg); }
    10%, 30%      { transform: rotate(14deg); }
    20%           { transform: rotate(-8deg); }
}

.anare-admin-hero-sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.55;
}

/* Focus card inline (glass card dans le hero) */
.anare-admin-hero-focus {
    margin-top: var(--anare-space-4);
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-3) var(--anare-space-4);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--anare-radius-lg);
    backdrop-filter: blur(20px) saturate(150%);
    flex-wrap: wrap;
    transition: background var(--anare-transition);
}

.anare-admin-hero-focus:hover {
    background: rgba(255, 255, 255, 0.14);
}

.anare-admin-hero-focus-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: linear-gradient(135deg, #ffd166, #ff8c42);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 6px 14px -4px rgba(255, 140, 66, 0.55);
}

.anare-admin-hero--v3[data-empty="1"] .anare-admin-hero-focus-icon {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    box-shadow: 0 6px 14px -4px rgba(34, 197, 94, 0.55);
}

.anare-admin-hero-focus-text {
    flex: 1;
    min-width: 0;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9rem;
    line-height: 1.4;
}

.anare-admin-hero-focus-text strong {
    color: #fff;
    font-weight: 700;
}

.anare-admin-hero-focus-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--anare-radius-md);
    background: #fff;
    color: #001A6E;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--anare-transition), box-shadow var(--anare-transition);
    flex-shrink: 0;
}

.anare-admin-hero-focus-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.40);
    color: #001A6E;
    text-decoration: none;
}

.anare-admin-hero-focus-cta--ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.anare-admin-hero-focus-cta--ghost:hover {
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
}

/* Visual SVG droite */
.anare-admin-hero-visual {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1;
    margin: 0 auto;
    animation: anare-spin-slow 60s linear infinite;
}

.anare-admin-hero-visual svg { width: 100%; height: 100%; }

@keyframes anare-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .anare-admin-hero-visual { display: none; }
}


/* ============== TILES SYSTÈME (bento) ============== */
.anare-admin-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--anare-space-3);
}

.anare-admin-tile {
    --tile-tone:    #001A6E;
    --tile-tone-2:  #0a2e91;
    --tile-bg:      rgba(0, 26, 110, 0.06);
    --tile-icon-fg: #fff;
    --tile-shadow:  rgba(0, 26, 110, 0.30);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4) var(--anare-space-5) var(--anare-space-5);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--anare-transition), box-shadow var(--anare-transition), border-color var(--anare-transition);
    animation: anare-tile-rise var(--anare-duration-4) var(--anare-easing-soft) backwards;
}

.anare-admin-tile:nth-child(1) { animation-delay: 0.05s; }
.anare-admin-tile:nth-child(2) { animation-delay: 0.10s; }
.anare-admin-tile:nth-child(3) { animation-delay: 0.15s; }
.anare-admin-tile:nth-child(4) { animation-delay: 0.20s; }

@keyframes anare-tile-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Halo gradient en fond du tile (très subtil) */
.anare-admin-tile::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -30%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: var(--tile-bg);
    z-index: -1;
    transition: transform var(--anare-transition-slow), opacity var(--anare-transition);
}

.anare-admin-tile:hover {
    transform: translateY(-4px);
    border-color: var(--tile-tone);
    box-shadow: 0 16px 30px -14px var(--tile-shadow);
    text-decoration: none;
    color: inherit;
}

.anare-admin-tile:hover::before {
    transform: scale(1.4);
}

/* Variants tone */
.anare-admin-tile[data-tile-tone="violet"] {
    --tile-tone:    #7c3aed;
    --tile-tone-2:  #a78bfa;
    --tile-bg:      rgba(124, 58, 237, 0.10);
    --tile-shadow:  rgba(124, 58, 237, 0.30);
}
.anare-admin-tile[data-tile-tone="blue"] {
    --tile-tone:    #2563eb;
    --tile-tone-2:  #60a5fa;
    --tile-bg:      rgba(37, 99, 235, 0.10);
    --tile-shadow:  rgba(37, 99, 235, 0.30);
}
.anare-admin-tile[data-tile-tone="amber"] {
    --tile-tone:    #d97706;
    --tile-tone-2:  #fbbf24;
    --tile-bg:      rgba(217, 119, 6, 0.10);
    --tile-shadow:  rgba(217, 119, 6, 0.30);
}
.anare-admin-tile[data-tile-tone="teal"] {
    --tile-tone:    #0d9488;
    --tile-tone-2:  #5eead4;
    --tile-bg:      rgba(13, 148, 136, 0.10);
    --tile-shadow:  rgba(13, 148, 136, 0.30);
}

/* Head : icône + flèche */
.anare-admin-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.anare-admin-tile-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: linear-gradient(135deg, var(--tile-tone), var(--tile-tone-2));
    color: var(--tile-icon-fg);
    font-size: 1.1rem;
    box-shadow: 0 8px 16px -8px var(--tile-shadow),
                inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.anare-admin-tile-arrow {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--anare-surface-alt);
    color: var(--anare-text-subtle);
    font-size: 0.7rem;
    transition: background var(--anare-transition), color var(--anare-transition), transform var(--anare-transition);
}

.anare-admin-tile:hover .anare-admin-tile-arrow {
    background: var(--tile-tone);
    color: #fff;
    transform: translate(2px, -2px);
}

/* Valeur XXL */
.anare-admin-tile-value {
    color: var(--anare-text);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    transition: color var(--anare-transition);
}

.anare-admin-tile:hover .anare-admin-tile-value {
    color: var(--tile-tone);
}

/* Meta : label + hint */
.anare-admin-tile-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.anare-admin-tile-label {
    color: var(--anare-text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.anare-admin-tile-hint {
    color: var(--anare-text-subtle);
    font-size: 0.78rem;
    line-height: 1.3;
}


/* Reduced motion : couper les animations infinies */
@media (prefers-reduced-motion: reduce) {
    .anare-admin-hero-orb,
    .anare-admin-hero-pulse,
    .anare-admin-hero-wave,
    .anare-admin-hero-visual {
        animation: none !important;
    }
    .anare-admin-tile { animation: none !important; }
}


/* ============================================================================
   ADMIN DASHBOARD V3.1 — Focus en colonne + Pipeline visuel
   ============================================================================ */

/* ============== HERO : focus card verticale (colonne droite) ============== */
.anare-admin-hero-focus-v {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-2);
    padding: var(--anare-space-5) var(--anare-space-6);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--anare-radius-lg);
    backdrop-filter: blur(20px) saturate(150%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    animation: anare-focus-rise var(--anare-duration-4) var(--anare-easing-soft) 0.15s backwards;
    width: 100%;
    min-height: 100%;
    justify-content: center;
}

@keyframes anare-focus-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Halo coloré en fond (orange si pending, vert si empty) — plus généreux */
.anare-admin-hero-focus-v::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -25%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 66, 0.32) 0%, transparent 65%);
    filter: blur(8px);
    z-index: -1;
}

/* Ring décoratif en bas-droite (occupe l'espace résiduel) */
.anare-admin-hero-focus-v::after {
    content: "";
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.18);
    z-index: -1;
    animation: anare-spin-slow 80s linear infinite;
}

.anare-admin-hero--v3[data-empty="1"] .anare-admin-hero-focus-v::before {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.30) 0%, transparent 65%);
}

.anare-admin-hero-focus-v-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.anare-admin-hero-focus-v-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: linear-gradient(135deg, #ffd166, #ff8c42);
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 6px 14px -4px rgba(255, 140, 66, 0.55);
}

.anare-admin-hero--v3[data-empty="1"] .anare-admin-hero-focus-v-icon {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    box-shadow: 0 6px 14px -4px rgba(34, 197, 94, 0.55);
}

.anare-admin-hero-focus-v-eyebrow {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.anare-admin-hero-focus-v-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

.anare-admin-hero-focus-v-count {
    color: #fff;
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
}

.anare-admin-hero-focus-v-label {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.anare-admin-hero-focus-v-sub {
    margin: var(--anare-space-1) 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.anare-admin-hero-focus-v-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    margin-top: var(--anare-space-3);
    border-radius: var(--anare-radius-md);
    background: #fff;
    color: #001A6E;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--anare-transition), box-shadow var(--anare-transition);
}

.anare-admin-hero-focus-v-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.45);
    color: #001A6E;
    text-decoration: none;
}

.anare-admin-hero-focus-v-cta--ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.anare-admin-hero-focus-v-cta--ghost:hover {
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
}


/* ============== PIPELINE D'INSTRUCTION ============== */
.anare-admin-pipeline {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-4);
    padding: var(--anare-space-5);
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    box-shadow: var(--anare-shadow-sm);
}

.anare-admin-pipeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-4);
    flex-wrap: wrap;
}

.anare-admin-pipeline-meta {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
}

.anare-admin-pipeline-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anare-radius-md);
    background: linear-gradient(135deg,
        rgba(0, 26, 110, 0.14),
        rgba(46, 125, 50, 0.04));
    color: var(--anare-primary);
    font-size: 1.1rem;
    box-shadow: inset 0 0 0 1px rgba(0, 26, 110, 0.18);
}

.anare-admin-pipeline-title {
    margin: 0;
    color: var(--anare-text);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.anare-admin-pipeline-subtitle {
    margin: 2px 0 0;
    color: var(--anare-text-muted);
    font-size: 0.85rem;
}

.anare-admin-pipeline-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.anare-admin-pipeline-total-value {
    color: var(--anare-text);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.anare-admin-pipeline-total-label {
    color: var(--anare-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}


/* Barre segmentée (4 segments cliquables-like) */
.anare-admin-pipeline-bar {
    display: flex;
    width: 100%;
    height: 16px;
    background: var(--anare-surface-alt);
    border-radius: var(--anare-radius-pill);
    overflow: hidden;
    gap: 2px;
}

.anare-admin-pipeline-seg {
    width: var(--seg-pct, 0%);
    transition: width var(--anare-duration-4) var(--anare-easing-soft) 0.2s,
                opacity var(--anare-transition);
    cursor: help;
}

.anare-admin-pipeline-seg[data-tone="warning"] { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.anare-admin-pipeline-seg[data-tone="info"]    { background: linear-gradient(90deg, #0891b2, #06b6d4); }
.anare-admin-pipeline-seg[data-tone="success"] { background: linear-gradient(90deg, #15803d, #22c55e); }
.anare-admin-pipeline-seg[data-tone="danger"]  { background: linear-gradient(90deg, #b91c1c, #ef4444); }

.anare-admin-pipeline-seg:hover { opacity: 0.85; }


/* Légende : 4 items cliquables sous la barre */
.anare-admin-pipeline-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--anare-space-2);
}

.anare-admin-pipeline-item {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    padding: var(--anare-space-2) var(--anare-space-3);
    border-radius: var(--anare-radius-md);
    background: var(--anare-surface-alt);
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--anare-transition), border-color var(--anare-transition), transform var(--anare-transition);
}

.anare-admin-pipeline-item:hover {
    border-color: var(--seg-color, var(--anare-primary));
    background: var(--anare-surface);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}

.anare-admin-pipeline-item[data-tone="warning"] { --seg-color: #b45309; --seg-bg: rgba(245, 158, 11, 0.14); }
.anare-admin-pipeline-item[data-tone="info"]    { --seg-color: #0e7490; --seg-bg: rgba(8, 145, 178, 0.14); }
.anare-admin-pipeline-item[data-tone="success"] { --seg-color: #15803d; --seg-bg: rgba(34, 197, 94, 0.14); }
.anare-admin-pipeline-item[data-tone="danger"]  { --seg-color: #b91c1c; --seg-bg: rgba(220, 38, 38, 0.14); }

.anare-admin-pipeline-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--seg-color);
    box-shadow: 0 0 0 3px var(--seg-bg);
}

.anare-admin-pipeline-item-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.anare-admin-pipeline-item-label {
    color: var(--anare-text);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
}

.anare-admin-pipeline-item-hint {
    color: var(--anare-text-subtle);
    font-size: 0.7rem;
    line-height: 1.3;
}

.anare-admin-pipeline-item-value {
    color: var(--seg-color);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}


/* ============== MISE À JOUR DES CARDS Activité + Raccourcis ============== */

/* Header de card : icône halo plus marquée */
.anare-admin-card {
    transition: box-shadow var(--anare-transition);
}

.anare-admin-card:hover {
    box-shadow: var(--anare-shadow-md);
}

/* Activity row : effet de barre colorée à gauche au hover */
.anare-admin-activity-row {
    position: relative;
}

.anare-admin-activity-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--anare-primary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--anare-transition);
}

.anare-admin-activity-row:hover::before {
    transform: scaleY(1);
}

/* Shortcut row : effet glow au hover */
.anare-admin-shortcut-row {
    position: relative;
    overflow: hidden;
}

.anare-admin-shortcut-row::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 26, 110, 0.04), transparent 60%);
    opacity: 0;
    transition: opacity var(--anare-transition);
    pointer-events: none;
}

.anare-admin-shortcut-row:hover::after {
    opacity: 1;
}

.anare-admin-shortcut-icon {
    transition: transform var(--anare-transition-spring);
}

.anare-admin-shortcut-row:hover .anare-admin-shortcut-icon {
    transform: scale(1.08) rotate(-4deg);
}


/* Reduced motion : freeze pipeline animation */
@media (prefers-reduced-motion: reduce) {
    .anare-admin-pipeline-seg { transition: none; }
    .anare-admin-hero-focus-v { animation: none; }
}

/* ============================================================================
   INVENTAIRES GPL — Page portail
   ============================================================================ */

.anare-inventory-page {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-4);
}

.anare-inventory-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--anare-space-5);
    padding: var(--anare-space-6);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-xl);
    background:
        linear-gradient(135deg, rgba(0, 26, 110, 0.10), rgba(255, 122, 31, 0.07)),
        var(--anare-surface);
    box-shadow: var(--anare-shadow-sm);
    overflow: hidden;
}

.anare-inventory-hero-compact {
    padding: var(--anare-space-5);
}

.anare-inventory-hero-main {
    min-width: 0;
}

.anare-inventory-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--anare-space-2);
    margin-bottom: var(--anare-space-2);
    color: var(--anare-primary);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.anare-inventory-eyebrow i {
    color: var(--anare-action);
}

.anare-inventory-hero h1 {
    margin: 0;
    color: var(--anare-text);
    font-size: 1.8rem;
    font-weight: 850;
    line-height: 1.15;
}

.anare-inventory-hero p {
    max-width: 720px;
    margin: var(--anare-space-2) 0 0;
    color: var(--anare-text-muted);
    font-size: var(--anare-fs-md);
}

.anare-inventory-hero-stats {
    display: flex;
    gap: var(--anare-space-3);
    flex-shrink: 0;
}

.anare-inventory-hero-stat {
    min-width: 112px;
    padding: var(--anare-space-3);
    border: 1px solid rgba(0, 26, 110, 0.14);
    border-radius: var(--anare-radius-lg);
    background: rgba(255, 255, 255, 0.72);
    text-align: center;
}

.anare-inventory-hero-stat strong {
    display: block;
    color: var(--anare-primary);
    font-size: 1.55rem;
    font-weight: 850;
    line-height: 1;
}

.anare-inventory-hero-stat span {
    display: block;
    margin-top: 4px;
    color: var(--anare-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.anare-inventory-alert {
    display: flex;
    align-items: center;
    gap: var(--anare-space-3);
    padding: var(--anare-space-4);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: var(--anare-radius-lg);
    background: rgba(240, 253, 244, 0.92);
    color: #15803d;
}

.anare-inventory-alert i {
    font-size: 1.25rem;
}

.anare-inventory-alert strong,
.anare-inventory-alert span {
    display: block;
}

.anare-inventory-alert span {
    color: var(--anare-text-muted);
    font-size: 0.88rem;
}

.anare-inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--anare-space-4);
}

.anare-inventory-warehouse-card {
    position: relative;
    display: flex;
    min-height: 270px;
    flex-direction: column;
    gap: var(--anare-space-4);
    padding: var(--anare-space-5);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96)),
        var(--anare-surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: transform var(--anare-transition), box-shadow var(--anare-transition), border-color var(--anare-transition);
}

.anare-inventory-warehouse-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--anare-primary), var(--anare-action));
}

.anare-inventory-warehouse-card::after {
    content: "";
    position: absolute;
    top: -56px;
    right: -44px;
    width: 132px;
    height: 132px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 26, 110, 0.11), transparent 68%);
    pointer-events: none;
}

.anare-inventory-warehouse-card.is-empty::before {
    background: #94a3b8;
}

.anare-inventory-warehouse-card.is-empty {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
        var(--anare-surface);
}

.anare-inventory-warehouse-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 26, 110, 0.28);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.11);
}

.anare-inventory-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--anare-space-3);
    align-items: flex-start;
}

.anare-inventory-card-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(0, 26, 110, 0.14);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 26, 110, 0.13), rgba(255, 122, 31, 0.08));
    color: var(--anare-primary);
    font-size: 1.08rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.anare-inventory-card-title {
    min-width: 0;
}

.anare-inventory-card-title h2 {
    margin: 0;
    color: var(--anare-text);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.25;
}

.anare-inventory-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.anare-inventory-type-tag,
.anare-inventory-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: var(--anare-radius-pill);
    font-size: 0.72rem;
    font-weight: 800;
}

.anare-inventory-type-tag {
    background: rgba(8, 145, 178, 0.10);
    color: #0e7490;
}

.anare-inventory-status-tag.is-ready {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.anare-inventory-status-tag.is-empty {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.anare-inventory-card-metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: var(--anare-space-2);
}

.anare-inventory-card-metric {
    position: relative;
    min-width: 0;
    padding: var(--anare-space-3);
    border: 1px solid rgba(226, 232, 240, 0.86);
    border-radius: var(--anare-radius-md);
    background: rgba(255, 255, 255, 0.76);
}

.anare-inventory-card-metric > i {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 9px;
    font-size: 0.8rem;
}

.anare-inventory-card-metric.is-stock > i {
    background: rgba(245, 158, 11, 0.13);
    color: #b45309;
}

.anare-inventory-card-metric.is-lines > i {
    background: rgba(8, 145, 178, 0.12);
    color: #0e7490;
}

.anare-inventory-card-metric.is-fill > i {
    background: rgba(0, 26, 110, 0.10);
    color: var(--anare-primary);
}

.anare-inventory-card-metrics strong,
.anare-inventory-card-metrics span {
    display: block;
}

.anare-inventory-card-metrics strong {
    color: var(--anare-text);
    font-size: 1.2rem;
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.anare-inventory-card-metrics span {
    margin-top: 5px;
    color: var(--anare-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.anare-inventory-fill {
    position: relative;
    z-index: 1;
    padding: var(--anare-space-3);
    border: 1px solid rgba(226, 232, 240, 0.86);
    border-radius: var(--anare-radius-md);
    background: rgba(255, 255, 255, 0.74);
}

.anare-inventory-fill-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-3);
    margin-bottom: 8px;
    color: var(--anare-text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.anare-inventory-fill-head strong {
    color: var(--anare-primary);
}

.anare-inventory-fillbar {
    height: 9px;
    overflow: hidden;
    border-radius: var(--anare-radius-pill);
    background: #e2e8f0;
}

.anare-inventory-fillbar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--anare-primary), var(--anare-action));
}

.anare-inventory-card-action {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anare-space-2);
    margin-top: auto;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--anare-radius-md);
    background: var(--anare-primary);
    color: #fff;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0, 26, 110, 0.18);
}

.anare-inventory-card-action::after {
    content: "\f105";
    font-family: FontAwesome;
    font-weight: normal;
    opacity: 0.9;
    transition: transform var(--anare-transition);
}

.anare-inventory-card-action:hover {
    background: var(--anare-primary-hover);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 22px rgba(0, 26, 110, 0.22);
}

.anare-inventory-card-action:hover::after {
    transform: translateX(3px);
}

.anare-inventory-table-card,
.anare-inventory-empty {
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    background: var(--anare-surface);
    box-shadow: var(--anare-shadow-sm);
    overflow: hidden;
}

.anare-inventory-table-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--anare-space-4);
    padding: var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    background: var(--anare-surface-alt);
}

.anare-inventory-table-head h2 {
    margin: 0;
    color: var(--anare-text);
    font-size: 1.1rem;
    font-weight: 800;
}

.anare-inventory-table-head p {
    margin: 4px 0 0;
    color: var(--anare-text-muted);
    font-size: 0.88rem;
}

.anare-inventory-table-count {
    padding: 5px 10px;
    border-radius: var(--anare-radius-pill);
    background: rgba(0, 26, 110, 0.10);
    color: var(--anare-primary);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.anare-inventory-table {
    margin: 0;
}

.anare-inventory-table thead th {
    padding: var(--anare-space-3) var(--anare-space-4);
    border-bottom: 1px solid var(--anare-border);
    background: #f8fafc;
    color: var(--anare-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.anare-inventory-table tbody td {
    padding: var(--anare-space-3) var(--anare-space-4);
    border-color: var(--anare-border);
}

.anare-inventory-product {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
    color: var(--anare-text);
    font-weight: 700;
}

.anare-inventory-product-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--anare-radius-sm);
    background: rgba(8, 145, 178, 0.10);
    color: #0e7490;
}

.anare-inventory-system-qty {
    color: var(--anare-text-muted);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.anare-inventory-qty-input {
    max-width: 140px;
    margin-left: auto;
    border-radius: var(--anare-radius-sm);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.anare-inventory-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--anare-space-2);
    margin-top: var(--anare-space-4);
}

.anare-inventory-submit {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: #fff;
    font-weight: 750;
}

.anare-inventory-submit:hover {
    background: var(--anare-primary-hover);
    border-color: var(--anare-primary-hover);
    color: #fff;
}

.anare-inventory-empty {
    padding: var(--anare-space-7);
    text-align: center;
}

.anare-inventory-empty i {
    color: var(--anare-primary);
    font-size: 2rem;
}

.anare-inventory-empty h2 {
    margin: var(--anare-space-3) 0 var(--anare-space-2);
    color: var(--anare-text);
    font-size: 1.25rem;
    font-weight: 800;
}

.anare-inventory-empty p {
    margin: 0 0 var(--anare-space-3);
    color: var(--anare-text-muted);
}

@media (max-width: 768px) {
    .anare-inventory-hero {
        flex-direction: column;
        padding: var(--anare-space-5);
    }

    .anare-inventory-hero-stats {
        width: 100%;
    }

    .anare-inventory-hero-stat {
        flex: 1;
    }

    .anare-inventory-card-metrics {
        grid-template-columns: 1fr;
    }

    .anare-inventory-actions,
    .anare-inventory-table-head {
        flex-direction: column;
    }

    .anare-inventory-actions .btn {
        width: 100%;
    }
}

/* ============================================================
 * BANNIÈRE "Demande en cours de validation ANARE-CI"
 * Carte glassmorphique avec gradient animé + pulse + shimmer
 * ============================================================ */
.anare-pending-version-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--anare-space-4);
    margin: var(--anare-space-4) 0 var(--anare-space-5);
    padding: var(--anare-space-4) var(--anare-space-5);
    border-radius: 16px;
    background: linear-gradient(135deg,
        rgba(255, 122, 31, 0.10) 0%,
        rgba(255, 122, 31, 0.04) 40%,
        rgba(0, 26, 110, 0.06) 100%);
    border: 1px solid rgba(255, 122, 31, 0.25);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 12px 28px -16px rgba(255, 122, 31, 0.30);
    overflow: hidden;
    animation: anare-pending-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shimmer effect : reflet animé qui passe à intervalles */
.anare-pending-version-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%);
    animation: anare-pending-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

/* Barre verticale d'accent à gauche */
.anare-pending-version-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--anare-action) 0%, var(--anare-primary) 100%);
    border-radius: 16px 0 0 16px;
}

@keyframes anare-pending-fade-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes anare-pending-shimmer {
    0%, 100% { left: -100%; }
    50%      { left: 150%; }
}

/* Icône avec halo animé */
.anare-pending-version-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--anare-action) 0%, #d35400 100%);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 14px rgba(255, 122, 31, 0.40);
    animation: anare-pending-icon-tilt 3s ease-in-out infinite;
    z-index: 1;
}

.anare-pending-version-icon::before,
.anare-pending-version-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255, 122, 31, 0.40);
    animation: anare-pending-halo 2.2s ease-out infinite;
}
.anare-pending-version-icon::after {
    animation-delay: 1.1s;
}

@keyframes anare-pending-icon-tilt {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}

@keyframes anare-pending-halo {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0;   }
}

/* Contenu */
.anare-pending-version-content {
    flex: 1;
    min-width: 0;
    z-index: 1;
}

.anare-pending-version-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--anare-action);
    margin-bottom: 0.25rem;
}

.anare-pending-version-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--anare-action);
    box-shadow: 0 0 0 0 rgba(255, 122, 31, 0.6);
    animation: anare-pending-pulse 1.6s ease-out infinite;
}

@keyframes anare-pending-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 122, 31, 0.70); }
    70%  { box-shadow: 0 0 0 12px rgba(255, 122, 31, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 122, 31, 0);    }
}

.anare-pending-version-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    font-size: 1.05rem;
    color: var(--anare-text);
    margin-bottom: 0.25rem;
}

.anare-pending-version-title strong {
    font-weight: 700;
    color: var(--anare-primary-deep);
    background: rgba(0, 26, 110, 0.08);
    padding: 0.1rem 0.55rem;
    border-radius: 6px;
}

.anare-pending-version-meta {
    font-size: 0.85rem;
    color: var(--anare-text-muted);
}

.anare-pending-version-sub {
    font-size: 0.88rem;
    color: var(--anare-text-muted);
    line-height: 1.45;
}

/* CTA */
.anare-pending-version-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.7rem 1.2rem;
    border-radius: 10px;
    background: var(--anare-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 26, 110, 0.30);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.anare-pending-version-cta:hover {
    background: var(--anare-primary-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 26, 110, 0.40);
}

.anare-pending-version-cta:hover .fa-arrow-right {
    transform: translateX(3px);
}

.anare-pending-version-cta .fa-arrow-right {
    transition: transform 0.2s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .anare-pending-version-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--anare-space-4);
    }
    .anare-pending-version-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
 * GRILLE DE CHIPS ZONES ANARE-CI (sélection multiple)
 * ============================================================ */
.anare-zones-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--anare-border, #dee2e6);
    border-radius: 10px;
    background: var(--anare-surface-alt, #f8f9fa);
    min-height: 56px;
}

.anare-zone-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #d1d6db;
    color: var(--anare-text-muted);
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    margin: 0;
}

.anare-zone-chip:hover {
    border-color: var(--anare-primary);
    color: var(--anare-primary);
    background: var(--anare-primary-soft);
    transform: translateY(-1px);
}

.anare-zone-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.anare-zone-chip:has(input[type="checkbox"]:checked) {
    background: var(--anare-primary);
    border-color: var(--anare-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 26, 110, 0.25);
}

.anare-zone-chip:has(input[type="checkbox"]:checked) .anare-zone-chip-label::before {
    content: '✓ ';
    font-weight: 700;
}

.anare-zone-chip:focus-within {
    outline: 2px solid var(--anare-primary);
    outline-offset: 2px;
}

/* ============================================================
 * BOUTONS MODAL ANARE-CI (cohérents avec le design portail)
 * ============================================================ */
.anare-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.62rem 1.25rem;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    line-height: 1.2;
}

.anare-modal-btn-primary {
    background: linear-gradient(135deg, var(--anare-primary) 0%, var(--anare-primary-hover) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 26, 110, 0.30);
}

.anare-modal-btn-primary:hover {
    background: linear-gradient(135deg, var(--anare-primary-hover) 0%, var(--anare-primary) 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 26, 110, 0.40);
}

.anare-modal-btn-primary:active {
    transform: translateY(0);
}

.anare-modal-btn-secondary {
    background: #f8f9fa;
    color: var(--anare-text-muted);
    border-color: #dee2e6;
}

.anare-modal-btn-secondary:hover {
    background: #fff;
    color: var(--anare-text);
    border-color: #adb5bd;
}

/* Modal header avec gradient ANARE-CI */
#dghSubmitJustificationModal .modal-header {
    background: linear-gradient(135deg, var(--anare-primary-soft) 0%, #fff 100%);
    border-bottom: 1px solid rgba(0, 26, 110, 0.1);
    border-radius: var(--bs-modal-inner-border-radius, 0.5rem) var(--bs-modal-inner-border-radius, 0.5rem) 0 0;
}

#dghSubmitJustificationModal .modal-title {
    color: var(--anare-primary-deep);
    font-weight: 700;
    display: flex;
    align-items: center;
}

#dghSubmitJustificationModal .modal-title .fa-paper-plane {
    color: var(--anare-primary);
}

#dghSubmitJustificationModal .modal-content {
    border-radius: 14px;
    border: none;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

#dghSubmitJustificationModal textarea.form-control:focus {
    border-color: var(--anare-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 26, 110, 0.18);
}

/* ============================================================
 * CELLULES "Recevoir de" / "Destination" : acteur + infra
 * ============================================================ */
.anare-cell-actor {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.3;
}

.anare-cell-actor-name {
    font-weight: 500;
    color: var(--anare-text);
}

.anare-cell-actor-infra {
    font-size: 0.78rem;
    color: var(--anare-text-muted);
    display: inline-flex;
    align-items: center;
}

.anare-cell-actor-code {
    color: var(--anare-primary);
    font-weight: 500;
}

/* ============================================================
 * DETAIL META : sous-info (infra, plaque...)
 * ============================================================ */
.anare-detail-meta-sub {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    color: var(--anare-text-muted);
    margin-top: 0.2rem;
}

/* ============================================================
 * IMPORT PREVIEW : tableau de validation par ligne
 * ============================================================ */
.anare-import-preview-table tr.anare-import-line-validated {
    background: rgba(34, 139, 34, 0.05);
}
.anare-import-preview-table tr.anare-import-line-discarded {
    background: rgba(220, 53, 69, 0.05);
    opacity: 0.6;
}
.anare-import-preview-table tr.anare-import-line-created {
    background: rgba(0, 26, 110, 0.06);
}
.anare-import-preview-table td {
    vertical-align: middle;
}
.anare-import-preview-form .vr {
    width: 1px;
    background: #dee2e6;
    margin: 0 0.25rem;
    align-self: stretch;
}

/* ============================================================
 * SELECT DISABLED : apparence propre (sans chevrons rayés)
 * ============================================================ */
select.form-select:disabled,
select[disabled].form-select {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
    background-image: linear-gradient(45deg, transparent 50%, #adb5bd 50%),
                      linear-gradient(135deg, #adb5bd 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
}

/* Bordure d'origine restée propre sur les selects disabled ANARE-CI */
select#dest_warehouse_id:disabled {
    background-color: var(--anare-surface-alt, #f8f9fa);
    border-color: #dee2e6;
}

/* === Meter validation phone / email (style password_meter Odoo) === */
.anare-validation-meter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.8rem;
}
.anare-validation-meter .anare-validation-label {
    font-weight: 600;
    min-width: 60px;
    text-align: right;
}
.anare-validation-meter meter {
    flex: 1;
    height: 6px;
}
.anare-field-feedback {
    font-size: 0.75rem;
    margin-top: 2px;
    display: none;
}
.anare-field-feedback:not(:empty) { display: block; }

/* =========================================
   Emplacements (cartes par emplacement physique dans une infra)
   Reprend la grammaire visuelle des cartes infrastructure (anare-stock-wh-v2)
   en plus compact pour s'imbriquer dans la carte parente.
   ========================================= */
.anare-stock-loc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--anare-space-3);
    margin-top: var(--anare-space-2);
}
@media (max-width: 991px) {
    .anare-stock-loc-grid { grid-template-columns: 1fr; }
}
.anare-stock-loc-card {
    position: relative;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    padding: var(--anare-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-2);
    overflow: hidden;
}
.anare-stock-loc-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--loc-color);
    border-top-left-radius: var(--anare-radius-md);
    border-bottom-left-radius: var(--anare-radius-md);
}
.anare-stock-loc-card-ok      { --loc-color: #16a34a; }
.anare-stock-loc-card-warning { --loc-color: #f59e0b; }
.anare-stock-loc-card-danger  { --loc-color: #dc2626; }
.anare-stock-loc-card-low     { --loc-color: #94a3b8; }
.anare-stock-loc-head {
    display: flex;
    align-items: center;
    gap: var(--anare-space-2);
}
.anare-stock-loc-icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--anare-radius-sm);
    background: var(--loc-color);
    color: #fff;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.anare-stock-loc-titles {
    flex: 1;
    min-width: 0;
}
.anare-stock-loc-name {
    display: block;
    font-size: 0.95rem;
    color: var(--anare-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.anare-stock-loc-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--anare-text-subtle);
}
.anare-stock-loc-type {
    background: var(--anare-surface-alt);
    border: 1px solid var(--anare-border);
    padding: 1px 6px;
    border-radius: var(--anare-radius-pill);
}
.anare-stock-loc-status {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--anare-radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--anare-surface-alt);
    color: var(--loc-color);
}
.anare-stock-loc-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--loc-color);
}
.anare-stock-loc-metric {
    display: flex;
    gap: var(--anare-space-3);
    align-items: center;
}
.anare-stock-loc-total {
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.anare-stock-loc-total-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--loc-color);
    line-height: 1;
}
.anare-stock-loc-total-unit {
    font-size: 0.85rem;
    color: var(--anare-text-subtle);
}
.anare-stock-loc-fill {
    flex: 1;
    min-width: 0;
}
.anare-stock-loc-fill-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.7rem;
    color: var(--anare-text-subtle);
    margin-bottom: 4px;
}
.anare-stock-loc-fill-pct {
    font-size: 0.85rem;
    color: var(--loc-color);
}
.anare-stock-loc-fill-bar {
    height: 6px;
    background: var(--anare-surface-alt);
    border-radius: var(--anare-radius-pill);
    overflow: hidden;
}
.anare-stock-loc-fill-bar > span {
    display: block;
    height: 100%;
    background: var(--loc-color);
    transition: width 0.3s ease;
}
.anare-stock-loc-fill-foot {
    font-size: 0.7rem;
    color: var(--anare-text-subtle);
    margin-top: 3px;
}
.anare-stock-loc-products {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px dashed var(--anare-border);
    padding-top: var(--anare-space-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.anare-stock-loc-products > li {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.78rem;
}
.anare-stock-loc-product-name {
    color: var(--anare-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.anare-stock-loc-product-qty {
    color: var(--anare-text-subtle);
    white-space: nowrap;
}

/* ============================================
   Compléments de design partagés (utilisés par
   /my/transformations + /my/inventaires)
   ============================================ */

/* Hero CTA principal (bouton primaire à droite du titre de page) */
.anare-page-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--anare-radius-pill);
    background: var(--anare-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    box-shadow: var(--anare-shadow-sm);
}
.anare-page-hero-cta:hover {
    background: var(--anare-primary-dark, var(--anare-primary));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--anare-shadow-md);
    text-decoration: none;
}

/* Icônes de stat additionnelles */
.anare-stat-icon-danger {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}
.anare-stat-icon-orange {
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
}

/* Carte de filtres */
.anare-filters-card {
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-md);
    padding: var(--anare-space-3) var(--anare-space-4);
    margin-top: var(--anare-space-3);
}
.anare-filters-form { margin: 0; }
.anare-filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--anare-space-3);
    align-items: end;
}
.anare-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
.anare-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: end;
}

/* Lien de référence dans une ligne de tableau */
.anare-row-link {
    color: var(--anare-primary);
    font-weight: 600;
    text-decoration: none;
}
.anare-row-link:hover {
    text-decoration: underline;
    color: var(--anare-primary-dark, var(--anare-primary));
}

/* Ligne d'anomalie matière (surlignée discrètement) */
.anare-row-anomalie td {
    background: rgba(220, 38, 38, 0.04);
}

/* Pagination épurée */
.anare-list-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: var(--anare-space-3);
    border-top: 1px solid var(--anare-border);
}
.anare-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--anare-radius-md);
    border: 1px solid transparent;
    color: var(--anare-text-subtle);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.12s ease, color 0.12s ease;
}
.anare-pagination-link:hover {
    background: var(--anare-surface-alt);
    color: var(--anare-text);
    text-decoration: none;
}
.anare-pagination-link.active {
    background: var(--anare-primary);
    color: #fff;
    border-color: var(--anare-primary);
}
.anare-pagination-link.disabled {
    pointer-events: none;
    opacity: 0.4;
}

/* Panneau de filtres avancés : repliable avec animation */
.anare-list-advanced-filters {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease, padding 0.25s ease;
    padding: 0 var(--anare-space-4);
}
.anare-list-advanced-filters.is-open {
    max-height: 600px;
    padding: var(--anare-space-3) var(--anare-space-4);
    border-top: 1px solid var(--anare-border);
}

/* Ligne worksheet inventaire modifiée : surlignage subtil */
.inv-row.inv-row-modified td {
    background: rgba(16, 185, 129, 0.05);
    transition: background 0.2s ease;
}
.inv-row .inv-counted:focus {
    border-color: var(--anare-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* ============================================================
   Import — Détail (page /my/imports/<id>) : variantes + anims
   ============================================================ */

/* Hero icon variants pour import (par type de fichier) */
.anare-create-hero-icon-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.04));
    color: #166534;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.18),
                0 6px 16px -8px rgba(34, 197, 94, 0.30);
}
.anare-create-hero-icon-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.04));
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.18),
                0 6px 16px -8px rgba(239, 68, 68, 0.30);
}
.anare-create-hero-icon-teal {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.20), rgba(20, 184, 166, 0.04));
    color: #001A6E;
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.18),
                0 6px 16px -8px rgba(20, 184, 166, 0.30);
}
.anare-create-hero-icon-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(245, 158, 11, 0.04));
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18),
                0 6px 16px -8px rgba(245, 158, 11, 0.30);
}

/* Pills soft (badges contextuels typés) */
.anare-pill-soft {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
}
.anare-pill-soft-green   { background: rgba(34,197,94,0.10);  color: #166534; border-color: rgba(34,197,94,0.25); }
.anare-pill-soft-red     { background: rgba(239,68,68,0.10);  color: #b91c1c; border-color: rgba(239,68,68,0.25); }
.anare-pill-soft-teal    { background: rgba(20,184,166,0.10); color: #001A6E; border-color: rgba(20,184,166,0.25); }
.anare-pill-soft-amber   { background: rgba(245,158,11,0.10); color: #b45309; border-color: rgba(245,158,11,0.25); }
.anare-pill-soft-primary { background: rgba(0, 26, 110,0.10);   color: #001A6E; border-color: rgba(0, 26, 110,0.25); }

/* Journal d'import : zone code stylée */
.anare-import-log {
    white-space: pre-wrap;
    font-family: 'Fira Code', 'Source Code Pro', Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
    color: #e2e8f0;
    padding: 14px 18px;
    border-radius: var(--anare-radius-md);
    border: 1px solid rgba(15, 23, 42, 0.6);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04),
                0 8px 24px -16px rgba(15, 23, 42, 0.6);
    max-height: 380px;
    overflow: auto;
    margin: 0;
}

/* Animations d'entrée — détail import */
@keyframes dghFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dghPopIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.anare-detail-page[data-anare-detail-page="import"] > * {
    animation: dghFadeUp 0.5s ease-out both;
}
.anare-detail-page[data-anare-detail-page="import"] > .anare-detail-hero { animation-delay: 0s; }
.anare-detail-page[data-anare-detail-page="import"] > .anare-create-alert { animation-delay: 0.05s; }
.anare-detail-page[data-anare-detail-page="import"] > .anare-stats-banner { animation-delay: 0.10s; }
.anare-detail-page[data-anare-detail-page="import"] > .row { animation-delay: 0.15s; }
.anare-detail-page[data-anare-detail-page="import"] > .anare-chart-card-v3 { animation-delay: 0.20s; }
.anare-detail-page[data-anare-detail-page="import"] > footer { animation-delay: 0.30s; }

.anare-detail-page[data-anare-detail-page="import"] .anare-stat-card {
    animation: dghPopIn 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.anare-detail-page[data-anare-detail-page="import"] .anare-stat-card:nth-child(1) { animation-delay: 0.12s; }
.anare-detail-page[data-anare-detail-page="import"] .anare-stat-card:nth-child(2) { animation-delay: 0.18s; }
.anare-detail-page[data-anare-detail-page="import"] .anare-stat-card:nth-child(3) { animation-delay: 0.24s; }
.anare-detail-page[data-anare-detail-page="import"] .anare-stat-card:nth-child(4) { animation-delay: 0.30s; }
.anare-detail-page[data-anare-detail-page="import"] .anare-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -16px rgba(15, 23, 42, 0.18);
    border-color: rgba(0, 26, 110, 0.25);
}

.anare-detail-page[data-anare-detail-page="import"] .anare-stat-value {
    animation: dghPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.3s;
}

/* Hover subtil sur tables d'opérations créées */
.anare-detail-page[data-anare-detail-page="import"] .table tbody tr {
    transition: background 0.15s ease, transform 0.15s ease;
}
.anare-detail-page[data-anare-detail-page="import"] .table tbody tr:hover {
    background: rgba(0, 26, 110, 0.03);
}

/* dl row : animations sur les <dt>/<dd> */
.anare-detail-page[data-anare-detail-page="import"] dl.row dt,
.anare-detail-page[data-anare-detail-page="import"] dl.row dd {
    animation: dghFadeUp 0.4s ease-out both;
}
.anare-detail-page[data-anare-detail-page="import"] dl.row dt:nth-child(odd),
.anare-detail-page[data-anare-detail-page="import"] dl.row dd:nth-child(even) {
    animation-delay: calc(0.05s * var(--anare-row-i, 1));
}

/* Préfère les transitions douces lors du hover des cartes chart */
.anare-detail-page[data-anare-detail-page="import"] .anare-chart-card-v3 {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.anare-detail-page[data-anare-detail-page="import"] .anare-chart-card-v3:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px -20px rgba(15, 23, 42, 0.16);
}

/* Respecte prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .anare-detail-page[data-anare-detail-page="import"] > *,
    .anare-detail-page[data-anare-detail-page="import"] .anare-stat-card,
    .anare-detail-page[data-anare-detail-page="import"] .anare-stat-value,
    .anare-detail-page[data-anare-detail-page="import"] dl.row dt,
    .anare-detail-page[data-anare-detail-page="import"] dl.row dd {
        animation: none !important;
    }
}

/* ============================================================
   Import — Create (page /my/imports/create) : sélecteur + dropzone
   ============================================================ */

.anare-create-page[data-anare-create-page="import"] {
    display: flex;
    flex-direction: column;
    gap: var(--anare-space-5);
    padding-bottom: 96px;
    max-width: 1240px;
    margin: 0 auto;
}

/* --- Sélecteur de type d'import (cartes cliquables) --- */
.anare-import-kinds {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--anare-space-3);
}
@media (max-width: 992px) {
    .anare-import-kinds {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 540px) {
    .anare-import-kinds {
        grid-template-columns: 1fr;
    }
}
.anare-import-kind-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--anare-surface);
    border: 1px solid var(--anare-border);
    border-radius: var(--anare-radius-lg);
    text-decoration: none;
    color: var(--anare-text);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
    overflow: hidden;
}
.anare-import-kind-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, currentColor 200%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.anare-import-kind-card:hover {
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--anare-text);
    box-shadow: 0 14px 28px -16px rgba(15, 23, 42, 0.18);
    border-color: rgba(0, 26, 110, 0.30);
}
.anare-import-kind-card.is-active {
    border-color: rgba(0, 26, 110, 0.55);
    box-shadow: 0 16px 32px -20px rgba(0, 26, 110, 0.30),
                inset 0 0 0 1px rgba(0, 26, 110, 0.20);
    background: linear-gradient(180deg, rgba(0, 26, 110, 0.04) 0%, var(--anare-surface) 100%);
}
.anare-import-kind-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.anare-import-kind-icon-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.04));
    color: #166534;
}
.anare-import-kind-icon-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.04));
    color: #b91c1c;
}
.anare-import-kind-icon-teal {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(20, 184, 166, 0.04));
    color: #001A6E;
}
.anare-import-kind-icon-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.04));
    color: #b45309;
}
.anare-import-kind-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.anare-import-kind-text strong {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--anare-text);
}
.anare-import-kind-text small {
    font-size: 0.75rem;
    color: var(--anare-text-muted);
    margin-top: 2px;
}
.anare-import-kind-check {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--anare-primary);
    font-size: 1.1rem;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.anare-import-kind-card.is-active .anare-import-kind-check {
    opacity: 1;
    transform: scale(1);
}

/* --- Drop zone --- */
.anare-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 24px;
    background:
        radial-gradient(420px 240px at 50% -40%, rgba(0, 26, 110, 0.08), transparent 60%),
        var(--anare-surface-alt);
    border: 2px dashed rgba(0, 26, 110, 0.30);
    border-radius: var(--anare-radius-lg);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    margin: 0;
}
.anare-dropzone:hover {
    border-color: rgba(0, 26, 110, 0.55);
    background:
        radial-gradient(420px 240px at 50% -40%, rgba(0, 26, 110, 0.12), transparent 60%),
        var(--anare-surface);
    transform: scale(1.005);
}
.anare-dropzone.is-dragover {
    border-color: var(--anare-primary);
    background: rgba(0, 26, 110, 0.06);
    transform: scale(1.01);
}
.anare-dropzone.has-file {
    border-style: solid;
    border-color: rgba(0, 26, 110, 0.55);
    background:
        radial-gradient(420px 240px at 50% -40%, rgba(34, 197, 94, 0.10), transparent 60%),
        var(--anare-surface);
}
.anare-dropzone-illu {
    width: 72px; height: 72px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(0, 26, 110, 0.16), rgba(0, 26, 110, 0.04));
    color: var(--anare-primary);
    border-radius: 999px;
    font-size: 1.8rem;
    box-shadow: inset 0 0 0 1px rgba(0, 26, 110, 0.18);
    animation: dghPulse 2.4s ease-in-out infinite;
}
.anare-dropzone.has-file .anare-dropzone-illu {
    animation: none;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0.06));
    color: #166534;
}
@keyframes dghPulse {
    0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 1px rgba(0, 26, 110, 0.18), 0 0 0 0 rgba(0, 26, 110, 0.25); }
    50%      { transform: scale(1.05); box-shadow: inset 0 0 0 1px rgba(0, 26, 110, 0.18), 0 0 0 12px rgba(0, 26, 110, 0); }
}
.anare-dropzone-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.anare-dropzone-text strong {
    font-size: 1.05rem;
    color: var(--anare-text);
    font-weight: 650;
}
.anare-dropzone-text span {
    color: var(--anare-text-muted);
    font-size: 0.85rem;
}
.anare-dropzone-formats {
    font-size: 0.75rem;
    color: var(--anare-text-subtle);
    background: rgba(15, 23, 42, 0.04);
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Fira Code', monospace;
}
.anare-dropzone-input {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.anare-dropzone-filename {
    font-size: 0.82rem;
    color: var(--anare-text-muted);
    background: var(--anare-surface);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--anare-border);
    min-width: 240px;
}
.anare-dropzone.has-file .anare-dropzone-filename {
    color: #166534;
    border-color: rgba(34, 197, 94, 0.30);
    background: rgba(34, 197, 94, 0.06);
    animation: dghPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Tips list --- */
.anare-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.anare-tips-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.85rem;
    color: var(--anare-text);
    line-height: 1.45;
}
.anare-tips-list li > i {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
    font-size: 0.7rem;
    margin-top: 1px;
}
.anare-tips-list li > i.fa-info-circle {
    background: rgba(8, 145, 178, 0.12);
    color: #0e7490;
}
.anare-tips-list li a {
    color: var(--anare-primary);
    font-weight: 600;
}

/* --- Layout 2 colonnes (CSS grid au lieu de bootstrap col-lg-*) --- */
.anare-import-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--anare-space-4);
    align-items: stretch;
}
.anare-import-create-grid > * {
    min-width: 0;
}
.anare-import-create-grid > * > .anare-chart-card-v3 {
    height: 100%;
}
@media (max-width: 992px) {
    .anare-import-create-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Hero aside : aligne le bouton Template verticalement --- */
.anare-create-page[data-anare-create-page="import"] .anare-detail-hero-aside {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.anare-create-page[data-anare-create-page="import"] .anare-detail-hero-aside .anare-create-btn {
    white-space: nowrap;
}

/* --- Animations d'entrée create page --- */
.anare-create-page[data-anare-create-page="import"] > * {
    animation: dghFadeUp 0.5s ease-out both;
}
.anare-create-page[data-anare-create-page="import"] > .anare-detail-hero { animation-delay: 0s; }
.anare-create-page[data-anare-create-page="import"] > .anare-create-alert { animation-delay: 0.05s; }
.anare-create-page[data-anare-create-page="import"] > .anare-import-kinds { animation-delay: 0.10s; }
.anare-create-page[data-anare-create-page="import"] > .anare-import-create-grid { animation-delay: 0.18s; }
.anare-create-page[data-anare-create-page="import"] > footer { animation-delay: 0.28s; }

.anare-create-page[data-anare-create-page="import"] .anare-import-kind-card {
    animation: dghPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.anare-create-page[data-anare-create-page="import"] .anare-import-kind-card:nth-child(1) { animation-delay: 0.12s; }
.anare-create-page[data-anare-create-page="import"] .anare-import-kind-card:nth-child(2) { animation-delay: 0.18s; }
.anare-create-page[data-anare-create-page="import"] .anare-import-kind-card:nth-child(3) { animation-delay: 0.24s; }
.anare-create-page[data-anare-create-page="import"] .anare-import-kind-card:nth-child(4) { animation-delay: 0.30s; }

.anare-create-page[data-anare-create-page="import"] .anare-tips-list li {
    animation: dghFadeUp 0.4s ease-out both;
}
.anare-create-page[data-anare-create-page="import"] .anare-tips-list li:nth-child(1) { animation-delay: 0.25s; }
.anare-create-page[data-anare-create-page="import"] .anare-tips-list li:nth-child(2) { animation-delay: 0.32s; }
.anare-create-page[data-anare-create-page="import"] .anare-tips-list li:nth-child(3) { animation-delay: 0.39s; }
.anare-create-page[data-anare-create-page="import"] .anare-tips-list li:nth-child(4) { animation-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
    .anare-create-page[data-anare-create-page="import"] > *,
    .anare-create-page[data-anare-create-page="import"] .anare-import-kind-card,
    .anare-create-page[data-anare-create-page="import"] .anare-tips-list li,
    .anare-dropzone-illu {
        animation: none !important;
    }
}



/* ---------------------------------------------------------------
 * intl-tel-input — intégration champs téléphone ANARE-CI
 * ---------------------------------------------------------------*/
.anare-phone-input-wrapper { width: 100%; }
.anare-phone-input-wrapper .iti { display: block; width: 100%; }
.anare-phone-input-wrapper .iti__tel-input { width: 100%; }
/* Backend (form view) — le widget injecte un wrapper .iti autour du <input> */
.o_field_dgh_phone_intl .iti { display: inline-block; width: 100%; }
.o_field_dgh_phone_intl .iti__tel-input { width: 100%; }
/* Z-index pour que le dropdown passe au-dessus des modals Odoo */
.iti__country-list { z-index: 1080; }

/* intl-tel-input cohabitation avec anare-input-icon-wrap (sidebar /my/account) */
.anare-input-icon-wrap > .iti { width: 100%; display: block; }
.anare-input-icon-wrap:has(> .iti) > .anare-input-icon { display: none; }
/* Quand intl-tel-input wrap l'input, neutraliser le padding-left de anare-input-with-icon
   et laisser la lib gérer le padding pour le drapeau + indicatif (separateDialCode). */
.iti input.iti__tel-input.anare-input-with-icon,
.iti input.iti__tel-input.form-control.anare-input-with-icon,
.anare-account-form .iti input.iti__tel-input.anare-input-with-icon,
.anare-account-form .iti input.iti__tel-input.form-control.anare-input-with-icon,
.iti input.iti__tel-input,
.anare-account-form .iti input.iti__tel-input,
.anare-phone-input-wrapper .iti input.iti__tel-input {
    padding-left: 102px !important;
}
.anare-input-icon-wrap .iti__country-container { z-index: 2; }

/* ---------------------------------------------------------------
 * Formulaire pertes portail — tableau multi-lignes
 * ---------------------------------------------------------------*/
.anare-perte-lines {
    border: 1px solid var(--anare-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.anare-perte-lines .anare-create-lines-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
.anare-perte-lines thead th {
    background: var(--anare-surface-alt, #f8fafc);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--anare-text-muted, #64748b);
    padding: 12px 14px;
    border-bottom: 1px solid var(--anare-border, #e2e8f0);
}
.anare-perte-lines tbody td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--anare-border, #e2e8f0);
}
.anare-perte-lines tbody tr:last-child td {
    border-bottom: 0;
}
.anare-perte-lines .anare-perte-product-readonly strong {
    display: block;
    font-weight: 600;
    color: var(--anare-text-strong, #1e293b);
}
.anare-perte-lines .anare-create-lines-empty {
    padding: 28px 14px;
    text-align: center;
    background: var(--anare-surface-alt, #f8fafc);
    border-top: 1px dashed var(--anare-border, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.anare-perte-lines .anare-create-lines-empty .fa {
    font-size: 1.1rem;
}

/* ---------------------------------------------------------------
 * Mini-stats dans la sidebar détail perte
 * ---------------------------------------------------------------*/
.anare-detail-meta-stats {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.04), rgba(225, 29, 72, 0.01));
    border-color: rgba(225, 29, 72, 0.12);
}
.anare-detail-mini-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}
.anare-detail-mini-stat-icon {
    color: #be123c;
    width: 16px;
    text-align: center;
}
.anare-detail-mini-stat-label {
    flex: 1;
    color: var(--anare-text-muted, #64748b);
}
.anare-detail-mini-stat-value {
    font-weight: 700;
    color: var(--anare-text-strong, #1e293b);
}

/* ---------------------------------------------------------------
 * Miniature produit (table portail)
 * ---------------------------------------------------------------*/
.anare-product-thumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.anare-product-thumb img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--anare-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    flex-shrink: 0;
    background: #f8fafc;
}
.anare-product-thumb-fallback {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--anare-border, #e2e8f0);
    background: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.85rem;
    flex-shrink: 0;
}
/* Aperçu image produit dans le sélecteur de ligne */
.anare-product-select-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.anare-product-select-preview {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--anare-border, #e2e8f0);
    object-fit: cover;
    flex-shrink: 0;
    background: #f1f5f9;
    display: none;
}
.anare-product-select-preview.visible {
    display: block;
}

/* ============================================
   COMPTE DÉLÉGUÉ — masquer les champs société/partenaire principal
   company_name_div / div_vat viennent du template Odoo portal.address_form_fields
   ============================================ */
/* Délégué : les champs société/TVA sont exclus du rendu via is_used_as_billing=False dans le template */

/* ============================================
   KPI mini — bilan matière transformation
   ============================================ */
.anare-kpi-mini {
    background: var(--anare-surface-alt, #f8f9fa);
    border: 1px solid var(--anare-border, #e2e8f0);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.anare-kpi-mini-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--anare-text-muted, #64748b);
    font-weight: 600;
}
.anare-kpi-mini-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--anare-text, #1e293b);
}

/* ANARE-CI — meter de validation téléphone/email (inspiré DGH) */
.anareci-validation-meter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.8rem;
}
.anareci-validation-meter .anareci-validation-label {
    font-weight: 600;
    min-width: 60px;
    text-align: right;
}
.anareci-validation-meter meter {
    flex: 1;
    height: 6px;
}
.anareci-field-feedback {
    font-size: 0.75rem;
    margin-top: 2px;
}