/* ═══════════════════════════════════════════════════════════
   ZenoiaIQ Design System v4.0
   Swiss Precision · Genève
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── CSS Variables ── */
:root {
  --z-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --z-bg: #F5F5F7;
  --z-surface: #FFFFFF;
  --z-surface2: #EBEBF0;
  --z-text: #1D1D1F;
  --z-text2: #6E6E73;
  --z-text3: #AEAEB2;
  --z-accent: #5856D6;
  --z-border: #E8E8ED;
  --z-border2: #F0F0F5;
  --z-tab-bg: rgba(245,245,247,0.88);
  --z-radius: 12px;
  --z-radius-sm: 8px;
  --z-shadow: 0 1px 3px rgba(0,0,0,0.04);
  --z-transition: all 0.2s ease;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
  --z-bg: #000000;
  --z-surface: #1C1C1E;
  --z-surface2: #2C2C2E;
  --z-text: #F5F5F7;
  --z-text2: #98989D;
  --z-text3: #48484A;
  --z-accent: #7B7EF6;
  --z-border: #2C2C2E;
  --z-border2: #1C1C1E;
  --z-tab-bg: rgba(0,0,0,0.88);
  --z-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ═══════════════════════════════════════
   GLOBAL RESET
   ═══════════════════════════════════════ */

*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* CRITICAL: Prevent page scroll */
  overscroll-behavior: none;
}

body {
  font-family: var(--z-font) !important;
  background: var(--z-bg) !important;
  color: var(--z-text);
  transition: background 0.3s ease, color 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Hide scrollbar globally except where needed */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* Show scrollbar only on dashboard scroll area */
.z-dashboard-scroll::-webkit-scrollbar { display: block; width: 4px; }
.z-dashboard-scroll { scrollbar-width: thin; }

/* ═══════════════════════════════════════
   SPLASH SCREEN
   ═══════════════════════════════════════ */

#zenoiaSplash {
  position: fixed; inset: 0; z-index: 9999;
  background: #08080F;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity 0.4s ease;
}
#zenoiaSplash.z-hide { opacity: 0; pointer-events: none; }
#zenoiaSplash .z-logo {
  opacity: 0;
  animation: zLogoIn 0.7s cubic-bezier(.16,1,.3,1) 0.3s forwards;
}
#zenoiaSplash .z-tagline {
  font-size: 9px; font-weight: 500; color: #F5F5F7;
  letter-spacing: 0.25em; text-transform: uppercase;
  margin-top: 10px; opacity: 0;
  animation: zTagIn 0.5s ease 0.7s forwards;
}
#zenoiaSplash .z-dots { display: flex; gap: 4px; margin-top: 36px; }
#zenoiaSplash .z-dot {
  width: 4px; height: 4px; border-radius: 2px;
  background: #5856D6; animation: zDotPulse 1s ease infinite;
}
#zenoiaSplash .z-dot:nth-child(2) { animation-delay: 0.15s; }
#zenoiaSplash .z-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes zLogoIn {
  0% { opacity: 0; letter-spacing: 0.2em; }
  100% { opacity: 1; letter-spacing: 0.06em; }
}
@keyframes zTagIn { 0% { opacity: 0; } 100% { opacity: 0.4; } }
@keyframes zDotPulse { 0%,100% { opacity: 0.2; } 50% { opacity: 0.7; } }
@keyframes zFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.z-fade-up { animation: zFadeUp 0.35s ease-out both; }

/* ═══════════════════════════════════════
   ZENOIA LOGO (reusable)
   ═══════════════════════════════════════ */

.z-logo-text {
  display: inline-flex; align-items: baseline;
  letter-spacing: 0.06em; line-height: 1;
}
.z-logo-text .z-name { font-weight: 400; color: var(--z-text); }
.z-logo-text .z-iq { font-weight: 700; color: #5856D6; margin-left: 1px; }
#zenoiaSplash .z-logo-text .z-name { color: #F5F5F7; }

.z-logo-sm .z-name, .z-logo-sm .z-iq { font-size: 16px; }
.z-logo-md .z-name, .z-logo-md .z-iq { font-size: 22px; }
.z-logo-lg .z-name, .z-logo-lg .z-iq { font-size: 32px; }
.z-logo-xl .z-name, .z-logo-xl .z-iq { font-size: 38px; }

/* ═══════════════════════════════════════
   LOGIN SCREEN
   ═══════════════════════════════════════ */

/* Auth screens need to scroll on mobile */
#loginScreen,
#signupScreen,
#planSelectionScreen,
#verificationScreen,
#deniedScreen,
#onboardingScreen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#loginScreen { background: #08080F !important; }
#loginScreen > div {
  background: var(--z-surface) !important;
  border: 0.5px solid var(--z-border);
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
}

