/* Chemin source : src/static/css/custom.css
   SOMMAIRE //
   - Compléments Tailwind (boutons, onglets, cards, navigation)
   - Layout cartographie et paramètres (TopoSphere, overlays, panneaux, marges internes)
   - Noeuds coupes (cartographie)
   - Sidebar parametres : alignement des items + fond apres icone
   - Parametres Auth : accordions (bandeau pleine hauteur)
   - Scroll interne des onglets (classes tab-scroll-root/tab-scroll-main)
   - Node-editor (cartographie) : champs "Nom" + option d'affichage titre liaison
   - Modales cartographie (groupes) : boutons/inputs alignés sur le node-editor
   - Filtres cartographie (établissements / CSP)
   - Ajustements transverses (états body, loaders, OTP, helpers plein écran)
   - Identifiants (secrets) : masquage de l'icône native des mots de passe
   - Monitoring cartographie (pastilles + alertes + simulation)
   - Simulation VLAN (liaisons colorees + gris hors VLAN + legende)
   - Login : fond anime (canvas) et trame de fond
   - Prestataires : grille cards providers + favoris contacts
   - Ajustements mobile (topbar, recherche, parametres, carto)
*/

/* ---------- Logo (SVG recolore en blanc) ---------- */
.nowip-logo-white{
  display:block;
  filter:brightness(0) invert(1);
}
.nowip-logo-badge{
  transform:scale(1.2);
  transform-origin:center;
}

/* ---------- Boutons génériques ---------- */
.btn-secondary{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:600;
  color:#4338CA;text-decoration:none;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(99,102,241,.35);
  border-radius:.75rem;
  box-shadow:0 8px 20px rgba(67,56,202,.12);
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn-secondary:hover{
  background:#EEF2FF;
  border-color:#4338CA;
  color:#312E81;
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(79,70,229,.18);
}
.btn-secondary:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(99,102,241,.35),0 12px 26px rgba(79,70,229,.18);
}
.btn-secondary:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(67,56,202,.18);
}

/* ---------- Onglets horizontaux ---------- */
.tab-link{
  position:relative;
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.5rem .875rem;
  font-size:.875rem;line-height:1.25rem;
  background:transparent;color:#374151;            /* Gray-700 */
  border:1px solid transparent;border-radius:.5rem;/* pilule */
  user-select:none;
  transition:background-color .18s,color .18s,
             box-shadow .18s,transform .1s;
}
/* survol */
.tab-link:hover{
  background:#EEF2FF;           /* Indigo-50 */
  color:#4338CA;                /* Indigo-700 */
}
/* clic (pression) */
.tab-link:active{
  transform:translateY(1px) scale(.98);
}
/* actif (classe .is-active ajoutée par JS) */
.tab-link.is-active{
  background:#f8faff;           /* Indigo-100 */
  color:#1E40AF;                /* Indigo-900 */
  box-shadow:inset 0 -2px 0 #6366F1; /* petit trait bas */
}
/* focus clavier */
.tab-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(99,102,241,.45);        /* Indigo focus ring */
}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;
  padding:1rem;box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.card-title{font-weight:600;margin-bottom:.25rem;}

/* ---------- Etats vides ---------- */
.nowip-empty-state{
  border:1px solid #e2e8f0;
  border-radius:1rem;
  background:#fff;
  padding:2rem;
  text-align:center;
  font-size:.875rem;
  line-height:1.25rem;
  color:#64748b;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}

/* ---------- Sidebar nav ---------- */
.nav-item{
  display:block;padding:.5rem .75rem;border-radius:.375rem;
  font-size:.875rem;color:#374151;text-decoration:none;
}
.nav-item:hover{background:#f8fafc;}
.nav-item.is-active{background:#f3f4f6;font-weight:500;}

/* ---------- Recherche globale (stabilisation scope) ---------- */
#global-search-scope-wrapper{
  flex:0 0 7rem;
  width:7rem;
  min-width:7rem;
}
#global-search-scope-label{
  flex:1 1 auto;
  text-align:center;
}
#global-search-scope-list{
  width:7rem;
  min-width:7rem;
}
#global-search-divider{
  flex:0 0 1px;
}
#global-search-suggestions{
  max-height:360px;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:manipulation;
}
#global-search-suggestions .search-suggestion-icon img{
  transform:scale(1.1);
  transform-origin:center;
}
#global-search-modal .search-modal-icon img{
  transform:scale(1.1);
  transform-origin:center;
}
#global-search-spinner .global-search-spinner,
#global-search-modal-spinner .global-search-spinner{
  display:inline-block;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(99,102,241,.3);
  border-top-color:#6366f1;
  animation:spin 0.8s linear infinite;
}
#global-search-modal-spinner .global-search-spinner-lg{
  width:22px;
  height:22px;
  border-width:3px;
}
#global-search-modal-results.global-search-results-loading #global-search-modal-content{
  visibility:hidden;
  pointer-events:none;
}
#global-search-modal-panel{
  display:flex;
  flex-direction:column;
  max-width:86.4rem;
  max-height:calc(100vh - 32px);
  overflow:hidden;
}
#global-search-modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
}
#global-search-modal-table{
  table-layout:fixed;
}
#global-search-modal-col-name{
  width:36%;
}
#global-search-modal-col-type{
  width:16%;
}
#global-search-modal-col-org{
  width:24%;
}
#global-search-modal-col-location{
  width:24%;
}
#global-search-modal-table thead th{
  vertical-align:middle;
  position:relative;
}
.global-search-col-resizer{
  position:absolute;
  top:0;
  right:0;
  width:10px;
  height:100%;
  cursor:col-resize;
  touch-action:none;
}
.global-search-col-resizer::after{
  content:'';
  position:absolute;
  top:20%;
  bottom:20%;
  left:4px;
  width:1px;
  background:rgba(148,163,184,.55);
}
.global-search-col-resizer:hover::after{
  background:rgba(99,102,241,.9);
}
.global-search-sort-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  border:none;
  background:none;
  color:inherit;
  font:inherit;
  text-transform:inherit;
  letter-spacing:inherit;
  cursor:pointer;
}
.global-search-sort-button:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(129,140,248,.6);
  border-radius:999px;
}
.global-search-sort-indicator::after{
  content:'\2195';
  font-size:.85em;
}
.global-search-sort-button[data-sort-direction='asc'] .global-search-sort-indicator::after{
  content:'\2191';
}
.global-search-sort-button[data-sort-direction='desc'] .global-search-sort-indicator::after{
  content:'\2193';
}
.global-search-sort-button[data-sort-direction='asc'],
.global-search-sort-button[data-sort-direction='desc']{
  color:#4338ca;
}
#global-search-modal-table td{
  word-break:break-word;
}

/* ---------- TopoSphere SVG toujours en fond ---------- */
#topology-container svg{
  position:relative;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  box-sizing:border-box;
}
#topology-container{
  height:100% !important;
  min-height:500px !important;
  padding:0 10px 10px;
  box-sizing:border-box;
}

/* ---------- Noeuds coupes (cartographie) ---------- */
#topology-container .node-cut{
  opacity:0.45;
  filter:grayscale(0.7);
}

