/*
════════════════════════════════════════════════════════════════════════════════
KANSO-OPS — INVOICE WATCHDOG v1 — STYLES
Version: 1.0.0

ARCHITECTURE :
─────────────────────────────────────────────────────
1. REUSABLE PATTERNS (kanso-*) sont dans litige-killer.css
   → kanso-tabs, kanso-timeline, kanso-config-card, kanso-toggle,
     kanso-input, kanso-select, kanso-form-group, kanso-scan-*
   → Ce fichier ne les redéfinit PAS.
2. MODULE-SPECIFIC (iw-*)
   → Préfixe "iw-" = spécifique à Invoice Watchdog
════════════════════════════════════════════════════════════════════════════════
*/


/* ══════════════════════════════════════════════════════════════════════════════
   MODULE-SPECIFIC: INVOICE WATCHDOG (iw-*)
   ══════════════════════════════════════════════════════════════════════════════ */

/* KPI strip — horizontal bar with 4 KPIs (same grid as LK) */
.iw-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Info bar — always-on pulse indicator */
.iw-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: rgba(16, 185, 129, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.12);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.iw-info-bar-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.iw-info-bar-right {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.iw-info-text {
    font-size: var(--font-size-sm);
    color: var(--gray-400);
}

/* Pulse dot — real-time indicator */
.iw-pulse-dot {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.iw-pulse-dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--success);
    border-radius: 50%;
}

.iw-pulse-dot::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 16px;
    height: 16px;
    background: var(--success);
    border-radius: 50%;
    opacity: 0;
    animation: iw-pulse 2s ease-out infinite;
}

@keyframes iw-pulse {
    0% {
        opacity: 0.6;
        transform: scale(0.5);
    }
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}


/* Type badge colors (R1-R4 — same as LK for consistency) */
.iw-type-R1 { background: var(--danger-muted); color: var(--danger); }
.iw-type-R2 { background: var(--warning-muted); color: var(--warning); }
.iw-type-R3 { background: var(--info-muted); color: var(--info); }
.iw-type-R4 { background: var(--primary-muted); color: var(--primary-light); }


/* Row action buttons — compact inline (same structure as LK) */
.iw-row-actions {
    display: flex;
    gap: var(--space-2);
}

.iw-row-action {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--gray-300);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.iw-row-action:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.iw-row-action--block {
    color: var(--warning);
    border-color: rgba(245, 158, 11, 0.3);
}
.iw-row-action--block:hover {
    background: var(--warning-muted);
}

.iw-row-action--validate {
    color: var(--gray-500);
}
.iw-row-action--validate:hover {
    color: var(--gray-300);
}

.iw-row-action--transfer {
    color: var(--primary-light);
    border-color: rgba(139, 92, 246, 0.3);
}
.iw-row-action--transfer:hover {
    background: var(--primary-muted);
}

.iw-row-action--close {
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.3);
}
.iw-row-action--close:hover {
    background: var(--success-muted);
}

.iw-row-action--resolve {
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.3);
}
.iw-row-action--resolve:hover {
    background: var(--success-muted);
}

.iw-row-action--view {
    color: var(--info);
    border-color: rgba(56, 189, 248, 0.3);
}
.iw-row-action--view:hover {
    background: var(--info-muted);
}


/* Auto-correction tag (same visual pattern as LK) */
.iw-auto-correction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px var(--space-2);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--warning);
    background: var(--warning-muted);
    border-radius: var(--radius-xs);
}


/* LK reference badge — shows link to transferred litige */
.iw-lk-ref {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px var(--space-2);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary-light);
    background: var(--primary-muted);
    border-radius: var(--radius-xs);
    margin-left: var(--space-2);
    cursor: help;
}


/* Amount highlight */
.iw-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.iw-amount--positive { color: var(--success); }
.iw-amount--negative { color: var(--danger); }
.iw-amount--neutral { color: var(--gray-200); }


/* Table cell alignment */
.iw-cell-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* Detail modal — wider */
.iw-modal-wide .modal-container {
    max-width: 640px;
}


/* Demo ribbon */
.iw-demo-ribbon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--warning);
    background: var(--warning-muted);
    border-radius: var(--radius-sm);
    margin-left: var(--space-3);
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .iw-kpi-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .iw-info-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .iw-row-actions {
        flex-wrap: wrap;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .iw-kpi-strip {
        grid-template-columns: 1fr;
    }
}