/* //fix bug with monaco automatic layout */
.monaco-editor {
   position: absolute !important;
   top: 0px;
   left: 0;
   right: 0;
   /* bottom: 120px!important;
   max-height: calc(100% - 120px)!important;
   margin-bottom: 120px;  */
   /* border-top: 1px solid var(--color-border-color);
}

.decorationsOverviewRuler {
   /* border-right: 1px solid var(--color-border-color); */
   /* border-left: 1px solid var(--color-border-color); */

}

.minimap-decorations-layer {
   /*these have a z-index of 4*/
   /* border-right: 1px solid var(--color-border-color); */
   border-right: none;
}

/* monaco hover menus */
.monaco-hover-content {
   background-color: var(--color-third) !important;
}

/* div.hover-row.status-bar {
    background-color: var(--primary)!important;
} */
/* Hides the parameter hints widget */
/* .monaco-editor .monaco-editor-hover .parameter-hints-widget {
    display: none; 
} */

.monaco-menu {
   background-color: var(--color-fourth);
   color: var(--color-text);
   border: 1px solid var(--color-border-hover);
   border-radius: var(--border-radius-button) !important;
   position: fixed;
   box-shadow: var(--color-box-shadow);
   font-size: var(--font-size-sm) !important;
   display: flex;
   padding: var(--spacing-xsm);
   gap: var(--spacing-xsm);
}



.monaco-menu .monaco-menu {
   margin-top: -35px;
   /* Moves the submenu up by 35px */
   border-radius: var(--border-radius-button) !important;
}

.monaco-menu .action-item {
   font-family: var(--font-family) !important;
   font-size: var(--font-size-xsm) !important;
   padding: 0.15rem var(--spacing-sm) !important;
   padding-bottom: 0rem !important;
   padding-left: 0.1rem !important;
   padding-right: 1.2rem;
   position: relative;
   margin-bottom: var(--spacing-xsm);
   border-radius: 4px;
   color: var(--color-text);
   font-weight: 500;
   align-items: center !important;

}

.monaco-menu .action-item i {
   position: relative;
   top: -1px;
}

.monaco-menu .action-item:last-child {
   margin-bottom: -4px;
}

.monaco-menu .action-item:first-child {
   margin-top: -4px;
}

.monaco-menu .action-item:hover {
   background-color: var(--color-fifth);
   color: var(--color-textHilight);
}

/* this is the dividers */
.monaco-menu .disabled {
   padding: 0 !important;
   max-height: 1px;
   background-color: var(--color-border-hover);
   cursor: default;
   pointer-events: none;
   border: none !important;
}

.monaco-menu .action-item span:nth-child(3) {
   color: var(--color-note-text);
}

.monaco-menu .action-item:hover.action-item span:nth-child(3) {
   color: inherit !important;
}






/* 1️⃣ Kill Monaco hover/focus blue on the true wrapper from new versions*/
.monaco-menu .action-item .action-menu-item {
   background: none !important;
   color: inherit !important;
}

/* 2️⃣ Also for hovered/focused/selected states */
.monaco-menu .action-item.focused .action-menu-item,
.monaco-menu .action-item.checked .action-menu-item,
.monaco-menu .action-item.selected .action-menu-item {
   background: none !important;
   color: inherit !important;
}

/* 3️⃣ Keep our custom accent hover working on action-item */
.monaco-menu .action-item:hover {
   background-color: var(--color-border-hover);
   color: var(--color-textHilight);
}




/* Popup container */
.monaco-editor .peekview-widget {
   background-color: var(--color-third) !important;
   border: 2px solid var(--color-accent2) !important;
   border-radius: var(--border-radius-button) !important;

}

/* Embedded Monaco editor (frame) */
.monaco-editor .peekview-widget .peekview-editor .monaco-editor {
   background-color: var(--color-third) !important;
}

/* Actual text/code lines */
.monaco-editor .peekview-widget .peekview-editor .monaco-editor .lines-content {
   background-color: var(--color-third) !important;
}

/* Header of the peek popup */
.monaco-editor .peekview-widget .head {
   background-color: var(--color-fourth) !important;
   color: var(--color-text) !important;
   font-size: var(--font-size-sm) !important;
   border-bottom: 1px solid var(--color-border-hover) !important;
   padding: 0 var(--spacing-sm);
}

.monaco-editor .body {
   border: none !important;
}

/* 1) Style the peek container (you already did this) */
.peekview-widget {
   background-color: var(--color-third) !important;
}

/* 2) Now target the embedded editor itself */
.peekview-widget .peekview-editor .editor-widget,
.peekview-widget .peekview-editor .monaco-editor,
.peekview-widget .peekview-editor .monaco-editor-background,
.peekview-widget .peekview-editor .lines-content {
   /* your normal editor bg */
   background-color: var(--color-third) !important;
}

