/* ══════════════════════════════════════════════════════════
   ExpiraHub — mobile.css
   Responsive complet : 320px → 768px
   À charger EN DERNIER après auth.css, dashboard.css, documents.css
   ══════════════════════════════════════════════════════════ */

/* ── Utilitaires ─────────────────────────────────────────── */
:root {
  --mob-gap:   .875rem;
  --mob-pad:   .75rem;
  --mob-r:     12px;
}

/* ════════════════════════════════════════════════════════
   NAVBAR — toutes pages
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .navbar {
    padding: 0 .875rem;
    height: 52px;
  }

  .brand-name { font-size: 16px; }
  .brand-icon { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }

  /* Cache le nom utilisateur, garde l'avatar */
  .user-name { display: none; }

  /* Rétrécit le bouton "Ajouter" */
  .nav-btn {
    padding: 6px 12px;
    font-size: 12px;
    gap: 4px;
  }
  .nav-btn span { display: none; } /* cache le texte si besoin */

  /* Pill utilisateur plus compacte */
  .nav-user {
    padding: 3px 8px 3px 3px;
    gap: 0;
  }

  .dropdown {
    min-width: 190px;
    right: -8px;
  }
}

@media (max-width: 400px) {
  .nav-btn { padding: 6px 10px; font-size: 0; }
  .nav-btn .ti { font-size: 16px; }
  /* N'affiche que l'icône + sur très petit écran */
}

/* ════════════════════════════════════════════════════════
   PAGE WRAPPER
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .page-wrap {
    padding: 1rem var(--mob-gap) 5rem;
  }
}

/* ════════════════════════════════════════════════════════
   PROFILS BAR (dashboard)
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .profiles-bar {
    gap: 8px;
    margin-bottom: 1rem;
  }
  .profiles-label { display: none; }
  .profiles-list {
    gap: 5px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .profiles-list::-webkit-scrollbar { display: none; }

  .profile-chip {
    white-space: nowrap;
    font-size: 12px;
    padding: 5px 12px;
    flex-shrink: 0;
  }
}

/* ════════════════════════════════════════════════════════
   STATS GRID — dashboard et notifications
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .stats-grid,
  .notif-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 1.25rem;
  }

  .stat-card {
    padding: 1rem;
    gap: 10px;
    border-radius: 12px;
  }

  .stat-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; }
  .stat-icon .ti { font-size: 20px; }
  .stat-num { font-size: 22px; }
  .stat-lbl { font-size: 11.5px; }
}

@media (max-width: 768px) {
  .nstat-card { padding: 1rem; border-radius: 12px; }
  .nstat-num  { font-size: 24px; }
  .nstat-lbl  { font-size: 11.5px; }
  .nstat-trend { font-size: 10px; padding: 2px 6px; }
}

/* ════════════════════════════════════════════════════════
   ALERTES (dashboard)
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .alerts-section { margin-bottom: 1.25rem; }

  .alert-item {
    padding: .75rem;
    gap: 10px;
    border-radius: 10px;
  }

  .alert-icon { width: 34px; height: 34px; font-size: 17px; border-radius: 8px; }
  .alert-name { font-size: 13px; }
  .alert-meta { font-size: 11px; }
  .alert-days {
    font-size: 11px;
    padding: 3px 8px;
    white-space: nowrap;
  }

  /* Masque le bouton modifier sur mobile dans les alertes (accès via la carte) */
  .alert-item .doc-btn { display: none; }
}

/* ════════════════════════════════════════════════════════
   SECTION HEADER + FILTRES (dashboard)
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
    margin-bottom: .75rem;
  }

  .section-title { font-size: 14px; }
  .section-title .ti { font-size: 16px; }

  .section-filters {
    gap: 4px;
    flex-wrap: wrap;
  }

  .filter-btn {
    padding: 4px 11px;
    font-size: 11.5px;
  }
}

/* ════════════════════════════════════════════════════════
   CARDS DOCUMENTS (dashboard)
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .docs-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .doc-card { border-radius: 12px; }

  .doc-card-header {
    padding: .75rem .875rem .625rem;
  }

  .doc-type-icon {
    width: 36px; height: 36px;
    font-size: 18px; border-radius: 8px;
  }

  .doc-badge { font-size: 10.5px; padding: 3px 9px; }

  .doc-card-body { padding: .25rem .875rem .75rem; }
  .doc-name { font-size: 13.5px; }
  .doc-type { font-size: 11px; }
  .doc-profile, .doc-expiry, .doc-files { font-size: 11.5px; margin-top: 4px; }

  .doc-card-footer {
    padding: .5rem .875rem;
    justify-content: flex-end;
  }

  /* Rend les boutons légèrement plus grands pour le touch */
  .doc-btn { width: 36px; height: 36px; font-size: 17px; border-radius: 8px; }
}

