/* Remove focus outlines */
*:focus {
  outline: none !important;
}

.ql-editor:focus {
  outline: none !important;
}

#editor:focus {
  outline: none !important;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'PixelatedMsSansSerif', 'MS Sans Serif', Arial, sans-serif;
  background-color: #D4D0C8;
}

/* Prevent any parent scrollbars */
.wordpad-container > *:not(.ql-container) {
  overflow: hidden !important;
}

/* Windows 98 Scrollbar Styling with SVG Match */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar:horizontal {
  height: 17px;
}

::-webkit-scrollbar-corner {
  background-color: #d4d0c8;
}

::-webkit-scrollbar-track {
  background-color: #c0c0c0;
  /* Simulated crosshatch pattern */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"><path d="M 1 0 L 0 1 M 4 3 L 3 4 M 3 0 L 0 3 M 4 1 L 1 4" stroke="%23cfcfcf" stroke-width="1" fill="none"/></svg>');
  background-repeat: repeat;
}

::-webkit-scrollbar-thumb {
  background-color: #d4d0c8;
  box-shadow: inset -1px -1px #000000, inset 1px 1px #FFFFFF, inset -2px -2px #808080, inset 2px 2px #DFDFDF;
}

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
}

/* Up button - exact Windows 98 button styling */
::-webkit-scrollbar-button:vertical:start {
  height: 17px;
  background-color: #d4d0c8;
  box-shadow: inset -1px -1px #000000, inset 1px 1px #FFFFFF, inset -2px -2px #808080, inset 2px 2px #DFDFDF;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17"><rect x="0" y="0" width="16" height="17" fill="%23d4d0c8"/><polygon points="8,5 4,9 12,9" fill="%23000000"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
}

/* Down button - exact Windows 98 button styling */
::-webkit-scrollbar-button:vertical:end {
  height: 17px;
  background-color: #d4d0c8;
  box-shadow: inset -1px -1px #000000, inset 1px 1px #FFFFFF, inset -2px -2px #808080, inset 2px 2px #DFDFDF;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17"><rect x="0" y="0" width="16" height="17" fill="%23d4d0c8"/><polygon points="4,5 12,5 8,9" fill="%23000000"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
}

/* Left button - exact Windows 98 button styling */
::-webkit-scrollbar-button:horizontal:start {
  width: 16px;
  background-color: #d4d0c8;
  box-shadow: inset -1px -1px #000000, inset 1px 1px #FFFFFF, inset -2px -2px #808080, inset 2px 2px #DFDFDF;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17"><rect x="0" y="0" width="16" height="17" fill="%23d4d0c8"/><polygon points="5,8 9,4 9,12" fill="%23000000"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
}

/* Right button - exact Windows 98 button styling */
::-webkit-scrollbar-button:horizontal:end {
  width: 16px;
  background-color: #d4d0c8;
  box-shadow: inset -1px -1px #000000, inset 1px 1px #FFFFFF, inset -2px -2px #808080, inset 2px 2px #DFDFDF;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17"><rect x="0" y="0" width="16" height="17" fill="%23d4d0c8"/><polygon points="5,4 9,8 5,12" fill="%23000000"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
}

/* Active button states - with pressed-in look */
::-webkit-scrollbar-button:vertical:start:active {
  background-color: #d4d0c8;
  box-shadow: inset 1px 1px #000000, inset -1px -1px #FFFFFF, inset 2px 2px #808080, inset -2px -2px #DFDFDF;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17"><rect x="0" y="0" width="16" height="17" fill="%23d4d0c8"/><polygon points="8,6 4,10 12,10" fill="%23000000"/></svg>');
  background-position: center;
}

::-webkit-scrollbar-button:vertical:end:active {
  background-color: #d4d0c8;
  box-shadow: inset 1px 1px #000000, inset -1px -1px #FFFFFF, inset 2px 2px #808080, inset -2px -2px #DFDFDF;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17"><rect x="0" y="0" width="16" height="17" fill="%23d4d0c8"/><polygon points="4,6 12,6 8,10" fill="%23000000"/></svg>');
  background-position: center;
}

::-webkit-scrollbar-button:horizontal:start:active {
  background-color: #d4d0c8;
  box-shadow: inset 1px 1px #000000, inset -1px -1px #FFFFFF, inset 2px 2px #808080, inset -2px -2px #DFDFDF;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17"><rect x="0" y="0" width="16" height="17" fill="%23d4d0c8"/><polygon points="6,8 10,4 10,12" fill="%23000000"/></svg>');
  background-position: center;
}