/* ═══════════════════════════════════════
   MAIN APP HEADER (Dashboard)
   ═══════════════════════════════════════ */

.z-app-header {
  background: var(--z-surface) !important;
  border-bottom: 0.5px solid var(--z-border);
  box-shadow: none !important;
  color: var(--z-text) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.z-app-header h1 { color: var(--z-text) !important; }
.z-app-header select {
  background: var(--z-surface2) !important;
  color: var(--z-text) !important;
  border: 0.5px solid var(--z-border) !important;
  border-radius: 6px !important;
  font-family: var(--z-font) !important;
  font-size: 11px !important;
}
.z-app-header button { color: var(--z-text2) !important; }
.z-app-header button:hover { background: var(--z-surface2) !important; }
.z-app-header span { color: var(--z-text2) !important; }

/* Module Cards on dashboard */
.module-card {
  background: var(--z-surface) !important;
  border: 0.5px solid var(--z-border) !important;
  border-radius: var(--z-radius) !important;
  box-shadow: none !important;
  transition: var(--z-transition) !important;
}
.module-card:hover { transform: none !important; box-shadow: none !important; border-color: var(--z-accent) !important; }
.module-card:active { transform: scale(0.98) !important; }
.module-card h3 { color: var(--z-text) !important; font-weight: 600 !important; font-size: 13px !important; }
.module-card p { color: var(--z-text3) !important; }

.z-app-main .bg-white {
  background: var(--z-surface) !important;
  border: 0.5px solid var(--z-border) !important;
  box-shadow: none !important;
}
#scanCard {
  border-radius: var(--z-radius) !important;
  box-shadow: none !important;
  border: 0.5px solid var(--z-border);
  overflow: hidden;
}

/* ═══════════════════════════════════════
   ALL MODULE HEADERS → Swiss style
   (single rule set for all screens)
   ═══════════════════════════════════════ */

#facturoScreen > header,
#facturoFormScreen > header,
#facturoArchivesScreen > header,
#recettesScreen > header,
#planifioScreen > header,
#arbitroScreen > header,
#inventaireScreen > header,
#achatsScreen > header,
#contactoScreen > header,
#archivoScreen > header,
#usersScreen > header,
#companiesScreen > header,
#auditScreen > header {
  background: var(--z-surface) !important;
  color: var(--z-text) !important;
  border-bottom: 0.5px solid var(--z-border) !important;
  box-shadow: none !important;
}

/* Header titles */
#facturoScreen > header h1,
#facturoFormScreen > header h1,
#facturoArchivesScreen > header h1,
#recettesScreen > header h1,
#planifioScreen > header h1,
#arbitroScreen > header h1,
#inventaireScreen > header h1,
#achatsScreen > header h1,
#contactoScreen > header h1,
#archivoScreen > header h1,
#usersScreen > header h1,
#companiesScreen > header h1,
#auditScreen > header h1 {
  color: var(--z-text) !important;
}

/* Header subtitles — override ALL colored text-{color}-100/200/300 */
#facturoScreen > header p,
#facturoFormScreen > header p,
#facturoArchivesScreen > header p,
#recettesScreen > header p,
#planifioScreen > header p,
#arbitroScreen > header p,
#inventaireScreen > header p,
#achatsScreen > header p,
#contactoScreen > header p,
#archivoScreen > header p,
#usersScreen > header p,
#companiesScreen > header p,
#auditScreen > header p {
  color: var(--z-text2) !important;
}

/* Header buttons — override bg-white/20, hover:bg-{color}, bg-{color}-500 */
#facturoScreen > header button,
#facturoFormScreen > header button,
#facturoArchivesScreen > header button,
#recettesScreen > header button,
#planifioScreen > header button,
#arbitroScreen > header button,
#inventaireScreen > header button,
#achatsScreen > header button,
#contactoScreen > header button,
#archivoScreen > header button,
#usersScreen > header button,
#companiesScreen > header button,
#auditScreen > header button {
  background: var(--z-surface2) !important;
  color: var(--z-text) !important;
  border: 0.5px solid var(--z-border) !important;
  border-radius: var(--z-radius-sm) !important;
}
#facturoScreen > header button:hover,
#facturoFormScreen > header button:hover,
#facturoArchivesScreen > header button:hover,
#recettesScreen > header button:hover,
#planifioScreen > header button:hover,
#arbitroScreen > header button:hover,
#inventaireScreen > header button:hover,
#achatsScreen > header button:hover,
#contactoScreen > header button:hover,
#archivoScreen > header button:hover,
#usersScreen > header button:hover,
#companiesScreen > header button:hover,
#auditScreen > header button:hover {
  background: var(--z-border) !important;
}