/* ════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Header */
  .notif-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.25rem;
  }
  .notif-page-header-left h1 { font-size: 18px; }
  .notif-page-header-left p  { font-size: 12px; }

  /* Tabs wrapper */
  .notif-tabs-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
    margin-bottom: 1rem;
  }

  .notif-tabs {
    width: 100%;
    justify-content: stretch;
  }

  .notif-tab {
    flex: 1;
    padding: 7px 8px;
    font-size: 11.5px;
    gap: 4px;
    justify-content: center;
  }

  .notif-tab i { display: none; } /* cache icône sur petit écran */
  .tab-count { font-size: 10px; padding: 1px 5px; }

  /* Bouton actualiser */
  .notif-tabs-wrap > .btn-test {
    align-self: flex-end;
    font-size: 12px;
    padding: 6px 12px;
  }

  /* Notif items */
  .notif-item {
    padding: .875rem;
    gap: 10px;
    flex-wrap: wrap;
    border-radius: 11px;
  }

  .notif-doc-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 10px; }

  .notif-doc-name { font-size: 13px; }

  .notif-meta { gap: 6px; }
  .notif-chip { font-size: 10.5px; padding: 2px 7px; }

  .notif-right {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    border-top: 1px solid var(--border);
    padding-top: .5rem;
    margin-top: .125rem;
  }

  .notif-send-date { font-size: 11px; }
  .notif-days-badge { font-size: 11px; padding: 3px 9px; }

  /* Préférences */
  .prefs-card { border-radius: 13px; }
  .prefs-header { padding: 1rem 1.125rem; gap: 10px; }
  .prefs-header-icon { width: 36px; height: 36px; font-size: 17px; }
  .prefs-header-text h3 { font-size: 14px; }
  .prefs-header-text p  { font-size: 11px; }
  .prefs-body { padding: .75rem 1rem; gap: 5px; }

  .pref-item {
    padding: .75rem .875rem;
    border-radius: 10px;
    flex-wrap: nowrap;
  }
  .pref-item-left { gap: 9px; }
  .pref-icon { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
  .pref-info h4 { font-size: 12.5px; }
  .pref-info p  { font-size: 11px; }

  .prefs-footer { padding: .75rem 1rem; }

  /* Cron card */
  .cron-card { border-radius: 13px; }
  .cron-header { padding: 1rem 1.125rem; }
  .cron-header-icon { width: 36px; height: 36px; font-size: 17px; }
  .cron-header-text h3 { font-size: 14px; }
  .cron-header-text p  { font-size: 11px; }
  .cron-body { padding: 1rem; gap: 10px; }
  .cron-block-body code { font-size: 11px; line-height: 1.8; word-break: break-all; }
  .cron-status { font-size: 12px; padding: .75rem; }

  /* Historique groupes */
  .history-date-label { font-size: 10.5px; }

  /* Empty state */
  .empty-notif { padding: 2.5rem 1.25rem; border-radius: 13px; }
  .empty-notif-icon { width: 54px; height: 54px; font-size: 24px; border-radius: 14px; }
  .empty-notif h3 { font-size: 15px; }
  .empty-notif p  { font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════
   PROFIL PAGE — layout sidebar + main
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .profile-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: .875rem var(--mob-gap) 4rem;
  }

  .profile-sidebar { position: static; gap: .75rem; }

  /* Carte identité compacte */
  .profile-card-identity {
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: 14px;
  }
  .profile-card-identity::before { height: 60px; }

  .avatar-circle { width: 68px; height: 68px; font-size: 22px; }
  .avatar-upload-btn { width: 24px; height: 24px; font-size: 11px; }

  .identity-name  { font-size: 15px; }
  .identity-email { font-size: 11.5px; margin-bottom: .75rem; }
  .identity-badge { font-size: 11px; padding: 3px 10px; margin-bottom: 1rem; }

  .identity-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding-top: .75rem;
  }
  .identity-stat-num { font-size: 17px; }
  .identity-stat-lbl { font-size: 10px; }

  /* Sidebar nav → scroll horizontal */
  .sidebar-nav {
    display: flex;
    overflow-x: auto;
    border-radius: 11px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }

  .sidebar-nav-item {
    border-bottom: none;
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12.5px;
    padding: 10px 14px;
    border-right: none;
    border-top: none;
  }

  .sidebar-nav-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--jade);
    background: var(--jade-glow);
  }

  /* Sections */
  .profile-section { border-radius: 13px; }

  .section-head { padding: 1rem 1.125rem; gap: 10px; }
  .section-head-icon { width: 34px; height: 34px; font-size: 17px; border-radius: 9px; }
  .section-head-info h3 { font-size: 14px; }
  .section-head-info p  { font-size: 11.5px; }

  .section-body { padding: 1.125rem; }

  /* Form rows → une colonne */
  .form-row {
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-bottom: .75rem;
  }

  .field-group label { font-size: 12px; }
  .field-group input,
  .field-group select,
  .field-group textarea {
    padding: 9px 12px;
    font-size: 13px;
  }
  .input-icon-wrap input { padding-left: 33px !important; }
  .field-hint { font-size: 11px; }

  .section-footer {
    padding: .875rem 1.125rem;
    flex-direction: column;
    align-items: stretch;
    gap: .625rem;
    background: var(--bg, #FAFBFC);
  }
  .save-btn { justify-content: center; width: 100%; padding: 11px; }
  .save-status { text-align: center; font-size: 12px; }

  /* Thème */
  .theme-grid { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
  .theme-option { padding: .625rem; border-radius: 9px; }
  .theme-preview { height: 46px; }
  .theme-name { font-size: 11.5px; }

  /* Accent colors */
  .accent-grid { gap: 8px; margin-top: 1rem; }
  .accent-option { width: 32px; height: 32px; }

  /* Format de date */
  .date-format-opt { font-size: 12px !important; padding: 7px 12px !important; }

  /* Notifications toggles */
  .notif-item {
    padding: .75rem .875rem;
    border-radius: 9px;
  }
  .notif-info h4 { font-size: 13px; }
  .notif-info p  { font-size: 11px; }

  /* Sessions */
  .session-item {
    padding: .75rem;
    border-radius: 9px;
    gap: 10px;
  }
  .session-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 9px; }
  .session-device { font-size: 12.5px; }
  .session-meta   { font-size: 11px; }
  .session-current { font-size: 10.5px; padding: 2px 8px; }

  /* Danger zone */
  .danger-item {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem;
    border-radius: 10px;
  }
  .danger-btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════
   DOCUMENTS PAGE — header + table
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .docs-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
  }
  .docs-page-header h1 { font-size: 18px; }
  .docs-page-header h1 .ti { font-size: 20px; }

  /* Barre de recherche pleine largeur */
  .docs-search { width: 100%; }

  /* Filtres en scroll horizontal */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 1rem;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    padding: 5px 12px;
  }

  /* Table → cache colonnes moins importantes */
  .docs-table-wrap { border-radius: 12px; overflow-x: auto; }

  .docs-table thead th,
  .docs-table td { padding: 10px 12px; font-size: 12.5px; }

  /* Cache : Type (col 2), Profil (col 3), Fichiers (col 4) */
  .docs-table thead th:nth-child(2),
  .docs-table td:nth-child(2),
  .docs-table thead th:nth-child(3),
  .docs-table td:nth-child(3),
  .docs-table thead th:nth-child(4),
  .docs-table td:nth-child(4) { display: none; }

  .doc-name-text { font-size: 13px; }
  .doc-type-text { font-size: 11px; }

  .doc-type-dot { width: 32px; height: 32px; font-size: 15px; border-radius: 8px; }

  /* Boutons d'action dans la table */
  .row-actions { gap: 5px; }
  .doc-btn { width: 34px; height: 34px; font-size: 16px; }
}