::-webkit-scrollbar-button:horizontal:end:active {
  background-color: #d4d0c8;
  box-shadow: inset 1px 1px #000000, inset -1px -1px #FFFFFF, inset 2px 2px #808080, inset -2px -2px #DFDFDF;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17"><rect x="0" y="0" width="16" height="17" fill="%23d4d0c8"/><polygon points="6,4 10,8 6,12" fill="%23000000"/></svg>');
  background-position: center;
}

/* Firefox - Reset to browser default */
@-moz-document url-prefix() {
  * {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
  }
}

.wordpad-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden; /* This prevents the entire container from scrolling */
}

/* Custom Windows 98 toolbar */
.wordpad-toolbar {
  height: 27px;
  background-color: #D4D0C8;
  border-bottom: 1px solid #808080;
  outline: 1px solid #ffffff;
  padding: 2px;
  display: block !important; /* Force block display */
  flex-shrink: 0;
  z-index: 10;
  text-align: left; /* Ensure alignment */
}

/* Add specific styling for toolbar buttons when in block layout */
.wordpad-toolbar .toolbar-button,
.wordpad-toolbar .toolbar-separator {
  display: inline-block !important;
  vertical-align: middle;
}

/* Formatting bar with font selectors */
.formatting-bar {
  height: 30px;
  background-color: #D4D0C8;
  border-bottom: 1px solid #808080;
  padding: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 10;
}

/* Hidden state for toolbar/format bar */
.wordpad-toolbar[style*="display: none"],
.formatting-bar[style*="display: none"] {
  display: none !important;
}

.formatting-left {
  display: flex;
  align-items: center;
  gap: 5px;
}

.formatting-right {
  display: flex;
  align-items: center;
}

.formatting-right .toolbar-button {
  width: 22px;
  height: 21px;
  margin: 0 1px;
}

.formatting-right .toolbar-separator {
  height: 21px;
}

.font-family-container,
.font-size-container {
  margin-right: 5px;
}

.font-family-container {
  width: 220px;
}

.font-size-container {
  width: 45px;
}

/* Windows 98 style dropdown */
.win98-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  border: none;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  background-color: #FFFFFF;
  border-radius: 0;
  height: 21px;
  padding: 3px 4px;
  padding-right: 18px; /* Space for dropdown button */
  
  /* Simple background approach with exact positioning and data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17'%3E%3Cpath fill='%23dfdfdf' fill-rule='evenodd' d='M15,0H0v16h1V1h14V0Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M2,1h-1v14h1V2h12v-1H2Z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M16,17H0v-1h15V0h1v17Z'/%3E%3Cpath fill='gray' fill-rule='evenodd' d='M15,1h-1v14H1v1h14V1Z'/%3E%3Crect fill='%23d4d0c8' x='2' y='2' width='12' height='13'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M11,6h-7v1h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1Z'/%3E%3C/svg%3E");
  background-position: right 2px top 0px;
  background-repeat: no-repeat;
  background-size: 16px 21px;
  background-clip: border-box;
  /* Add pixel-perfect rendering */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  
  font-family: 'PixelatedMsSansSerif', 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
}

.win98-select:focus {
  outline: none;
}

.win98-select:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17'%3E%3Cpath fill='gray' fill-rule='evenodd' d='M0,0h16v17H0V0ZM1,16h14V1H1v15Z'/%3E%3Crect fill='%23d4d0c8' x='1' y='1' width='14' height='15'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12,7h-7v1h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1Z'/%3E%3C/svg%3E");
}

