/* ════════════════════════════════════════════════
   PILOTAGE SHARED STYLES
   Styles communs aux vues du PilotagePanel
   ════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════
   VARIABLES CSS
   ════════════════════════════════════════════════ */

:root {
    /* ─── Palette principale ─── */
    /* WHITE-LABEL : la famille « teal » suit désormais la MARQUE (--brand = palette[0]).
       Fallback = teal d'origine si --brand absent. Fonds/bordures dérivés en color-mix (alpha). */
    --color-teal: var(--brand, #0AACA5);
    --color-teal-bright: var(--brand, #0BC1B9);
    --color-teal-bg: color-mix(in srgb, var(--brand, #0AACA5) 6%, transparent);
    --color-teal-bg-hover: color-mix(in srgb, var(--brand, #0AACA5) 8%, transparent);
    --color-teal-bg-active: color-mix(in srgb, var(--brand, #0AACA5) 12%, transparent);
    --color-teal-bg-strong: color-mix(in srgb, var(--brand, #0AACA5) 15%, transparent);
    --color-teal-border: color-mix(in srgb, var(--brand, #0AACA5) 20%, transparent);
    --color-teal-border-strong: color-mix(in srgb, var(--brand, #0AACA5) 40%, transparent);
    --color-teal-border-soft: color-mix(in srgb, var(--brand, #0AACA5) 25%, transparent);
    --color-teal-overlay: color-mix(in srgb, var(--brand, #0AACA5) 4%, transparent);
    /* ─── Texte ─── */
    --color-text-primary: #ffffff;
    --color-text-secondary: #D9E4EA;
    --color-text-muted: #8FA8B5;
    --color-text-dim: #6B8A9A;
    /* ─── Backgrounds ─── */
    --color-bg-card: rgba(7, 29, 40, 0.5);
    --color-bg-card-soft: rgba(7, 29, 40, 0.4);
    --color-bg-input: rgba(7, 29, 40, 0.6);
    /* ─── Borders ─── */
    --color-border-subtle: rgba(255, 255, 255, 0.04);
    --color-border-light: rgba(255, 255, 255, 0.06);
    --color-border-medium: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 255, 255, 0.12);
    --color-border-bright: rgba(255, 255, 255, 0.2);
    /* ─── États ─── */
    --color-success: #5DCAA5;
    --color-success-bg: rgba(29, 158, 117, 0.12);
    --color-success-border: rgba(29, 158, 117, 0.15);
    --color-warning: #FAC775;
    --color-warning-bg: rgba(245, 158, 11, 0.06);
    --color-warning-border: rgba(245, 158, 11, 0.15);
    --color-danger: #F09595;
    --color-danger-bg: rgba(226, 75, 74, 0.1);
    --color-danger-bg-soft: rgba(226, 75, 74, 0.12);
    /* ─── Typo ─── */
    /* Chaîne vers --app-font (posée par ikuFont/anti-flash) : toute l'UI custom utilise var(--font-family), donc le switch de police impacte TOUTE l'app. Fallback = Inter. */
    --font-family: var(--app-font, 'Inter', system-ui, sans-serif);
    /* ─── Spacing ─── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
}

/* ─── Mode clair : flip du design-system (texte/fond/bordure). Accents teal & états inchangés (OK sur les 2). ─── */
html[data-theme="light"] {
    --color-text-primary: #16242c;
    --color-text-secondary: #2c3d46;
    --color-text-muted: #586a73;
    --color-text-dim: #6b7c85;
    --color-bg-card: rgba(255, 255, 255, 0.72);
    --color-bg-card-soft: rgba(255, 255, 255, 0.55);
    --color-bg-input: rgba(255, 255, 255, 0.85);
    /* Bordures clair RENFORCÉES : à 5–20 % de noir sur blanc, les bordures extérieures de conteneurs étaient
       quasi invisibles. Remontées (≈ +5 pts) pour un liseré net mais doux. Dark inchangé (bloc scopé light). */
    --color-border-subtle: rgba(0, 0, 0, 0.10);
    --color-border-light: rgba(0, 0, 0, 0.12);
    --color-border-medium: rgba(0, 0, 0, 0.15);
    --color-border-strong: rgba(0, 0, 0, 0.18);
    --color-border-hover: rgba(0, 0, 0, 0.22);
    --color-border-bright: rgba(0, 0, 0, 0.28);
}


/* ════════════════════════════════════════════════
   VIEW WRAPPER
   Container principal d'une vue Pilotage
   ════════════════════════════════════════════════ */

.view-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.view-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.view-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 6px 0;
}

.view-description {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}


/* ════════════════════════════════════════════════
   SECTION BLOCK
   Bloc de section dans une vue
   ════════════════════════════════════════════════ */

.section-block {
    background: var(--color-bg-card-soft);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: opacity 0.2s;
}

.section-block-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.section-block-header-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.section-block-title {
    font-size: 13px;
    color: var(--color-text-primary);
    font-weight: 500;
    transition: color 0.2s;
}

/* Header de section cliquable (section dépliable) */
.section-block-header-collapsible {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

    .section-block-header-collapsible .section-block-header-texts {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .section-block-header-collapsible:hover .section-block-title {
        color: var(--color-accent, var(--color-text-primary));
    }

.section-collapse-chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform 0.25s ease;
}

    .section-collapse-chevron.is-open {
        transform: rotate(180deg);
    }

/* Conteneur dépliable animé : la hauteur s'anime jusqu'à la hauteur réelle
   du contenu via grid-template-rows 0fr → 1fr (pas de max-height arbitraire). */
.collapsible-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

    .collapsible-wrap.is-open {
        grid-template-rows: 1fr;
    }

    .collapsible-inner {
        overflow: hidden;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

        /* Section ouverte : on libère l'overflow APRÈS l'animation d'expansion
           (delay = durée du transition de .collapsible-wrap) pour que les menus
           déroulants (CustomDropdown) ne soient plus rognés par le conteneur.
           À la fermeture, retour immédiat à hidden (pas de transition sur la base). */
        .collapsible-wrap.is-open .collapsible-inner {
            overflow: visible;
            transition: overflow 0s 0.28s;
        }

/* Section repliée : padding compact (supprime l'espace sous le header quand fermé) */
.section-block:has(.collapsible-wrap:not(.is-open)) {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 0;
}

.section-block-subtitle {
    font-size: 11px;
    color: var(--color-text-muted);
}

.section-block-inactive .section-block-title {
    color: var(--color-text-dim);
}


/* ════════════════════════════════════════════════
   STATE ROW
   Ligne d'information d'état
   ════════════════════════════════════════════════ */

.state-summary {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.state-summary-teal {
    background: var(--color-teal-overlay);
    border-color: color-mix(in srgb, var(--brand) 15%, transparent);
}

.state-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
}

.state-row-compact {
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: 4px;
}

.state-row-secondary {
    margin-top: -2px;
}

.state-label {
    color: var(--color-text-muted);
    min-width: 140px;
}

.state-label-small {
    color: var(--color-text-dim);
    font-size: 11px;
}

.state-value {
    color: var(--color-text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.state-value-teal {
    color: var(--color-teal);
    font-size: 16px;
}

.state-meta {
    color: var(--color-text-dim);
    font-size: 12px;
    margin-left: auto;
}


/* ════════════════════════════════════════════════
   STATE SUMMARY GRID (mini cards)
   ════════════════════════════════════════════════ */

.state-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.state-mini-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.state-mini-label {
    font-size: 11px;
    color: var(--color-text-muted);
    letter-spacing: 0.3px;
}

.state-mini-value {
    font-size: 16px;
    color: var(--color-text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.state-mini-unit {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 400;
}


/* ════════════════════════════════════════════════
   CHOICE GRID
   Grille de cards de choix (presets)
   ════════════════════════════════════════════════ */

.choice-grid {
    display: grid;
    gap: 8px;
    transition: opacity 0.2s;
}

.choice-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-family: var(--font-family);
}

    .choice-card:hover:not(:disabled) {
        background: var(--color-teal-bg);
        border-color: var(--color-teal-border);
    }

    .choice-card:active:not(:disabled) {
        transform: scale(0.98);
    }

    .choice-card.active {
        background: var(--color-teal-bg-active);
        border-color: var(--color-teal-border-strong);
    }

    .choice-card:disabled {
        cursor: not-allowed;
    }

.choice-emoji {
    font-size: 18px;
}

.choice-label {
    font-size: 11px;
    color: var(--color-text-secondary);
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

.choice-card.active .choice-label {
    color: var(--color-text-primary);
}

.choice-value {
    font-size: 11px;
    color: var(--color-teal);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}


/* ════════════════════════════════════════════════
   ITEMS LIST
   Liste d'items avec toggle/suppression
   ════════════════════════════════════════════════ */

.items-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    transition: border-color 0.15s, opacity 0.2s;
}

    .item-row:hover {
        border-color: var(--color-border-hover);
    }

.item-inactive {
    opacity: 0.5;
}

    .item-inactive:hover {
        opacity: 0.7;
    }

.item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-title {
    font-size: 13px;
    color: var(--color-text-primary);
    font-weight: 500;
}

.item-details {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.item-remove {
    background: transparent;
    border: none;
    color: var(--color-text-dim);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

    .item-remove:hover {
        background: var(--color-danger-bg);
        color: var(--color-danger);
    }


/* ════════════════════════════════════════════════
   TOGGLE
   Bouton toggle on/off
   ════════════════════════════════════════════════ */

.item-toggle {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: opacity 0.15s;
}

    .item-toggle:hover {
        opacity: 0.85;
    }

.toggle-track {
    width: 32px;
    height: 18px;
    background: var(--color-border-strong);
    border-radius: 999px;
    position: relative;
    transition: background 0.2s;
    display: block;
}

.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--color-text-muted);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.item-toggle.active .toggle-track {
    background: color-mix(in srgb, var(--brand) 30%, transparent);
}

.item-toggle.active .toggle-thumb {
    background: var(--color-teal);
    transform: translateX(14px);
}


/* ════════════════════════════════════════════════
   ADD BUTTON
   Bouton "ajouter" en pointillés
   ════════════════════════════════════════════════ */

.add-button {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    color: var(--color-text-muted);
    padding: 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

    .add-button:hover {
        color: var(--color-teal);
        border-color: color-mix(in srgb, var(--brand) 30%, transparent);
        background: var(--color-teal-overlay);
    }

.add-icon {
    font-size: 14px;
    font-weight: 600;
}


/* ════════════════════════════════════════════════
   FORM BLOCK
   Bloc de formulaire d'ajout
   ════════════════════════════════════════════════ */

.form-block {
    background: var(--color-teal-bg);
    border: 1px solid var(--color-teal-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-row-double {
    flex-direction: row;
    gap: 12px;
}

.form-half {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.form-input,
.form-select {
    background: var(--color-bg-input);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-primary);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font-family);
}

    .form-input:focus,
    .form-select:focus {
        outline: none;
        border-color: color-mix(in srgb, var(--brand) 50%, transparent);
    }

    .form-input::-webkit-outer-spin-button,
    .form-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.form-input-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 0 10px;
}

    .form-input-wrapper .form-input {
        background: transparent;
        border: none;
        padding: 7px 0;
        flex: 1;
    }

.form-input-unit {
    color: var(--color-text-muted);
    font-size: 12px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}


/* ════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════ */

.btn-primary,
.btn-secondary {
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}

.btn-primary {
    background: var(--color-teal);
    border: 1px solid var(--color-teal);
    color: rgba(7, 29, 40, 1);
}

    .btn-primary:hover:not(:disabled) {
        background: var(--color-teal-bright);
    }

    .btn-primary:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

.btn-secondary {
    background: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
}

    .btn-secondary:hover {
        color: var(--color-text-secondary);
        border-color: var(--color-border-bright);
    }


/* ════════════════════════════════════════════════
   DURATION BUTTONS
   Boutons rapides de choix discrets (3 ans / 5 ans...)
   ════════════════════════════════════════════════ */

.duration-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.duration-btn {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .duration-btn:hover {
        background: var(--color-teal-bg);
        border-color: var(--color-teal-border);
    }

    .duration-btn.active {
        background: var(--color-teal-bg-strong);
        border-color: var(--color-teal-border-strong);
        color: var(--color-teal);
    }


/* ════════════════════════════════════════════════
   TOTAL ROW
   Ligne récap teal en bas d'une section
   ════════════════════════════════════════════════ */

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--color-teal-bg);
    border: 1px solid var(--color-teal-border);
    border-radius: var(--radius-md);
    margin-top: 4px;
}

.total-label {
    font-size: 12px;
    color: var(--color-text-muted);
}

.total-value {
    font-size: 14px;
    color: var(--color-teal);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}


/* ════════════════════════════════════════════════
   INLINE INPUT ROW
   Champ inline avec label et valeur
   ════════════════════════════════════════════════ */

.inline-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--color-bg-card-soft);
    border-radius: var(--radius-md);
}

.inline-label {
    font-size: 12px;
    color: var(--color-text-muted);
    flex: 1;
}

/* Pied de section "Politique salariale" : "À partir de" + encart inflation
   sur une même ligne, wrap en mobile pour gagner de l'espace vertical. */
.salary-policy-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.salary-policy-footer .inline-input-row {
    flex: 0 1 auto;
    min-width: 0;
    padding: 5px 12px;
}

/* Comboboxes (dates / mois) des vues Pilotage : largeur resserrée (au lieu de 130px) */
.view-content-wrapper .custom-dropdown-trigger {
    min-width: 96px;
}
.view-content-wrapper .custom-dropdown-menu {
    min-width: 96px;
}

.salary-policy-footer .info-box {
    flex: 1 1 300px;
    align-items: center;
    padding: 6px 12px;
    font-size: 11.5px;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .salary-policy-footer .inline-input-row,
    .salary-policy-footer .info-box {
        flex: 1 1 100%;
    }
}

.inline-input-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg-input);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}

.inline-input {
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: 13px;
    font-family: var(--font-family);
    width: 100px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

    .inline-input:focus {
        outline: none;
    }

    .inline-input::-webkit-outer-spin-button,
    .inline-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.inline-unit {
    color: var(--color-text-muted);
    font-size: 12px;
}

.inline-select {
    background: var(--color-bg-input);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-secondary);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--font-family);
    cursor: pointer;
}

    .inline-select:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }


/* ════════════════════════════════════════════════
   INFO BOX
   Card d'information / astuce / warning
   ════════════════════════════════════════════════ */

.info-box {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.info-box-soft {
    background: rgba(143, 168, 181, 0.05);
    border-color: rgba(143, 168, 181, 0.1);
    color: var(--color-text-muted);
}

.info-icon {
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1.5;
}

.info-box strong {
    color: var(--color-warning);
    font-weight: 500;
}

.info-box a {
    color: var(--color-teal);
    text-decoration: none;
    font-weight: 500;
}

    .info-box a:hover {
        text-decoration: underline;
    }


/* ════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════ */

.empty-state {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--color-success);
}

.empty-icon {
    font-size: 14px;
}


/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .form-row-double {
        flex-direction: column;
    }

    .duration-buttons {
        justify-content: space-between;
    }

    .duration-btn {
        flex: 1;
        text-align: center;
    }

    .state-row {
        flex-wrap: wrap;
    }

    .state-meta {
        margin-left: 0;
    }

    .state-summary-grid {
        grid-template-columns: 1fr;
    }
}