/* =====================
   Global theme
===================== */
:root {
  --bg: #071022;
  --panel: #0d1726;
  --muted: #9fb0c6;
  --accent: #2b8af6;
  --glass: rgba(255,255,255,0.03);

  --border-light: rgba(255,255,255,0.06);
  --border-soft: rgba(255,255,255,0.04);
  --border-strong: rgba(255,255,255,0.08);

  --text-main: #e6eef8;
  --text-muted: #9fb0c6;

  --shadow: 0 6px 18px rgba(0,0,0,0.6);
  --radius: 10px;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: Inter, system-ui, Arial, sans-serif;
  background: linear-gradient(180deg, #041022, #021018);
  color: var(--text-main);
  user-select: none;
}

/* =====================
   Layout
===================== */
.wrap {
  display: grid;
  height: 100vh;
  box-sizing: border-box;
  padding: 18px;
  grid-template-columns: 300px 1fr 380px;
  gap: 16px;
}

.panel {
  min-height: 0;
  padding: 12px;
  overflow: auto;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: var(--shadow);
}

/* Responsive */
@media (max-width: 1100px) {
  .wrap {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(0, auto);
  }
}

/* =====================
   Typography
===================== */
h3 {
  margin: 6px 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.small {
  font-size: 13px;
  color: var(--text-muted);
}

.mini {
  font-size: 12px;
  color: var(--text-muted);
}

/* =====================
   Controls
===================== */
input[type=text],
input[type=number],
input[type=range],
select,
textarea {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: rgba(255,255,255,0.02);
  color: inherit;
  box-sizing: border-box;
}

button {
  background: var(--accent);
  border: none;
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .2s ease;
}
button:hover {
  opacity: 0.9;
}

button.ghost {
  background: transparent;
  border: 1px dashed var(--border-light);
  color: var(--text-muted);
}
button.ghost:hover {
  color: #fff;
  border-color: var(--accent);
}

/* =====================
   Lists & Items
===================== */
.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--glass);
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
}

.item .left {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.badge {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-soft);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-muted);
}

/* =====================
   Result cards
===================== */
.path-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.path {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-soft);
}

.path .left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* =====================
   Diagram panel
===================== */
.uml {
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 260px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px;
}

/* =====================
   Simulation visual markers
===================== */
.sim-pulse {
  box-shadow: 0 0 0 3px rgba(59,130,246,0.35) !important;
}

/* nice scrolling everywhere */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22);
}

/* small fade hover on list items */
.item:hover,
.path:hover {
  background: rgba(255,255,255,0.04);
}

/* =====================
   Playback
===================== */
/* Playback disabled look */
#playbackRow.is-disabled {
  opacity: 0.45;
  filter: grayscale(0.6);
  pointer-events: none; /* clicks blocked while disabled */
}

/* Align items inside attacker/target/vulnerability lists */
#panelEntities .list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#panelEntities .list > div {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 10px 12px;
  position: relative;
}

/* Force actions to right side — horizontally aligned */
#panelEntities .list > div button {
  align-self: flex-end; /* right-align actions */
  margin-top: 6px;      /* spacing from text */
}

/* Ensure Rename and Delete align together nicely */
#panelEntities .list > div button + button {
  margin-left: 8px;
}

/* ===============================
   Compact lists in the left panel
==================================== */

#panelEntities .list {
  display: flex;
  flex-direction: column;
  gap: 12px;                 /* space between cards */
}

#panelEntities .list > div {
  position: relative;        /* required to position the buttons on the right */
  padding: 12px 180px 12px 14px; /* space reserved on the right for the buttons */
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

/* Title + meta on a single line when possible */
#panelEntities .list > div > div {
  display: inline;           /* “Attacker A  Entries: …” stays on the same line */
}

/* Right-aligned buttons, same line, no wrapper needed */
#panelEntities .list > div > button:nth-last-of-type(2) {
  position: absolute;
  top: 12px;
  right: 96px;               /* positions the “Rename” button to the left of Delete */
}
#panelEntities .list > div > button:last-of-type {
  position: absolute;
  top: 12px;
  right: 14px;               /* “Delete” button on the far right */
}

/* Small visual adjustments */
#panelEntities .list > div > button {
  margin: 0;                 /* removes vertical margin that added unnecessary spacing */
}

/* === Left panel list cards: full width, no squeeze === */
#panelEntities .list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Carte = grid: [contenu flexible] [Rename] [Delete]  */
#panelEntities .list > div {
  display: grid;
  grid-template-columns: 1fr auto auto; /* contenu prend toute la largeur */
  align-items: start;
  gap: 10px;
  padding: 12px;                /* ← plus de padding droit réservé */
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  position: static;             /* ← plus d'absolu */
}

/* Colonne contenu = prend tout l'espace  */
#panelEntities .list > div .left {
  grid-column: 1 / 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;                 /* ← autorise l'expansion */
}

/* Les deux boutons sur la droite, alignés en haut */
#panelEntities .list > div > button {
  position: static;             /* ← supprime l'absolu */
  align-self: start;
  margin: 0;
}
#panelEntities .list > div > button:nth-last-of-type(2) { grid-column: 2 / 3; }
#panelEntities .list > div > button:last-of-type       { grid-column: 3 / 4; }

/* Ajustements de texte/badges pour éviter les colonnes étroites */
#panelEntities .list .badge { display: inline-block; }
#panelEntities .list .mini  { white-space: normal; word-break: break-word; }

/* Optionnel: cartes génériques .item → s'étirent aussi */
.item {
  display: grid;
  grid-template-columns: 1fr auto; /* contenu + actions */
  align-items: start;
  gap: 10px;
}
.item .left { min-width: 0; }

@media (max-width: 520px) {
  #panelEntities .list > div {
    grid-template-columns: 1fr;    /* contenu pleine largeur */
  }
  #panelEntities .list > div > button {
    grid-column: 1 / -1;           /* boutons passent dessous */
    justify-self: end;
  }
}

/* === Left panel: cartes pleine largeur, contenu fluide === */

/* 1) Annule les anciens hacks (inline/absolute/padding réservé) */
#panelEntities .list > div > div { display: block !important; }
#panelEntities .list > div > button { position: static !important; }
#panelEntities .list > div { padding-right: 12px !important; }

/* 2) La carte .item devient une grid: [contenu][Rename][Delete] */
#panelEntities .list .item {
  display: grid !important;
  grid-template-columns: 1fr auto auto;   /* contenu prend tout, boutons autos */
  align-items: start;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

/* 3) Colonne contenu: laisse respirer le texte */
#panelEntities .list .item .left {
  min-width: 0;            /* autorise l’expansion */
  display: flex;
  flex-direction: column;  /* badge au-dessus, mini dessous */
  gap: 6px;
}

/* 4) Texte des "mini" non étriqué */
#panelEntities .list .mini {
  white-space: normal;     /* pas de contrainte inline */
  word-break: break-word;
  line-height: 1.25;
}

/* 5) Groupe de boutons alignés à droite sans chevauchement */
#panelEntities .list .item > div:last-child {
  display: flex;
  gap: 8px;
  align-items: start;
}

/* Option mobile: empile les boutons sous le contenu */
@media (max-width: 560px) {
  #panelEntities .list .item {
    grid-template-columns: 1fr;
  }
  #panelEntities .list .item > div:last-child {
    justify-self: end;
  }
}