/* ==========================================
   DESIGN SYSTEM — FinOps Ypsium
   Punchy girly — fond blanc, accents rose/violet
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bg-base: #fafafc;
    --bg-surface: #ffffff;
    --bg-elevated: #f5f3ff;
    --bg-input: #f8f7fc;
    --border: #e9e5f5;
    --border-focus: #c084fc;
    --text-primary: #1e1b3a;
    --text-secondary: #6b6494;
    --text-muted: #9c95b8;
    --accent: #a855f7;
    --accent-hover: #9333ea;
    --accent-soft: #f3e8ff;
    --pink: #ec4899;
    --pink-soft: #fdf2f8;
    --coral: #f43f5e;
    --success: #10b981;
    --success-soft: #ecfdf5;
    --warning: #f59e0b;
    --warning-soft: #fffbeb;
    --danger: #ef4444;
    --danger-soft: #fef2f2;
    --info: #6366f1;
    --info-soft: #eef2ff;
}

/* === BASE === */

* { box-sizing: border-box; }

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* === SCROLLBAR === */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d6d0e8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #b8aed4; }
* { scrollbar-width: thin; scrollbar-color: #d6d0e8 transparent; }

/* === ANIMATIONS === */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

.animate-fade-in { animation: fadeIn .25s ease-out both; }
.animate-fade-in-up { animation: fadeInUp .3s ease-out both; }

/* === INPUTS === */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

input, select, textarea {
    transition: border-color .2s ease, box-shadow .2s ease;
}

input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
    border-color: var(--border-focus) !important;
}

/* Standard input style */
.fi {
    width: 100%;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
}

.fi::placeholder { color: var(--text-muted); }

/* === TABLES === */

table thead th {
    letter-spacing: .05em;
    font-size: 11px;
    white-space: nowrap;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

table tbody tr { transition: background-color .1s ease; }
table tbody tr:hover { background: var(--accent-soft) !important; }

/* === MODALS === */

.modal { transition: opacity .2s ease; }
body.modal-active { overflow-y: hidden; }

/* === BADGES === */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    border: none;
    line-height: 1.8;
}

