/* ===== BUTTONS ===== */
  .btn {
    display: inline-flex; align-items: center; gap: 6px !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-sm) !important;
    font-size: .85rem; font-weight: 600 !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
  }
  .btn-primary {
    background: var(--accent) !important;
    color: #fff !important;
  }
  .btn-primary:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,124,255,.4); }
  .btn-secondary {
    background: var(--bg3) !important;
    color: var(--text2) !important;
    border: 1px solid var(--border) !important;
  }
  .btn-secondary:hover { background: var(--border); color: var(--text); }
  .btn-ghost {
    background: transparent !important;
    color: var(--text2) !important;
    padding: 8px 10px !important;
  }
  .btn-ghost:hover { background: var(--bg3); color: var(--text); }
  .btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid var(--red2); }
  .btn-danger:hover { background: var(--red2); color: #fff; }
  .btn-success { background: var(--green-bg); color: var(--green); border: 1px solid var(--green2); }
  .btn-success:hover { background: var(--green2); color: #fff; }
  .btn-sm { padding: 5px 10px; font-size: .78rem; }
  .btn-icon { padding: 8px; }

  /* ===== PAGE CONTENT ===== */
  .page { display: none; padding: 28px 32px; flex: 1; }
  .page.active { display: block; animation: fadeIn .2s ease; }
  @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

  /* ===== PAGE HEADER ===== */
  .page-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 28px !important;
    gap: 16px !important;
  }
  .page-header-left h1 {
    font-family: 'Fraunces', serif !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.1 !important;
    letter-spacing: -.5px !important;
  }
  .page-header-left p {
    color: var(--text3) !important;
    font-size: .85rem !important;
    margin-top: 4px !important;
  }

  /* ===== CARDS ===== */
  .card {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 20px !important;
  }
  .card-title {
    font-size: .75rem !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--text3) !important;
    margin-bottom: 12px !important;
  }

  /* ===== STAT CARDS ===== */
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }
  .stat-card {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: var(--transition) !important;
  }
  .stat-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: var(--shadow); }
  .stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 3px !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
  }
  .stat-card.green::before { background: linear-gradient(90deg, var(--green), var(--green2)); }
  .stat-card.red::before { background: linear-gradient(90deg, var(--red), var(--red2)); }
  .stat-card.blue::before { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
  .stat-card.amber::before { background: linear-gradient(90deg, var(--amber), #c8880a); }
  .stat-card.purple::before { background: linear-gradient(90deg, var(--purple), #7c3aed); }

  .stat-label {
    font-size: .73rem !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: var(--text3) !important;
    margin-bottom: 8px !important;
  }
  .stat-value {
    font-family: 'DM Mono', monospace !important;
    font-size: 1.65rem !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
  }
  .stat-value.positive { color: var(--green); }
  .stat-value.negative { color: var(--red); }
  .stat-sub {
    font-size: .75rem !important;
    color: var(--text3) !important;
    margin-top: 6px !important;
  }
  .stat-icon {
    position: absolute !important;
    top: 18px; right: 18px !important;
    font-size: 1.4rem !important;
    opacity: .3 !important;
  }

  /* ===== DASHBOARD GRID ===== */
  .dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
  }
  @media (max-width: 1100px) { .dashboard-grid { grid-template-columns: 1fr; } }

  /* ===== CHART ===== */
  .chart-container {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 20px !important;
  }
  .chart-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
  }
  .chart-legend {
    display: flex; gap: 16px !important;
  }
  .legend-dot {
    display: flex; align-items: center; gap: 6px !important;
    font-size: .78rem; color: var(--text2) !important;
  }
  .legend-dot::before {
    content: '' !important;
    width: 10px; height: 10px !important;
    border-radius: 3px !important;
  }
  .legend-dot.green::before { background: var(--green); }
  .legend-dot.red::before { background: var(--red); }
  canvas#chartMain {
    width: 100% !important;
    height: 200px !important;
    display: block !important;
  }

  /* ===== RECENT TABLE ===== */
  .table-wrapper { overflow-x: auto; }
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: .85rem !important;
  }
  thead th {
    text-align: left !important;
    padding: 10px 14px !important;
    font-size: .7rem !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--text3) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  tbody tr {
    border-bottom: 1px solid rgba(42,49,80,.5) !important;
    transition: var(--transition) !important;
  }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: rgba(255,255,255,.02); }
  td { padding: 11px 14px; color: var(--text2); }
  td.amount { font-family: 'DM Mono', monospace; font-size: .83rem; }
  td.amount.positive { color: var(--green); }
  td.amount.negative { color: var(--red); }
  td .label { color: var(--text); font-weight: 500; }

  /* ===== BADGES ===== */
  .badge {
    display: inline-flex; align-items: center; gap: 4px !important;
    padding: 3px 8px !important;
    border-radius: 99px !important;
    font-size: .72rem; font-weight: 600 !important;
  }
  .badge-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green2); }
  .badge-red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red2); }
  .badge-blue { background: rgba(79,124,255,.12); color: var(--accent); border: 1px solid rgba(79,124,255,.25); }
  .badge-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid #7a5800; }
  .badge-gray { background: var(--bg3); color: var(--text3); border: 1px solid var(--border); }
  .badge-purple { background: rgba(167,139,250,.12); color: var(--purple); border: 1px solid rgba(167,139,250,.25); }

  /* ===== PLACEHOLDER / EMPTY STATE ===== */
  .empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 64px 20px !important;
    text-align: center !important;
  }
  .empty-icon {
    font-size: 3rem !important;
    margin-bottom: 16px !important;
    opacity: .4 !important;
  }
  .empty-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--text2) !important;
    margin-bottom: 6px !important;
  }
  .empty-sub {
    font-size: .83rem !important;
    color: var(--text3) !important;
    max-width: 300px !important;
    line-height: 1.5 !important;
  }

  /* ===== SECTION PLACEHOLDER ===== */
  .section-placeholder {
    background: var(--bg2) !important;
    border: 1px dashed var(--border2) !important;
    border-radius: var(--radius) !important;
  }

  /* ===== TOAST ===== */
  #toast-container {
    position: fixed !important;
    bottom: 24px; right: 24px !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    pointer-events: none !important;
  }
  .toast {
    background: var(--bg3) !important;
    border: 1px solid var(--border2) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 16px !important;
    font-size: .85rem !important;
    color: var(--text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 260px !important;
    box-shadow: var(--shadow) !important;
    animation: slideInToast .2s ease !important;
    pointer-events: all !important;
  }
  .toast.success { border-left: 3px solid var(--green); }
  .toast.error { border-left: 3px solid var(--red); }
  .toast.info { border-left: 3px solid var(--accent); }
  @keyframes slideInToast {
    from { opacity:0; transform: translateX(20px); }
    to { opacity:1; transform: none; }
  }

  /* ===== MODAL ===== */
  .modal-overlay {
    position: fixed; inset: 0 !important;
    background: rgba(0,0,0,.6) !important;
    backdrop-filter: blur(6px) !important;
    z-index: 200 !important;
    display: flex; align-items: center; justify-content: center !important;
    padding: 20px !important;
    animation: fadeIn .15s ease !important;
  }
  .modal {
    background: var(--bg2) !important;
    border: 1px solid var(--border2) !important;
    border-radius: var(--radius-lg) !important;
    width: 100%; max-width: 520px !important;
    box-shadow: var(--shadow) !important;
    animation: modalIn .2s cubic-bezier(.34,1.56,.64,1) !important;
  }
  @keyframes modalIn {
    from { opacity:0; transform: scale(.92) translateY(10px); }
    to { opacity:1; transform: none; }
  }
  .modal-header {
    padding: 22px 24px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex; align-items: center; justify-content: space-between !important;
  }
  .modal-title {
    font-family: 'Fraunces', serif !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
  }
  .modal-body { padding: 20px 24px; }
  .modal-footer {
    padding: 16px 24px 20px !important;
    border-top: 1px solid var(--border) !important;
    display: flex; justify-content: flex-end; gap: 10px !important;
  }

  /* ===== FORMS ===== */
  .form-group { margin-bottom: 16px; }
  .form-label {
    display: block !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: var(--text2) !important;
    margin-bottom: 6px !important;
    letter-spacing: .03em !important;
  }
  .form-control {
    width: 100% !important;
    background: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 9px 13px !important;
    color: var(--text) !important;
    font-size: .88rem !important;
    transition: var(--transition) !important;
    appearance: none !important;
  }
  .form-control:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(79,124,255,.15) !important;
  }
  .form-control::placeholder { color: var(--text3); }
  .form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  select.form-control option { background: var(--bg2); }
  textarea.form-control { resize: vertical; min-height: 80px; }

  /* ===== DIVIDER ===== */
  .divider {
    border: none !important;
    border-top: 1px solid var(--border) !important;
    margin: 20px 0 !important;
  }

  /* ===== PROGRESS ===== */
  .progress-bar {
    background: var(--bg3) !important;
    border-radius: 99px !important;
    height: 6px !important;
    overflow: hidden !important;
    margin-top: 6px !important;
  }
  .progress-fill {
    height: 100% !important;
    border-radius: 99px !important;
    transition: width .6s cubic-bezier(.4,0,.2,1) !important;
  }
  .progress-fill.green { background: linear-gradient(90deg, var(--green), var(--green2)); }
  .progress-fill.red { background: linear-gradient(90deg, var(--red), var(--red2)); }
  .progress-fill.amber { background: linear-gradient(90deg, var(--amber), #c8880a); }
  .progress-fill.blue { background: linear-gradient(90deg, var(--accent), var(--accent2)); }

  /* ===== SETTINGS ===== */
  .settings-section {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 22px !important;
    margin-bottom: 18px !important;
  }
  .settings-title {
    font-size: .78rem !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--text3) !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* ===== ALERT ===== */
  .alert {
    display: flex; align-items: flex-start; gap: 10px !important;
    padding: 12px 16px !important;
    border-radius: var(--radius-sm) !important;
    font-size: .84rem !important;
    margin-bottom: 14px !important;
  }
  .alert-info { background: rgba(79,124,255,.1); border: 1px solid rgba(79,124,255,.25); color: #8eb4ff; }
  .alert-warn { background: var(--amber-bg); border: 1px solid #7a5800; color: var(--amber); }
  .alert-success { background: var(--green-bg); border: 1px solid var(--green2); color: var(--green); }
  .alert-error { background: var(--red-bg); border: 1px solid var(--red2); color: var(--red); }

  /* ===== QUICK ACTIONS ===== */
  .quick-actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 28px !important;
  }
  .qa-btn {
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 14px 12px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    color: var(--text2) !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
  }
  .qa-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
  .qa-btn .qa-icon { font-size: 1.4rem; margin-bottom: 6px; display: block; }

  /* ===== RECENT LIST SIDE ===== */
  .side-list { display: flex; flex-direction: column; gap: 0; }
  .side-list-item {
    display: flex; align-items: center; justify-content: space-between !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid rgba(42,49,80,.5) !important;
    font-size: .84rem !important;
  }
  .side-list-item:last-child { border-bottom: none; }
  .side-list-item .sli-name { color: var(--text); font-weight: 500; font-size: .84rem; }
  .side-list-item .sli-sub { color: var(--text3); font-size: .75rem; margin-top: 2px; }
  .side-list-item .sli-val {
    font-family: 'DM Mono', monospace !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    text-align: right !important;
  }

  /* ===== SOLDE BANNER ===== */
  .solde-banner {
    display: flex; align-items: center; justify-content: space-between !important;
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 16px 22px !important;
    margin-bottom: 20px !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
  }
  .solde-banner-item { text-align: center; }
  .solde-banner-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--text3); margin-bottom: 4px; }
  .solde-banner-val { font-family: 'DM Mono', monospace; font-size: 1.25rem; font-weight: 500; }
  .solde-banner-divider { width: 1px; background: var(--border); height: 36px; }

  /* ===== FILTER BAR ===== */
  .filter-bar {
    display: flex; align-items: center; gap: 10px !important;
    flex-wrap: wrap !important;
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
  }
  .filter-bar select, .filter-bar input[type="date"], .filter-bar input[type="text"] {
    background: var(--bg3) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    font-family: inherit !important;
    font-size: .82rem !important;
    padding: 6px 10px !important;
    outline: none !important;
    transition: var(--transition) !important;
    appearance: none !important;
  }
  .filter-bar select:focus, .filter-bar input:focus { border-color: var(--accent); }
  .filter-bar input[type="text"] { min-width: 160px; }
  .filter-bar .filter-sep { color: var(--border2); font-size: 1.2rem; user-select: none; }
  .filter-bar label { font-size: .76rem; color: var(--text3); font-weight: 600; }

  /* ===== SORTABLE TABLE ===== */
  thead th.sortable { cursor: pointer; user-select: none; }
  thead th.sortable:hover { color: var(--text); }
  thead th .sort-arrow { display: inline-block; margin-left: 4px; opacity: .35; font-size: .7rem; }
  thead th.sorted-asc .sort-arrow::after { content: '▲'; opacity: 1; }
  thead th.sorted-desc .sort-arrow::after { content: '▼'; opacity: 1; }
  thead th:not(.sorted-asc):not(.sorted-desc) .sort-arrow::after { content: '↕'; }
  td .tx-actions { display: flex; gap: 6px; }

  /* ===== TOP CATEGORIES ===== */
  .top-cat-item { margin-bottom: 14px; }
  .top-cat-item:last-child { margin-bottom: 0; }
  .top-cat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; font-size: .82rem; }
  .top-cat-name { color: var(--text); font-weight: 500; }
  .top-cat-val { font-family: 'DM Mono', monospace; color: var(--red); font-size: .8rem; }
  .top-cat-bar-bg { background: var(--bg3); border-radius: 99px; height: 5px; overflow: hidden; }
  .top-cat-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--red), var(--red2)); transition: width .5s ease; }

  /* ===== CATEGORY CRUD ===== */
  .cat-crud-row {
    display: flex; align-items: center; gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    background: var(--bg3) !important;
    margin-bottom: 8px !important;
    font-size: .84rem !important;
  }
  .cat-crud-row .cat-label-text { flex: 1; color: var(--text); font-weight: 500; }
  .cat-crud-row .cat-type-badge { font-size: .72rem; }
  .cat-add-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 14px; }
  .cat-add-form .form-group { margin-bottom: 0; flex: 1; min-width: 140px; }

  /* ===== MOYEN DE PAIEMENT ICONS ===== */
  .mp-icon { font-size: .85rem; margin-right: 3px; }

  /* ===== DASHBOARD SIDE PANELS ===== */
  .dash-side-stack { display: flex; flex-direction: column; gap: 20px; }

  /* ===== COMPTA OFFICIELLE — SECTIONS PCG ===== */
  .compta-section-header {
    background: var(--bg3) !important;
    padding: 6px 14px !important;
    font-size: .7rem !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--text3) !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 8px !important;
  }
  .compta-section-subtotal {
    padding: 6px 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: var(--text2) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .compta-grand-total {
    padding: 10px 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    background: var(--bg3) !important;
    border-top: 2px solid var(--border2) !important;
    margin-top: 4px !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
  }
  .compta-row-empty {
    padding: 5px 14px !important;
    font-size: .78rem !important;
    color: var(--text3) !important;
    font-style: italic !important;
  }

  /* ===== TRANSACTIONS PRÉVISIONNELLES ===== */

  /* Ligne prévisionnelle dans le tableau */
  .tx-prev {
    background: rgba(240, 180, 41, 0.06) !important;
    opacity: 0.88 !important;
    border-left: 3px solid var(--amber) !important;
  }
  .tx-prev:hover {
    background: rgba(240, 180, 41, 0.12) !important;
    opacity: 1 !important;
  }
  .tx-prev td {
    color: var(--text2) !important;
  }

  /* Badge "PRÉVU" amber */
  .badge-prev {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 7px !important;
    border-radius: 99px !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    background: var(--amber-bg) !important;
    color: var(--amber) !important;
    border: 1px solid #7a5800 !important;
    margin-right: 4px !important;
    vertical-align: middle !important;
  }

  /* Montant projeté (dashboard, bilan, résultat) */
  .amount-proj {
    font-family: 'DM Mono', monospace !important;
    font-size: .78rem !important;
    color: var(--amber) !important;
    font-style: italic !important;
    margin-top: 3px !important;
    position: relative !important;
    display: inline-block !important;
    cursor: help !important;
  }

  /* Info-bulle au survol de ⏳ / amount-proj */
  .proj-tooltip {
    position: relative !important;
    display: inline-block !important;
    cursor: help !important;
  }
  .proj-tooltip::after {
    content: attr(data-tip) !important;
    position: absolute !important;
    bottom: 130% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--bg3) !important;
    color: var(--text) !important;
    border: 1px solid var(--border2) !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 10px !important;
    font-size: .75rem !important;
    font-style: normal !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity .15s ease !important;
    z-index: 500 !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .proj-tooltip:hover::after {
    opacity: 1 !important;
  }

  /* ===== PRÉVISIONNEL HINT (inline sur les cartes et KPIs projet) ===== */
  .proj-prev-hint {
    color: var(--amber) !important;
    font-size: .78rem !important;
    margin-top: 4px !important;
    padding: 2px 6px !important;
    background: rgba(240, 180, 41, .08) !important;
    border-radius: 6px !important;
    display: inline-block !important;
  }