/* ── Module Tab Strips ── */
/* Override all colored tab strip borders */
#facturoScreen > header .border-blue-500,
#planifioScreen > header .border-teal-500,
#inventaireScreen .border-amber-500 {
  border-color: var(--z-border) !important;
}

/* Tab buttons — base state (inactive) */
.facturo-tab,
.planifio-tab {
  font-family: var(--z-font) !important;
  transition: all 0.2s !important;
  -webkit-tap-highlight-color: transparent;
}

/* Tab buttons — active state (segmented control) */
.facturo-tab.border-white,
.facturo-tab[style*="border-bottom-color: white"] {
  color: var(--z-text) !important;
  border-bottom-color: var(--z-accent) !important;
}

/* Tab buttons — hover */
.facturo-tab:hover {
  color: var(--z-text2) !important;
}

.planifio-tab:hover {
  opacity: 0.9;
}

/* Inventaire tabs */
#inventaireScreen [onclick*="switchInventoryTab"] {
  font-family: var(--z-font) !important;
  transition: all 0.2s !important;
}
/* Inventaire inactive tabs */
#inventaireScreen .text-slate-500[onclick*="switchInventoryTab"] {
  color: var(--z-text3) !important;
  border-bottom-color: transparent !important;
}
/* Inventaire active tab */
#inventaireScreen .text-amber-600[onclick*="switchInventoryTab"],
#inventaireScreen .border-amber-500[onclick*="switchInventoryTab"] {
  color: var(--z-text) !important;
  border-bottom-color: var(--z-accent) !important;
}

/* ── All module backgrounds ── */
#facturoScreen, #facturoFormScreen, #facturoArchivesScreen,
#recettesScreen, #planifioScreen, #arbitroScreen,
#inventaireScreen, #achatsScreen, #contactoScreen,
#archivoScreen, #usersScreen, #companiesScreen, #auditScreen {
  background: var(--z-bg) !important;
}

/* ── All module content cards ── */
#facturoScreen .bg-white,
#recettesScreen .bg-white,
#planifioScreen .bg-white,
#arbitroScreen .bg-white,
#inventaireScreen .bg-white,
#achatsScreen .bg-white,
#contactoScreen .bg-white,
#archivoScreen .bg-white,
#usersScreen .bg-white,
#companiesScreen .bg-white,
#auditScreen .bg-white {
  background: var(--z-surface) !important;
  border: 0.5px solid var(--z-border) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════
   BOTTOM TAB BAR
   ═══════════════════════════════════════ */

#zenoiaTabBar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--z-tab-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--z-border);
  padding: 2px 0 var(--safe-bottom);
}
#zenoiaTabBar .z-tabs {
  display: flex; justify-content: space-around;
  align-items: flex-end;
  max-width: 480px; margin: 0 auto;
}
#zenoiaTabBar .z-tab {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 8px 16px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--z-font);
}
#zenoiaTabBar .z-tab svg {
  width: 20px; height: 20px;
  stroke: var(--z-text3); stroke-width: 1.5;
  fill: none; transition: var(--z-transition);
}
#zenoiaTabBar .z-tab.active svg { stroke: var(--z-accent); stroke-width: 2; }
#zenoiaTabBar .z-tab span {
  font-size: 9px; font-weight: 400;
  color: var(--z-text3); letter-spacing: 0.02em;
  transition: var(--z-transition);
}
#zenoiaTabBar .z-tab.active span { font-weight: 600; color: var(--z-accent); }

/* Scan button — elevated */
#zenoiaTabBar .z-tab-scan {
  width: 56px; height: 56px; border-radius: 16px;
  border: none; cursor: pointer;
  background: var(--z-text);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-14px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 0;
}
#zenoiaTabBar .z-tab-scan svg {
  width: 26px; height: 26px;
  stroke: var(--z-bg); stroke-width: 2;
}

/* ═══════════════════════════════════════
   DARK MODE TOGGLE
   ═══════════════════════════════════════ */

