/* =========================================================
   RequestFEI — alignement sur le design system Equipe

   Ordre de chargement :
       1. application-*.css   (Equipe / Tailwind)
       2. custom.css
       3. requests.css | process.css
       4. equipe-align.css    ← ce fichier, en dernier

   Rôle : réparer ce que le preflight Tailwind efface (body,
   table, champs de formulaire, listes), puis emprunter les
   jetons Equipe — #353851 pour les surfaces sombres, #f5f6f8
   pour le fond — afin que l'extension se fonde dans l'hôte.

   Toute règle ici écrase volontairement custom.css ou
   process.css : c'est le point unique de vérité pour
   l'apparence. Ne pas dupliquer ces déclarations ailleurs.
   ========================================================= */


/* =========================================================
   1. Gabarit général
   ========================================================= */

body.extension {
    background: #f5f6f8;
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #2c3e50;
}

/* le conteneur ne porte plus le blanc : chaque panel le fait */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.header-section {
    border-radius: 12px 12px 0 0;
}

/* Tailwind supprime les marges des titres */
.header-section h3 {
    margin: 0 0 15px 0;
    font-size: 22px;
    font-weight: 600;
}

.app-footer {
    background: #353851;
    border-radius: 0 0 12px 12px;
    margin-top: 16px;
}


/* =========================================================
   2. Empilement en panels
   ========================================================= */

.content-section.page-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0;
    background: transparent;
}

/* .panel d'Equipe apporte fond blanc, padding 24px et rayon 16px.
   On neutralise ce que qualification-section imposait en plus. */
.panel.qualification-section {
    background: #fff;
    border: none;
    padding: 24px;
    margin-bottom: 0;
    border-radius: 16px;
}

#listing.panel {
    margin-top: 0;
    padding: 24px;
    border-radius: 16px;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eaee;
}

.section-number {
    background: #353851;
}


/* =========================================================
   3. Tableau des demandes
   ========================================================= */

#listing table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    box-shadow: none;
    border-radius: 12px;
    overflow: hidden;
}

#listing table thead {
    background: #353851;
}

#listing table th {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #fff;
    text-align: left;
}

#listing table thead th:first-child { border-radius: 12px 0 0 0; }
#listing table thead th:last-child  { border-radius: 0 12px 0 0; }

#listing table tbody td {
    padding: 10px 12px;
    font-size: 13px;
    vertical-align: top;
    border-bottom: 1px solid #eceff1;
}

#listing table tbody tr:last-child td { border-bottom: none; }

/* Largeurs : en table-layout fixed, seule la première ligne compte.
   Les <th> du HTML n'ont plus de style inline, tout est ici. */
#listing table th:nth-child(1),
#listing table td:nth-child(1) { width: 20%; }

#listing table th:nth-child(2),
#listing table td:nth-child(2) { width: 11%; }

#listing table th:nth-child(3),
#listing table td:nth-child(3) { width: 54%; }

#listing table th:nth-child(4),
#listing table td:nth-child(4) { width: 6%; text-align: center; }

#listing table th:nth-child(5),
#listing table td:nth-child(5) { width: 9%; white-space: nowrap; }


/* =========================================================
   4. Formulaires
   ========================================================= */

.form-control,
select.form-control,
textarea.form-control {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: #2c3e50;
    background-color: #fff;
    border: 1px solid #d7dae0;
    border-radius: 8px;
    padding: 8px 12px;
}

select.form-control { padding-right: 32px; }

.form-control:focus,
select.form-control:focus,
input.form-control:focus {
    outline: none;
    border-color: #353851;
    box-shadow: 0 0 0 3px rgba(53, 56, 81, .12);
}


