/* ========================================
   SYSTÈME CSS OPTIMISÉ - VERSION MINIMALE
   Classes essentielles pour /index.php, /tb/mini-stat.php, /stats/index.php, /requete/affiche_requete.php, /mon_compte/email.php
   ======================================== */

/* === VARIABLES CSS ESSENTIELLES === */
:root {
    /* Couleurs principales */
    --color-primary: hsl(215, 64%, 59%);
    --color-success: #00aa00;
    --color-warning: #cc8800;
    --color-error: #ff4444;
    --color-orange: #ff6600;
    --color-darkgray: #555555;
    --color-darkorange: #ea6313;
    
    /* Couleurs thématiques */
    --color-blue: hsl(217, 91%, 60%);
    --color-yellow: hsl(48, 96%, 53%);
    --color-purple: hsl(262, 83%, 58%);
    --color-red: hsl(0, 84%, 60%);
    --color-cyan: hsl(188, 94%, 43%);
    --color-teal: hsl(172, 85%, 41%);
    --color-orange: hsl(21, 90%, 48%);
    --color-green: hsl(142, 71%, 45%);
    --color-gray: hsl(220, 10%, 64%);
    
    /* Grays harmonisés */
    --color-white: #ffffff;
    --color-gray-50: hsl(220, 18%, 97%);
    --color-gray-100: hsl(220, 20%, 95%);
    --color-gray-200: hsl(220, 15%, 89%);
    --color-gray-300: hsl(220, 13%, 81%);
    --color-gray-600: hsl(220, 15%, 35%);
    --color-gray-800: hsl(220, 25%, 18%);
    --color-gray-900: hsl(220, 40%, 9%);
    
    /* Typographie */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-2xs: 0.6875rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Espacements */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Radius */
    --radius-sm: 0.25rem;
    --radius-base: 0.5rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* === RESET ET BASE === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-gray-800);
    background-color: var(--color-gray-50);
}

/* Style par défaut pour pages normales */
body:not(.map-page) {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

/* Style pour pages de carte - plein écran */
body.map-page {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* === LAYOUT PRINCIPAL === */

/* === PUISARDS PAGE COMPONENTS === */
.puisards-map {
    text-align: center;
}

.puisards-map__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

.puisards-map__description {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    margin: 0;
    font-weight: var(--font-weight-medium);
}

.puisards-info {
    text-align: center;
}

.puisards-info__message {
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    margin: 0;
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.puisards-info__message i {
    color: var(--color-warning);
    font-size: var(--font-size-lg);
}

/* === HEADER COMPONENTS === */
.header {
    margin-bottom: var(--spacing-md);
}

.header .dashboard {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    flex-direction: row;
    gap: 0;
}

.header__container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    width: 900px;
    margin: 0;
    padding: 0;
}

.header__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
}

.header__left,
.header__right {
    flex: 0 0 auto;
    width: 60px;
    display: flex;
    justify-content: center;
}

.header__center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.header__brand:hover {
    transform: translateY(-1px);
}

.header__logo {
    height: 50px;
    width: auto;
    object-fit: contain;
    margin-bottom: var(--spacing-xs);
}

.header__slogan {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-align: center;
    line-height: 1.3;
    margin: 0;
}

.header__nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
}

.header__nav-button:hover {
    background: var(--color-gray-100);
    transform: translateY(-1px);
}

.header__nav-button--visible {
    visibility: visible;
    opacity: 1;
}

.header__nav-button--hidden {
    visibility: hidden;
    opacity: 0;
}

.header__nav-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.header__nav-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* === DASHBOARD COMPONENTS === */
.dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dashboard__hero {
    background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
    color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: 5px;
}

.dashboard__hero--success {
    background: linear-gradient(135deg, var(--color-success), var(--color-green));
}

.dashboard__hero-content {
    text-align: center;
}

.dashboard__greeting {
    font-size: var(--font-size-lg);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.dashboard__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.dashboard__dynamic-sections {
    margin: var(--spacing-xl) 0;
}

/* === CONTENT BOXES === */
.content-box {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.content-box--alerts .content-box__header {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.content-box--tools .content-box__header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
}

.content-box--admin .content-box__header {
    background: linear-gradient(135deg, var(--color-gray-600), var(--color-gray-800));
}

.content-box--user .content-box__header {
    background: linear-gradient(135deg, var(--color-success), var(--color-teal));
}

.content-box--info .content-box__header {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-blue));
}

.content-box--warning .content-box__header {
    background: linear-gradient(135deg, var(--color-warning), var(--color-darkorange));
}

.content-box__header {
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
}

.content-box__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.content-box__icon {
    font-size: var(--font-size-xl);
}

.content-box__heading {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.content-box__badge {
    background: rgba(255, 255, 255, 0.2);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.content-box__badge--admin {
    background: rgba(255, 255, 255, 0.25);
}

.content-box__body {
    padding: var(--spacing-md);
}

/* Ensure forms without headers still have proper spacing */
.content-box > .content-box__body:first-child {
    padding-top: var(--spacing-lg);
}

/* Remove padding from content-box__body elements containing forms */
/* Target specific content-box modifiers that typically contain forms */
.content-box--login .content-box__body,
.content-box--admin .content-box__body,
.content-box--user .content-box__body,
.content-box--form .content-box__body {
    padding: 0;
}

/* Override first-child padding for form containers */
.content-box--login > .content-box__body:first-child,
.content-box--admin > .content-box__body:first-child,
.content-box--user > .content-box__body:first-child,
.content-box--form > .content-box__body:first-child {
    padding: 0;
}

/* Modern browser support - remove padding when forms are directly in content-box__body */
.content-box__body:has(form) {
    padding: 0;
}

.content-box > .content-box__body:first-child:has(form) {
    padding: 0;
}

/* Alternative approach - modifier class for no-padding */
.content-box__body--no-padding {
    padding: 0 !important;
}

/* Ensure all forms in content-box__body have proper spacing */
.content-box__body form:not([class]) {
    padding: var(--spacing-md);
}

/* === CONFIRMATION COMPONENTS === */
.confirmation-result {
    margin: var(--spacing-md) 0;
}

.confirmation-result__stats {
    background: var(--color-gray-50);
    border-radius: var(--radius-base);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.confirmation-result__stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.confirmation-result__label {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
}

.confirmation-result__value {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-success);
}

.confirmation-result__description {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-200);
}

.confirmation-result__description p {
    margin: 0;
    color: var(--color-gray-600);
    line-height: 1.6;
}

.confirmation-warning {
    background: #fef3cd;
    border: 1px solid #facc15;
    border-radius: var(--radius-base);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.confirmation-warning__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.confirmation-warning__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.confirmation-warning__icon {
    font-size: var(--font-size-xl);
    color: var(--color-warning);
}

.confirmation-warning__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-warning);
    margin: 0;
}

.confirmation-warning__body p {
    margin: 0 0 var(--spacing-sm) 0;
    color: #8b5a00;
    line-height: 1.6;
}

.confirmation-warning__body p:last-child {
    margin-bottom: 0;
}

.confirmation-question {
    text-align: center;
    padding: var(--spacing-lg) 0;
}

.confirmation-question__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin: 0;
}

.alert-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.alert-content p {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.6;
}

/* === HERO SECTIONS === */
.hero-banner {
    background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
    color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
}

.hero-text {
    text-align: center;
}

.hero-greeting {
    font-size: var(--font-size-lg);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === BOX HEADERS === */
.box-header {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
    color: var(--color-white);
}

.header-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.header-icon {
    font-size: var(--font-size-xl);
}

.header-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.box-body {
    padding: var(--spacing-xl);
}

/* === GRILLES === */
.tools-grid, .admin-grid, .user-tools, .info-tools, .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-sm);
}

/* === CARTES D'OUTILS === */
.tool-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 10px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.tool-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--color-primary);
    transition: all 0.2s ease;
}

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

.tool-card:hover::before {
    width: 8px;
}

.tool-card__badge {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.tool-card__badge img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.tool-card__badge i {
    font-size: 24px;
    color: var(--color-gray-600);
}

.tool-card__content {
    flex: 1;
    min-width: 0;
}

.tool-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--color-gray-800);
}

.tool-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.4;
}

.tool-card__arrow {
    font-size: var(--font-size-base);
    color: var(--color-gray-400);
    transition: all 0.2s ease;
}

.tool-card:hover .tool-card__arrow {
    transform: translateX(4px);
    color: var(--color-primary);
}

/* === VARIANTES DE COULEURS === */
.tool-card--primary::before { background: var(--color-primary); }
.tool-card--blue::before { background: var(--color-blue); }
.tool-card--yellow::before { background: var(--color-yellow); }
.tool-card--purple::before { background: var(--color-purple); }
.tool-card--red::before { background: var(--color-red); }
.tool-card--cyan::before { background: var(--color-cyan); }
.tool-card--teal::before { background: var(--color-teal); }
.tool-card--orange::before { background: var(--color-orange); }
.tool-card--green::before { background: var(--color-green); }
.tool-card--gray::before { background: var(--color-gray); }

.tool-card.red::before { background: var(--color-red); }

/* === CARTES D'INFORMATION === */
.info-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

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

.info-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.info-card__content {
    flex: 1;
    min-width: 0;
}

.info-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--color-gray-800);
}

.info-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.4;
}

/* === CARTES D'ADMINISTRATION === */
.admin-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.admin-card.animate-in {
    border-left: 4px solid var(--color-error);
    background: #fef2f2;
}

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

.admin-card__badge {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.admin-card__badge img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.admin-card__content {
    flex: 1;
}

.admin-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--color-gray-800);
}

.admin-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
}

/* === PROFIL UTILISATEUR === */
.user-profile {
    padding: 0 var(--spacing-xl) var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-gray-200);
}

.user-profile__name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-xs);
}

.user-profile__role {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* === SYSTÈME DE JAUGES STATS === */
.stats-container {
    max-width: 100%;
}

.stats-section {
    margin: var(--spacing-xl) 0;
}

.stats-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.stats-stats-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.stats-stat-item {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.stats-stat-item h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-lg);
    color: var(--color-gray-800);
}

.stats-gauge-container {
    position: relative;
}

.stats-gauges-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
}

.stats-gauge-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 0 0 auto;
    min-width: 120px;
}

.stats-gauge {
    position: relative;
    width: 122px;
    height: 61px;
    overflow: hidden;
}

.stats-gauge-background {
    position: absolute;
    width: 122px;
    height: 122px;
    border: 8px solid var(--color-gray-200);
    border-radius: 50%;
    top: -61px;
    left: 0;
}

.stats-gauge-fill {
    position: absolute;
    width: 122px;
    height: 122px;
    top: -61px;
    left: 0;
    overflow: hidden;
}

.stats-gauge-progress {
    position: absolute;
    width: 122px;
    height: 122px;
    border: 8px solid var(--color-success);
    border-radius: 50%;
    transform-origin: 50% 100%;
    transform: rotate(var(--rotation, -180deg));
    transition: transform 0.8s ease-out;
}

.stats-gauge-progress-red { border-color: var(--color-error); }
.stats-gauge-progress-yellow { border-color: var(--color-warning); }
.stats-gauge-progress-orange { border-color: var(--color-orange); }
.stats-gauge-progress-darkgray { border-color: var(--color-darkgray); }
.stats-gauge-progress-darkorange { border-color: var(--color-darkorange); }

.stats-gauge-cover {
    position: absolute;
    width: 122px;
    height: 61px;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: var(--spacing-sm);
    z-index: 1;
}

.stats-gauge-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
    text-align: center;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

.stats-gauge-detail {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-align: center;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.stats-gauge-column small {
    font-size: var(--font-size-sm);
    color: var(--color-success);
    text-align: center;
    font-weight: var(--font-weight-medium);
    max-width: 120px;
    line-height: 1.3;
}

/* === COULEURS STATS GAUGE TEXT === */
.stats-gauge-text--red,
.stats-gauge-text--red small { 
    color: var(--color-error) !important; 
}

.stats-gauge-text--yellow,
.stats-gauge-text--yellow small { 
    color: var(--color-warning) !important; 
}

.stats-gauge-text--orange,
.stats-gauge-text--orange small { 
    color: var(--color-orange) !important; 
}

.stats-gauge-text--darkorange,
.stats-gauge-text--darkorange small { 
    color: var(--color-darkorange) !important; 
}

.stats-gauge-text--darkgray,
.stats-gauge-text--darkgray small { 
    color: var(--color-darkgray) !important; 
}

.stats-gauge-text--green,
.stats-gauge-text--green small { 
    color: var(--color-success) !important; 
}

/* === STATS GAUGE LABELS === */
.stats-gauge-label {
    font-size: var(--font-size-sm);
    text-align: center;
    font-weight: var(--font-weight-medium);
    max-width: 120px;
    line-height: 1.3;
    color: var(--color-success);
}

.stats-gauge-label.stats-gauge-text--red { color: var(--color-error); }
.stats-gauge-label.stats-gauge-text--yellow { color: var(--color-warning); }
.stats-gauge-label.stats-gauge-text--orange { color: var(--color-orange); }
.stats-gauge-label.stats-gauge-text--darkorange { color: var(--color-darkorange); }
.stats-gauge-label.stats-gauge-text--darkgray { color: var(--color-darkgray); }
.stats-gauge-label.stats-gauge-text--green { color: var(--color-success); }

/* === STATS GAUGE CLICKABLE === */
.stats-gauge-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.stats-gauge-clickable:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.stats-gauge-clickable:hover .stats-gauge {
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
}

/* === MINI-STAT SYSTÈME === */
.ministat-buttons {
    padding: var(--spacing-lg);
}

.ministat-stats-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.ministat-stat-item {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
}

.ministat-stat-item strong {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-md);
}

.ministat-gauge-container {
    position: relative;
}

.ministat-gauge-container.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.ministat-gauge-container.clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ministat-gauges-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
}

.ministat-gauge-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.ministat-gauge {
    position: relative;
    width: 122px;
    height: 61px;
    overflow: hidden;
}

.ministat-gauge-background {
    position: absolute;
    width: 122px;
    height: 122px;
    border: 8px solid var(--color-gray-200);
    border-radius: 50%;
    top: -61px;
    left: 0;
}

.ministat-gauge-fill {
    position: absolute;
    width: 122px;
    height: 122px;
    top: -61px;
    left: 0;
    overflow: hidden;
}

.ministat-gauge-progress {
    position: absolute;
    width: 122px;
    height: 122px;
    border: 8px solid var(--color-success);
    border-radius: 50%;
    transform-origin: 50% 100%;
    transform: rotate(var(--rotation, -180deg));
    transition: transform 0.8s ease-out;
}

.ministat-gauge-progress-red { border-color: var(--color-error); }
.ministat-gauge-progress-green { border-color: var(--color-success); }

.ministat-gauge-cover {
    position: absolute;
    width: 122px;
    height: 61px;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: var(--spacing-sm);
    z-index: 1;
}

.ministat-gauge-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
    text-align: center;
}

.ministat-gauge-column small {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-align: center;
    font-weight: var(--font-weight-medium);
    max-width: 120px;
    line-height: 1.3;
}

.ministat-normal {
    border-left: 4px solid var(--color-success);
}

/* === LIENS ET BADGES D'OUTILS === */
.stats-link-container {
    margin-top: var(--spacing-xl);
    display: flex;
    justify-content: center;
}

.tool-badge {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.tool-badge img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.tool-info {
    flex: 1;
    min-width: 0;
}

.tool-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--color-gray-800);
}

.tool-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.4;
}

.tool-arrow {
    font-size: var(--font-size-base);
    color: var(--color-gray-400);
    transition: all 0.2s ease;
}

/* === ALERTES === */
.alerts-section {
    padding: var(--spacing-lg);
}

/* === LOADING SKELETON === */
.loading-skeleton {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

.loading-skeleton__gauge {
    width: 122px;
    height: 61px;
    background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-300) 50%, var(--color-gray-200) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-md);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* === LOGOUT PAGE STYLES === */
.logout {
    text-align: center;
    padding: 2rem 0;
}

.logout__icon {
    font-size: 1.5rem !important;
    margin-right: 0.5rem;
    color: var(--color-primary);
}

.logout__message {
    margin-bottom: 2rem;
}

.logout__message p {
    margin: 0.5rem 0;
    color: var(--color-gray-800);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.logout__success-icon {
    font-size: 3rem !important;
    color: var(--color-success) !important;
    margin-bottom: 1.25rem !important;
    display: block;
}

.logout__progress {
    margin: 2rem 0;
}

.logout__progress-bar {
    width: 100%;
    height: 6px;
    background-color: var(--color-gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.logout__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-blue));
    width: 0%;
    transition: width 2s ease-in-out;
    border-radius: 3px;
}

.logout__progress-text {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    margin: 0;
}

