/* ═══════════════════════════════════════════════
   AppsDo Dark Theme for SVG Editor
   Careful overrides that keep icons and dropdowns visible
   ═══════════════════════════════════════════════ */

/* ── Main backgrounds ────────────────────────── */
body, #svg_editor {
  background: #16161e !important;
}

/* Canvas workspace area */
#workarea, #svgcanvas,
.inverted #workarea, .inverted #svgcanvas {
  background-color: #1e1e2a !important;
}

/* ══ TOP HEADER / MENU BAR ═══════════════════ */
#menu_bar {
  background: #1a1a26 !important;
  border-bottom: 1px solid #2e2e44 !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px 0 48px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
  z-index: 20 !important;
}

/* AppsDo logo in header */
#menu_bar::before {
  content: '';
  position: absolute;
  left: 12px;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='300 250 550 550' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e8eaf0' d='M758.65,320.42l-0.31,0L405.78,492.71l-0.5-156.82c-0.03-8.09,6.51-14.67,14.61-14.7l338.76-1.07L758.65,320.42z'/%3E%3Cpath fill='%23e8eaf0' d='M745.11,673.57l-156.82,0.5l170.05-353.64l0.31,0l1.07,338.45C759.74,666.97,753.21,673.55,745.11,673.57z'/%3E%3Cpath fill='%23F20000' d='M758.34,320.43L479.58,600.95l-73.53-21.42l-75.2-21.85c-12.87-3.74-14.38-21.36-2.34-27.24l77.27-37.74L758.34,320.43z'/%3E%3Cpath fill='%23BC0000' d='M551.05,751.58c-5.8,12.08-23.43,10.67-27.25-2.17l-22.33-75.06l-21.89-73.39l278.76-280.53L588.29,674.07L551.05,751.58z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.menu_title {
  color: #9ca3b4 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 12px !important;
  line-height: 44px !important;
  height: 44px !important;
  transition: all 150ms !important;
}

.menu .menu_title:hover {
  background: #222232 !important;
  color: #e8eaf0 !important;
}

/* Dark mode toggle */
.menu-right { margin-left: auto !important; }
#darkmode-button { color: #616880 !important; }
#darkmode-button:hover { color: #e8eaf0 !important; }
#darkmode-button svg { fill: currentColor !important; }

/* Menu dropdown — dark panel */
.menu_list {
  background: #222232 !important;
  border: 1px solid #2e2e44 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

.menu_list .menu_item {
  color: #c4c9d4 !important;
}

.menu_list .menu_item:hover {
  background: #F20000 !important;
  color: #fff !important;
}

.menu_list .separator {
  border-top-color: #2e2e44 !important;
}

/* Open menu title background */
#menu_bar.active .menu.open .menu_title {
  background: #222232 !important;
  color: #fff !important;
}

.menu_item .shortcut {
  color: #616880 !important;
}

.menu_list .menu_item:hover .shortcut {
  color: rgba(255,255,255,0.6) !important;
}

/* ── Left Tool Panel ─────────────────────────── */
#tools_left {
  background: #1a1a26 !important;
  border-right: 1px solid #2e2e44 !important;
}

/* Tool button icons — make them VISIBLE */
.tool_button svg {
  fill: #8890a4 !important;
}

.tool_button:hover svg {
  fill: #c4c9d4 !important;
}

.tool_button.current svg {
  fill: #F20000 !important;
}

.tool_button.disabled svg {
  fill: #3a3a54 !important;
}

/* ── Right Side Panel ────────────────────────── */
#sidepanels {
  background: #1a1a26 !important;
  border-left: 1px solid #2e2e44 !important;
}

#sidepanels label, #sidepanels span,
#sidepanels h4, .sidepanel h4,
#canvas_panel label, #selected_panel label {
  color: #9ca3b4 !important;
}

#sidepanels input, #sidepanels select {
  background: #111118 !important;
  border-color: #2e2e44 !important;
  color: #e8eaf0 !important;
}

/* Panel titles like "Drawing", "Canvas" */
.panel_title, #sidepanels .panel_title {
  color: #e8eaf0 !important;
}

/* ── Bottom palette / color tools ────────────── */
#tools_bottom, #color_tools, #tools_bottom_2, #tools_bottom_3 {
  background: #1a1a26 !important;
  border-top: 1px solid #2e2e44 !important;
}

