/* ============================================================================================
   Socle du shell FOXUS: reprise de Spytrack (ui/static/style.css, commit HERMES 48a3758).
   FRONTIERE: ce fichier ne contient rien de specifique a Design. Il sera extrait dans un dossier
   partage par tous les outils FOXUS au moment de l'integration. Les couleurs viennent de tokens.css.
   ============================================================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[x-cloak] { display: none !important; }
a { color: inherit; }

.app-shell { display: flex; min-height: 100vh; }

/* ---- Motion ---- */

@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* opacity seulement: un transform ferait de cet element le bloc contenant des position:fixed (modales) */
.content > * { animation: fadeIn 0.35s ease backwards; }

a, button, input, select, textarea, .navitem, .img-card {
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(0) scale(0.97); }

/* ---- Sidebar ---- */

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: #0d0d10;
  border-right: 1px solid #202024;
  display: flex;
  flex-direction: column;
  padding: 26px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* La barre fait la hauteur de l'ecran: le menu defile seul quand il depasse, le profil reste en bas */
.sidebar nav {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: #2a2a30 transparent;
}
.sidebar-foot { padding-top: 12px; }

.navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.navitem:hover { color: var(--text); background: #1a1a1f; transform: translateX(2px); }

.navitem.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.02));
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}

.navitem svg { flex-shrink: 0; }
.navitem.active svg { color: var(--accent); }

.sidebar .profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #202024;
}

.avatar-fallback {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--on-accent);
  flex-shrink: 0;
}

/* ---- Contenu ---- */

.content { flex: 1; min-width: 0; padding: var(--frame-pad-top) var(--frame-pad-x) var(--frame-pad-bottom); }
.content > * { max-width: var(--frame-max); margin-left: auto; margin-right: auto; }

/* En-tete commun: titre + sous-titre a gauche, actions (palette...) en haut a droite, meme place sur toutes les pages */
.page-header, .home-head, .acq-head, .tp-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0;
}
.page-header { margin-bottom: var(--frame-gap); }
.page-header h1, .home-head h1, .acq-head h1, .tp-head h1 {
  margin: 0; font-size: var(--title-size); font-weight: var(--title-weight); line-height: 1.15; letter-spacing: -0.3px;
}
.page-header .subtitle, .home-head p, .acq-head p, .tp-head p { margin: 4px 0 0; font-size: var(--subtitle-size); font-weight: 400; }
.page-header .subtitle { color: var(--muted); }
.page-header .theme-gear-wrap > .icon-btn, .page-header .sync-bar-icons .icon-btn {
  width: var(--action-size); height: var(--action-size); padding: 0; border-radius: 12px; justify-content: center;
}
.page-header .theme-gear-wrap > .icon-btn svg, .page-header .sync-bar-icons .icon-btn svg { width: 20px; height: 20px; }

/* ---- Formulaires et boutons (un <button> nu est le bouton principal, comme dans Spytrack) ---- */

input, select, button, textarea {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.6);
  outline-offset: 2px;
}

button {
  cursor: pointer;
  background: var(--grad);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 600;
}

button:disabled { opacity: 0.4; cursor: not-allowed; }
button.secondary { background: var(--panel); border-color: var(--border); color: var(--text); font-weight: 500; }
button.secondary:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), 0.5); }
button.danger { background: transparent; border-color: rgba(var(--ko-rgb), 0.5); color: var(--ko); font-weight: 500; }
button.danger:hover:not(:disabled) { background: rgba(var(--ko-rgb), 0.12); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 7px;
  background: transparent; border: 1px solid var(--border); color: var(--muted); font-weight: 500;
}
.icon-btn:hover:not(:disabled) { color: var(--accent-2); border-color: rgba(var(--accent-rgb), 0.5); filter: none; }

/* ---- Modale (fond + centrage). Le contenu est dans components.css ---- */

.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 40;
}

/* ---- Mobile: barre superieure + barre d'onglets en bas (remplace la sidebar) ---- */

.mobile-topbar { display: none; }
* { -webkit-tap-highlight-color: transparent; }
a, button, select, label { touch-action: manipulation; }

@media (hover: none) {
  .navitem:hover, .img-card:hover, button:hover:not(:disabled) { transform: none; }
}

@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  .app-shell { flex-direction: column; }

  .mobile-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 30;
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
    background: rgba(10, 10, 12, 0.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid #202024;
  }
  .mobile-topbar .who { display: flex; align-items: center; gap: 10px; }

  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: auto; z-index: 30;
    flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(13, 13, 16, 0.96); backdrop-filter: blur(12px);
    border-right: none; border-top: 1px solid #202024;
  }
  .sidebar .brand, .sidebar .fx-logo, .sidebar .sidebar-foot, .sidebar .nav-group-label, .sidebar .soon-tag { display: none; }
  .sidebar nav { flex-direction: row; width: 100%; gap: 2px; overflow: visible; margin: 0; padding: 0; }
  .sidebar .nav-group { display: contents; }
  .navitem {
    flex: 1; min-width: 0; flex-direction: column; justify-content: center; align-items: center;
    gap: 4px; padding: 8px 2px; font-size: 10px; text-align: center;
    border-radius: 12px; position: relative; min-height: 54px;
  }
  .navitem:hover { transform: none; background: none; }
  .navitem .lbl { white-space: nowrap; }
  .navitem svg { width: 22px; height: 22px; }
  .navitem.active { background: none; border-left: none; padding-left: 2px; color: var(--accent-2); }
  .navitem.active::before {
    content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
  }

  :root { --frame-pad-x: 14px; --frame-pad-top: 16px; --frame-gap: 14px; --title-size: 26px; --subtitle-size: 15px; }
  .content { padding: var(--frame-pad-top) var(--frame-pad-x) calc(92px + env(safe-area-inset-bottom)); }
  .page-header { flex-wrap: wrap; }

  /* 16px empeche iOS de zoomer au focus; cibles tactiles confortables */
  input, select, button, textarea { font-size: 16px; }
  button, select, input { min-height: 44px; }
  .icon-btn { min-height: 40px; min-width: 40px; }
}