/* Disabled appearance for translation editor */
  .disabled-editor {
    opacity: 0.5 !important;
    pointer-events: none !important;
  }
  /* Disabled appearance for TAB2 label */
  .disabled-tab {
    text-decoration: line-through !important;
    color: #6c757d !important;
  }
    #runButton.focused {
      outline: 3px solid #ffc107;
      outline-offset: 2px;
    }
    html{height:100%; margin:0; font-family:Arial,sans-serif; overflow-x: hidden;}
                    body { height:100vh; padding-top:0px; margin:0; }



  /*  #controls-nav {
 background: linear-gradient(45deg, #411f84 0%, #1e0058 100%);
}*/

#controls-nav {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.25), transparent 45%),
    linear-gradient(120deg, #0f172a 0%, #1e1b4b 100%);

}

#editorTabs.nav-tabs {
  border: 0 !important;
  border-bottom: 0 !important;
  background: #0b1120;
  padding: 0.3rem 0.4rem;
  gap: 0.25rem;
}
#editorTabs .nav-link {
  border: none !important;
  border-radius: 0 !important;
  background: #111827;
  color: #94a3b8;
  padding: 0.45rem 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
#editorTabs .nav-link:last-child {
  border-right: none;
}
#editorTabs .nav-link:not(.active):hover {
  color: #e2e8f0;
  background: #1e293b;
}
#editorTabs .nav-link.active {
  color: #f8fafc;
  background: #0f172a;
  box-shadow: inset 0 -3px 0 #fbbf24;
  border-right-color: transparent;
}


/* Custom CodeMirror scrollbar */
.CodeMirror-scroll, .CodeMirror-vscrollbar {
  scrollbar-width: thin !important;
  scrollbar-color: rgb(106,56,238) #000 !important;
}
.CodeMirror-scroll::-webkit-scrollbar, .CodeMirror-vscrollbar::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
.CodeMirror-scroll::-webkit-scrollbar-track, .CodeMirror-vscrollbar::-webkit-scrollbar-track {
  background: #000 !important;
}
.CodeMirror-scroll::-webkit-scrollbar-thumb, .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
  background: rgb(106,56,238) !important;
  border-radius: 4px !important;
}








.dropdown-menu-dark {
    --bs-dropdown-color: #dee2e6;
    --bs-dropdown-bg: #000000;
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-box-shadow: ;
    --bs-dropdown-link-color: #dee2e6;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg:  rgb(106,56,238);
    --bs-dropdown-link-disabled-color: #adb5bd;
    --bs-dropdown-header-color: #adb5bd;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    margin-top: -4px!important;
}


     .tooltip-inner {
  font-size:12px; /* o il valore che preferisci, es. 12px */
}


    .editor-container{display:flex;height:calc(100vh - 54px)!important;}
    .editor-left {
      flex: 0 0 auto;
      width: 50%;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    }
    .editor-left .editor-panel {
      flex: 1 1 auto;
      overflow: auto;
    }
    .editor-left .CodeMirror {
      border: none !important;
      margin-top: 0 !important;
    }
    .editor-right {
      flex: 0 0 auto;
      width: 50%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }
    #iframeOverlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1;
    }
    #divider {
      width: 3px;
      background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
      border-left: 1px solid rgba(148, 163, 184, 0.35);
      border-right: 1px solid rgba(15, 23, 42, 0.85);
      cursor: col-resize;
      flex-shrink: 0;
      transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }
    #divider:hover,
    body.resizing #divider {
      box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25), inset 0 0 12px rgba(59, 130, 246, 0.35);
    }
    .CodeMirror{
      height:calc(100% - 30px);
      font-size:10px;
      border:none!important;
      clip-path:none!important;
      font-family:'Fira Code', 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    }
    .CodeMirror-activeline-background {
      background: rgba(59, 130, 246, 0.12) !important;
    }
    .CodeMirror-activeline .CodeMirror-linenumber {
      color: #fbbf24 !important;
      font-weight: 600;
    }
    #toolbar-container{
      flex:0 0 auto;
      padding:0;
      background:transparent;
      border:none;
    }
    #toolbar-container label{
      font-weight:600;
    }
    .btn.active { background-color:#0d6efd; color:#fff; }
    iframe{flex:1 1 auto;width:100%;border:none}
    #errorBox{display:none;font-size:14px;}
    .cm-rpl-error{background:rgba(255,0,0,0.2)!important}
    .cm-rpl-clicked { background: rgba(0, 255, 0, 0.3) !important; }
    .resizing, .resizing * {
      user-select: none;
    }
    #addTab-nav .nav-link {
      padding: 0.5rem 1rem;
      cursor: pointer;
    }









      html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .editor-container {
    flex: 1 1 auto;
    min-height: 0;
  }
  .editor-left,
  .editor-right {
    min-height: 0;
  }
  .editor-right {
    display: flex;
    flex-direction: column;
  }
  .editor-right #preview {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
  }
  #preview.preview-darkmode {
    filter: invert(1) hue-rotate(180deg);
    background-color: #020617;
  }
  /* Schermo oscurato finché non abbiamo l'ok dell'auth */
  body.rpl-guard {
    opacity: 0;
    pointer-events: none;
  }
  /* File tree styles for Show files modal */
  #fileTreeList {
    max-height: 420px;
    overflow-y: auto;
    font-size: 0.9rem;
  }
  #fileTreeModal .list-group-item {
    border-radius: 0;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
  .file-tree-folder {
    font-weight: 600;
    background-color: #f8f9fa;
  }
  .file-tree-file {
    background-color: transparent;
  }
  .file-tree-icon {
    margin-right: 0.4rem;
    font-size: 0.9rem;
  }
  .file-tree-children {
    border-left: 1px solid rgba(0,0,0,.06);
    margin-left: 0.75rem;
    padding-left: 0.75rem;
  }
  /* ALT tools - pill toggle style */
  #toggleDebugBtn {
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.6) !important;
    background: rgba(15, 23, 42, 0.6);
    padding: 0.1rem 0.6rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0.8;
  }
  #toggleDebugBtn.debug-active {
    /*background: rgba(255, 193, 7, 0.95) !important;*/
    border-color: rgba(255, 213, 80, 1) !important;
    color: #ffffff !important;
    font-weight: 500;
    opacity: 1;
  }
  #toggleDebugBtn i {
    font-size: 0.85rem;
  }

  
  .alt-tools-group {
    background: rgba(15, 23, 42, 0.9);
    border-radius: 999px;
    padding: 2px;
    border: 1px solid rgba(148, 163, 184, 0.5);
  }
  .alt-toggle-btn {
    font-size: 0.8rem;
    border-radius: 999px !important;
    border: none;
    background: transparent;
    color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-inline: 0.55rem;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.12s ease;
  }
  .alt-toggle-btn:hover {
    /* Da inattivi non vogliamo cambiare lo sfondo,
       solo rendere leggermente più leggibile il testo */
    color: #fff !important;
  }
  .alt-toggle-btn i {
    font-size: 0.9rem;
  }
 
  
  .alt-toggle-btn.alt-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(0.3);
  }
  /* Stato attivo: il giallo deve restare anche quando esci con il mouse */
  .alt-toggle-btn.btn-warning {
    background-color: #ffc107 !important;
    color: #111827 !important;
    font-weight: 600;
    /* box-shadow removed */
  }
  .alt-toggle-btn.btn-warning:hover {
    background-color: #ffcd39 !important;
    color: #111827 !important;
  }
  .alt-btn-right.btn-warning {
    background-color: #ffda6a !important;
    color: #111827 !important;
    font-weight: 600;
    /* box-shadow removed */
  }
  /* Padding overrides for left/right ALT buttons */
