:root {
  --primary: #4ea8de;
  --secondary: #7400b8;
  --light: #f0f0f0;
  --dark: #1f1f1f;

  --success: #28a745;
  --danger: #dc3545;
  --muted: #9aa3ad;
  --surface: #ffffff;
  --surface-2: #f9f9f9;
}

/* reset / base */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--surface);
  color: var(--dark);
}

/* header */
/* Scope to avoid affecting shared menu header on other pages */
.dashboard-page header {
  background: var(--surface);
  color: var(--dark);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.dashboard-page header img { height: 42px; }

/* layout */
.page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
main.dashboard { flex: 1; }
.dashboard { max-width: 1200px; margin: 2rem auto; padding: 2rem; width: 100%; }

/* typography */
h2 { margin-top: 0; font-size: 2rem; color: var(--secondary); }
.dashboard h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 2rem; }

/* table */
table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
th, td {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: middle;
}
th { background-color: var(--surface-2); }

/* status pills */
.status {
  font-weight: 700;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  color: white;
  font-size: 0.85rem;
  display: inline-block;
}
.status.online { background-color: var(--success); }
.status.offline { background-color: var(--danger); }

/* buttons - base */
button {
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
  display: inline-block;
  line-height: 1;
}

/* primary */
.btn-primary {
  background: var(--primary);
  color: white;
  border-radius: 6px;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(78,168,222,0.12); }

/* disabled look */
.btn-disabled,
button[disabled] {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(30%);
  transform: none;
  box-shadow: none;
}

/* small muted button style - used for toggle compact actions */
.btn-toggle {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
}

/* success / danger */
.btn-success {
  background: var(--success);
  color: white;
}
.btn-success:hover { box-shadow: 0 6px 18px rgba(40,167,69,0.12); transform: translateY(-2px); }

.btn-danger {
  background: var(--danger);
  color: white;
}
.btn-danger:hover { box-shadow: 0 6px 18px rgba(220,53,69,0.12); transform: translateY(-2px); }