.logout__actions {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.logout__redirect-card {
    max-width: 400px;
    margin: 0 auto;
}

.logout--fade {
    animation: fadeIn 0.6s ease-in-out;
}

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

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

@media (max-width: 768px) {
    body {
        padding: var(--spacing-sm);
    }
    
    .header .dashboard {
        padding: 0;
    }
    
    .header__container {
        width: 100%;
        max-width: 900px;
        margin: 0;
        padding: 0;
    }
    
    .header__nav {
        padding: var(--spacing-sm) 0;
        min-height: 70px;
    }
    
    .header__left,
    .header__right {
        width: 50px;
    }
    
    .header__logo {
        height: 40px;
    }
    
    .header__slogan {
        font-size: 0.75rem;
    }
    
    .header__nav-button {
        width: 36px;
        height: 36px;
    }
    
    .header__nav-icon {
        width: 28px;
        height: 28px;
    }
    
    .dashboard__bottom {
        grid-template-columns: 1fr;
    }
    
    .tools-grid, .admin-grid, .user-tools, .info-tools, .info-grid {
        grid-template-columns: 1fr;
    }

    /* Logout responsive styles */
    .logout {
        padding: 1rem 0;
    }
    
    .logout__success-icon {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .logout__redirect-card {
        max-width: 100%;
        margin: 0;
    }
    
    .stats-gauges-row, .ministat-gauges-row {
        flex-direction: column;
        align-items: center;
    }
    
    .stats-gauge-column {
        margin-bottom: var(--spacing-md);
    }
    
    .loading-skeleton {
        flex-direction: column;
        align-items: center;
    }
    
    /* Footer responsive adjustments for tablet */
    .footer__container {
        flex-direction: column;
        gap: var(--spacing-lg);
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .footer__section {
        width: 100%;
        max-width: 300px;
    }
    
    .footer__section--version,
    .footer__section--neq,
    .footer__section--brand {
        width: 100%;
        order: initial;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .content-box__header {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    
    .tool-card {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .admin-card {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .info-card {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    /* Footer mobile adjustments */
    .footer .dashboard {
        padding: 0 var(--spacing-sm);
    }
    
    .footer__container {
        padding: var(--spacing-md) var(--spacing-sm);
        gap: var(--spacing-md);
    }
    
    .footer__section {
        align-items: center;
        justify-content: center;
        width: 100%;
    }
}

/* Extra small screens responsive adjustments */
@media (max-width: 320px) {
    .footer .dashboard {
        padding: 0 var(--spacing-xs);
    }
    
    .footer__container {
        padding: var(--spacing-sm) var(--spacing-xs);
        gap: var(--spacing-sm);
        border-radius: var(--radius-md);
    }
    
    .footer__label {
        font-size: 0.6rem;
        margin-bottom: var(--spacing-2xs);
    }
    
    .footer__value {
        font-size: 0.65rem;
    }
    
    .footer__logo {
        height: 20px;
    }
    
    .footer__copyright-line {
        font-size: 0.6rem;
    }
}

/* === FOOTER COMPONENTS === */
.footer {
    margin-top: var(--spacing-md);
}

.footer .dashboard {
    max-width: 868px;
    margin: 0 auto;
    padding: 0;
}

.footer__container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    width: 868px;
    max-width: 100%;
    margin: 0;
    padding: var(--spacing-md);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
}


.footer__section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer__section--version {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
}

.footer__section--brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer__section--neq {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
}

.footer__label {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer__value {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
}

.footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.footer__brand-link {
    display: block;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer__brand-link:hover {
    transform: translateY(-1px);
    opacity: 0.8;
}

.footer__logo {
    height: 24px;
    width: auto;
    object-fit: contain;
}

.footer__copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.footer__copyright-line {
    font-size: var(--font-size-2xs);
    color: var(--color-gray-600);
    line-height: 1.4;
}

/* === BF GAUGES SPECIFIC LAYOUT === */
.bf-gauges {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    gap: 20px; 
    margin: 20px 0;
}

/* Taille fixe des jauges pour BF (122x61px) */
.bf-gauges .stats-gauge {
    width: 122px !important;
    height: 61px !important;
}

.bf-gauges .stats-gauge-column {
    width: auto !important;
    min-width: 120px;
    flex: 0 0 auto;
}

/* Positionnement du texte en bas avec espacement pour BF */
.bf-gauges .stats-gauge-cover {
    width: 122px !important;
    height: 61px !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-bottom: 8px !important;
}

.bf-gauges .stats-gauge-value {
    margin-bottom: 8px !important;
}

.bf-gauges .stats-gauge-detail {
    position: absolute !important;
    bottom: 5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

/* === LEGEND COMPONENTS (BEM) === */

/* Subtitle styling for hero section */
.dashboard__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    margin-top: var(--spacing-xs);
    font-weight: var(--font-weight-normal);
}

/* Info notice component */
.legend__info-notice {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: var(--color-gray-50);
    border-left: 4px solid var(--color-cyan);
    border-radius: var(--radius-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
}

.legend__info-notice i {
    color: var(--color-cyan);
    font-size: var(--font-size-lg);
}

/* Legend table container */
.legend__table-container {
    overflow-x: auto;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
}

/* Legend table base */
.legend__table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

/* Legend table body */
.legend__table-body {
    /* No specific styles needed */
}

/* Legend table sections (with header) */
.legend__table-section {
    /* No specific styles needed, inherited from children */
}

/* Legend table rows */
.legend__table-row {
    /* No specific styles needed, inherited from children */
}

/* Legend category headers */
.legend__category-header {
    background-color: var(--color-gray-50);
    color: var(--color-gray-700);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
    vertical-align: top;
    border: 1px solid var(--color-gray-200);
    border-right: 2px solid var(--color-primary);
    min-width: 120px;
}

/* Legend items (td cells) */
.legend__item {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-gray-200);
    vertical-align: middle;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: background-color 0.2s ease;
}

.legend__item:hover {
    background-color: var(--color-gray-50);
}

/* Legend icons */
.legend__icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.legend__icon--svg {
    filter: brightness(0.8);
}

/* Legend descriptions */
.legend__description {
    flex: 1;
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    font-weight: var(--font-weight-normal);
}

.legend__urgent {
    color: #dc2626;
    font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .legend__category-header {
        font-size: var(--font-size-xs);
        padding: var(--spacing-sm) var(--spacing-md);
        min-width: 100px;
    }

    .legend__item {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
        flex-direction: column;
        align-items: flex-start;
    }

    .legend__icon {
        width: 20px;
        height: 20px;
    }

    .legend__description {
        font-size: var(--font-size-sm);
    }

    .legend__info-notice {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
}

.archive-svg {
    width: 24px;
    height: 24px;
}

/* === RESET FORM COMPONENTS === */
.reset-form {
    max-width: 100%;
    padding: var(--spacing-md);
}

.reset-form__section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: center;
    text-align: center;
}

.reset-form__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin: 0;
}

.reset-form__icon {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.reset-form__text {
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.6;
}

.reset-form__actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* === MESSAGE COMPONENTS === */
.success-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
    padding: var(--spacing-xl);
    background: rgba(0, 170, 0, 0.05);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 170, 0, 0.2);
}

.success-message__icon {
    font-size: var(--font-size-2xl);
    color: var(--color-success);
}

.success-message__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success);
    margin: 0;
}

.success-message__text {
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.6;
}

.warning-message {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(204, 136, 0, 0.1);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(204, 136, 0, 0.3);
}

.warning-message__icon {
    font-size: var(--font-size-xl);
    color: var(--color-warning);
    flex-shrink: 0;
}

.warning-message__text {
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

.danger-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: var(--radius-base);
    color: var(--color-error);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    max-width: 400px;
}

.danger-warning__icon {
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

/* === BUTTON COMPONENTS === */
.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-error);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
    justify-content: center;
}

.btn-danger:hover {
    background: #e63946;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--color-white);
}

.btn-danger:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-white);
    color: var(--color-gray-700);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
    justify-content: center;
}

.btn-secondary:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    color: var(--color-gray-800);
}

.btn-secondary:active {
    transform: translateY(0);
    background: var(--color-gray-200);
}

/* === SUCCESS CONTENT BOX === */
.content-box--success .content-box__header {
    background: linear-gradient(135deg, var(--color-success), #22c55e);
}

/* === VANNES VERIFICATION COMPONENTS === */
.vannes-gauges {
    margin: var(--spacing-lg) 0;
}

.vannes-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.vannes-detail {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.vannes-detail::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    transition: all 0.2s ease;
}

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

.vannes-detail:hover::before {
    width: 8px;
}

.vannes-detail--success::before {
    background: var(--color-success);
}

.vannes-detail--warning::before {
    background: var(--color-warning);
}

.vannes-detail--orange::before {
    background: var(--color-orange);
}

.vannes-detail--error::before {
    background: var(--color-error);
}

.vannes-detail--frozen::before {
    background: var(--color-darkgray);
}

.vannes-detail__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.vannes-detail__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.vannes-detail__content {
    flex: 1;
    min-width: 0;
}

.vannes-detail__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-gray-800);
}

.vannes-detail__count {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-gray-700);
}

.vannes-detail__description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.4;
}

.vannes-detail__list {
    margin: 0;
    padding-left: var(--spacing-lg);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.vannes-detail__list li {
    margin-bottom: var(--spacing-xs);
}

.vannes-detail__list li:last-child {
    margin-bottom: 0;
}

/* === STATS GAUGE VALUE COLORS === */
.stats-gauge-value--error {
    color: var(--color-error) !important;
}

.stats-gauge-value--warning {
    color: var(--color-warning) !important;
}

.stats-gauge-value--orange {
    color: var(--color-orange) !important;
}

.stats-gauge-value--darkorange {
    color: var(--color-darkorange) !important;
}

.stats-gauge-value--darkgray {
    color: var(--color-darkgray) !important;
}

.stats-gauge-value--success {
    color: var(--color-success) !important;
}

/* ==============================================
   SIDEBAR MODERNE POUR SELECTION DES PANNEAUX
   ============================================== */

/* Container principal de la sidebar */
.panneau-sidebar {
    position: fixed;
    top: 0;
    right: -400px; /* Initialement cachée à droite */
    width: 380px;
    height: 100vh;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10000;
    display: flex; /* Toujours flex pour l'animation */
    flex-direction: column;
    border-left: 1px solid #e2e8f0;
    /* S'assurer que la sidebar accepte les clics */
    pointer-events: auto;
}

/* Sidebar réduite (minimisée) */
.panneau-sidebar.minimized {
    right: -380px; /* Complètement cachée sur PC */
}

/* Sidebar visible */
.panneau-sidebar.active {
    right: 0;
}

/* Languette de toggle au milieu de la sidebar - cachée par défaut */
.sidebar-toggle-tab {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 80px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10001;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    /* CORRECTION: S'assurer que le bouton est cliquable */
    pointer-events: auto;
    user-select: none;
    /* Cachée par défaut */
    opacity: 0;
    visibility: hidden;
}

/* Languette visible quand sidebar minimized - repositionner pour être visible */
.panneau-sidebar.minimized .sidebar-toggle-tab {
    opacity: 1;
    visibility: visible;
    /* CORRECTION PC: Position fixe par rapport à l'écran pour éviter la disparition */
    position: fixed;
    right: 0px; /* Coller au bord droit de l'écran */
    left: auto; /* Annuler le left pour éviter les conflits */
    z-index: 10002; /* Au-dessus de tout */
    width: 100px !important; /* Agrandi pour accommoder l'image du panneau */
    height: 100px !important; /* Carré */
}

/* Languette cachée quand sidebar active */
.panneau-sidebar.active .sidebar-toggle-tab {
    opacity: 0;
    visibility: hidden;
}

/* Languette visible en mode placement */
.panneau-sidebar.placement-mode .sidebar-toggle-tab {
    opacity: 1;
    visibility: visible;
}

.sidebar-toggle-tab:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-50%);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
}

/* Flèche dans la languette */
.sidebar-toggle-arrow {
    color: white;
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

/* Rotation de la flèche selon l'état */
.panneau-sidebar.active .sidebar-toggle-arrow {
    transform: rotate(0deg);
}

.panneau-sidebar.minimized .sidebar-toggle-arrow {
    transform: rotate(180deg);
}

/* Header de la sidebar */
.sidebar-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.sidebar-subtitle {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 4px 0 0 0;
    font-weight: 400;
}

/* Bouton fermer */
.sidebar-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 18px;
    font-weight: bold;
}

.sidebar-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* Zone de contenu avec scroll */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Instructions d'utilisation */
.sidebar-instructions {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: center;
    color: #0369a1;
    font-size: 0.875rem;
    line-height: 1.5;
}

.sidebar-instructions strong {
    color: #0c4a6e;
    font-weight: 600;
}

/* Grille des panneaux - adaptation automatique aux tailles */
.panneaux-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Item panneau individuel */
.panneau-item {
    background: white;
    border: 2px solid #f1f5f9;
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    /* Conteneur s'ajuste exactement à l'image */
    display: inline-block;
    vertical-align: top;
    line-height: 0;
    font-size: 0;
}

.panneau-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.panneau-item:hover::before {
    opacity: 1;
}

.panneau-item:hover {
    border-color: #22c55e;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.panneau-item.selected {
    border-color: #22c55e;
    background: #22c55e;
    color: white;
    transform: scale(0.95);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}

.panneau-item.selected::before {
    opacity: 0;
}

.panneau-item img {
    display: block;
    /* Dimensions originales du fichier */
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    /* 2% de marge autour de l'image */
    margin: 2%;
    /* Éliminer tout gap en bas */
    vertical-align: top;
}

.panneau-item:hover img {
    transform: scale(1.1);
}

.panneau-item.selected img {
    /* Garder l'image visible avec un contour blanc pour le contraste */
    filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px white);
    transform: scale(1);
    opacity: 0.9;
}

/* Overlay transparent - permet les clics sur la carte sans filtre sombre */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Pas de filtre sombre */
    opacity: 0;
    visibility: hidden;
    display: none; /* Caché par défaut */
    transition: all 0.4s ease;
    z-index: 9999;
    /* Permettre les clics de passer à travers vers la carte */
    pointer-events: none;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Footer avec actions */