/* 3) If you want the gutter (line numbers/margin) too */
.peekview-widget .peekview-editor .margin-view-overlays,
.peekview-widget .peekview-editor .glyph-margin,
.peekview-widget .peekview-editor .margin {
   background-color: var(--color-third) !important;
}

.monaco-editor .reference-zone-widget .ref-tree {
   line-height: 23px;
   background-color: var(--color-third) !important;
   color: var(--color-text) !important;
   border-left: 1px solid var(--color-border-color);
}

.monaco-editor .reference-zone-widget .ref-tree {
   line-height: 23px;
   color: var(--color-text) !important;
}














.monaco-editor .find-widget {
   background-color: var(--color-editor) !important;
   border: 1px solid var(--color-border-color) !important;
   border-top: none !important;
   backdrop-filter: blur(10px);
}

.monaco-editor .find-widget .monaco-sash {
   background-color: var(--color-border-color) !important;
}

.monaco-sash.hover::before {
   background-color: var(--color-accent2) !important;
}

.monaco-inputbox>.ibwrapper {
   background-color: var(--color-border-color) !important;
   border: none !important;
}

.monaco-inputbox {
   border: 1px solid var(--color-border-color) !important;
   /* border-radius: 8px!important; */
   margin-left: 6px !important;
}

.monaco-editor .find-widget .button.left {
   margin-left: 2px !important;
   margin-top: 3px !important;
}

.monaco-editor .find-widget .button.toggle {
   height: 25px !important;
   border-radius: 5px !important;
   min-width: 16px;
}

.monaco-editor .find-widget.visible {}

.monaco-editor .find-widget .button,
.monaco-editor .find-widget>.button.codicon-widget-close {
   min-width: 22px;
   min-height: 22px;
   padding: 3px;
   border-radius: 5px;
}

.monaco-editor .find-widget.no-results .matchesCount {
   color: #cc3633 !important;
   font-weight: 600 !important;
   font-size: 13px !important;
}






/* Command Palette main container */
.quick-input-widget {
   background-color: var(--color-third) !important;
   color: var(--color-text) !important;
   border: 1px solid var(--color-border-hover) !important;
   border-radius: var(--border-radius-button) !important;
   box-shadow: var(--color-box-shadow) !important;
}

.quick-input-widget .input {
   background-color: var(--color-third) !important;
   color: var(--color-text) !important;
   max-width: calc(100% - 0px);
   outline: none;
   border-radius: 4px;
}

.quick-input-widget .input:focus {
   border-color: var(--color-border-hover);
   /* box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1); */
   color: var(--color-text);
   outline: 2px solid var(--color-accent2)
}

.quick-input-widget .monaco-inputbox,
.quick-input-widget .monaco-inputbox>.ibwrapper {
   background-color: transparent !important;
   max-width: calc(100% - 5px);
   border: none !important;
}

/* Command list entries */
.quick-input-widget .monaco-list .monaco-list-row {
   background: transparent !important;
   color: var(--color-text) !important;
}

.monaco-list.list_id_7 .monaco-list-rows {
   background: var(--color-third) !important;
}

/* Highlighted (selected/hover) command list entry */
.quick-input-widget .monaco-list-row.focused,
.quick-input-widget .monaco-list-row.selected {
   background-color: var(--color-selected) !important;
   color: var(--color-textHilight) !important;
}

.quick-input-widget .monaco-list-row:hover {
   background-color: var(--color-fifth) !important;
   color: var(--color-textHilight) !important;
}

/* Optional: Scrollbar inside command palette */
.quick-input-widget .monaco-scrollable-element::-webkit-scrollbar-thumb {
   background-color: var(--color-border-hover) !important;
}

.quick-input-widget .monaco-list-row .highlight {
   color: var(--color-accent2) !important;
   font-weight: 600;
   /* optional, if you want it a little stronger */
}




/* new class  for input widget hover color-disabled */
.quick-input-widget .monaco-list .monaco-list-row .monaco-tl-contents {
   background: none !important;
}








/* Autocomplete Suggest Widget container */
.suggest-widget {
   background-color: var(--color-third) !important;
   color: var(--color-text) !important;
   border: 1px solid var(--color-border-hover) !important;
   /* border-radius: var(--border-radius-button) !important; */
   box-shadow: var(--color-box-shadow) !important;
   overflow: hidden;
}

.suggest-widget .tree {
   background-color: transparent !important;
   border: none !important;
   overflow: hidden;
   /* border-radius: var(--border-radius-button) !important; */
}

