/* ============================================================
   Blocked Records Dashboard - styles
   Componente Razor: Blazor.Server/Components/BlockedRecordsDashboardComponent.razor
   Caricato globalmente da _Host.cshtml
   ============================================================ */

.vp-blocked-dashboard {
    --vp-primary: #0078d4;
    --vp-danger: #d13438;
    --vp-warning: #f7b500;
    --vp-success: #28a745;
    --vp-info: #6f42c1;
    --vp-muted: #57606a;
    --vp-text: #1f2328;
    --vp-bg: #f6f8fa;
    --vp-border: #d0d7de;
    --vp-card-bg: #ffffff;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    color: var(--vp-text);
    background: var(--vp-bg);
    min-height: 600px;
}

/* ============================================================ TOOLBAR */

.vp-blocked-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
}

.vp-blocked-toolbar .vp-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.vp-blocked-toolbar .vp-toolbar-right {
    margin-left: auto;
}

.vp-blocked-timestamp {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--vp-muted);
    font-size: 0.85rem;
}

.vp-clock-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--vp-success);
    display: inline-block;
}

.vp-clock-dot-loading {
    background: var(--vp-warning);
    animation: vp-pulse 1s ease-in-out infinite;
}

@keyframes vp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.vp-timestamp-label {
    font-weight: 600;
    color: var(--vp-text);
}

/* ============================================================ KPI CARDS */

.vp-blocked-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.vp-kpi-card {
    background: var(--vp-card-bg);
    border: 1px solid var(--vp-border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vp-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.vp-kpi-value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--vp-text);
}

.vp-kpi-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vp-muted);
    margin-top: 0.25rem;
}