.sidebar-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.sidebar-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.sidebar-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.sidebar-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.sidebar-btn-secondary {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.sidebar-btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* États de chargement */
.sidebar-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #64748b;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Scrollbar personnalisée */
.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Responsive - Version mobile */
@media (max-width: 768px) {
    .panneau-sidebar {
        width: calc(100% - 40px); /* Laisser 40px pour la languette */
        right: -100%;
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height pour mobile */
        max-height: 100dvh;
        position: fixed;
        overflow: hidden;
    }

    /* Sidebar visible sur mobile - laisser place pour languette */
    .panneau-sidebar.active {
        right: 0;
        /* CORRECTION: S'assurer que la sidebar occupe tout l'espace disponible */
        height: 100vh;
        height: 100dvh; /* Utiliser dvh pour une meilleure compatibilité mobile */
    }

    /* Sidebar minimisée sur mobile - montrer seulement la languette */
    .panneau-sidebar.minimized {
        right: calc(-100% + 40px); /* Laisser 40px visibles pour la languette */
    }

    /* CORRECTION: Ajustement du bouton toggle pour mobile */
    .sidebar-toggle-tab {
        /* Repositionner le bouton pour mobile - à gauche de la sidebar */
        left: -40px;
        /* Ajuster la largeur et hauteur pour être plus accessible sur mobile */
        width: 40px;
        height: 80px;
        /* S'assurer qu'il soit au-dessus de tout */
        z-index: 10001;
    }

    /* CORRECTION: Quand sidebar minimisée sur mobile, bouton visible à droite de l'écran */
    .panneau-sidebar.minimized .sidebar-toggle-tab {
        opacity: 1;
        visibility: visible;
        /* CORRECTION MOBILE: Position fixe à droite pour être accessible */
        position: fixed;
        right: 0px; /* Coller au bord droit de l'écran */
        left: auto; /* Annuler le left pour éviter les conflits */
        z-index: 10002; /* Au-dessus de tout */
    }

    /* CORRECTION: Quand sidebar active sur mobile, cacher le bouton */
    .panneau-sidebar.active .sidebar-toggle-tab {
        opacity: 0;
        visibility: hidden;
    }

    /* CORRECTION: En mode placement sur mobile, bouton visible */
    .panneau-sidebar.placement-mode .sidebar-toggle-tab {
        opacity: 1;
        visibility: visible;
        /* Position à droite quand sidebar ouverte en mode placement */
        left: calc(100vw - 40px);
        position: fixed;
    }

    .panneaux-grid {
        gap: 8px;
        justify-content: center;
        /* Forcer 4 colonnes maximum sur mobile */
        max-width: 100%;
        padding: 0 8px;
    }

    /* Limiter la taille des panneaux sur mobile pour avoir 4 par ligne */
    .panneaux-grid .panneau-item {
        max-width: calc(25% - 6px); /* 4 colonnes avec gaps */
        flex: 0 0 calc(25% - 6px);
        min-width: 60px; /* Taille minimum lisible */
    }

    .panneaux-grid .panneau-item img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .sidebar-header {
        padding: 16px;
        /* CORRECTION: S'assurer que le header ne shrink pas */
        flex-shrink: 0;
    }

    .sidebar-content {
        padding: 16px;
        padding-bottom: 80px; /* Laisser place pour le footer fixe */
        /* CORRECTION: Améliorer la gestion de l'espace flexible */
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0; /* Permet au flex item de shrink */
        /* CORRECTION: Calculer la hauteur disponible moins header et footer */
        max-height: calc(100dvh - 160px); /* Header ~80px + Footer ~80px */
    }

    .sidebar-title {
        font-size: 1.1rem;
    }

    /* CORRECTION MAJEURE: Forcer l'affichage du footer sur mobile */
    .sidebar-footer {
        /* CORRECTION: Position absolue pour forcer la visibilité en bas de sidebar */
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        /* CORRECTION: Forcer l'affichage avec important */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
        padding: 12px 16px !important;
        /* CORRECTION: S'assurer que le footer ne shrink jamais */
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        z-index: 10001 !important; /* Plus haut que la sidebar */
        /* CORRECTION: Ajouter une hauteur fixe */
        height: 60px !important;
        min-height: 60px !important;
        /* CORRECTION: S'assurer que les boutons sont centrés */
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        /* CORRECTION: Ajouter une ombre pour séparer du contenu */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        box-sizing: border-box !important;
        /* CORRECTION: Empêcher que d'autres styles masquent le footer */
        transform: none !important;
        clip: none !important;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    /* CORRECTION: S'assurer que la sidebar garde sa position relative pour le footer absolu */
    .panneau-sidebar.active {
        position: fixed !important;
    }

    /* CORRECTION: Forcer l'affichage des boutons individuellement */
    .sidebar-footer .sidebar-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        /* CORRECTION: S'assurer que les boutons prennent l'espace disponible */
        flex: 1 1 auto !important;
        min-width: 90px !important;
        max-width: 150px !important;
        height: 36px !important;
        text-align: center !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    /* CORRECTION: Ajuster le contenu pour laisser place au footer fixe */
    .panneau-sidebar.active .sidebar-content {
        /* CORRECTION: Réduire la hauteur du contenu pour laisser place au footer */
        padding-bottom: 80px !important; /* Laisser place pour le footer */
        max-height: calc(100dvh - 140px) !important; /* Header + Footer + marges */
        overflow-y: auto !important;
    }

    /* CORRECTION: S'assurer que le footer est toujours visible sur sidebar active */
    .panneau-sidebar.active .sidebar-footer {
        display: flex !important;
        position: absolute !important;
        bottom: 0 !important;
    }
}

/* Animation d'entrée pour les panneaux */
.panneau-item {
    animation: fadeInUp 0.3s ease forwards;
}

.panneau-item:nth-child(1) { animation-delay: 0.05s; }
.panneau-item:nth-child(2) { animation-delay: 0.1s; }
.panneau-item:nth-child(3) { animation-delay: 0.15s; }
.panneau-item:nth-child(4) { animation-delay: 0.2s; }
.panneau-item:nth-child(5) { animation-delay: 0.25s; }
.panneau-item:nth-child(6) { animation-delay: 0.3s; }
.panneau-item:nth-child(7) { animation-delay: 0.35s; }
.panneau-item:nth-child(8) { animation-delay: 0.4s; }

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

/* États d'erreur */
.sidebar-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 16px;
    border-radius: 8px;
    margin: 20px;
    text-align: center;
}

/* Message de sélection actuel */
.current-selection {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    color: #15803d;
    font-size: 0.875rem;
    text-align: center;
    font-weight: 500;
    position: relative;
}

.current-selection .selection-name {
    font-weight: 600;
    color: #166534;
}

/* Animation pulsante pour indiquer le mode placement actif */
.current-selection::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 10px;
    z-index: -1;
    animation: pulseGreen 2s infinite ease-in-out;
}

@keyframes pulseGreen {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* Amélioration de l'accessibilité */
.panneau-item:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.sidebar-close:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* ==============================================
   CLASSES CSS POUR ZONES DE TRAVAUX
   ============================================== */

/* Classe pour texte d'avertissement public en rouge */
.zone-publique-warning {
    color: red;
    font-weight: bold;
}

.stats-gauge-label--error {
    color: var(--color-error) !important;
}

.stats-gauge-label--warning {
    color: var(--color-warning) !important;
}

.stats-gauge-label--orange {
    color: var(--color-orange) !important;
}

.stats-gauge-label--darkorange {
    color: var(--color-darkorange) !important;
}

.stats-gauge-label--darkgray {
    color: var(--color-darkgray) !important;
}

.stats-gauge-label--success {
    color: var(--color-success) !important;
}

/* === STATS GAUGE CLICKABLE COLUMN === */
.stats-gauge-column--clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.stats-gauge-column--clickable:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.stats-gauge-column--clickable:hover .stats-gauge {
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
}

/* === UTILITY CLASSES === */
.u-hidden {
    display: none !important;
}

/* === PDF ARCHIVE STYLES === */
/* Réutilisation des classes existantes de /index.php avec ajouts spécifiques */

/* PDF Year Selection */
.pdf-years {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}

.pdf-year-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-base);
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
    min-width: 60px;
}

.pdf-year-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.pdf-year-btn--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

/* PDF List (Bulleted List) */
.pdf-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-sm);
    align-items: start;
}

.pdf-list__item {
    display: flex;
    align-items: center;
}

.pdf-list__item::before {
    content: "•";
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-right: var(--spacing-md);
    flex-shrink: 0;
}

.pdf-list__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-base);
    color: var(--color-gray-800);
    text-decoration: none;
    min-width: 0;
    transition: all 0.2s ease;
    flex: 1;
    border: 1px solid var(--color-gray-200);
}

.pdf-list__link:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.pdf-list__icon {
    color: var(--color-red);
    font-size: var(--font-size-base);
    flex-shrink: 0;
    width: 16px;
    min-width: 16px;
}

.pdf-list__link:hover .pdf-list__icon {
    color: var(--color-white);
}

/* PDF Empty State */
.pdf-empty {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-gray-600);
}

.pdf-empty__icon {
    font-size: 3rem;
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-lg);
}

.pdf-empty__text {
    font-size: var(--font-size-lg);
    margin: 0;
}

/* PDF Actions */
.pdf-actions {
    margin-top: var(--spacing-xl);
    display: flex;
    justify-content: center;
}

/* Responsive PDF Styles */
@media (max-width: 768px) {
    .pdf-years {
        justify-content: stretch;
    }
    
    .pdf-year-btn {
        flex: 1;
        min-width: auto;
    }
    
    .pdf-list__link {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-xs);
    }
    
    .pdf-list__item::before {
        margin-right: var(--spacing-sm);
        margin-bottom: var(--spacing-xs);
    }
}

@media (max-width: 480px) {
    .pdf-list__item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .pdf-list__item::before {
        align-self: flex-start;
        margin-bottom: 0;
    }
    
    .pdf-list__link {
        margin-left: var(--spacing-lg);
    }
    
    /* Responsive adjustments for form components */
    .reset-form__actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-danger,
    .btn-secondary {
        width: 100%;
        min-width: auto;
    }
    
    .danger-warning {
        max-width: 100%;
        text-align: center;
    }
    
    .warning-message,
    .success-message {
        text-align: center;
    }
    
    .warning-message {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    /* Vannes responsive design */
    .vannes-details {
        grid-template-columns: 1fr;
    }
    
    .vannes-detail {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .vannes-detail__icon {
        align-self: center;
    }
}

/* ========================================
   LEAK DETECTION COMPONENTS
   ======================================== */

/* Leak Detection Sections */
.leak-detection__section {
    margin-bottom: var(--spacing-sm);
}

.leak-detection__section--hidden {
    display: none;
}

.leak-detection__section--hidden.show {
    display: block;
}

/* Content Box Additional Components */
.content-box__nav-button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.content-box__nav-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.content-box__nav-button img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.content-box__info {
    margin-bottom: var(--spacing-lg);
}

.content-box__subtitle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-base);
}

/* Leak Detection Gauges */
.leak-detection__gauges {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    gap: 20px; 
    margin: 20px 0;
}

.leak-detection__gauges .stats-gauge {
    width: 122px !important;
    height: 61px !important;
}

.leak-detection__gauges .stats-gauge__column {
    width: auto !important;
    min-width: 120px;
    flex: 0 0 auto;
}

.leak-detection__gauges .stats-gauge__cover {
    width: 122px !important;
    height: 61px !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-bottom: 8px !important;
}

.leak-detection__gauges .stats-gauge__value {
    margin-bottom: 8px !important;
}

.leak-detection__gauges .stats-gauge__detail {
    position: absolute !important;
    bottom: 5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

/* Leak Detection Help Content */
.leak-detection__help {
    line-height: 1.6;
}

.leak-detection__help p {
    margin-bottom: var(--spacing-md);
    color: var(--color-gray-700);
}

.leak-detection__list {
    margin: 0;
    padding-left: var(--spacing-xl);
}

.leak-detection__list li {
    margin-bottom: var(--spacing-sm);
    color: var(--color-gray-700);
}

.leak-detection__link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.leak-detection__link:hover {
    text-decoration: underline;
}

.leak-detection__icon {
    vertical-align: middle;
}

.leak-detection__icon--inline {
    width: 20px;
    height: 20px;
    margin: 0 var(--spacing-xs);
}

/* Leak Detection Table */
.leak-detection__info {
    margin-bottom: var(--spacing-lg);
}

.leak-detection__note {
    background: var(--color-gray-50);
    padding: var(--spacing-md);
    border-radius: var(--radius-base);
    border-left: 4px solid var(--color-primary);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.leak-detection__table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-gray-200);
}

.leak-detection__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.leak-detection__table thead {
    background: var(--color-gray-100);
}

.leak-detection__table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    border-bottom: 1px solid var(--color-gray-200);
}

.leak-detection__row {
    border-bottom: 1px solid var(--color-gray-200);
    transition: background-color 0.2s ease;
}

.leak-detection__row:hover {
    background: var(--color-gray-50);
}

.leak-detection__row--danger {
    border-left: 4px solid var(--color-error);
}

.leak-detection__row--danger:hover {
    background: rgba(255, 68, 68, 0.05);
}

.leak-detection__row--warning {
    border-left: 4px solid var(--color-warning);
}

.leak-detection__row--warning:hover {
    background: rgba(204, 136, 0, 0.05);
}

.leak-detection__row--info {
    border-left: 4px solid var(--color-primary);
}

.leak-detection__row--info:hover {
    background: rgba(59, 130, 246, 0.05);
}

.leak-detection__cell {
    padding: var(--spacing-md);
    color: var(--color-gray-800);
}

.leak-detection__action {
    padding: var(--spacing-md);
    text-align: center;
    width: 80px;
}

.leak-detection__button {
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.leak-detection__button:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.leak-detection__button--zoom {
    width: 36px;
    height: 36px;
}

.leak-detection__button--zoom img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Responsive Design for Leak Detection */
@media (max-width: 768px) {
    .leak-detection__gauges {
        gap: 15px;
        margin: 15px 0;
    }
    
    .leak-detection__gauges .stats-gauge__column {
        min-width: 100px;
    }
    
    .leak-detection__table-wrapper {
        margin: 0 -var(--spacing-md);
    }
    
    .leak-detection__table {
        font-size: var(--font-size-xs);
    }
    
    .leak-detection__cell,
    .leak-detection__action {
        padding: var(--spacing-sm);
    }
    
    .leak-detection__button--zoom {
        width: 32px;
        height: 32px;
    }
    
    .leak-detection__button--zoom img {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .leak-detection__list {
        padding-left: var(--spacing-lg);
    }
    
    .leak-detection__gauges {
        gap: 10px;
        margin: 10px 0;
    }
}

/* ========================================
   USER MANAGEMENT COMPONENTS (BEM)
   ======================================== */

/* User Management Alert */
.user-management__alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-base);
    color: var(--color-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.user-management__alert i {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

/* User Management Form */
.user-management__form {
    max-width: 100%;
}

.user-management__form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.user-management__form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.user-management__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
}

.user-management__label i {
    font-size: var(--font-size-base);
    color: var(--color-primary);
    width: 16px;
    text-align: center;
}

.user-management__input,
.user-management__select {
    padding: var(--spacing-md);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    transition: all 0.2s ease;
    background: var(--color-white);
    color: var(--color-gray-800);
}

.user-management__input:focus,
.user-management__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.user-management__input::placeholder {
    color: var(--color-gray-500);
}

.user-management__select {
    cursor: pointer;
}

/* Form Actions */
.user-management__form-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-start;
    flex-wrap: wrap;
}

.user-management__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
    justify-content: center;
}

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

.user-management__btn--primary:hover {
    background: var(--color-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--color-white);
}

.user-management__btn--secondary {
    background: var(--color-white);
    color: var(--color-gray-700);
    border: 2px solid var(--color-gray-300);
}

.user-management__btn--secondary:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    color: var(--color-gray-800);
}

/* User Management Table */
.user-management__table-container {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.user-management__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    background: var(--color-white);
}

.user-management__table thead {
    background: var(--color-gray-100);
}

.user-management__table th {
    padding: var(--spacing-lg);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    border-bottom: 2px solid var(--color-gray-200);
    font-size: var(--font-size-base);
}

.user-management__table th i {
    margin-right: var(--spacing-sm);
    color: var(--color-primary);
}

.user-management__table tr {
    border-bottom: 1px solid var(--color-gray-200);
    transition: all 0.2s ease;
}

.user-management__table tr:hover {
    background: var(--color-gray-50);
}

.user-management__table tr:last-child {
    border-bottom: none;
}

.user-management__table td {
    padding: var(--spacing-lg);
    vertical-align: middle;
    line-height: 1.5;
}

/* User Info Cells */
.user-management__user-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.user-management__user-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    font-size: var(--font-size-base);
}

.user-management__user-email {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-style: italic;
}

/* User Badge */
.user-management__badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Action Buttons */
.user-management__actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.user-management__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-base);
    text-decoration: none;
    font-size: var(--font-size-base);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.user-management__action-btn--edit {
    background: var(--color-warning);
    color: var(--color-white);
}

.user-management__action-btn--edit:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.user-management__action-btn--delete {
    background: var(--color-error);
    color: var(--color-white);
}

.user-management__action-btn--delete:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Responsive Design for User Management */
@media (max-width: 768px) {
    .user-management__form-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .user-management__form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .user-management__btn {
        min-width: auto;
        width: 100%;
    }
    
    .user-management__table-container {
        margin: 0 -var(--spacing-md);
    }
    
    .user-management__table {
        font-size: var(--font-size-xs);
    }
    
    .user-management__table th,
    .user-management__table td {
        padding: var(--spacing-sm);
    }
    
    .user-management__actions {
        flex-direction: column;
        gap: var(--spacing-xs);
        align-items: stretch;
    }
    
    .user-management__action-btn {
        width: 100%;
        height: 32px;
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .user-management__table {
        font-size: 0.65rem;
    }
    
    .user-management__table th,
    .user-management__table td {
        padding: var(--spacing-xs);
    }
    
    .user-management__user-name {
        font-size: var(--font-size-sm);
    }
    
    .user-management__user-email {
        font-size: var(--font-size-xs);
    }
    
    .user-management__badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
    
    .user-management__action-btn {
        height: 28px;
        font-size: var(--font-size-xs);
    }
    
    .user-management__alert {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-xs);
    }
}

/* ========================================
   ONLINE USERS COMPONENTS (BEM)
   ======================================== */

/* Online Users Main Container */
.online-users {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.online-users__summary {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.online-users__count {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
    margin: 0;
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-base);
    border-left: 4px solid var(--color-primary);
}

/* Online Users List */
.online-users__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-sm);
}

/* Individual Online User Item */
.online-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.online-user::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--color-success);
    transition: all 0.2s ease;
}

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

.online-user:hover::before {
    width: 8px;
}

.online-user__time {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
    flex-shrink: 0;
    font-family: monospace;
}

.online-user__name {
    flex: 1;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    min-width: 0;
    word-break: break-word;
}

.online-user__status {
    width: 12px;
    height: 12px;
    background: var(--color-success);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    animation: pulse 2s infinite;
}

.online-user__status::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 16px;
    height: 16px;
    background: var(--color-success);
    border-radius: 50%;
    opacity: 0.3;
    animation: pulse-ring 2s infinite;
}

/* Empty State for Online Users */
.online-users__empty {
    text-align: center;
    padding: var(--spacing-2xl);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--color-gray-300);
}

