@charset "utf-8";

/* ========================================================= */
/* ======================  GLOBAL  ========================== */
/* ========================================================= */

body {
    font-family: Arial, sans-serif;
    margin: 0px;
    background: #f3e9d4;
}

.page-container {
    padding: 0px;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

/* Carte / blocs */
.card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px #ccc;
    margin-bottom: 20px;
}

/* ========================================================= */
/* ======================  BOUTONS  ========================= */
/* ========================================================= */

.btn,
button {
    background: #333;
    color: white;
    padding: 0 15px;              /* padding horizontal uniquement */
    border-radius: 5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 12px;

    min-height: 32px;             /* hauteur confortable */
    display: inline-flex;         /* centrage fiable */
    align-items: center;
    justify-content: center;

    white-space: nowrap;          /* JAMAIS de retour à la ligne */
}

.btn:hover,
button:hover {
    background: #555;
}

/* Bouton annuler */
.btn-cancel {
    background: #333;
}
.btn-cancel:hover {
    background: #555;
}


/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;
}

.table th, .table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

.table th {
    background: #333;
    color: white;
}

/* ========================================================= */
/* ======================  TOPBAR  ========================== */
/* ========================================================= */

.topbar {
    background: #111;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar .user-info {
    font-size: 14px;
}

.topbar .user-info small {
    font-size: 12px;
    color: #ccc;
}

.logout-btn {
    color: #fff;
    text-decoration: none;
    background: #c0392b;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
}

.logout-btn:hover {
    background: #e74c3c;
}

/* ========================================================= */
/* ====================  FORMULAIRES  ======================= */
/* ========================================================= */

form {
    background: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 1200px;

}

form label {
    display: block;
    margin-top: 10px;
}

form input,
form select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
}

/* === Mise en page mission-edit === */

.edit-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.edit-form {
    flex: 1;
    background: white;
    padding: 20px 25px; /* même bordure que la carte à droite */
    border-radius: 10px;
    box-shadow: 0 2px 4px #ccc;
    max-width: 520px; /* largeur réduite comme demandé */
}

.edit-form input,
.edit-form select,
.edit-form label {
    padding-right: 10px; /* espace respirant à droite */
}

.preco-panel {
    width: 350px;
    background: white;
    padding: 20px 25px;
    border-radius: 10px;
    box-shadow: 0 2px 4px #ccc;
}

@media (max-width: 900px) {
    .edit-container {
        flex-direction: column;
    }
    .preco-panel {
        width: 100%;
    }
}

/* Préconisations */
.preco-line {
    margin-top: 10px;
    font-size: 12px;
}

.preco-link {
    color: #333;
    text-decoration: none;
}

.preco-link:hover {
    text-decoration: underline;
}

/* ========================================================= */
/* ======================  PIPELINE  ======================== */
/* ========================================================= */

.progress-container-diags {
	background: #999;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 4px #ccc;
    margin-top: 5px;
}
.progress-container-actions {
	background : #BFA388;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 4px #ccc;
    margin-top: 5px;
}
.progress-container-fcom-jaune {
	background: #FF9;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 4px #ccc;
    margin-top: 5px;
}
.progress-container-fcom-bleu {
	background: #6CF;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 4px #ccc;
    margin-top: 5px;
}
.progress-container-fcom-vert {
	background: #6C6;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 4px #ccc;
    margin-top: 5px;
}
.status-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.mission-header {
    width: 240px;
    font-weight: bold;
    font-size: 12px;
}

.pipeline-header {
    flex: 1;
    display: flex;
}

.status-col {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #555;
}

.progress-row {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

.mission-name {
    width: 240px;
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
}

.pipeline {
    display: flex;
    flex: 1;
    height: 24px;
}

.pipeline-col {
    flex: 1;
    background: #eee;
    margin: 2px;
    border-radius: 5px;
    position: relative;
}

.pipeline-link {
    display: block;
    width: 100%;
    height: 100%;
	text-decoration: none !important;
}

.pipeline-block {
    height: 100%;
    border-radius: 5px;
    color: white;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pipeline-block.diag {
    background: #3498db;
}

.pipeline-block.audit {
    background: #e74c3c;
}

.planif-date {
    color: white;
    font-weight: bold;
	text-decoration: none !important;
}

/* Force exactement la même largeur visuelle */
.edit-form input,
.edit-form select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box; /* règle n°1 */
}

/* Neutralise la flèche interne qui réduit la largeur visible */
.edit-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 10px center; /* la flèche n’empiète plus sur la largeur */
}

/* Pour éviter que l’input paraisse plus long */
.edit-form input {
    border: 1px solid #ccc;
}

.edit-form select {
    border: 1px solid #ccc;
}

/* Bloc pipeline : hauteur fixe + scroll interne */
.pipeline-scroll {
    max-height: 210px; /* hauteur fixe du bloc */
    overflow-y: auto;
    padding-right: 10px; /* pour éviter la barre de scroll collée */
}

/* Cache la barre horizontale */
.pipeline-scroll {
    overflow-x: hidden;
}