/* ========== Panel d’édition (cartographie) ========== */
#EditObjectPanel{
  position:absolute;top:10px;right:10px;bottom:10px;z-index:2000; /* borné en hauteur dans le conteneur */
  width:280px;padding:10px;display:none;flex-direction:column;gap:10px;
  background:rgba(255,255,255,.95);
  border:1px solid #d0d7de;border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  overflow-y:auto; /* scroll interne au panneau */
}
#EditObjectPanel.show{display:flex;}
#EditObjectPanel .edit-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;
}
#EditObjectPanel .edit-header .title{
  font-size:14px;font-weight:600;color:#111827;
}
#EditObjectPanel .edit-header .close{
  background:none;border:none;cursor:pointer;font-size:18px;line-height:1;
  width:28px;height:28px;border-radius:6px;color:#6b7280;
}
#EditObjectPanel .edit-header .close:hover{background:rgba(0,0,0,.06);}
#EditObjectPanel .field{display:flex;flex-direction:column;gap:6px;}
#EditObjectPanel .field>span{font-size:12px;color:#374151;}
#EditObjectPanel input{
  width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;
  background:#fff;outline:none;
}
#EditObjectPanel input:focus{
  border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.3);
}
#EditObjectPanel .actions{display:flex;justify-content:flex-end;gap:8px;}
#EditObjectPanel .actions .save{
  padding:8px 12px;border:1px solid #2563eb;background:#3b82f6;color:#fff;
  border-radius:6px;font-weight:600;cursor:pointer;
}
#EditObjectPanel .actions .save:hover{background:#2563eb;}

/* ---------- Node-editor (cartographie) : champ Nom + option liaison ---------- */
#EditObjectPanel.node-editor-panel .node-editor-info-field,
#EditObjectPanel.node-editor-panel .node-editor-link-option {
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(248,250,255,0.92) 0%, rgba(255,255,255,0.96) 100%);
  box-shadow: 0 8px 20px rgba(15,23,42,0.10);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#EditObjectPanel.node-editor-panel .node-editor-info-field:hover,
#EditObjectPanel.node-editor-panel .node-editor-link-option:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,0.35);
  box-shadow: 0 14px 28px rgba(15,23,42,0.14);
}
#EditObjectPanel.node-editor-panel .node-editor-info-field:focus-within,
#EditObjectPanel.node-editor-panel .node-editor-link-option:focus-within {
  border-color: rgba(99,102,241,0.55);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.22), 0 14px 28px rgba(15,23,42,0.14);
}

#EditObjectPanel.node-editor-panel .node-editor-info-field {
  padding: 12px 14px;
  gap: 8px;
}
#EditObjectPanel.node-editor-panel .node-editor-info-field .node-editor-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
}
#EditObjectPanel.node-editor-panel .node-editor-info-field .node-editor-input {
  border-color: rgba(99,102,241,0.30);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
#EditObjectPanel.node-editor-panel .node-editor-info-field .node-editor-input:focus,
#EditObjectPanel.node-editor-panel .node-editor-info-field .node-editor-input:focus-visible {
  border-color: rgba(99,102,241,0.65);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.18), 0 1px 3px rgba(15,23,42,.10);
}

#EditObjectPanel.node-editor-panel .node-editor-info-block {
  /* Empêche le clipping de la bordure haute lors du hover (translateY) du premier champ. */
  padding-top: 2px;
}

#EditObjectPanel.node-editor-panel .node-editor-link-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#EditObjectPanel.node-editor-panel .node-editor-link-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
}
#EditObjectPanel.node-editor-panel .node-editor-link-option .node-editor-toggle-track {
  flex: 0 0 auto;
}
#EditObjectPanel.node-editor-panel .node-editor-link-option .node-editor-toggle-input:disabled + .node-editor-toggle-track {
  opacity: 0.65;
  cursor: not-allowed;
}
#EditObjectPanel.node-editor-panel .node-editor-link-option-label {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 400; /* demandé : enlever le gras */
  line-height: 1.35;
  color: #0F172A;
  cursor: pointer;
  user-select: none;
}

/* ---------- Modales groupes cartographie ---------- */
.cartography-group-dialog {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0F172A;
}
.cartography-group-dialog__content{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cartography-group-dialog__label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:#0F172A;
}
.cartography-group-dialog__input{
  border:1px solid rgba(67,56,202,.35);
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  color:#0F172A;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.08);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.cartography-group-dialog__input:focus-visible{
  outline:none;
  border-color:#4338CA;
  box-shadow:0 0 0 2px rgba(99,102,241,.25),0 1px 3px rgba(15,23,42,.12);
  background:#F8FAFF;
}
.cartography-group-dialog__helper{
  font-size:12px;
  color:#475569;
  margin:0;
}
.cartography-group-dialog__error{
  font-size:12px;
  color:#B91C1C;
  display:none;
}
.cartography-group-dialog__footer{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.cartography-group-dialog__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  padding:8px 16px;
  font-size:14px;
  line-height:1.25;
  font-weight:600;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.cartography-group-dialog__button:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}
.cartography-group-dialog__button--ghost{
  border:1px solid rgba(99,102,241,.35);
  background:#fff;
  color:#4338CA;
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}
.cartography-group-dialog__button--ghost:hover{
  border-color:#4338CA;
  background:#EEF2FF;
}
.cartography-group-dialog__button--primary{
  border:none;
  background:#4F46E5;
  color:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.12);
}
.cartography-group-dialog__button--primary:hover{
  background:#4338CA;
  box-shadow:0 2px 6px rgba(67,56,202,.25);
}
.cartography-group-dialog__button--danger{
  border:none;
  background:#DC2626;
  color:#fff;
  box-shadow:0 2px 6px rgba(185,28,28,.3);
}
.cartography-group-dialog__button--danger:hover{
  background:#B91C1C;
  box-shadow:0 4px 12px rgba(185,28,28,.3);
}

/* ---------- Modale de confirmation (fallback identifiants) ---------- */
.nowip-confirm-modal-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15,23,42,.55);
  z-index:10000;
}
.nowip-confirm-modal-overlay.hidden{
  display:none;
}
.nowip-confirm-modal{
  width:min(480px, 100%);
  max-height:calc(100vh - 32px);
  overflow:auto;
  padding:16px 18px;
  border-radius:14px;
  border:1px solid rgba(99,102,241,.35);
  background:rgba(255,255,255,.98);
  box-shadow:0 24px 50px rgba(0,0,0,.25);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:#0F172A;
}
.nowip-confirm-modal__title{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.25;
  font-weight:700;
  color:#0F172A;
}
.nowip-confirm-modal__message{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.45;
  color:#334155;
}
.nowip-confirm-modal__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.nowip-confirm-modal__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  padding:10px 14px;
  font-size:14px;
  line-height:1.2;
  font-weight:600;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .1s ease;
}
.nowip-confirm-modal__btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(99,102,241,.35),0 12px 26px rgba(79,70,229,.18);
}
.nowip-confirm-modal__btn:active{
  transform:translateY(1px);
}
.nowip-confirm-modal__btn--cancel{
  border:1px solid rgba(99,102,241,.35);
  background:#fff;
  color:#4338CA;
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}
.nowip-confirm-modal__btn--cancel:hover{
  border-color:#4338CA;
  background:#EEF2FF;
}
.nowip-confirm-modal__btn--primary{
  border:none;
  background:#4F46E5;
  color:#fff;
  box-shadow:0 2px 8px rgba(79,70,229,.28);
}
.nowip-confirm-modal__btn--primary:hover{
  background:#4338CA;
  box-shadow:0 4px 14px rgba(67,56,202,.28);
}
.nowip-confirm-modal__btn--danger{
  border:none;
  background:#DC2626;
  color:#fff;
  box-shadow:0 2px 6px rgba(185,28,28,.3);
}
.nowip-confirm-modal__btn--danger:hover{
  background:#B91C1C;
  box-shadow:0 4px 12px rgba(185,28,28,.3);
}

