/* ==========================================================================
   Version iPhone de VintedFlow.
   S'applique quand <html data-device="phone"> : iPhone / Android (même en paysage)
   ou fenêtre étroite sur Mac. La détection est faite dans index.html.
   ========================================================================== */

/* Onglets du bas et feuille « Plus » : cachés sur Mac */
.tabbar, .more-wrap { display: none; }

html[data-device="phone"] {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 64px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
html[data-device="phone"] body { font-size: 15px; overscroll-behavior-y: none; }

/* -------- structure : plus de menu latéral, onglets en bas -------- */
html[data-device="phone"] .shell {
  display: block; padding: calc(10px + var(--safe-t)) 14px calc(var(--tabbar-h) + 28px + var(--safe-b)); min-height: 100dvh;
}
html[data-device="phone"] .rail { display: none; }
html[data-device="phone"] .main { gap: 14px; padding-bottom: 0; }
html[data-device="phone"] .view { gap: 14px; }

html[data-device="phone"] .tabbar {
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(8px + var(--safe-b) * .55);
  height: var(--tabbar-h); padding: 6px; border-radius: 26px;
}
html[data-device="phone"] .tabbar > a, html[data-device="phone"] .tabbar > button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: transparent; color: var(--ink-3); font: 600 10.5px/1 var(--text); letter-spacing: -.01em;
  border-radius: 20px; padding: 0; cursor: pointer; text-decoration: none; min-width: 0;
  transition: color .2s var(--ease), background .2s var(--ease);
}
html[data-device="phone"] .tabbar svg { width: 23px; height: 23px; }
html[data-device="phone"] .tabbar span:not(.count) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-device="phone"] .tabbar .active, html[data-device="phone"] .tabbar .open {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}
html[data-device="phone"] .tabbar .active svg { color: var(--ice); filter: drop-shadow(0 0 8px rgba(143,211,255,.55)); }
html[data-device="phone"] .tabbar .count {
  position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--coral); color: #2b0710; font: 700 10.5px/18px var(--text); text-align: center;
  box-shadow: 0 0 0 2px rgba(6,16,46,.8);
}
html[data-device="phone"] .tabbar .count[hidden] { display: none; }

