/* Tailwind-inspired Base Styles */
* {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#circuitjs-theme {
    background-color: #0f172a;
    /* slate-900 */
    color: #f8fafc;
    /* slate-50 */
}

#circuitjs-theme .gwt-TextArea {
    background-color: #1e293b;
    /* slate-800 */
    color: #f8fafc;
    /* slate-50 */
    border: 1px solid #94a3b8;
    /* slate-400 */
    border-radius: 0.375rem;
    /* 6px */
    padding: 0.5rem;
    /* 8px */
    font-size: 0.875rem;
    /* 14px */
    margin-bottom: 0.75rem;
    /* 12px */
    margin-top: 0.75rem;
    /* 12px */
}

/* Frame and Sidebar Styles */
#circuitjs-theme .gwt-Frame {
    background-color: #1e293b;
    /* slate-800 */
    border: none;
}

#circuitjs-theme iframe {
    background-color: #1e293b;
    /* slate-800 */
}

/* Vertical Panel (Left Sidebar) */
#circuitjs-theme .gwt-VerticalPanel {
    background-color: #1e293b;
    /* slate-800 */
    color: #f8fafc;
    /* slate-50 */
}

#circuitjs-theme .sidebar-panel {
    background-color: #1e293b;
    /* slate-800 */
    padding-left: 10px;
}

#circuitjs-theme .sidebar-panel .gwt-Label {
    color: #e2e8f0;
    /* slate-200 */
    font-size: 0.875rem;
    /* 14px */
    margin-bottom: 0.5rem;
}

#circuitjs-theme .sidebar-panel .gwt-TextBox,
#circuitjs-theme .sidebar-panel input[type="text"] {
    background-color: #0f172a;
    /* slate-900 */
    color: #f8fafc;
    /* slate-50 */
    border: 1px solid #475569;
    /* slate-600 */
    border-radius: 0.375rem;
    /* 6px */
    padding: 0.5rem;
}

#circuitjs-theme .sidebar-panel .gwt-Button {
    background-color: #334155;
    /* slate-700 */
    color: #f8fafc;
    /* slate-50 */
    border: 1px solid #475569;
    /* slate-600 */
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    transition: all 0.15s ease;
}

#circuitjs-theme .sidebar-panel .gwt-Button:hover {
    background-color: #475569;
    /* slate-600 */
}

#circuitjs-theme .gwt-Label {
    color: #f8fafc;
    /* slate-50 */
}

#circuitjs-theme .disabled {
    color: #94a3b8;
    /* slate-400 */
}

#circuitjs-theme .topSpace {
    margin-top: 0.75rem;
    /* 12px */
}

#circuitjs-theme .cursorPointer {
    cursor: default;
}

#circuitjs-theme .cursorCross {
    cursor: crosshair;
}

#circuitjs-theme .cursorSplitter {
    cursor: row-resize;
}

#circuitjs-theme .gwt-MenuItem-disabled {
    color: #64748b;
    /* slate-500 */
}

#circuitjs-theme .offScreen {
    position: absolute;
    right: 101%;
    overflow: hidden;
}

#circuitjs-theme .gwt-PopupPanel {
    border: none;
    background: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    /* 8px */
}

#circuitjs-theme .gwt-PopupPanel * {
    border: none;
}

/* Menu Styles - Tailwind inspired */
#circuitjs-theme .gwt-MenuBar-horizontal .gwt-MenuItem {
    padding: 0.625rem 1rem;
    /* 10px 16px */
    font-weight: 500;
    transition: all 0.15s ease;
}

#circuitjs-theme .gwt-MenuItem {
    font-size: 0.9375rem;
    /* 15px */
    color: #f8fafc;
    /* slate-50 */
    background-color: transparent;
    padding: 0.5rem 0.75rem;
    /* 8px 12px */
    transition: all 0.15s ease;
    font-weight: 400;
}

#circuitjs-theme .gwt-MenuItem:hover {
    background-color: #334155;
    /* slate-700 */
    border-radius: 0.375rem;
    /* 6px */
}

#circuitjs-theme .gwt-MenuItem-selected {
    background-color: #334155;
    /* slate-700 */
    border-radius: 0.375rem;
    /* 6px */
}