/* Empêche les lignes de se coller entre elles */
.progress-row {
    min-height: 28px;
}
/* ========================================================= */
/* ===============  PIPELINE ACTIONS UNIQUEMENT  ============ */
/* ========================================================= */

/* Pipeline des actions : hauteur libre */
.actions-pipeline .pipeline {
    height: auto !important;
}

/* Colonne module (fond gris léger et marge plus large) */
.actions-pipeline .pipeline-col {
    margin: 1px;
    background: transparent;
    border-radius: 5px;
}

/* Pipeline actions */
.actions-pipeline .pipeline-block {
    min-height: 12px;         /* Avant 75 → trop haut */
    padding: 0 !important;        /* SUPPRESSION DU PADDING */
    font-size: 11px;          /* Police réduite */
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Centrage propre */
    align-items: center;
}

/* Couleur des pavés (bleu Actions, différent du bleu diag) */
.actions-pipeline .pipeline-block.diag {
    background: #737773; /* bleu moyen */
}

/* Pavé rouge si date fin dépassée */
.actions-pipeline .pipeline-block.expired {
    background: #2aae18 !important;
}

/* Texte interne (dates et nb jours) */
.actions-pipeline .planif-date {
	font-weight:normal;
    text-decoration: none;
    color: white;
    line-height: 11px;
	padding: 2px !important;        /* SUPPRESSION DU PADDING */
}

/* Taille réduite des titres de colonnes */
.actions-pipeline .status-col {
    font-size: 10px;
}
.scroll-wrapper-actions {
    max-height: 1200px;    /* hauteur visible */
    overflow-y: auto;     /* active le scroll vertical */
    padding-right: 20px;  /* évite le contenu collé à la barre */
	padding-left: 20px;  /* évite le contenu collé à la barre */
    margin-bottom: 20px;  /* espace entre les dashboards */
}
.scroll-wrapper-actions-fcom {
    max-height: 1200px;    /* hauteur visible */
    overflow-y: auto;     /* active le scroll vertical */
    padding-right: 20px;  /* évite le contenu collé à la barre */
	padding-left: 20px;  /* évite le contenu collé à la barre */
}

.scroll-wrapper-actions-fcom .progress-container {
    margin-bottom: 10px !important;  /* évite les débordements verticaux accumulés */
}
/* ============================
   CQP – Styles personnalisés
============================ */

