/* =====================================================================
   NATIVE POLISH — rendu « indiscernable du natif » pour l'app tout-en-un.
   Toutes les règles sont scopées sous .native-app :
     - Active dans la coquille Capacitor (détection window.Capacitor).
     - Active aussi avec ?native=1 (pour PRÉVISUALISER sur localhost).
     - INERTE sur le site web normal (agents sur ordinateur intacts).
   Principe natif : bordures hairline / élévation douce, champs remplis,
   cibles tactiles, plein écran, zones sûres, défilement à inertie.
   On garde la charte AMT (marine #1A3553 / jaune #FDC615, Comfortaa).
   ===================================================================== */

.native-app {
  --np-hairline: rgba(15, 23, 42, .06);        /* filet quasi invisible */
  --np-fill: #eef2f7;                           /* fond des champs (rempli) */
  --np-fill-focus: #ffffff;
  --np-ring: 0 0 0 3px rgba(26, 53, 83, .16);   /* anneau de focus marine */
  --np-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -10px rgba(15, 23, 42, .12);
}

/* --- Confort tactile & défilement (feeling natif) --- */
.native-app * { -webkit-tap-highlight-color: transparent; }
.native-app body {
  overscroll-behavior-y: contain;               /* pas de rebond « page web » */
  background-attachment: scroll !important;     /* évite le jank du fond fixe */
  -webkit-overflow-scrolling: touch;
}

/* --- Zones sûres (encoche haut / barre gestuelle bas) ---
   Le vrai en-tête est .top-bar (sticky; top:0) : sans padding, son contenu
   passe SOUS la barre d'état iPhone. On remplit l'encoche avec son fond blanc. */
.native-app .app-header,
.native-app .top-bar { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.native-app #bottomNav,
.native-app .bottom-nav,
.native-app .mob-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Bandeaux d'alerte tout en haut (rouge #phantomAlertBar / vert
   #clientMsgAlertBar) : quand ils sont AFFICHÉS, c'est EUX qui touchent
   l'encoche -> on leur donne le padding safe-area... */
.native-app #phantomAlertBar,
.native-app #clientMsgAlertBar { padding-top: calc(9px + env(safe-area-inset-top, 0px)) !important; }
/* ...et dans ce cas le .top-bar juste en dessous ne double PAS l'espace
   (`:has()` : supporté par iOS 16+). */
.native-app body:has(#phantomAlertBar:not([style*="none"])) .top-bar,
.native-app body:has(#clientMsgAlertBar:not([style*="none"])) .top-bar { padding-top: 16px; }

/* --- Cartes : la bordure épaisse devient hairline + élévation douce --- */
.native-app .card,
.native-app .glass-card,
.native-app .form-card,
.native-app .filter-fields,
.native-app .date-filter-modern,
.native-app .data-table {
  border: 1px solid var(--np-hairline) !important;
  box-shadow: var(--np-shadow-card) !important;
}

/* --- Champs : remplis, coins doux, focus = anneau (pas un cadre dur) ---
   On EXCLUT les champs à code couleur métier (montantParis = bleu /
   montantAbidjan = orange) pour garder leur signification. Les <select>
   gardent leur flèche native (on ne met pas appearance:none). */
.native-app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([id*="montantParis"]):not([id*="montantAbidjan"]),
.native-app select,
.native-app textarea {
  background: var(--np-fill) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  min-height: 46px !important;
  font-size: 16px !important;                    /* 16px = pas de zoom auto iOS */
  padding: 11px 13px !important;
  transition: box-shadow .15s ease, background .15s ease;
}
.native-app textarea { min-height: 84px !important; }
.native-app input:not([id*="montantParis"]):not([id*="montantAbidjan"]):focus,
.native-app select:focus,
.native-app textarea:focus {
  background: var(--np-fill-focus) !important;
  border-color: transparent !important;
  box-shadow: var(--np-ring) !important;
  outline: none !important;
}

/* --- Tableaux : pas de boîte extérieure, filets fins entre lignes --- */
.native-app table { border: none !important; }
.native-app th,
.native-app td { border-bottom: 1px solid var(--np-hairline) !important; }

/* --- Boutons : cibles tactiles + coins cohérents --- */
.native-app button,
.native-app .btn,
.native-app .amt-btn {
  min-height: 46px;
  border-radius: 12px;
}

/* --- Plein écran sur mobile : contenu quasi bord à bord --- */
@media (max-width: 768px) {
  .native-app body { padding-left: 0 !important; padding-right: 0 !important; }
  .native-app .content-container,
  .native-app #contentContainer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* =====================================================================
   AFFINAGE PAR ÉCRAN — 1) TABLEAU DE BORD
   Cartes KPI déjà en dégradé : on enlève ce qui « fait web » (survol qui
   soulève, ombres épaisses, bordures 2px) et on ajoute le retour tactile.
   ===================================================================== */

/* Ombre plus fine + PAS de survol au tactile, mais un retour « appui » natif. */
.native-app .total-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 24px -14px rgba(15, 23, 42, .30) !important;
}
.native-app .total-card:hover { transform: none !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 24px -14px rgba(15, 23, 42, .30) !important; }
.native-app .total-card:active { transform: scale(.985) !important; }

/* Bordures épaisses -> élévation / anneau discret (même signal, look natif). */
.native-app #card-caisse-especes {
  border: none !important;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, .35), 0 10px 24px -14px rgba(15, 23, 42, .3) !important;
  transform: none !important;
}
.native-app #atypicalModesWrap { border: 1px solid rgba(245, 158, 11, .40) !important; }

/* Puce d'icône de titre de section : filet quasi invisible. */
.native-app .kpi-section-title span.icon-bg { border-color: var(--np-hairline) !important; }

/* NB : le masquage du ☰ de l'en-tête est désormais géré globalement sur mobile
   (css/style.css, media max-width:768px), car il s'applique aussi au web mobile
   — pas seulement à l'app. */