#circuitjs-theme .gwt-MenuBar {
    background-color: #1e293b;
    /* slate-800 */
    border: none;
}

#circuitjs-theme .gwt-MenuBar-horizontal {
    font-size: 0.9375rem;
    /* 15px */
    background: transparent;
    border: none;
    background-color: #1e293b;
    /* slate-800 */
}

#circuitjs-theme .gwt-MenuBar-vertical {
    background-color: #1e293b;
    /* slate-800 */
    border-radius: 0.5rem;
    /* 8px */
    padding: 0.5rem;
    /* 8px */
}

#circuitjs-theme .gwt-MenuBar .gwt-MenuItem {
    color: #f8fafc;
    /* slate-50 */
}

#circuitjs-theme .gwt-MenuBar-horizontal>.gwt-MenuItem {
    color: #f8fafc;
    /* slate-50 */
}

#circuitjs-theme .gwt-MenuBar-vertical .subMenuIcon-selected {
    background: none;
}

#circuitjs-theme .gwt-MenuBar-vertical .subMenuIcon {
    background: none;
    padding-right: 1.5rem;
    /* 24px */
    position: relative;
}

#circuitjs-theme .gwt-MenuBar-vertical .subMenuIcon::after {
    content: '';
    position: absolute;
    right: 0.5rem;
    /* 8px */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid #94a3b8;
    /* slate-400 */
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

#circuitjs-theme .gwt-MenuBar-vertical .subMenuIcon-selected::after {
    border-left-color: #cbd5e1;
    /* slate-300 */
}

#circuitjs-theme .gwt-MenuBar-vertical .subMenuIcon img {
    display: none;
}

/* Label Styles */
#circuitjs-theme .gwt-Label-selected {
    font-size: 1.125rem;
    /* 18px */
    font-weight: 600;
    border-top: 1px solid #334155;
    /* slate-700 */
    border-bottom: 1px solid #334155;
    padding: 0.5rem 0;
}

#circuitjs-theme .gwt-Label-1off {
    color: #64748b;
    /* slate-500 */
}

#circuitjs-theme .gwt-Label-2off {
    font-size: 0.875rem;
    /* 14px */
    color: #94a3b8;
    /* slate-400 */
}

#circuitjs-theme .gwt-Label-current {
    font-weight: 500;
}

/* Button Styles - Tailwind inspired */
#circuitjs-theme .gwt-Button.chbut {
    padding: 0.5rem 0.75rem;
    /* 8px 12px */
    margin: 0.375rem;
    /* 6px */
    border-radius: 0.375rem;
    /* 6px */
    font-weight: 500;
    transition: all 0.15s ease;
    border: 1px solid #475569;
    /* slate-600 */
}

#circuitjs-theme .gwt-Button.chbut:hover {
    background-color: #334155;
    /* slate-700 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

#circuitjs-theme .gwt-Button.chbut.chsel {
    font-weight: 600;
    background-color: #334155;
    /* slate-700 */
}

#circuitjs-theme .gwt-Button.chbut-black {
    background: #0f172a;
    /* slate-900 */
    color: #f8fafc;
    /* slate-50 */
    border: 1px solid #1e293b;
    /* slate-800 */
}

#circuitjs-theme .gwt-Button.chbut-white {
    background: #f8fafc;
    /* slate-50 */
    color: #0f172a;
    /* slate-900 */
    border: 1px solid #cbd5e1;
    /* slate-300 */
}

/* TextBox Styles */
#circuitjs-theme .gwt-TextBox.scalebox {
    width: 100px;
    padding: 0.5rem;
    /* 8px */
    border-radius: 0.375rem;
    /* 6px */
    border: 1px solid #475569;
    /* slate-600 */
    background-color: #1e293b;
    /* slate-800 */
    color: #f8fafc;
    /* slate-50 */
    font-size: 0.875rem;
    /* 14px */
}

#circuitjs-theme .gwt-TextBox.scalebox:focus {
    outline: none;
    border-color: #3b82f6;
    /* blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Expand Button */