/* ════════════════════════════════════════════════════════
   MODAL (documents, profils)
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .modal {
    width: 100%;
    max-width: 100%;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
  }

  /* Handle visuel "bottom sheet" */
  .modal::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--border2);
    border-radius: 2px;
    margin: .75rem auto 0;
  }

  .modal-header {
    padding: .875rem 1.125rem;
    border-radius: 0;
  }
  .modal-header h2 { font-size: 15px; }

  .form-grid {
    grid-template-columns: 1fr;
    padding: 1rem 1.125rem;
    gap: .875rem;
  }

  .modal-footer {
    padding: .875rem 1.125rem;
    flex-direction: column;
    gap: .5rem;
  }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════
   PROFILS PAGE — grille
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .profiles-grid {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  .profile-card { border-radius: 12px; }
  .profile-card-header { padding: 1.25rem 1rem; }
  .profile-avatar { width: 44px; height: 44px; font-size: 22px; border-radius: 11px; }

  .profile-card-name { font-size: 13.5px; }
  .profile-card-type { font-size: 11px; }
  .profile-card-docs { font-size: 11px; }
  .profile-card-footer { padding: .5rem .75rem; gap: 5px; justify-content: center; }
  .profile-card-add { min-height: 150px; }
}

@media (max-width: 420px) {
  .profiles-grid { grid-template-columns: 1fr; }
  .identity-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════
   AUTH PAGES (login, register, reset)
   ════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .auth-container { padding: 1rem .875rem; align-items: flex-start; padding-top: 2rem; }

  .auth-card {
    padding: 2rem 1.25rem;
    border-radius: 16px;
  }

  .brand { margin-bottom: 1.5rem; }
  .brand-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 9px; }
  .brand-name { font-size: 20px; }

  .otp-header { margin-bottom: 1.25rem; }
  .otp-icon { width: 46px; height: 46px; font-size: 22px; }
  .otp-header h2 { font-size: 17px; }
  .otp-header p  { font-size: 12.5px; }

  /* OTP boxes plus petits */
  .otp-boxes { gap: 5px; }
  .otp-box { width: 40px; height: 50px; font-size: 20px; border-radius: 9px; }

  .field input { padding: 10px 12px; font-size: 13.5px; }
  .btn-primary { padding: 11px; font-size: 13.5px; }

  /* Success */
  .success-icon { width: 52px; height: 52px; font-size: 24px; }
  .success-wrap h2 { font-size: 17px; }
  .success-wrap p  { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════
   BOTTOM NAV (optionnel — navigation mobile fixe en bas)
   Ajouter manuellement si souhaité
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Padding bas pour ne pas cacher le contenu derrière une éventuelle bottom bar */
  .page-wrap,
  .profile-layout { padding-bottom: 5rem; }

  /* Zone de scroll propre sur iOS */
  body { -webkit-overflow-scrolling: touch; }

  /* Supprime les hover states qui peuvent "coller" sur touch */
  @media (hover: none) {
    .doc-card:hover,
    .stat-card:hover,
    .nstat-card:hover,
    .alert-item:hover,
    .notif-item:hover,
    .profile-card:hover,
    .pref-item:hover {
      box-shadow: none;
      transform: none;
    }
  }
}

/* ════════════════════════════════════════════════════════
   TOUCH — agrandit les cibles cliquables à 44px min
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .toggle { width: 44px; height: 26px; }
  .toggle-track::after { width: 20px; height: 20px; }
  .toggle input:checked + .toggle-track::after { transform: translateX(18px); }

  .filter-btn,
  .notif-tab,
  .profile-chip,
  .reminder-chip {
    min-height: 36px;
  }

  .doc-btn,
  .modal-close,
  .avatar-upload-btn {
    min-width: 36px;
    min-height: 36px;
  }
}

/* ════════════════════════════════════════════════════════
   TRÈS PETIT (320px — Galaxy S5, Moto G4)
   ════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  :root { --mob-gap: .625rem; }

  .page-wrap { padding: .75rem var(--mob-gap) 5rem; }

  .notif-stats,
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }

  .stat-num { font-size: 20px; }
  .stat-icon { width: 36px; height: 36px; }

  .notif-tab { font-size: 10.5px; padding: 6px 6px; }

  .pref-icon { display: none; }

  .theme-grid { grid-template-columns: 1fr 1fr; }
}