/* ---------- Filtres cartographie (établissements / CSP) ---------- */
.carto-filter-wrapper{position:relative;overflow:visible;}
.carto-filter-trigger{
  background:none transparent;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  outline:none;
  transition:transform .2s,background-color .2s;
  border-radius:3px;
  flex:0 0 auto;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:scale(1);
  position:relative;
}
.carto-filter-trigger.is-open{background:#E2E8F0;}
.carto-filter-panel{
  position:absolute;
  left:calc(100% + 8px);
  top:0;
  display:none;
  flex-direction:column;
  gap:6px;
  background:rgba(255,255,255,0.95);
  padding:8px;
  border-radius:6px;
  z-index:1001;
  border:1px solid #E2E8F0;
  white-space:nowrap;
  min-width:240px;
  max-height:min(500px, calc(100vh - 32px));
  overflow:auto;
  box-shadow:0 10px 24px rgba(15,23,42,0.12);
}
.carto-filter-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}
.carto-filter-title{
  font-size:12px;
  font-weight:600;
  color:#1F2937;
}
.carto-filter-actions{
  display:flex;
  gap:8px;
}
.carto-filter-action{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  border:1px solid #C7D2FE;
  border-radius:9999px;
  background-color:#fff;
  color:#4338CA;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
  box-shadow:0 1px 2px rgba(67,56,202,0.08);
}
.carto-filter-action:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(99,102,241,.25);
}
.carto-filter-search{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #C7D2FE;
  background:rgba(255,255,255,0.94);
  border-radius:9999px;
  padding:6px 12px;
  box-shadow:0 1px 3px rgba(15,23,42,0.08);
  width:100%;
  box-sizing:border-box;
  margin:4px 0;
}
.carto-filter-search-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:#4338CA;
}
.carto-filter-search-input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:12px;
  color:#334155;
  padding:2px 0;
}
.carto-filter-list{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.carto-filter-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border-radius:6px;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
  min-height:32px;
}
.carto-filter-row.is-active{
  background:#f8fafc;
}
.carto-filter-row:not(.is-active) .carto-filter-label{
  color:#475569;
  opacity:.9;
}
.carto-filter-icon{
  background:none;
  border:1px solid transparent;
  cursor:pointer;
  outline:none;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  transition:background-color .2s ease,border-color .2s ease;
}
.carto-link-swatch{
  width:24px;
  height:24px;
  display:block;
}
.carto-link-swatch-path{
  opacity:1;
}
.carto-filter-row:not(.is-active) .carto-link-swatch-path{
  opacity:.45;
}
.carto-filter-label{
  font-size:12px;
  flex:1;
  min-width:0;
}
.carto-filter-state{
  width:18px;
  height:18px;
  pointer-events:none;
  transition:opacity .2s ease;
  border:none;
  outline:none;
}
.carto-filter-switch{
  position:relative;
  width:34px;
  height:18px;
  border-radius:9999px;
  background:#E5E7EB;
  border:1px solid #CBD5E1;
  cursor:pointer;
  outline:none;
  transition:background-color .15s ease,border-color .15s ease;
  padding:0;
}
.carto-filter-switch::after{
  content:'';
  position:absolute;
  top:1px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(15,23,42,.15);
  transition:transform .15s ease;
}
.carto-filter-row.is-active .carto-filter-switch{
  background:#16A34A;
  border-color:#16A34A;
}
.carto-filter-row.is-active .carto-filter-switch::after{
  transform:translateX(16px);
}