.badge-success { background: var(--success-soft); color: #059669; }
.badge-warning { background: var(--warning-soft); color: #d97706; }
.badge-danger  { background: var(--danger-soft); color: #dc2626; }
.badge-info    { background: var(--info-soft); color: #4f46e5; }
.badge-purple  { background: #f3e8ff; color: #7c3aed; }
.badge-pink    { background: var(--pink-soft); color: #db2777; }
.badge-neutral { background: #f1f5f9; color: #64748b; }

/* === SIDEBAR === */

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13.5px;
    color: var(--text-secondary);
    transition: all .15s ease;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.sidebar-link:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

.sidebar-link.active {
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 700;
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

.sidebar-icon {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; opacity: .55; flex-shrink: 0;
}

.sidebar-link.active .sidebar-icon,
.sidebar-link:hover .sidebar-icon { opacity: 1; }

/* === CARDS === */

.card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* === BUTTONS === */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    transition: all .15s ease;
    cursor: pointer;
    border: 1.5px solid transparent;
}

.btn-primary    { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-pink       { background: var(--pink); color: white; }
.btn-pink:hover { background: #db2777; }
.btn-secondary  { background: var(--bg-input); color: var(--text-secondary); border-color: var(--border); }
.btn-secondary:hover { background: var(--accent-soft); color: var(--accent); border-color: #c084fc; }
.btn-danger     { background: var(--danger-soft); color: #dc2626; }
.btn-danger:hover { background: var(--danger); color: white; }
.btn-success    { background: var(--success-soft); color: #059669; }
.btn-success:hover { background: var(--success); color: white; }

/* === PAGE HEADERS === */

.page-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* === QUICK DATE NAV === */

.date-nav {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-surface);
}

.date-nav button, .date-nav span {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all .15s ease;
}

.date-nav button:hover { background: var(--accent-soft); color: var(--accent); }
.date-nav span { cursor: default; border-left: 1px solid var(--border); border-right: 1px solid var(--border); min-width: 100px; text-align: center; color: var(--text-primary); font-weight: 700; }

.date-presets {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.date-presets button {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    border: 1.5px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .12s ease;
}

.date-presets button:hover { background: var(--accent-soft); color: var(--accent); border-color: #c084fc; }
.date-presets button.active { background: var(--accent); color: white; border-color: var(--accent); }

/* === LOADING === */

.loading-pulse {
    color: var(--accent);
    font-weight: 600;
    animation: pulse-soft 2s ease-in-out infinite;
}

/* === SUGGESTION CARDS (reconciliation) === */

.suggestion-card {
    background: linear-gradient(135deg, #fdf4ff 0%, #faf5ff 100%);
    border: 1.5px dashed #d8b4fe;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all .15s ease;
}

.suggestion-card:hover {
    background: linear-gradient(135deg, #fae8ff 0%, #f3e8ff 100%);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(168, 85, 247, .12);
}

/* === STAT CARD (KPI) === */

.kpi-card {
    background: var(--bg-surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.kpi-value {
    font-size: 22px;
    font-weight: 800;
    font-family: 'Inter', ui-monospace, monospace;
}

/* === UTILITY === */

.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Override Tailwind dark bg classes for light mode */
.bg-slate-800 { background: var(--bg-surface) !important; border-color: var(--border) !important; }
.bg-slate-900 { background: var(--bg-input) !important; }
.bg-slate-900\/50 { background: rgba(248,247,252,.5) !important; }
.bg-slate-700 { background: #e9e5f5 !important; }
.border-slate-700 { border-color: var(--border) !important; }
.border-slate-600 { border-color: #ddd6f3 !important; }
.text-slate-200 { color: var(--text-primary) !important; }
.text-slate-300 { color: #3d3660 !important; }
.text-slate-400 { color: var(--text-secondary) !important; }
.text-slate-500 { color: var(--text-muted) !important; }
.text-white { color: var(--text-primary) !important; }
.shadow-xl { box-shadow: 0 2px 8px rgba(0,0,0,.04) !important; }
.shadow-2xl { box-shadow: 0 4px 16px rgba(0,0,0,.06) !important; }
.shadow-inner { box-shadow: inset 0 1px 2px rgba(0,0,0,.03) !important; }
.divide-slate-700\/50 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

/* Accent color overrides */
.text-blue-400 { color: var(--accent) !important; }
.text-blue-300 { color: #c084fc !important; }
.bg-blue-600 { background: var(--accent) !important; }
.bg-blue-600:hover, .hover\:bg-blue-500:hover { background: var(--accent-hover) !important; }
.bg-blue-900 { background: var(--accent-soft) !important; }
.bg-blue-900\/20 { background: rgba(168,85,247,.08) !important; }
.border-blue-500 { border-color: var(--accent) !important; }
.focus\:border-blue-500:focus { border-color: var(--border-focus) !important; }
.accent-blue-500 { accent-color: var(--accent) !important; }

/* Green stays for success/money */
.text-green-400 { color: #059669 !important; }
.text-green-500 { color: #059669 !important; }
.bg-green-600 { background: var(--success) !important; }
.bg-green-900\/30 { background: var(--success-soft) !important; }
.bg-green-900\/40 { background: var(--success-soft) !important; }
.border-green-400 { border-color: #6ee7b7 !important; }
.border-green-500 { border-color: var(--success) !important; }

/* Red/danger stays */
.text-red-400 { color: var(--danger) !important; }
.bg-red-500\/10, .bg-red-500\/20, .bg-red-900\/30, .bg-red-900\/40 { background: var(--danger-soft) !important; }

/* Orange/warning stays */
.text-orange-400 { color: #d97706 !important; }
.bg-orange-600 { background: #f59e0b !important; }
.bg-orange-600\/20, .bg-orange-900\/30 { background: var(--warning-soft) !important; }
.border-orange-500, .border-orange-500\/50 { border-color: #fbbf24 !important; }
.hover\:border-orange-400:hover { border-color: #fbbf24 !important; }
.hover\:bg-orange-600:hover { background: #f59e0b !important; color: white !important; }

/* Purple touches */
.text-purple-400, .text-purple-300 { color: #7c3aed !important; }
.bg-purple-600 { background: #7c3aed !important; }
.bg-purple-900\/30, .bg-purple-900\/40 { background: #f3e8ff !important; }
.border-purple-600, .border-purple-700\/50 { border-color: #c4b5fd !important; }

/* Yellow/TVA */
.text-yellow-500 { color: #d97706 !important; }

/* Fix white text on buttons that need to stay white */
.bg-blue-600 .text-white,
.bg-green-600 .text-white,
.bg-purple-600 .text-white,
.bg-orange-600 .text-white,
button[class*="bg-blue-600"],
button[class*="bg-green-600"],
button[class*="bg-purple-600"],
button[class*="bg-orange-600"] {
    color: white !important;
}

/* Fix checkboxes and real white-on-colored backgrounds */
.bg-blue-500 { background: var(--accent) !important; }
.bg-green-500 { background: var(--success) !important; }
.bg-blue-500 span, .bg-green-500 span { color: white !important; }

/* Fix ring classes */
.ring-1.ring-green-500\/30 { box-shadow: 0 0 0 1px rgba(16,185,129,.2); }

/* Sidebar : titres de section */
.sidebar-section {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #c4b5fd;
    padding: 10px 12px 4px;
    user-select: none;
}
.sidebar-section-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s;
}
.sidebar-section-toggle:hover {
    background: #faf5ff;
    color: #a855f7;
}
.sidebar-section-toggle svg {
    transition: transform .2s;
    flex-shrink: 0;
}
.sidebar-section-toggle.expanded svg.chev {
    transform: rotate(90deg);
}

/* ========================================================
   RESPONSIVE MOBILE — adaptations < 768px
   Strategie : on garde le desktop intact, on rend juste les
   ecrans etroits utilisables sans casser la mise en page.
   ======================================================== */
@media (max-width: 767px) {
    /* Sidebar passe en barre du bas (ou collapse) */
    body { font-size: 14px; }

    /* Cartes plus compactes */
    .card { padding: .75rem !important; }
    .page-title { font-size: 1.1rem !important; }
    .page-subtitle { font-size: .75rem !important; }

    /* Grilles de filtres : tout en pile */
    .grid.grid-cols-12 > [class*="col-span"] { grid-column: span 12 / span 12 !important; }

    /* Tableaux : scroll horizontal automatique */
    table { font-size: 12px !important; }
    thead th, tbody td { padding: .4rem !important; white-space: nowrap; }

    /* Modales : pleine largeur */
    .card[style*="max-width:1700px"],
    .card[style*="max-width:1100px"],
    .card[style*="max-width:840px"],
    .card[style*="max-width:760px"],
    .card[style*="max-width:680px"],
    .card[style*="max-width:540px"],
    .card[style*="max-width:520px"],
    .card[style*="max-width:500px"] {
        max-width: 96vw !important;
        max-height: 95vh !important;
    }

    /* Iframes PDF dans les modales : hauteur reduite */
    .card iframe { min-height: 280px !important; }

    /* Barre flottante (bulk action / lettrage balance) : full width en bas */
    .fixed.bottom-3, .fixed.bottom-4 {
        left: .5rem !important;
        right: .5rem !important;
        transform: none !important;
        max-width: calc(100vw - 1rem) !important;
        flex-wrap: wrap !important;
    }
    .fixed.bottom-3 .grid.grid-cols-12 > * { grid-column: span 12 / span 12 !important; }

    /* Boutons : taille minimale tactile (44px Apple/Google reco) */
    .btn { min-height: 38px; }

    /* Inputs date/select : eviter les debordements */
    input.fi[type="date"] { width: 100% !important; min-width: 0; }

    /* Date-presets : wrap proprement */
    .date-presets { flex-wrap: wrap; gap: .25rem; }
    .date-presets button { font-size: 11px; padding: 4px 8px; }
}

/* Tablette (768-1023px) : juste quelques ajustements */
@media (min-width: 768px) and (max-width: 1023px) {
    .card iframe { min-height: 360px; }
    table { font-size: 12px; }
}

/* Touch-friendly : meme sur desktop, agrandir les zones tactiles tactiles */
@media (pointer: coarse) {
    .btn { padding: 8px 14px; min-height: 38px; }
    input[type="checkbox"] { transform: scale(1.2); }
    select, input.fi { min-height: 36px; }
}