/**
 * Feuille de route — onglet « Portail vendeurs » (v1.0.0, 2026-09-10)
 * Prefix: pa- (+ .fdr-view-tabs pour la bascule des deux vues de la page).
 * Réutilise .card / .card-header / .table-container / .sales-summary-* / .filter-* partagés.
 */

/* `hidden` doit gagner sur les display:flex/grid des classes partagées (.filter-group, .card…) */
#fdrViewLeads[hidden], #fdrViewPortal[hidden], #fdrViewPortal [hidden] { display: none !important; }

/* ---- Bascule des deux vues de la page ---- */
.fdr-view-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin-bottom: 12px;
    background: #eef2f7;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.fdr-view-tabs [role="tab"] {
    border: 0;
    background: transparent;
    color: #475569;
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    padding: 8px 16px;
    border-radius: 9px;
    cursor: pointer;
}
.fdr-view-tabs [role="tab"]:hover { color: #1e293b; background: rgba(255, 255, 255, .6); }
.fdr-view-tabs [role="tab"].active { background: #fff; color: #4338ca; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.fdr-view-tabs [role="tab"]:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }

/* ---- En-tête / contrôles ---- */
.pa-controls { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; }
.pa-custom { display: inline-flex; align-items: center; gap: 6px; }
.pa-refresh-group { display: flex; flex-direction: row; align-items: center; gap: 10px; margin-left: auto; }
.pa-note { font-size: .78rem; color: #64748b; margin: 10px 2px 0; line-height: 1.45; }
.pa-alert { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: .85rem; }
.pa-muted { color: #64748b; font-size: .8rem; font-weight: 400; }
.pa-bad { color: #b91c1c; font-weight: 600; }
.pa-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; white-space: nowrap; }
.pa-nowrap { white-space: nowrap; }

.pa-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 9px; }
.pa-seg button { border: 0; background: transparent; font: inherit; font-size: .82rem; font-weight: 600; color: #475569; padding: 6px 11px; border-radius: 7px; cursor: pointer; }
.pa-seg button:hover { color: #0f172a; }
.pa-seg button.active { background: #fff; color: #4338ca; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.pa-seg-sm button { font-size: .76rem; padding: 5px 9px; }
.pa-seg button:focus-visible, .pa-btn:focus-visible, .pa-subtabs [role="tab"]:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }

.pa-btn { border: 1px solid #cbd5e1; background: #fff; color: #334155; font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.pa-btn:hover:not([disabled]) { background: #f8fafc; border-color: #94a3b8; }
.pa-btn[disabled] { opacity: .45; cursor: default; }

/* ---- KPI ---- */
.pa-kpi-card { padding-top: 10px; padding-bottom: 10px; }
.pa-kpis .sales-summary-value { color: #1e293b; }
.pa-kpis .pa-kpi-good .sales-summary-value { color: #047857; }
.pa-kpis .pa-kpi-warn .sales-summary-value { color: #b45309; }
.pa-kpis .pa-kpi-bad .sales-summary-value { color: #b91c1c; }
.pa-kpis .fdr-kpi-target { color: #64748b; }

/* ---- Sous-onglets ---- */
.pa-subtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 12px; border-bottom: 1px solid #e2e8f0; }
.pa-subtabs [role="tab"] { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: .88rem; color: #64748b; padding: 9px 14px; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.pa-subtabs [role="tab"]:hover { color: #1e293b; }
.pa-subtabs [role="tab"].active { color: #4338ca; border-bottom-color: #6366f1; }

/* ---- Tableaux ---- */
.pa-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.pa-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: #64748b; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; background: #f8fafc; }
.pa-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.pa-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pa-row { cursor: pointer; }
.pa-row:hover td { background: #f8fafc; }
.pa-row:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
.pa-row-sel td { background: #eef2ff !important; }
.pa-row-dim td { color: #94a3b8; }
.pa-row-dim .pa-user { color: #64748b; }
.pa-user { white-space: nowrap; font-weight: 600; color: #1e293b; }
.pa-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.pa-sub-t { font-size: .74rem; color: #64748b; }
.pa-empty { text-align: center; color: #64748b; padding: 18px 10px; }
.pa-empty-s { margin: 4px 0; }
.pa-tag { font-size: .75rem; }

.pa-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pa-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pa-on { background: #dcfce7; color: #166534; }
.pa-on .pa-pill-dot { box-shadow: 0 0 0 3px rgba(22, 163, 74, .25); animation: pa-pulse 2s ease-in-out infinite; }
.pa-idle { background: #fef3c7; color: #92400e; }
.pa-bg { background: #e0e7ff; color: #3730a3; }
.pa-off { background: #f1f5f9; color: #64748b; }
@keyframes pa-pulse { 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .pa-on .pa-pill-dot { animation: none; } }

.pa-evt { font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #f1f5f9; color: #334155; white-space: nowrap; }
.pa-evt-login { background: #dcfce7; color: #166534; }
.pa-evt-logout, .pa-evt-leave { background: #e2e8f0; color: #334155; }
.pa-evt-login_fail, .pa-evt-login_locked, .pa-evt-error { background: #fee2e2; color: #991b1b; }
.pa-evt-view { background: #e0e7ff; color: #3730a3; }
.pa-evt-api { background: #f0f9ff; color: #075985; }
.pa-evt-click, .pa-evt-change { background: #fef9c3; color: #854d0e; }
.pa-evt-modal, .pa-evt-modal_close { background: #f3e8ff; color: #6b21a8; }

.pa-pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 10px 4px 2px; font-size: .8rem; color: #64748b; flex-wrap: wrap; }

/* ---- Grille jour × utilisateur ---- */
.pa-heat td.pa-cell { min-width: 34px; color: #312e81; font-weight: 600; font-size: .76rem; text-align: center; border: 1px solid #fff; }
.pa-heat td.pa-cell-dark { color: #fff; }
.pa-heat th.num { text-align: center; }

/* ---- Fiche utilisateur ---- */
.pa-detail { border: 1px solid #c7d2fe; box-shadow: 0 4px 18px rgba(79, 70, 229, .08); }
.pa-detail h3 { font-size: .86rem; font-weight: 700; color: #334155; margin: 14px 0 8px; }
.pa-h3-gap { margin-top: 18px !important; }
.pa-detail-head { display: flex; align-items: flex-start; gap: 14px; }
.pa-avatar { width: 44px; height: 44px; border-radius: 12px; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pa-detail-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pa-detail-name { font-size: 1.1rem; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-close { flex-shrink: 0; }
.pa-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 14px 0 4px; }
.pa-mini > div { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.pa-mini b { font-size: 1.05rem; color: #1e293b; }
.pa-mini span { font-size: .72rem; color: #64748b; }
.pa-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.pa-flag { font-size: .76rem; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: #334155; }
.pa-flag.pa-bad { background: #fef2f2; }

.pa-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.pa-grid2 > section { min-width: 0; }
#paTeam h3 { font-size: .86rem; font-weight: 700; color: #334155; margin: 6px 0 8px; }

.pa-bars { display: flex; flex-direction: column; gap: 5px; }
.pa-bar-row { display: grid; grid-template-columns: minmax(0, 42%) 1fr auto; gap: 8px; align-items: center; font-size: .8rem; }
.pa-bar-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.pa-bar-track { height: 9px; background: #eef2f7; border-radius: 99px; overflow: hidden; }
.pa-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #818cf8, #4f46e5); border-radius: 99px; }
.pa-bar-val { white-space: nowrap; font-variant-numeric: tabular-nums; color: #1e293b; font-weight: 600; min-width: 84px; text-align: right; }
.pa-bar-val small { color: #64748b; font-weight: 400; }

.pa-actions { display: flex; flex-direction: column; gap: 4px; }
.pa-action { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 40%); gap: 8px; font-size: .8rem; align-items: baseline; }
.pa-action-n { text-align: right; font-weight: 700; color: #4338ca; font-variant-numeric: tabular-nums; }
.pa-action-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1e293b; }
.pa-action-c { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: .75rem; }

.pa-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 90px; align-items: end; }
.pa-hour { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.pa-hour-bar { display: block; background: #818cf8; border-radius: 3px 3px 0 0; min-height: 0; }
.pa-hour-lab { font-size: .64rem; color: #64748b; text-align: center; height: 14px; line-height: 14px; }

/* ---- Géo / VPN ---- */
.pa-geo { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; line-height: 1.3; }
.pa-geo-ip { color: #64748b; font-size: .72rem; }
.pa-geo-flag > div:first-child { color: #b91c1c; font-weight: 600; }
.pa-map { text-decoration: none; opacity: .75; }
.pa-map:hover { opacity: 1; }
.pa-gtags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 1px; }
.pa-gtag { font-size: .66rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; }
.pa-g-vpn { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.pa-g-tor { background: #4c1d95; color: #fff; }
.pa-g-dc  { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.pa-g-tz  { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }
.pa-g-mob { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }
.pa-gdot { color: #b91c1c; font-weight: 700; }

.pa-locs { margin: 8px 0 4px; }
.pa-locs h3 { font-size: .86rem; font-weight: 700; color: #334155; margin: 6px 0 8px; }
.pa-locs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pa-loc { border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; background: #f8fafc; }
.pa-loc-flag { border-color: #fecaca; background: #fef2f2; }

.pa-status-loc { margin-top: 3px; font-size: .72rem; color: #64748b; line-height: 1.2; }
.pa-status-loc.pa-loc-warn { color: #b91c1c; font-weight: 600; }

/* ---- Responsive : les tableaux du Portail vendeurs sont larges (13+ colonnes) ---- */
/* Défilement horizontal fluide + colonne « Utilisateur » figée pour ne pas perdre le nom. */
#fdrViewPortal .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#fdrViewPortal .pa-table th:first-child,
#fdrViewPortal .pa-table td:first-child {
    position: sticky; left: 0; z-index: 1; background: #fff;
    box-shadow: 1px 0 0 #eef2f7;
}
#fdrViewPortal .pa-table thead th:first-child { z-index: 2; background: #f8fafc; }
#fdrViewPortal .pa-row:hover td:first-child { background: #f8fafc; }
#fdrViewPortal .pa-row-sel td:first-child { background: #eef2ff; }
/* la géo passe à la ligne proprement dans une cellule étroite */
.pa-geo, .pa-gtags { max-width: 220px; }
.pa-geo-ip { word-break: break-all; }

/* ---- Mobile ---- */
@media (max-width: 900px) {
    .pa-grid2 { grid-template-columns: minmax(0, 1fr); }
    .pa-refresh-group { margin-left: 0; }
    .pa-kpis { gap: 8px; }
    .pa-kpis .sales-summary-item { flex: 1 1 46%; }
}
@media (max-width: 768px) {
    .pa-table { font-size: .8rem; }
    .pa-table th, .pa-table td { padding: 7px 8px; }
    .pa-table th { font-size: .68rem; }
    .pa-status-loc { font-size: .68rem; }
    .pa-gtag { font-size: .62rem; padding: 1px 5px; }
    .pa-locs-grid { grid-template-columns: minmax(0, 1fr); }
    .pa-subtabs [role="tab"] { padding: 8px 10px; font-size: .82rem; }
    .pa-controls { gap: 10px 14px; }
    /* la géo dans le journal reste lisible sur une ligne étroite */
    .pa-mono { white-space: normal; }
}
@media (max-width: 600px) {
    .fdr-view-tabs { display: flex; }
    .fdr-view-tabs [role="tab"] { flex: 1 1 100%; text-align: left; }
    .pa-bar-row { grid-template-columns: minmax(0, 1fr) auto; }
    .pa-bar-track { grid-column: 1 / -1; grid-row: 2; }
    .pa-action { grid-template-columns: 40px minmax(0, 1fr); }
    .pa-action-c { grid-column: 2; }
    .pa-detail-head { flex-wrap: wrap; }
    .pa-kpis .sales-summary-item { flex: 1 1 100%; }
    .pa-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}