#circuitjs-theme .gwt-Button.expand-but {
    line-height: 1;
    font-size: 0.75rem;
    /* 12px */
    margin-right: 0.375rem;
    /* 6px */
    border-radius: 0.25rem;
    /* 4px */
    display: inline-block;
    text-align: center;
    width: 1.25rem;
    /* 20px */
    height: 1.25rem;
    /* 20px */
    padding: 0;
    background: #64748b;
    /* slate-500 */
    color: white;
    border: none;
    transition: all 0.15s ease;
}

#circuitjs-theme .gwt-Button.expand-but:hover {
    background: #475569;
    /* slate-600 */
}

#circuitjs-theme .topButton-run,
#circuitjs-theme .topButton-reset,
#circuitjs-theme .topButton-stop {
    width: 65px;
    height: 56px;
    margin-right: 3px !important;
}


/* Top Buttons */
#circuitjs-theme .topButton-stop {
    margin: 0.375rem 0 0.375rem 0.375rem;
    /* 6px */
    padding: 0.5rem 1rem;
    /* 8px 16px */
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 1.25rem;
    /* 20px for emoji */
    font-weight: 500;
    background-color: #ef4444;
    /* red-500 */
    border: 1px solid #dc2626;
    /* red-600 */
    border-radius: 0.5rem;
    /* 8px */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    min-width: 3rem;
    /* 48px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#circuitjs-theme .topButton-stop:hover {
    background-color: #dc2626;
    /* red-600 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}


#circuitjs-theme .topButton,
#circuitjs-theme .topButton-run,
#circuitjs-theme .topButton-reset {
    margin: 0.375rem 0 0.375rem 0.375rem;
    /* 6px */
    padding: 0.5rem 1rem;
    /* 8px 16px */
    text-decoration: none;
    cursor: pointer;
    font-size: 1.25rem;
    /* 20px for icons */
    font-weight: 500;
    background-color: #334155;
    /* slate-700 */
    color: #f8fafc;
    /* slate-50 */
    border: 1px solid #475569;
    /* slate-600 */
    border-radius: 0.5rem;
    /* 8px */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    min-width: 3rem;
    /* 48px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#circuitjs-theme .topButton:hover,
#circuitjs-theme .topButton-run:hover,
#circuitjs-theme .topButton-reset:hover {
    background-color: #475569;
    /* slate-600 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

#circuitjs-theme .topButton i {
    font-size: 1.25rem;
    /* 20px */
}

/* Floating Buttons for hideSidebar mode */
#circuitjs-theme .floatingButton {
    position: fixed;
    top: 1rem;
    /* 16px */
    padding: 0.5rem 1rem;
    /* 8px 16px */
    text-decoration: none;
    cursor: pointer;
    font-size: 1.25rem;
    /* 20px for emoji */
    font-weight: 500;
    background-color: #334155;
    /* slate-700 */
    color: #f8fafc;
    /* slate-50 */
    border: 1px solid #475569;
    /* slate-600 */
    border-radius: 0.5rem;
    /* 8px */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    min-width: 3rem;
    /* 48px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0.1;
    transition: opacity 0.3s ease, background-color 0.15s ease;
}

#circuitjs-theme .floatingButton:hover {
    opacity: 1;
    background-color: #475569;
    /* slate-600 */
    box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.4);
}

#circuitjs-theme .floatingButton-reset {
    right: 5rem;
    /* 80px - position for reset button */
}

#circuitjs-theme .floatingButton-run {
    right: 1rem;
    /* 16px - position for run/stop button */
}

#circuitjs-theme .radioPanel label {
    margin-right: 1rem;
    /* 16px */
    font-weight: 400;
    color: #cbd5e1;
    /* slate-300 */
}

/* Menu Popup Styles */
#circuitjs-theme .gwt-MenuBarPopup .menuPopupTopCenter,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupTopRight,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupTopLeft,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupBottomCenter,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupBottomRight,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupBottomLeft,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupLeftCenter,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupRightCenter,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupMiddleRight,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupMiddleLeft {
    background: none;
}