/* ---------- Monitoring cartographie (pastilles + alertes) ---------- */
.carto-monitoring-badge{
  pointer-events:none;
  opacity:.95;
}
.carto-monitoring-badge-dot{
  fill:#CBD5E1;
  stroke:rgba(15,23,42,.18);
  stroke-width:1;
  filter:drop-shadow(0 2px 4px rgba(15,23,42,.18));
}
.carto-monitoring-badge-spinner{
  fill:none;
  stroke:#94A3B8;
  stroke-width:2;
  stroke-dasharray:12 8;
  transform-origin:center;
  transform-box:fill-box;
  animation:carto-monitoring-spinner 1s linear infinite;
}
.carto-monitoring-badge.status-ok .carto-monitoring-badge-dot{
  fill:#22C55E;
  stroke:rgba(21,128,61,.35);
}
.carto-monitoring-badge.status-warning .carto-monitoring-badge-dot{
  fill:#F59E0B;
  stroke:rgba(180,83,9,.35);
}
.carto-monitoring-badge.status-paused .carto-monitoring-badge-dot{
  fill:#3B82F6;
  stroke:rgba(30,64,175,.35);
}
.carto-monitoring-badge.status-down .carto-monitoring-badge-dot{
  fill:#EF4444;
  stroke:rgba(185,28,28,.4);
}
.carto-monitoring-badge.status-unknown .carto-monitoring-badge-dot{
  fill:#CBD5E1;
  stroke:rgba(15,23,42,.18);
}
.cartography-monitoring-alert{
  position:absolute;
  top:16px;
  right:16px;
  z-index:20;
  width:min(360px,calc(100% - 32px));
  max-height:calc(100vh - 32px);
  background:#0F172A;
  color:#F8FAFC;
  border-radius:14px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  box-shadow:0 20px 46px rgba(15,23,42,.45);
}
.cartography-monitoring-alert[hidden]{
  display:none !important;
}
.cartography-monitoring-alert-title{
  margin:0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#94A3B8;
}
.cartography-monitoring-alert-message{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:14px;
  font-weight:500;
  color:#F8FAFC;
}
.cartography-monitoring-alert-entry{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cartography-monitoring-alert-entry-title{
  font-weight:700;
  color:#F8FAFC;
  background:none;
  border:none;
  padding:0;
  text-align:left;
  width:100%;
  cursor:pointer;
  font:inherit;
}
.cartography-monitoring-alert-entry-title:hover{
  text-decoration:underline;
}
.cartography-monitoring-alert-entry-title:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,.35);
  border-radius:6px;
}
.cartography-monitoring-alert-entry-detail{
  font-weight:400;
  font-size:13px;
  color:#E2E8F0;
}
.cartography-monitoring-alert-close{
  align-self:flex-start;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(148,163,184,.2);
  color:#F8FAFC;
  font-size:12px;
  font-weight:600;
  padding:6px 12px;
  cursor:pointer;
  transition:background-color .16s ease,box-shadow .16s ease;
}
.cartography-monitoring-alert-close:hover{
  background:rgba(148,163,184,.35);
}
.cartography-monitoring-alert-close:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,.35);
}
.node-alert-halo{
  stroke:#EF4444;
  stroke-width:3;
  fill:none;
  pointer-events:none;
  animation:carto-node-alert-pulse var(--carto-pulse-duration, 1s) ease-in-out infinite;
  animation-delay:var(--carto-pulse-delay, 0ms);
}
path.link-line.carto-link-alert,
line.link-line.carto-link-alert{
  stroke:#EF4444 !important;
  animation:carto-link-alert-pulse var(--carto-pulse-duration, 1s) ease-in-out infinite;
  animation-delay:var(--carto-pulse-delay, 0ms);
}
text.link-label.carto-link-alert{
  fill:#EF4444 !important;
}
@keyframes carto-link-alert-pulse{
  0%{opacity:.35;}
  50%{opacity:1;}
  100%{opacity:.35;}
}
@keyframes carto-node-alert-pulse{
  0%{opacity:.35;}
  50%{opacity:1;}
  100%{opacity:.35;}
}
@keyframes carto-monitoring-spinner{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* ---------- Monitoring simulation (liaisons + halos) ---------- */
.node-monitoring-sim-halo{
  pointer-events:none;
  opacity:.95;
  stroke-width:3;
  fill:none;
}
.node-monitoring-sim-halo.status-ok{
  stroke:#22C55E;
}
.node-monitoring-sim-halo.status-warning{
  stroke:#F59E0B;
}
.node-monitoring-sim-halo.status-paused{
  stroke:#3B82F6;
}
.node-monitoring-sim-halo.status-down{
  stroke:#EF4444;
  animation:carto-node-alert-pulse var(--carto-pulse-duration, 1s) ease-in-out infinite;
  animation-delay:var(--carto-pulse-delay, 0ms);
}
.node-monitoring-sim-halo.status-unknown{
  stroke:#CBD5E1;
}
path.link-line.carto-link-monitoring.status-ok,
line.link-line.carto-link-monitoring.status-ok,
path.link-line-poe.carto-link-monitoring.status-ok{
  stroke:#22C55E !important;
}
path.link-line.carto-link-monitoring.status-warning,
line.link-line.carto-link-monitoring.status-warning,
path.link-line-poe.carto-link-monitoring.status-warning{
  stroke:#F59E0B !important;
}
path.link-line.carto-link-monitoring.status-paused,
line.link-line.carto-link-monitoring.status-paused,
path.link-line-poe.carto-link-monitoring.status-paused{
  stroke:#3B82F6 !important;
}
path.link-line.carto-link-monitoring.status-down,
line.link-line.carto-link-monitoring.status-down,
path.link-line-poe.carto-link-monitoring.status-down{
  stroke:#EF4444 !important;
  animation:carto-link-alert-pulse var(--carto-pulse-duration, 1s) ease-in-out infinite;
  animation-delay:var(--carto-pulse-delay, 0ms);
}
path.link-line.carto-link-monitoring.status-unknown,
line.link-line.carto-link-monitoring.status-unknown,
path.link-line-poe.carto-link-monitoring.status-unknown{
  stroke:#CBD5E1 !important;
}
text.link-label.carto-link-monitoring.status-ok{
  fill:#22C55E !important;
}
text.link-label.carto-link-monitoring.status-warning{
  fill:#F59E0B !important;
}
text.link-label.carto-link-monitoring.status-paused{
  fill:#3B82F6 !important;
}
text.link-label.carto-link-monitoring.status-down{
  fill:#EF4444 !important;
}
text.link-label.carto-link-monitoring.status-unknown{
  fill:#CBD5E1 !important;
}

/* ---------- Simulation VLAN (liaisons + labels) ---------- */
.carto-link-vlan{
  --carto-vlan-color: #3B82F6;
}
.vlan-color-0{ --carto-vlan-color: #22C55E; }
.vlan-color-1{ --carto-vlan-color: #3B82F6; }
.vlan-color-2{ --carto-vlan-color: #F59E0B; }
.vlan-color-3{ --carto-vlan-color: #EF4444; }
.vlan-color-4{ --carto-vlan-color: #14B8A6; }
.vlan-color-5{ --carto-vlan-color: #A855F7; }
.vlan-color-6{ --carto-vlan-color: #0EA5E9; }
.vlan-color-7{ --carto-vlan-color: #F97316; }

path.link-line.carto-link-vlan,
line.link-line.carto-link-vlan,
path.link-line-poe.carto-link-vlan{
  stroke: var(--carto-vlan-color, #3B82F6) !important;
}
text.link-label.carto-link-vlan{
  fill: var(--carto-vlan-color, #3B82F6) !important;
}

path.link-line.carto-link-vlan-muted:not(.carto-link-alert),
line.link-line.carto-link-vlan-muted:not(.carto-link-alert),
path.link-line-poe.carto-link-vlan-muted:not(.carto-link-alert){
  stroke:#CBD5E1 !important;
  opacity:.6;
}
text.link-label.carto-link-vlan-muted:not(.carto-link-alert){
  fill:#94A3B8 !important;
  opacity:.75;
}

.cartography-vlan-legend{
  width:min(360px,calc(100% - 32px));
}
.cartography-vlan-legend .cartography-monitoring-alert-message{
  gap:10px;
}
.cartography-vlan-legend-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cartography-vlan-legend-group + .cartography-vlan-legend-group{
  border-top:1px solid rgba(148,163,184,.2);
  padding-top:8px;
}
.cartography-vlan-legend-group-title{
  margin:0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94A3B8;
}
.cartography-vlan-legend-group-entries{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cartography-vlan-legend-entry{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cartography-vlan-legend-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.cartography-vlan-legend-swatch{
  width:10px;
  height:10px;
  min-width:10px;
  min-height:10px;
  flex:0 0 10px;
  border-radius:999px;
  background:var(--carto-vlan-color, #3B82F6);
  box-shadow:0 0 0 2px rgba(15,23,42,.35);
}
.cartography-vlan-legend-text{
  font-size:13px;
  font-weight:600;
  color:#F8FAFC;
}
.cartography-vlan-legend-empty{
  font-size:13px;
  font-weight:500;
  color:#CBD5E1;
}


/* ---------- Overlays d’hébergement (cartographie) ---------- */
.os-overlay.host  rect{fill:#9b59b6;fill-opacity:.06;stroke:#9c27b0;}
.os-overlay.guest rect{fill:transparent;stroke:#ba68c8;stroke-dasharray:2 2;}
.os-overlay text{font-size:12px;user-select:none;pointer-events:none;}
.os-overlay.host  text{fill:#9c27b0;}
.os-overlay.guest text{fill:#ba68c8;}

/* ---------- Overlays de groupes (pulse visuel) ---------- */
rect.cartography-group-pulse{
  animation:cartography-group-pulse .55s linear forwards;
  filter:drop-shadow(0 0 6px rgba(34,197,94,.35));
}

@keyframes cartography-group-pulse{
  0%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:-48;}
}

/* ---------- Ajustements vue « organisation » ---------- */
body.has-org #sidebar{display:none;}
body.has-org .layout__inner{grid-template-columns:1fr!important;} /* plein écran */

/* ---------- Visibilite ---------- */
[hidden]{
  display:none !important;
}

body.has-org #main{padding-top:0!important;}                /* colle au header */
body.has-org #org-banner{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;}

/* Masquer la sidebar et forcer une seule colonne quand il n'y a pas d'orga sélectionnée */
body.no-sidebar #sidebar{display:none;}
body.no-sidebar .layout__inner{grid-template-columns:1fr!important;}
body.no-sidebar #main{
  padding:0!important;
}

/* Layout cartographie en pleine hauteur (tab Cartographie) */
body.page-cartography #main{
  padding:0!important;
}
body.page-cartography #org-tabs ~ #content,
body.page-cartography #org-tabs + #main-data + #content{
  padding:0!important;
  min-height:0!important;
}

:root{
  --topbar-height: 64px;
}

/* Marges internes globales du layout principal (sans générer de scroll) */
.layout{
  display:flex;
  flex:1;
  min-height:0;
}
body.page-cartography .layout{
  justify-content:center;
}
.layout__inner{
  width:100%;
  flex:1;
  min-height:0;
  height:100%;
  padding:0 25px 25px;
  box-sizing:border-box;
}
.tab-scroll-root{
  min-width:0;
  overflow-x:hidden;
}
.tab-scroll-main{
  min-width:0;
  overflow-x:hidden;
}

/* Sidebar parametres (alignement items + fond apres icone) */
.settings-sidebar-item{
  --settings-sidebar-item-indent:2.75rem;
  --settings-sidebar-item-bg-offset:calc(var(--settings-sidebar-item-indent) - 0.75rem);
  position:relative;
  z-index:0;
  padding-left:var(--settings-sidebar-item-indent);
}
.settings-sidebar-item::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:var(--settings-sidebar-item-bg-offset);
  right:0;
  border-radius:.375rem;
  background-color:transparent;
  box-shadow:none;
  pointer-events:none;
  transition:background-color .15s ease, box-shadow .15s ease;
  z-index:-1;
}
.settings-sidebar-item:hover::before{
  background-color:rgba(255,255,255,.1);
}
.settings-sidebar-item.is-active::before{
  background-color:#fff;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),
             0 4px 6px -4px rgba(0,0,0,.1),
             0 0 0 1px rgba(255,255,255,.6);
}
.settings-sidebar-item.is-active{
  color:#4338ca;
}
.settings-sidebar-item.is-active:hover::before{
  background-color:#fff;
}

/* Layout Paramètres (conteneur principal) */
#settings-page{
  grid-template-columns:minmax(266px, 315px) 1fr;
}

@media (min-width: 1024px){
  #settings-page{
    grid-template-columns:315px 1fr;
  }
}

#settings-sidebar{
  min-width:266px;
  max-width:315px;
}

#settings-page > #main{
  min-width:0;
}

#settings-content-wrapper{
  margin:25px;
  width:calc(100% - 50px);
  max-width:calc(100% - 50px);
  box-sizing:border-box;
}
#settings-content-card{
  width:100%;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
}

/* Parametres Auth (accordions) */
.auth-accordion-section{
  --auth-accent-primary:#4338CA;
  --auth-accent-secondary:#6366F1;
  --auth-surface:#ffffff;
  --auth-surface-alt:#ffffff;
  position:relative;
  border-radius:18px;
  border:1px solid rgba(99,102,241,0.18);
  background:linear-gradient(180deg, var(--auth-surface) 0%, var(--auth-surface-alt) 100%);
  box-shadow:0 20px 35px rgba(15,23,42,0.10);
  overflow:hidden;
}
.auth-accordion-section::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--auth-accent-primary) 0%, var(--auth-accent-secondary) 100%);
  box-shadow:0 4px 10px rgba(67,56,202,0.25);
}
.auth-accordion-section:not([open]){
  box-shadow:0 10px 20px rgba(15,23,42,0.08);
  opacity:1;
}
.auth-accordion-summary{
  width:100%;
  border:none;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px 18px 28px;
  font-size:15px;
  font-weight:600;
  color:#1E1B4B;
  cursor:pointer;
  list-style:none;
}
.auth-accordion-summary.has-controls{
  padding-right:260px;
  justify-content:flex-start;
}
.auth-accordion-controls{
  position:absolute;
  top:18px;
  right:62px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  z-index:2;
}
.auth-accordion-controls.auth-accordion-controls-with-chevron{
  right:22px;
}
.auth-accordion-summary.has-controls .auth-accordion-chevron{
  position:absolute;
  top:18px;
  right:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:3;
}
.auth-accordion-summary::-webkit-details-marker{
  display:none;
}
.auth-accordion-summary:focus-visible{
  outline:2px solid rgba(99,102,241,0.5);
  outline-offset:4px;
  border-radius:16px;
}
.auth-accordion-section[open] .auth-accordion-chevron svg{
  transform:rotate(180deg);
}
.auth-accordion-body{
  border-top:1px solid rgba(226,232,240,0.9);
  padding:18px 24px 24px;
  background:#ffffff;
}
#auth-sso-policy-modal .node-editor-input-wrapper,
#auth-scim-section .node-editor-input-wrapper,
#auth-scim-token-modal .node-editor-input-wrapper,
#settings-api-token-reveal-modal .node-editor-input-wrapper{
  position:relative;
  width:100%;
  box-sizing:border-box;
}
#auth-sso-policy-modal .node-editor-icon-button,
#auth-scim-section .node-editor-icon-button,
#auth-scim-token-modal .node-editor-icon-button,
#settings-api-token-reveal-modal .node-editor-icon-button{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.6);
  background:rgba(255,255,255,0.95);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  padding:0;
  color:#0F172A;
}
#auth-sso-policy-modal .node-editor-icon-button img,
#auth-scim-section .node-editor-icon-button img,
#auth-scim-token-modal .node-editor-icon-button img,
#settings-api-token-reveal-modal .node-editor-icon-button img{
  width:14px;
  height:14px;
  object-fit:contain;
  pointer-events:none;
}
#auth-sso-policy-modal .node-editor-copy-button,
#auth-scim-section .node-editor-copy-button,
#auth-scim-token-modal .node-editor-copy-button,
#settings-api-token-reveal-modal .node-editor-copy-button{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);
}
#auth-sso-policy-modal .node-editor-copy-button:hover,
#auth-scim-section .node-editor-copy-button:hover,
#auth-scim-token-modal .node-editor-copy-button:hover,
#settings-api-token-reveal-modal .node-editor-copy-button:hover{
  background:rgba(99,102,241,0.18);
  border-color:rgba(99,102,241,0.5);
  transform:translateY(-55%);
}
#auth-sso-policy-modal .node-editor-copy-button:focus-visible,
#auth-scim-section .node-editor-copy-button:focus-visible,
#auth-scim-token-modal .node-editor-copy-button:focus-visible,
#settings-api-token-reveal-modal .node-editor-copy-button:focus-visible{
  outline:2px solid rgba(99,102,241,0.35);
  outline-offset:2px;
}
#auth-sso-policy-modal .auth-sso-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  border:1px solid rgba(226,232,240,0.9);
  border-left:4px solid #4F46E5;
  border-radius:12px;
  background:#fff;
  box-shadow:0 14px 26px rgba(15,23,42,0.10);
  overflow:hidden;
  padding:16px 20px;
}
#auth-sso-policy-modal .auth-sso-panel-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 0 12px;
  background:transparent;
  border-bottom:1px solid rgba(226,232,240,0.9);
}
#auth-sso-policy-modal .auth-sso-panel-header-left{
  display:flex;
  align-items:center;
  gap:12px;
}
#auth-sso-policy-modal .auth-sso-panel-icon{
  width:36px;
  height:36px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#EEF2FF;
  color:#6366F1;
  flex-shrink:0;
}
#auth-sso-policy-modal .auth-sso-panel-icon svg{
  width:18px;
  height:18px;
}
#auth-sso-policy-modal .auth-sso-panel-heading{
  display:grid;
  gap:4px;
  font-family:inherit;
}
#auth-sso-policy-modal .auth-sso-panel-chip{
  align-self:flex-start;
  padding:4px 8px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,0.35);
  background:rgba(248,250,252,0.95);
  color:#475569;
  font-size:0.7rem;
  letter-spacing:0.04em;
  text-transform:none;
  font-weight:600;
}
#auth-sso-policy-modal .auth-sso-panel-body{
  padding-top:12px;
  background:transparent;
}
#auth-sso-policy-modal-dialog{
  max-width:1000px;
}
#auth-scim-token-modal-dialog{
  width:min(100%, 600px);
  max-width:600px;
}
#settings-api-token-reveal-modal-dialog{
  width:min(100%, 600px);
  max-width:600px;
}
body.page-cartography #app{
  grid-template-rows: var(--topbar-height) calc(100dvh - var(--topbar-height)) !important;
}
body.page-cartography .layout__inner{
  width:min(100%, calc(100vw - 50px));
  margin:0 auto 25px;
  padding:0 25px 25px;
  box-sizing:border-box;
}
body.page-cartography #topology-root{
  display:flex;
  flex:1;
  min-height:0;
  padding:0;
  box-sizing:border-box;
}
body.page-cartography #topology-container{
  height:100%!important;
}

