/* ═══════════════════════════════════════════════════════════════
   InfraX QMS — mobile.css  v2
   Mobile-only (≤ 768px). Desktop is never affected.
   Architecture: panels stay position:fixed, each scrolls internally.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

/* ── Variables ────────────────────────────────────────────────────────── */
:root {
  --mob-nav-h:  62px;
  --mob-safe:   env(safe-area-inset-bottom, 0px);
  --mob-bottom: calc(var(--mob-nav-h) + var(--mob-safe));
}

/* ── Lock body scroll — panels handle their own scrolling ─────────────── */
html, body {
  height: 100% !important;
  overflow: hidden !important;
}

/* ── Bottom navigation ────────────────────────────────────────────────── */
#mobile-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10000;
  height: calc(var(--mob-nav-h) + var(--mob-safe));
  padding-bottom: var(--mob-safe);
  background: #fff;
  border-top: 1.5px solid var(--gray-200, #e2e8f0);
  display: flex;
  box-shadow: 0 -4px 24px rgba(0,0,0,.08);
}

.mob-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: color .15s;
  padding: 6px 2px 0;
  -webkit-tap-highlight-color: transparent;
  min-height: 0;
}
.mob-nav-btn:active { opacity: .75; }
.mob-nav-btn.active { color: var(--pink, #e72c85); }
.mob-nav-btn svg    { flex-shrink: 0; }

/* ── All app panels: clip bottom so content clears the nav bar ─────────── */
#dashboard-view,
#process-dash,
#req-app,
#hr-overlay,
#dms-panel,
#capa-panel,
#config-panel,
#generic-proc-panel {
  bottom: var(--mob-bottom) !important;
}

/* Overlays remain truly full-screen */
#loading-overlay   { bottom: 0 !important; z-index: 9999 !important; }
#login-overlay     { bottom: 0 !important; z-index: 9998 !important; }
#totp-setup-overlay  { bottom: 0 !important; z-index: 10000 !important; }
#totp-verify-overlay {
  bottom: 0 !important;
  z-index: 10500 !important;  /* au-dessus de #mobile-nav (10000) */
  padding-bottom: var(--mob-bottom) !important;  /* décale le centrage au-dessus de la barre */
}
#modal-add-action  { z-index: 9990 !important; }
#dms-modal-overlay { z-index: 9985 !important; }

/* ════════════════════════════════════════════════════
   DASHBOARD — whole panel scrolls vertically
   ════════════════════════════════════════════════════ */
#dashboard-view {
  overflow-y: auto !important;
}

.dash-topbar {
  height: 52px !important;
  padding: 0 14px !important;
  position: sticky; top: 0; z-index: 100;
}
.dash-topbar-center { font-size: 11px !important; }
.dash-user-chip, .dash-btn-logout { display: none !important; }

.dash-hero {
  padding: 18px 14px 10px !important;
}
.dash-hero-title { font-size: 20px !important; letter-spacing: -.3px !important; }
.dash-hero-sub   { font-size: 12px !important; }

.dash-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: unset !important;
  gap: 10px !important;
  padding: 12px 12px 16px !important;
  overflow: visible !important;
}

.dash-card {
  padding: 14px 12px 12px !important;
  border-radius: 12px !important;
}
.dash-card--live:hover { transform: none !important; box-shadow: none !important; }
.dash-card--live:active { transform: scale(.97) !important; }
.dash-card-header { margin-bottom: 10px !important; }
.dash-card-icon {
  width: 36px !important; height: 36px !important;
  margin-bottom: 8px !important; border-radius: 10px !important;
}
.dash-card-icon svg { width: 18px !important; height: 18px !important; }
.dash-card-title    { font-size: 12.5px !important; line-height: 1.3 !important; }
.dash-card-desc     { font-size: 10.5px !important; }
.dash-card-footer   {
  padding-top: 8px !important; margin-top: 8px !important;
  font-size: 11px !important;
}

/* ════════════════════════════════════════════════════
   PROCESS DASHBOARD — whole panel scrolls vertically
   ════════════════════════════════════════════════════ */
#process-dash {
  display: flex !important;
  flex-direction: column;
  overflow-y: auto !important;
}

.proc-topbar {
  padding: 0 12px !important;
  height: 52px !important;
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 100;
  background: #fff !important;
}