.z-toggle {
  width: 42px; height: 24px; border-radius: 12px;
  border: none; cursor: pointer; position: relative;
  background: var(--z-surface2); transition: background 0.2s;
}
.z-toggle.active { background: #5856D6; }
.z-toggle .z-knob {
  width: 18px; height: 18px; border-radius: 9px;
  background: #FFF; position: absolute; top: 3px; left: 3px;
  transition: left 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.z-toggle.active .z-knob { left: 21px; }

/* ═══════════════════════════════════════
   DASHBOARD v4 — Widgets & Modules
   ═══════════════════════════════════════ */

/* ══ App Screen Layout - Full viewport ══ */
#appScreen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--z-bg);
  overflow: hidden;
}

#appScreen.hidden {
  display: none !important;
}

.z-app-header {
  flex-shrink: 0;
  padding: 12px 16px;
  background: var(--z-surface);
  border-bottom: 0.5px solid var(--z-border);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 50;
}

.z-app-header-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.z-app-main {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  padding-bottom: 90px;
  min-height: 0;
  overflow: hidden;
}

/* ══ Dashboard Content Layout ══ */
#dashboardContent {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Fixed section: KPIs, Team, Modules - NO SCROLL */
.z-dashboard-fixed {
  flex: 0 0 auto;
  overflow: visible;
}

/* Scrollable section: Activity only */
.z-dashboard-scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
}

/* Custom scrollbar for activity */
.z-dashboard-scroll::-webkit-scrollbar {
  display: block !important;
  width: 4px;
}
.z-dashboard-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.z-dashboard-scroll::-webkit-scrollbar-thumb {
  background: var(--z-border);
  border-radius: 2px;
}

