/* Modern UI with WikiPro Solutions Navy & Teal Theme */
:root {
    --primary-green: #123A63;
    --medium-green: #00A9AA;
    --light-green: #CDEEF0;
    --accent-green: #001B3E;
    
    --primary-gradient: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-green) 100%);
    --secondary-gradient: linear-gradient(135deg, var(--medium-green) 0%, var(--primary-green) 100%);
    --success-gradient: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
    --warning-gradient: linear-gradient(135deg, #FFA726 0%, #FF9800 100%);
    --danger-gradient: linear-gradient(135deg, #E53935 0%, #D32F2F 100%);
    
    --sidebar-bg: var(--accent-green);
    --sidebar-text: #ecf0f1;
    --sidebar-active: var(--medium-green);
    
    --main-bg: linear-gradient(135deg, #F4F6F9 0%, #FFFFFF 100%);
    --card-bg: rgba(255, 255, 255, 0.95);
    --text-primary: #2d3436;
    --text-secondary: #636e72;
    
    --border-radius: 12px;
    --shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 35px 0 rgba(0, 0, 0, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--main-bg);
    min-height: 100vh;
    color: var(--text-primary);
}

/* Layout */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    /* Le menu défile seul. Sans ceci, la molette au-dessus du menu, arrivée
       en bout de course — ou sur un écran assez haut pour qu'il n'ait rien
       à défiler —, continuait sur la page derrière : on croyait le menu
       bloqué et la page bougeait à sa place. */
    overscroll-behavior: contain;
    transition: all 0.3s ease;
    z-index: 1000;
}

.sidebar-header {
    padding: 1.25rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    padding: 0 10px;
}

.logo-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    background: transparent;
    padding: 5px;
    margin: 0 auto;
    display: block;
    filter: brightness(1.2) contrast(1.1);
    transition: transform 0.3s ease;
    transform: scale(1.15);
}