/* ── Rulers ──────────────────────────────────── */
#ruler_corner, #ruler_x, #ruler_y {
  background: #1a1a26 !important;
  border-color: #2e2e44 !important;
}

/* ── Zoom controls ───────────────────────────── */
#zoom_panel {
  background: #1a1a26 !important;
  color: #9ca3b4 !important;
}

/* ── Dropdown (general) ──────────────────────── */
.dropdown, .dropdown-menu, .dropdown ul {
  background: #222232 !important;
  border: 1px solid #2e2e44 !important;
  color: #e8eaf0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

.dropdown li, .dropdown a, .dropdown button {
  color: #c4c9d4 !important;
}

.dropdown li:hover, .dropdown a:hover {
  background: #F20000 !important;
  color: #fff !important;
}

/* ── Context menu ────────────────────────────── */
.contextMenu, #cmenu_canvas, #cmenu_layers {
  background: #222232 !important;
  border: 1px solid #2e2e44 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

.contextMenu li {
  color: #c4c9d4 !important;
}

.contextMenu li:hover {
  background: #F20000 !important;
  color: #fff !important;
}

/* ── Dialog boxes ────────────────────────────── */
#dialog_box, .dialog_container, .overlay {
  background: #222232 !important;
  border: 1px solid #2e2e44 !important;
  color: #e8eaf0 !important;
}

#dialog_box input, #dialog_box select, #dialog_box textarea {
  background: #111118 !important;
  border-color: #2e2e44 !important;
  color: #e8eaf0 !important;
}

#dialog_buttons button, .dialog_buttons button {
  background: #1a1a26 !important;
  border: 1px solid #2e2e44 !important;
  color: #e8eaf0 !important;
  border-radius: 4px !important;
  padding: 6px 16px !important;
  cursor: pointer !important;
}

#dialog_buttons button:hover, .dialog_buttons button:hover {
  background: #F20000 !important;
  border-color: #F20000 !important;
  color: #fff !important;
}

/* ── General inputs ──────────────────────────── */
.draginput input, .draginput select {
  background: #111118 !important;
  border-color: #2e2e44 !important;
  color: #e8eaf0 !important;
}

.draginput label, .draginput span {
  color: #9ca3b4 !important;
}

/* ── Layer panel ─────────────────────────────── */
#layerlist {
  background: #1a1a26 !important;
}

#layerlist td {
  color: #c4c9d4 !important;
}

#layerlist tr:hover td {
  background: #222232 !important;
}

#layerlist tr.layersel td {
  background: rgba(242, 0, 0, 0.12) !important;
  color: #fff !important;
}

/* ── Shape library ───────────────────────────── */
#shape_buttons, .shapelib_main {
  background: #1a1a26 !important;
}

/* ── jGraduate / color picker ────────────────── */
.jGraduate_Picker, .jPicker {
  background: #222232 !important;
  border-color: #2e2e44 !important;
  color: #e8eaf0 !important;
}

/* ── Right Panel (#panels) ───────────────────── */
#panels, #panels.tools_panel {
  background: #1a1a26 !important;
  border-left: 1px solid #2e2e44 !important;
  padding: 8px !important;
}

.context_panel h4 {
  color: #616880 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  margin: 12px 0 8px 4px !important;
}

/* Draginput cards — styled like dark editor form fields */
.draginput {
  background-color: #222232 !important;
  border: 1px solid #2e2e44 !important;
  border-radius: 6px !important;
}

.draginput:hover {
  background-color: #2a2a3e !important;
  border-color: #3a3a54 !important;
}

.draginput.active {
  background-color: #111118 !important;
  border-color: #F20000 !important;
}

.draginput span, .draginput .icon_label {
  color: #616880 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.draginput:hover span { color: #9ca3b4 !important; }

.draginput input {
  color: #e8eaf0 !important;
  background: transparent !important;
  border: none !important;
  font-weight: 700 !important;
}

.draginput:hover input, .draginput.active input {
  color: #F20000 !important;
}

.draginput label { color: #e8eaf0 !important; }

.draginput.textcontent input {
  color: #e8eaf0 !important;
  font-weight: 600 !important;
}

.draginput select, #panels select, #resolution {
  background: #111118 !important;
  border: 1px solid #2e2e44 !important;
  color: #e8eaf0 !important;
  border-radius: 4px !important;
}

.color_block, #canvas_bg, #canvas_color {
  border-radius: 4px !important;
  border: 1px solid #2e2e44 !important;
}

