@font-face {
    font-family: Fieldwork;
    src: url(../../libs.fonts/Fieldwork/Fieldwork1GeoHair.otf);
    font-display: swap;
}

@font-face {
    font-family: FieldworkBold;
    src: url(../../libs.fonts/Fieldwork/Fieldwork7GeoLight.otf);
    font-display: swap;
}

html,body,h1,h2,h3,h4,h5 {font-family: Arial, Helvetica, sans-serif;}

:root {
    /* ====== COULEURS PRINCIPALES (à modifier pour changer le thème) ====== */
    --primary: #419488;
    --appHeaderBgColor: #96750D;

    /* Couleurs secondaires de l'application */
    --appBgColor: var(--primary);
    --appBgColor2: #E4DEB9;
    --appBgColor3: #BF1B22;
    --appColor: #ffffff;
    --appHeaderDarkBgColor: #3E3316;

    /* Couleurs de statut */
    --appErrorColor: #DC4B3E;
    --appSuccessColor: #0DC143;
    --appGrayColor: #9F9F9F;
    --appErrorColorTransparent: #ECC5BF;
    --appErrorColorTransparentSelected: #998480;

    /* Couleurs métier */
    --appSheetsBgColor: #20a8d8;
    --levelTreatedBgColor: #24444A;
    --accountTreated: #7ED289;
    --terror: #F86C6B;
    --tsuccess: #1F7246;
    --tnormal: #20a8d8;
    --toast-text: #fff;

    /* Palette de couleurs standard */
    --blue: #20a8d8;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #f86c6b;
    --orange: #f8cb00;
    --yellow: #ffc107;
    --green: #4dbd74;
    --teal: #20c997;
    --cyan: #63c2de;
    --white: #fff;
    --gray: #536c79;
    --gray-dark: #29363d;
    --secondary: #a4b7c1;
    --success: #4dbd74;
    --info: #63c2de;
    --warning: #ffc107;
    --danger: #f86c6b;
    --light: #f0f3f5;
    --dark: #29363d;

    /* Couleurs de texte */
    --text-dark: #212529;
    --text-muted: #6c757d;
    --text-secondary: #495057;

    /* Couleurs de fond */
    --bg-body: #f8f9fa;
    --bg-light: #f8f9fa;
    --bg-lighter: #f8f9ff;
    --bg-success-light: #f1f8f4;
    --bg-warning-light: #fff9e6;
    --bg-info-light: #e7f6f8;

    /* Couleurs de bordure */
    --border-color: #b4c8da;
    --border-light: #ced4da;

    /* ====== SURCHARGE BOOTSTRAP 5 (référence les variables ci-dessus) ====== */
    --bs-primary: var(--primary) !important;
    --bs-primary-rgb: 65, 148, 136 !important;
    --bs-success: var(--success) !important;
    --bs-success-alt: #28a745 !important;
    --bs-success-rgb: 77, 189, 116 !important;
    --bs-danger: var(--danger) !important;
    --bs-danger-rgb: 248, 108, 107 !important;
    --bs-warning: var(--warning) !important;
    --bs-warning-rgb: 255, 193, 7 !important;
    --bs-info: var(--info) !important;
    --bs-info-rgb: 99, 194, 222 !important;
    --bs-light: var(--light) !important;
    --bs-dark: var(--dark) !important;
    --bs-body-bg: var(--bg-body) !important;
    --bs-body-color: var(--text-dark) !important;

    /* Échelle de gris Bootstrap */
    --gray-100: #f0f3f5;
    --gray-200: #c2cfd6;
    --gray-300: #a4b7c1;
    --gray-400: #869fac;
    --gray-500: #678898;
    --gray-600: #536c79;
    --gray-700: #3e515b;
    --gray-800: #29363d;
    --gray-900: #151b1e;

    /* Breakpoints Bootstrap */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    /* Polices */
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Surcharge des classes Bootstrap avec les variables CSS */
.btn-primary,
.bg-primary,
.badge-primary,
.text-primary,
.border-primary {
    --bs-primary: var(--primary) !important;
    --bs-primary-rgb: 65, 148, 136 !important;
}

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--appHeaderBgColor) !important;
    border-color: var(--appHeaderBgColor) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.badge-primary {
    background-color: var(--primary) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
}

.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

.btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
}

.btn-info {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
}

.badge-success {
    background-color: var(--success) !important;
}

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

.badge-warning {
    background-color: var(--warning) !important;
}