.toolbar-button {
  width: 23px;
  height: 22px;
  margin: 0 1px;
  background-color: #D4D0C8;
  background-image: url('/assets/img/wordpad-toolbar/wordpad.png');
  background-repeat: no-repeat;
  background-size: auto 22px;
  /* Windows 98 3D border - normal state */
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
  cursor: pointer;
  /* Pixel-perfect rendering */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

.toolbar-button:hover {
  /* Keep same border style on hover */
}

/* Pressed state - inverted borders */
.toolbar-button:active {
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  /* Shift icon slightly */
  background-position-x: calc(var(--bg-x, 0px) + 1px);
  background-position-y: 1px;
}

/* Toggled/active state - pressed in with checkerboard */
.toolbar-button.active {
  border-top: 1px solid #000000 !important;
  border-left: 1px solid #000000 !important;
  border-bottom: 1px solid #FFFFFF !important;
  border-right: 1px solid #FFFFFF !important;
  background-color: #c0c0c0;
  /* Add checkerboard pattern overlay with proper sizing */
  background-image: 
    url('/assets/img/wordpad-toolbar/wordpad.png'),
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAAAAABX3VL4AAAADklEQVQIHWP4f4DhwH8ACoADf16N/DIAAAAASUVORK5CYII=');
  background-size: auto 22px, 2px 2px;
  background-repeat: no-repeat, repeat;
  /* Shift icon slightly */
  background-position: calc(var(--bg-x, 0px) + 1px) 1px, 0 0;
}

.toolbar-separator {
  width: 1px;
  height: 22px;
  margin: 3px 3px;
  background-color: #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff
}


/* Toolbar button positions in sprite with CSS variables */
.toolbar-new { --bg-x: 0px; background-position: 0px 0; }
.toolbar-open { --bg-x: -23px; background-position: -23px 0; }
.toolbar-save { --bg-x: -46px; background-position: -46px 0; }
.toolbar-print { --bg-x: -69px; background-position: -69px 0; }
.toolbar-print-preview { --bg-x: -92px; background-position: -92px 0; }
.toolbar-find { --bg-x: -115px; background-position: -115px 0; }
.toolbar-cut { --bg-x: -138px; background-position: -138px 0; }
.toolbar-copy { --bg-x: -161px; background-position: -161px 0; }
.toolbar-paste { --bg-x: -184px; background-position: -184px 0; }
.toolbar-undo { --bg-x: -207px; background-position: -207px 0; }
.toolbar-datetime { --bg-x: -230px; background-position: -230px 0; }
.toolbar-bold { --bg-x: -253px; background-position: -253px 0; }
.toolbar-italic { --bg-x: -276px; background-position: -276px 0; }
.toolbar-underline { --bg-x: -299px; background-position: -299px 0; }
.toolbar-color { --bg-x: -322px; background-position: -322px 0; }
.toolbar-align-left { --bg-x: -345px; background-position: -345px 0; }
.toolbar-align-center { --bg-x: -368px; background-position: -368px 0; }
.toolbar-align-right { --bg-x: -391px; background-position: -391px 0; }
.toolbar-bullet { --bg-x: -414px; background-position: -414px 0; }

/* Override Quill's default styling */
#editor {
  flex-grow: 1;
  border: 1px inset #FFFFFF;
  background-color: #FFFFFF;
  position: relative; /* Ensures proper stacking context */
  min-height: 200px; /* Ensure editor has a minimum height */
  cursor: text; /* Show text cursor */
  z-index: 1; /* Lower z-index to allow dropdowns to appear above */
}

.ql-container {
  font-family: 'Times New Roman', Times, serif;
  font-size: 12pt;
  border: none !important;
  height: 100%; /* Fill the available space */
  overflow: auto; /* Handle scrolling at this level */
}

.ql-editor {
  padding: 10px;
  min-height: 100%; /* Ensure it takes up at least full height */
  overflow: visible; /* Don't add additional scrollbars here */
  cursor: text; /* Show text cursor */
}

/* Direct font application */
#editor, .ql-editor {
  font-family: Times New Roman, serif !important;
  font-size: 10pt !important;
}

/* Font size styles */
.ql-editor[data-fontsize="8pt"] { font-size: 8pt !important; }
.ql-editor[data-fontsize="9pt"] { font-size: 9pt !important; }
.ql-editor[data-fontsize="10pt"] { font-size: 10pt !important; }
.ql-editor[data-fontsize="11pt"] { font-size: 11pt !important; }
.ql-editor[data-fontsize="12pt"] { font-size: 12pt !important; }
.ql-editor[data-fontsize="14pt"] { font-size: 14pt !important; }
.ql-editor[data-fontsize="16pt"] { font-size: 16pt !important; }
.ql-editor[data-fontsize="18pt"] { font-size: 18pt !important; }
.ql-editor[data-fontsize="24pt"] { font-size: 24pt !important; }
.ql-editor[data-fontsize="36pt"] { font-size: 36pt !important; }

#editor[data-font="Times New Roman"], 
.ql-editor[data-font="Times New Roman"],
.forced-font-times-new-roman {
  font-family: 'Times New Roman', Times, serif !important;
}

#editor[data-font="Arial"], 
.ql-editor[data-font="Arial"],
.forced-font-arial {
  font-family: Arial, Helvetica, sans-serif !important;
}

