/* ══════════════════════════════════════════════════════════════════════════
   TASKFLOW — Responsive Mobile  ·  mobile.css
   ≤768px  tablette / mobile paysage
   ≤480px  smartphone portrait
══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Layout principal ≤768px ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Sidebar : fixed, masquée hors-écran, slide au tap hamburger */
  #sidebar {
    position: fixed !important;
    left: 0;
    top: 0; bottom: 0;
    width: 260px;
    height: 100%;
    min-height: unset;
    z-index: 200;
    transform: translateX(-280px);
    will-change: transform;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
  }
  #sidebar.open {
    transform: translateX(0);
    box-shadow: 6px 0 28px rgba(0,0,0,.22);
  }

  /* Overlay sidebar */
  #sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 199;
  }
  #sidebar-overlay.open { display: block; }

  /* Main content : pleine largeur */
  #main-content { width: 100%; min-width: 0; }
  #view-container { padding: .85rem; }

  /* ── Topbar ────────────────────────────────────────────────────────────── */
  .topbar { padding: .55rem .8rem; gap: .25rem; flex-wrap: nowrap; overflow: hidden; }
  .topbar-left  { flex: 1; min-width: 0; overflow: hidden; gap: .3rem; }
  .topbar-right { gap: .2rem; flex-shrink: 0; align-items: center; }
  .topbar h1, #view-title {
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Masquer le hint clavier "Ctrl+K" */
  .search-trigger-hint { display: none; }
  .search-trigger-btn  { padding: .35rem .4rem; }

  /* Masquer le menu export (trop large pour la topbar) */
  .export-menu { display: none; }

  /* Masquer boutons contextuels (équipe, client) */
  #btn-new-team, #btn-new-client { display: none !important; }

  /* Bouton "Nouvelle tâche" : icône seule */
  #btn-new-task { padding: .42rem .55rem; font-size: 0; gap: 0; }
  #btn-new-task svg { width: 18px; height: 18px; flex-shrink: 0; }

  /* Notif bell */
  #notif-bell { padding: .38rem !important; }

  /* ── Stats ─────────────────────────────────────────────────────────────── */
  .stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Dashboard 2-col ────────────────────────────────────────────────────── */
  .two-col { grid-template-columns: 1fr !important; }

  /* ── Kanban ─────────────────────────────────────────────────────────────── */
  .kanban-board { grid-template-columns: 1fr 1fr !important; }

  /* ── Formulaires ────────────────────────────────────────────────────────── */
  .form-row   { flex-direction: column; }
  .form-row-2 { grid-template-columns: 1fr !important; }
  .form-row-3 { grid-template-columns: 1fr 1fr; }

  /* ── Admin : onglets défilables horizontalement ─────────────────────────── */
  .admin-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab { white-space: nowrap; flex-shrink: 0; }

  /* ── Tables ─────────────────────────────────────────────────────────────── */
  .list-table-wrap    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .billing-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-users-table  { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Modales ────────────────────────────────────────────────────────────── */
  .modal-box  { width: calc(100vw - 1.25rem); max-width: 100%; padding: 1.2rem 1rem; }
  .modal-large, .modal-xlarge { width: calc(100vw - 1.25rem); max-width: 100%; }

  /* ── Billing ────────────────────────────────────────────────────────────── */
  .billing-kpis { grid-template-columns: 1fr 1fr; }
  .billing-toolbar { flex-direction: column; align-items: stretch; gap: .6rem; }
  .billing-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .billing-tab  { flex-shrink: 0; }
  .billing-search { width: 100%; }
  .doc-form-grid { grid-template-columns: 1fr; }

  /* ── Clients / Projets ──────────────────────────────────────────────────── */
  .clients-grid   { grid-template-columns: 1fr; }
  .projects-grid  { grid-template-columns: 1fr; }
  .cpc-grid       { grid-template-columns: 1fr; }
  .admin-teams-grid { grid-template-columns: 1fr; }

  /* ── CE hero ────────────────────────────────────────────────────────────── */
  .ce-hero { flex-direction: column; gap: .75rem; padding: 1rem; }
  .ce-hero-left { flex-direction: column; }
  .ce-hero-actions { flex-direction: row; flex-wrap: wrap; }

  /* ── CE grids ───────────────────────────────────────────────────────────── */
  .ce-grid      { grid-template-columns: 1fr; }
  .ce-row-extra { grid-template-columns: 1fr; }
  .ce-kpi-row   { grid-template-columns: repeat(3, 1fr); }

  /* ── Notification panel ──────────────────────────────────────────────────── */
  .notif-panel { width: min(340px, calc(100vw - 1.5rem)); right: -8px; }

  /* ── Gantt ──────────────────────────────────────────────────────────────── */
  .gantt-scroll { overflow-x: auto; }
  .gantt-filter-bar { gap: .4rem; }

  /* ── Quick-filter ───────────────────────────────────────────────────────── */
  .quick-filter-bar { overflow-x: auto; flex-wrap: nowrap; gap: .3rem; }
  .quick-filter-btn { flex-shrink: 0; }

  /* ── Import wizard ──────────────────────────────────────────────────────── */
  .import-entity-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Login ──────────────────────────────────────────────────────────────── */
  .login-box { width: calc(100vw - 2rem); max-width: 380px; padding: 1.75rem; }

  /* ── Plugin manager ─────────────────────────────────────────────────────── */
  #plugin-manager-wrap > div > div:first-child { flex-wrap: wrap; gap: .6rem; }
}

/* ── 2. Smartphone portrait ≤480px ─────────────────────────────────────── */
@media (max-width: 480px) {

  #view-container { padding: .6rem; }

  /* Stats 1 colonne */
  .stats-grid { grid-template-columns: 1fr !important; }

  /* Kanban 1 colonne */
  .kanban-board { grid-template-columns: 1fr !important; }

  /* Formulaires 1 colonne */
  .form-row-3 { grid-template-columns: 1fr; }

  /* Topbar : masquer recherche */
  #search-trigger-btn { display: none; }

  /* Titre */
  #view-title, .topbar h1 { max-width: 40vw; font-size: .95rem; }

  /* Modales : plein écran depuis le bas */
  .modal { align-items: flex-end; padding: 0; }
  .modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    padding: 1.25rem 1rem 1.5rem;
  }
  .modal-large, .modal-xlarge {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 18px 18px 0 0;
  }

  /* KPIs 2 colonnes */
  .billing-kpis { grid-template-columns: 1fr 1fr; }
  .ce-kpi-row   { grid-template-columns: 1fr 1fr; }

  /* Notification panel pleine largeur */
  .notif-panel { width: calc(100vw - .75rem); right: -4px; }

  /* Admin tabs plus compacts */
  .admin-tab { padding: .35rem .7rem; font-size: .8rem; }

  /* CE */
  .ce-client-name { font-size: 1.1rem; }

  /* Login */
  .login-box { padding: 1.5rem 1.25rem; }
}

/* ── 3. Zones de tap (écrans tactiles) ──────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .btn        { min-height: 38px; }
  .btn-sm     { min-height: 32px; }
  .nav-item   { padding: .65rem .8rem; }
  .admin-tab  { min-height: 36px; }
  .billing-tab { min-height: 34px; }
  .modal-tab  { min-height: 40px; }
  .checklist-item label { min-height: 36px; }
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
}