.badge-info {
    background-color: var(--info) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-info {
    color: var(--info) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.bg-light {
    background-color: var(--bg-light) !important;
}

a {
    color: var(--primary);
}

a:hover {
    color: var(--appHeaderBgColor);
}

/* ====== OVERRIDES BOOTSTRAP COMPLETS ====== */

/* Override couleur de texte par défaut */
body,
.text-body,
.form-control,
.form-select,
input,
textarea,
select {
    color: var(--text-dark) !important;
}

/* Override couleurs de texte */
.text-dark {
    color: var(--text-dark) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

/* Override couleurs de fond */
.bg-dark {
    background-color: var(--dark) !important;
    color: var(--white) !important;
}

.bg-body {
    background-color: var(--bg-body) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

/* Override boutons */
.btn-dark {
    background-color: var(--dark) !important;
    border-color: var(--dark) !important;
    color: var(--white) !important;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--gray-800) !important;
    border-color: var(--gray-800) !important;
}

/* Override badges */
.badge-dark {
    background-color: var(--dark) !important;
}

/* Override bordures */
.border-dark {
    border-color: var(--dark) !important;
}

.border {
    border-color: var(--border-color) !important;
}

/* Override tables */
.table {
    color: var(--text-dark) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.02) !important;
}

/* Override cards */
.card {
    background-color: var(--white) !important;
    border-color: var(--border-color) !important;
}

.card-header {
    background-color: var(--bg-light) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Override modals */
.modal-content {
    background-color: var(--white) !important;
}

.modal-header {
    border-bottom-color: var(--border-color) !important;
}

.modal-footer {
    border-top-color: var(--border-color) !important;
}

.fa{ cursor: pointer; }
.fa.primary{ color: var(--primary); }

file-drop-zone{
    display: block;
    border: 2px dashed #8E8E8E;
    border-radius: 10px;
    width: 80vw;
    max-width: 480px;
    min-height: 250px;
    font-family: sans-serif;
    margin: 3% auto;
    padding: 20px;
    background-color: #E2E2E2;
}

file-drop-zone input[type="file"] {
    display: none;
}


file-drop-zone .button{
    padding: 5px;
    background-color: var(--appBgColor);
    color: var(--appColor);
    cursor: pointer;
}

file-drop-zone.highlight {
    border: 4px dashed var(--appBgColor);
}

.import-file-options{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    height: auto;
    gap: 10px;
}

ul.import-file-options{
    justify-content: center;
}

.import-file-options li{
    display: block;
    list-style: none;
    padding: 2px 5px 2px 5px;
    background-color: var(--appBgColor);
    color: var(--appColor);
    border-radius: 10px;
    /* box-shadow: 1px 1px 2px 1px #7C7E8B; */
    cursor: pointer;
}

.cellCenterText{
    text-align: center !important;
}

.cellCapitalize{
    text-transform: capitalize !important;
}

.cellUpperCase{
    text-transform: uppercase !important;
}

select.form-control {
    color: black !important;
}

md-toast, .md-toast-content{
    z-index: 999 !important;
}
.md-toast-content {
    display: block !important;
    /* width: 500px !important; */
    max-width: 500px !important;
    white-space: nowrap !important;
    overflow: hidden !important; 
    text-overflow: ellipsis !important;
    height: 50px;
    line-height: 50px;
}
.md-toast-content .fa{
    font-size: 1.8em;
    float: left;
    margin-top: 11px;
}


.form-group {
    margin-top: 25px;
}

.w3-blue {
    background-color: var(--appBgColor) !important;
}

.w3-modal {
    z-index: 991 !important;
}

.w3-modal-content {
    box-shadow: 1px 1px 10px 5px #fff;
    width: fit-content !important;
    min-width: 500px !important;
}

footer {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    color: #aaa;
    margin-top: 30px;
    margin: 0 auto;
}

footer a{
   text-decoration: none;
}

.w3-table {
    width: 100%;
    table-layout: auto; /* Permet à la table de s'adapter au contenu */
    border-collapse: collapse;
}
.w3-table tr th, .w3-table tr td{
    border: solid 1px var(--appBgColor);
    min-width: fit-content;
}

.col-1 {
    width: 5%; /* Petite largeur pour la numérotation */
}

.col-2 {
    width: auto; /* Cette colonne prendra automatiquement tout l'espace disponible */
}

.col-6, .col-5 {
    white-space: nowrap; /* Empêche le texte de passer à la ligne et réduit la largeur de la colonne */
    width: 1%; /* Réduit l'espace de la colonne au minimum nécessaire */
}