#editor[data-font="Courier New"], 
.ql-editor[data-font="Courier New"],
.forced-font-courier-new {
  font-family: 'Courier New', Courier, monospace !important;
}

#editor[data-font="Georgia"], 
.ql-editor[data-font="Georgia"],
.forced-font-georgia {
  font-family: Georgia, serif !important;
}

#editor[data-font="Lucida Console"], 
.ql-editor[data-font="Lucida Console"],
.forced-font-lucida-console {
  font-family: 'Lucida Console', Monaco, monospace !important;
}

#editor[data-font="Microsoft Sans Serif"], 
.ql-editor[data-font="Microsoft Sans Serif"],
.forced-font-microsoft-sans-serif {
  font-family: 'Microsoft Sans Serif', Arial, sans-serif !important;
}

#editor[data-font="Tahoma"], 
.ql-editor[data-font="Tahoma"],
.forced-font-tahoma {
  font-family: Tahoma, Geneva, sans-serif !important;
}

#editor[data-font="Trebuchet MS"], 
.ql-editor[data-font="Trebuchet MS"],
.forced-font-trebuchet-ms {
  font-family: 'Trebuchet MS', sans-serif !important;
}

#editor[data-font="Verdana"], 
.ql-editor[data-font="Verdana"],
.forced-font-verdana {
  font-family: Verdana, Geneva, sans-serif !important;
}

#editor[data-font="Comic Sans MS"], 
.ql-editor[data-font="Comic Sans MS"],
.forced-font-comic-sans-ms {
  font-family: 'Comic Sans MS', cursive, sans-serif !important;
}

/* Hide Quill's toolbar */
.ql-toolbar.ql-snow {
  display: none;
}

/* Status bar */
#internal-status-bar {
  display: none !important; /* Always hide the internal status bar */
}