.alt-btn-left {
  margin-right: 1px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-right: 0.45rem !important;
}
.alt-btn-right {
  margin-left: 1px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding-left: 0.45rem !important;
}


  .show-files-btn {
    background: linear-gradient(120deg, #06b6d4, #3b82f6);
    border: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.8rem !important;
    border-radius: 999px !important;
    box-shadow: none;
    transition: transform 0.15s ease, filter 0.15s ease;
  }
  .help-btn {
    background: rgba(15, 23, 42, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #e2e8f0;
    border-radius: 14px !important;
    padding: 0.1rem 0.45rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  }
  .help-btn:hover {
    color: #fbbf24;
    border-color: rgba(248, 250, 252, 0.45);
    transform: translateY(-1px);
  }
  .help-btn i {
    font-size: 1rem;
  }
  .show-files-btn .show-files-label {
    text-transform: uppercase;
    font-size: 0.72rem;
  }
  .show-files-btn:hover {
    transform: translateY(-1px);
    color: #fff;
  }
  .show-files-btn:focus-visible {
    outline: 2px solid rgba(191, 219, 254, 0.9);
    outline-offset: 2px;
  }
  .show-files-btn:disabled {
    opacity: 0.55;
  }


  /* Neon-tech RUN button */
  .btn-run-main {
    position: relative;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    background-size: 160% 160%;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    color: #ecfdf5;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding-inline: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    text-transform: uppercase;
    font-size: 0.78rem;
    transition:
      background-position 0.25s ease,
      box-shadow 0.18s ease,
      transform 0.12s ease,
      filter 0.12s ease;
  }
  .btn-run-main i {
    font-size: 0.9rem;
    line-height: 1;
    transition: transform 0.18s ease;
  }
  .btn-run-main:hover {
    background-position: right center;
    transform: translateY(-1px);
  
    color: #ecfdf5;
  }
  .btn-run-main:active {
    transform: translateY(0);
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.95),
      0 0 12px rgba(22, 163, 74, 0.9);
    filter: brightness(0.98);
  }
  .btn-run-main:active i {
    transform: translateX(1px) scale(0.96);
  }
  .btn-run-main:focus-visible {
    outline: 2px solid #bbf7d0;
    outline-offset: 2px;
  }
  .btn-run-main.disabled,
  .btn-run-main:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.6),
      0 0 10px rgba(34, 197, 94, 0.25);
    filter: grayscale(0.2);
  }
  .cond-toolbar {
    padding: 0.35rem 0.55rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid rgba(71, 85, 105, 0.65);
    background: #101828;
  }
  .cond-pill {
    background: #1f2937;
    border: 1px solid rgba(248, 250, 252, 0.22);
    border-radius: 8px;
    padding: 0.2rem 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #f8fafc;
    font-size: 0.7rem;
  }
  .cond-pill label {
    margin: 0;
    font-weight: 500;
    color: #fbbf24;
    letter-spacing: 0.04em;
  }
  .cond-pill select {
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: #f8fafc;
    border-radius: 6px;
    font-size: 0.68rem;
    min-width: 110px;
    padding-block: 0.12rem;
  }
  .cond-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }


  /* status bar */
    .editor-statusbar {
    background: #020617;
    border-top: 1px solid rgba(148, 163, 184, 0.5);
    color: #e5e7eb;
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .editor-statusbar .status-center {
    margin-left: 0.5rem;
  }
  .editor-statusbar .status-right {
    margin-left: auto;
    display: flex;
    gap: 0.9rem;
    align-items: center;
  }
  .editor-statusbar span {
    white-space: nowrap;
  }
  .status-tab-num {
    display: inline-block;
    padding: 1px 6px;
    background: #334155;
    border-radius: 6px;
    font-size: 0.7rem;
    color: #e2e8f0;
    font-weight: 600;
    margin-left: 0.25rem;
  }
  .status-debug {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.75rem;
    font-size: 0.7rem;
  }
  .status-debug-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: #9ca3af;
  }
  .status-debug-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .status-debug-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.8);
  }
  .status-debug-dot.error {
    background: #ef4444;
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.8),
      0 0 4px rgba(239, 68, 68, 0.85);
  }
  .status-debug-dot.warning {
    background: #facc15;
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.8),
      0 0 4px rgba(250, 204, 21, 0.85);
  }
  .status-debug-count {
    font-weight: 600;
  }


    .status-run {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .status-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 0.7rem;
    color: #9ca3af;
  }
  .status-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #ef4444; /* idle / errore: rosso */
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.8),
      0 0 6px rgba(239, 68, 68, 0.75);
  }
    .status-dot.status-ok {
    background: #22c55e; /* success: verde */
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.8),
      0 0 6px rgba(34, 197, 94, 0.9);
  }
  .status-version {
    margin-left: 0.5rem;
    opacity: 0.75;
    font-size: 0.7rem;
  }

  .debug-panel {
    background: #0b1120;
    color: #e5e7eb;
    font-size: 0.70rem;
    padding: 0.55rem 0.75rem;
    max-height: 180px;
    overflow-y: auto;
  }
  .debug-panel h6 {
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
    color: #cbd5e1;
    font-weight: 600;
  }
  .debug-item {
    margin-bottom: 0.18rem;
    font-size: 0.72rem;
  }
  .debug-item.error {
    background: #2b1c1c;
    border-left: 3px solid #f97373;
    color: #fee2e2;
    padding: 5px 10px;
    border-radius: 4px;
  }
  .debug-item.warning {
    background: #2b2b1c;
    border-left: 3px solid #facc15;
    color: #fef9c3;
    padding: 5px 10px;
    border-radius: 4px;
  }
  .debug-stats {
    border-top: 1px solid rgba(148, 163, 184, 0.45);
    margin-top: 0.4rem;
    padding-top: 0.25rem;
    font-size: 0.7rem;
    opacity: 0.9;
  }

  .CodeMirror .cm-debug-click-flash {
    background-color: rgba(250, 204, 21, 0.45);
    transition: background-color 0.8s ease-out;
  }


    /* Dark mode toggle as iOS-style switch */
  #previewDarkModeBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    border: 1.5px solid #4b5563;
    padding: 2px 6px !important;
    background: transparent;
  }
  #previewDarkModeBtn i {
    font-size: 0.85rem;
    color: #e5e7eb;
  }
  #previewDarkModeBtn .dark-switch {
    position: relative;
    width: 30px;
    height: 16px;
    border-radius: 999px;
    background: #4b5563;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
  }
  #previewDarkModeBtn .dark-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #f9fafb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    transition: transform 0.2s ease;
  }
  #previewDarkModeBtn:hover {
    border-color: #6b7280;
  }
  #previewDarkModeBtn.dark-switch-on {
    border-color: #c522b7;
  }
  #previewDarkModeBtn.dark-switch-on .dark-switch {
    background: #c522b7;
  }
  #previewDarkModeBtn.dark-switch-on .dark-switch-knob {
    transform: translateX(14px);
  }

  .debug-alert-icon {
    color: #ff3040;
    margin-left: 2px;
    font-size: 0.95rem;
    animation: blinkDebug 1.1s ease-in-out infinite;
  }


  .control-code-button{
background-color:#000000!important;border-radius:0px!important;
}
.control-code-button-enabled{
  background-color:#198754!important;border-radius:0px!important; letter-spacing:0.5px;
}
.control-code-button-disabled{
  background-color:#a30202!important;border-radius:0px!important; letter-spacing:0.5px;
}

  @keyframes blinkDebug {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.25;
      transform: scale(1.15);
    }
  }