/* ========== PAGE TITLE GROUP / BTN-BACK ========== */

.page-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: 1rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.btn-back:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ========== WORKSPACE PICKER ========== */

.picker-search-wrapper {
    margin-bottom: 1.25rem;
}

.picker-search-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.picker-search-box:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.picker-search-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: color 0.15s ease;
}

.picker-search-box:focus-within .picker-search-icon {
    color: var(--color-primary);
}

.picker-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--color-text);
    outline: none;
    min-width: 0;
}

.picker-search-input::placeholder {
    color: var(--color-text-muted);
}

.picker-search-spinner {
    flex-shrink: 0;
}

.picker-col-name {
    font-weight: 500;
    color: var(--color-text);
    font-size: 0.9375rem;
}

.picker-col-secondary {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.picker-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.picker-status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.picker-status-badge.active {
    color: var(--color-accent);
}

.picker-status-badge.inactive {
    color: var(--color-text-muted);
}

/* ========== TABLE GRID CELLS ========== */
.table-header > * {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-row > * {
    min-width: 0;
}

/* ========== BOUTONS ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.625rem var(--space-lg);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

    .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

    .btn-primary:disabled,
    .btn-secondary:disabled,
    .btn-danger:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-primary {
    background: var(--color-primary);
    color: white;
}

    .btn-primary:hover:not(:disabled) {
        background: var(--color-primary-hover);
    }

.btn-secondary {
    background: var(--color-bg);
    border: 1px solid var(--control-border);
    color: var(--color-text);
}

    .btn-secondary:hover:not(:disabled) {
        background: var(--color-bg-tertiary);
    }

.btn-danger {
    background: var(--color-danger);
    color: white;
}

    .btn-danger:hover:not(:disabled) {
        background: var(--color-danger-hover);
    }

/* ========== BOUTONS SPÉCIALISÉS ========== */
/* btn-new : bouton primaire (bleu plein) */
.btn-new{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.5rem 0.875rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .btn-new:hover{
        background: var(--color-primary-hover);
    }

/* btn-import : bouton secondaire (blanc/neutre) */
.btn-import {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.5rem 0.875rem;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .btn-import:hover {
        background: var(--color-bg-secondary);
    }

/* ========== PAGE ACTIONS ========== */
.page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* ========== FILTER TOOLBAR ========== */
.filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.toolbar-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toolbar-right .search-bar {
    margin: 0;
    width: 380px;
    max-width: 100%;
}

.search-bar--compact .search-bar__input {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    box-shadow: none;
}

/* Segmented control */
.segment-group {
    display: flex;
    align-items: center;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    height: 34px;
}

.segment-btn {
    padding: 0.25rem 1rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.segment-btn:hover:not(.active) {
    color: var(--color-text-secondary);
}

.segment-btn.active {
    background: var(--color-bg);
    color: var(--color-accent);
    box-shadow: 0 1px 3px rgba(11, 21, 106, 0.10);
}

/* Toolbar buttons (Filtrer, Sort) */
.btn-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    border: 1px solid var(--control-border);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 34px;
}

.btn-toolbar:hover {
    background: var(--color-bg-secondary);
    border-color: var(--control-border);
    color: var(--color-text);
}

.btn-export {
    background: var(--color-bg);
    border-color: var(--control-border);
    color: var(--color-text);
}

    .btn-export:hover {
        background: var(--color-bg-secondary);
        border-color: var(--control-border);
        color: var(--color-text);
    }

/* =============Page Toolbar============== */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

    .page-toolbar .search-bar {
        flex: 1;
        min-width: 200px;
        max-width: 900px;
        margin: 0;
    }

    .page-toolbar .page-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin: 0;
        flex-shrink: 0;
    }

.page-header {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Titre de page condensé : c'est le seul palier de titre au-dessus des cartes,
   la TopBar ayant disparu. */
.page-header-title {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0;
    line-height: 1.05;
}

.page-header-sub {
    font-size: 0.875rem;
    color: var(--color-text-subtle);
    margin: 0;
}
/* ========== FORMULAIRES ========== */
.form-group {
    margin-bottom: 0.875rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

    .form-label .required {
        color: var(--color-danger);
        margin-left: 2px;
    }

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-light);
    }

    .form-input::placeholder,
    .form-textarea::placeholder {
        color: var(--color-text-muted);
    }

    .form-input:disabled {
        background-color: var(--color-bg-tertiary);
        cursor: not-allowed;
        opacity: 0.6;
    }

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.form-hint {
    display: block;
    font-size: 0.8125rem;
    margin-top: var(--space-xs);
}

/* ========== PAGE HEADER ========== */
.page-header {
    margin-bottom: 1.25rem;
}

/* ========== SEARCH BAR ========== */
.search-bar {
    position: relative;
    margin-bottom: 1rem;
}

.search-bar__icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-bar__input {
    width: 100%;
    padding: 0.5rem var(--space-lg) 0.5rem 2.5rem;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    font-size: 0.875rem;
    background: var(--color-bg);
    transition: all var(--transition-base);
    box-shadow: var(--card-shadow);
    height: 34px;
}

    .search-bar__input:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-light);
    }

/* ========== PANEL ========== */
.panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: var(--z-panel-overlay);
}

    .panel-overlay.open {
        opacity: 1;
        visibility: visible;
    }

.panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(var(--panel-width), 100vw);
    height: 100vh;
    background: var(--color-bg);
    box-shadow: -1px 0 0 var(--color-border), -16px 0 48px rgba(15,23,42,0.08);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
}

    .panel.open {
        transform: translateX(0);
    }

.panel--wide {
    width: min(1100px, 100vw);
}

/* ── HEADER ───────────────────────────────────────── */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 56px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    gap: 0.75rem;
    flex-shrink: 0;
}

.panel-header h2 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-close {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    font-size: 0.8125rem;
}

    .panel-close:hover {
        background: var(--color-bg-tertiary);
        color: var(--color-text);
    }

/* ── CONTENT ──────────────────────────────────────── */
.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.panel-content::-webkit-scrollbar {
    width: 4px;
}

.panel-content::-webkit-scrollbar-track {
    background: transparent;
}

.panel-content::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 999px;
}

/* ── FOOTER ───────────────────────────────────────── */
.panel-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-shrink: 0;
}

    .panel-footer .btn-secondary {
        flex: 1;
        justify-content: center;
    }

    .panel-footer .btn-primary {
        flex: 3;
        justify-content: center;
    }

/* PIED DE PANNEAU — MODE VUE
   Structure : [Désactiver] [Supprimer] · · · [Fermer] [Modifier]

   Global et non scopé : les quatre panneaux (Robot, Workspace, RobotCatalog, Contact) en
   avaient chacun une copie identique dans leur .razor.css, soit le même bloc écrit quatre
   fois. Il n'y a rien de spécifique à un panneau ici.

   Le wrapper « flex: 1 » est indispensable : sans lui, les deux règles ci-dessus
   s'appliquent à chacun des quatre boutons, qui s'étirent alors n'importe comment. En
   devenant l'unique enfant flex du pied, le wrapper les neutralise.

   ⚠ Ce bloc DOIT rester après « .panel-footer .btn-* » : à spécificité égale (0,2,0),
   c'est l'ordre source qui tranche. Le déplacer plus haut casserait la mise en page. */
.panel-view-footer {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

/* Boutons de gauche : dimensionnés par leur contenu, jamais étirés. */
.panel-view-footer > .btn-secondary,
.panel-view-footer > .btn-danger {
    flex: none;
    white-space: nowrap;
}

/* Groupe de droite, poussé au bord : Fermer 1 / Modifier 2. */
.panel-view-footer-main {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}

    .panel-view-footer-main .btn-secondary {
        flex: 1;
        justify-content: center;
        white-space: nowrap;
    }

    .panel-view-footer-main .btn-primary {
        flex: 2;
        justify-content: center;
        white-space: nowrap;
    }

/* ========== TOAST ========== */
.toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 420px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: var(--color-bg);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
    border-left: 4px solid;
    animation: toastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: all;
    transition: all 0.2s ease;
}

    .toast:hover {
        box-shadow: 0 14px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

@keyframes toastSlideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-success {
    border-left-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(38, 198, 218, 0.05) 0%, white 50%);
}

.toast-error {
    border-left-color: var(--color-danger);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, white 50%);
}

.toast-warning {
    border-left-color: var(--color-warning);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, white 50%);
}

.toast-info {
    border-left-color: var(--color-info);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, white 50%);
}

.toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.toast-success .toast-icon {
    color: var(--color-primary);
}

.toast-error .toast-icon {
    color: var(--color-danger);
}

.toast-warning .toast-icon {
    color: var(--color-warning);
}

.toast-info .toast-icon {
    color: var(--color-info);
}

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.toast-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.toast-message {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    word-wrap: break-word;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 1.125rem;
}

    .toast-close:hover {
        background: var(--color-bg-tertiary);
        color: var(--color-text);
    }