.online-users__empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-lg);
    opacity: 0.8;
}

.online-users__empty-message {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Animations for Online Status */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Responsive Design for Online Users */
@media (max-width: 768px) {
    .online-users__list {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .online-user {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
    
    .online-user__time {
        width: 50px;
        height: 50px;
        font-size: var(--font-size-xs);
    }
    
    .online-user__name {
        font-size: var(--font-size-sm);
    }
    
    .online-users__empty {
        padding: var(--spacing-xl);
    }
    
    .online-users__empty-icon {
        font-size: 2.5rem;
        margin-bottom: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .online-user {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    
    .online-user__time {
        width: 60px;
        height: 40px;
        font-size: var(--font-size-xs);
    }
    
    .online-user__status {
        align-self: center;
    }
    
    .online-users__count {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
    
    .online-users__empty {
        padding: var(--spacing-lg);
    }
    
    .online-users__empty-icon {
        font-size: 2rem;
    }
    
    .online-users__empty-message {
        font-size: var(--font-size-base);
    }
}

/* ========================================
   ACCOUNT PAGE COMPONENTS (BEM)
   ======================================== */

/* Account Information */
.account-info {
    margin-bottom: var(--spacing-lg);
}

.account-info__details {
    background: var(--color-background);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
}

.account-info__name {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.account-info__contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.account-info__phone,
.account-info__email {
    color: var(--color-text);
    font-size: var(--font-size-base);
}

/* Account Actions Grid */
.account-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

/* Account Preferences */
.account-preferences {
    margin: 0;
    padding: 0;
}

.preference-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    gap: var(--spacing-lg);
}

.preference-item__content {
    flex: 1;
}

.preference-item__label {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-xs);
}

.preference-item__description {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.4;
}

.preference-item__control {
    flex-shrink: 0;
}

/* Toggle Switch Component (BEM) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    cursor: pointer;
}

.toggle-switch__input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch__slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border);
    border-radius: 34px;
    transition: var(--transition-fast);
    -webkit-transition: var(--transition-fast);
}

.toggle-switch__slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: var(--transition-fast);
    -webkit-transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.toggle-switch__input:checked + .toggle-switch__slider {
    background-color: var(--color-success);
}

.toggle-switch__input:checked + .toggle-switch__slider:before {
    transform: translateX(26px);
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
}

.toggle-switch__input:focus + .toggle-switch__slider {
    box-shadow: 0 0 1px var(--color-success);
}

.toggle-switch:hover .toggle-switch__slider {
    opacity: 0.9;
}

/* Responsive Design for Account Page */
@media (max-width: 768px) {
    .account-actions {
        grid-template-columns: 1fr;
    }

    .preference-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        text-align: left;
    }

    .preference-item__control {
        align-self: center;
    }

    .account-info__contact {
        gap: var(--spacing-xs);
    }
}

@media (max-width: 480px) {
    .account-info__details {
        padding: var(--spacing-md);
    }

    .preference-item {
        padding: var(--spacing-md);
    }

    .toggle-switch {
        width: 50px;
        height: 30px;
    }

    .toggle-switch__slider:before {
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
    }

    .toggle-switch__input:checked + .toggle-switch__slider:before {
        transform: translateX(20px);
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
    }
}

/* ========================================
   SEARCH TABLE COMPONENTS (BEM)
   ======================================== */

/* Search Table Container */
.search-table-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

/* Search Table Base */
.search-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

/* Table Head */
.search-table__head {
    background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
}

.search-table__header {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: white;
    border: none;
    font-size: var(--font-size-sm);
}

/* Table Body */
.search-table__body {
    background: var(--color-white);
}

/* Table Rows */
.search-table__row {
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--color-gray-100);
}

.search-table__row:hover {
    background: var(--color-gray-50);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-table__row:last-child {
    border-bottom: none;
}

/* Table Cells */
.search-table__cell {
    padding: var(--spacing-md) var(--spacing-lg);
    vertical-align: middle;
    border: none;
}

/* Cell Type Styles */
.search-table__cell--type {
    width: 40%;
}

.search-table__cell--code {
    width: 30%;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
    font-family: 'Monaco', 'Menlo', monospace;
}

.search-table__cell--action {
    width: 30%;
    text-align: right;
}

/* Type Badges */
.search-table__type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-base);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Badge Variants */
.search-table__type-badge--bf {
    background: linear-gradient(135deg, #ff4444, #ff6666);
    color: white;
}

.search-table__type-badge--vanne {
    background: linear-gradient(135deg, var(--color-blue), #4da3ff);
    color: white;
}

.search-table__type-badge--puisard {
    background: linear-gradient(135deg, var(--color-cyan), #33d9ff);
    color: white;
}

.search-table__type-badge--regard-p {
    background: linear-gradient(135deg, var(--color-purple), #9966ff);
    color: white;
}

.search-table__type-badge--regard-s {
    background: linear-gradient(135deg, var(--color-teal), #33cc99);
    color: white;
}

.search-table__type-badge--history {
    background: linear-gradient(135deg, var(--color-gray), #9999aa);
    color: white;
}

/* Action Button */
.search-table__button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.search-table__button--locate {
    background: linear-gradient(135deg, var(--color-success), #22cc22);
    color: white;
}

.search-table__button--locate:hover {
    background: linear-gradient(135deg, #009900, var(--color-success));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 170, 0, 0.3);
}

/* Note for Historical Data */
.search-table__note {
    color: var(--color-gray-600);
    font-style: italic;
    font-size: var(--font-size-xs);
}

/* Search Info Components (for no search case) */
.search-info__message {
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.search-info__actions {
    display: flex;
    justify-content: center;
}

.search-info__button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.search-info__button--close {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
}

.search-info__button--close:hover {
    background: var(--color-gray-300);
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .search-table__header,
    .search-table__cell {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .search-table__cell--type {
        width: 50%;
    }

    .search-table__cell--code {
        width: 50%;
    }

    .search-table__cell--action {
        width: 100%;
        text-align: center;
        border-top: 1px solid var(--color-gray-100);
        padding-top: var(--spacing-sm);
    }

    .search-table__row {
        display: block;
        border: 1px solid var(--color-gray-200);
        margin-bottom: var(--spacing-md);
        border-radius: var(--radius-base);
    }

    .search-table__cell {
        display: block;
        width: 100% !important;
        text-align: left !important;
        border-bottom: 1px solid var(--color-gray-100);
    }

    .search-table__cell:last-child {
        border-bottom: none;
    }

    .search-table__type-badge {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .search-table-container {
        margin: 0 -var(--spacing-sm);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .search-table__header,
    .search-table__cell {
        padding: var(--spacing-sm);
    }

    .search-table__button {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   STATS GAUGE SYSTEM (BEM VERSION)
   ======================================== */

/* Stats Gauge Base Components */
.stats-gauge {
    position: relative;
    width: 120px;
    height: 60px;
    margin: 0 auto;
}

.stats-gauge__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 60px;
    border: 3px solid var(--color-gray-200);
    border-bottom: none;
    border-radius: 60px 60px 0 0;
    background: var(--color-white);
}

.stats-gauge__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 60px;
    overflow: hidden;
    border-radius: 60px 60px 0 0;
}

.stats-gauge__progress {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 126px;
    height: 66px;
    border: 3px solid var(--color-success);
    border-bottom: none;
    border-radius: 63px 63px 0 0;
    transform-origin: 50% 100%;
    transform: rotate(var(--rotation, -180deg));
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-gauge__progress--error {
    border-color: var(--color-error);
}

.stats-gauge__progress--warning {
    border-color: var(--color-warning);
}

.stats-gauge__progress--orange {
    border-color: var(--color-orange);
}

.stats-gauge__progress--darkgray {
    border-color: var(--color-darkgray);
}

.stats-gauge__progress--success {
    border-color: var(--color-success);
}

.stats-gauge__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.stats-gauge__value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
    margin: 0;
    line-height: 1;
}

.stats-gauge__detail {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1;
    margin-top: var(--spacing-xs);
}

.stats-gauge__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: center;
}

.stats-gauge__label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-700);
    font-weight: var(--font-weight-medium);
    text-align: center;
    line-height: 1.2;
    margin: 0;
}

/* Stats Gauge Text Color Modifiers */
.stats-gauge__text--error {
    color: var(--color-error);
}

.stats-gauge__text--warning {
    color: var(--color-warning);
}

.stats-gauge__text--orange {
    color: var(--color-orange);
}

.stats-gauge__text--darkgray {
    color: var(--color-darkgray);
}

.stats-gauge__text--success {
    color: var(--color-success);
}

/* Stats Gauge Label Color Modifiers */
.stats-gauge__label--error {
    color: var(--color-error);
}

.stats-gauge__label--warning {
    color: var(--color-warning);
}

.stats-gauge__label--orange {
    color: var(--color-orange);
}

.stats-gauge__label--darkgray {
    color: var(--color-darkgray);
}

.stats-gauge__label--success {
    color: var(--color-success);
}

/* Interactive Stats Gauges */
.stats-gauge__column--clickable {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.stats-gauge__column--clickable:hover {
    transform: translateY(-2px);
}

.stats-gauge__column--clickable:hover .stats-gauge {
    filter: brightness(1.1);
}

/* Animation keyframes for pulse effect */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ========================================
   HISTORIQUE COMPONENTS (BEM)
   ======================================== */

/* === HISTORIQUE TABLE === */
.historique-table-container {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.historique-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    background: var(--color-white);
}

.historique-table thead {
    background: var(--color-gray-100);
}

.historique-table th {
    padding: var(--spacing-lg);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    border-bottom: 2px solid var(--color-gray-200);
    font-size: var(--font-size-base);
}

.historique-table__row {
    border-bottom: 1px solid var(--color-gray-200);
    transition: all 0.2s ease;
}

.historique-table__row:hover {
    background: var(--color-gray-50);
}

.historique-table__row:last-child {
    border-bottom: none;
}

.historique-table__cell {
    padding: var(--spacing-lg);
    vertical-align: top;
    line-height: 1.5;
}

.historique-table__cell--info {
    background: var(--color-gray-50);
    border-right: 1px solid var(--color-gray-200);
    width: 250px;
    min-width: 250px;
}

.historique-table__cell--description {
    background: var(--color-white);
}

/* === HISTORIQUE INFO ITEMS === */
.historique-info__item {
    margin-bottom: var(--spacing-sm);
    color: var(--color-gray-700);
    line-height: 1.4;
}

.historique-info__item:last-child {
    margin-bottom: 0;
}

.historique-info__item strong {
    color: var(--color-gray-800);
    font-weight: var(--font-weight-semibold);
}

/* === HISTORIQUE MAP ACTION === */
.historique-map-action {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-200);
}

.historique-map-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.historique-map-btn:hover {
    background: var(--color-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.historique-map-btn:active {
    transform: translateY(0);
}

/* === HISTORIQUE EXPAND LINK === */
.historique-expand-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-top: var(--spacing-sm);
    transition: all 0.2s ease;
}

.historique-expand-link:hover {
    color: var(--color-blue);
    text-decoration: underline;
}

.historique-expand-link i {
    font-size: var(--font-size-xs);
}

/* === HISTORIQUE SEPARATOR === */
.historique-separator {
    border: none;
    border-top: 1px solid var(--color-gray-300);
    margin: var(--spacing-md) 0;
}

/* === HISTORIQUE PAGINATION === */
.historique-pagination {
    margin-top: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

.historique-pagination__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.historique-pagination__numbers {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.historique-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-white);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
    min-width: 44px;
    height: 44px;
}

.historique-pagination__btn:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
    color: var(--color-gray-800);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.historique-pagination__btn--current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    cursor: default;
}

.historique-pagination__btn--current:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: none;
    box-shadow: none;
}

.historique-pagination__btn--first,
.historique-pagination__btn--prev {
    border-color: var(--color-gray-300);
}

.historique-pagination__btn--next,
.historique-pagination__btn--last {
    border-color: var(--color-gray-300);
}

.historique-pagination__info {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-align: center;
}

/* === HISTORIQUE NO RESULTS === */
.historique-no-results {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-gray-600);
}

.historique-no-results__icon {
    font-size: 3rem;
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-lg);
    display: block;
}

.historique-no-results__text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
    margin: 0 0 var(--spacing-sm) 0;
}

.historique-no-results__suggestion {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* === HISTORIQUE ERROR === */
.historique-error {
    text-align: center;
    padding: var(--spacing-xl);
}

.historique-error__text {
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.5;
}

.historique-error__details {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-family: monospace;
    background: var(--color-gray-50);
    padding: var(--spacing-sm);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-gray-200);
    margin: 0;
    word-break: break-word;
}

/* === RESPONSIVE DESIGN FOR HISTORIQUE === */
@media (max-width: 768px) {
    .historique-table-container {
        margin: 0 -var(--spacing-md);
    }
    
    .historique-table {
        font-size: var(--font-size-xs);
    }
    
    .historique-table th,
    .historique-table__cell {
        padding: var(--spacing-sm);
    }
    
    .historique-table__cell--info {
        width: 200px;
        min-width: 200px;
    }
    
    .historique-map-btn {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .historique-pagination__nav {
        gap: var(--spacing-xs);
    }
    
    .historique-pagination__btn {
        padding: var(--spacing-sm);
        min-width: 40px;
        height: 40px;
        font-size: var(--font-size-xs);
    }
    
    .historique-pagination__btn--first,
    .historique-pagination__btn--last {
        display: none;
    }
}

@media (max-width: 480px) {
    .historique-table {
        font-size: 0.65rem;
    }
    
    .historique-table th,
    .historique-table__cell {
        padding: var(--spacing-xs);
    }
    
    .historique-table__cell--info {
        width: 150px;
        min-width: 150px;
    }
    
    .historique-info__item {
        margin-bottom: var(--spacing-xs);
        font-size: 0.65rem;
    }
    
    .historique-map-btn {
        font-size: 0.6rem;
        padding: 4px 6px;
    }
    
    .historique-pagination__nav {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .historique-pagination__numbers {
        order: -1;
    }
    
    .historique-pagination__btn {
        min-width: 36px;
        height: 36px;
    }
    
    .historique-pagination__btn--prev,
    .historique-pagination__btn--next {
        width: 100%;
        max-width: 200px;
    }
    
    .historique-no-results {
        padding: var(--spacing-lg);
    }
    
    .historique-no-results__icon {
        font-size: 2rem;
        margin-bottom: var(--spacing-md);
    }
}

/* === FONCTION MANAGEMENT COMPONENTS === */

/* Form Components */
.fonction-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
}

.fonction-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.fonction-form__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
}

.fonction-form__icon {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.fonction-form__input {
    padding: var(--spacing-md);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    transition: all 0.2s ease;
    background-color: var(--color-white);
}

.fonction-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.fonction-form__input::placeholder {
    color: var(--color-gray-600);
}

.fonction-form__actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-start;
    margin-top: var(--spacing-md);
}

/* Button Components */
.fonction-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

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

.fonction-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

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

.fonction-btn--primary:hover {
    background: #2563eb;
    color: var(--color-white);
}

.fonction-btn--secondary {
    background: var(--color-white);
    color: var(--color-gray-700);
    border: 2px solid var(--color-gray-300);
}

.fonction-btn--secondary:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
    color: var(--color-gray-800);
}

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

.fonction-btn--warning:hover {
    background: #b8860b;
    color: var(--color-white);
}

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

.fonction-btn--danger:hover {
    background: #e63946;
    color: var(--color-white);
}

.fonction-btn--sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    min-width: 100px;
}

/* Table Components */
.fonction-table-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
}

.fonction-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
}

.fonction-table th {
    background: linear-gradient(135deg, var(--color-primary), #2563eb);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-size: var(--font-size-base);
}

.fonction-table th i {
    margin-right: var(--spacing-sm);
    opacity: 0.9;
}

.fonction-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-gray-200);
    vertical-align: middle;
}

.fonction-table tbody tr:hover {
    background-color: var(--color-gray-50);
}

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

/* Action Buttons */
.fonction-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Info Note */
.fonction-info-note {
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-gray-700);
}

.fonction-info-note i {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.fonction-info-note small {
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 768px) {
    .fonction-form__actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .fonction-btn {
        width: 100%;
        min-width: auto;
    }
    
    .fonction-actions {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .fonction-table-container {
        overflow-x: auto;
    }
    
    .fonction-table {
        min-width: 500px;
    }
    
    .fonction-table th,
    .fonction-table td {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .fonction-info-note {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
}
/* === FUNCTION MANAGEMENT FORMS === */
/* Styles pour les formulaires de gestion des fonctions et droits d'accès */

.function-form__section {
    margin: 25px 0;
}

.function-form__section-header {
    margin-bottom: 20px;
}

.function-form__section-heading {
    margin: 0 0 8px 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.function-form__section-description {
    margin: 0;
    color: #666;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.function-form__admin-warning {
    color: #dc3545;
    font-weight: bold;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.permission-item {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s ease;
}

.permission-item:hover {
    background: #e9ecef;
    border-color: #007bff;
}

.permission-item--admin {
    background: #fff5f5;
    border-color: #fecaca;
}

.permission-item--admin:hover {
    background: #fef2f2;
    border-color: #dc3545;
}

.permission-item__label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}

.permission-item__text {
    flex: 1;
    font-size: 14px;
}

.permission-item__text--admin {
    color: #dc3545;
    font-weight: bold;
}

.permission-item__checkbox {
    width: 18px;
    height: 18px;
    accent-color: #007bff;
}

.permission-item__checkbox--admin {
    accent-color: #dc3545;
}

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

/* === DASHBOARD HERO ICON STYLING === */
.dashboard__greeting i {
    font-size: var(--font-size-xl);
    margin-right: var(--spacing-sm);
    color: var(--color-primary);
}

/* === ADMIN CONTENT BOX STYLING === */
.content-box--admin .content-box__header {
    background: linear-gradient(135deg, var(--color-error), #dc2626);
}

.content-box--admin .content-box__icon {
    color: var(--color-white);
}

.content-box--admin .content-box__heading {
    color: var(--color-white);
}

/* ============================================
   CSS POUR PARAMÈTRES SYSTÈME (/gestion/parametre.php) 
   ============================================ */

/* Alertes et messages */
.parameters-alert {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.parameters-alert--success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.parameters-alert--error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.parameters-alert i {
    font-size: var(--font-size-lg);
    margin-top: 2px;
}

.parameters-alert div {
    flex: 1;
}

.parameters-alert strong {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
    display: block;
}

.parameters-alert p {
    margin: 0;
    opacity: 0.9;
}

/* Prévisualisation du logo */
.parameters-preview {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.parameters-preview h4 {
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--color-gray-800);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.parameters-logo-preview {
    text-align: center;
    padding: var(--spacing-xl);
    background: var(--color-white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-200);
}

.parameters-preview-logo {
    max-width: 100px;
    max-height: 80px;
    margin-bottom: var(--spacing-md);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.parameters-preview-slogan {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-style: italic;
}

/* Formulaire des paramètres */
.parameters-form {
    width: 100%;
    padding: var(--spacing-md);
}

.parameters-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.parameters-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.parameters-form-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
    font-size: var(--font-size-base);
}

.parameters-form-label i {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

/* Inputs de formulaire */
.parameters-file-input {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px dashed var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
    transition: all 0.2s ease;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
}

.parameters-file-input:hover {
    border-color: var(--color-primary);
    background: #e3f2fd;
}

.parameters-file-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #e3f2fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.parameters-text-input {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    transition: all 0.2s ease;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
}

.parameters-text-input:hover {
    border-color: var(--color-gray-300);
}

.parameters-text-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.parameters-text-input::placeholder {
    color: var(--color-gray-600);
    opacity: 0.7;
}

/* Informations d'aide */
.parameters-file-info,
.parameters-field-help {
    margin-top: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-gray-600);
    font-size: var(--font-size-xs);
}

.parameters-file-info i,
.parameters-field-help i {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

/* Section d'informations */
.parameters-info-section {
    margin: var(--spacing-2xl) 0;
}

.parameters-info-box {
    background: #e8f4fd;
    border: 1px solid #bee5eb;
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
}

.parameters-info-box i {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    margin-top: 2px;
    flex-shrink: 0;
}

.parameters-info-box h4 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-gray-800);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.parameters-info-box ul {
    margin: 0;
    padding-left: var(--spacing-xl);
}

.parameters-info-box li {
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Actions du formulaire */
.parameters-form-actions {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-2xl);
}

.parameters-submit-btn,
.parameters-back-btn {
    min-width: 200px;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.parameters-submit-btn:hover,
.parameters-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.parameters-submit-btn .tool-card__title,
.parameters-back-btn .tool-card__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Responsive design */
@media (max-width: 768px) {
    .parameters-info-box {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .parameters-info-box i {
        font-size: var(--font-size-lg);
    }
    
    .parameters-form-actions {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
    }
    
    .parameters-submit-btn,
    .parameters-back-btn {
        min-width: 100%;
        max-width: 300px;
    }
    
    .parameters-alert {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
}

/* ========================================
   LOG PAGE STYLES - BEM METHODOLOGY
   Styles pour /gestion/log.php
   ======================================== */

/* === LOG FORM COMPONENTS === */
.log-form__group {
    margin-bottom: var(--spacing-lg);
}

.log-form__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-sm);
}

.log-form__label i {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.log-form__controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.log-form__select {
    flex: 1;
    max-width: 300px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    background-color: var(--color-white);
    transition: all 0.2s ease;
}

.log-form__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px hsl(215, 64%, 59%, 0.1);
}

.log-form__reset-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-gray-200);
    color: var(--color-gray-600);
    text-decoration: none;
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
}

.log-form__reset-btn:hover {
    background-color: var(--color-gray-300);
    color: var(--color-gray-800);
}

/* === LOG FILTER BADGE === */
.log-filter-badge {
    background: hsl(210, 100%, 97%);
    color: hsl(215, 64%, 59%);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    border: 1px solid hsl(215, 64%, 89%);
}

.log-filter-badge i {
    font-size: var(--font-size-xs);
}

/* === LOG TABLE COMPONENTS === */
.log-table-container {
    overflow-x: auto;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-gray-200);
}

.log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    background-color: var(--color-white);
}

.log-table__header {
    background-color: var(--color-gray-50);
    color: var(--color-gray-800);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-200);
}

.log-table__header i {
    margin-right: var(--spacing-xs);
    color: var(--color-gray-600);
}

.log-table__row {
    transition: background-color 0.2s ease;
}

.log-table__row:hover {
    background-color: var(--color-gray-50);
}

.log-table__row:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-100);
}

.log-table__cell {
    padding: var(--spacing-md);
    vertical-align: top;
}

/* === LOG TABLE CELL CONTENT === */
.log-table__user-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.log-table__user-badge i {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.log-table__datetime {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.log-table__date {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
}

.log-table__time {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
}

.log-table__page-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.log-table__page-icon {
    color: var(--color-green);
    font-size: var(--font-size-xs);
}

.log-table__page-path {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-xs);
    background: var(--color-gray-50);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    word-break: break-all;
}

.log-table__ip-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.log-table__ip-info i {
    color: var(--color-gray-600);
    font-size: var(--font-size-base);
}

.log-table__ip-code {
    background: var(--color-gray-50);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-family: 'Courier New', monospace;
}

/* === LOG PAGINATION === */
.log-pagination {
    margin-top: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.log-pagination__info {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

.log-pagination__controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.log-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--spacing-sm);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.log-pagination__btn--outline {
    background: var(--color-white);
    border-color: var(--color-gray-200);
    color: var(--color-gray-700);
}

.log-pagination__btn--outline:hover {
    background: var(--color-gray-50);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.log-pagination__btn--current {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
    border-color: var(--color-primary);
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .log-form__controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .log-form__select {
        max-width: none;
    }
    
    .log-pagination {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .log-pagination__controls {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .log-table__header,
    .log-table__cell {
        padding: var(--spacing-sm) var(--spacing-xs);
        font-size: var(--font-size-xs);
    }
    
    .log-table__page-path {
        word-break: break-all;
        max-width: 120px;
    }
    
    .log-table__user-badge {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .log-table__datetime {
        align-items: flex-start;
    }
}

/* ===================================================================
   GESTION DES DROITS D'ACCÈS - ACCESS RIGHTS MANAGEMENT
   =================================================================== */

/* === FORMULAIRE D'ACCÈS === */
.access-form {
    width: 100%;
    padding: var(--spacing-md);
}

.access-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.access-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.access-form__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
}

.access-form__label i {
    color: var(--color-primary);
    width: 16px;
    text-align: center;
}

.access-form__input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--color-white);
    transition: all 0.2s ease;
}

.access-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.access-form__input::placeholder {
    color: var(--color-gray-400);
}

.access-form__help {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-gray-600);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
}

.access-form__help i {
    color: var(--color-info);
    font-size: var(--font-size-xs);
}

.access-form__actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
}

.access-form__button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.access-form__button--primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.access-form__button--secondary {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
}

.access-form__button--secondary:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
}

/* === ALERTE D'AVERTISSEMENT === */
.access-alert {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.access-alert--warning {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.access-alert__icon {
    color: #f39c12;
    font-size: var(--font-size-lg);
    margin-top: 2px;
    flex-shrink: 0;
}

.access-alert__content {
    flex: 1;
}

.access-alert__content strong {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-semibold);
}

.access-alert__content p {
    margin: 0;
    line-height: 1.5;
}

/* === TABLEAU DES ACCÈS === */
.access-table {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
}

.access-table__table {
    width: 100%;
    border-collapse: collapse;
}

.access-table__head {
    background: var(--color-gray-50);
}

.access-table__row--header {
    border-bottom: 2px solid var(--color-gray-200);
}

.access-table__row {
    border-bottom: 1px solid var(--color-gray-100);
    transition: background-color 0.2s ease;
}

.access-table__row:hover {
    background: var(--color-gray-50);
}

.access-table__row--admin {
    background: #fee2e2;
}

.access-table__row--admin:hover {
    background: #fecaca;
}

.access-table__header {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
}

.access-table__header i {
    margin-right: var(--spacing-xs);
    color: var(--color-primary);
}

.access-table__cell {
    padding: var(--spacing-md) var(--spacing-lg);
    vertical-align: middle;
}

.access-table__cell--no-data {
    text-align: center;
    color: var(--color-gray-500);
    font-style: italic;
    padding: var(--spacing-xl);
}

.access-table__identifier {
    background: var(--color-gray-100);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-xs);
    color: var(--color-gray-700);
    font-weight: var(--font-weight-medium);
}

.access-table__description {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.access-table__description--admin {
    color: var(--color-danger);
}

.access-table__admin-icon {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
}

.access-table__actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.access-table__button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.access-table__button--edit {
    background: var(--color-warning);
    color: var(--color-white);
}

.access-table__button--edit:hover {
    background: #d97706;
    transform: translateY(-1px);
}

.access-table__button--delete {
    background: var(--color-error) !important;
    color: var(--color-white);
}

.access-table__button--delete:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .access-form__grid {
        gap: var(--spacing-md);
    }
    
    .access-form__actions {
        flex-direction: column;
    }
    
    .access-form__button {
        justify-content: center;
    }
    
    .access-table__actions {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .access-table__button {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs);
    }
    
    .access-table__description {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .access-table__cell {
        padding: var(--spacing-sm);
    }
    
    .access-alert {
        flex-direction: column;
        text-align: center;
    }
}

/* === LOGIN PAGE STYLES === */

/* Login container */
.login {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

/* Login hero section */
.login__hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-blue) 100%);
    color: var(--color-white);
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
    text-align: center;
}

.login__hero-content {
    max-width: 600px;
    margin: 0 auto;
}

.login__greeting {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.login__hero-icon {
    font-size: 1.5rem;
    opacity: 0.9;
}

/* Login form styles */
.login-form {
    width: 100%;
    padding: var(--spacing-md);
}

.form-field {
    margin-bottom: 1.5rem;
}

.form-field__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
    margin-bottom: 0.5rem;
    font-size: var(--font-size-base);
}

.form-field__icon {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.form-field__input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-gray-200);
    border-radius: 8px;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    background: var(--color-white);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-field__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-field__input:hover {
    border-color: var(--color-gray-300);
}

/* Login form actions */
.login-form__actions {
    margin-top: 2rem;
    text-align: center;
}

/* PDF List Styles */
.pdf-list__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pdf-list__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.pdf-list__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-base);
    text-decoration: none;
    transition: all 0.2s ease;
}

