/* ============================================================================
   LogiFlotte — page Finances (/index.php?page=finances & ?page=depenses)
   Toolbar moderne avec pickers stylés + CTA proéminent.
   ============================================================================ */

.finance-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: var(--space-5);
}

.finance-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.finance-toolbar-filters .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.finance-toolbar-filters .field label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* Date pickers : mêmes règles que les inputs .form-row, mais version
   compacte, alignés sur une ligne. */
.finance-toolbar-filters input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.45rem 0.7rem;
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    line-height: 1.3;
    min-width: 150px;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.finance-toolbar-filters input[type="date"]:hover {
    border-color: var(--color-border-strong);
}

.finance-toolbar-filters input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

/* Icône calendrier du date picker Chrome : tinté aux couleurs de l'app */
.finance-toolbar-filters input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    cursor: pointer;
    transition: opacity var(--transition);
}
.finance-toolbar-filters input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.finance-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* Le bouton "Filtrer" s'aligne sur la dernière ligne des inputs */
.finance-toolbar-filters .btn {
    margin-bottom: 1px;   /* alignement optique avec les inputs (border 1px) */
}

/* -- Mobile --------------------------------------------------------- */
@media (max-width: 640px) {
    .finance-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-3) var(--space-4);
    }
    .finance-toolbar-filters,
    .finance-toolbar-actions {
        width: 100%;
    }
    .finance-toolbar-filters .field {
        flex: 1 1 140px;
    }
    .finance-toolbar-actions .btn {
        flex: 1 1 50%;
    }
}

/* -- Utilitaires : alignement cellules tableau --------------------- */
.text--right { text-align: right; }

/* -- Barre de répartition des recettes (VTC vs Location) --------- */
.rev-bar {
    display: flex;
    height: 24px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-border);
    margin-bottom: var(--space-3);
}
.rev-bar__seg { display: block; height: 100%; }
.rev-bar__seg--vtc { background: var(--color-success); }
.rev-bar__seg--loc { background: #7c3aed; }
.rev-bar__seg--oth { background: var(--color-text-muted); }

.rev-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.rev-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.rev-legend__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex: 0 0 auto;
}
.rev-legend__dot--vtc { background: var(--color-success); }
.rev-legend__dot--loc { background: #7c3aed; }
.rev-legend__dot--oth { background: var(--color-text-muted); }
.rev-legend__lbl {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.rev-legend__item strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Hint sous le sélecteur de catégorie de la modale dépense
   (apparaît quand catégorie='maintenance'). */
.dep-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    line-height: 1.35;
}
.dep-hint[hidden] {
    display: none !important;
}