/* Responsive */
@media (max-width: 768px) {
    .toast-container {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: unset;
    }

    .toast {
        width: 100%;
    }
}
/* ========== MODAL ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-overlay);
    animation: fadeIn var(--transition-base);
}

.modal-overlay.show {
    display: flex;
}

.modal-container {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp var(--transition-slow);
    position: relative;
    z-index: var(--z-modal);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

    .modal-header h3 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1rem;
        color: var(--color-text);
    }

.modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

    .modal-close:hover {
        background: var(--color-bg-tertiary);
        color: var(--color-text);
    }

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ========== BADGES ========== */
/* Pastille générique (statuts, types) : capsule, pas rectangle. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.badge-success {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.badge-danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

/* .badge-info / .badge-warning / .badge-neutral étaient utilisées dans le markup sans avoir
   jamais été définies : les pastilles concernées se rendaient en texte nu. */
.badge-info {
    background: var(--color-info-light);
    color: var(--color-info-text);
}

.badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

.badge-neutral {
    background: var(--color-bg-tertiary);
    color: var(--color-text-subtle);
}

/* .badge-success suit l'accent de marque (bleu marine) : le tag « Vert » a besoin d'un vrai vert. */
.badge-green {
    background: var(--color-success-light);
    color: var(--color-success);
}

/* ========== PANEL CONTENT ========== */
.panel-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.panel-section {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border-light);
}

    .panel-section:last-child {
        border-bottom: none;
    }

    .panel-section h3 {
        font-size: 0.8125rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0 0 0.875rem 0;
    }

/* Info rows */
.info-row {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0;
}

    .info-row + .info-row {
        border-top: 1px solid var(--color-border-light);
    }

.info-label {
    font-size: 0.8125rem;
    font-weight: 500;
}

.info-value {
    font-size: 0.9375rem;
    color: var(--color-text);
    font-weight: 450;
}

/* Address block */
.address-block {
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.7;
}

    .address-block p {
        margin: 0;
    }

/* No content placeholder */
.no-content {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
}

/* Form row sizing */
.form-group-small {
    flex: 0 0 35%;
}

.form-group-large {
    flex: 1;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Petit spinner visible sur surface claire (champs de recherche, etc.).
   Variante globale réutilisable — certains composants en redéfinissent une version scopée. */
.spinner-small {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}

/* ========== Pages d'état (404 / erreur) ========== */
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    min-height: 60vh;
    padding: var(--space-2xl) var(--space-lg);
}

.error-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-sm);
    border-radius: 50%;
    background: var(--color-primary-bg);
    color: var(--color-primary);
    font-size: 2rem;
}

.error-state__code {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--color-text);
    margin: 0;
}

.error-state__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.error-state__text {
    font-size: 0.9375rem;
    color: var(--color-text-subtle);
    line-height: 1.5;
    max-width: 460px;
    margin: 0;
}

.error-state__ref {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0.25rem 0 0;
}

    .error-state__ref code {
        background: var(--color-bg-tertiary);
        padding: 0.1rem 0.4rem;
        border-radius: var(--radius-sm);
    }

.error-state__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-lg);
    padding: 0.7rem 1.25rem;
    background: var(--color-primary);
    color: #ffffff;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast);
}

    .error-state__btn:hover {
        background: var(--color-primary-hover);
    }

/* Bandeau récapitulatif du dossier verrouillé (parcours « lancer depuis un dossier ») */
.launch-dossier-locked {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.launch-dossier-locked .bi {
    font-size: 1.25rem;
    color: var(--color-primary);
}

.launch-dossier-locked__label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-subtle);
}

.launch-dossier-locked__value {
    display: block;
    font-weight: 600;
    color: var(--color-text);
}

/* ============================================================
   Modale de lancement (partagée) — overlay, modale, en-tête, corps, pied.
   Globalisé (depuis LaunchRobotModal.razor.css) car l'isolation CSS de Blazor
   ne partage pas les styles scopés entre composants : ces classes sont rendues
   par LaunchRobotModal, LaunchRobotForm (composant enfant) ET LaunchFromDossierModal.
   NB : .btn-launch reste scopé à LaunchRobotForm (collision avec les boutons-icônes
   .btn-action.btn-launch des tables). .form-group/.form-label/.form-input sont déjà globaux.
   ============================================================ */

.launch-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(2px);
    z-index: var(--z-modal-overlay);
    align-items: center;
    justify-content: center;
}