/* Unifie onglets + contenu */
/* Réduit uniquement le padding-top du panneau de contenu */
#org-tabs ~ #content,           /* quand #main-data est absent       */
#org-tabs + #main-data + #content {   /* structure actuelle avec #main-data */
  margin-top:0;
  border-top:0;
  padding-top:6px !important;       /* haut 6 px */
  padding-right:16px!important;     /* droite 1 rem */
  padding-bottom:16px!important;    /* bas    1 rem */
  padding-left:16px!important;      /* gauche 1 rem */
}

/* Petit patch champ recherche sombre sur bannière fusionnée */
body.has-org #topbar input#org-search{
  color:#1F2937;
}
body.has-org #topbar input#org-search::placeholder{color:#94A3B8;}

/* ---------- Loader centré dans les onglets ---------- */
.content-loader{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:100%;gap:0.75rem;
  min-height:200px;padding:1rem 0;
}
.content-loader .loader-message{text-align:center;}

/* ---------- Petit loader circulaire ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
.loader{
  width:32px;height:32px;border-radius:50%;
  border:4px solid #e5e7eb;border-top-color:#6366f1;
  animation:spin 0.9s linear infinite;
}

/* ---------- Cred ---------- */
button.cred-see{font-size:.75rem;color:#334155}
button.cred-see:hover{color:#1d4ed8;text-decoration:underline}

/* ---------- Secrets / identifiants ---------- */
#node-editor-credential-add-modal input[type="password"]::-ms-reveal,
#node-editor-credential-add-modal input[type="password"]::-ms-clear,
#node-editor-credential-modal input[type="password"]::-ms-reveal,
#node-editor-credential-modal input[type="password"]::-ms-clear,
[data-csp-modal="credential"] input[type="password"]::-ms-reveal,
[data-csp-modal="credential"] input[type="password"]::-ms-clear{
  display:none;
}





/* Grille des cartes fournisseurs CSP */
.csp-card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 1400px) {
  .csp-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Grille des cartes prestataires */
@media (min-width: 1400px) {
  .providers-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Favoris contacts (cartes prestataires) */
.providers-card-grid [data-providers-contact-favorite-toggle] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.providers-card-grid [data-providers-card]:hover [data-providers-contact-favorite-toggle],
.providers-card-grid [data-providers-card]:focus-within [data-providers-contact-favorite-toggle],
.providers-card-grid [data-providers-contact-favorite="on"] [data-providers-contact-favorite-toggle] {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- OTP countdown ---------- */
[data-csp-otp-timer] svg {
  display: block;
}

.csp-otp-progress-track {
  opacity: 0.25;
}

[data-csp-otp-progress] {
  transform: rotate(-90deg);
  transform-origin: 18px 18px;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.9s linear;
}

/* ---------- Champs node-editor (inputs partagés) ---------- */
.node-editor-panel .node-editor-input,
.node-editor-panel .node-editor-input-select,
.node-editor-panel .node-editor-input-textarea{
  width:100%;box-sizing:border-box;line-height:1.4;min-height:40px;padding:10px 12px;
}
.node-editor-panel .node-editor-input-select{
  border:1px solid rgba(67,56,202,.35);
  border-radius:10px!important;
  padding:10px 42px 10px 12px;
  font-size:14px;
  color:#0F172A;
  background:rgba(255,255,255,.8)!important;
  min-height:40px;
  appearance:none;-webkit-appearance:none;
  line-height:1.35;
  box-shadow:none!important;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease, color .2s ease;
}
.node-editor-panel .node-editor-input-select:focus-visible{
  outline:none;
  border-color:rgba(79,70,229,.85);
  box-shadow:0 0 0 2px rgba(99,102,241,.25);
  background:rgba(255,255,255,1);
}
.node-editor-panel .node-editor-input{
  border:1px solid rgba(67,56,202,.35);
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  color:#0F172A;
  background:rgba(255,255,255,.8);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.node-editor-panel .node-editor-input-textarea{
  min-height:80px;
  resize:vertical;
}
.node-editor-panel .node-editor-input-cidr{
  min-height:40px;
  line-height:1.4;
  padding:10px 12px;
  font-size:14px;
  color:#0F172A;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(67,56,202,.35);
  border-radius:10px;
}
.node-editor-panel .node-editor-input-wrapper.has-copy .node-editor-input,
.node-editor-panel .node-editor-input-wrapper.has-copy .node-editor-input-select,
.node-editor-panel .node-editor-input-wrapper.has-copy .node-editor-input-textarea{
  padding-right:42px;
}
#auth-scim-token-modal .node-editor-input-wrapper.has-copy .node-editor-input{
  padding-right:42px;
}
.node-editor-panel .node-editor-input:focus,
.node-editor-panel .node-editor-input-textarea:focus,
.node-editor-panel .node-editor-input-cidr:focus,
.node-editor-panel .node-editor-input:focus-visible,
.node-editor-panel .node-editor-input-textarea:focus-visible,
.node-editor-panel .node-editor-input-cidr:focus-visible,
.node-editor-panel .node-editor-input-wrapper:focus-within .node-editor-input,
.node-editor-panel .node-editor-input-wrapper:focus-within .node-editor-input-textarea,
.node-editor-panel .node-editor-input-wrapper:focus-within .node-editor-input-cidr{
  outline:none;
  border-color:rgba(79,70,229,.85)!important;
  box-shadow:0 0 0 2px rgba(99,102,241,.25)!important;
  background:rgba(255,255,255,1)!important;
}
.node-editor-panel .node-editor-field.has-error .node-editor-input,
.node-editor-panel .node-editor-field.has-error .node-editor-input-select,
.node-editor-panel .node-editor-field.has-error .node-editor-input-textarea,
.node-editor-panel .node-editor-field.has-error .node-editor-input-cidr,
.node-editor-panel .node-editor-field.has-error .node-editor-picklist-trigger,
.node-editor-panel .node-editor-field.has-error .node-editor-lookup-summary,
.node-editor-panel .has-error .node-editor-input,
.node-editor-panel .has-error .node-editor-input-select,
.node-editor-panel .has-error .node-editor-input-textarea,
.node-editor-panel .has-error .node-editor-input-cidr,
.node-editor-panel .has-error .node-editor-picklist-trigger,
.node-editor-panel .has-error .node-editor-lookup-summary,
.node-editor-panel .node-editor-field .node-editor-input.has-error,
.node-editor-panel .node-editor-field .node-editor-input-select.has-error,
.node-editor-panel .node-editor-field .node-editor-input-textarea.has-error,
.node-editor-panel .node-editor-field .node-editor-input-cidr.has-error,
.node-editor-panel .node-editor-field .node-editor-picklist-trigger.has-error,
.node-editor-panel .node-editor-field .node-editor-lookup-summary.has-error{
  background:#fff!important;
  border-color:rgba(67,56,202,.35)!important;
  box-shadow:inset 0 -2px 0 0 #ef4444!important;
}
.node-editor-panel .node-editor-field.has-error .node-editor-field-error{
  display:block;
  color:#b91c1c;
  font-size:.75rem;
  line-height:1.2;
}
.node-editor-panel .node-editor-lookup-trigger{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  padding:0!important;
}
.node-editor-panel .node-editor-lookup-summary{
  background:rgba(255,255,255,.8)!important;
  border:1px solid rgba(67,56,202,.35)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  color:#0F172A!important;
  min-height:40px!important;
  line-height:1.4!important;
  text-align:left;
}
.node-editor-panel .node-editor-lookup-summary.is-placeholder{
  color:#94A3B8!important;
}
.node-editor-panel .node-editor-lookup-summary.is-placeholder .node-editor-picklist-trigger-label{
  color:#94A3B8;
}
.node-editor-panel .node-editor-picklist-trigger{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  gap:8px;
}
.node-editor-panel .node-editor-picklist-trigger-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  object-fit:contain;
}
.node-editor-panel .node-editor-picklist-trigger-label{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.node-editor-panel .node-editor-input-wrapper.has-picklist{
  position:relative;
}
.node-editor-panel .node-editor-select-chevron{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(79,70,229,.6);
  pointer-events:none;
  opacity:.8;
  transition:color .2s ease, opacity .2s ease;
}
.node-editor-panel .node-editor-input-wrapper.has-picklist:focus-within .node-editor-select-chevron{
  color:rgba(67,56,202,.85);
  opacity:1;
}
.node-editor-panel .node-editor-table .node-editor-input-wrapper.has-picklist .node-editor-select-chevron{
  right:10px;
}
.node-editor-panel .node-editor-input:disabled{
  background:rgba(226,232,240,.6);
  cursor:default;
}
.node-editor-panel .node-editor-input-textarea:disabled{
  background:rgba(226,232,240,.6);
  cursor:default;
}
.node-editor-panel .node-editor-input-select:disabled{
  background:rgba(255,255,255,.85);
  border-color:rgba(67,56,202,.25);
  color:rgba(15,23,42,.9);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  cursor:default;
}

/* ---------- Dropdown lookup/picklist (node-editor) ---------- */
.node-editor-panel .node-editor-dropdown-surface{
  background:#fff;
  border:1px solid rgba(67,56,202,.35) !important;
  border-radius:14px !important;
  box-shadow:0 12px 30px rgba(15,23,42,.25);
  box-sizing:border-box;
}
.node-editor-panel .node-editor-lookup-options{
  position:relative;
  width:100%;
  box-sizing:border-box;
  margin-top:6px;
  z-index:auto;
}
.node-editor-panel .node-editor-lookup-options.is-inline{
  position:static;
  width:100%;
  z-index:auto;
}
.node-editor-panel .node-editor-lookup-picklist-options{
  padding:10px 8px 10px 10px;
  box-sizing:border-box;
  max-height:320px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  width:100%;
  font-family:inherit;
}
.node-editor-panel .node-editor-lookup-search{
  position:sticky;
  top:0;
  z-index:1;
  padding:8px 8px 10px;
  background:#fff;
  border-bottom:1px solid rgba(226,232,240,.9);
}
.node-editor-panel .node-editor-lookup-search-input{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(148,163,184,.9);
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  line-height:1.3;
  color:#0F172A;
  background:#fff;
}
.node-editor-panel .node-editor-lookup-search-input:focus{
  border-color:rgba(67,56,202,.8);
  box-shadow:0 0 0 2px rgba(67,56,202,.12);
  outline:none;
}
.node-editor-panel .node-editor-picklist-shell{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
}
.node-editor-panel .node-editor-picklist-shell.is-inline{
  display:flex;
}
.node-editor-panel .node-editor-picklist-options{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  margin-top:0;
  width:100%;
  z-index:10;
}
.node-editor-panel .node-editor-picklist-shell.is-inline .node-editor-picklist-options,
.node-editor-panel .node-editor-picklist-options.is-inline{
  position:static;
  top:auto;
  left:auto;
  right:auto;
  margin-top:0;
  width:100%;
  z-index:auto;
}
.node-editor-panel #node-editor-provider-create-name-suggestions{
  z-index:2105;
}
.node-editor-panel .node-editor-picklist-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-bottom:1px solid #E2E8F0;
  background:rgba(255,255,255,.98);
}
.node-editor-panel .node-editor-picklist-header-label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#64748B;
}
.node-editor-panel .node-editor-picklist-header-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid #E2E8F0;
  background:#fff;
  color:#475569;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.node-editor-panel .node-editor-picklist-header-close:hover{
  background:#F1F5F9;
  border-color:#CBD5E1;
  color:#4338CA;
}
.node-editor-panel .node-editor-picklist-header-close:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(99,102,241,.35);
}
.node-editor-panel .node-editor-picklist-header-close svg{
  width:12px;
  height:12px;
}
.node-editor-panel .node-editor-picklist-option{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:none;
  background:transparent;
  border-radius:10px;
  font-size:14px;
  line-height:1.4;
  cursor:pointer;
  transition:background-color .14s ease,color .14s ease;
}
.node-editor-panel .node-editor-picklist-option--with-icon{
  display:flex;
  align-items:center;
  gap:8px;
}
.node-editor-panel .node-editor-picklist-option-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  object-fit:contain;
}
.node-editor-panel .node-editor-picklist-option-label{
  min-width:0;
}
.node-editor-panel .node-editor-picklist-option.is-placeholder{
  color:#64748B;
}
.node-editor-panel .node-editor-picklist-option.is-placeholder:hover{
  background:transparent;
  color:#64748B;
}
.node-editor-panel .node-editor-picklist-option:disabled{
  opacity:1;
  cursor:default;
}
.node-editor-panel .node-editor-picklist-option:hover{
  background:#EEF2FF;
  color:#4338CA;
}