/* Override all GWT Clean theme background images */
#circuitjs-theme .gwt-Button,
#circuitjs-theme .gwt-PushButton-up,
#circuitjs-theme .gwt-PushButton-up-hovering,
#circuitjs-theme .gwt-PushButton-up-disabled,
#circuitjs-theme .gwt-PushButton-down,
#circuitjs-theme .gwt-PushButton-down-hovering,
#circuitjs-theme .gwt-PushButton-down-disabled,
#circuitjs-theme .gwt-ToggleButton-up,
#circuitjs-theme .gwt-ToggleButton-up-hovering,
#circuitjs-theme .gwt-ToggleButton-up-disabled,
#circuitjs-theme .gwt-ToggleButton-down,
#circuitjs-theme .gwt-ToggleButton-down-hovering,
#circuitjs-theme .gwt-ToggleButton-down-disabled {
    background-image: none;
}

#circuitjs-theme .gwt-DecoratorPanel .topLeft,
#circuitjs-theme .gwt-DecoratorPanel .topRight,
#circuitjs-theme .gwt-DecoratorPanel .bottomLeft,
#circuitjs-theme .gwt-DecoratorPanel .bottomRight {
    background-image: none;
}

#circuitjs-theme .gwt-MenuBar-horizontal {
    background-image: none;
}

#circuitjs-theme .gwt-MenuBarPopup .menuPopupTopCenter,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupBottomCenter,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupMiddleLeft,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupMiddleRight,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupTopLeft,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupTopRight,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupBottomLeft,
#circuitjs-theme .gwt-MenuBarPopup .menuPopupBottomRight {
    background-image: none;
}

#circuitjs-theme .gwt-DecoratedPopupPanel .popupTopCenter,
#circuitjs-theme .gwt-DecoratedPopupPanel .popupBottomCenter,
#circuitjs-theme .gwt-DecoratedPopupPanel .popupMiddleLeft,
#circuitjs-theme .gwt-DecoratedPopupPanel .popupMiddleRight,
#circuitjs-theme .gwt-DecoratedPopupPanel .popupTopLeft,
#circuitjs-theme .gwt-DecoratedPopupPanel .popupTopRight,
#circuitjs-theme .gwt-DecoratedPopupPanel .popupBottomLeft,
#circuitjs-theme .gwt-DecoratedPopupPanel .popupBottomRight {
    background-image: none;
}

#circuitjs-theme .gwt-RichTextToolbar {
    background-image: none;
}

#circuitjs-theme .gwt-StackPanel .gwt-StackPanelItem,
#circuitjs-theme .gwt-DecoratedStackPanel .stackItemTopLeft,
#circuitjs-theme .gwt-DecoratedStackPanel .stackItemTopRight,
#circuitjs-theme .gwt-DecoratedStackPanel .stackItemTopCenter,
#circuitjs-theme .gwt-DecoratedStackPanel .stackItemMiddleLeft,
#circuitjs-theme .gwt-DecoratedStackPanel .stackItemMiddleRight,
#circuitjs-theme .gwt-DecoratedStackPanel .stackItemMiddleCenter {
    background-image: none;
}

#circuitjs-theme .gwt-SuggestBoxPopup .suggestPopupTopLeft,
#circuitjs-theme .gwt-SuggestBoxPopup .suggestPopupTopRight,
#circuitjs-theme .gwt-SuggestBoxPopup .suggestPopupBottomLeft,
#circuitjs-theme .gwt-SuggestBoxPopup .suggestPopupBottomRight {
    background-image: none;
}

#circuitjs-theme .gwt-DecoratedTabBar .tabTopLeft,
#circuitjs-theme .gwt-DecoratedTabBar .tabTopRight {
    background-image: none;
}

#circuitjs-theme .datePickerDayIsToday {
    background-image: none;
}

#circuitjs-theme .gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
    background-image: none;
}

#circuitjs-theme .gwt-SplitLayoutPanel-HDragger,
#circuitjs-theme .gwt-SplitLayoutPanel-VDragger {
    background-image: none;
}

/* Dialog Box Styles - Dark Theme */
#circuitjs-theme .gwt-DialogBox {
    background-color: #1e293b;
    /* slate-800 */
    border: none;
    border-radius: 0.5rem;
    /* 8px */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    color: #f8fafc;
    /* slate-50 */
}

/* .gwt-DialogBox * {
    border: none;
  } */