/* Also style the list wrapper */
.suggest-widget .monaco-list {
   background-color: transparent !important;
   border: none !important;
}

/* Optional: scroll container inside the list */
.suggest-widget .monaco-scrollable-element {
   background-color: transparent !important;
}

/* Inside the suggest widget (optional if you want a background for list) */
.suggest-widget .monaco-list {
   background-color: var(--color-third) !important;
}

/* Autocomplete suggestion items */
.suggest-widget .monaco-list-row {
   background: transparent !important;
   color: var(--color-text) !important;
}

/* Highlighted or selected item */
.suggest-widget .monaco-list-row.focused,
.suggest-widget .monaco-list-row.selected {
   background-color: var(--color-selected) !important;
   color: var(--color-textHilight) !important;
}

/* Matched characters inside autocomplete suggestions */
.suggest-widget .monaco-list-row .highlight {
   color: var(--color-accent2) !important;
   font-weight: 600;
   /* optional, if you want it a little stronger */
}

/* Hovered items */
.suggest-widget .monaco-list-row:hover {
   background-color: var(--color-fifth) !important;
   color: var(--color-textHilight) !important;
}

/* Optional: Scrollbar inside autocomplete */
.suggest-widget .monaco-scrollable-element::-webkit-scrollbar-thumb {
   background-color: var(--color-border-hover) !important;
}







/* Parameter Hints popup (function arguments tooltip) */
.parameter-hints-widget {
   background-color: var(--color-third) !important;
   color: var(--color-text) !important;
   border: 1px solid var(--color-border-hover) !important;
   /* border-radius: var(--border-radius-button); */
}

/* Inspect Tokens popup */
.inspect-widget {
   background-color: var(--color-third) !important;
   color: var(--color-text) !important;
   border: 1px solid var(--color-border-hover) !important;
   /* border-radius: var(--border-radius-button); */
}

/* Accessibility Help (Ctrl+H) */
.accessible-view {
   background-color: var(--color-third) !important;
   color: var(--color-text) !important;
   border: 1px solid var(--color-border-hover) !important;
   /* border-radius: var(--border-radius-button); */
}

/* Inline ghost text (inline suggestions) */
.inline-completions-widget {
   color: var(--color-note-text) !important;
   opacity: 0.7;
   /* softer */
}

/* Diff review widget */
.monaco-diff-editor .review-widget {
   background-color: var(--color-third) !important;
   color: var(--color-text) !important;
   border: 1px solid var(--color-border-hover) !important;
   /* border-radius: var(--border-radius-button); */
}



/* The whole popup box */
.monaco-hover {
   background-color: var(--color-fourth) !important;
   color: var(--color-text) !important;
   border: 1px solid var(--color-border-hover) !important;
   /* border-radius: var(--border-radius-button) !important; */
   box-shadow: var(--color-box-shadow) !important;
}

/* The inside content */
.monaco-hover-content {
   background-color: transparent !important;
   color: var(--color-text) !important;
}

/* Each row inside (like Foreground, FontStyle, etc.) */
.hover-row {
   background-color: transparent !important;
   color: var(--color-text) !important;
}

.monaco-hover {
   backdrop-filter: blur(8px);
}

/* If there's a color picker preview */
.hover-row.colorpicker {
   background-color: transparent !important;
}

/* Scrollbar inside Inspect Tokens menu */
.monaco-hover .monaco-scrollable-element::-webkit-scrollbar-thumb {
   background-color: var(--color-border-hover) !important;
}

.accessible-view {
   background-color: var(--color-third) !important;
   color: var(--color-text) !important;
   border: 1px solid var(--color-border-hover) !important;
   /* border-radius: var(--border-radius-button); */
   box-shadow: var(--color-box-shadow);
}

/* Inner content */
.accessible-view .monaco-list {
   background: transparent !important;
}

.accessible-view .monaco-list-row {
   background: transparent !important;
   color: var(--color-text) !important;
}

.accessible-view .monaco-list-row.focused,
.accessible-view .monaco-list-row.selected {
   background-color: var(--color-selected) !important;
   color: var(--color-textHilight) !important;
}

/* Optional: Scrollbars */
.accessible-view .monaco-scrollable-element::-webkit-scrollbar-thumb {
   background-color: var(--color-border-hover) !important;
}


.colorpicker-color-decoration {
   /* border-radius: 2px; */
}



.line-highlight-default {
   background-color: var(--color-selected);
}

.line-highlight-log {
   background-color: rgba(119, 119, 119, 0.2);
}

.line-highlight-warn {
   background-color: rgba(255, 193, 7, 0.25);
}

.line-highlight-error {
   background-color: rgba(220, 53, 69, 0.25);
}