/* Feuille « Plus » qui monte du bas */
html[data-device="phone"] .more-wrap {
  display: block; position: fixed; inset: 0; z-index: 44; background: rgba(2,6,20,.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fade .2s both;
}
html[data-device="phone"] .more {
  position: absolute; left: 10px; right: 10px; bottom: calc(var(--tabbar-h) + 16px + var(--safe-b) * .55);
  max-height: calc(100dvh - var(--tabbar-h) - 40px - var(--safe-t) - var(--safe-b)); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 14px 14px; border-radius: 26px; animation: moreIn .32s var(--ease) both;
}
html[data-device="phone"] .more-wrap.leave { animation: fadeOut .22s both; }
html[data-device="phone"] .more-wrap.leave .more { animation: moreOut .22s ease both; }
@keyframes moreIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes moreOut { to { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes fadeOut { to { opacity: 0; } }
html[data-device="phone"] .more-grip { width: 38px; height: 5px; border-radius: 9px; background: rgba(255,255,255,.25); margin: 0 auto 12px; }
html[data-device="phone"] .more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html[data-device="phone"] .more-grid a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px 12px;
  border-radius: 18px; background: rgba(2,8,28,.3); border: 1px solid rgba(255,255,255,.08);
  color: var(--ink-2); font-size: 12.5px; font-weight: 600; text-align: center; text-decoration: none; line-height: 1.2;
}
html[data-device="phone"] .more-grid a svg { width: 24px; height: 24px; color: var(--ice); }
html[data-device="phone"] .more-grid a.active { color: var(--ink); border-color: rgba(143,211,255,.45); background: rgba(143,211,255,.12); }
html[data-device="phone"] .more-grid a:active { transform: scale(.96); }
html[data-device="phone"] .more-grid .count {
  position: absolute; top: 8px; right: 10px; min-width: 20px; height: 20px; border-radius: 99px; padding: 0 6px;
  background: var(--coral); color: #2b0710; font: 700 11px/20px var(--text);
}
html[data-device="phone"] .more-grid .count[hidden] { display: none; }
html[data-device="phone"] .more-status { display: grid; gap: 8px; margin: 12px 0 8px; }
html[data-device="phone"] .more-status .disk-card { display: block; color: inherit; text-decoration: none; }
html[data-device="phone"] .more .btn[data-logout] { width: 100%; justify-content: center; }

/* -------- en-tête de page -------- */
html[data-device="phone"] .topbar { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 4px; }
html[data-device="phone"] .topbar h1 { font-size: 30px; }
html[data-device="phone"] .topbar .sub { font-size: 13.5px; }
html[data-device="phone"] .topbar .actions { margin: 0; width: 100%; gap: 8px; flex-wrap: wrap; }
html[data-device="phone"] .topbar .actions .btn { height: 38px; font-size: 14px; }

/* -------- éléments communs -------- */
html[data-device="phone"] .panel { padding: 16px; }
html[data-device="phone"] .glass { border-radius: 20px; }
html[data-device="phone"] .panel-head { flex-wrap: wrap; margin-bottom: 12px; }
html[data-device="phone"] .panel-head h2 { font-size: 18px; }
html[data-device="phone"] .panel-head .end { margin-left: 0; width: 100%; flex-wrap: wrap; }
/* iOS zoome sur les champs en dessous de 16 px : on l'en empêche */
html[data-device="phone"] .input, html[data-device="phone"] select.input, html[data-device="phone"] textarea.input,
html[data-device="phone"] input, html[data-device="phone"] select, html[data-device="phone"] textarea { font-size: 16px; }
html[data-device="phone"] .btn { min-height: 40px; }
html[data-device="phone"] .btn.sm { min-height: 34px; }
html[data-device="phone"] .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
html[data-device="phone"] .segmented::-webkit-scrollbar { display: none; }
html[data-device="phone"] .segmented button { flex: none; height: 34px; padding: 0 12px; }
html[data-device="phone"] .toolbar { gap: 10px; }
html[data-device="phone"] .toolbar .search, html[data-device="phone"] .search .input { flex: 1 1 100%; min-width: 0; width: 100%; }
html[data-device="phone"] .toolbar > select.input { flex: 1 1 auto; }
html[data-device="phone"] .notice { flex-wrap: wrap; }
html[data-device="phone"] .notice .btn { margin-left: 0; }
html[data-device="phone"] .totals { gap: 14px 22px; }
html[data-device="phone"] .totals div b { font-size: 22px; }
html[data-device="phone"] .kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 12px; font-size: 13.5px; }
html[data-device="phone"] .kv > * { overflow-wrap: anywhere; }
html[data-device="phone"] .toasts { left: 14px; right: 14px; bottom: calc(var(--tabbar-h) + 22px + var(--safe-b)); }
html[data-device="phone"] .sheet-wrap { z-index: 60; }
html[data-device="phone"] .sheet { margin: 0; width: 100%; max-width: none; height: 100%; border-radius: 0; padding-top: calc(20px + var(--safe-t)); padding-bottom: calc(20px + var(--safe-b)); }
html[data-device="phone"] code, html[data-device="phone"] .mono { overflow-wrap: anywhere; }
/* les grilles à plusieurs colonnes passent en une colonne */
html[data-device="phone"] .dash, html[data-device="phone"] .split, html[data-device="phone"] .agent-page,
html[data-device="phone"] .settings, html[data-device="phone"] .sys-split, html[data-device="phone"] .cfg-grid .two { grid-template-columns: minmax(0, 1fr); }

/* -------- tableaux → cartes (les noms de colonnes sont ajoutés par app.js) -------- */
html[data-device="phone"] .table-wrap { margin: 0 -16px -16px; overflow: visible; }
html[data-device="phone"] details.figures .table-wrap { margin: 8px -16px -16px; max-height: none; }
html[data-device="phone"] table.data, html[data-device="phone"] table.data tbody,
html[data-device="phone"] table.data tr, html[data-device="phone"] table.data td { display: block; }
html[data-device="phone"] table.data thead { display: none; }
html[data-device="phone"] table.data tr {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px;
  padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.07);
}
html[data-device="phone"] table.data tbody tr:first-child { border-top: 0; }
html[data-device="phone"] table.data tr:hover td { background: none; }
html[data-device="phone"] table.data td { padding: 0 !important; border: 0; min-width: 0; text-align: left !important; font-size: 14px; overflow-wrap: anywhere; }
html[data-device="phone"] table.data td:first-child { grid-column: 1 / -1; font-weight: 600; font-size: 15px; }
html[data-device="phone"] table.data td:not(:first-child)[data-label]::before {
  content: attr(data-label); display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 550; margin-bottom: 1px;
}
html[data-device="phone"] table.data td:empty { display: none; }
html[data-device="phone"] table.data td[colspan] { grid-column: 1 / -1; text-align: center !important; }
html[data-device="phone"] table.data td[colspan]::before { display: none !important; }
html[data-device="phone"] table.data .cell-title { min-width: 0; }
html[data-device="phone"] table.data .inline-input { width: 100%; }