/* KPIs */
.z-kpis { display: flex; gap: 8px; margin-bottom: 14px; }
.z-kpi-card {
  flex: 1; padding: 14px 12px;
  background: var(--z-surface);
  border: 0.5px solid var(--z-border); border-radius: 12px;
}
.z-kpi-value { font-size: 22px; font-weight: 700; color: var(--z-text); letter-spacing: -0.02em; }
.z-kpi-label { font-size: 10px; font-weight: 500; color: var(--z-text2); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* Widgets (Team, Stock Alerts) */
.z-widget {
  background: var(--z-surface); border: 0.5px solid var(--z-border);
  border-radius: 12px; overflow: hidden; margin-bottom: 8px;
}
.z-widget-header {
  display: flex; align-items: center; width: 100%; padding: 10px 12px;
  background: transparent; border: none; cursor: pointer; gap: 8px;
  font-family: var(--z-font);
}
.z-widget-dot { width: 6px; height: 6px; border-radius: 3px; flex-shrink: 0; }
.z-widget-title { flex: 1; font-size: 11px; font-weight: 600; color: var(--z-text2); text-transform: uppercase; letter-spacing: 0.06em; text-align: left; }
.z-widget-meta { font-size: 11px; font-weight: 500; color: var(--z-text3); margin-right: 4px; }
.z-widget-chevron { display: flex; align-items: center; color: var(--z-text3); }
.z-widget-body {
  padding: 0 12px 10px; overflow: hidden; max-height: 500px;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.z-widget-body.z-collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

/* Team Widget */
.z-team-ruler { display: flex; justify-content: space-between; padding: 0 0 4px; margin-bottom: 2px; }
.z-team-ruler span { font-size: 8px; color: var(--z-text3); font-weight: 500; font-variant-numeric: tabular-nums; }
.z-team-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.z-team-row:last-child { margin-bottom: 0; }
.z-team-avatar { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; transition: all 0.3s; }
.z-team-info { flex: 1; min-width: 0; }
.z-team-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.z-team-meta span { font-size: 11px; font-variant-numeric: tabular-nums; }
.z-team-bar { position: relative; height: 4px; border-radius: 2px; background: var(--z-surface2); }
.z-team-fill { position: absolute; top: 0; height: 100%; border-radius: 2px; transition: all 0.3s; }

/* Stock Alerts Widget */
.z-stock-badge { font-size: 10px; font-weight: 600; color: #DC2626; padding: 1px 6px; border-radius: 4px; background: #DC26260A; }
[data-theme="dark"] .z-stock-badge { background: #DC262618; }
.z-stock-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.z-stock-row:last-child { margin-bottom: 0; }
.z-stock-icon { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.z-stock-info { flex: 1; min-width: 0; }
.z-stock-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.z-stock-name { font-size: 11px; font-weight: 600; color: var(--z-text); }
.z-stock-qty { font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.z-stock-bar { position: relative; height: 4px; border-radius: 2px; background: var(--z-surface2); }
.z-stock-fill { position: absolute; top: 0; height: 100%; border-radius: 2px; }

/* Section labels */
.z-section { margin-top: 20px; }
.z-section-label { font-size: 11px; font-weight: 600; color: var(--z-text2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; padding: 0 2px; }
.z-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 0 2px; }
.z-section-action { font-size: 11px; color: var(--z-accent); background: none; border: none; cursor: pointer; font-weight: 500; font-family: var(--z-font); }

/* Module Grid (dynamic) */
.z-modules-grid { display: grid; gap: 10px; }
.z-module-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 4px 12px; border-radius: 14px;
  background: var(--z-surface); border: 0.5px solid var(--z-border);
  cursor: pointer; font-family: var(--z-font); transition: var(--z-transition);
}
.z-module-btn:active { transform: scale(0.97); }
.z-module-icon { width: 48px; height: 48px; border-radius: 14px; border: 0.5px solid; display: flex; align-items: center; justify-content: center; }
.z-module-name { font-size: 10px; font-weight: 500; color: var(--z-text2); letter-spacing: 0.01em; }

/* Activity */
.z-activity-list { background: var(--z-surface); border-radius: 10px; border: 0.5px solid var(--z-border); overflow: hidden; }
.z-activity-row { display: flex; align-items: center; padding: 8px 12px; gap: 8px; }
.z-activity-avatar { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; background: var(--z-surface2); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 600; color: var(--z-text2); }
.z-activity-text { flex: 1; font-size: 11.5px; color: var(--z-text); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-activity-time { font-size: 10px; color: var(--z-text3); flex-shrink: 0; }

/* ═══════════════════════════════════════
   CUSTOMIZE MODAL
   ═══════════════════════════════════════ */

.z-customize-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.3); display: flex; align-items: flex-end; }
.z-customize-sheet { width: 100%; max-width: 480px; margin: 0 auto; background: var(--z-surface); border-radius: 20px 20px 0 0; padding: 8px 20px 32px; max-height: 80vh; overflow-y: auto; }
.z-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--z-border); margin: 0 auto 14px; }
.z-customize-label { font-size: 11px; font-weight: 600; color: var(--z-text2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.z-customize-group { background: var(--z-bg); border-radius: 10px; border: 0.5px solid var(--z-border); overflow: hidden; }
.z-customize-row { display: flex; align-items: center; padding: 12px; gap: 10px; }
.z-customize-module-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.z-customize-done { width: 100%; padding: 12px; border-radius: 10px; background: var(--z-text); border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--z-bg); margin-top: 20px; font-family: var(--z-font); }

/* ═══════════════════════════════════════
   "PLUS" SCREEN
   ═══════════════════════════════════════ */

#moreScreen { background: var(--z-bg) !important; min-height: 100vh; }
.z-more-header { padding: 52px 20px 4px; max-width: 480px; margin: 0 auto; }
.z-more-header h1 { font-size: 20px; font-weight: 700; color: var(--z-text); letter-spacing: -0.01em; }
.z-more-content { padding: 0 20px 110px; max-width: 480px; margin: 0 auto; }
.z-more-list { background: var(--z-surface); border-radius: 10px; border: 0.5px solid var(--z-border); overflow: hidden; }
.z-more-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: transparent; border: none; cursor: pointer; width: 100%;
  text-align: left; font-family: var(--z-font); transition: background 0.15s;
}
.z-more-row:active { background: var(--z-surface2); }
.z-more-row-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.z-more-row-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--z-text); }
.z-more-row-desc { font-size: 11px; color: var(--z-text3); margin-right: 4px; }
.z-more-row-chevron { color: var(--z-text3); flex-shrink: 0; display: flex; align-items: center; }

/* ═══════════════════════════════════════
   FAB — Swiss Floating Action Button
   ═══════════════════════════════════════ */