.line-highlight-debug {
   background-color: rgba(90, 63, 119, 0.25);
}

.line-highlight-info {
   background-color: rgba(37, 85, 149, 0.25);
}

.line-highlight-search-result {
   opacity: 0.35;
   background-color: var(--search-result-hilight-background);
}



.file-path-header {
   height: 25px;
   display: flex;
   align-items: center;
   padding: 0px 12px;
   background-color: var(--color-editor);
   color: var(--color-note-text);
   font-size: var(--font-size-sm);
   font-size: 0.8rem;
   font-weight: 500;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
   scrollbar-width: none;
}

.file-path-header::-webkit-scrollbar {
   display: none;
}

.file-path-header .path-segment {
   display: flex;
   align-items: center;
   gap: 4px;
}

.file-path-header .path-segment i {
   font-size: 13px;
   /* margin-top: 2px; */
   color: var(--color-note-text);
}

.file-path-header .separator {
   margin: 0 2px;
   color: var(--color-note-text);
   font-size: 14px;
}

.file-path-header i {
   font-size: var(--font-size-xsm);
}

.monaco-menu .action-item i.ti {
   font-size: 14px !important;
   vertical-align: middle;
   margin-right: 8px;
   margin-left: -20px;
}



/* leave base alone */
.monaco-editor .scrollbar > .slider,
.monaco-scrollable-element .scrollbar > .slider {
  background: var(--scroll-thumb) !important;
}

/* Prefer relative color math when supported */
@supports (color: color-mix(in oklab, white 50%, black 50%)) {
  /* OS/browser scheme */
  @media (prefers-color-scheme: light) {
    .monaco-editor .scrollbar > .slider:hover,
    .monaco-scrollable-element .scrollbar > .slider:hover {
      background: color-mix(in oklab, var(--scroll-thumb) 88%, black 12%) !important; /* darker */
    }
    .monaco-editor .scrollbar > .slider.active,
    .monaco-scrollable-element .scrollbar > .slider.active {
      background: color-mix(in oklab, var(--scroll-thumb) 80%, black 20%) !important; /* more dark */
    }
  }

  @media (prefers-color-scheme: dark) {
    .monaco-editor .scrollbar > .slider:hover,
    .monaco-scrollable-element .scrollbar > .slider:hover {
      background: color-mix(in oklab, var(--scroll-thumb) 88%, white 12%) !important; /* lighter */
    }
    .monaco-editor .scrollbar > .slider.active,
    .monaco-scrollable-element .scrollbar > .slider.active {
      background: color-mix(in oklab, var(--scroll-thumb) 80%, white 20%) !important; /* more light */
    }
  }

  /* If you rely on Monaco's theme classes instead of OS scheme, use these too: */
  .monaco-editor.vs .scrollbar > .slider:hover,
  .monaco-scrollable-element.vs .scrollbar > .slider:hover {
    background: color-mix(in oklab, var(--scroll-thumb) 88%, black 12%) !important;
  }
  .monaco-editor.vs .scrollbar > .slider.active,
  .monaco-scrollable-element.vs .scrollbar > .slider.active {
    background: color-mix(in oklab, var(--scroll-thumb) 80%, black 20%) !important;
  }

  .monaco-editor.vs-dark .scrollbar > .slider:hover,
  .monaco-scrollable-element.vs-dark .scrollbar > .slider:hover {
    background: color-mix(in oklab, var(--scroll-thumb) 88%, white 12%) !important;
  }
  .monaco-editor.vs-dark .scrollbar > .slider.active,
  .monaco-scrollable-element.vs-dark .scrollbar > .slider.active {
    background: color-mix(in oklab, var(--scroll-thumb) 80%, white 20%) !important;
  }
}

/* Fallback (older browsers): tiny filter nudge if color-mix isn’t available */
@supports not (color: color-mix(in oklab, white 50%, black 50%)) {
  @media (prefers-color-scheme: light) {
    .monaco-editor .scrollbar > .slider:hover,
    .monaco-scrollable-element .scrollbar > .slider:hover { filter: brightness(0.92) !important; }
    .monaco-editor .scrollbar > .slider.active,
    .monaco-scrollable-element .scrollbar > .slider.active { filter: brightness(0.84) !important; }
  }
  @media (prefers-color-scheme: dark) {
    .monaco-editor .scrollbar > .slider:hover,
    .monaco-scrollable-element .scrollbar > .slider:hover { filter: brightness(1.10) !important; }
    .monaco-editor .scrollbar > .slider.active,
    .monaco-scrollable-element .scrollbar > .slider.active { filter: brightness(1.20) !important; }
  }
}