/* ============================================================
   Voiture Partagée – Tableau de bord utilisateur
   ============================================================ */

/* ── Conteneur ──────────────────────────────────────────── */
#vp-dashboard {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--vp-text);
    max-width: 1000px;
    margin: 0 auto;
}

.vp-dashboard-titre {
    margin-bottom: 16px;
    font-size: 20px;
}

.vp-dashboard-info {
    background: #e8f4fd;
    border-left: 4px solid var(--vp-primary);
    padding: 10px 16px;
    border-radius: 0 var(--vp-radius) var(--vp-radius) 0;
    margin-bottom: 20px;
    font-size: 13px;
    color: #1a4a6b;
}

/* ── Tableau ─────────────────────────────────────────────── */
.vp-dashboard-table-wrapper {
    overflow-x: auto;
}

.vp-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--vp-white);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    overflow: hidden;
}

.vp-dashboard-table th {
    background: var(--vp-bg);
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vp-text-light);
    border-bottom: 2px solid var(--vp-border);
    white-space: nowrap;
}

.vp-dashboard-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.vp-dashboard-table tbody tr:last-child td {
    border-bottom: none;
}

/* Lignes colorées selon statut */
.vp-row-payee   { background: #fff; }
.vp-row-passee  { background: #fafafa; opacity: .75; }
.vp-row-panier  { background: #fffef5; }
.vp-row-annulee { background: #fff8f8; opacity: .7; }

.vp-dashboard-table tbody tr:hover td {
    background: rgba(44,123,229,.03);
}

/* ── Colonnes spécifiques ────────────────────────────────── */
.vp-col-date {
    white-space: nowrap;
}

.vp-date-jour {
    display: block;
    font-weight: 600;
}

.vp-date-heure {
    display: block;
    font-size: 12px;
    color: var(--vp-text-light);
}

.vp-col-tarif {
    font-weight: 700;
    white-space: nowrap;
}

.vp-col-code {
    white-space: nowrap;
}

.vp-code-boite {
    background: #f0f4ff;
    color: var(--vp-primary);
    border: 1px solid #c5d5f5;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
}

.vp-col-details .vp-details-texte {
    cursor: help;
    border-bottom: 1px dotted var(--vp-text-light);
}

/* ── Badges statut ───────────────────────────────────────── */
.vp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.vp-badge-payee   { background: #d4edda; color: #155724; }
.vp-badge-panier  { background: #fff3cd; color: #856404; }
.vp-badge-annulee { background: #f8d7da; color: #721c24; }
.vp-badge-passee  { background: #e9ecef; color: #495057; }

/* ── Boutons d'action ────────────────────────────────────── */
.vp-btn-annuler {
    padding: 5px 14px;
    background: transparent;
    color: var(--vp-danger);
    border: 1px solid var(--vp-danger);
    border-radius: var(--vp-radius);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.vp-btn-annuler:hover {
    background: var(--vp-danger);
    color: var(--vp-white);
}

.vp-annulation-impossible {
    font-size: 12px;
    color: var(--vp-text-light);
    font-style: italic;
    cursor: help;
    border-bottom: 1px dotted var(--vp-text-light);
    white-space: nowrap;
}

/* ── Modale de confirmation ──────────────────────────────── */
.vp-annul-remboursement {
    background: #e8f4fd;
    border-left: 3px solid var(--vp-primary);
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    margin-top: 12px;
}

.vp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.vp-btn-secondary {
    padding: 9px 20px;
    background: var(--vp-bg);
    color: var(--vp-text);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    font-size: 14px;
    cursor: pointer;
    transition: background .15s;
}
.vp-btn-secondary:hover { background: #e2e6ea; }

.vp-btn-danger {
    padding: 9px 20px;
    background: var(--vp-danger);
    color: var(--vp-white);
    border: none;
    border-radius: var(--vp-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}
.vp-btn-danger:hover   { opacity: .85; }
.vp-btn-danger:disabled{ opacity: .5; cursor: not-allowed; }

/* ── Responsive ──────────────────────────────────────────── */
@media ( max-width: 640px ) {
    .vp-dashboard-table th,
    .vp-dashboard-table td { padding: 8px 10px; font-size: 13px; }
    .vp-col-details { display: none; }   /* masqué sur mobile */
}