/* -------- pages -------- */
/* Tableau de bord */
html[data-device="phone"] .kpis { grid-template-columns: 1fr 1fr; }
html[data-device="phone"] .kpi { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.08); padding: 14px 14px 10px; }
html[data-device="phone"] .kpi:nth-child(-n+2) { border-top: 0; }
html[data-device="phone"] .kpi:nth-child(even) { border-left: 1px solid rgba(255,255,255,.08) !important; }
html[data-device="phone"] .kpi.profit { grid-column: 1 / -1; border-left: 0 !important; }
html[data-device="phone"] .kpi > b { font-size: 26px; }
html[data-device="phone"] .lens { padding: 18px 16px 12px; min-height: 0; }
html[data-device="phone"] .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
html[data-device="phone"] .metric { padding: 14px; }
html[data-device="phone"] .metric b { font-size: 22px; }
html[data-device="phone"] .feed { max-height: none; }
/* Annonces */
html[data-device="phone"] .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Messages */
html[data-device="phone"] .inbox { grid-template-columns: 1fr; height: auto; min-height: 0; }
html[data-device="phone"] .inbox.has-thread .conv-list { display: none; }
html[data-device="phone"] .inbox:not(.has-thread) .thread { display: none; }
html[data-device="phone"] .thread { height: calc(100dvh - var(--tabbar-h) - 150px - var(--safe-t) - var(--safe-b)); min-height: 420px; }
html[data-device="phone"] .thread-head #back { display: inline-flex !important; }
/* Agents */
html[data-device="phone"] .agents-grid { grid-template-columns: 1fr; gap: 14px; }
html[data-device="phone"] .q-card { grid-template-columns: 34px 1fr; gap: 10px; padding: 14px; }
/* Bordereaux */
html[data-device="phone"] .label-card { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
html[data-device="phone"] .label-card-photo { width: 84px; height: 108px; }
/* État du PC */
html[data-device="phone"] .sys-gauges { grid-template-columns: 1fr 1fr; gap: 10px; }
html[data-device="phone"] .sys-gauge { padding: 14px 8px 12px; }
html[data-device="phone"] .sys-ring { width: 96px; height: 96px; }
html[data-device="phone"] .sys-ring-mid b { font-size: 26px; }
html[data-device="phone"] .sys-live { margin-left: 0; }
html[data-device="phone"] .sys-proc { grid-template-columns: minmax(0, 1fr) 48px 60px; }
html[data-device="phone"] .sys-proc .bar { display: none; }
html[data-device="phone"] .sys-io b { font-size: 18px; }

/* -------- plein écran (app sur l'écran d'accueil) -------- */
html[data-standalone="yes"][data-device="phone"] .backdrop { inset: calc(-1 * var(--safe-t)) 0 0 0; }

/* -------- garde-fous contre le débordement horizontal -------- */
html[data-device="phone"] .main > *, html[data-device="phone"] .view > *, html[data-device="phone"] .topbar > *,
html[data-device="phone"] .panel > *, html[data-device="phone"] .glass > * { min-width: 0; max-width: 100%; }
html[data-device="phone"] .view { grid-template-columns: minmax(0, 1fr); }
html[data-device="phone"] body { overflow-x: hidden; }
/* formulaires en ligne (Compta : dépenses, réglages) : empilés */
html[data-device="phone"] .cfg-grid .two[style] { grid-template-columns: 1fr 1fr !important; align-items: end; }
html[data-device="phone"] .cfg-grid .two[style] > :first-child { grid-column: 1 / -1; }
html[data-device="phone"] .cfg-grid .two[style] > .btn { grid-column: 1 / -1; justify-content: center; }
html[data-device="phone"] .check { flex-wrap: wrap; }
html[data-device="phone"] .check > span:not(.switch) { flex: 1 1 200px; min-width: 0; }
/* Conversation ouverte : on cache le grand titre pour laisser la place aux messages */
html[data-device="phone"] .main:has(.inbox.has-thread) .topbar { display: none; }
html[data-device="phone"] .inbox.has-thread .thread { height: calc(100dvh - var(--tabbar-h) - 50px - var(--safe-t) - var(--safe-b)); }