.vp-kpi-total {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
    border-color: #005a9e;
}
.vp-kpi-total .vp-kpi-value,
.vp-kpi-total .vp-kpi-label { color: #ffffff; }

.vp-kpi-waiting { border-color: var(--vp-warning); }
.vp-kpi-waiting .vp-kpi-value { color: #c47f00; }

.vp-kpi-failed { border-color: var(--vp-danger); }
.vp-kpi-failed .vp-kpi-value { color: var(--vp-danger); }

.vp-kpi-new { border-color: var(--vp-info); }
.vp-kpi-new .vp-kpi-value { color: var(--vp-info); }

.vp-kpi-locked { border-color: #6c757d; }
.vp-kpi-locked .vp-kpi-value { color: #495057; }

/* ============================================================ TOAST */

.vp-blocked-toast {
    position: relative;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border-radius: 6px;
    border-left: 4px solid;
    font-size: 0.9rem;
    line-height: 1.4;
}

.vp-blocked-toast-success { background: #e7f6ec; border-color: var(--vp-success); color: #176d2c; }
.vp-blocked-toast-warning { background: #fff8e1; border-color: var(--vp-warning); color: #7a5a00; }
.vp-blocked-toast-error   { background: #fdecea; border-color: var(--vp-danger);  color: #861a18; }
.vp-blocked-toast-info    { background: #e7f3fe; border-color: var(--vp-primary); color: #064a78; }

.vp-toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 1rem;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

/* ============================================================ STATUS BADGES */

.vp-blocked-status {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.vp-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.vp-status-pending { background: #e7f3fe; color: #064a78; border: 1px solid #b6dcfe; }
.vp-status-waiting { background: #fff8e1; color: #7a5a00; border: 1px solid #f7e0a3; }
.vp-status-failed  { background: #fdecea; color: #861a18; border: 1px solid #f5c2bf; }
.vp-status-new     { background: #efe5ff; color: #4b2a8c; border: 1px solid #cdb3ff; }
.vp-status-locked  { background: #e9ecef; color: #495057; border: 1px solid #ced4da; }
.vp-status-changes { background: #fff0e0; color: #8a4b00; border: 1px solid #ffd8a8; }

/* ============================================================ GRID */

.vp-blocked-grid-section {
    background: var(--vp-card-bg);
    border: 1px solid var(--vp-border);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    min-height: 320px;
}

.vp-blocked-grid {
    --bs-border-color: var(--vp-border);
}

/* ============================================================ CONFIRM POPUP */

.vp-confirm-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 0.25rem 0.25rem 0.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.vp-confirm-warning {
    background: #fdecea;
    border-left: 4px solid var(--vp-danger);
    padding: 0.75rem 1rem;
    color: #861a18;
    border-radius: 4px;
}

.vp-confirm-count {
    background: var(--vp-bg);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--vp-border);
}

.vp-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vp-border);
}

/* ============================================================
   ACTION BUTTONS - color-coded per stato target
   Ogni bottone si abbina al colore del badge Status che il record
   deve avere per essere processato dall'azione:
   - Ripristino Forzato    -> badge "Modifiche" (arancione tenue)
   - Annulla Validazione   -> badge "Pending Validation" (blu)
   - Forza Accetta ERP     -> badge "New ERP Changes" (viola)
   - Hard Reset            -> sempre rosso (azione distruttiva)
   ============================================================ */

.vp-btn-action.btn,
.vp-btn-action.dxbl-btn {
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
    transition: filter 0.15s ease, transform 0.05s ease;
}

.vp-btn-action.btn:hover:not(:disabled),
.vp-btn-action.dxbl-btn:hover:not(:disabled) {
    filter: brightness(0.95);
}

.vp-btn-action.btn:active:not(:disabled),
.vp-btn-action.dxbl-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.vp-btn-action:disabled,
.vp-btn-action.dxbl-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Ripristino Forzato -> Pending Changes (arancione) */
.vp-btn-restore.btn,
.vp-btn-restore.dxbl-btn {
    background-color: #fff0e0 !important;
    border-color: #ffd8a8 !important;
    color: #8a4b00 !important;
}

/* Annulla Validazione -> Pending Validation (blu) */
.vp-btn-cancel.btn,
.vp-btn-cancel.dxbl-btn {
    background-color: #e7f3fe !important;
    border-color: #b6dcfe !important;
    color: #064a78 !important;
}

/* Forza Accetta ERP -> New ERP Changes (viola) */
.vp-btn-ack.btn,
.vp-btn-ack.dxbl-btn {
    background-color: #efe5ff !important;
    border-color: #cdb3ff !important;
    color: #4b2a8c !important;
}

/* Hard Reset (rosso pieno, gia' Danger di DevExpress) */
.vp-btn-hard-reset.btn,
.vp-btn-hard-reset.dxbl-btn {
    background-color: #d13438 !important;
    border-color: #b51e22 !important;
    color: #ffffff !important;
}

/* ============================================================
   DARK MODE
   Lo script dashboard-theme-sync.js setta data-vp-theme="dark|light"
   sull'elemento <html> in base alla luminanza del background corrente
   (selettore tema XAF). Stesso pattern usato dalla Worker Dashboard.
   ============================================================ */

[data-vp-theme="dark"] .vp-blocked-dashboard {
    --vp-primary: #4dabf7;
    --vp-danger: #ff6b6b;
    --vp-warning: #ffa94d;
    --vp-success: #51cf66;
    --vp-info: #b197fc;
    --vp-muted: #8694a8;
    --vp-text: #e5e9f0;
    --vp-bg: #0f172a;
    --vp-border: #334155;
    --vp-card-bg: #1e293b;
}

[data-vp-theme="dark"] .vp-kpi-card {
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

[data-vp-theme="dark"] .vp-kpi-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.45);
}

[data-vp-theme="dark"] .vp-kpi-value {
    color: var(--vp-text);
}

[data-vp-theme="dark"] .vp-kpi-label {
    color: #b8c1cf;
}

[data-vp-theme="dark"] .vp-kpi-total {
    background: linear-gradient(135deg, #1971c2 0%, #0c4d8c 100%);
    border-color: #2563a8;
}

[data-vp-theme="dark"] .vp-kpi-waiting { border-color: var(--vp-warning); }
[data-vp-theme="dark"] .vp-kpi-waiting .vp-kpi-value { color: #ffd591; }

[data-vp-theme="dark"] .vp-kpi-failed { border-color: var(--vp-danger); }
[data-vp-theme="dark"] .vp-kpi-failed .vp-kpi-value { color: #ff8787; }

[data-vp-theme="dark"] .vp-kpi-new { border-color: var(--vp-info); }
[data-vp-theme="dark"] .vp-kpi-new .vp-kpi-value { color: #d0bfff; }

[data-vp-theme="dark"] .vp-kpi-locked { border-color: #64748b; }
[data-vp-theme="dark"] .vp-kpi-locked .vp-kpi-value { color: #cbd5e1; }

/* Toast in dark: contrasto piu' alto */
[data-vp-theme="dark"] .vp-blocked-toast-success {
    background: rgba(81, 207, 102, .18);
    color: #b2f2bb;
}
[data-vp-theme="dark"] .vp-blocked-toast-warning {
    background: rgba(255, 169, 77, .18);
    color: #ffd591;
}
[data-vp-theme="dark"] .vp-blocked-toast-error {
    background: rgba(255, 107, 107, .18);
    color: #ffc9c9;
}
[data-vp-theme="dark"] .vp-blocked-toast-info {
    background: rgba(77, 171, 247, .18);
    color: #a5d8ff;
}

/* Status badge ricalibrati (sfondo piu' opaco, testo chiaro) */
[data-vp-theme="dark"] .vp-status-pending {
    background: rgba(77, 171, 247, .22);
    color: #a5d8ff;
    border-color: rgba(77, 171, 247, .35);
}
[data-vp-theme="dark"] .vp-status-waiting {
    background: rgba(255, 169, 77, .22);
    color: #ffd591;
    border-color: rgba(255, 169, 77, .35);
}
[data-vp-theme="dark"] .vp-status-failed {
    background: rgba(255, 107, 107, .22);
    color: #ffc9c9;
    border-color: rgba(255, 107, 107, .35);
}
[data-vp-theme="dark"] .vp-status-new {
    background: rgba(177, 151, 252, .22);
    color: #d0bfff;
    border-color: rgba(177, 151, 252, .35);
}
[data-vp-theme="dark"] .vp-status-locked {
    background: rgba(206, 212, 218, .16);
    color: #cbd5e1;
    border-color: rgba(206, 212, 218, .3);
}
[data-vp-theme="dark"] .vp-status-changes {
    background: rgba(255, 169, 77, .18);
    color: #ffd8a8;
    border-color: rgba(255, 169, 77, .3);
}

/* Timestamp / clock dot */
[data-vp-theme="dark"] .vp-blocked-timestamp {
    color: #b8c1cf;
}
[data-vp-theme="dark"] .vp-timestamp-label {
    color: var(--vp-text);
}

/* Confirm popup warning */
[data-vp-theme="dark"] .vp-confirm-warning {
    background: rgba(255, 107, 107, .18);
    color: #ffc9c9;
}

/* Action buttons in dark: stesse tinte dei badge dark mode */
[data-vp-theme="dark"] .vp-btn-restore.btn,
[data-vp-theme="dark"] .vp-btn-restore.dxbl-btn {
    background-color: rgba(255, 169, 77, .22) !important;
    border-color: rgba(255, 169, 77, .45) !important;
    color: #ffd8a8 !important;
}

[data-vp-theme="dark"] .vp-btn-cancel.btn,
[data-vp-theme="dark"] .vp-btn-cancel.dxbl-btn {
    background-color: rgba(77, 171, 247, .22) !important;
    border-color: rgba(77, 171, 247, .45) !important;
    color: #a5d8ff !important;
}

[data-vp-theme="dark"] .vp-btn-ack.btn,
[data-vp-theme="dark"] .vp-btn-ack.dxbl-btn {
    background-color: rgba(177, 151, 252, .22) !important;
    border-color: rgba(177, 151, 252, .45) !important;
    color: #d0bfff !important;
}

[data-vp-theme="dark"] .vp-btn-hard-reset.btn,
[data-vp-theme="dark"] .vp-btn-hard-reset.dxbl-btn {
    background-color: #c0353a !important;
    border-color: #ff6b6b !important;
    color: #ffffff !important;
}