.pdf-list__download:hover {
    background: var(--color-blue);
    transform: scale(1.05);
}

.pdf-list__download i {
    font-size: 14px;
}

/* Button styles */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 44px;
    box-sizing: border-box;
}

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

.button--primary:hover {
    background: hsl(215, 64%, 54%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.button--primary:active {
    transform: translateY(0);
}

.button--login {
    min-width: 200px;
}

.button__icon {
    font-size: var(--font-size-sm);
}

/* Login help section */
.login-help {
    margin-top: 2rem;
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-200);
}

.login-help__text {
    color: var(--color-gray-600);
    margin: 0 0 1rem 0;
    font-size: var(--font-size-sm);
}

.login-help__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease;
}

.login-help__link:hover {
    color: hsl(215, 64%, 54%);
}

.login-help__icon {
    font-size: var(--font-size-sm);
}

/* Login error message */
.login-error {
    background: var(--color-error);
    color: var(--color-white);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    font-weight: var(--font-weight-medium);
    text-align: center;
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.2);
}

/* Content box modifiers for login */
.content-box--login {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
}

.content-box--demo {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
}

.content-box--demo .content-box__icon {
    color: var(--color-orange);
}

.content-box--trial {
    background: var(--color-white);
    border: 1px solid var(--color-primary);
}

.content-box--trial .content-box__icon {
    color: var(--color-primary);
}

/* Demo warning styles */
.demo-warning__emphasis {
    font-weight: var(--font-weight-bold);
    color: var(--color-orange);
    margin-bottom: 1rem;
}

.demo-warning__text {
    color: var(--color-gray-700);
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Trial content styles */
.trial-content__text {
    color: var(--color-gray-700);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.trial-action {
    margin-top: 1.5rem;
}

.trial-signup {
    max-width: 100%;
}

/* Update notification styles */
.update-notification {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-blue) 100%);
    color: var(--color-white);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
    position: relative;
}

.update-notification__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.update-notification__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.update-notification__link {
    color: var(--color-white);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    flex: 1;
}

.update-notification__link:hover {
    text-decoration: underline;
}

.update-notification__footer {
    display: flex;
    justify-content: flex-end;
}

.update-notification__dismiss {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.update-notification__checkbox {
    margin: 0;
}

/* Responsive design for login */
@media (max-width: 768px) {
    .login {
        padding: 0.5rem;
    }
    
    .login__hero {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .login__greeting {
        font-size: var(--font-size-lg);
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .content-box {
        padding: 0;
    }
    
    .form-field__input {
        padding: 0.75rem;
    }
    
    .button {
        padding: 0.75rem 1.5rem;
        width: 100%;
    }
    
    .trial-signup {
        width: 100%;
    }
    
    .update-notification {
        padding: 1rem;
    }
    
    .update-notification__header {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
}

/* ========================================
   EDIT FORM COMPONENTS - BEM METHODOLOGY
   For /script/edit_bf.php and similar edit forms
   ======================================== */

/* === EDIT FORM LAYOUT === */
.edit-form {
    padding: 0;
    width: 100%;
}

.edit-form__section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-gray-200);
}

.edit-form__section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.edit-form__section-title {
    color: var(--color-gray-800);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* === FORM FIELDS === */
.edit-form__group {
    margin-bottom: var(--spacing-md);
}

.edit-form__label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    font-size: var(--font-size-sm);
}

.edit-form__input,
.edit-form__select,
.edit-form__textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    background-color: var(--color-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.edit-form__input:focus,
.edit-form__select:focus,
.edit-form__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.edit-form__textarea {
    resize: vertical;
    min-height: 80px;
}

.edit-form__value {
    padding: 0.75rem;
    background-color: var(--color-gray-100);
    border-radius: var(--radius-md);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-gray-200);
}

/* === TOGGLE BUTTON FOR HIDDEN SECTION === */
.edit-form__toggle-button {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: var(--shadow-sm);
}

.edit-form__toggle-button:hover {
    background-color: var(--color-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.edit-form__toggle-icon {
    font-size: 1rem;
}

/* === HIDDEN SECTION === */
.edit-form__hidden-section {
    background-color: var(--color-gray-50);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-lg);
    border: 1px solid var(--color-gray-200);
    transition: all 0.3s ease;
}

.edit-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

/* === FORM ACTIONS === */
.edit-form__actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
    margin-top: var(--spacing-xl);
}

.edit-form__submit-button {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: var(--color-success);
    color: var(--color-white);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.edit-form__submit-button:hover {
    background-color: #008800;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.edit-form__submit-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.edit-form__button-icon {
    font-size: 1rem;
}

/* === UTILITY CLASSES === */
.u-hidden {
    display: none !important;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .edit-form__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .edit-form__actions {
        flex-direction: column-reverse;
        gap: var(--spacing-sm);
    }
    
    .edit-form__submit-button {
        width: 100%;
        justify-content: center;
    }
    
    .edit-form__section-title {
        font-size: var(--font-size-base);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .edit-form__hidden-section {
        padding: var(--spacing-md);
        margin-top: var(--spacing-md);
    }
    
    .edit-form__toggle-button {
        width: 100%;
        justify-content: center;
    }
}


/* === FORM STYLES (BEM) === */
.form {
    max-width: 100%;
    margin: 0;
}

.form__section {
    margin-bottom: var(--spacing-xl);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
}

.form__section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.form__icon {
    font-size: 1rem;
    color: var(--color-primary);
}

.form__group {
    margin-bottom: var(--spacing-md);
}

.form__label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-sm);
}

.form__value {
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.form__radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form__radio-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    transition: all 0.2s ease;
    cursor: pointer;
}

.form__radio-item:hover {
    background: var(--color-gray-50);
    border-color: var(--color-primary);
}

.form__radio-item input[type="radio"] {
    margin: 0;
    accent-color: var(--color-primary);
}

.form__radio-item label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    cursor: pointer;
    flex: 1;
    margin: 0;
    line-height: 1.4;
}

/* Priority-specific radio label colors */
.form__radio-label--urgent {
    color: #dc2626 !important;
    font-weight: 600;
}

.form__radio-label--medium {
    color: #f59e0b !important;
    font-weight: 500;
}

.form__radio-label--low {
    color: #10b981 !important;
    font-weight: 400;
}

/* Radio button accent colors for priorities */
.form__radio-item:has(.form__radio:checked) .form__radio-label--urgent {
    font-weight: 700;
}

.form__radio-item:has(.form__radio:checked) .form__radio-label--medium {
    font-weight: 600;
}

.form__radio-item:has(.form__radio:checked) .form__radio-label--low {
    font-weight: 600;
}

.form__checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.form__checkbox-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form__checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    transition: all 0.2s ease;
    cursor: pointer;
}