/* ---------- Tables node-editor ---------- */
.node-editor-panel.is-fullscreen .node-editor-field-grid > .node-editor-table-field{
  grid-column:1 / -1;
  min-width:0;
}
.node-editor-panel .node-editor-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
}
.node-editor-panel .node-editor-table-header{
  padding:10px 12px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:#475569;
  background:transparent;
  border-bottom:1px solid #E2E8F0;
}
.node-editor-panel .node-editor-table-row .node-editor-table-cell{
  padding:6px 4px;
  vertical-align:top;
}
.node-editor-panel .node-editor-table-host{
  overflow-x:auto;
  max-width:100%;
  padding:2px 0 8px;
}
.node-editor-panel .node-editor-table-input-wrapper{
  display:flex;
  align-items:flex-start;
}
.node-editor-panel .node-editor-table-input-wrapper .node-editor-input,
.node-editor-panel .node-editor-table-input-wrapper .node-editor-input-select,
.node-editor-panel .node-editor-table-input-wrapper .node-editor-input-textarea,
.node-editor-panel .node-editor-table-input-wrapper .node-editor-input-cidr{
  min-height:40px;
  line-height:1.4;
  padding:10px 12px;
}
.node-editor-panel .node-editor-table-input-wrapper .node-editor-input-textarea,
.node-editor-panel .node-editor-table-input-wrapper .node-editor-input-cidr{
  min-height:40px;
}
.node-editor-panel .node-editor-table-input-wrapper.has-picklist .node-editor-input-select{
  padding-right:42px;
}
.node-editor-panel .node-editor-table-actions-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.node-editor-panel .node-editor-lookup-option-subtitle{
  display:block;
  color:#94A3B8;
  font-size:10px;
  margin-left:28px;
  white-space:normal;
}