.proc-hero {
  padding: 14px 14px 10px !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-shrink: 0;
}
.proc-hero-num   { font-size: 28px !important; }
.proc-hero-title { font-size: 17px !important; }
.proc-hero-desc  { font-size: 12px !important; }

/* Org chart and info sidebar hidden — fullscreen lightbox used instead */
#proc-fp-orgchart-area { display: none !important; }
#proc-fp-sidebar       { display: none !important; }
.fp-sidebar-overlay    { display: none !important; }

/* Module list: flat grouped list, no side panel */
.proc-content-layout,
.proc-content-layout.orgchart-open {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 12px 20px !important;
  gap: 0 !important;
  transition: none !important;
  column-gap: 0 !important;
  grid-template-columns: unset !important;
}

.proc-modules-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  background: #fff;
  border: 1.5px solid var(--gray-100, #f1f5f9);
  border-radius: 14px !important;
  overflow: hidden;
  grid-template-columns: unset !important;
}

/* Module card: compact horizontal list item */
.proc-module-card {
  flex-direction: row !important;
  padding: 13px 16px !important;
  border-radius: 0 !important;
  gap: 12px !important;
  border: none !important;
  border-bottom: 1px solid var(--gray-100, #f1f5f9) !important;
  box-shadow: none !important;
  align-items: center !important;
  transform: none !important;
}
.proc-module-card:last-child { border-bottom: none !important; }
.proc-module-card::before    { display: none !important; }
.proc-module-card:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--pink-pale, #fdf2f8) !important;
}
.proc-module-card:active { background: var(--pink-pale, #fdf2f8) !important; }

.proc-module-icon {
  width: 38px !important; height: 38px !important;
  border-radius: 10px !important;
  flex-shrink: 0;
  transition: none !important;
}
.proc-module-card:hover .proc-module-icon { transform: none !important; }

.proc-module-content {
  flex: 1 !important;
  min-width: 0;
}
.proc-module-title { font-size: 14px !important; }
.proc-module-desc  {
  font-size: 11.5px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}
.proc-module-fp-goal { font-size: 11px !important; }

/* CTA: chevron only, no label */
.proc-module-cta {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border-top: none !important;
  flex-shrink: 0;
  min-width: 20px;
}
.proc-module-cta span { display: none !important; }
.proc-module-card:hover .proc-module-cta svg { transform: none !important; }

/* ════════════════════════════════════════════════════
   MODULE EXIGENCES (P1) — sidebar top + main scrolls
   ════════════════════════════════════════════════════ */
#req-app {
  display: flex !important;
  flex-direction: column;
}

#req-module-header {
  padding: 8px 12px !important;
  flex-wrap: wrap;
  gap: 6px;
  height: auto !important;
  min-height: 48px;
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 100;
}
.req-header-left  { flex-wrap: wrap; gap: 4px !important; }
.req-header-right { display: none !important; }

#req-body {
  flex: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}

#sidebar {
  width: 100% !important;
  height: 40vh !important;
  max-height: 40vh !important;
  border-right: none !important;
  border-bottom: 1.5px solid var(--gray-200, #e2e8f0) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}

.sidebar-header {
  position: sticky; top: 0;
  z-index: 10;
  background: #fff;
}

#main {
  width: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

#topbar {
  flex-wrap: wrap;
  height: auto !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
  gap: 6px;
  position: sticky; top: 0; z-index: 10;
  flex-shrink: 0;
}
.topbar-breadcrumb { font-size: 12px !important; }
.topbar-actions    { flex-wrap: wrap; width: 100%; }

#btn-export-matrix { display: none !important; }
#btn-export-risk   { display: none !important; }

#content { padding: 14px !important; }

/* ════════════════════════════════════════════════════
   DMS — list ↔ detail toggle
   ════════════════════════════════════════════════════ */
#dms-panel {
  display: flex !important;
  flex-direction: column;
}

.dms-topbar {
  min-height: 52px !important;
  height: auto !important;
  padding: 8px 12px !important;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}
.dms-topbar-spacer { display: none !important; }
.dms-topbar-actions {
  width: 100%;
  overflow-x: auto;
  padding: 2px 0;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}
.dms-topbar-actions .dms-btn { white-space: nowrap; }

.dms-ack-banner { flex-shrink: 0; }

