/*
 * dashboard-pdp.css
 *
 * CSS SPÉCIFIQUE au tableau de bord souscripteur « Plateforme Agréée DGFiP »
 * (lib/view/DashboardPdp.php, templates/html/dashboard-pdp/index.html).
 *
 * Refonte premium alignée sur la même veine visuelle que css/pdp-premium.css
 * (Émission/Réception, classes .fapdp-*) et css/ereporting-premium.css
 * (classes .erep-*) : cartes nettes, pastilles pill, tons pastel sémantiques,
 * aération, hover discret. Toutes les classes sont préfixées .pdp-* et
 * scopées sous .pdp-dashboard-wrap pour rester strictement isolées.
 *
 * Basé sur mobi-base/css/design-tokens.css (var(--x, repli) partout — le
 * dashboard fonctionne même si ce fichier n'est pas chargé avant celui-ci).
 */

.pdp-dashboard-wrap {
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    color: var(--color-text, #333);
    padding: var(--space-lg, 16px);
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Bandeau statut global (hero) ─────────────────────────────────────────── */
.pdp-bandeau {
    display: flex;
    align-items: center;
    gap: var(--space-md, 12px);
    padding: var(--space-md, 12px) var(--space-lg, 16px);
    border-radius: var(--radius-lg, 8px);
    margin-bottom: var(--space-xl, 24px);
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-md, 16px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    border: 1px solid transparent;
}
.pdp-bandeau-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255,255,255,.55);
}
.pdp-bandeau .pdp-bandeau-icon { font-size: 20px; }
.pdp-bandeau-label { line-height: 1.3; }
.pdp-bandeau-sub {
    display: block;
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-normal, 400);
    opacity: .85;
    margin-top: 2px;
}
.pdp-bandeau--ok {
    background: linear-gradient(135deg, rgb(223,244,232) 0%, rgb(236,249,240) 100%);
    color: rgb(21,110,71);
    border-color: rgba(21,110,71,.15);
}
.pdp-bandeau--alerte {
    background: linear-gradient(135deg, rgb(255,240,209) 0%, rgb(255,247,230) 100%);
    color: rgb(146,89,10);
    border-color: rgba(146,89,10,.18);
}
.pdp-bandeau--critique {
    background: linear-gradient(135deg, rgb(250,222,222) 0%, rgb(253,235,235) 100%);
    color: rgb(158,28,28);
    border-color: rgba(158,28,28,.2);
}

/* ── Grille de tuiles ──────────────────────────────────────────────────────── */
.pdp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg, 16px);
    margin-bottom: var(--space-xl, 24px);
}
@media (min-width: 900px) {
    .pdp-tile--emission-full { grid-column: span 2; }
}