.wordpad-statusbar {
  height: 20px;
  background-color: #D4D0C8;
  border-top: 1px solid #808080;
  padding: 2px 5px;
  font-size: 11px;
  user-select: none; /* Prevent text selection */
  pointer-events: none; /* Prevent drag events except for resize handle */
  flex-shrink: 0; /* Prevent status bar from shrinking */
  z-index: 10; /* Ensure the status bar stays on top */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-left {
  flex-grow: 1;
}

.status-right {
  display: flex;
  align-items: center;
  pointer-events: auto; /* Allow interaction with indicators and resize handle */
}

.status-indicator {
  width: 38px;
  height: 14px; /* Increased height */
  margin: 0 2px;
  background-color: #D4D0C8;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: #999; /* Gray text when inactive */
  border-width: 1px;
  border-style: solid;
  border-color: #808080 #ffffff #ffffff #808080; /* Simple border as specified */
}

.status-indicator.active {
  color: #000000; /* Show text only when active */
  font-weight: bold;
}

.resize-handle {
  width: 16px;
  height: 16px;
  margin-left: 1px;
  margin-right: -2px; /* Push closer to edge */
  cursor: nwse-resize;
  pointer-events: auto;
}

/* Color picker */
.color-picker {
  background-color: #D4D0C8;
  border: 2px outset #fff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.color-swatch {
  cursor: pointer;
  border: 1px solid #000;
}

.color-swatch:hover {
  border: 1px solid #fff;
  outline: 1px solid #000;
}

/* Find Dialog */
.find-dialog {
  width: 320px;
  background-color: #D4D0C8;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  border: 2px outset #fff;
  font-family: 'PixelatedMsSansSerif', 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
}

.dialog-titlebar {
  display: flex;
  background-color: #000080;
  color: white;
  height: 18px;
  font-weight: bold;
  padding: 2px 3px;
  justify-content: space-between;
  align-items: center;
}

.dialog-title {
  font-size: 11px;
}

.dialog-close {
  width: 14px;
  height: 14px;
  background-color: #D4D0C8;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 13px;
  font-weight: normal;
  cursor: pointer;
  border: 1px outset #fff;
}

.dialog-close:active {
  border: 1px inset #fff;
}

.dialog-content {
  padding: 10px;
}

.dialog-row {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.dialog-row label:first-child {
  width: 80px;
}

.dialog-textbox {
  flex: 1;
  height: 22px;
  border: 1px inset #fff;
  background-color: white;
  padding: 2px 4px;
}

.dialog-checkboxes {
  margin-left: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dialog-checkboxes label,
.radio-group label {
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.radio-group {
  margin-left: 80px;
  display: flex;
  align-items: center;
}

.radio-group div {
  margin-right: 20px;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.dialog-buttons button {
  min-width: 75px;
  height: 22px;
  padding: 0 10px;
  background-color: #D4D0C8;
  border: 2px outset #fff;
  font-family: 'PixelatedMsSansSerif', 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
  cursor: pointer;
}

.dialog-buttons button:active {
  border: 2px inset #fff;
}

.dialog-buttons button:focus {
  outline: 1px dotted #000;
  outline-offset: -5px;
}

/* Custom Dropdown Components - Full control over styling */
.custom-dropdown {
    position: relative;
    display: inline-block;
    height: 21px;
    min-width: 50px;
    font-family: 'PixelatedMsSansSerif', 'MS Sans Serif', Arial, sans-serif;
    font-size: 11px;
    cursor: pointer;
    z-index: 1500; /* Ensure dropdown container is above other elements */
}

.dropdown-display {
    width: 100%;
    height: 21px;
    padding: 3px 18px 3px 4px;
    box-sizing: border-box;
    background-color: #ffffff;
    border: none;
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    color: #000000;
    line-height: 15px;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.dropdown-arrow {
    position: absolute;
    top: 0;
    right: 2px;
    width: 16px;
    height: 21px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17'%3E%3Cpath fill='%23dfdfdf' fill-rule='evenodd' d='M15,0H0v16h1V1h14V0Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M2,1h-1v14h1V2h12v-1H2Z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M16,17H0v-1h15V0h1v17Z'/%3E%3Cpath fill='gray' fill-rule='evenodd' d='M15,1h-1v14H1v1h14V1Z'/%3E%3Crect fill='%23d4d0c8' x='2' y='2' width='12' height='13'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M11,6h-7v1h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1Z'/%3E%3C/svg%3E");
    background-size: 16px 21px;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

.custom-dropdown:active .dropdown-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17'%3E%3Cpath fill='gray' fill-rule='evenodd' d='M0,0h16v17H0V0ZM1,16h14V1H1v15Z'/%3E%3Crect fill='%23d4d0c8' x='1' y='1' width='14' height='15'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12,7h-7v1h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1Z'/%3E%3C/svg%3E");
}

.dropdown-list {
    position: fixed; /* Changed from absolute to fixed to escape parent clipping */
    background-color: #ffffff;
    border: 1px solid #000000;
    max-height: 150px;
    overflow-y: auto;
    z-index: 2000; /* Higher than editor and other elements */
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    min-width: 100px; /* Ensure minimum width */
}

.dropdown-option {
    padding: 2px 4px;
    background-color: #ffffff;
    color: #000000;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-option:hover {
    background-color: #000080 !important; /* Proper Windows 98 blue */
    color: #ffffff !important;
}

.dropdown-option.selected {
    background-color: #000080;
    color: #ffffff;
}

.custom-dropdown.wide {
    width: 220px;
}

.font-size-container .custom-dropdown {
    width: 45px;
}

/* Find Dialog */
.find-dialog {
  width: 320px;
  background-color: #D4D0C8;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  border: 2px outset #fff;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
}

.dialog-titlebar {
  display: flex;
  background-color: #000080;
  color: white;
  height: 18px;
  font-weight: bold;
  padding: 2px 3px;
  justify-content: space-between;
  align-items: center;
}

.dialog-title {
  font-size: 11px;
}

.dialog-close {
  width: 14px;
  height: 14px;
  background-color: #D4D0C8;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 13px;
  font-weight: normal;
  cursor: pointer;
  border: 1px outset #fff;
}

.dialog-close:active {
  border: 1px inset #fff;
}

.dialog-content {
  padding: 10px;
}

.dialog-row {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.dialog-row label:first-child {
  width: 80px;
}

.dialog-textbox {
  flex: 1;
  height: 22px;
  border: 1px inset #fff;
  background-color: white;
  padding: 2px 4px;
}

.dialog-checkboxes {
  margin-left: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dialog-checkboxes label,
.radio-group label {
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.radio-group {
  margin-left: 80px;
  display: flex;
  align-items: center;
}

.radio-group div {
  margin-right: 20px;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.dialog-buttons button {
  min-width: 75px;
  height: 22px;
  padding: 0 10px;
  background-color: #D4D0C8;
  border: 2px outset #fff;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
  cursor: pointer;
}

.dialog-buttons button:active {
  border: 2px inset #fff;
}

.dialog-buttons button:focus {
  outline: 1px dotted #000;
  outline-offset: -5px;
}