.cqp-row-groupe1  { background:#FFA500 }  /* orange */
.cqp-row-groupe2   { background:#6CF; }  /* bleu */
.cqp-row-groupe3   { background:#6C6; }  /* vert */
.cqp-row-groupe4   { background:#800080; }  /* violet */
.cqp-row-groupe5 { background:#778899; }  /* Gris */

.cqp-cell {
    border-radius:6px;
    padding:4px;
    text-align:center;
    font-size:11px;
    font-weight:bold;
    color:white;
}

.cqp-cell-empty {
    background:#e0e0e0;
    color:#666;
}

.cqp-cell-done {
    background:#e74c3c; /* rouge */
}

.cqp-cell-paid {
    background:#27ae60; /* vert */
}
.cqp-container {
    height: auto !important;
}
.scroll-wrapper-actions-fcom .cqp-container {
    margin-bottom: 10px;
}
/* =========================
   FACTURATION — ÉTATS
========================= */

/* 🟢 Réalisée facturée */
.facto-cell-factured {
    background: #27ae60 !important;
    color: #fff;
}

/* 🔴 Réalisée non facturée */
.facto-cell-unpaid {
    background: #e74c3c !important;
    color: #fff;
}

/* 🟠 Non réalisée mais planifiée */
.facto-cell-planned {
    background: #f39c12 !important;
    color: #fff;
}




/* ============================
   COMMISSION ADHOC
============================ */

.commission-wrapper {
    padding-left: 0px;
    padding-right: 0px;
}

.commission-row {
    display: flex;
    gap: 10px;
	flex-wrap: nowrap; /* Évite les retours à la ligne */
}


.commission-cell {
    width: 110px;              /* largeur stable */
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;           /* police maîtrisée */
    white-space: nowrap;       /* empêche le retour à la ligne */
    overflow: hidden;          /* évite les débordements */
    text-overflow: ellipsis;   /* sécurité */
    cursor: default;
    user-select: none;
	min-height: 15px;
}

/* gris clair = vide */
.commission-empty {
    background: #ddd;
    color: #666;
}

/* gris foncé = passé */
.commission-past {
    background: #aaa;
    color: #fff;
}

/* vert = future > 7 jours */
.commission-future {
    background: #28a745;
    color: #fff;
}

/* orange = séance imminente */
.commission-soon {
    background: #ff9500;
    color: #fff;
}

/* éditable */
.commission-editable {
    cursor: pointer;
}
/* ===== ACTIONS : DEMI-JOURNÉE ===== */


.action-cell {
    position: relative;
}

/* Remplissage visuel pour demi-journée */
.action-cell.half-day::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 0 0 4px 4px;
    pointer-events: none;
}

.action-half-label {
    font-size: 10px;
    opacity: 0.7;
    line-height: 12px;
}

/* couche de remplissage */
.action-cell::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--fill-percent, 100%);
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* label durée */
.action-duration-label {
    font-size: 10px;
    opacity: 0.75;
    line-height: 12px;
}
/* ========================================================= */
/* ====================  MODULES ACTION  =================== */
/* ========================================================= */

.module-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.module-input {
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.module-name {
    flex: 2;
}

.module-days {
    width: 80px;
    text-align: center;
}

.module-fields {
    display: flex;
    flex: 1;
    gap: 12px;
}

.module-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.module-locked-label {
    font-size: 12px;
    color: #27ae60;
}

/* ============================
   DATES DES MODULES
============================ */

/* Ligne module complète */
.module-dates-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Titre module */
.module-title-box {
    width: 220px;              /* 👈 AJUSTE ICI */
    background: #f2f2f2;
    padding: 8px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zone pavés */
.module-days-box {
    flex: 1;                   /* 👈 prend toute la largeur restante */
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;         /* passe à wrap si tu préfères */
}

/* Pavé jour */
.module-day-tile {
    flex: 1;                   /* largeur auto selon le nombre */
    min-width: 60px;
    padding: 6px 4px;
    background: #e0e0e0;
    border-radius: 6px;
    text-align: center;
    font-size: 11px;
    color: #333;
}

/* Demi-journée */
.module-day-tile.half {
    background: #d5d5d5;
    font-style: italic;
}
.module-day-tile.locked {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
}
/* ===============================
   FORMATEUR – ÉTATS VISUELS
=============================== */

.trainer-cell {
    text-align: center;
    vertical-align: top;
    white-space: normal; /* autorise retour à la ligne */
}

/* Conteneur des boutons */
.trainer-buttons {
    display: flex;
    flex-wrap: wrap;          /* évite chevauchement */
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}

/* Tous les boutons masqués par défaut */
.trainer-cell button {
    display: none;
    margin: 2px;
    font-size: 11px;
    padding: 2px 6px;
}

/* TANT QUE CE N’EST PAS VERROUILLÉ → signatures possibles */
.trainer-cell.state-none button.btn-qr,
.trainer-cell.state-none button.btn-link,
.trainer-cell.state-signed button.btn-qr,
.trainer-cell.state-signed button.btn-link {
    display: inline-flex;
}

/* Bouton verrouillage visible dès qu’il y a au moins une signature */
.trainer-cell.state-signed button.btn-lock {
    display: inline-flex;
}

/* État verrouillé → uniquement reset + print */
.trainer-cell.state-locked button.btn-reset,
.trainer-cell.state-locked button.btn-print {
    display: inline-flex;
}

/* Feedback visuel */
.trainer-cell.state-locked {
    opacity: 1;
}



/* ========================================================= */
/* ============  SIGNATURE – PAGE TABLETTE  ================= */
/* ========================================================= */

/* Racine de la page signature */
.signature-page {
    margin: 0;
    background: #f4f6f8;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Header signature */
.signature-page header {
    background: #003366;
    color: #ffffff;
    padding: 16px;
}

.signature-page header h1 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
	color: #ffffff;
}

.signature-page header p {
    margin: 6px 0 0;
    font-size: 13px;
    opacity: 0.9;
}

/* Contenu principal */
.signature-page main {
    padding: 20px;
}

/* Boutons apprenants (override TOTAL des boutons globaux) */
.signature-page button.apprenant-btn {
    width: 100%;
    padding: 18px;
    margin-bottom: 14px;

    font-size: 18px;
    font-weight: normal;

    border-radius: 14px;
    border: none;

    background: #ffffff;
    color: #000000;
    -webkit-text-fill-color: #000000;

    text-align: left;
    cursor: pointer;

    box-shadow: 0 3px 6px rgba(0,0,0,.12);

    /* Neutralisation complète du style natif */
    appearance: none;
    -webkit-appearance: none;
}

/* Feedback tactile */
.signature-page button.apprenant-btn:active {
    background: #e8f0ff;
}

/* Texte informatif */
.signature-page .empty {
    color: #666666;
    font-style: italic;
    font-size: 14px;
}
/* Couleurs signatures apprenants */
.sig-ok   { color:#27ae60; font-weight:bold; }
.sig-miss { color:#e74c3c; font-weight:bold; }


table.action-matrix th,
table.action-matrix td {
	word-break: normal;
    overflow-wrap: anywhere;
    border:1px solid #ddd;
    padding:6px;
}

/* TC130 */

        .tc130-header {
            display: flex;
            gap: 20px;
            margin-bottom: 25px;
        }

        .tc130-box {
            flex: 1;
        }

.module-row {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    align-items: stretch;
}


        .module-header div {
            font-weight: bold;
            background: #f5f5f5;
        }

        .col-titre { flex: 1; }
        .col-jours { width: 70px; text-align: right; }
        .col-frais { width: 120px; text-align: right; }
        .col-montant-jours { width: 140px; text-align: right; }
        .col-total { width: 140px; text-align: right; font-weight: bold; }
.col-action {
    width: 140px;
    display: flex;
    gap: 6px;
    justify-content: center;
}


.module-row div {
    padding: 4px 6px;
    border: 1px solid #ccc;
    background: #fff;
}