/* Layout: column, sidebar fills all by default */
.dms-layout {
  flex: 1 !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.dms-sidebar {
  width: 100% !important;
  flex: 1 !important;
  border-right: none !important;
  border-bottom: none !important;
  overflow: hidden !important;
}
.dms-sidebar-list {
  overflow-y: auto !important;
  max-height: none !important;
  -webkit-overflow-scrolling: touch;
}
.dms-filter-row {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

/* Detail hidden until document selected */
.dms-main { display: none !important; }

/* Document open: hide list, show detail */
#dms-panel.mob-doc-open .dms-sidebar {
  display: none !important;
}
#dms-panel.mob-doc-open .dms-main {
  display: flex !important;
  flex: 1 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}
#dms-panel.mob-doc-open #mob-dms-back {
  display: inline-flex !important;
}

/* Back-to-list button */
#mob-dms-back {
  display: none;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font);
  flex-shrink: 0;
  min-height: 0;
}

/* ── DMS document detail — mobile layout ─────────────────────────── */
.dms-detail-inner-pad {
  padding: 14px 14px 0 !important;
  gap: 10px !important;
}
.dms-detail-header {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}
.dms-detail-title { font-size: 16px !important; letter-spacing: -.2px !important; }
.dms-detail-ref   { font-size: 11px !important; }

.dms-detail-actions {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  justify-content: flex-start !important;
}
.dms-detail-actions .dms-btn,
.dms-detail-actions button { white-space: nowrap; }

/* Tabs — scrollable horizontally */
.dms-tabs {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0 !important;
  gap: 0 !important;
}
.dms-tabs::-webkit-scrollbar { display: none; }
.dms-tab {
  white-space: nowrap !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
}

/* Overview split — column layout, meta hidden by default */
.dms-overview-split {
  flex-direction: column !important;
  height: calc(100vh - 280px) !important;
  min-height: 320px !important;
}
.dms-overview-preview {
  flex: 1 !important;
  border-right: none !important;
  border-bottom: 1.5px solid var(--gray-200, #e2e8f0) !important;
  min-height: 0 !important;
}
/* Sidebar métadonnées — cachée par défaut sur mobile */
.dms-overview-meta {
  display: none !important;
  width: 100% !important;
  max-height: 55vh !important;
  flex-shrink: 0 !important;
}
/* Affichée quand le toggle est actif */
.dms-overview-split.mob-meta-open .dms-overview-meta {
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}
.dms-overview-split.mob-meta-open .dms-overview-preview {
  flex: none !important;
  height: 40vh !important;
}
/* Bouton toggle infos — visible seulement sur mobile */
.dms-meta-toggle-btn { display: inline-flex !important; }

/* Overview body — pas de padding latéral inutile */
.dms-overview-body { padding: 12px 12px 12px !important; }

/* ════════════════════════════════════════════════════
   HR — horizontal tab bar + scrollable content
   ════════════════════════════════════════════════════ */
#hr-overlay {
  display: flex !important;
  flex-direction: column;
}

#hr-overlay-header {
  flex-wrap: wrap !important;
  padding: 8px 12px !important;
  height: auto !important;
  min-height: 52px;
  gap: 6px;
  flex-shrink: 0;
}
#hr-overlay-header h2 { font-size: 14px !important; }
.hr-nav-back-btn,
.hr-nav-home-btn      { font-size: 12px !important; }

/* hr-app: sidebar on top (row→column), content below */
.hr-app {
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}

.hr-sidebar {
  width: 100% !important;
  height: auto !important;
  flex-direction: row !important;
  overflow: visible !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  flex-shrink: 0;
}
.hr-sidebar-header { display: none !important; }
.hr-sidebar-user   { display: none !important; }

/* Nav items: horizontal scrollable row of tabs */
.hr-nav {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 6px 8px !important;
  flex: 1 !important;
  gap: 4px;
  scrollbar-width: none;
}
.hr-nav::-webkit-scrollbar { display: none; }

.hr-nav-item {
  flex-direction: row !important;
  flex-shrink: 0 !important;
  padding: 6px 12px !important;
  width: auto !important;
  margin: 0 !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  gap: 5px !important;
  white-space: nowrap;
}
.hr-nav-item svg { width: 14px !important; height: 14px !important; }

