* { box-sizing: border-box; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; background: #F9FAFB; color: #111827; transition: background .2s, color .2s; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }

/* ── MODE SOMBRE ─────────────────────────────────────────────────────────── */
body.dark { background: #111827; color: #F9FAFB; }

body.dark .topbar { background: #1F2937; border-color: #374151; }
body.dark .nav-link { color: #9CA3AF; }
body.dark .nav-link:hover { background: #374151; color: #F9FAFB; }
body.dark .nav-link.active { background: #1E3A5F; color: #60A5FA; }

body.dark .stat-card { background: #1F2937; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.3); }
body.dark .apt-card  { background: #1F2937; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.3); }

body.dark .data-table thead th { color: #9CA3AF; border-color: #374151; background: #1F2937; }
body.dark .data-table tbody tr { border-color: #374151; }
body.dark .data-table tbody td { color: #F3F4F6; }

body.dark .btn-ghost { background: transparent; color: #9CA3AF; border-color: #374151; }
body.dark .btn-ghost:hover { background: #374151; }
body.dark .logout-btn:hover { color: #F9FAFB !important; }

body.dark .structure-select { background-color: #374151; color: #F9FAFB; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; }
body.dark .year-sel { background: #1F2937; border-color: #374151; }
body.dark .year-sel button { color: #9CA3AF; }
body.dark .year-sel button:hover { background: #374151; color: #F9FAFB; }
body.dark .year-sel select { color: #F9FAFB; }

body.dark input, body.dark select, body.dark textarea {
  background: #374151; color: #F9FAFB; border-color: #4B5563;
}
body.dark .bg-white { background: #1F2937 !important; }
body.dark .bg-gray-50, body.dark .bg-gray-50\/40 { background: #111827 !important; }
body.dark .text-gray-900 { color: #F9FAFB !important; }
body.dark .text-gray-800 { color: #F3F4F6 !important; }
body.dark .text-gray-700 { color: #E5E7EB !important; }
body.dark .text-gray-600 { color: #D1D5DB !important; }
body.dark .text-gray-500 { color: #9CA3AF !important; }
body.dark .text-gray-400 { color: #6B7280 !important; }
body.dark .text-gray-300 { color: #4B5563 !important; }
body.dark .border-gray-100, body.dark .border-gray-200 { border-color: #374151 !important; }
body.dark .border-b { border-color: #374151; }
body.dark [style*="background:#F9FAFB"] { background: #1F2937 !important; }
body.dark [style*="background:#FAFAFA"] { background: #1F2937 !important; }
body.dark [style*="background:#EFF6FF"] { background: #1E3A5F !important; }
body.dark [style*="background:#F0F4FF"] { background: #1a2f4e !important; }
body.dark [style*="background:#F8FAFF"] { background: #111827 !important; }

/* Topbar */
.topbar { background: #fff; border-bottom: 1px solid #E5E7EB; }

/* Nav links */
.nav-link { color:#6B7280; font-size:.875rem; font-weight:500; padding:.375rem .75rem; border-radius:.5rem; transition:background .15s,color .15s; white-space:nowrap; }
.nav-link:hover { background:#F3F4F6; color:#111827; }
.nav-link.active { background:#EFF6FF; color:#2563EB; }

/* Menu mobile : liens en pleine largeur, empilés verticalement */
.mobile-menu .nav-link { display: block; width: 100%; text-align: left; padding: .625rem .875rem; }
body.dark .mobile-menu { border-color: #374151 !important; }

/* Chart wrapper (mobile override is in @media block below) */
.chart-wrap { height: 180px; }

/* Cards */
.stat-card { background:#fff; border-radius:1rem; box-shadow:0 2px 12px 0 rgba(0,0,0,0.07); transition:box-shadow .2s, transform .2s; }
.stat-card:hover { box-shadow:0 6px 24px 0 rgba(0,0,0,0.11); transform:translateY(-2px); }
.apt-card { background:#fff; border-radius:1rem; box-shadow:0 2px 12px 0 rgba(0,0,0,0.07); transition:box-shadow .2s,transform .2s; cursor:pointer; }
.apt-card:hover { box-shadow:0 4px 20px 0 rgba(0,0,0,0.11); transform:translateY(-2px); }

/* Icon bubble */
.icon-bubble { width:2.75rem; height:2.75rem; border-radius:.75rem; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:600; padding:.2rem .65rem; border-radius:9999px; }
.badge-green  { background:#D1FAE5; color:#065F46; }
.badge-red    { background:#FEE2E2; color:#991B1B; }
.badge-orange { background:#FFEDD5; color:#9A3412; }
.badge-yellow { background:#FEF9C3; color:#854D0E; }
.badge-blue   { background:#DBEAFE; color:#1E40AF; }
.badge-gray   { background:#F3F4F6; color:#374151; }

/* Table */
.data-table { border-collapse:collapse; width:100%; }
.data-table thead th { font-size:.75rem; font-weight:600; color:#9CA3AF; text-transform:uppercase; letter-spacing:.05em; padding:.75rem 1rem; text-align:left; border-bottom:1px solid #F3F4F6; }
.data-table tbody tr { border-bottom:1px solid #F9FAFB; }
.data-table tbody tr:last-child { border-bottom:none; }
.data-table tbody tr:hover { background:#F9FAFB; }
.data-table tbody td { padding:.875rem 1rem; font-size:.875rem; color:#374151; }

/* ── MODALES DARK ────────────────────────────────────────────────────────── */
body.dark .modal-box { background: #1F2937 !important; }
body.dark .modal-header { border-color: #374151 !important; }
body.dark .modal-body { background: #1F2937 !important; }
body.dark .modal-footer { background: #111827 !important; border-color: #374151 !important; }
body.dark .modal-row { border-color: #374151 !important; }
body.dark .modal-input {
  background: #374151 !important; color: #F9FAFB !important;
  border-color: #4B5563 !important;
}
body.dark .modal-section { background: #374151 !important; }
body.dark .modal-box label { color: #D1D5DB !important; }
body.dark .modal-box h3 { color: #F9FAFB !important; }
body.dark .modal-box p { color: #9CA3AF !important; }
body.dark .modal-box .bg-gray-50 { background: #374151 !important; }
body.dark .modal-box select,
body.dark .modal-box input,
body.dark .modal-box textarea { background: #374151 !important; color: #F9FAFB !important; border-color: #4B5563 !important; }

/* Toast dark */
body.dark #toast-container > div { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }

/* ── HOVER SETTINGS DARK ─────────────────────────────────────────────────── */
.settings-row { background: #F9FAFB; transition: background .15s; cursor: pointer; }
body.dark .settings-row { background: #374151; }
.settings-row:hover { background: #BFDBFE; }
body.dark .settings-row:hover { background: #1E3A5F; }

/* Sortable column headers */
.sortable { cursor:pointer; user-select:none; }
.sortable:hover { color:#2563EB; }
.sort-arrow { display:inline-block; margin-left:2px; opacity:.4; }
.sort-arrow.active { opacity:1; color:#2563EB; }

/* Buttons */
.btn-primary { background:#2563EB; color:#fff; font-size:.875rem; font-weight:600; padding:.5rem 1.25rem; border-radius:.625rem; transition:background .15s; display:inline-flex; align-items:center; gap:.4rem; }
.btn-primary:hover { background:#1D4ED8; }
.btn-ghost { background:transparent; color:#6B7280; font-size:.875rem; font-weight:500; padding:.5rem 1rem; border-radius:.625rem; border:1px solid #E5E7EB; transition:background .15s; display:inline-flex; align-items:center; gap:.4rem; }
.btn-ghost:hover { background:#F3F4F6; }
.btn-danger { background:#DC2626; color:#fff; font-size:.875rem; font-weight:600; padding:.5rem 1.25rem; border-radius:.625rem; transition:background .15s; display:inline-flex; align-items:center; gap:.4rem; }
.btn-danger:hover { background:#B91C1C; }

/* Bouton de plan (abonnement) : neutre au repos, bleu au survol, pour que
   l'utilisateur voie clairement sur quel bouton il s'apprête à cliquer. */
.btn-plan { background:#fff; color:#374151; font-size:.875rem; font-weight:600; padding:.5rem 1.25rem; border-radius:.625rem; border:1px solid #E5E7EB; transition:background .15s, color .15s, border-color .15s; display:inline-flex; align-items:center; gap:.4rem; }
.btn-plan:hover { background:#2563EB; color:#fff; border-color:#2563EB; }
body.dark .btn-plan { background:#1F2937; color:#F9FAFB; border-color:#374151; }
body.dark .btn-plan:hover { background:#2563EB; color:#fff; border-color:#2563EB; }

/* Filter pills */
.filter-pill { font-size:.75rem; font-weight:600; padding:.25rem .75rem; border-radius:9999px; border:1px solid #E5E7EB; cursor:pointer; transition:background .15s, color .15s; }
.filter-pill:hover { background:#EFF6FF; color:#2563EB; border-color:#BFDBFE; }
.filter-pill.active { background:#2563EB; color:#fff; border-color:#2563EB; }

/* Structure select */
.structure-select { font-size:.875rem; font-weight:500; color:#374151; background:#F3F4F6; border:none; border-radius:.625rem; padding:.4rem 2rem .4rem .75rem; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; cursor:pointer; }

/* Year selector */
.year-sel { display:flex; align-items:center; gap:.25rem; background:#fff; border:1px solid #E5E7EB; border-radius:.625rem; padding:.25rem .25rem; }
.year-sel button { padding:.25rem .6rem; color:#6B7280; font-weight:700; border-radius:.375rem; transition:background .15s; }
.year-sel button:hover { background:#F3F4F6; color:#111827; }
.year-sel select { font-size:.875rem; font-weight:500; color:#374151; background:transparent; outline:none; cursor:pointer; padding:.2rem .25rem; }

/* ── MOBILE / PWA ─────────────────────────────────────────────────────────── */

/* Safe area pour iPhone (encoche / Dynamic Island) */
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.topbar { padding-top: env(safe-area-inset-top); }

/* Tap targets plus grands sur mobile */
@media (max-width: 640px) {
  .nav-link { padding: .5rem .875rem; font-size: .9rem; }
  .btn-primary, .btn-ghost, .btn-danger { padding: .625rem 1rem; font-size: .875rem; }
  .stat-card { border-radius: .875rem; }
  .apt-card  { border-radius: .875rem; }

  /* Header page : titre + actions en colonne sur mobile */
  .page-header-row { flex-direction: column; align-items: flex-start; gap: .75rem; }

  /* Stat cards : 2 colonnes sur mobile, pas 4 */
  .stat-cards-grid { grid-template-columns: repeat(2, 1fr); }

  /* Dashboard right panel : passe en colonne pleine largeur */
  .dashboard-grid { grid-template-columns: 1fr; }

  /* Graphiques : hauteur réduite sur mobile */
  .chart-wrap { height: 160px !important; }

  /* Tableau : scroll horizontal avec indicateur visuel */
  .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll-wrap::after {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(to right, transparent, #BFDBFE);
    margin-top: -2px;
  }

  /* Modale plein écran sur mobile */
  .modal-box { border-radius: 1.25rem 1.25rem 0 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; position: fixed !important; bottom: 0 !important; left: 0 !important; }

  /* Navigation mobile hamburger menu items : plus grands */
  .mobile-menu-item { padding: .75rem 1rem; font-size: .9375rem; }

  /* Filtre pills : scroll horizontal */
  .filter-pills-row { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; padding-bottom: 2px; }
  .filter-pill { white-space: nowrap; flex-shrink: 0; }

  /* Bas de tableau : 2 colonnes sur mobile */
  .table-footer-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Cibles tactiles dans les tableaux : checkbox + boutons d'action */
  .data-table input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 4px;
  }
  .data-table td button[onclick^="openEntryModal"],
  .data-table td button[onclick^="duplicateEntry"],
  .data-table td button[onclick^="askDelete"],
  .data-table td button[onclick^="printQuittance"],
  .data-table td button[onclick^="saveQuittance"] {
    padding: 8px 6px !important;
    font-size: 1.05rem;
    min-width: 32px;
    min-height: 32px;
  }

  /* Topbar mobile : limiter le sélecteur de structure et tronquer les longs noms */
  .structure-select { max-width: 60vw; }
  .mobile-menu-item, [class*="nav-link"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* Évite le zoom au focus sur les inputs iOS */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}