/**
 * acc-mobile.css — Comptabilité Mobile Premium
 * ProductiveApp — Optimisé pour iOS & Android
 * Breakpoints: 768px (tablet), 480px (phone), 360px (small phone)
 */

/* ================================================================
   1. VARIABLES MOBILE
   ================================================================ */
:root {
  --acc-fab-size: 56px;
  --acc-tab-h: 52px;
  --acc-bottom-safe: env(safe-area-inset-bottom, 0px);
  --acc-touch-target: 44px;
  --acc-card-radius: 14px;
  --acc-sheet-radius: 20px;
}

/* ================================================================
   2. TABS — SCROLLABLE HORIZONTAL SUR MOBILE
   ================================================================ */
@media (max-width: 768px) {
  .acc-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 12px;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .acc-tabs::-webkit-scrollbar { display: none; }

  .acc-tab {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    padding: 10px 14px !important;
    font-size: .78rem !important;
    min-width: auto !important;
    white-space: nowrap;
    border-radius: 8px !important;
    height: var(--acc-tab-h);
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .acc-tab svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
  }

  /* Indicateur onglet actif — bottom line */
  .acc-tab.active {
    background: rgba(var(--accent-rgb, 212,175,55), 0.15) !important;
    border-bottom: 2px solid var(--accent-color, #d4af37) !important;
  }
}

/* ================================================================
   3. TABLEAU DE BORD — KPI CARDS MOBILE
   ================================================================ */
@media (max-width: 768px) {
  .acc-kpi-premium-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .acc-kpi-premium-card {
    padding: 14px !important;
    border-radius: var(--acc-card-radius) !important;
  }

  .acc-kpi-main-value {
    font-size: 1.4rem !important;
  }

  .acc-charts-row,
  .acc-chart-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .acc-chart-premium {
    min-height: 200px !important;
    padding: 14px !important;
  }

  .acc-top-cats {
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  .acc-kpi-premium-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .acc-kpi-premium-card {
    padding: 12px 10px !important;
  }

  .acc-kpi-main-value {
    font-size: 1.2rem !important;
  }

  .acc-kpi-label {
    font-size: .7rem !important;
  }
}

/* ================================================================
   4. FACTURES — CARD LAYOUT MOBILE (remplace le tableau)
   ================================================================ */
@media (max-width: 768px) {
  /* Masquer l'en-tête de colonne table */
  .acc-inv-table-prem thead {
    display: none !important;
  }

  .acc-inv-table-prem {
    border: none !important;
    background: transparent !important;
  }

  .acc-inv-table-prem tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  /* Chaque ligne → carte mobile */
  .acc-inv-table-prem tbody tr {
    display: block !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: var(--acc-card-radius) !important;
    padding: 14px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform .15s, box-shadow .15s !important;
  }

  .acc-inv-table-prem tbody tr:active {
    transform: scale(0.98);
  }

  /* Stripe colorée selon statut */
  .acc-inv-table-prem tbody tr::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    border-radius: 2px 0 0 2px;
    background: var(--fin-info, #0095ff);
  }

  .acc-inv-table-prem tbody tr.status-paid::before { background: var(--fin-success, #00d68f); }
  .acc-inv-table-prem tbody tr.status-overdue::before { background: var(--fin-danger, #ff3d71); }
  .acc-inv-table-prem tbody tr.status-draft::before { background: var(--fin-muted, #8f9bb3); }

  /* Cellules → layout flex card */
  .acc-inv-table-prem td {
    display: block !important;
    border: none !important;
    padding: 2px 0 !important;
    font-size: .85rem !important;
  }

  /* Masquer colonnes secondaires */
  .acc-inv-table-prem td:nth-child(3),
  .acc-inv-table-prem td:nth-child(4) {
    display: none !important;
  }

  /* Client — principal */
  .acc-inv-table-prem td.acc-inv-client-cell {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
  }

  /* Montant + statut en ligne */
  .acc-inv-table-prem td:has(.acc-amount-prem),
  .acc-inv-table-prem td:has(.acc-status-prem) {
    display: inline-block !important;
    margin-right: 10px !important;
  }

  /* Boutons action — row mobile */
  .acc-inv-table-prem td:last-child {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
  }

  .acc-inv-table-prem td:last-child .acc-action-btn {
    flex: 1 !important;
    min-height: var(--acc-touch-target) !important;
    border-radius: 8px !important;
    font-size: .8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }
}

/* ================================================================
   5. FAB — BOUTON SCAN RAPIDE (Floating Action Button)
   ================================================================ */
.acc-fab-scan {
  display: none; /* Desktop: masqué */
}

@media (max-width: 768px) {
  .acc-fab-scan {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(76px + var(--acc-bottom-safe));
    right: 20px;
    width: var(--acc-fab-size);
    height: var(--acc-fab-size);
    border-radius: 50%;
    background: linear-gradient(135deg, #6200ea 0%, #d4af37 100%);
    border: none;
    cursor: pointer;
    z-index: 1500;
    box-shadow: 0 4px 20px rgba(98,0,234,0.45), 0 2px 8px rgba(0,0,0,0.3);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    -webkit-tap-highlight-color: transparent;
  }

  .acc-fab-scan:active {
    transform: scale(0.9);
    box-shadow: 0 2px 10px rgba(98,0,234,0.3);
  }

  .acc-fab-scan svg {
    width: 24px;
    height: 24px;
    color: white;
  }

  /* Pulse animation */
  .acc-fab-scan::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(98,0,234,0.4);
    animation: fabPulse 2s ease-out infinite;
  }

  @keyframes fabPulse {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
  }

  /* Label au-dessus du FAB */
  .acc-fab-scan::before {
    content: 'Scanner';
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s;
  }

  .acc-fab-scan:hover::before {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================================
   6. SCANNER MOBILE — MODE PLEIN ÉCRAN
   ================================================================ */
@media (max-width: 768px) {
  .acc-scanner {
    padding: 0 !important;
  }

  .acc-scanner-header {
    padding: 14px 16px !important;
    position: sticky;
    top: var(--acc-tab-h);
    z-index: 90;
    background: rgba(10,10,15,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .acc-scanner-header h2 {
    font-size: 1rem !important;
  }

  /* Zone scan — plein largeur */
  .acc-scan-zone,
  .acc-scan-dropzone {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Dropzone — hauteur plein écran mobile */
  .acc-scan-dropzone {
    min-height: 55vw !important;
    padding: 24px !important;
  }

  /* Icône caméra plus grande */
  .acc-scan-camera-btn svg {
    width: 72px !important;
    height: 72px !important;
    opacity: .9;
  }

  .acc-scan-text {
    font-size: 1.1rem !important;
    margin-top: 12px !important;
  }

  /* Boutons analyze + cancel — pleine largeur */
  .acc-preview-actions {
    flex-direction: column !important;
    padding: 16px !important;
    gap: 10px !important;
  }

  .acc-preview-actions button {
    width: 100% !important;
    min-height: var(--acc-touch-target) !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
  }

  /* Résultats extraction — mobile optimisé */
  .acc-extraction .acc-form-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .acc-extraction .acc-form-row.thirds {
    grid-template-columns: 1fr 1fr !important;
  }

  .acc-form-group label {
    font-size: .8rem !important;
  }

  .acc-form-group input,
  .acc-form-group select,
  .acc-form-group textarea {
    font-size: 16px !important; /* Évite le zoom iOS sur focus */
    min-height: var(--acc-touch-target) !important;
    border-radius: 10px !important;
  }

  .acc-form-actions {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 16px !important;
  }

  .acc-form-actions button {
    width: 100% !important;
    min-height: var(--acc-touch-target) !important;
    font-size: .95rem !important;
    border-radius: 12px !important;
  }
}

/* ================================================================
   7. SCANNER FULLSCREEN MODE (activé JS)
   ================================================================ */
.acc-scanner-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  background: #000 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.acc-scanner-fullscreen .acc-scanner-header {
  top: 0 !important;
  padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
}

.acc-scanner-fullscreen .acc-scan-dropzone {
  min-height: calc(100vw * 0.75) !important;
  background: #111 !important;
}

/* Bouton fermer fullscreen */
.acc-fullscreen-close {
  display: none;
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

@media (max-width: 768px) {
  .acc-scanner-fullscreen .acc-fullscreen-close {
    display: flex;
  }
}

/* ================================================================
   8. PANEL MAHAYAWEN — MOBILE OPTIMISÉ
   ================================================================ */
@media (max-width: 768px) {
  .acc-mahayawen-panel {
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 12px !important;
  }

  .acc-mah-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .acc-mah-item {
    padding: 8px 10px !important;
  }

  .acc-mah-value {
    font-size: .82rem !important;
  }

  /* Bouton export — pleine largeur */
  .acc-btn-success {
    width: 100% !important;
    justify-content: center !important;
    min-height: var(--acc-touch-target) !important;
    font-size: .9rem !important;
    border-radius: 12px !important;
    margin-top: 8px !important;
  }
}

/* ================================================================
   9. NOTES DE FRAIS — MOBILE
   ================================================================ */
@media (max-width: 768px) {
  .acc-expense-list .acc-expense-card {
    padding: 14px !important;
    border-radius: var(--acc-card-radius) !important;
  }

  .acc-filter-bar,
  .acc-filters {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }

  .acc-filter-bar select,
  .acc-filter-bar input {
    font-size: 16px !important; /* Pas de zoom iOS */
    min-height: var(--acc-touch-target) !important;
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 130px !important;
  }
}

/* ================================================================
   10. BOTTOM SHEET (Action rapides)
   ================================================================ */
.acc-bottom-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 5000;
  opacity: 0;
  transition: opacity .2s;
}

.acc-bottom-sheet-overlay.visible {
  display: block;
  opacity: 1;
}

.acc-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface-color, #1a1a2e);
  border-radius: var(--acc-sheet-radius) var(--acc-sheet-radius) 0 0;
  padding: 16px;
  padding-bottom: calc(16px + var(--acc-bottom-safe));
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 5001;
  max-height: 80vh;
  overflow-y: auto;
}

.acc-bottom-sheet-overlay.visible .acc-bottom-sheet {
  transform: translateY(0);
}

.acc-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
  margin: 0 auto 16px;
}

.acc-sheet-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin-bottom: 14px;
  text-align: center;
}

.acc-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acc-sheet-action-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  color: var(--text-primary, #fff);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  min-height: var(--acc-touch-target);
  width: 100%;
  text-align: left;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}

.acc-sheet-action-btn:active {
  background: rgba(255,255,255,0.09);
}

.acc-sheet-action-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: .85;
}

.acc-sheet-action-btn.danger {
  color: var(--fin-danger, #ff3d71);
  border-color: rgba(255,61,113,0.2);
}

/* ================================================================
   11. SWIPE TO ACTION — Indicateurs visuels
   ================================================================ */
@media (max-width: 768px) {
  .acc-swipe-row {
    position: relative;
    overflow: hidden;
    border-radius: var(--acc-card-radius);
  }

  .acc-swipe-reveal-left,
  .acc-swipe-reveal-right {
    position: absolute;
    top: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    gap: 6px;
    flex-direction: column;
  }

  .acc-swipe-reveal-left {
    left: 0;
    background: var(--fin-success, #00d68f);
    border-radius: var(--acc-card-radius) 0 0 var(--acc-card-radius);
  }

  .acc-swipe-reveal-right {
    right: 0;
    background: var(--fin-danger, #ff3d71);
    border-radius: 0 var(--acc-card-radius) var(--acc-card-radius) 0;
  }

  .acc-swipe-content {
    position: relative;
    transition: transform .2s cubic-bezier(0.32, 0.72, 0, 1);
    background: rgba(255,255,255,0.04);
    border-radius: var(--acc-card-radius);
    will-change: transform;
    z-index: 1;
  }
}

/* ================================================================
   12. VOICE INPUT BUTTON (Mahayawen dictée)
   ================================================================ */
.acc-voice-btn {
  display: none;
}

@media (max-width: 768px) {
  .acc-voice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(103,58,183,0.2);
    border: 1px solid rgba(103,58,183,0.35);
    color: #b39ddb;
    cursor: pointer;
    transition: background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }

  .acc-voice-btn:active {
    background: rgba(103,58,183,0.4);
    transform: scale(1.1);
  }

  .acc-voice-btn.recording {
    background: rgba(255,61,113,0.2) !important;
    border-color: rgba(255,61,113,0.5) !important;
    color: #ff3d71 !important;
    animation: voicePulse .8s ease-in-out infinite alternate;
  }

  @keyframes voicePulse {
    from { box-shadow: 0 0 0 0 rgba(255,61,113,0.4); }
    to   { box-shadow: 0 0 0 10px rgba(255,61,113,0); }
  }
}

/* ================================================================
   13. RESPONSIVE HEADER COMPTABILITÉ
   ================================================================ */
@media (max-width: 768px) {
  .acc-header {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .acc-header h1 {
    font-size: 1.2rem !important;
    margin: 0 !important;
  }

  .acc-header-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .acc-header-actions .acc-btn {
    flex: 1 !important;
    min-height: var(--acc-touch-target) !important;
    font-size: .82rem !important;
    justify-content: center !important;
  }
}

/* ================================================================
   14. MODAL MOBILE — FULL SCREEN
   ================================================================ */
@media (max-width: 768px) {
  .acc-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  .acc-modal-box,
  .acc-mb {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--acc-sheet-radius) var(--acc-sheet-radius) 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding-bottom: calc(20px + var(--acc-bottom-safe)) !important;
  }

  .acc-modal-title {
    font-size: 1.1rem !important;
    padding: 16px 18px 14px !important;
  }
}

/* ================================================================
   15. PAGINATION MOBILE
   ================================================================ */
@media (max-width: 480px) {
  .acc-pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: .8rem !important;
  }

  .acc-pagination button {
    min-height: var(--acc-touch-target) !important;
    min-width: var(--acc-touch-target) !important;
    border-radius: 8px !important;
  }
}

/* ================================================================
   16. WRAPPER COMPTABILITÉ — ESPACE BOTTOM NAV
   ================================================================ */
@media (max-width: 768px) {
  .acc-wrapper,
  #view-accounting {
    padding-bottom: calc(80px + var(--acc-bottom-safe)) !important;
  }
}

/* ================================================================
   17. SCANNER — PREVIEW IMAGE MOBILE
   ================================================================ */
@media (max-width: 768px) {
  .acc-preview-zone {
    flex-direction: column !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  .acc-preview-img-container {
    width: 100% !important;
    max-height: 50vh !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .acc-preview-img-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  /* Loading zone */
  .acc-scan-loading {
    min-height: 200px !important;
    gap: 16px !important;
  }

  .acc-spinner-large {
    width: 52px !important;
    height: 52px !important;
  }

  /* Résultat zone */
  .acc-result-zone {
    padding: 0 !important;
  }

  .acc-finscan-result {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  .acc-finscan-result-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px 16px !important;
  }

  /* Batch mode */
  .acc-batch-zone {
    padding: 12px !important;
  }

  .acc-batch-item {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  #acc-batch-process {
    width: 100% !important;
    min-height: var(--acc-touch-target) !important;
    border-radius: 12px !important;
    margin-top: 12px !important;
    font-size: .95rem !important;
  }
}

/* ================================================================
   18. BANQUE + TVA — MOBILE
   ================================================================ */
@media (max-width: 768px) {
  /* Transactions banque → cartes */
  .acc-bank-list .acc-bank-item,
  .acc-tx-row {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* TVA — résumé compact */
  .acc-tva-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   19. CONTACTS — LISTE MOBILE
   ================================================================ */
@media (max-width: 768px) {
  .acc-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
}

/* ================================================================
   20. QUICK ADD — Barre saisie rapide fixe en bas (mobile)
   ================================================================ */
.acc-quick-add-bar {
  display: none;
}

@media (max-width: 768px) {
  /* Afficher uniquement si onglet factures actif */
  .acc-quick-add-bar {
    position: fixed;
    bottom: calc(64px + var(--acc-bottom-safe));
    left: 0; right: 0;
    padding: 10px 16px;
    background: rgba(10,10,20,0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,0.07);
    display: none; /* Contrôlé par JS */
    gap: 8px;
    z-index: 1400;
    align-items: center;
  }

  .acc-quick-add-bar.visible {
    display: flex !important;
  }

  .acc-quick-add-input {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-primary, #fff);
    font-size: 16px; /* No zoom iOS */
    outline: none;
  }

  .acc-quick-add-submit {
    min-width: var(--acc-touch-target);
    min-height: var(--acc-touch-target);
    border-radius: 10px;
    background: var(--accent-color, #d4af37);
    border: none;
    color: #000;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
}