/* ---------- Login ambient ---------- */
#login-ambient{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 14% 18%, rgba(99,102,241,0.18), rgba(99,102,241,0) 62%),
    radial-gradient(circle at 86% 20%, rgba(129,140,248,0.16), rgba(129,140,248,0) 60%),
    linear-gradient(180deg, rgba(248,250,252,0.98), rgba(224,231,255,0.9));
}
#login-ambient::before{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55), rgba(255,255,255,0.2) 26%, rgba(255,255,255,0) 62%);
  opacity:0.22;
}
#login-ambient::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:radial-gradient(rgba(99,102,241,0.06) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:0.1;
}
#login-ambient-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
}

/* ---------- Login panel glow ---------- */
#login-card{
  position:relative;
  z-index:1;
}
#login-card::before{
  content:"";
  position:absolute;
  inset:-380px;
  z-index:-1;
  border-radius:80px;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92), rgba(255,255,255,0.85) 22%, rgba(255,255,255,0.7) 44%, rgba(255,255,255,0.32) 66%, rgba(255,255,255,0) 88%);
  filter:blur(36px);
  opacity:0.95;
}
#login-card::after{
  content:"";
  position:absolute;
  inset:-460px;
  z-index:-2;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.82), rgba(255,255,255,0.48) 36%, rgba(255,255,255,0) 80%);
  filter:blur(46px);
  opacity:0.9;
}
#login-card > .bg-white{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:blur(6px);
}