.z-fab {
  position: fixed; bottom: 94px; right: 20px; z-index: 30;
  width: 48px; height: 48px; border-radius: 14px;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.z-fab:active { transform: scale(0.93); }
.z-fab svg { width: 22px; height: 22px; stroke: #FFFFFF; stroke-width: 2.5; fill: none; }

/* ═══════════════════════════════════════
   MODULE FORM ELEMENTS → Swiss style
   ═══════════════════════════════════════ */

/* All module inputs/selects/textareas */
#facturoScreen input, #facturoFormScreen input,
#recettesScreen input, #inventaireScreen input,
#achatsScreen input, #contactoScreen input,
#archivoScreen input, #arbitroScreen input {
  background: var(--z-surface) !important;
  border: 0.5px solid var(--z-border) !important;
  border-radius: 10px !important;
  font-family: var(--z-font) !important;
  color: var(--z-text) !important;
}

#facturoScreen select, #facturoFormScreen select,
#recettesScreen select, #inventaireScreen select,
#achatsScreen select, #arbitroScreen select {
  background: var(--z-surface) !important;
  border: 0.5px solid var(--z-border) !important;
  border-radius: 8px !important;
  font-family: var(--z-font) !important;
  color: var(--z-text) !important;
}

#facturoFormScreen textarea,
#recettesScreen textarea,
#arbitroScreen textarea {
  background: var(--z-surface) !important;
  border: 0.5px solid var(--z-border) !important;
  border-radius: 10px !important;
  font-family: var(--z-font) !important;
  color: var(--z-text) !important;
}

/* ═══════════════════════════════════════
   MODALS → Swiss style
   ═══════════════════════════════════════ */

/* Generic modal */
#genericModal > div {
  background: var(--z-surface) !important;
  border: 0.5px solid var(--z-border) !important;
  border-radius: var(--z-radius) !important;
}
#genericModal input, #genericModal select, #genericModal textarea {
  background: var(--z-bg) !important;
  border: 0.5px solid var(--z-border) !important;
  border-radius: 8px !important;
  font-family: var(--z-font) !important;
  color: var(--z-text) !important;
}

/* Scan modal */
#scanModal > div {
  background: var(--z-surface) !important;
  border: 0.5px solid var(--z-border) !important;
}

/* Arbitro floating compare button */
#floatingCompareBtn button {
  border-radius: 14px !important;
  font-family: var(--z-font) !important;
}

/* ═══════════════════════════════════════
   TAILWIND CLASS OVERRIDES
   ═══════════════════════════════════════ */

/* Text colors */
.text-slate-600 { color: var(--z-text2) !important; }
.text-gray-500, .text-gray-400 { color: var(--z-text3) !important; }
.text-gray-600, .text-gray-700 { color: var(--z-text2) !important; }
.text-gray-800, .text-gray-900 { color: var(--z-text) !important; }

/* Backgrounds */
.bg-slate-200, .bg-gray-100, .bg-gray-200 { background: var(--z-surface2) !important; }
.bg-slate-50 { background: var(--z-bg) !important; }

/* Borders and radius */
.rounded-xl { border-radius: var(--z-radius) !important; }
.rounded-2xl { border-radius: var(--z-radius) !important; }

/* Shadows → minimal */
.shadow-sm { box-shadow: var(--z-shadow) !important; }
.shadow-lg { box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; }
.shadow-xl { box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; }

/* ═══════════════════════════════════════
   DARK MODE OVERRIDES
   ═══════════════════════════════════════ */

[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-slate-300 {
  color: var(--z-text2) !important;
}

[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .font-bold {
  color: var(--z-text) !important;
}

[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-slate-50 {
  background: var(--z-bg) !important;
}

[data-theme="dark"] .bg-white {
  background: var(--z-surface) !important;
}

[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-300 {
  border-color: var(--z-border) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--z-surface2) !important;
  color: var(--z-text) !important;
  border-color: var(--z-border) !important;
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */

.z-footer {
  text-align: center; font-size: 10px;
  color: var(--z-text3); padding: 24px 0;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════
   MODULE SCREENS — Bottom padding for tab bar
   ═══════════════════════════════════════ */

#facturoScreen > main,
#facturoFormScreen > main,
#facturoArchivesScreen > main,
#recettesScreen > main,
#planifioScreen > main,
#arbitroScreen > main,
#inventaireScreen > main,
#achatsScreen > main,
#contactoScreen > main,
#archivoScreen > main,
#usersScreen > main,
#companiesScreen > main,
#auditScreen > main {
  padding-bottom: 110px !important;
}

/* ═══════════════════════════════════════
   PLANIFIO — Mobile Day Strip
   ═══════════════════════════════════════ */

#planifioDayStrip button {
  -webkit-tap-highlight-color: transparent;
}

/* Smooth entry cards */
#planifioCalendar [onclick] {
  cursor: pointer;
}

/* Mobile: hide today card (integrated in day view) */
@media (max-width: 639px) {
  #planifioTodayCard {
    display: none !important;
  }
}