/* =========================================================
   5. Boutons

   .btn d'Equipe fournit padding et rayon. On ne redéfinit
   que les couleurs, en baissant la saturation de Bootstrap.
   ========================================================= */

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.btn-success {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.btn-success:hover:not(:disabled) {
    background: #15803d;
    border-color: #15803d;
}

/* Action destructive mais secondaire : bordure seule */
.btn-danger {
    background: #fff;
    border: 1px solid #e5b4b4;
    color: #b91c1c;
}

.btn-danger:hover:not(:disabled) {
    background: #fef2f2;
    border-color: #dc2626;
    color: #991b1b;
}

/* À la taille des actions de ligne, une bordure seule se lit mal */
.row-actions .btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.row-actions .btn-danger:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
}

.row-actions .btn-primary,
#recalc.btn-primary,
.pace-box .btn-primary {
    background: #353851;
    border-color: #353851;
}

.row-actions .btn-primary:hover:not(:disabled),
#recalc.btn-primary:hover:not(:disabled),
.pace-box .btn-primary:hover:not(:disabled) {
    background: #2a2c40;
    border-color: #2a2c40;
}


/* =========================================================
   6. Écran Process
   ========================================================= */

.panel-compact.pace-box {
    margin-bottom: 0;
    padding: 12px 16px;
    border-radius: 12px;
}

.split { gap: 16px; }

.split-left.panel,
.split-right.panel {
    padding: 20px;
    border-radius: 16px;
}

/* Tailwind remet les listes ordonnées à zéro */
.order-list {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* =========================================================
   7. Arrondis internes

   Sans cela, les blocs à angles vifs annulent visuellement
   le rayon du panel qui les contient. overflow:hidden est
   indispensable, sinon les enfants débordent des coins.
   ========================================================= */

.order-list,
.day-list,
.log-card,
.clash-box,
.disorder-box,
.coach-box,
.owed-box,
.scope-picker,
.autocomplete-list,
.per-class:not(:empty),
.clash-warn {
    border-radius: 12px;
}

/* .order-list garde son défilement (max-height dans process.css) :
   overflow:hidden le supprimerait. Le rayon suffit, les lignes
   internes s'y conforment via first/last-child ci-dessous. */
.day-list,
.log-card {
    overflow: hidden;
}

/* le panel porte déjà le cadre : bordure fine seulement */
.order-list,
.day-list {
    border: 1px solid #e8eaee;
}

/* premières et dernières lignes épousant le conteneur */
.order-list li:first-child { border-radius: 12px 12px 0 0; }
.order-list li:last-child  { border-radius: 0 0 12px 12px; }

/* le bandeau de pause reste droit au milieu, arrondi en bord */
.order-list li.brk { border-radius: 0; }
.order-list li.brk:first-child { border-radius: 12px 12px 0 0; }
.order-list li.brk:last-child  { border-radius: 0 0 12px 12px; }

/* Tailwind neutralise la marge des labels du sélecteur */
.scope-picker label { margin-bottom: 0; }

/* =========================================================
   5. Bandeau d'étapes

   Reprend le gabarit des cartes STEP d'Equipe, mais posé sur
   le bandeau sombre : d'où le fond translucide plutôt que le
   gris clair de leur version sur fond blanc.
   ========================================================= */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.step {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 12px 14px;
}

.step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.step-n {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.step-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 9px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.tag-now  { background: rgba(52,152,219,.18); color: #93c5fd; border-color: rgba(147,197,253,.3); }
.tag-done { background: rgba(22,163,74,.18);  color: #86efac; border-color: rgba(134,239,172,.3); }
.tag-auto { background: rgba(168,85,247,.16); color: #d8b4fe; border-color: rgba(216,180,254,.28); }
.tag-you  { background: rgba(245,158,11,.16); color: #fcd34d; border-color: rgba(252,211,77,.3); }
.tag-next { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.15); }

.step-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.step-title i {
    font-size: 11px;
    opacity: .7;
}

.step-txt {
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .62);
}

.step-txt strong { color: rgba(255, 255, 255, .85); font-weight: 600; }

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