.draginput .caret { border-top-color: #616880 !important; }

.draginput.twocol { width: calc(100% - 8px) !important; }

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: #2e2e44 !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb:hover { background: #3a3a54 !important; }

/* ── Push buttons (fill, stroke indicators) ─── */
.push_button svg {
  fill: #8890a4 !important;
}

.push_button:hover svg {
  fill: #c4c9d4 !important;
}

.push_button_pressed svg {
  fill: #F20000 !important;
}

/* ── Sponsors bar ────────────────────────────── */
.sponsors, #sponsors {
  display: none !important;
}

/* ══ BOTTOM BAR / FOOTER ═════════════════════ */
#tools_bottom, #tools_bottom.tools_panel {
  background: #1a1a26 !important;
  border-top: 1px solid #2e2e44 !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  gap: 8px !important;
}

/* Zoom panel */
#zoom_panel {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#zoom_panel .select-input,
#zoom_label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Zoom icon */
#zoom_panel svg, .zoom_tool svg {
  fill: #616880 !important;
  width: 18px !important;
  height: 18px !important;
}

/* Zoom input */
#zoom {
  background: #222232 !important;
  border: 1px solid #2e2e44 !important;
  color: #e8eaf0 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, monospace !important;
  width: 60px !important;
  text-align: center !important;
}

/* Zoom select dropdown */
#zoom_select {
  background: #222232 !important;
  border: 1px solid #2e2e44 !important;
  color: #e8eaf0 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
}

/* Color palette at bottom */
#palette {
  background: transparent !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.palette_item {
  border-radius: 0 !important;
  transition: transform 100ms !important;
}

.palette_item:hover {
  transform: scale(1.3) !important;
  z-index: 5 !important;
  position: relative !important;
  box-shadow: 0 0 0 2px #1a1a26, 0 0 0 3px #F20000 !important;
}

/* Fill/Stroke color indicators at bottom-left */
#color_tools {
  background: transparent !important;
  border: none !important;
}

.color_tool .color_block {
  border-radius: 4px !important;
  border: 2px solid #2e2e44 !important;
  overflow: hidden !important;
}

.color_tool.active .color_block {
  border-color: #F20000 !important;
}

#tool_switch svg {
  fill: #616880 !important;
}

#tool_switch:hover svg {
  fill: #e8eaf0 !important;
}

/* ══ RULERS (enhanced) ═══════════════════════ */
#ruler_corner {
  background: #1a1a26 !important;
  border-right: 1px solid #2e2e44 !important;
  border-bottom: 1px solid #2e2e44 !important;
}

#ruler_x {
  background: #1a1a26 !important;
  border-bottom: 1px solid #2e2e44 !important;
  height: 15px !important;
}

#ruler_y {
  background: #1a1a26 !important;
  border-right: 1px solid #2e2e44 !important;
  width: 15px !important;
}

#ruler_x canvas, #ruler_y canvas {
  opacity: 0.5 !important;
}

/* ── Better panel section headers ───────────── */
.context_panel .panel_section_label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8890a4;
  padding: 8px 0 4px;
  border-top: 1px solid #2e2e44;
  margin-top: 8px;
}

/* ── Canvas quick-size preset buttons ────────── */
.canvas-preset-btn {
  background: #222232 !important;
  border: 1px solid #2e2e44 !important;
  color: #9ca3b4 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  cursor: pointer !important;
  transition: all 150ms !important;
  font-family: inherit !important;
}
.canvas-preset-btn:hover {
  background: #2a2a3e !important;
  border-color: #F20000 !important;
  color: #e8eaf0 !important;
}

/* ── Multi-selected panel highlight ──────────── */
.inverted #multiselected_panel {
  background: rgba(242, 0, 0, 0.06) !important;
  border: 1px solid rgba(242, 0, 0, 0.2) !important;
  border-radius: 6px !important;
  padding: 8px !important;
}