.launch-overlay.show {
    display: flex;
    animation: launchFadeIn 0.2s ease;
}

.launch-modal {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 90%;
    max-width: 440px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: launchSlideUp 0.3s ease;
    overflow: hidden;
}

.launch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
}

.launch-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.launch-header h3 .bi-robot {
    color: var(--color-primary);
    font-size: 1.0625rem;
}

/* Encart de contexte : décrit le robot, sans concurrencer le formulaire.
   Clampé à 3 lignes ; déplié, sa hauteur reste bornée pour ne jamais
   comprimer les champs de saisie. */
.launch-note {
    flex-shrink: 0;
    margin: -0.375rem 1.5rem 0.75rem;
    padding: 0.75rem 0.875rem;
    background: var(--color-bg-secondary);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
}

.launch-note__text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-subtle);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.launch-note__text.is-expanded {
    display: block;
    max-height: 30vh;
    overflow-y: auto;
}

.launch-note__toggle {
    margin-top: 0.375rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
}

.launch-note__toggle:hover {
    text-decoration: underline;
}

.launch-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.launch-close:hover { background: var(--color-bg-tertiary); color: var(--color-text); }
.launch-close:disabled { opacity: 0.4; cursor: not-allowed; }

.launch-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.launch-loading {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    padding: 0.5rem 0;
}

.launch-description {
    color: var(--color-text-subtle);
    font-size: 0.875rem;
    margin: 0;
}

.launch-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.launch-required {
    color: var(--color-danger);
    font-weight: 700;
}

.launch-error {
    font-size: 0.8125rem;
    color: var(--color-danger);
    padding: 0.625rem 0.75rem;
    background: var(--color-danger-light);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-danger);
}

.launch-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
}

.launch-footer .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.launch-footer .btn-secondary:hover:not(:disabled) {
    background: var(--color-bg-tertiary);
}

.launch-footer .btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }

@keyframes launchFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes launchSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Logs SSE Agentix (JobStatusPanel) */
.agentix-log-stream {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-word;
}

/* Markdown rendu (logs et résultat Agentix) : titres et marges resserrés pour un panneau étroit. */
.agentix-log-stream h1,
.agentix-log-stream h2,
.agentix-log-stream h3,
.job-markdown h1,
.job-markdown h2,
.job-markdown h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.75rem 0 0.25rem;
}

.agentix-log-stream > :first-child,
.job-markdown > :first-child {
    margin-top: 0;
}

.agentix-log-stream p,
.agentix-log-stream ul,
.agentix-log-stream ol,
.job-markdown p,
.job-markdown ul,
.job-markdown ol {
    margin: 0 0 0.5rem;
}

.agentix-log-stream blockquote {
    margin: 0 0 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--color-border);
    color: var(--color-text-muted);
}

.agentix-log-stream blockquote p {
    margin: 0;
}

.job-markdown {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* =========================================================================
   Documentation (/documentation)
   Global et non scopé : le HTML rendu depuis le Markdown est injecté via
   MarkupString, il ne porte donc pas les attributs de scope Blazor et le CSS
   isolé ne lui serait jamais appliqué. Les classes de layout suivent par
   cohérence.
   ========================================================================= */

.doc-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.doc-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .doc-layout {
        grid-template-columns: 1fr;
    }
}

