/* =========================================================
   UI-ADMIN.CSS — Onglet Admin : allègement bureau + adaptation mobile
   Chargé après app.css / shell.css (ordre alphabétique Dash).
   ========================================================= */

/* ---------------------------
   Utilisateurs : création repliée derrière un bouton, la liste passe en premier
--------------------------- */
.admin-create{ margin-bottom: 14px; }
.admin-create > summary{ list-style: none; }
.admin-create > summary::-webkit-details-marker{ display: none; }
.admin-create-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.admin-create-toggle::after{
  content: "\F282";                 /* bi-chevron-down */
  font-family: "bootstrap-icons";
  font-size: 0.8em;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.admin-create[open] > .admin-create-toggle::after{ transform: rotate(180deg); }
.admin-create-toggle:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.admin-create[open] > .admin-form-card{ animation: admin-create-in 200ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes admin-create-in{
  from{ opacity: 0; transform: translateY(-4px); }
  to  { opacity: 1; transform: none; }
}

/* ---------------------------
   Table des utilisateurs : rôle, statut, action d'édition visible
--------------------------- */
#admin-users td.dash-cell p{ margin: 0; }

.admin-role,
.admin-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.admin-role{
  background: var(--bg-muted, light-dark(#eef2f2, #191f28));
  color: var(--text-secondary);
}
.admin-role--superadmin{ background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-ink); }
.admin-role--admin{ background: color-mix(in srgb, var(--primary) 9%, transparent); color: var(--primary-ink); }
.admin-role--limited,
.admin-role--guest{ background: transparent; box-shadow: inset 0 0 0 1px var(--border-color); color: var(--text-muted); }

.admin-status::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.admin-status--on{ color: var(--success-ink, light-dark(#15803d, #4ade80)); }
.admin-status--off{ color: var(--text-muted); }

#admin-users td[data-dash-column="Actions"]{ cursor: pointer; }
.admin-user-edit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 1rem;
  transition: background-color 150ms ease, color 150ms ease;
}
#admin-users tr:hover .admin-user-edit,
.admin-user-edit:hover{
  background: var(--bg-muted, light-dark(#eef2f2, #191f28));
  color: var(--primary-ink);
}
#admin-users td[data-dash-column="last_login_disp"],
#admin-users td[data-dash-column="nb_connexion"],
#admin-users td[data-dash-column="user_id"]{
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
#admin-users td[data-dash-column="username"]{ font-weight: 600; }

/* ---------------------------
   Mobile / tablette portrait (≤ 899px)
--------------------------- */
@media (max-width: 899px){
  /* Onglets principaux et sous-onglets : une rangée qui défile, jamais empilée */
  .admin-main-tabs-parent,
  .admin-inner-tabs-parent{ display: block !important; }

  .admin-main-tabs,
  .admin-inner-tabs{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .admin-main-tabs::-webkit-scrollbar,
  .admin-inner-tabs::-webkit-scrollbar{ display: none; }

  .admin-main-tab,
  .admin-main-tab--selected{
    flex: 1 0 auto !important;
    width: auto !important;
    min-height: 40px;
    padding: 8px 14px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  .admin-inner-tabs{
    gap: 6px !important;
    margin: 0 0 14px !important;
    padding: 0 0 2px !important;
    background: none !important;
    border: 0 !important;
  }
  .admin-inner-tab,
  .admin-inner-tab--selected{
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 36px;
    margin: 0 !important;
    padding: 7px 14px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    font-size: 0.85rem !important;
    scroll-snap-align: start;
  }
  .admin-inner-tab{
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
  }
  .admin-inner-tab--selected{
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-surface)) !important;
    border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important;
    color: var(--primary-ink) !important;
    font-weight: 650 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 767px){
  .admin-page-subtitle{ display: none; }
  .admin-create-toggle{ width: 100%; justify-content: center; min-height: 44px; }

  /* Formulaire : un champ par ligne, pleine largeur */
  .admin-form-card .row-wrap > .form-field{ flex: 1 1 100% !important; min-width: 0 !important; }
  .admin-form-card .input,
  .admin-form-card .dd{ width: 100% !important; min-width: 0 !important; }

  /* Utilisateurs : une fiche par compte */
  #admin-users .dash-spreadsheet-container,
  #admin-users .dash-spreadsheet-inner{ overflow: visible !important; }
  #admin-users table{ display: block !important; width: 100% !important; min-width: 0 !important; }
  #admin-users tbody{ display: flex; flex-direction: column; gap: 10px; }
  #admin-users tr:has(> th){ display: none !important; }
  #admin-users tr:has(> td){
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 12px;
    height: auto !important;
    padding: 12px 52px 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-surface);
  }
  #admin-users td.dash-cell{
    display: contents;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }
  #admin-users td.dash-cell .dash-cell-value{
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    text-align: left !important;
  }
  #admin-users td.dash-cell::before{
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
  }
  #admin-users td[data-dash-column="responsable_code"]::before{ content: "Code resp."; }
  #admin-users td[data-dash-column="nb_connexion"]::before{ content: "Connexions"; }
  #admin-users td[data-dash-column="last_login_disp"]::before{ content: "Dernière"; }
  #admin-users td[data-dash-column="role_badge"]::before{ content: "Rôle"; }
  #admin-users td[data-dash-column="active_badge"]::before{ content: "Statut"; }
  #admin-users td[data-dash-column="full_name"]::before{ content: "Nom"; }
  #admin-users td.dash-cell:has(.dash-cell-value:empty){ display: none; }

  /* En-tête de fiche : identifiant, ID discret ; édition en haut à droite */
  #admin-users td[data-dash-column="username"]{ display: block; grid-column: 1 / -1; order: -2; font-size: 1rem; }
  #admin-users td[data-dash-column="user_id"]{ display: none; }
  #admin-users td[data-dash-column="Actions"]{ display: block; position: absolute; top: 8px; right: 8px; }
  #admin-users td[data-dash-column="Actions"] .admin-user-edit{ width: 40px; height: 40px; }

  /* Arbres : la table garde son défilement horizontal, la barre d'actions passe à la ligne */
  .dt-admin-actions{ flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce){
  .admin-create-toggle::after,
  .admin-create[open] > .admin-form-card{ transition: none; animation: none; }
}

/* Clic sur « Modifier » : pas de cadre de cellule active du tableur */
#admin-users td.dash-cell.focused,
#admin-users td.dash-cell.cell--selected{
  background-color: inherit !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------
   Liens d'info IZICOD : formulaire d'ajout + barre d'enregistrement
--------------------------- */
.izilink-form{ padding: 16px; }
.izilink-form-grid{
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) minmax(220px, 1.4fr) 90px;
  gap: 12px 14px;
  align-items: end;
}
.izilink-form-grid .form-field{ min-width: 0; margin: 0; }
.izilink-form-grid .input,
.izilink-form-grid .dd{ width: 100%; }
.izilink-f-active{ grid-column: 1 / -1; }
.izilink-active label{ display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--text-secondary); cursor: pointer; }

.izilink-form-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.izilink-hint{ font-size: 0.84rem; color: var(--text-muted); min-height: 1.3em; }
.izilink-add-btn{ display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.izilink-add-btn:disabled{ opacity: 0.5; cursor: not-allowed; }

.izilink-savebar{
  position: sticky;
  bottom: 12px;
  z-index: 20;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px 10px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 7%, var(--bg-surface));
  box-shadow: 0 6px 20px -8px rgba(15, 23, 42, 0.25);
  animation: admin-create-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.izilink-savebar-text{ font-size: 0.88rem; font-weight: 600; color: var(--primary-ink); }
.izilink-savebar .btn{ display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 1100px){
  .izilink-form-grid{ grid-template-columns: 1fr 1fr; }
  .izilink-f-url{ grid-column: 1 / -1; }
}
@media (max-width: 599px){
  .izilink-form-grid{ grid-template-columns: 1fr; }
  .izilink-form-foot{ flex-direction: column; align-items: stretch; }
  .izilink-add-btn{ justify-content: center; min-height: 44px; }
  .izilink-savebar{ flex-direction: column; align-items: stretch; }
}