#circuitjs-theme .gwt-DialogBox .Caption {
    border: none;
    background-color: #0f172a;
    /* slate-900 */
    color: #f8fafc;
    /* slate-50 */
    padding: 1rem;
    /* 16px */
    font-size: 1rem;
    /* 16px */
    font-weight: 600;
    border-radius: 0.5rem 0.5rem 0 0;
    /* 8px top corners */
    margin-top: 0.5rem;
}

#circuitjs-theme .gwt-DialogBox .dialogContent {
    background-color: #1e293b;
    /* slate-800 */
    padding: 1.5rem;
    /* 24px */
}

#circuitjs-theme .gwt-DialogBox .dialogMiddleCenter {
    background-color: #1e293b;
    /* slate-800 */
    padding: 0;
}

#circuitjs-theme .gwt-DialogBox .dialogTopCenter,
#circuitjs-theme .gwt-DialogBox .dialogTopLeft,
#circuitjs-theme .gwt-DialogBox .dialogTopRight,
#circuitjs-theme .gwt-DialogBox .dialogBottomCenter,
#circuitjs-theme .gwt-DialogBox .dialogBottomLeft,
#circuitjs-theme .gwt-DialogBox .dialogBottomRight,
#circuitjs-theme .gwt-DialogBox .dialogMiddleLeft,
#circuitjs-theme .gwt-DialogBox .dialogMiddleRight {
    background: none;
    background-color: transparent;
    background-image: none;
}

/* Dialog Labels */
#circuitjs-theme .gwt-DialogBox label {
    color: #e2e8f0;
    /* slate-200 */
    font-size: 0.875rem;
    /* 14px */
    font-weight: 400;
}

/* Dialog Checkboxes */
#circuitjs-theme .gwt-DialogBox input[type="checkbox"] {
    accent-color: #3b82f6;
    /* blue-500 */
    cursor: pointer;
}

/* Dialog Radio Buttons */
#circuitjs-theme .gwt-DialogBox input[type="radio"] {
    accent-color: #3b82f6;
    /* blue-500 */
    cursor: pointer;
}

/* Dialog Text Inputs */
#circuitjs-theme .gwt-DialogBox input[type="text"],
#circuitjs-theme .gwt-DialogBox .gwt-TextBox {
    background-color: #0f172a;
    /* slate-900 */
    color: #f8fafc;
    /* slate-50 */
    border: 1px solid #475569;
    /* slate-600 */
    border-radius: 0.375rem;
    /* 6px */
    padding: 0.5rem;
    /* 8px */
    font-size: 0.875rem;
    /* 14px */
}

#circuitjs-theme .gwt-DialogBox input[type="text"]:focus,
#circuitjs-theme .gwt-DialogBox .gwt-TextBox:focus {
    outline: none;
    border-color: #3b82f6;
    /* blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}


#circuitjs-theme .gwt-DialogBox .gwt-Button.expand-but {
    padding: 0rem 1rem;
}

/* Dialog Buttons */
#circuitjs-theme .gwt-DialogBox button,
#circuitjs-theme .gwt-DialogBox .gwt-Button {
    background-color: #334155;
    /* slate-700 */
    color: #f8fafc;
    /* slate-50 */
    border: 1px solid #475569;
    /* slate-600 */
    border-radius: 0.375rem;
    /* 6px */
    padding: 0.5rem 1rem;
    /* 8px 16px */
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}


#circuitjs-theme .gwt-DialogBox button:hover,
#circuitjs-theme .gwt-DialogBox .gwt-Button:hover {
    background-color: #475569;
    /* slate-600 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

/* Dialog Sections */
#circuitjs-theme .gwt-DialogBox .gwt-Label {
    color: #e2e8f0;
    /* slate-200 */
}

#circuitjs-theme .gwt-DialogBox .gwt-HTML {
    color: #cbd5e1;
    /* slate-300 */
}

/* Tailwind 风格滚动条样式 - 全局适用 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #1e293b; /* slate-800 */
}
::-webkit-scrollbar-thumb {
  background: #334155; /* slate-700 */
  border-radius: 0.375rem; /* 6px */
  border: 2px solid #1e293b; /* slate-800 */
}
::-webkit-scrollbar-thumb:hover {
  background: #475569; /* slate-600 */
}
::-webkit-scrollbar-corner {
  background: #1e293b; /* slate-800 */
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #334155 #1e293b;
}