/* ---------- Ajustements mobile ---------- */
@media (max-width: 1023px){
  body.page-cartography #app{
    grid-template-rows:auto minmax(0, 1fr) !important;
  }
  #topbar > div{
    flex-wrap:wrap;
    align-items:center;
  }
  .topbar-logo{
    order:1;
  }
  .topbar-actions{
    order:2;
    margin-left:auto;
  }
  .topbar-search{
    order:3;
    flex-basis:100%;
    min-width:0;
  }
  body.page-cartography .layout__inner{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0 16px 16px;
  }
  body.page-cartography #topology-container{
    touch-action:none;
  }
  #global-search{
    min-width:0;
    max-width:none;
  }
  #global-search-group{
    padding:0.5rem 0.75rem;
  }
  #global-search-scope-wrapper{
    width:auto;
    min-width:0;
  }
  #global-search-scope-button,
  #org-search{
    height:44px;
  }
  #global-search-scope-list button{
    min-height:44px;
  }
  #global-search-modal{
    align-items:stretch;
    padding:0.75rem;
  }
  #global-search-modal-panel{
    max-width:100%;
    border-radius:1.25rem;
    padding:1rem;
  }
  #global-search-modal-table-wrap{
    overflow-x:auto;
  }
  #global-search-modal-table thead th{
    padding:0.75rem;
  }
  .global-search-sort-button{
    min-height:44px;
    padding:0.5rem 0.75rem;
  }
  #global-search-modal-table td{
    padding-top:0.75rem;
    padding-bottom:0.75rem;
  }
  #global-search-suggestions{
    max-height:calc(100vh - 220px);
    max-height:calc(100dvh - 220px);
  }
  #settings-page{
    grid-template-columns:1fr;
  }
  #settings-sidebar{
    min-width:0;
    max-width:none;
    width:100%;
    max-height:40vh;
    overflow-y:auto;
  }
  #settings-sidebar-nav{
    padding:0.75rem 1rem;
    gap:0.75rem;
  }
  #settings-sidebar-header{
    margin-bottom:0.75rem;
  }
  #settings-sidebar-footer{
    margin-top:1rem;
    padding-top:0.75rem;
  }
  #settings-content-wrapper{
    margin:16px;
    width:calc(100% - 32px);
    max-width:calc(100% - 32px);
  }
  #organizations-search-input{
    height:44px;
  }
  [id^="organizations-actions-wrapper-"] button{
    width:44px;
    height:44px;
  }
  #organizations-header-salesforce,
  [id^="organizations-salesforce-"],
  [id^="organizations-salesforce-value-"],
  [id^="organizations-salesforce-empty-"],
  [id^="organizations-name-salesforce-"]{
    display:none;
  }
  #org-tabs #tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .tab-link{
    min-height:44px;
    padding:0.75rem 0.875rem;
  }
  .page-cartography .to-btn{
    box-sizing:content-box;
    padding:5px;
  }
}