/* Content area: takes remaining height and scrolls */
.hr-content {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* ════════════════════════════════════════════════════
   CAPA — horizontal tab bar + scrollable content
   ════════════════════════════════════════════════════ */
#capa-panel {
  display: flex !important;
  flex-direction: column;
}

/* capa-body: sidebar on top (column layout) */
.capa-body {
  flex-direction: column !important;
  overflow: hidden !important;
}

.capa-sidebar {
  width: 100% !important;
  height: auto !important;
  flex-direction: row !important;
  overflow: visible !important;
  border-right: none !important;
  border-bottom: 1.5px solid var(--gray-100, #f1f5f9) !important;
  flex-shrink: 0;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Hide non-nav sidebar sections */
.capa-sidebar-header  { display: none !important; }
.capa-sidebar-footer  { display: none !important; }
.capa-sidebar-actions { display: none !important; }
.capa-period-section  { display: none !important; }

/* Nav: horizontal scrollable tabs */
.capa-nav {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 6px 8px !important;
  flex: 1 !important;
  gap: 4px;
  scrollbar-width: none;
}
.capa-nav::-webkit-scrollbar { display: none; }

.capa-nav-item {
  flex-shrink: 0 !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  white-space: nowrap;
  width: auto !important;
  justify-content: center !important;
  margin: 0 !important;
}
.capa-nav-item span { font-size: 12px !important; }

/* Content area: takes remaining height and scrolls */
.capa-content {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  height: auto !important;
  min-height: 0;
}

/* ════════════════════════════════════════════════════
   CONFIGURATION — just needs padding reduction
   ════════════════════════════════════════════════════ */
#config-panel {
  display: flex !important;
  flex-direction: column;
}

.cfg-topbar { flex-shrink: 0; }

.cfg-main { padding: 16px 14px !important; }
.cfg-scroll-inner { gap: 16px !important; }

/* ════════════════════════════════════════════════════
   PROCÉDURES GÉNÉRIQUES
   ════════════════════════════════════════════════════ */
#generic-proc-panel {
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
}

/* Two-pane layout → single scrollable column */
.gpm-body {
  flex-direction: column !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════════════
   ORGANIGRAMME — plein écran mobile (lightbox)
   ════════════════════════════════════════════════════ */
#mob-orgchart-lightbox {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
}
#mob-orgchart-lightbox.hidden { display: none !important; }

.mob-orgchart-close {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 50%;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
  z-index: 1;
  font-size: 18px;
  font-weight: 300;
  font-family: var(--font);
  min-height: 0;
}

.mob-orgchart-img-wrap {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 66px 12px 16px;
}

#mob-orgchart-img {
  max-width: none;
  height: auto;
  min-width: 100%;
  object-fit: contain;
  touch-action: pan-x pan-y;
}

/* ════════════════════════════════════════════════════
   CONNEXION / MODAUX
   ════════════════════════════════════════════════════ */
.login-card {
  padding: 22px 18px !important;
  width: calc(100vw - 32px) !important;
  max-width: none !important;
}

#modal-add-action > div {
  width: calc(100vw - 24px) !important;
  max-width: none !important;
  max-height: 90svh !important;
}

/* ════════════════════════════════════════════════════
   TOASTS — above bottom nav
   ════════════════════════════════════════════════════ */
#toast-container,
#hr-toast-container,
#dms-toast {
  bottom: calc(var(--mob-bottom) + 8px) !important;
  z-index: 10001 !important;
}

/* ════════════════════════════════════════════════════
   UTILITAIRES TOUCH
   ════════════════════════════════════════════════════ */
button, .filter-chip, .dms-filter-chip { min-height: 36px; }

/* Évite le zoom iOS au focus sur les inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select {
  font-size: 16px !important;
}

/* ── Hidden override — MUST come last ────────────────────────────────────
   All panel rules above use `#id { display:flex !important }` at
   specificity 100. These `#id.hidden` selectors have specificity 110 and
   correctly beat them, so .hidden actually hides the panels on mobile.    */
#process-dash.hidden,
#req-app.hidden,
#dms-panel.hidden,
#hr-overlay.hidden,
#capa-panel.hidden,
#config-panel.hidden,
#generic-proc-panel.hidden,
#dashboard-view.hidden {
  display: none !important;
}

} /* End @media (max-width: 768px) */