.form__checkbox-item:hover {
    background: var(--color-gray-50);
    border-color: var(--color-primary);
}

.form__checkbox-item input[type="checkbox"] {
    margin: 0;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.form__checkbox-item label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    cursor: pointer;
    flex: 1;
    margin: 0;
    line-height: 1.4;
}

.form__textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-gray-800);
    background: var(--color-white);
    resize: vertical;
    transition: all 0.2s ease;
}

.form__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.form__textarea::placeholder {
    color: var(--color-gray-500);
}

.form__actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
    margin-top: var(--spacing-xl);
}

.form__button {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

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

.form__button--primary:hover {
    background-color: #008800;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.form__button--secondary {
    background-color: var(--color-gray-200);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
}

.form__button--secondary:hover {
    background-color: var(--color-gray-300);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.form__button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.form__button-icon {
    font-size: 1rem;
}

/* === FORM RESPONSIVE STYLES === */
@media (max-width: 768px) {
    .form__checkbox-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .form__actions {
        flex-direction: column-reverse;
        gap: var(--spacing-sm);
    }
    
    .form__button {
        width: 100%;
        justify-content: center;
    }
    
    .form__section {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }
    
    .form__section-title {
        font-size: var(--font-size-base);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
}

/* === FORM ADDITIONAL STYLES === */
.form__info {
    background-color: #f0f9ff;
    border: 1px solid #0ea5e9;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: #0369a1;
    font-size: var(--font-size-sm);
}

.form__info i {
    font-size: var(--font-size-base);
    color: #0ea5e9;
}

/* === CONTACT INFO STYLES === */
.contact-info {
    background-color: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.contact-info__item {
    line-height: 1.6;
    color: var(--color-gray-700);
}

.contact-info__item strong {
    color: var(--color-gray-900);
}

.contact-info__link {
    color: var(--color-blue-600);
    text-decoration: none;
    font-weight: 500;
}

.contact-info__link:hover {
    color: var(--color-blue-700);
    text-decoration: underline;
}

/* === SUCCESS MESSAGE ENHANCEMENTS === */
.success-message__main {
    background-color: #f0fdf4;
    border: 1px solid #22c55e;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: #16a34a;
}

.success-message__warning {
    background-color: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: #d97706;
}

.success-message__info {
    background-color: #f0f9ff;
    border: 1px solid #0ea5e9;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: #0369a1;
}

.success-message__enjoy {
    background-color: #faf5ff;
    border: 1px solid #a855f7;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: #7c3aed;
}

.success-message__main i,
.success-message__warning i,
.success-message__info i,
.success-message__enjoy i {
    font-size: var(--font-size-base);
    flex-shrink: 0;
}


/* === MESSAGE STYLES === */
.message-container {
    margin-bottom: var(--spacing-lg);
}

.message-error {
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.message-error strong {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
}

.message-list {
    margin: 0;
    padding-left: var(--spacing-lg);
}

.message-list li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
}

/* === STANDARDIZED FORM INPUT STYLES === */
.form__input,
.form__select {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-gray-800);
    background: var(--color-white);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form__input:focus,
.form__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.form__input:hover,
.form__select:hover {
    border-color: var(--color-gray-400);
}

.form__input::placeholder {
    color: var(--color-gray-500);
}

.form__select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1.5 4.5 2.91 3.09 6 6.18 9.09 3.09 10.5 4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: calc(var(--spacing-md) * 2.5);
}

/* === FORM VALIDATION STATES === */
.form__group--error .form__input,
.form__group--error .form__select,
.form__group--error .form__textarea {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form__group--success .form__input,
.form__group--success .form__select,
.form__group--success .form__textarea {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.form__group--warning .form__input,
.form__group--warning .form__select,
.form__group--warning .form__textarea {
    border-color: var(--color-warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.form__error-message,
.form__success-message,
.form__warning-message {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.form__error-message {
    color: var(--color-error);
}

.form__success-message {
    color: var(--color-success);
}

.form__warning-message {
    color: var(--color-warning);
}

/* === FORM MESSAGE BOXES FOR PASSWORD RECOVERY === */
.form__message {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    border: 1px solid transparent;
}

.form__message-icon {
    font-size: var(--font-size-lg);
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.form__message-content {
    flex: 1;
    line-height: 1.5;
}

.form__message--success {
    background-color: hsl(142, 30%, 95%);
    border-color: hsl(142, 30%, 85%);
    color: hsl(142, 60%, 25%);
}

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

.form__message--error {
    background-color: hsl(0, 30%, 95%);
    border-color: hsl(0, 30%, 85%);
    color: hsl(0, 60%, 25%);
}

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

.form__message--warning {
    background-color: hsl(48, 30%, 95%);
    border-color: hsl(48, 30%, 85%);
    color: hsl(48, 60%, 25%);
}

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

.form__message--info {
    background-color: hsl(215, 30%, 95%);
    border-color: hsl(215, 30%, 85%);
    color: hsl(215, 60%, 25%);
}

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

/* Code display in messages */
.form__code {
    background-color: var(--color-gray-100);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
    border: 1px solid var(--color-gray-200);
    word-break: break-all;
    display: inline-block;
    margin-top: var(--spacing-xs);
}

/* Loading button state */
.form__button--loading {
    opacity: 0.7;
    cursor: not-allowed;
}

/* === ADDITIONAL BUTTON MODIFIERS === */
.form__button--danger {
    background-color: var(--color-error);
    color: var(--color-white);
}

.form__button--danger:hover {
    background-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

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

.form__button--warning:hover {
    background-color: #d97706;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* === FORM LAYOUT MODIFIERS === */
.form--horizontal .form__group {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.form--horizontal .form__label {
    flex: 0 0 200px;
    margin-bottom: 0;
    text-align: right;
}

.form--horizontal .form__input,
.form--horizontal .form__select,
.form--horizontal .form__textarea {
    flex: 1;
}

.form--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--spacing-md);
}

.form--inline .form__group {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.form--inline .form__actions {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* === FORM GRID SYSTEM === */
.form__grid {
    display: grid;
    gap: var(--spacing-lg);
}

.form__grid--2-col {
    grid-template-columns: repeat(2, 1fr);
}

.form__grid--3-col {
    grid-template-columns: repeat(3, 1fr);
}

.form__grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.form__grid-item {
    display: flex;
    flex-direction: column;
}

/* === FORM FIELDSET STYLES === */
.form__fieldset {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    background: var(--color-white);
}

.form__legend {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    padding: 0 var(--spacing-sm);
    background: var(--color-white);
}

/* === FORM HELP TEXT === */
.form__help {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.form__help-icon {
    color: var(--color-gray-500);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* === REQUIRED FIELD INDICATOR === */
.form__label--required::after {
    content: " *";
    color: var(--color-error);
    font-weight: var(--font-weight-medium);
}

/* === FORM DISABLED STATES === */
.form__input:disabled,
.form__select:disabled,
.form__textarea:disabled {
    background-color: var(--color-gray-100);
    color: var(--color-gray-500);
    cursor: not-allowed;
    opacity: 0.7;
}

.form__button:disabled {
    background-color: var(--color-gray-300) !important;
    color: var(--color-gray-500) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* === FORM RESPONSIVE ENHANCEMENTS === */
@media (max-width: 768px) {
    .form--horizontal .form__group {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .form--horizontal .form__label {
        flex: none;
        text-align: left;
    }
    
    .form--inline {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form__grid--2-col,
    .form__grid--3-col {
        grid-template-columns: 1fr;
    }
    
    .form__actions {
        flex-direction: column-reverse;
    }
    
    .form__button {
        width: 100%;
        justify-content: center;
    }
}

/* === BUTTON LOADING STATE === */
.btn-loading {
    opacity: 0.7;
    cursor: not-allowed !important;
}

.btn-loading:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
}

/* === ADDITIONAL UTILITY CLASSES === */
.is-hidden {
    display: none !important;
}

/* === FORM SECTION MODIFIERS === */
.form__section--hidden {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-lg);
    border: 1px solid var(--color-border-light);
}

/* === BF INSPECTION FORM SPECIFIC === */
.form__info-box {
    background-color: hsl(215, 100%, 98%);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-base);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.form__instruction-box {
    background-color: hsl(48, 100%, 98%);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-base);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.form__instruction-box p {
    margin-bottom: var(--spacing-sm);
}

.form__instruction-box p:last-child {
    margin-bottom: 0;
}

.form__legend {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-200);
}

.form__legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.form__legend-item--success {
    color: var(--color-success);
}

.form__legend-item--error {
    color: var(--color-error);
}

.form__inspection-grid {
    display: grid;
    gap: var(--spacing-md);
}

.form__inspection-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-base);
    background-color: var(--color-white);
    transition: all 0.2s ease;
}

.form__inspection-item:hover {
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-sm);
}

.form__inspection-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
}

.form__inspection-checkboxes {
    display: flex;
    gap: var(--spacing-sm);
}

.form__checkbox-pair {
    display: flex;
    gap: var(--spacing-sm);
}

.form__checkbox-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--color-white);
    position: relative;
}

.form__checkbox-option input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.form__checkbox-option i {
    font-size: 1.125rem;
    opacity: 0.3;
    transition: all 0.2s ease;
}

.form__checkbox-option:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.form__checkbox-option--success {
    border-color: var(--color-success);
}

.form__checkbox-option--success i {
    color: var(--color-success);
}

.form__checkbox-option--success:has(input:checked) {
    background-color: hsl(142, 71%, 95%);
    border-color: var(--color-success);
}

.form__checkbox-option--success:has(input:checked) i {
    opacity: 1;
}

.form__checkbox-option--error {
    border-color: var(--color-error);
}

.form__checkbox-option--error i {
    color: var(--color-error);
}

.form__checkbox-option--error:has(input:checked) {
    background-color: hsl(0, 84%, 97%);
    border-color: var(--color-error);
}

.form__checkbox-option--error:has(input:checked) i {
    opacity: 1;
}

.form__section-image {
    text-align: center;
    margin: var(--spacing-lg) 0;
}

.form__diagram {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-base);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .form__inspection-item {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .form__inspection-checkboxes {
        justify-content: center;
    }
    
    .form__legend {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* === FOOTER RESPONSIVE === */
@media (max-width: 768px) and (min-width: 601px) {
    .footer__section--version,
    .footer__section--neq {
        position: static;
    }
    
    .footer__container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    
    .footer__section--version,
    .footer__section--brand,
    .footer__section--neq {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .footer__container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .footer__section--version,
    .footer__section--neq {
        position: static;
        margin: 0;
    }
    
    .footer__section--brand {
        order: -1;
        margin: 0;
    }
    
    .footer__section--version {
        order: 0;
    }
    
    .footer__section--neq {
        order: 1;
    }
}

/* ========================================
   Mini Stats Gauges Component
   ======================================== */


/* ========================================
   Mini Stats Gauges Component
   ======================================== */

/* CSS Variables for gauge sizing */
  :root{
    --gsize: 100px;          /* taille par défaut si non spécifiée */
    --gap-canvas-desc: 0px;  /* écart canvas ↔ description (très serré) */
    --row-gap: 14px;         /* espacement vertical entre rangées */
    --card-gap: 12px;        /* espacement horizontal/vertical entre cartes */
  }

  /* Conteneur global (créé auto si absent) */
  #gauge-grid{
    display:flex;
    flex-direction:column;
    gap:var(--row-gap);
  }

  /* Rangée qui wrappe (retour à la ligne si largeur insuffisante) */
  .gauges-row{
    display:flex;
    flex-wrap:wrap;              /* ⟵ autorise les retours à la ligne */
    gap:var(--card-gap);
    align-items:flex-start;
    align-content:flex-start;
    width:100%;
    overflow:visible;
  }

  /* Carte largeur FIXE = taille de la gauge (n’élargit jamais) */
  .gauge-card{
    box-sizing:border-box;       /* bordures incluses dans la largeur */
    width:var(--gsize);          /* largeur = taille de la gauge */
    border-radius:8px;
    padding:0;
    background:transparent;      /* teintée par JS selon logique */
    border:1px solid transparent;
    flex:0 0 auto;               /* carte non extensible */
  }

  /* Lien qui entoure le canvas en cas de link */
  .gauge-link{
    display:block;
    width:100%;                  /* largeur = carte */
    text-decoration:none;
    border-radius:inherit;
    outline:none;
  }
  .gauge-link:focus-visible{
    outline:2px solid #3b82f6;   /* focus ring accessible */
    outline-offset:2px;
  }
  .is-clickable{ cursor:pointer; }

  /* Canvas sans décor ; taille = --gsize */
  .gauge-canvas{
    display:block;
    width:var(--gsize);
    height:var(--gsize);
    background:transparent;
    border:none;
    box-shadow:none;
    margin-bottom:0;
  }

  /* Description = toute la largeur, wrap agressif des longues chaînes */
  .gauge-desc{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin: var(--gap-canvas-desc) 0 4px;
    padding:0 2px;
    font:12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:#374151;
    text-align:center;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    hyphens:auto;
  }

/* ========================================
   PHOTOS COMPONENT - Gallery and Display
   ======================================== */

/* Photos mobile tip */
.photos__mobile-tip {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: #e3f2fd;
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-base);
    color: #1976d2;
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
}

.photos__mobile-icon {
    font-size: var(--font-size-base);
    color: #1976d2;
}

/* Photos gallery grid */
.photos__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

/* Individual photo item */
.photos__item {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* Photo container */
.photos__container {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

/* Photo link */
.photos__link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

/* Photo image */
.photos__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.photos__link:hover .photos__image {
    transform: scale(1.05);
}

/* Photo overlay */
.photos__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.photos__link:hover .photos__overlay {
    opacity: 1;
}

.photos__expand-icon {
    font-size: var(--font-size-xl);
    color: var(--color-white);
}

/* Photo info section */
.photos__info {
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
}

.photos__name {
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
    font-weight: var(--font-weight-medium);
    word-break: break-all;
    flex: 1;
}

/* Delete button */
.photos__delete {
    padding: 6px var(--spacing-md);
    background: var(--color-red);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s ease;
    font-weight: var(--font-weight-medium);
}

.photos__delete:hover {
    background: #c82333;
    text-decoration: none;
    color: var(--color-white);
}

.photos__delete-icon {
    font-size: var(--font-size-xs);
}

/* Empty state */
.photos__empty-state {
    text-align: center;
    padding: 60px var(--spacing-lg);
    color: var(--color-gray);
}

.photos__empty-icon {
    font-size: 3rem;
    color: var(--color-gray);
    margin-bottom: var(--spacing-lg);
}

.photos__empty-title {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-gray-800);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.photos__empty-text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* === PHOTO CAPTURE COMPONENT === */

/* Header pour page photo */
.header__center--photo {
    width: 100%;
    text-align: center;
}

/* Photo capture container */
.photo-capture {
    position: relative;
    background-color: var(--color-gray-900);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    max-width: 100%;
    margin: 0 auto;
}

/* Video element */
.photo-capture__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
}

/* Hidden canvas for image processing */
.photo-capture__canvas {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Photo status messages */
.photo-status {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: var(--radius-base);
    font-weight: var(--font-weight-medium);
    text-align: center;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-status.info {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.photo-status.success {
    background-color: var(--color-success);
    color: var(--color-white);
}

.photo-status.error {
    background-color: var(--color-error);
    color: var(--color-white);
}

/* Button loading state */
.form__button.btn-loading {
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
}

.form__button.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

/* Full-width form groups for photo capture */
.form__group--full-width {
    grid-column: 1 / -1;
}

/* Form grid 3 columns for search form */
.form__grid--3-col {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--spacing-lg);
    align-items: end;
}

/* Responsive design */
@media (max-width: 768px) {
    .form__grid--3-col {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .photos__gallery {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .photos__info {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .photos__delete {
        justify-content: center;
    }
    
    /* Photo capture responsive */
    .photo-capture {
        aspect-ratio: 3/2;
    }
    
    .form__actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .form__button {
        width: 100%;
        justify-content: center;
    }
}


/* === MODIF BRIS CONDUITE STYLES === */

/* Priority radio button styling */
.form__radio-item .urgent-priority {
    color: #dc2626;
    font-weight: 600;
}

.form__radio-item .medium-priority {
    color: #f59e0b;
    font-weight: 500;
}

.form__radio-item .low-priority {
    color: #10b981;
}

.form__radio-item .excavation-done {
    color: #3b82f6;
    font-weight: 500;
}

.form__radio-item .work-completed {
    color: #059669;
    font-weight: 600;
}

/* Form help text styling */
.form__help-text {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    margin: var(--spacing-xs) 0;
    line-height: 1.5;
}

/* ========================================
   BF INSPECTION FORM ENHANCEMENTS
   ======================================== */

/* Diagram image styling for BF inspection */
.form__section-image {
    text-align: center;
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.form__diagram {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

/* Enhanced visual feedback for inspection checkboxes */
.form__checkbox-option input:checked + i {
    animation: checkboxPulse 0.3s ease-out;
}

@keyframes checkboxPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Loading state for inspection form buttons */
.form__button--loading {
    pointer-events: none;
    opacity: 0.7;
}

.form__button--loading .fa-spinner {
    animation: spin 1s linear infinite;
}

/* Form section loading state */
.content-box--loading {
    opacity: 0.6;
    pointer-events: none;
}

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

/* Info box styling for instructions */
.form__info-box {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border: 1px solid #0ea5e9;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.form__info-box p {
    margin: 0;
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.form__instruction-box {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 1px solid #f59e0b;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* Enhanced hover effects for inspection items */
.form__inspection-item {
    transition: all 0.2s ease;
}

.form__inspection-item:hover {
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
    transform: translateY(-1px);
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    .form__inspection-grid {
        gap: var(--spacing-sm);
    }
    
    .form__inspection-item {
        padding: var(--spacing-sm);
    }
    
    .form__diagram {
        max-width: 90%;
    }
    
    .form__section-image {
        padding: var(--spacing-sm);
        margin: var(--spacing-md) 0;
    }
}

/* ===================================
   AVENIR PAGE STYLES - BEM METHODOLOGY
   =================================== */

/* Introduction section styling */
.avenir-intro p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-gray-700);
    line-height: 1.6;
}

.avenir-intro small {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

/* Features grid layout */
.avenir-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 20px 0;
}

/* Individual feature item styling */
.avenir-feature {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.avenir-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Feature variants */
.avenir-feature--blue {
    border-left: 4px solid #007bff;
}

.avenir-feature--green {
    border-left: 4px solid #28a745;
}

.avenir-feature--orange {
    border-left: 4px solid #fd7e14;
}

.avenir-feature--red {
    border-left: 4px solid #dc3545;
}

/* Feature icon styling */
.avenir-feature__icon {
    margin-right: 15px;
    color: #007bff;
    flex-shrink: 0;
}

.avenir-feature__icon i {
    font-size: 24px;
}

/* Feature content styling */
.avenir-feature__content {
    flex: 1;
}

.avenir-feature__title {
    margin: 0 0 8px 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-800);
}

.avenir-feature__description {
    margin: 0;
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* Contact section styling */
.avenir-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.avenir-contact__message h3 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-gray-800);
    font-size: var(--font-size-lg);
}

.avenir-contact__message p {
    margin: 0;
    color: var(--color-gray-600);
    line-height: 1.6;
}

.avenir-contact__action {
    display: flex;
    justify-content: center;
}

.avenir-contact__action .tool-card {
    max-width: 400px;
    width: 100%;
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    .avenir-features {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        margin: var(--spacing-md) 0;
    }
    
    .avenir-feature {
        padding: var(--spacing-md);
    }
    
    .avenir-feature__icon {
        margin-right: var(--spacing-sm);
    }
    
    .avenir-feature__icon i {
        font-size: 20px;
    }
    
    .avenir-contact {
        gap: var(--spacing-md);
    }
}

/* === UPDATES TIMELINE COMPONENTS === */

/* Updates Timeline - Main container */
.updates-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

/* Updates Timeline Item - Individual update entries */
.updates-timeline__item {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    border-left: 4px solid var(--color-primary);
    transition: all 0.2s ease;
}

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

/* Updates Timeline Header - Version info and date */
.updates-timeline__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-gray-200);
}

/* Version Badge */
.updates-timeline__version {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-base);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

/* Update Date */
.updates-timeline__date {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Updates Timeline Content */
.updates-timeline__content {
    color: var(--color-gray-800);
}

/* Main list in timeline */
.updates-timeline__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.updates-timeline__list-item {
    position: relative;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

.updates-timeline__list-item::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
}

.updates-timeline__list-item:last-child {
    margin-bottom: 0;
}

/* Nested sublists */
.updates-timeline__sublist {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0 var(--spacing-md);
}

.updates-timeline__sublist-item {
    position: relative;
    padding-left: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    line-height: 1.5;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.updates-timeline__sublist-item::before {
    content: "◦";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-gray-600);
    font-size: var(--font-size-xs);
}

.updates-timeline__sublist-item:last-child {
    margin-bottom: 0;
}

/* Responsive design for updates timeline */
@media (max-width: 768px) {
    .updates-timeline {
        gap: var(--spacing-md);
    }

    .updates-timeline__item {
        padding: var(--spacing-md);
        border-left-width: 3px;
    }

    .updates-timeline__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .updates-timeline__version {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs);
    }

    .updates-timeline__date {
        font-size: var(--font-size-xs);
    }

    .updates-timeline__list-item {
        padding-left: var(--spacing-md);
    }

    .updates-timeline__sublist {
        margin-left: var(--spacing-sm);
    }

    .updates-timeline__sublist-item {
        padding-left: var(--spacing-sm);
    }
}

/* Print styles */
@media print {
    .avenir-features {
        display: block;
    }

    .avenir-feature {
        margin-bottom: var(--spacing-md);
        page-break-inside: avoid;
    }

    .updates-timeline__item {
        box-shadow: none;
        border: 1px solid var(--color-gray-300);
        page-break-inside: avoid;
        margin-bottom: var(--spacing-md);
    }

    .updates-timeline__item:hover {
        transform: none;
        box-shadow: none;
    }
}

/* =================================================================
   === ACCESS DENIED PAGE COMPONENTS ===
   ================================================================= */

/* === DASHBOARD HERO ERROR MODIFIER === */
.dashboard__hero--error {
    background: linear-gradient(135deg, var(--color-error), #dc2626);
}

.dashboard__greeting--error {
    color: var(--color-white);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
}

.dashboard__greeting--error i {
    font-size: var(--font-size-lg);
    color: var(--color-white);
}

/* === CONTENT BOX ERROR MODIFIER === */
.content-box--error .content-box__header {
    background: linear-gradient(135deg, var(--color-error), #dc2626);
}

.content-box--error .content-box__icon {
    color: var(--color-white);
}

.content-box--error .content-box__heading {
    color: var(--color-white);
}

/* === ACCESS DENIED COMPONENT === */
.access-denied {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    align-items: center;
    text-align: center;
    padding: var(--spacing-xl);
}

.access-denied__message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    max-width: 600px;
}

.access-denied__icon {
    font-size: 4rem;
    color: var(--color-error);
    opacity: 0.8;
}

.access-denied__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.access-denied__text {
    font-size: var(--font-size-lg);
    color: var(--color-gray-800);
    margin: 0;
    line-height: 1.5;
}

.access-denied__text strong {
    color: var(--color-primary);
}

.access-denied__help {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.5;
}

/* === ACCESS DENIED ACTIONS === */
.access-denied__actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

/* === ACCESS DENIED BUTTON COMPONENT === */
.access-denied__button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--font-size-base);
}

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

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

.access-denied__button--primary:hover {
    background: hsl(215, 64%, 50%);
    color: var(--color-white);
}

.access-denied__button--secondary {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
}

.access-denied__button--secondary:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
}

.access-denied__button i {
    font-size: var(--font-size-sm);
}

/* === RESPONSIVE DESIGN FOR ACCESS DENIED === */
@media (max-width: 768px) {
    .access-denied {
        padding: var(--spacing-lg);
        gap: var(--spacing-lg);
    }

    .access-denied__icon {
        font-size: 3rem;
    }

    .access-denied__text {
        font-size: var(--font-size-base);
    }

    .access-denied__help {
        font-size: var(--font-size-sm);
    }

    .access-denied__actions {
        flex-direction: column;
        width: 100%;
    }

    .access-denied__button {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .access-denied {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    .access-denied__icon {
        font-size: 2.5rem;
    }

    .access-denied__text {
        font-size: var(--font-size-sm);
    }

    .access-denied__help {
        font-size: var(--font-size-xs);
    }
}

/* === MESSAGE BOXES === */
.message-box {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.message-box__icon {
    flex-shrink: 0;
    font-size: var(--font-size-xl);
    margin-top: 0.125rem;
}

.message-box__content {
    flex: 1;
}

.message-box__text {
    margin: 0 0 var(--spacing-sm) 0;
    font-weight: var(--font-weight-medium);
}

.message-box__link {
    display: inline-block;
    color: inherit;
    text-decoration: underline;
    font-weight: var(--font-weight-semibold);
    transition: opacity 0.2s ease;
}

.message-box__link:hover {
    opacity: 0.8;
}

.message-box--success {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid var(--color-success);
}

.message-box--success .message-box__icon {
    color: var(--color-success);
}

.message-box--error {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid var(--color-error);
}

.message-box--error .message-box__icon {
    color: var(--color-error);
}

.content-box--success .content-box__body {
    padding: 0;
}

.content-box--error .content-box__body {
    padding: 0;
}

/* ========================================
   EBULLITION PUBLIQUE COMPONENT
   ======================================== */

.ebullition-public {
    transition: all 0.3s ease-in-out;
}

.ebullition-public__code-container {
    position: relative;
    margin-bottom: 15px;
}

.ebullition-public__code-textarea {
    font-family: 'Courier New', monospace;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    resize: vertical;
    padding-right: 80px;
}

.ebullition-public__copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px 12px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s;
}

.ebullition-public__copy-btn:hover {
    background: hsl(215, 64%, 49%);
}

/* ========================================
   INSTRUCTION CONTENT COMPONENT (BEM)
   ======================================== */

.instruction-content {
    max-width: 900px;
    margin: 0 auto;
}

.instruction-content__description {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-gray-600);
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.instruction-content__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}

.instruction-content__actions .tool-card {
    max-width: 300px;
    width: 100%;
}

/* Responsive adjustments for instruction content */
@media (max-width: 768px) {
    .instruction-content__description {
        font-size: var(--font-size-base);
        padding: 0 0.5rem;
        margin-bottom: 1.5rem;
    }

    .instruction-content__actions .tool-card {
        max-width: 100%;
    }
}

.ebullition-public__help-text {
    background: #e8f4f8;
    border: 1px solid #bee5eb;
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-sm);
}

.ebullition-public__help-text p {
    margin: 0 0 var(--spacing-sm) 0;
    color: #0c5460;
    font-weight: var(--font-weight-semibold);
}

.ebullition-public__help-text ul {
    margin: 0;
    padding-left: 20px;
}

.ebullition-public__help-text li {
    margin-bottom: 5px;
    color: #0c5460;
}

.ebullition-public__help-text code {
    background: var(--color-white);
    border: 1px solid #bee5eb;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-2xs);
}

.ebullition-public__preview-link {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.ebullition-public__preview-link p {
    margin: 0;
    color: var(--color-gray-600);
}

.ebullition-public__external-link {
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: var(--font-weight-medium);
}

.ebullition-public__external-link:hover {
    color: hsl(215, 64%, 49%);
    text-decoration: underline;
}

/* === LEGEND GRID COMPONENTS (TRAVAUX) === */

/* Legend items grid layout */
.legend__items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

/* Individual legend item */
.legend__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.legend__item:hover {
    background: var(--color-gray-50);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Legend icon container */
.legend__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-gray-200);
}

.legend__icon img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

/* Legend description */
.legend__description {
    flex: 1;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-gray-800);
    font-weight: var(--font-weight-medium);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .legend__items-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .legend__item {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .legend__icon {
        width: 40px;
        height: 40px;
    }

    .legend__icon img {
        max-width: 24px;
        max-height: 24px;
    }
}

/* ==========================================================================
   Panel List Components
   ========================================================================== */

/* Panel list container */
.panel-list {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
}

/* Panel list header */
.panel-list__header {
    background: var(--color-gray-50);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-gray-200);
}

.panel-list__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0;
    text-align: center;
}

/* Panel list items container */
.panel-list__items {
    padding: var(--spacing-md);
}

/* Individual panel item */
.panel-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-base);
    transition: all 0.2s ease;
}

.panel-item:last-child {
    margin-bottom: 0;
}

.panel-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* Panel item image */
.panel-item__image {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-50);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
}

.panel-item__img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.panel-item:hover .panel-item__img {
    transform: scale(1.05);
}

/* Panel item info */
.panel-item__info {
    flex: 1;
}

.panel-item__name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
    display: block;
    line-height: 1.4;
}

/* Panel item quantity */
.panel-item__quantity {
    flex-shrink: 0;
    text-align: right;
}

.panel-item__count {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    background: var(--color-primary-50);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-primary-200);
}

/* Panel list footer */
.panel-list__footer {
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
    padding: var(--spacing-lg);
    text-align: center;
}

.panel-list__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--color-info-50);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-info-200);
}

.panel-list__note i {
    color: var(--color-info);
}

/* Panel list actions */
.panel-list__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
}

.panel-list__button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-base);
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.panel-list__button--close {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
}