.logo-image:hover {
    transform: scale(1.2);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.user-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.user-info:hover::before {
    left: 100%;
}

.user-info:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.user-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sidebar-active);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.user-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.user-avatar .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.user-avatar .avatar-initials {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.avatar-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid var(--sidebar-bg);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.user-details {
    flex: 1;
    min-width: 0;
    transition: all 0.3s ease;
}

.user-name {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-menu {
    list-style: none;
    padding: 1rem 0;
}

.nav-item {
    margin: 0.2rem 1rem;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 1rem;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    gap: 1rem;
}

.nav-link:hover,
.nav-link.active {
    background: var(--sidebar-active);
    transform: translateX(5px);
}

.nav-icon {
    font-size: 1.2rem;
}

/* Main Content */
.main-content {
    flex: 1;
    /* A flex item defaults to min-width:auto, so it refuses to shrink below
       its widest child -- a wide table then stretched this panel past the
       viewport and the whole page scrolled sideways, dragging the layout out
       of alignment. min-width:0 lets it shrink so the inner
       .table-container/.table-wrapper scroll their own content instead. */
    min-width: 0;
    margin-left: 260px;
    padding: 1.5rem;
    transition: margin-left 0.3s ease;
}

/* Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    background: var(--card-bg);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.page-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Modern Header Styles */
.modern-header {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.modern-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.modern-header .header-text {
    flex: 1;
}

.modern-header .page-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.modern-header .title-gradient {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modern-header .welcome-text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.modern-header .user-name {
    color: var(--text-primary);
    font-weight: 600;
}

.modern-header .session-info {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}

.modern-header .session-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.modern-header .session-label {
    color: var(--text-secondary);
}

.modern-header .online-time,
.modern-header .current-date {
    font-weight: 600;
    color: var(--text-primary);
}

.modern-header .header-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.modern-header .quick-stats {
    display: flex;
    gap: 2rem;
}

.modern-header .quick-stat {
    text-align: center;
}

.modern-header .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modern-header .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.live-clock {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--card-bg);
    padding: 1.25rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
}

.stat-value {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Category Cards (inspired by cloud.png) */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.category-card {
    background: var(--card-bg);
    padding: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* Flat navy at rest; each card's gradient fades in on hover/select.
   A gradient can't be transitioned smoothly against a solid color (the
   browser jump-cuts instead of blending), so the gradient lives on a
   ::before overlay whose opacity fades in instead -- that animates
   cleanly with no flash. */
.category-card.pictures,
.category-card.documents,
.category-card.videos,
.category-card.audio {
    position: relative;
    background: var(--accent-green);
    color: white;
    overflow: hidden;
    transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card.pictures::before,
.category-card.documents::before,
.category-card.videos::before,
.category-card.audio::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.category-card.pictures > *,
.category-card.documents > *,
.category-card.videos > *,
.category-card.audio > * {
    position: relative;
    z-index: 1;
}

.category-card.pictures::before { background: linear-gradient(135deg, var(--accent-green) 0%, var(--medium-green) 100%); }
.category-card.documents::before { background: var(--secondary-gradient); }
.category-card.videos::before { background: linear-gradient(135deg, var(--accent-green) 0%, var(--medium-green) 100%); }
.category-card.audio::before { background: linear-gradient(135deg, var(--medium-green) 0%, var(--light-green) 100%); }

.category-card.pictures:hover::before,
.category-card.pictures.selected::before,
.category-card.documents:hover::before,
.category-card.documents.selected::before,
.category-card.videos:hover::before,
.category-card.videos.selected::before,
.category-card.audio:hover::before,
.category-card.audio.selected::before {
    opacity: 1;
}

.category-card.audio:hover,
.category-card.audio.selected { color: var(--accent-green); }

.category-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.category-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.category-count {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Forms */
.form-container {
    background: var(--card-bg);
    padding: 1.1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.form-group {
    margin-bottom: 0.75rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--medium-green);
    box-shadow: 0 0 0 3px rgba(0, 169, 170, 0.1);
}

.btn {
    padding: 0.55rem 1.25rem;
    border: none;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

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

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

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

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

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Tables */
.table-container {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    /* Was overflow:hidden, which silently clipped every wide table -- the
       columns past the edge were simply unreachable on a narrow window. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.9rem;
}

.table th {
    background: #f8f9fa;
    font-weight: 600;
    color: var(--text-primary);
}

.table tbody tr:hover {
    background: #f8f9fa;
}

/* Chart Container */
.chart-container {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

/* Flash Messages */
.flash-messages {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 9999;
}

.flash-message {
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
    color: white;
    font-weight: 500;
    box-shadow: var(--shadow);
    animation: slideInRight 0.3s ease;
}

.flash-success {
    background: var(--success-gradient);
}

.flash-error {
    background: var(--danger-gradient);
}

.flash-info {
    background: var(--primary-gradient);
}

.flash-warning {
    background: var(--warning-gradient);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive */
/* Mobile drawer trigger -- hidden on desktop, where the sidebar is always in
   view. Sits above the sidebar so it can also close it. */
.menu-toggle {
    display: none;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1100;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: var(--sidebar-bg);
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
}

@media (max-width: 768px) {
    .sidebar {
        margin-left: -260px;
    }

    .sidebar.open {
        margin-left: 0;
    }

    .menu-toggle {
        display: flex;
    }

    .sidebar-backdrop.visible {
        display: block;
    }

    .main-content {
        margin-left: 0;
        padding: 1rem;
        /* clear the fixed drawer button */
        padding-top: 4.25rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Login Page */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--main-bg);
}

.login-card {
    background: var(--card-bg);
    padding: 3rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 400px;
}

.login-title {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    max-width: 280px;
    width: 100%;
    height: auto;
}

/* Dark Mode Support */
.dark-mode {
    --card-bg: rgba(45, 52, 54, 0.95);
    --text-primary: #ddd;
    --text-secondary: #b2bec3;
}

.dark-mode .sidebar {
    background: #1a252f;
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

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

/* Compact Header and Stats for Dashboard */
.compact-header {
    padding: 0.75rem 2rem !important;
    min-height: auto !important;
}

.compact-header .header-content {
    padding: 0 !important;
}

.compact-header .page-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem !important;
}

.compact-header .welcome-text {
    font-size: 0.9rem !important;
    margin-bottom: 0.25rem !important;
}

.month-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
}

.month-stats .stat-card {
    flex: 1 1 130px;
    padding: 0.6rem 0.9rem;
    min-width: 130px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.month-stats .stat-card .stat-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.15rem;
}

.month-stats .stat-card .stat-content {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.month-stats .stat-card .stat-value {
    font-size: 1.3rem;
    margin-bottom: 0.1rem;
}

.month-stats .stat-card .stat-label {
    font-size: 0.7rem;
}


/* Dashboard Specific Compact Styles */
#entry-form .form-group {
    margin-bottom: 0.5rem !important;
}

#entry-form .form-label {
    margin-bottom: 0.25rem !important;
    font-size: 0.9rem !important;
}

#entry-form .form-control {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.95rem !important;
}

#entry-form textarea.form-control {
    min-height: 45px !important;
    max-height: 70px !important;
}

.courtier-info-box {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary, #f5f7fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-left: 3px solid var(--primary-color, #123A63);
    border-radius: 6px;
    font-size: 0.85rem;
}

.courtier-info-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    color: var(--text-secondary);
}

/* **Une adresse longue revient à la ligne au lieu de sortir du cadre.**
   `white-space: nowrap` tenait chaque ligne d'un seul tenant : une rue de
   soixante caractères débordait de la fiche et passait par-dessus la
   colonne voisine. Le téléphone et le numéro d'entreprise, eux, restent
   insécables — ils ne se lisent qu'entiers. */
.courtier-info-details span {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.courtier-info-details span.nowrap { white-space: nowrap; }

.courtier-info-details i {
    color: var(--primary-color, #123A63);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.courtier-info-comments { min-width: 0; overflow-wrap: anywhere; }

.courtier-info-comments {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border-color, #e0e0e0);
    color: var(--text-primary);
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-style: italic;
}

.courtier-info-comments i {
    color: #F57C00;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* Entry form top section: Date/Heure on the left, Minutes/Type d'acte
   directly beneath them, Courtier in the middle (fiche box grows below
   it), and the today's-activity box on the right -- all four areas keep
   their own column so the grid stays aligned regardless of which box
   grows taller (fiche text vs. stats). */
.entry-form-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 1.9fr;
    /* Une rangée pour les pastilles de type d'acte : elles remplacent les
       cinq grandes tuiles bleu marine qui occupaient un écran entier avant
       le formulaire. Dans une cellule elles s'empilaient une par ligne ; en
       aire nommée, elles tiennent sur une rangée sous les champs. */
    grid-template-areas:
        "date    heure   courtier stats"
        "minutes typeact courtier stats"
        "chips   chips   chips    stats"
        "prec    prec    prec     stats";
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.field-date { grid-area: date; }
.field-heure { grid-area: heure; }
.field-minutes { grid-area: minutes; }
.field-type-acte { grid-area: typeact; }
.type-chips { grid-area: chips; }
/* La précision suit les pastilles, et pour la même raison qu'elles : dans
   une cellule de la grille, ses boutons s'empilent un par ligne sur cent
   vingt-cinq pixels. En aire nommée, ils tiennent sur une rangée. */
.sous-actes { grid-area: prec; }
.field-courtier { grid-area: courtier; }
.field-courtier-stats { grid-area: stats; }

@media (max-width: 900px) {
    .entry-form-top-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "date     heure"
            "minutes  typeact"
            "chips    chips"
            "prec     prec"
            "courtier courtier"
            "stats    stats";
    }
}

.courtier-today-stats {
    margin-top: 0.4rem;
    padding: 0.6rem;
    background: #f2fbfb;
    border: 1px solid var(--light-green, #CDEEF0);
    border-left: 3px solid var(--medium-green, #00A9AA);
    border-radius: 6px;
}

.courtier-today-stats .cts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.courtier-today-stats .cts-item {
    background: white;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
}

.courtier-today-stats .cts-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    margin-bottom: 0.15rem;
}

.courtier-today-stats .cts-label i {
    color: var(--medium-green, #00A9AA);
    width: 12px;
    text-align: center;
}

.courtier-today-stats .cts-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-green);
}

.courtier-today-stats .cts-value small {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: 0.2rem;
}

.courtier-today-stats .cts-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

/* Placeholder state (no courtier picked yet): the box stays put so its
   label never hangs over an empty gap, but reads as "awaiting selection"
   rather than as real zeroes. Same height, so nothing shifts on select. */
.courtier-today-stats.is-empty {
    background: #fafbfc;
    border-color: #e8ebee;
    border-left-color: #cfd6dc;
}

.courtier-today-stats.is-empty .cts-item {
    border-style: dashed;
    background: transparent;
}

.courtier-today-stats.is-empty .cts-label,
.courtier-today-stats.is-empty .cts-label i {
    color: #b6bec6;
}

.courtier-today-stats .cts-dash {
    color: #c3cad1;
}

/* View Buttons for Chart Navigation */
.view-buttons {
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.25rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.view-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.view-btn:hover {
    background: var(--light-green);
    color: var(--primary-green);
}

.view-btn.active {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 8px rgba(18, 58, 99, 0.3);
}

.view-btn i {
    font-size: 0.9rem;
}

/* Enhanced Category Cards with Scanning Style */
.category-card.scanning {
    position: relative;
    background: var(--accent-green);
    color: white;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card.scanning::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--medium-green) 100%);
}

.category-card.scanning > * {
    position: relative;
    z-index: 1;
}

.category-card.scanning:hover,
.category-card.scanning.selected {
    transform: translateY(-5px) scale(1.02);
}

.category-card.scanning:hover::before,
.category-card.scanning.selected::before {
    opacity: 1;
}

/* Selected Category Card */
.category-card.selected {
    box-shadow: 0 0 0 3px var(--medium-green), 0 8px 32px rgba(0, 169, 170, 0.3);
    transform: scale(1.05);
}

/* Compact Table Style */
.compact-table {
    font-size: 0.9rem;
}

.compact-table table {
    width: 100%;
}

.compact-table th,
.compact-table td {
    padding: 0.5rem 0.75rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-table td:last-child {
    max-width: 100px;
}

/* Enhanced Description Field */
textarea.form-control {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5;
    padding: 0.75rem;
}

textarea.form-control:focus {
    border-color: var(--medium-green);
    box-shadow: 0 0 0 3px rgba(0, 169, 170, 0.1);
}

/* Chart Legend Avatar Styling */
.chart-container canvas {
    position: relative;
}

.chart-container .chartjs-legend img {
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    object-fit: cover !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    margin-right: 8px !important;
}

/* Chart.js legend custom styling for avatar images */
.chartjs-tooltip .avatar-img,
canvas .avatar-img {
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
   Module IA -- Helpdesk (cahier des charges §10)

   Reprend les variables et les conventions existantes (cartes, badges,
   tableaux) plutôt que d'introduire un second langage visuel : le
   gestionnaire passe de la file au formulaire de temps sans changer de
   repères.
   ========================================================================== */

.helpdesk-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.filter-chip {
    padding: 6px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(18, 58, 99, 0.15);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.88rem;
    transition: all 0.15s ease;
}

.filter-chip:hover { border-color: var(--medium-green); }

.filter-chip.active {
    background: var(--primary-gradient);
    color: #fff;
    border-color: transparent;
}

/* --- file des dossiers --------------------------------------------------- */

.helpdesk-table .ticket-subject {
    font-weight: 600;
    color: var(--primary-green);
    text-decoration: none;
}

.helpdesk-table .ticket-subject:hover { text-decoration: underline; }

.ticket-meta {
    font-size: 0.8rem;
    color: #7a8a99;
    margin-top: 3px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Le retard de prise en charge doit se voir sans lire la colonne échéance. */
.helpdesk-table .row-breached {
    background: rgba(229, 57, 53, 0.06);
}

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 0.74rem;
    font-weight: 600;
    background: rgba(18, 58, 99, 0.08);
    color: var(--primary-green);
    white-space: nowrap;
}

.badge.urgency-urgent { background: var(--danger-gradient); color: #fff; }
.badge.urgency-normal { background: rgba(0, 169, 170, 0.15); color: #00696a; }
.badge.urgency-faible { background: rgba(120, 130, 140, 0.15); color: #56616b; }
.badge.badge-state { background: var(--secondary-gradient); color: #fff; }
.badge.badge-thread { background: rgba(18, 58, 99, 0.1); }
.badge.badge-warning { background: var(--warning-gradient); color: #fff; }
.badge.badge-muted { background: rgba(120, 130, 140, 0.15); color: #56616b; }

.confidence { font-weight: 600; font-size: 0.82rem; }
.confidence-élevée { color: #2e7d32; }
.confidence-moyenne { color: #ef6c00; }
.confidence-faible { color: #c62828; }

/* --- détail d'un dossier ------------------------------------------------- */

.ticket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}

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

.ticket-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.back-link {
    display: inline-block;
    margin-bottom: 6px;
    color: #7a8a99;
    text-decoration: none;
    font-size: 0.86rem;
}

.back-link:hover { color: var(--primary-green); }

.card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 12px rgba(18, 58, 99, 0.07);
}

.card h2 {
    font-size: 1rem;
    margin: 0 0 10px;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-note {
    font-size: 0.83rem;
    color: #7a8a99;
    margin: -4px 0 14px;
}

.synthesis { line-height: 1.6; margin-bottom: 14px; }

.qualification {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 0;
}

.qualification dt {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #7a8a99;
}

.qualification dd { margin: 2px 0 0; font-weight: 600; }

/* --- recommandations ----------------------------------------------------- */

.recommendation {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(18, 58, 99, 0.08);
    align-items: flex-start;
}

.recommendation:first-of-type { border-top: none; }
.recommendation-body { flex: 1; min-width: 0; }
.recommendation h3 { font-size: 0.94rem; margin: 0 0 5px; }

.justification {
    font-size: 0.87rem;
    color: #55636f;
    margin: 0 0 7px;
    line-height: 1.5;
}

.sources { font-size: 0.8rem; margin: 0; }

/* La source est ce qui permet de contrôler plutôt que de croire : elle est
   mise en avant, et son absence est dite explicitement. */
.source-chip {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 3px 2px 0;
    border-radius: 9px;
    background: rgba(0, 169, 170, 0.12);
    color: #00696a;
    font-size: 0.76rem;
}

.sources-empty { color: #b26a00; }

.recommendation-actions { display: flex; gap: 6px; flex-shrink: 0; }

.btn-sm { padding: 5px 11px; font-size: 0.8rem; }
.btn-outline {
    background: transparent;
    border: 1px solid rgba(18, 58, 99, 0.25);
    color: var(--primary-green);
}
.btn-block { display: block; width: 100%; text-align: center; margin-top: 8px; }

/* --- brouillon ----------------------------------------------------------- */

.draft-area {
    font-family: inherit;
    line-height: 1.55;
    resize: vertical;
    min-height: 220px;
}

.form-actions { display: flex; gap: 8px; margin-top: 10px; }

/* --- fil de messages ----------------------------------------------------- */

.mail-message {
    padding: 12px 0;
    border-top: 1px solid rgba(18, 58, 99, 0.08);
}

.mail-message:first-of-type { border-top: none; }

.mail-message header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.mail-body {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.55;
    background: rgba(18, 58, 99, 0.03);
    padding: 12px;
    border-radius: 8px;
    margin: 0;
}

.attachments { font-size: 0.8rem; color: #7a8a99; margin: 8px 0 0; }

/* --- colonne latérale ---------------------------------------------------- */

.prediction { font-size: 0.9rem; margin: 0 0 8px; }

.source-list, .history-list, .event-list, .motif-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.83rem;
}

.source-list li, .history-list li { padding: 5px 0; }

.source-id {
    display: inline-block;
    min-width: 26px;
    font-weight: 600;
    color: var(--medium-green);
}

.event-list { max-height: 340px; overflow-y: auto; }

.event-list li {
    padding: 6px 0;
    border-top: 1px solid rgba(18, 58, 99, 0.06);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-time { color: #7a8a99; font-size: 0.76rem; }
.event-type { font-weight: 600; color: var(--primary-green); }
.event-actor { color: #55636f; }
.event-detail { color: #7a8a99; font-size: 0.78rem; }

.motif-list li { padding: 5px 0; }

/* --- supervision --------------------------------------------------------- */

.supervision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: #7a8a99;
}

.empty-state i { font-size: 2.2rem; margin-bottom: 10px; opacity: 0.5; }

.text-muted { color: #7a8a99; }
.text-danger { color: #c62828; font-weight: 600; }
.text-success { color: #2e7d32; }

/* --- formulaire de temps de gestion --------------------------------------- */

.form-row { margin-bottom: 14px; }

.form-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-green);
    margin-bottom: 4px;
}

.readonly-value { margin: 0; font-weight: 600; }

.field-hint {
    font-size: 0.79rem;
    color: #7a8a99;
    margin: 4px 0 0;
}

/* --- administration du module IA ------------------------------------------ */

.warning-list { margin: 8px 0 0 18px; padding: 0; }
.warning-list li { margin-bottom: 4px; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}

.form-row-wide { grid-column: 1 / -1; }

.checkbox-group { display: flex; flex-direction: column; gap: 4px; }

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 10px;
    cursor: pointer;
}

.checkbox-row input { margin-top: 3px; flex-shrink: 0; }

.config-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.config-link {
    display: block;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(18, 58, 99, 0.12);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.config-link:hover {
    border-color: var(--medium-green);
    box-shadow: 0 2px 10px rgba(18, 58, 99, 0.08);
}

.config-link i { color: var(--medium-green); font-size: 1.1rem; }
.config-link strong { display: block; margin: 6px 0 3px; }
.config-link span { font-size: 0.8rem; color: #7a8a99; }

.partnership-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-form { display: inline; }

.partnership-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 14px;
    background: rgba(0, 169, 170, 0.12);
    color: #00696a;
    font-size: 0.84rem;
    font-weight: 600;
}

.partnership-chip button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    opacity: 0.6;
}

.partnership-chip button:hover { opacity: 1; color: #c62828; }

.row-inactive { opacity: 0.55; }

.actions-cell form { display: flex; gap: 4px; }

.absences {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(18, 58, 99, 0.08);
}

.absences h3 { font-size: 0.9rem; margin: 0 0 8px; color: var(--primary-green); }

.absence-list { list-style: none; padding: 0; margin: 0 0 10px; font-size: 0.85rem; }
.absence-list li { padding: 4px 0; }

.absence-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.absence-form .form-control { width: auto; flex: 0 1 170px; }

.btn-link {
    background: none;
    border: none;
    color: #7a8a99;
    cursor: pointer;
    padding: 0 4px;
}

.btn-link:hover { color: #c62828; }

/* --- intégrations --------------------------------------------------------- */

.integration-card { scroll-margin-top: 20px; }

.integration-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.integration-head h2 { margin-bottom: 2px; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-ok { background: rgba(76, 175, 80, 0.15); color: #2e7d32; }
.status-error { background: rgba(229, 57, 53, 0.13); color: #c62828; }
.status-pending { background: rgba(255, 167, 38, 0.16); color: #b26a00; }
.status-todo { background: rgba(120, 130, 140, 0.14); color: #56616b; }

.test-result {
    padding: 10px 13px;
    border-radius: 8px;
    font-size: 0.86rem;
    margin: 12px 0;
    line-height: 1.5;
}

.test-ok { background: rgba(76, 175, 80, 0.1); color: #1b5e20; }
.test-error { background: rgba(229, 57, 53, 0.09); color: #a02020; }

.setup-guide {
    margin: 14px 0;
    border: 1px solid rgba(18, 58, 99, 0.12);
    border-radius: 9px;
    padding: 10px 14px;
    background: rgba(18, 58, 99, 0.02);
}

.setup-guide summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--primary-green);
}

.setup-steps { margin: 12px 0 4px; padding-left: 20px; }
.setup-steps li { margin-bottom: 14px; }
.setup-steps strong { display: block; margin-bottom: 3px; }
.setup-steps p { margin: 0 0 6px; font-size: 0.85rem; color: #55636f; line-height: 1.5; }

.setup-command {
    background: var(--accent-green);
    color: #e8f4f5;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 0.79rem;
    overflow-x: auto;
    margin: 0 0 6px;
    user-select: all;
}

.setup-link { font-size: 0.82rem; color: var(--medium-green); text-decoration: none; }
.setup-link:hover { text-decoration: underline; }

.integration-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(18, 58, 99, 0.08);
}

.integration-actions form { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------
   Notifications et registre d'incidents (§5.3, §7.2, §9.3)
   ------------------------------------------------------------------ */

/* Compteur d'alertes de la barre latérale. Rouge et non discret : c'est
   ce qui distingue une alerte active d'une information consultable. */
.nav-badge {
    margin-left: auto;
    background: #c0392b;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 9px;
    text-align: center;
}

.notification-list { display: flex; flex-direction: column; }

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid #eceff1;
}

.notification-item:last-child { border-bottom: none; }

/* Non lue : fond marqué et filet à gauche. Une liste où lu et non-lu se
   ressemblent se parcourt une fois puis plus jamais. */
.notification-unread {
    background: #fdf6e3;
    border-left: 3px solid #d68910;
    padding-left: 10px;
}

.notification-icon { color: #7a8a99; padding-top: 2px; }
.notification-unread .notification-icon { color: #d68910; }
.notification-body { flex: 1; min-width: 0; }
.notification-action { flex-shrink: 0; }

/* Ligne d'incident ouvert. */
.row-alert { background: #fdf3f2; }

.badge-danger { background: #c0392b; color: #fff; }
.badge-warning { background: #d68910; color: #fff; }

/* Formulaire de clôture posé dans une cellule de tableau. */
.inline-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}

.inline-form input[type="text"] {
    min-width: 160px;
    padding: 4px 8px;
    font-size: 0.85rem;
}

.form-group-wide { grid-column: 1 / -1; }

/* Habilitations par boîte (§6.1) : repliées par défaut, la liste des
   gestionnaires ne doit pas écraser le tableau des boîtes. */
.authorisation-cell summary { cursor: pointer; }
.authorisation-cell form {
    margin-top: 8px;
    padding: 8px;
    background: #f7f9fa;
    border-radius: 4px;
    min-width: 200px;
}
.checkbox-line {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 3px;
    cursor: pointer;
}

/* Bloc de commande à copier (écran Sauvegardes). */
.code-block {
    background: #1e2a35;
    color: #e6edf3;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

/* Journal des modifications : le détail champ par champ.
   Sans lui, une ligne dit qu'une modification a eu lieu sans dire
   laquelle — on sait qu'un tarif a bougé, pas de combien. */
.audit-diff { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.audit-diff li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 2px 0;
}
.audit-field { font-weight: 600; }
.audit-before { text-decoration: line-through; opacity: 0.65; }
.audit-after { font-weight: 600; }
.audit-diff i { font-size: 10px; opacity: 0.6; }

/* Complétion « fantôme » : la fin du mot en grisé, derrière le champ.
   Le champ garde son fond transparent pour laisser voir le calque ; c'est
   lui qui reçoit la frappe, le calque ne fait que peindre. */
.ghost-wrap { position: relative; display: block; }
.ghost-wrap > input { position: relative; background: transparent; z-index: 1; }
.ghost-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    font: inherit;
    white-space: pre;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.ghost-typed { visibility: hidden; }
.ghost-rest { opacity: 0.42; }

/* Le champ de recherche courtier précède le select : un petit espace les
   sépare pour qu'on voie qu'ils vont ensemble sans les confondre. */
#courtier-search { margin-bottom: 0.4rem; }

/* ==========================================================================
   Outils de tableau : filtre, tri, en-tête collant
   --------------------------------------------------------------------------
   Ajoutés au chargement sur les tableaux longs et non modifiables. Les
   styles restent discrets : ces écrans sont ceux que le cabinet connaît, et
   la lisibilité ne doit pas se payer en dépaysement.
   ========================================================================== */

.table-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.table-tools-search {
    flex: 1 1 220px;
    max-width: 340px;
    padding: 7px 11px;
    border: 1px solid var(--border-color, #dfe3ea);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
}

.table-tools-search:focus {
    outline: none;
    border-color: var(--primary-color, #2f6fed);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.13);
}

.table-tools-count {
    font-size: 12.5px;
    color: var(--text-secondary, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* En-tête collant : sur deux cents lignes, on perdait les intitulés en
   défilant et il fallait remonter pour savoir quelle colonne on lisait. */
.has-table-tools thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-alt, #f4f6fa);
}

.has-table-tools thead th.is-sortable {
    cursor: pointer;
    user-select: none;
    padding-right: 20px;
    position: sticky;
}

.has-table-tools thead th.is-sortable::after {
    content: '↕';
    position: absolute;
    right: 7px;
    opacity: 0.28;
    font-size: 11px;
}

.has-table-tools thead th.is-asc::after { content: '↑'; opacity: 0.85; }
.has-table-tools thead th.is-desc::after { content: '↓'; opacity: 0.85; }

.has-table-tools thead th.is-sortable:hover { color: var(--primary-color, #2f6fed); }

.has-table-tools thead th.is-sortable:focus-visible {
    outline: 2px solid var(--primary-color, #2f6fed);
    outline-offset: -2px;
}

/* ==========================================================================
   Barre de commande
   --------------------------------------------------------------------------
   Ctrl+K depuis n'importe quel écran. Elle se superpose plutôt que de
   remplacer : on revient d'un Échap à l'endroit où l'on était.
   ========================================================================== */

.cmd-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

.cmd-overlay.is-open { display: flex; }

.cmd-panel {
    width: 100%;
    max-width: 620px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.cmd-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #e8ebf0;
}

.cmd-field > i { color: #8a94a6; }

.cmd-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: inherit;
    background: transparent;
}

.cmd-list { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }

.cmd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    cursor: pointer;
}

.cmd-item.is-active { background: #eef3ff; }
.cmd-item > i { width: 18px; text-align: center; color: #6b7280; font-size: 13px; }
.cmd-item.is-active > i { color: #2f6fed; }

.cmd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmd-body strong { font-size: 14px; font-weight: 600; }

.cmd-detail, .cmd-answer { font-size: 12.5px; color: #6b7280; }
/* Une réponse chiffrée n'est pas un détail : c'est ce qu'on est venu
   chercher, et ouvrir un écran pour la lire serait un détour. */
.cmd-answer { color: #2f6fed; font-weight: 600; }

.cmd-kind {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #98a2b3;
    white-space: nowrap;
}

.cmd-empty { padding: 18px 14px; text-align: center; color: #6b7280; font-size: 13.5px; }

.cmd-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 9px 16px;
    border-top: 1px solid #e8ebf0;
    background: #f8fafc;
    font-size: 11.5px;
    color: #6b7280;
}

.cmd-hint { margin-left: auto; }

.cmd-field kbd, .cmd-foot kbd {
    padding: 1px 5px;
    border: 1px solid #d6dbe3;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 10.5px;
}

@media (max-width: 560px) {
    .cmd-overlay { padding-top: 8vh; }
    .cmd-hint { display: none; }
}

/* Saisie en une phrase : au-dessus du formulaire, jamais à sa place. */
.form-quick-entry { grid-column: 1 / -1; }
.quick-entry-row { display: flex; gap: 8px; align-items: center; }
.quick-entry-row input { flex: 1; }
#quick-entry-note { display: block; margin-top: 4px; min-height: 1.1em; }

/* Un champ rempli par la phrase se signale brièvement : on doit voir ce
   qui a été posé pour soi, et donc ce qu'il faut relire. */
.is-prefilled {
    animation: prefilled 1.4s ease-out;
}
@keyframes prefilled {
    0%   { background-color: rgba(47, 111, 237, 0.16); }
    100% { background-color: transparent; }
}

/* Aucune cellule de grille ne déborde sur sa voisine — voir la note
   détaillée dans `ai-module.css`. Un élément de grille vaut
   `min-width: auto` et refuse de rétrécir sous son contenu ; un texte sans
   espace élargit alors sa colonne et empiète sur la suivante. */
.category-grid > *,
.config-links > *,
.courtier-today-stats .cts-grid > *,
.entry-form-top-grid > *,
.form-grid > *,
.qualification > *,
.stats-grid > *,
.supervision-grid > * { min-width: 0; }

/* L'éditeur d'entrées : les chiffres sur une ligne.

   Cinq cartes dégradées occupaient l'écran entier avant le premier filtre,
   alors qu'on vient ici chercher une entrée et la corriger. Les mêmes
   chiffres tiennent sur une ligne. */
.stats-line {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: baseline;
    padding: 0 0 0.9rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #e3e9ee;
    font-size: 0.85rem;
    color: #5b6b7c;
}
.stats-line b {
    color: #17222e;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   Liens (2026-08-30) : de la couleur de la marque, sans soulignement hors
   survol — sur tous les écrans, hérités compris. Un lien bleu souligné au
   milieu d'un tableau lit comme une page web des années 2000.
   -------------------------------------------------------------------------- */
:where(.main-content a:not(.btn):not(.btn-small):not(.nav-link)) { color: var(--primary-green); text-decoration: none; }
:where(.main-content a:not(.btn):not(.btn-small):not(.nav-link):hover) { text-decoration: underline; }

/* Rapports : des tuiles blanches, pas des pavés bleu marine. */
.category-card.pictures, .category-card.documents, .category-card.videos, .category-card.audio, .category-card.scanning {
    background: #fff; color: #17222e; border: 1px solid #e3e9ee;
}
.category-card.pictures::before, .category-card.documents::before, .category-card.videos::before,
.category-card.audio::before, .category-card.scanning::before { display: none; }
.category-card.pictures > *, .category-card.documents > *, .category-card.videos > *,
.category-card.audio > *, .category-card.scanning > * { color: inherit; }
.category-card .category-icon { color: var(--medium-green); }
.category-card .category-title { color: #17222e; }
.category-card .category-count { color: #5b6b7c; }
.category-card:hover { border-color: var(--primary-green); }

/* ==========================================================================
   Masque de saisie — retours de l'équipe (2026-09-16)
   ========================================================================== */

/* Les pastilles de type d'acte : un symbole et une couleur par type, en
   pastel décalé depuis la palette marine / sarcelle. La pastille choisie
   se remplit de sa propre teinte. Chargé après ai-module.css, d'où la
   double classe pour l'emporter sur `.type-chip` et `.type-chip.is-picked`. */
.type-chip i { margin-right: 4px; font-size: 0.8em; }

.type-chip.acte-sinistre      { background: #FDE8E6; border-color: #F2C2BC; color: #A73A2E; }
.type-chip.acte-production    { background: #E3F6EE; border-color: #B9E4D1; color: #1B7A58; }
.type-chip.acte-administratif { background: #E7EEF8; border-color: #C3D3EA; color: #123A63; }
.type-chip.acte-scanning      { background: #EFE9F8; border-color: #D3C6EC; color: #5B3F9E; }
.type-chip.acte-appel         { background: #E0F5F6; border-color: #B3E3E4; color: #0C7F80; }

.type-chip.acte-sinistre:hover      { border-color: #A73A2E; }
.type-chip.acte-production:hover    { border-color: #1B7A58; }
.type-chip.acte-administratif:hover { border-color: #123A63; }
.type-chip.acte-scanning:hover      { border-color: #5B3F9E; }
.type-chip.acte-appel:hover         { border-color: #0C7F80; }

.type-chip.acte-sinistre.is-picked      { background: #C94F3D; border-color: #C94F3D; color: #fff; }
.type-chip.acte-production.is-picked    { background: #1F9A6E; border-color: #1F9A6E; color: #fff; }
.type-chip.acte-administratif.is-picked { background: #123A63; border-color: #123A63; color: #fff; }
.type-chip.acte-scanning.is-picked      { background: #6A4DB3; border-color: #6A4DB3; color: #fff; }
.type-chip.acte-appel.is-picked         { background: #00A9AA; border-color: #00A9AA; color: #fff; }

/* Le bloc « Décrire l'acte en une phrase » est en tête, hors de la grille. */
.form-quick-entry { margin-bottom: 0.9rem; }
.quick-entry-mic { padding-inline: 0.7rem; }
.quick-entry-mic.is-listening {
    color: #fff;
    background: #C94F3D;
    border-color: #C94F3D;
    animation: micro-ecoute 1.2s ease-in-out infinite;
}
@keyframes micro-ecoute {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 79, 61, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(201, 79, 61, 0); }
}
#quick-entry-note.is-warning { color: #A73A2E; }

/* Ce qu'un appel a en plus : étiquette et sujet de facturation. */
.call-details {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.75rem 1rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    background: #E0F5F6;
    border: 1px solid #B3E3E4;
    border-left: 3px solid var(--medium-green, #00A9AA);
    border-radius: 6px;
}
.call-details .form-group { margin-bottom: 0; }
.call-details[hidden],
.client-coords[hidden],
.mail-preview[hidden] { display: none !important; }
.call-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.call-tag {
    padding: 5px 12px;
    border: 1px solid #B3E3E4;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0C7F80;
    cursor: pointer;
}
.call-tag:hover { border-color: #0C7F80; }
.call-tag.is-on { background: #00A9AA; border-color: #00A9AA; color: #fff; }
.call-tag[data-tag="ANA"].is-on { background: #5b6b7c; border-color: #5b6b7c; }
.call-tag[data-tag="URGENT TO DO"].is-on { background: #C94F3D; border-color: #C94F3D; }

/* Coordonnées d'un client nouveau, sous le nom qui vient d'être tapé. */
.client-coords {
    padding: 0.5rem 0.75rem 0;
    margin-bottom: 0.75rem;
    background: #F4F6F9;
    border: 1px dashed #C3D3EA;
    border-radius: 6px;
}

/* La description est le corps du mail : les deux boutons à droite du
   libellé, l'aperçu replié entre eux et le champ. */
.mail-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mail-tools .form-label { margin-bottom: 0; }
.mail-tools-buttons { display: flex; gap: 6px; }
.mail-tools-buttons .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.mail-preview {
    margin: 0;
    padding: 0.6rem 0.75rem;
    white-space: pre-wrap;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.45;
    background: #F4F6F9;
    border: 1px solid #C3D3EA;
    border-left: 3px solid var(--primary-green, #123A63);
    border-radius: 6px;
    resize: vertical;
    height: auto;
    min-height: 14rem;
    max-height: none;
}
/* Le courrier d'Encoder : la sorte choisie reste marquée, l'aperçu se
   corrige, les deux gestes (copier, ouvrir) sont à sa tête. */
/* Le sélecteur `.form-control` fixe la hauteur des champs : l'aperçu du
   courrier, lui, doit montrer tout le texte. */
#entry-form textarea#mail-preview.form-control { height: auto; min-height: 14rem !important; max-height: 40rem !important; }
.mail-kind.is-picked { background: var(--primary-green, #123A63); color: #fff; border-color: var(--primary-green, #123A63); }
.mail-editor { margin: 0.4rem 0 0.6rem; padding: 0.5rem; border: 1px solid #C3D3EA; border-radius: 8px; background: #fff; }
.mail-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.mail-editor-meta { font-size: 0.8rem; color: #5b6b7c; white-space: pre-wrap; }
.mail-editor-note { margin: 0.35rem 0 0; font-size: 0.8rem; color: #5b6b7c; }

@media (max-width: 700px) {
    .call-details { grid-template-columns: 1fr; }
}

/* Le micro de la barre de commande. */
.cmd-field .cmd-mic { background: none; border: 0; color: var(--text-secondary); cursor: pointer; padding: 0 6px; font-size: 1rem; }
.cmd-field .cmd-mic.is-listening { color: #b3261e; animation: cmd-pulse 1s infinite; }
@keyframes cmd-pulse { 50% { opacity: .4; } }

/* Le micro d'Encoder quand la dictée n'est pas possible : visible, grisé,
   et il explique au clic. */
.quick-entry-mic.is-unavailable { opacity: .45; }
.quick-entry-mic.is-listening { color: #b3261e; animation: cmd-pulse 1s infinite; }

/* --------------------------------------------------------------------------
   La précision de l'acte, sous les pastilles de type
   --------------------------------------------------------------------------
   Ce que l'export de gestion appelle « Action ». Plus petites que les
   pastilles de type et sans couleur propre : c'est un détail du type
   choisi, pas un choix de même rang. Facultatif, donc rien n'est allumé
   au départ. */

.sous-actes { margin-top: 10px; }
.sous-acte-chips {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.sous-acte-chip {
    padding: 5px 12px;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #fff;
    color: #4a5b6d;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.sous-acte-chip:hover { background: #f4f7fa; border-color: #c3cede; }
.sous-acte-chip.is-picked {
    background: #123a63;
    border-color: #123a63;
    color: #fff;
}
.sous-acte-chip:focus-visible {
    outline: 2px solid #2f6fed; outline-offset: 2px;
}