/* ── Tuile individuelle ────────────────────────────────────────────────────── */
.pdp-tile {
    background: var(--color-bg-surface, #fff);
    border: 1px solid var(--color-border-muted, #eee);
    border-radius: var(--radius-lg, 8px);
    padding: var(--space-lg, 16px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    transition: box-shadow var(--transition-base, 200ms ease-out), transform var(--transition-base, 200ms ease-out);
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    overflow: hidden;
}
.pdp-tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-border, #ddd);
}
.pdp-tile:hover { box-shadow: var(--shadow-md, 0 2px 4px rgba(0,0,0,.08)); transform: translateY(-2px); }

.pdp-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm, 8px);
    margin-bottom: var(--space-md, 12px);
    padding-bottom: var(--space-sm, 8px);
    border-bottom: 1px solid var(--color-border-muted, #eee);
}
.pdp-tile-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pdp-tile-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--radius-md, 6px);
    background: var(--color-bg-muted, #f3f3f3); color: var(--color-text-muted, #6c757d);
    font-size: 14px; flex-shrink: 0;
}
.pdp-tile-title {
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted, #6c757d);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* KPI principal — gros chiffre cliquable ───────────────────────────────────── */
.pdp-kpi {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs, 4px);
    margin-bottom: var(--space-md, 12px);
    cursor: default;
}
.pdp-kpi a {
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm, 4px);
    transition: opacity var(--transition-fast, 120ms ease-out);
}
.pdp-kpi a:hover { opacity: .75; }
.pdp-kpi a:hover .pdp-kpi-val { text-decoration: underline; text-underline-offset: 3px; }
.pdp-kpi-val {
    font-size: var(--font-size-2xl, 28px);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-tight, 1.2);
    font-variant-numeric: tabular-nums;
}
.pdp-kpi-label {
    font-size: var(--font-size-sm, 12px);
    color: var(--color-text-muted, #6c757d);
}

/* Couleurs sémantiques sur les KPI — distinctes de l'accent orange Synapsy */
.pdp-kpi-val--danger  { color: var(--color-danger, #c0392b); }
.pdp-kpi-val--warning { color: rgb(146,89,10); }
.pdp-kpi-val--success { color: var(--color-success, #198754); }
.pdp-kpi-val--neutral { color: var(--color-text, #333); }
.pdp-kpi-val--muted   { color: var(--color-text-muted, #6c757d); }

/* Pastille d'accent en haut de tuile (remplace l'ancienne bordure gauche épaisse) */
.pdp-tile--danger::before  { background: var(--color-danger, #c0392b); }
.pdp-tile--warning::before { background: var(--color-warning, #ffc107); }
.pdp-tile--success::before { background: var(--color-success, #198754); }
.pdp-tile--neutral::before { background: var(--color-border, #ddd); }

/* Lignes secondaires dans la tuile ─────────────────────────────────────────── */
.pdp-rows { margin-top: var(--space-xs, 4px); }
.pdp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm, 8px);
    padding: 5px 0;
    font-size: var(--font-size-sm, 12px);
    color: var(--color-text-muted, #6c757d);
    border-bottom: 1px solid var(--color-border-muted, #f2f2f2);
}
.pdp-row:last-child { border-bottom: none; }
.pdp-row-val {
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-base, 14px);
    color: var(--color-text, #333);
    font-variant-numeric: tabular-nums;
}
.pdp-row a {
    color: var(--color-text-link, #1e4e9e);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
}
.pdp-row a:hover { text-decoration: underline; text-underline-offset: 2px; }
.pdp-row-sep {
    margin-top: 6px;
    border-top: 1px dashed var(--color-border, #ddd);
    padding-top: 8px !important;
}
.pdp-row-danger-label { color: var(--color-danger, #c0392b); }

/* Lien "Voir tout" dans le header de tuile */
.pdp-tile-link {
    font-size: var(--font-size-xs, 11px);
    color: var(--color-text-link, #1e4e9e);
    text-decoration: none;
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
    padding: 3px 9px;
    background: var(--color-bg-muted, #f3f3f3);
    border-radius: var(--radius-pill, 9999px);
    transition: background var(--transition-fast, 120ms ease-out), color var(--transition-fast, 120ms ease-out);
    flex-shrink: 0;
}
.pdp-tile-link:hover {
    background: var(--color-primary, #1e4e9e);
    color: var(--color-primary-text, #fff);
    text-decoration: none;
}

/* Bouton relancer dans la tuile ────────────────────────────────────────────── */
.pdp-btn-relancer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 4px);
    margin-top: var(--space-md, 12px);
    padding: 6px 14px;
    background: var(--color-danger, #c0392b);
    color: #fff;
    border: none;
    border-radius: var(--radius-md, 6px);
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    transition: background var(--transition-fast, 120ms ease-out), box-shadow var(--transition-fast, 120ms ease-out);
}
.pdp-btn-relancer:hover { background: var(--color-danger-hover, #7C0202); box-shadow: var(--shadow-md, 0 2px 4px rgba(0,0,0,.08)); }
.pdp-btn-relancer:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* ── Section alertes ───────────────────────────────────────────────────────── */
.pdp-alertes {
    background: var(--color-bg-surface, #fff);
    border: 1px solid var(--color-border-muted, #eee);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    overflow: hidden;
    margin-bottom: var(--space-xl, 24px);
}
.pdp-alertes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md, 12px) var(--space-lg, 16px);
    background: var(--color-bg-alt, #f0f2f5);
    border-bottom: 1px solid var(--color-border-muted, #eee);
}
.pdp-alertes-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm, 12px);
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted, #6c757d);
}
.pdp-alertes table {
    width: 100%;
    border-collapse: collapse;
}
.pdp-alertes th {
    text-align: left;
    padding: var(--space-sm, 8px) var(--space-lg, 16px);
    font-size: var(--font-size-xs, 11px);
    font-weight: var(--font-weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--color-text-muted, #6c757d);
    background: var(--color-bg-surface, #fff);
    border-bottom: 1px solid var(--color-border-muted, #eee);
}
.pdp-alertes td {
    padding: var(--space-sm, 8px) var(--space-lg, 16px);
    border-bottom: 1px solid var(--color-border-muted, #f2f2f2);
    font-size: var(--font-size-base, 14px);
    vertical-align: middle;
}
.pdp-alertes tr:last-child td { border-bottom: none; }
.pdp-alertes tr:hover td { background: var(--color-bg-muted, #f3f3f3); }
.pdp-alertes a { color: var(--color-text-link, #1e4e9e); text-decoration: none; font-weight: var(--font-weight-medium, 500); }
.pdp-alertes a:hover { text-decoration: underline; text-underline-offset: 2px; }
.pdp-alertes-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--color-success, #198754);
    font-weight: var(--font-weight-medium, 500);
}
.pdp-alertes-empty .k-icon { font-size: 18px; vertical-align: -3px; margin-right: 4px; }

/* ── Badges de sévérité (pastilles pill, même famille que .fapdp-statut-pill) */
.pdp-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: var(--radius-pill, 9999px);
    font-size: var(--font-size-xs, 11px);
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.pdp-badge--critique { background: rgb(250,222,222); color: rgb(158,28,28); }
.pdp-badge--haute    { background: rgb(255,240,209); color: rgb(146,89,10); }
.pdp-badge--moyenne  { background: rgb(228,235,247); color: rgb(37,71,120); }

/* Intégrité SAE ────────────────────────────────────────────────────────────── */
.pdp-ig--ok     { color: var(--color-success, #198754); font-weight: var(--font-weight-bold, 700); }
.pdp-ig--erreur { color: var(--color-danger, #c0392b);  font-weight: var(--font-weight-bold, 700); }

/* ── Pied de page ──────────────────────────────────────────────────────────── */
.pdp-footer {
    font-size: var(--font-size-xs, 11px);
    color: var(--color-text-muted, #6c757d);
    padding: var(--space-xs, 4px) 0;
}
.pdp-footer-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

/* ── Section graphiques ────────────────────────────────────────────────────── */
.pdp-charts {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-lg, 16px);
    margin-bottom: var(--space-xl, 24px);
}
.pdp-chart-card {
    background: var(--color-bg-surface, #fff);
    border: 1px solid var(--color-border-muted, #eee);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    overflow: hidden;
}
.pdp-chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm, 8px) var(--space-lg, 16px);
    background: var(--color-bg-alt, #f0f2f5);
    border-bottom: 1px solid var(--color-border-muted, #eee);
}
.pdp-chart-card-header h3 {
    margin: 0;
    font-size: var(--font-size-base, 14px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text, #333);
}
.pdp-chart-body {
    padding: var(--space-md, 12px) var(--space-lg, 16px);
}
.pdp-chart-donut-wrap { height: 260px; }
.pdp-chart-bar-wrap   { height: 260px; }

/* Sparkline wrapper dans les tuiles */
.pdp-sparkline { height: 40px; margin-top: var(--space-sm, 8px); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pdp-charts { grid-template-columns: 1fr; }
    .pdp-chart-donut-wrap,
    .pdp-chart-bar-wrap { height: 220px; }
    .pdp-tile--emission-full { grid-column: span 1; }
}
@media (max-width: 768px) {
    .pdp-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .pdp-dashboard-wrap { padding: var(--space-md, 12px); }
    .pdp-tiles { grid-template-columns: 1fr; }
    .pdp-bandeau { flex-wrap: wrap; }
    .pdp-alertes table { font-size: var(--font-size-xs, 11px); }
    .pdp-alertes th, .pdp-alertes td { padding: var(--space-xs, 4px) var(--space-sm, 8px); }
}