.panel-list__button--close:hover {
    background: var(--color-gray-200);
    border-color: var(--color-gray-400);
    color: var(--color-gray-900);
    transform: translateY(-1px);
}

/* Empty state */
.panel-list--empty {
    background: var(--color-gray-50);
}

.panel-list__empty {
    text-align: center;
    padding: var(--spacing-xl);
}

.panel-list__empty-icon {
    font-size: 3rem;
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-md);
}

.panel-list__empty-message {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    margin: 0 0 var(--spacing-lg) 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .panel-item {
        gap: var(--spacing-md);
        padding: var(--spacing-sm);
    }

    .panel-item__image {
        width: 48px;
        height: 48px;
    }

    .panel-item__img {
        max-width: 36px;
        max-height: 36px;
    }

    .panel-item__name {
        font-size: var(--font-size-sm);
    }

    .panel-item__count {
        font-size: var(--font-size-base);
        padding: var(--spacing-xs);
    }

    .panel-list__header,
    .panel-list__footer {
        padding: var(--spacing-md);
    }

    .panel-list__items {
        padding: var(--spacing-sm);
    }
}

/* ================================================
   PUBLIC CONFIGURATION (rendre_publique.php)
   ================================================ */

.public-config {
    max-width: 100%;
}

.public-config__question {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
}

.public-config__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin: 0 0 var(--spacing-md) 0;
    text-align: center;
}

.public-config__radio-group {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-md);
}

.public-config__radio-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.public-config__radio-item input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
}

.public-config__radio-label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    cursor: pointer;
    user-select: none;
}

.public-config__section {
    margin-top: var(--spacing-lg);
    transition: all 0.3s ease;
}

.public-config__section--hidden {
    display: none;
}

/* Public Links Styles */
.public-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.public-links__item {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.public-links__header {
    background: var(--color-gray-50);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.public-links__header i {
    color: var(--color-primary);
    width: 20px;
    text-align: center;
}

.public-links__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin: 0;
}

.public-links__content {
    padding: var(--spacing-lg);
}

.public-links__direct {
    padding: var(--spacing-lg);
    text-align: center;
}

.public-links__direct p {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-gray-700);
}

.public-links__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    word-break: break-all;
}

.public-links__link:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Code Block Styles */
.code-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.code-block__textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    background: var(--color-gray-50);
    color: var(--color-gray-800);
    resize: vertical;
    overflow-wrap: break-word;
}

.code-block__textarea--small {
    min-height: 80px;
}