/* action container inside table cell for neat spacing */
.endpoints td > .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* "remove" small red x used in header rows etc. */
.btn-remove {
  padding: 6px;
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(220,53,69,0.95);
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.btn-remove:hover { transform: none; filter: brightness(0.95); }

/* make the remove icon less intrusive when small lists */
.btn-remove.small {
  padding: 4px;
  min-width: 26px;
  height: 26px;
  font-size: 0.78rem;
  border-radius: 6px;
}

/* pagination */
.pagination { display: flex; gap: .5rem; justify-content: center; margin-top:1rem; }
.pagination button { padding:.5rem 1rem; border:none; background:#EEE; border-radius:4px; cursor:pointer; white-space: nowrap; }
.pagination button.active-page { background:#333; color:#FFF; }
.pagination button:disabled { opacity:.5; cursor:default; }

/* tabs */
.tabs { display: flex; margin-bottom: 1rem; gap: 1rem; }
.tab-button {
  padding: 0.6rem 1.2rem;
  border: none;
  background-color: var(--light);
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.3s ease;
}
.tab-button.active { background-color: var(--primary); color: white; }

/* toast */
.toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background-color: #333;
  color: #fff;
  padding: 0.8rem 1.2rem;
  border-radius: 5px;
  opacity: 0.95;
  z-index: 1000;
  font-size: 0.9rem;
}
.toast.success { background-color: var(--success); }
.toast.error { background-color: var(--danger); }

/* forms */
.form-group { margin-bottom: 1rem; }
input[type="password"], input[type="text"], textarea {
  padding: 8px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.95rem;
}

/* typewriter */
/* hero section */
.dashboard-hero { position: relative; background: linear-gradient(135deg,#f5f9ff 0%,#eef5ff 55%,#e6f2ff 100%); border:1px solid #d3e3f3; border-radius: 28px; padding: 2.6rem 2.6rem 2.4rem; overflow:hidden; }
.dashboard-hero:before { content:""; position:absolute; inset:-1px; background:
  radial-gradient(circle at 82% 18%, rgba(0,123,255,0.22), transparent 60%),
  radial-gradient(circle at 12% 78%, rgba(100,180,255,0.18), transparent 65%);
  pointer-events:none; mix-blend-mode: normal; }
.dashboard-hero:after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(60deg, rgba(255,255,255,0) 0 40px, rgba(255,255,255,0.4) 40px 41px); opacity:0.25; pointer-events:none; }
.dashboard-hero .hero-inner { position:relative; z-index:3; max-width:980px; }
.hero-bg-art { position:absolute; top:-60px; right:-60px; width:340px; height:340px; background:conic-gradient(from 20deg, rgba(0,123,255,0.15), rgba(80,160,255,0.05), rgba(0,123,255,0.18)); filter:blur(50px) saturate(140%); opacity:.6; animation: hueShift 12s linear infinite; }
@keyframes hueShift { 0% { filter: blur(50px) saturate(140%) hue-rotate(0deg);} 100% { filter: blur(50px) saturate(140%) hue-rotate(360deg);} }
.hero-title { font-size:2.55rem; line-height:1.12; margin:0 0 1rem 0; font-weight:700; letter-spacing:-0.5px; color:#0f172a; }
.hero-title .accent { background: linear-gradient(90deg,#007bff,#3d9bff,#55b5ff); background-size:180% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: gradientSlide 8s ease-in-out infinite alternate; }
@keyframes gradientSlide { 0% { background-position:0% 50%; } 100% { background-position:100% 50%; } }
.hero-tagline { font-size:1.05rem; line-height:1.45; color:#334155; max-width:760px; margin:0 0 1.35rem 0; font-weight:500; }
.hero-chips { display:flex; flex-wrap:wrap; gap:10px; }
.hero-chips .chip { background: rgba(255,255,255,0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border:1px solid #d7e6f5; border-radius: 999px; padding:6px 14px 6px 12px; font-size:0.72rem; letter-spacing:0.7px; font-weight:600; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px; color:#0f4a88; position:relative; overflow:hidden; }
.hero-chips .chip:before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(0,123,255,0.20), rgba(120,180,255,0.15), rgba(255,255,255,0)); opacity:0; transition:opacity .35s ease; }
.hero-chips .chip:hover:before { opacity:1; }
.hero-chips .chip i { font-size:0.9rem; color:#0f62b5; }
.hero-chips .chip:hover { border-color:#b9d6ef; }
@media (max-width: 680px){
  .dashboard-hero { padding:1.9rem 1.4rem 1.7rem; border-radius:22px; }
  .hero-title { font-size:2.05rem; }
  .hero-tagline { font-size:0.94rem; }
  .hero-chips .chip { font-size:0.63rem; padding:5px 10px 5px 9px; }
}

/* responsive: make actions wrap on small screens */
@media (max-width: 720px) {
  .endpoints td > .actions { gap: 6px; }
  .btn-primary { padding: 0.5rem 0.8rem; font-size: 0.95rem; }
  .btn-remove { min-width: 28px; height: 28px; }
}
/* Tab panels (dashboard only): nascosti di default, visibili solo se .active */
main.dashboard > .tab-content {
  display: none;
}

main.dashboard > .tab-content.active {
  display: block;
}

/* Assicuriamoci che i tab button abbiano lo stato visivo */
.tab-button {
  opacity: 0.95;
}
.tab-button.active {
  opacity: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

/* più larghezza per la colonna Methods */
.endpoints th.methods-col,
.endpoints td.methods-col {
  width: 132px;        /* larghezza preferita */
  min-width: 132px;    /* limite inferiore */
  max-width: 40%;      /* evita che prenda tutto lo schermo su desktop larghi */
  vertical-align: middle;
  padding: 8px;
}

/* Minimal GitHub-like Markdown styles for AI Docs preview */
.markdown-body {
  color: #24292f;
  line-height: 1.6;
  font-size: 0.98rem;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  font-weight: 600;
  line-height: 1.25;
}
.markdown-body h1 { font-size: 1.6rem; border-bottom: 1px solid #d0d7de; padding-bottom: .3rem; }
.markdown-body h2 { font-size: 1.4rem; border-bottom: 1px solid #d0d7de; padding-bottom: .3rem; }
.markdown-body h3 { font-size: 1.2rem; }
.markdown-body p { margin: 0.6em 0; }
.markdown-body ul,
.markdown-body ol { padding-left: 1.4em; margin: 0.6em 0; }
.markdown-body li { margin: 0.25em 0; }
.markdown-body code { background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; padding: .1em .3em; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.95em; }
.markdown-body pre { background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; padding: .8em; overflow: auto; }
.markdown-body pre code { background: transparent; border: 0; padding: 0; }
.markdown-body table { border-collapse: collapse; display: block; width: 100%; overflow: auto; margin: .8em 0; }
.markdown-body th, .markdown-body td { border: 1px solid #d0d7de; padding: .4em .6em; }
.markdown-body blockquote { margin: .8em 0; padding: 0 .8em; color: #57606a; border-left: .25em solid #d0d7de; }

/* wrapper orizzontale dei badge */
.methods-cell {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;   /* NON andare a capo: mantieni i badge in orizzontale */
  overflow-x: auto;    /* se non ci sta tutto, mostra uno scroll orizzontale */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px; /* piccolo padding per lo scroll */
}

/* ciascun badge non si accorci */
.method-badge {
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-block;
}

/* opzionali: colori già suggeriti prima */
.method-get { background: #f0f8ff; color: #0366d6; border: 1px solid rgba(3,102,214,0.08); }
.method-post { background: #fff7ed; color: #d97706; border: 1px solid rgba(217,119,6,0.08); }

/* responsive: su schermi piccoli diminuisci la larghezza e permetti wrapping */
@media (max-width: 650px) {
  .endpoints th.methods-col,
  .endpoints td.methods-col {
    width: auto;
    min-width: 120px;
    max-width: 60%;
  }
  .methods-cell {
    flex-wrap: nowrap; /* mantieni scroll orizzontale, evita layout schiacciati */
  }
}

/* Mobile layout for Content header: stack pagination and Actions, and allow horizontal scroll for page numbers */
@media (max-width: 768px) {
  .endpoints > div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .endpoints .pagination {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .endpoints .dropdown {
    align-self: stretch;
  }
  .endpoints #actionsDropdown {
    width: 100%;
  }
}

.actions-menu button {
  display: block;
  width: 100%;
  margin: 4px 0;
  text-align: left;
}

.api-password {
  font-family: 'Segoe UI', 'Roboto Mono', monospace;
  font-size: 1rem;
  letter-spacing: 2px;
}

.api-password-field {
  font-family: 'Segoe UI', 'Roboto Mono', monospace;
  font-size: 1rem;
  letter-spacing: 2px;
  padding: 2px 6px;
  border-radius: 6px;
  background: transparent;
  border: none;
  outline: none;
  min-width: 90px;
  max-width: 220px;
  width: auto;
}

.btn-eye {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  vertical-align: middle;
  padding: 0 4px;
}

.eye-icon {
  font-size: 1.2em;
}

.card-title {
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

.api-select {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

#statsModal {
  z-index: 10000 !important;
}

/* CodeMirror bianco per scenarioBody */
#scenarioBodyEditor .CodeMirror {
  background: #fff !important;
  color: #222 !important;
}
#scenarioBodyEditor .CodeMirror-cursor {
  border-left: 1.5px solid #222 !important;
}
#scenarioBodyEditor .CodeMirror-gutters {
  background: #fff !important;
  border-right: 1px solid #eee;
}

/* Migliora visibilità CodeMirror in modale stretta */
#scenarioBodyEditor .CodeMirror {
  min-width: 0;
  width: 100% !important;
  box-sizing: border-box;
  padding-left: 0;
  font-size: 13px;
  line-height: 1.35;
  height: 120px !important;
  min-height: 80px;
  max-height: 180px;
}
#scenarioBodyEditor .CodeMirror-lines {
  padding-left: 2px !important;
}
#scenarioBodyEditor .CodeMirror-gutters {
  width: 32px !important;
  min-width: 28px;
}
#scenarioBodyEditor .CodeMirror-scroll {
  overflow-x: auto !important;
  overflow-y: auto !important;
  min-width: 0;
}
@media (max-width: 600px) {
  #scenarioBodyEditor .CodeMirror {
    font-size: 12px;
    height: 90px !important;
    max-height: 120px;
  }
  #scenarioBodyEditor .CodeMirror-gutters {
    width: 26px !important;
    min-width: 22px;
  }
}

/* stile per la folder selezionata */
.folder-card.selected-folder {
  border: 2px solid #007bff;
  box-shadow: 0 0 0 2px #007bff33;
}