/* --- Sommaire --- */
.doc-nav {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.doc-nav__search {
    position: relative;
}

.doc-nav__search-icon {
    position: absolute;
    top: 50%;
    left: 0.65rem;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    pointer-events: none;
}

.doc-nav__search-input {
    width: 100%;
    padding: 0.5rem 0.65rem 0.5rem 2rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.875rem;
}

.doc-nav__search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.doc-nav__group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.doc-nav__group-label {
    margin-bottom: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.doc-nav__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.doc-nav__item:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.doc-nav__item.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
}

.doc-nav__badge {
    padding: 0.1rem 0.4rem;
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-sm);
    color: var(--color-warning-text);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.doc-nav__empty {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* --- Corps de page --- */
.doc-main {
    min-width: 0;
    padding: 1.75rem 2rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.doc-main__loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.doc-article__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.doc-article__eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.doc-article__title {
    margin: 0;
    color: var(--color-text);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
}

.doc-article__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
}

.doc-article__delete:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.doc-article__footer {
    padding-top: 1rem;
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* --- Rendu du Markdown (HTML injecté, donc styles globaux) --- */
.doc-content {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.doc-content > :first-child {
    margin-top: 0;
}

.doc-content h1,
.doc-content h2,
.doc-content h3,
.doc-content h4 {
    margin: 2rem 0 0.75rem;
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.3;
}

.doc-content h1 { font-size: 1.5rem; }
.doc-content h2 { font-size: 1.25rem; }
.doc-content h3 { font-size: 1.0625rem; }
.doc-content h4 { font-size: 0.9375rem; }

.doc-content p {
    margin: 0 0 1rem;
}

.doc-content ul,
.doc-content ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.doc-content li {
    margin-bottom: 0.35rem;
}

.doc-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.doc-content a:hover {
    color: var(--color-primary-hover);
}

.doc-content code {
    padding: 0.1rem 0.35rem;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
}

.doc-content pre {
    padding: 0.9rem 1rem;
    margin: 0 0 1rem;
    overflow-x: auto;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.doc-content pre code {
    padding: 0;
    background: none;
}

.doc-content blockquote {
    padding: 0.5rem 1rem;
    margin: 0 0 1rem;
    background: var(--color-bg-tertiary);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text-secondary);
}

.doc-content blockquote > :last-child {
    margin-bottom: 0;
}

.doc-content table {
    display: block;
    width: 100%;
    margin: 0 0 1rem;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.doc-content th,
.doc-content td {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--color-border);
    text-align: left;
}

.doc-content th {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    font-weight: 600;
}

.doc-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.doc-content hr {
    margin: 1.75rem 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

.doc-content--compact {
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

/* --- Section Robots --- */
.doc-robots__intro {
    margin-bottom: 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.doc-robots {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.doc-robot {
    padding: 1.25rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* Ligne unique : chevron, nom, informations courtes puis badge et action. Les tags
   ne passent à la ligne que si la largeur l'impose. */
/* La fiche est focusée par programme quand un lien profond l'amène à l'écran : pas de contour
   dans ce cas, mais :focus-visible reste géré par défaut pour la navigation au clavier. */
.doc-robot:focus {
    outline: none;
}

.doc-robot__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.doc-robot__name {
    margin: 0;
    color: var(--color-text);
    font-size: 1.0625rem;
    font-weight: 700;
}

.doc-robot__toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.doc-robot__toggle:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-primary);
}

.doc-robot__toggle i {
    transition: transform var(--transition-fast);
}

.doc-robot.is-expanded .doc-robot__toggle i {
    transform: rotate(180deg);
}

.doc-robot__badge {
    flex-shrink: 0;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.doc-robot__badge--available {
    background: var(--color-success-light);
    color: var(--color-success);
}

.doc-robot__badge--on-demand {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
}

/* Dans la ligne de titre, collés au nom : pas de flex-grow, sinon les tags s'étalent en
   colonne au lieu de rester côte à côte. C'est le bloc d'actions qui est poussé à droite.
   Si la largeur ne suffit plus, tout le bloc passe à la ligne d'un coup. */
.doc-robot__meta {
    display: flex;
    flex-wrap: wrap;
    flex: 0 1 auto;
    min-width: 0;
    gap: 0.4rem;
}

.doc-robot__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    /* LARGEUR du logo Agentix rendu par RobotPlatformIcon dans le tag de plateforme :
       le font-size du tag, que les glyphes bi voisins adoptent aussi. */
    --rpi-size: 0.75rem;
}

/* Replié : deux lignes de résumé, assez pour identifier le robot sans déployer la fiche. */
.doc-robot__summary {
    margin: 0.75rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.doc-robot.is-expanded .doc-robot__summary {
    display: block;
}

.doc-robot__empty {
    margin: 0.75rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-style: italic;
}

/* --- Éditeur Markdown --- */
.doc-editor {
    width: min(1100px, 95vw);
    max-width: none;
}

.doc-editor__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.doc-editor__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1rem;
}

.doc-editor__meta-narrow {
    max-width: 180px;
}

.doc-editor__checkbox {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-top: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
}

.doc-editor__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 800px) {
    .doc-editor__split {
        grid-template-columns: 1fr;
    }
}

.doc-editor__pane {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.doc-editor__pane-label {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.doc-editor__textarea {
    min-height: 360px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    resize: vertical;
}

.doc-editor__preview {
    min-height: 360px;
    max-height: 55vh;
    padding: 0.9rem 1rem;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* Édition de la fiche d'un robot depuis la page Documentation */
.doc-robot__header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.doc-robot__edit {
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
}

.form-hint--error {
    color: var(--color-danger);
    font-weight: 600;
}