.code-block__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.code-block__button {
    align-self: flex-start;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: all 0.2s ease;
}

.code-block__button:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.code-block__button:active {
    transform: translateY(0);
}

.code-block__help {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-blue-50);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-blue-400);
}

.code-block__help p {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
}

.code-block__help p:last-child {
    margin-bottom: 0;
}

.code-block__help ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
}

.code-block__help li {
    margin-bottom: var(--spacing-xs);
}

.code-block__help em {
    color: var(--color-gray-600);
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .public-config__radio-group {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
    }

    .public-links__header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .public-links__content,
    .public-links__direct {
        padding: var(--spacing-md);
    }

    .code-block__textarea {
        font-size: 12px;
        min-height: 100px;
    }

    .public-links__link {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm);
    }
}

/* === REQUEST TABLE STYLES === */

/* Request table container */
.request-table-container {
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-top: var(--spacing-md);
}

/* Request table base */
.request-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
}

/* Request table head */
.request-table__head {
    background: var(--color-gray-50);
}

/* Request table headers */
.request-table__header {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-700);
    border-bottom: 2px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
}

/* Request table body */
.request-table__body {
    background: var(--color-white);
}

/* Request table rows */
.request-table__row {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--color-gray-100);
}

.request-table__row:hover {
    background: var(--color-gray-50);
}

.request-table__row:last-child {
    border-bottom: none;
}

/* Request table row modifiers */
.request-table__row--open {
    background: var(--color-white);
}

.request-table__row--closed {
    background: var(--color-gray-25);
}

.request-table__row--closed:hover {
    background: var(--color-gray-50);
}

/* Request table cells */
.request-table__cell {
    padding: var(--spacing-md);
    vertical-align: top;
    color: var(--color-gray-800);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Item cell with special formatting */
.request-table__cell--item {
    max-width: 300px;
    word-wrap: break-word;
    line-height: 1.4;
}

/* Map cell */
.request-table__cell--map {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Action cell */
.request-table__cell--action {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Request table icons */
.request-table__icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.request-table__icon:hover {
    transform: scale(1.1);
}

/* Request table links */
.request-table__map-link,
.request-table__action-link {
    display: inline-block;
    text-decoration: none;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease;
}

.request-table__map-link:hover,
.request-table__action-link:hover {
    background: var(--color-gray-100);
}

/* Status badges */
.request-table__status {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.request-table__status--open {
    background: var(--color-green-100);
    color: var(--color-green-700);
    border: 1px solid var(--color-green-200);
}

.request-table__status--closed {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border: 1px solid var(--color-gray-300);
}

/* Responsive design for request tables */
@media (max-width: 1024px) {
    .request-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .request-table {
        min-width: 800px;
    }

    .request-table__header,
    .request-table__cell {
        padding: var(--spacing-sm);
        font-size: var(--font-size-xs);
    }

    .request-table__cell--item {
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .request-table-container {
        margin: var(--spacing-sm) calc(-1 * var(--spacing-md));
        border-radius: 0;
        box-shadow: none;
    }

    .request-table {
        min-width: 700px;
    }

    .request-table__header,
    .request-table__cell {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .request-table__cell--item {
        max-width: 150px;
        font-size: var(--font-size-xs);
    }

    .request-table__icon {
        width: 20px;
        height: 20px;
    }
}

/* === REQUETES TABLE COMPONENT === */
.requetes-table {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.requetes-table__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.requetes-table__header-row {
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
}

.requetes-table__header-cell {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-gray-200);
}

.requetes-table__row {
    transition: background-color 0.15s ease;
}

.requetes-table__row:hover {
    background: var(--color-gray-50);
}

.requetes-table__row--closed {
    background-color: #f0f0f0;
}

.requetes-table__row--closed:hover {
    background-color: #e8e8e8;
}

.requetes-table__cell {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-100);
    vertical-align: top;
    font-size: var(--font-size-sm);
}

.requetes-table__cell--item {
    max-width: 300px;
    word-wrap: break-word;
    line-height: 1.4;
}

.requetes-table__cell--action {
    text-align: center;
    width: 50px;
}

.requetes-table__action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease;
    text-decoration: none;
}

.requetes-table__action-link:hover {
    background: var(--color-gray-100);
}

.requetes-table__icon {
    width: 24px;
    height: 24px;
    display: block;
}

.requetes-table__status {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.requetes-table__status--closed {
    background: var(--color-success);
    color: white;
}

.requetes-table__status--open {
    background: var(--color-warning);
    color: white;
}

/* Responsive design for requetes table */
@media (max-width: 1024px) {
    .requetes-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .requetes-table__table {
        min-width: 800px;
    }

    .requetes-table__header-cell,
    .requetes-table__cell {
        padding: var(--spacing-sm);
        font-size: var(--font-size-xs);
    }

    .requetes-table__cell--item {
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .requetes-table {
        margin: var(--spacing-sm) calc(-1 * var(--spacing-md));
        border-radius: 0;
        box-shadow: none;
    }

    .requetes-table__table {
        min-width: 700px;
    }

    .requetes-table__header-cell,
    .requetes-table__cell {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .requetes-table__cell--item {
        max-width: 150px;
        font-size: var(--font-size-xs);
    }

    .requetes-table__icon {
        width: 20px;
        height: 20px;
    }
}

/* ========================================
   AFFICHE REQUÊTE FORM STYLES
   ======================================== */

/* Employee list styles */
.form__employee-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-gray-200);
}

.form__employee-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-white);
    border-radius: var(--radius-base);
    border: 1px solid var(--color-gray-200);
    transition: all 0.2s ease;
    flex-wrap: nowrap;
}

.form__employee-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.form__employee-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.form__employee-item .form__radio {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.form__employee-item .form__button--small {
    flex-shrink: 0;
    margin-left: auto;
}

.form__employee-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-800);
    flex: 1;
    margin: 0;
    line-height: 1.4;
}

.form__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-base);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
    white-space: nowrap;
}

.form__radio {
    margin: 0;
    accent-color: var(--color-primary);
}

.form__button--small {
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
    min-height: auto;
    min-width: auto;
    width: auto;
    height: 32px;
    border-radius: var(--radius-base);
}

.form__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease;
}

.form__link:hover {
    color: var(--color-blue);
    text-decoration: underline;
}

.form__link i {
    font-size: var(--font-size-sm);
}

/* When no employees are selected */
.form__employee-list:empty::before {
    content: "Aucun employé sélectionné";
    color: var(--color-gray-600);
    font-style: italic;
    text-align: center;
    padding: var(--spacing-lg);
}

/* Responsive adjustments for employee list */
@media (max-width: 768px) {
    .form__employee-item {
        /* Keep horizontal layout but with tighter spacing */
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
        flex-wrap: nowrap;
    }

    .form__employee-name {
        font-size: var(--font-size-sm);
    }

    .form__button--small {
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }

    .form__badge {
        font-size: var(--font-size-2xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* === NO RESULTS MESSAGE === */
.no-results {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--color-gray-600);
    font-style: italic;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
}

/* ====================================================================
   REQUEST FORM COMPONENTS
   ==================================================================== */

/* === REQUEST INFO DISPLAY === */
.request-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.request-info__item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.request-info__label {
    color: var(--color-gray-700);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.request-info__value {
    color: var(--color-gray-900);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.request-info__map {
    margin-top: var(--spacing-md);
    text-align: center;
}

.request-info__map-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-blue-50);
    color: var(--color-blue-700);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.2s ease;
}

.request-info__map-link:hover {
    background: var(--color-blue-100);
    color: var(--color-blue-800);
    transform: translateY(-1px);
}

.request-info__map-icon {
    width: 20px;
    height: 20px;
}

/* === TEAM LIST COMPONENTS === */
.team-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.team-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.team-item:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
}

.team-item__radio {
    margin: 0;
    cursor: pointer;
}

.team-item__name {
    font-weight: 600;
    color: var(--color-gray-900);
    flex: 1;
}

.team-item__role {
    color: var(--color-gray-600);
    font-style: italic;
    font-size: var(--font-size-sm);
}

.team-item__remove {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-red-50);
    color: var(--color-red-700);
    border: 1px solid var(--color-red-200);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.team-item__remove:hover {
    background: var(--color-red-100);
    border-color: var(--color-red-300);
    color: var(--color-red-800);
}

.team-item__remove i {
    font-size: var(--font-size-xs);
}

/* === CONTENT BOX FORM VARIANT === */
.content-box--form {
    margin-bottom: var(--spacing-lg);
}

.content-box--form .content-box__body {
    padding: var(--spacing-lg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .request-info__item {
        gap: var(--spacing-xs);
    }

    .request-info__label {
        font-size: var(--font-size-xs);
    }

    .request-info__value {
        font-size: var(--font-size-sm);
    }

    .team-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .team-item__radio {
        align-self: flex-start;
    }

    .team-item__name,
    .team-item__role {
        align-self: stretch;
    }

    .team-item__remove {
        align-self: flex-end;
    }
}

/* ========================================
   EMAIL FORM ENHANCEMENTS
   Styles spécifiques pour /mon_compte/email.php
   ======================================== */

.content-box--form {
    max-width: 600px;
    margin: 0 auto;
}

/* Enhanced loading state for form buttons */
.form__button--loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.form__button--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    color: white;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ========================================
   FORMULAIRE D'INSPECTION DES VANNES
   ======================================== */

/* Structure principale */
.inspect-vanne-form {
    max-width: 100%;
    margin: 0 auto;
}

/* Sections du formulaire */
.inspect-section {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.inspect-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-gray-100);
    color: var(--color-gray-800);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.inspect-section-title i {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

/* Champs du formulaire */
.inspect-field {
    margin-bottom: var(--spacing-lg);
}

.inspect-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--color-gray-700);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.inspect-value {
    color: var(--color-gray-800);
    font-weight: var(--font-weight-semibold);
}

.inspect-select {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    background-color: var(--color-white);
    transition: all 0.2s ease;
    color: var(--color-gray-800);
}

.inspect-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.inspect-textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    background-color: var(--color-white);
    resize: vertical;
    min-height: 120px;
    transition: all 0.2s ease;
    color: var(--color-gray-800);
}

.inspect-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.inspect-textarea::placeholder {
    color: var(--color-gray-500);
}

/* Grilles de checkboxes */
.inspect-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.inspect-checkbox-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.inspect-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.inspect-checkbox-item input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-gray-400);
    border-radius: var(--radius-sm);
    appearance: none;
    background: var(--color-white);
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.inspect-checkbox-item input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    position: relative;
}

.inspect-checkbox-item input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-white);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
}

.inspect-checkbox-item label {
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
}

.inspect-checkbox-item input[type="checkbox"]:checked + label {
    color: var(--color-gray-800);
    font-weight: var(--font-weight-medium);
}

/* Groupes de radio buttons */
.inspect-radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.inspect-radio-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    transition: all 0.2s ease;
    cursor: pointer;
    background: var(--color-white);
}

.inspect-radio-item:hover {
    border-color: var(--color-primary);
    background: var(--color-gray-50);
}

.inspect-radio-item input[type="radio"] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-gray-400);
    border-radius: 50%;
    appearance: none;
    background: var(--color-white);
    transition: all 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.inspect-radio-item input[type="radio"]:checked {
    border-color: var(--color-primary);
}

.inspect-radio-item input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.inspect-radio-item input[type="radio"]:checked + label {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.inspect-radio-item label {
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    cursor: pointer;
    user-select: none;
    flex: 1;
}

/* Boutons d'action */
.inspect-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
}

.inspect-btn-primary,
.inspect-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    min-width: 120px;
    justify-content: center;
}

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

.inspect-btn-primary:hover {
    background: hsl(215, 64%, 54%);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.inspect-btn-secondary {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
}

.inspect-btn-secondary:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
    border-color: var(--color-gray-400);
}

.inspect-btn-primary i,
.inspect-btn-secondary i {
    font-size: var(--font-size-sm);
}

/* Responsive */
@media (max-width: 768px) {
    .inspect-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .inspect-radio-group {
        grid-template-columns: 1fr;
    }

    .inspect-actions {
        flex-direction: column-reverse;
    }

    .inspect-btn-primary,
    .inspect-btn-secondary {
        width: 100%;
    }
}

/* =========================================
   QR CODE REGISTRATION SYSTEM
   ========================================= */

/* QR Code Container */
.qr-code-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.qr-code-success {
    padding: var(--spacing-lg);
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: var(--radius-md);
    color: #155724;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-base);
}

.qr-code-success i {
    font-size: var(--font-size-xl);
    color: #28a745;
}

/* QR Code Display */
.qr-code-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.qr-code-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-800);
    text-align: center;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: 0;
}

.qr-code-title i {
    color: var(--color-primary);
}

.qr-code-image {
    padding: var(--spacing-xl);
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.qr-code-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* QR Code Instructions */
.qr-code-instructions {
    width: 100%;
    max-width: 600px;
    text-align: left;
}

.qr-code-instructions h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.qr-code-instructions h4 i {
    color: var(--color-primary);
}

.qr-code-instructions ol {
    padding-left: var(--spacing-xl);
    color: var(--color-gray-700);
    line-height: 1.8;
}

.qr-code-instructions ol li {
    margin-bottom: var(--spacing-sm);
}

.qr-code-warning {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: var(--radius-base);
    color: #856404;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.qr-code-warning i {
    color: #ffc107;
    margin-top: 2px;
}

/* QR Code Actions */
.qr-code-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}

/* =========================================
   PUBLIC REGISTRATION PAGES
   ========================================= */

.registration-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: var(--spacing-lg);
}

.registration-card {
    width: 100%;
    max-width: 600px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.registration-header {
    background: linear-gradient(135deg, #2c5282 0%, #1a365d 100%);
    color: var(--color-white);
    padding: var(--spacing-xxl);
    text-align: center;
}

.registration-header i {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.9;
}

.registration-header h1 {
    margin: 0;
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

/* Registration Messages */
.registration-success,
.registration-error {
    margin: var(--spacing-xl);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    line-height: 1.6;
}

.registration-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.registration-success i {
    font-size: var(--font-size-xl);
    color: #28a745;
    margin-top: 2px;
}

.registration-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.registration-error i {
    font-size: var(--font-size-xl);
    color: #dc3545;
    margin-top: 2px;
}

/* Registration Welcome */
.registration-welcome {
    margin: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    line-height: 1.6;
}

.registration-welcome p {
    margin: 0 0 var(--spacing-sm) 0;
}

.registration-welcome p:last-child {
    margin-bottom: 0;
}

/* Registration Form */
.registration-form {
    padding: var(--spacing-xl);
}

.registration-form-group {
    margin-bottom: var(--spacing-lg);
}

.registration-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
}

.registration-label i {
    color: var(--color-primary);
}

.registration-input {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    transition: all 0.2s ease;
    font-family: inherit;
}

.registration-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.1);
}

.registration-input::placeholder {
    color: var(--color-gray-400);
}

/* Registration Info */
.registration-info {
    margin: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: #e7f3ff;
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-base);
    color: var(--color-gray-700);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    line-height: 1.6;
}

.registration-info i {
    color: var(--color-primary);
    margin-top: 2px;
}

.registration-info p {
    margin: 0;
}

/* Registration Next Steps */
.registration-next-steps {
    margin: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.registration-next-steps h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-800);
    margin: 0 0 var(--spacing-md) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.registration-next-steps h3 i {
    color: var(--color-primary);
}

.registration-next-steps ol {
    padding-left: var(--spacing-xl);
    color: var(--color-gray-700);
    line-height: 1.8;
    margin: 0;
}

.registration-next-steps ol li {
    margin-bottom: var(--spacing-sm);
}

.registration-next-steps ol li:last-child {
    margin-bottom: 0;
}

/* Registration Actions */
.registration-actions {
    padding: var(--spacing-xl);
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.registration-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

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

.registration-btn--primary:hover {
    background: #1a365d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 82, 130, 0.3);
}

.registration-btn--secondary {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-300);
}

.registration-btn--secondary:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
    border-color: var(--color-gray-400);
}

/* Print Styles for QR Code - Seulement pour les pages avec QR code */
@media print {
    body:has(.qr-code-display) * {
        visibility: hidden;
    }

    body:has(.qr-code-display) .qr-code-display,
    body:has(.qr-code-display) .qr-code-display * {
        visibility: visible;
    }

    body:has(.qr-code-display) .qr-code-display {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    body:has(.qr-code-display) .qr-code-actions {
        display: none;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .registration-container {
        padding: 0;
    }

    .registration-card {
        border-radius: 0;
        min-height: 100vh;
    }

    .qr-code-actions {
        flex-direction: column;
    }

    .qr-code-actions .user-management__btn {
        width: 100%;
    }

    .registration-actions {
        flex-direction: column;
    }

    .registration-btn {
        width: 100%;
        justify-content: center;
    }
}