Milk-Chocolate.css

/* ================================================================
 * Milk-chocolate theme for CaDoodle
 * Custom icons and advanced-mode logo are loaded from:
 *   Milk-chocolate/
 * Expected files include:
 *   home.png, litBulb.png, darkBulb.png, magnet.png, trash.png,
 *   zoomIn.png, zoomOut.png, copy.png, paste.png, extrude.png,
 *   biglogoAdvanced.png
 * ================================================================ */

/* ===== MILK-CHOCOLATE CUSTOM ASSETS =====
 * Theme-specific replacement icons and the Advanced logo are loaded
 * from the "Milk-chocolate" folder next to this CSS file.
 * ================================================================ */

/* ===== BUTTON GRAPHICS via ImageView CSS ===== */
/* Images are set on the ImageView child; most keep their FXML sizing. */
/* Dynamic images (drawrImage, showHideImage, showAllImage, timelineImage,            */
/* RobotLabDrawerImage, componentTreeDrawerArrow, lockImage) stay image-only in FXML. */
.cadoodleicon  { -fx-image: url("light/CADoodle-Icon.png"); }
#source .image-view  { -fx-image: url("light/CADoodle-Icon.png"); }
.orthographic-image .image-view               { -fx-image: url("light/orthographic.png"); }
.perspective-image .image-view               { -fx-image: url("light/perspective.png "); }
.step-image-view                 { -fx-image: url("light/step.png"); }

#makeRobotButton .image-view     { -fx-image: url("light/newRobot.png"); }
#homeButton .image-view          { -fx-image: url("light/CADoodleHome.png"); }
.biglogo-cadoodle        		 { -fx-image: url("light/biglogo.png"); }
.biglogo-advanced {
    -fx-image: url("Milk-chocolate/biglogoAdvanced.png");
    -fx-fit-width: 145px;
    -fx-fit-height: 36px;
    -fx-preserve-ratio: true;
}
#homeViewButton .image-view      { -fx-image: url("Milk-chocolate/home.png"); }
#fitViewButton .image-view       { -fx-image: url("light/fit.png"); }
#zoomInButton .image-view        { -fx-image: url("Milk-chocolate/zoomIn.png"); }
#zoomOutButton .image-view       { -fx-image: url("Milk-chocolate/zoomOut.png"); }
#holeButton .image-view          { -fx-image: url("light/holes.png"); }
#workplaneButton .image-view     { -fx-image: url("light/Sketcher.png"); }
#rulerButton .image-view         { -fx-image: url("light/ruler.png"); }
#notesButton .image-view         { -fx-image: url("light/notes.png"); }
#searchButton .image-view        { -fx-image: url("light/search.png"); }
.hexDistributeButtonImage { -fx-image: url("light/distribute.png"); }
.boltHoleButtonImage-view     { -fx-image: url("light/boltHolePattern.png"); }
.extrudeButton-image-view       { -fx-image: url("Milk-chocolate/extrude.png"); }
.filletButton-image-view        { -fx-image: url("light/fillet.png"); }
#visbilityButton .image-view     { -fx-image: url("light/showMenu.png"); }
.groupButton-image-view         { -fx-image: url("Milk-chocolate/group.png"); }
.ungroupButton-image-view       { -fx-image: url("light/ungroup.png"); }
.alignButton-mage-view         { -fx-image: url("light/align.png"); }
.mirronButton-image-view        { -fx-image: url("light/mirror.png"); }
#cruiseButton .image-view        { -fx-image: url("Milk-chocolate/magnet.png"); }
#objectWorkplane .image-view     { -fx-image: url("light/workplaneToObject.png"); }
#dropToWorkplane .image-view     { -fx-image: url("light/drop.png"); }
#copyButton .image-view          { -fx-image: url("Milk-chocolate/copy.png"); }
.pasteButton-mage-view         { -fx-image: url("Milk-chocolate/paste.png"); }
.deleteButton-image-view        { -fx-image: url("Milk-chocolate/trash.png"); }
#undoButton .image-view          { -fx-image: url("light/back.png"); }
#redoButton .image-view          { -fx-image: url("light/forward.png"); }
#stl .image-view                 { -fx-image: url("light/Script-Tab-Stl.png"); }
#manifoldSTL .image-view         { -fx-image: url("light/Script-Tab-Stl.png"); }

.svg-image-view                 { -fx-image: url("light/Script-Tab-SVG.png"); }
.blender-image-view             { -fx-image: url("light/Script-Tab-Blender.png"); }
.freecad-image-view             { -fx-image: url("light/Script-Tab-FreeCAD.png"); }
.build123d-image-view             { -fx-image: url("light/build123d.png"); }
.openscad-image-view             { -fx-image: url("light/Script-Tab-OpenSCAD.png"); }
.eclipse-image-view             { -fx-image: url("light/eclipse.png"); }

#obj .image-view                 { -fx-image: url("light/ObjImg.png"); }
#type3mf .image-view             { -fx-image: url("light/3mf.png"); }
#exportButton .image-view        { -fx-image: url("light/export-button.png"); }
#newDoodle .image-view           { -fx-image: url("light/newFile.png"); }
#copyDoodle .image-view          { -fx-image: url("Milk-chocolate/copy.png"); }
#robotHeaderImage   { -fx-image: url("light/robot-3.png"); }
.robot-tab-icon     { -fx-image: url("light/robot-3.png"); }
.dark-bulb-icon      { -fx-image: url("Milk-chocolate/darkBulb.png"); }
.lit-bulb-icon      { -fx-image: url("Milk-chocolate/litBulb.png"); }
.lock-icon         { -fx-image: url("light/lock.png"); }
.unlock-icon         { -fx-image: url("light/unlock.png"); }
.open-drawer              { -fx-image: url("light/drawerClose.png"); }
.close-drawer			  { -fx-image: url("light/drawerOpen.png"); }
#RobotLabDrawerImage      { -fx-image: url("light/robot-3.png"); }
.tree-icon                { -fx-image: url("light/tree.png"); }
.load-limb-arms-icon      { -fx-image: url("light/Load-Limb-Arms.png"); }
.advanced-config-icon     { -fx-image: url("light/Advanced-Configuration.png"); }
.notes-icon               { -fx-image: url("light/notes.png"); }
.extraGroupImage { -fx-image: url("light/hull.png"); }
.hullImage  { -fx-image: url("light/hull.png"); }
.intersectImage { -fx-image: url("light/intersect.png"); }
.xorImage  { -fx-image: url("light/xor.png"); }
.addObject  { -fx-image: url("light/addObject.png"); }
.moveObject  { -fx-image: url("light/moveObject.png"); }
.resizeObject  { -fx-image: url("light/resizeObject.png"); }
.bendSurface  { -fx-image: url("light/bend.png"); }

/* ── Regular buttons ────────────────────────────────── */
.button                                  { -fx-background-color: #ddd0bc; -fx-border-color: #263d8c; -fx-border-width: 1px; -fx-border-radius: 4px; -fx-background-radius: 4px; -fx-text-fill: #263d8c; }
.button:hover                            { -fx-background-color: #f6d85f; }
.button:pressed                          { -fx-background-color: #263d8c; -fx-text-fill: #f4ede0; }
.button:focused                          { -fx-border-color: #f38ba8; -fx-border-width: 2px; }
.button:disabled                         { -fx-opacity: 0.4; }

/* ── Color Picker ───────────────────────────────────── */
.color-picker {
    -fx-background-color: #f2c83d; /* logo-yellow */
    -fx-border-color: #263d8c;     /* logo-blue */
    -fx-border-width: 1px;
    -fx-border-radius: 4px;
    -fx-background-radius: 4px;
}

.color-picker:hover {
    -fx-background-color: #e7a436; /* logo-orange */
}

.color-picker .label {
    -fx-text-fill: #263d8c;
}

.color-picker .arrow-button {
    -fx-background-color: #f2c83d;
    -fx-border-color: #263d8c;
    -fx-border-width: 0 0 0 1px;
}

.color-picker .arrow {
    -fx-background-color: #263d8c;
}

/* popup palette */
.color-palette {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-border-color: #263d8c;
}

.color-palette .hyperlink {
    -fx-text-fill: #263d8c;
}

/* ── Progress Indicator ─────────────────────────────── */
.progress-indicator {
    -fx-progress-color: #263d8c; /* logo-blue */
}

.progress-indicator .percentage {
    -fx-fill: #263d8c;
}

.progress-indicator .spinner {
    -fx-background-color: transparent;
}
.image-button {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-border-width: 1px;
    -fx-background-insets: 3;
}

/* Shape palette tiles: subtle warm separators and cream-based interaction states */
.image-button-shape-pallet {
    -fx-background-color: transparent;
    -fx-border-color: #b89d78;          /* slightly darker warm separator between shape tiles */
    -fx-border-width: 1px;
    -fx-border-radius: 3px;
    -fx-background-radius: 3px;
    -fx-background-insets: 1;
}
.image-button-shape-pallet:focused {
    -fx-background-color: #ddd0bc;      /* selected/focused: darker cream */
    -fx-border-color: #aa8e68;
}
.image-button-shape-pallet:pressed {
    -fx-background-color: #c5ae8c;      /* pressed: one step darker */
    -fx-border-color: #9d805d;
}
.image-button-shape-pallet:hover {
    -fx-background-color: #e6dac8;      /* hover: gentle cream, never near-black */
    -fx-border-color: #aa8a64;
}

#drawerButton, #timelineButton {
    -fx-border-width: 0px;      /* No red outline for drawer icons*/
    -fx-background-insets: 0 6; /* reduce outline of timeline/shapes drawer icon */
}

#RobotLabDrawer {
    -fx-border-width: 0px; /* No red outline for robot drawer icon */
}

.normal-button {
    -fx-background-color: #ddd0bc; /* milk-chocolate neutral */
    -fx-background-insets: 0;
    -fx-border-width: 1px;
    -fx-border-color: #263d8c; /* logo-blue */
}
.normal-button:focused {
	-fx-border-width: 1px;
    -fx-border-color: #bb1f09; /* logo-red */
}
.normal-button:pressed {
    -fx-background-color: #e7a436; /* logo-orange */
}
.image-button:focused {
    -fx-border-color: #bb1f09; /* logo-red */
}
.image-button:pressed {
    -fx-background-color: #e9bd3f; /* darker warm cream pressed */
}
.image-button:hover {
    -fx-background-color: #f6d85f; /* fresh yellow hover */
}
.image-button-focus {
    -fx-border-color: #bb1f09; /* logo-red */
}



.image-button-focus:hover {
    -fx-background-color: #f6d85f; /* fresh yellow hover */
}
.image-button-highlight {
    -fx-background-color: #ddd0bc; /* selected: same darker cream as selected shape tile */
    -fx-border-color: #aa8e68;
    -fx-background-insets: 0;
}
.image-button-highlight:hover {
    -fx-background-color: #e9bd3f; /* slightly deeper cream on hover */
    -fx-border-color: #9d805d;
}

.menu-button2 {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-border-width: 1px;
    -fx-background-insets: 0;
}

.menu-button2:focused {
    -fx-border-color: #bb1f09; /* logo-red */
}
.menu-button2:pressed {
    -fx-background-color: #e9bd3f; /* darker warm cream pressed */
}
.menu-button2:hover {
    -fx-background-color: #f6d85f; /* fresh yellow hover */
}
.menu-button2-focus {
    -fx-border-color: #bb1f09;
}
.menu-button2-focus:hover {
    -fx-background-color: #f6d85f;
}
.menu-button2-highlight {
    -fx-background-color: #ddd0bc; /* selected: same darker cream as selected shape tile */
    -fx-border-color: #aa8e68;
    -fx-background-insets: 0;
}
.menu-button2-highlight:hover {
    -fx-background-color: #e9bd3f;
    -fx-border-color: #9d805d;
}

.anchor-pane {
    -fx-background-color: #f4ede0; /* logo-beige */
}
.text-area {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-border-width: 1px;
}
/* TextField styling */
.text-field {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-border-width: 1px;
}

/* TextArea styling */
.text-area {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-border-width: 1px;
}

/* TextArea content region */
.text-area .content {
    -fx-background-color: #f4ede0; /* logo-beige */
}

/* TextArea viewport */
.text-area .viewport {
    -fx-background-color: #f4ede0; /* logo-beige */
}

/* TextArea scroll pane overrides */
.text-area .scroll-pane {
    -fx-background-color: #f4ede0; /* logo-beige */
}

.text-area .scroll-pane .viewport {
    -fx-background-color: #f4ede0; /* logo-beige */
}

/* TextArea scroll bar track (this might be the yellow culprit) */
.text-area .scroll-bar:horizontal .track,
.text-area .scroll-bar:vertical .track {
    -fx-background-color: #f4ede0; /* logo-beige instead of yellow */
}
.text-area .content {
    -fx-background-color: #f4ede0; /* logo-beige */
}
.text-field {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-wrap-text: true;
    -fx-pref-row-count: 5; /* Adjust as needed */
    -fx-pref-column-count: 20; /* Adjust as needed */
    -fx-border-color: #263d8c; /* logo-blue */
}
.vbox {
    -fx-spacing: 10; /* Sets 10px vertical space between children */
    -fx-padding: 10; /* Optional: adds padding inside the VBox */
}

.grid-pane {
    -fx-grid-line-color: #bb1f09; /* logo-red */
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-background-radius: 5.0;
    -fx-padding: 10;
    -fx-hgap: 10;
    -fx-vgap: 10;
}

.scroll-pane {
    -fx-background-color: #f4ede0; /* logo-beige */
}

.scroll-pane > .viewport {
    -fx-background-color: #f4ede0; /* logo-beige */
}

.scroll-pane .scroll-bar:horizontal,
.scroll-pane .scroll-bar:vertical {
    -fx-background-color: #263d8c; /* logo-blue */
}

.scroll-pane .scroll-bar:horizontal .thumb,
.scroll-pane .scroll-bar:vertical .thumb {
    -fx-background-color: #263d8c; /* logo-blue */
}

.scroll-pane .increment-button,
.scroll-pane .decrement-button {
    -fx-background-color: #f2c83d; /* logo-yellow */
}

.scroll-pane .increment-arrow,
.scroll-pane .decrement-arrow {
    -fx-background-color: #606060; /* gray */
}

.scroll-pane .scroll-bar:horizontal .track,
.scroll-pane .scroll-bar:vertical .track {
    -fx-background-color:#f2c83d; /* logo-yellow */
}

.scroll-pane > .corner {
    -fx-background-color: #e0e0e0; /* light-gray */
}
.separator {
    -fx-background-color: #263d8c; /* logo-blue */
}

.timeline-place {
    -fx-pref-width: 6px;   /* vertical separator width */
}

.timeline-place .line {
    -fx-background-color: #bb1f09;
    -fx-border-width: 6px;
}
.timeline-none {
    -fx-pref-width: 2px;   /* vertical separator width */
}

.timeline-none .line {
    -fx-background-color: transparent; /* logo-beige */
    -fx-border-width: 2px;
}
.timeline-block {
    -fx-pref-width: 8px;   /* vertical separator width */
}

.timeline-block .line {
    -fx-background-color: #e7a436; /* logo-yellow */
    -fx-border-width: 8px;
}

#controlBar{
    -fx-border-width: 1px;
    -fx-border-color: #263d8c; /* logo-blue */
}

#drawerArea{
    -fx-border-width: 1px;
    -fx-border-color: #263d8c; /* logo-blue */
}

#shapeConfigurationBox{
    -fx-border-width: 1px;
    -fx-border-color: #263d8c; /* logo-blue */
}

#fileNameBox{
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-border-width: 1px;
    -fx-border-color: #263d8c; /* logo-blue */
}

#view3d {
    -fx-background-color: #fffdf8; /* base cream scene background */
}

#control3d {
    -fx-background-color: transparent;
}

#drawerArea {
    -fx-background-color: #f4ede0; /* logo-beige */
}

#drawerGrid{
    -fx-background-color: #f4ede0; /* logo-beige */
}

#projectGrid{
    -fx-background-color: #f4ede0; /* logo-beige */
}

#totalApplicationBackground{
    -fx-background-color: #f4ede0; /* logo-beige */
}

#topBar{
    -fx-background-color:  #f4ede0; /* logo-beige */
}

#controlBar{
    -fx-background-color: #f4ede0; /* logo-beige */
}

#objectPallet{
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-border-color: #bda27e;     /* warm separator around the right palette */
    -fx-border-width: 1px;
}

#shapeConfiguration{
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-border-color: #c5ae8c;
    -fx-border-width: 1px 0 0 0;
}

/* Section headers such as "Basic": keep the yellow identity, add a clear divider */
.titled-pane > .title {
    -fx-background-color: #f2c83d; /* logo-yellow */
    -fx-border-color: #b49770;
    -fx-border-width: 0 0 1px 0;
}

/* Content under section headers gets a subtle frame, so groups do not blend together */
.titled-pane > .content {
    -fx-background-color: #f4ede0;
    -fx-border-color: #c5ae8c;
    -fx-border-width: 0 1px 1px 1px;
}

#configurationGrid{
    -fx-background-color: #f4ede0; /* logo-beige */
}

#anchorPanForConfiguration{
    -fx-background-color: #f4ede0; /* logo-beige */
}

#fileNameBox{
       -fx-background-color: #f4ede0; /* logo-beige */
}



.component-tree-panel {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-border-width: 1px;
}

.component-tree-resize-handle {
    -fx-background-color: transparent;
}

.component-tree-resize-handle:hover {
    -fx-background-color: rgba(38, 61, 140, 0.18); /* logo-blue */
}

.component-tree-header {
    -fx-background-color: #f2c83d; /* logo-yellow */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-border-width: 0 0 1px 0;
    -fx-font-weight: bold;
    -fx-padding: 6px 8px;
    -fx-text-fill: #263d8c; /* logo-blue */
}

.component-tree-view {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-border-width: 0;
}

.component-tree-view .tree-cell {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-text-fill: #263d8c; /* logo-blue */
}

.component-tree-view .tree-cell:hover {
    -fx-background-color: #f2c83d; /* logo-yellow */
}

.component-tree-view .tree-cell:selected,
.component-tree-view .tree-cell.component-tree-cell-selected {
    -fx-background-color: #e7a436; /* logo-orange */
    -fx-text-fill: #263d8c; /* logo-blue */
}

.component-tree-view .tree-cell.component-tree-cell-root,
.component-tree-view .tree-cell.component-tree-cell-group {
    -fx-font-weight: bold;
}

.component-tree-view .tree-cell.component-tree-cell-hidden {
    -fx-text-fill: #606060; /* gray */
    -fx-font-style: italic;
}

.component-tree-visibility-button {
    -fx-background-color: transparent;
    -fx-background-radius: 3px;
    -fx-border-color: transparent;
    -fx-padding: 3px;
}

.component-tree-visibility-button:hover {
    -fx-background-color: rgba(38, 61, 140, 0.14); /* logo-blue */
}

#snapGrid{
       -fx-background-color: #f2c83d; /* logo-yellow */
}

/* ===== TAB PANE STYLING ===== */

/* Main tab pane container */
.tab-pane {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-border-width: 1px;
}

/* Tab header area (where tab titles are displayed) */
.tab-pane .tab-header-area {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-padding: 5px;
}

/* Tab header background (the actual background behind tabs) */
.tab-pane .tab-header-area .tab-header-background {
    -fx-background-color: #f4ede0; /* logo-beige */
}

/* Control buttons area in tab header */
.tab-pane .tab-header-area .control-buttons-tab {
    -fx-background-color: #f4ede0; /* logo-beige */
}

/* Individual tab headers */
.tab-pane .tab {
    -fx-background-color: #ddd0bc; /* milk-chocolate neutral */
    -fx-background-radius: 5px 5px 0px 0px;
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-border-width: 1px 1px 0px 1px;
    -fx-padding: 8px 16px;
    -fx-text-fill: #263d8c; /* logo-blue */
}

/* Hover effect for tabs */
.tab-pane .tab:hover {
    -fx-background-color: #f6d85f; /* fresh yellow highlight */
    -fx-cursor: hand;
}

/* Selected tab styling */
.tab-pane .tab:selected {
    -fx-background-color: #f6d85f; /* fresh yellow highlight */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-border-width: 1px 1px 0px 1px;
    -fx-text-fill: #263d8c; /* logo-blue */
}

/* Tab content area */
.tab-pane .tab-content-area {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-border-width: 1px;
    -fx-padding: 10px;
}

/* Tab label (text) */
.tab-pane .tab .tab-label {
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}

/* Tab close button */
.tab-pane .tab .tab-close-button {
    -fx-background-color: transparent;
    -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
    -fx-pref-width: 8px;
    -fx-pref-height: 8px;
    -fx-background-radius: 0;
}

.tab-pane .tab .tab-close-button:hover {
    -fx-background-color: #bb1f09; /* logo-red */
}

/* Style anchor panes specifically when inside tab content */
.tab-pane .tab-content-area .anchor-pane {
    -fx-background-color: transparent;
    -fx-border-width: 0px;
    -fx-padding: 0px;
}

/* Primary theme using brand colors */
.tab-pane.primary-theme {
    -fx-background-color: #f4ede0; /* logo-beige */
}

.tab-pane.primary-theme .tab-header-area {
    -fx-background-color: #f4ede0; /* logo-beige */
}

.tab-pane.primary-theme .tab {
    -fx-background-color: #e7a436; /* logo-orange */
    -fx-background-radius: 8px 8px 0px 0px;
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-text-fill: #263d8c; /* logo-blue */
    -fx-border-width: 1px;
}

.tab-pane.primary-theme .tab:hover {
    -fx-background-color: #f2c83d; /* logo-yellow */
}

.tab-pane.primary-theme .tab:selected {
    -fx-background-color: #3498db; /* my-primary-color */
    -fx-text-fill: #f4ede0; /* logo-beige */
    -fx-border-color: #263d8c; /* logo-blue */
}

.tab-pane.primary-theme .tab-content-area {
    -fx-background-color: #f4ede0; /* logo-beige */
}

/* Secondary theme */
.tab-pane.secondary-theme {
    -fx-background-color: #f4ede0; /* logo-beige */
}

.tab-pane.secondary-theme .tab-header-area {
    -fx-background-color: #f4ede0; /* logo-beige */
}

.tab-pane.secondary-theme .tab {
    -fx-background-color: #2ecc71; /* my-secondary-color */
    -fx-text-fill: #f4ede0; /* logo-beige */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-border-width: 1px;
}

.tab-pane.secondary-theme .tab:hover {
    -fx-background-color: #f2c83d; /* logo-yellow */
    -fx-text-fill: #263d8c; /* logo-blue */
}

.tab-pane.secondary-theme .tab:selected {
    -fx-background-color: #263d8c; /* logo-blue */
    -fx-text-fill: #f4ede0; /* logo-beige */
}

.tab-pane.secondary-theme .tab-content-area {
    -fx-background-color: #f4ede0; /* logo-beige */
}

/* Warning/alert theme */
.tab-pane.warning-theme {
    -fx-background-color: #f4ede0; /* logo-beige */
}

.tab-pane.warning-theme .tab-header-area {
    -fx-background-color: #f4ede0; /* logo-beige */
}

.tab-pane.warning-theme .tab {
    -fx-background-color: #e7a436; /* logo-orange */
    -fx-text-fill: #263d8c; /* logo-blue */
    -fx-border-color: #bb1f09; /* logo-red */
    -fx-border-width: 1px;
}

.tab-pane.warning-theme .tab:selected {
    -fx-background-color: #bb1f09; /* logo-red */
    -fx-text-fill: #f4ede0; /* logo-beige */
}

.tab-pane.warning-theme .tab-content-area {
    -fx-background-color: #f4ede0; /* logo-beige */
}

/* Small tabs */
.tab-pane.small-tabs .tab {
    -fx-padding: 4px 8px;
    -fx-font-size: 12px;
}

/* Large tabs */
.tab-pane.large-tabs .tab {
    -fx-padding: 12px 24px;
    -fx-font-size: 16px;
}

/* Interactive anchor pane that looks like a button */
.anchor-pane.button-style {
    -fx-background-color: #f2c83d; /* logo-yellow */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-text-fill: #263d8c; /* logo-blue */
    -fx-cursor: hand;
    -fx-border-width: 1px;
}

.anchor-pane.button-style:hover {
    -fx-background-color: #e7a436; /* logo-orange */
}

.anchor-pane.button-style:pressed {
    -fx-background-color: #3498db; /* my-primary-color */
    -fx-text-fill: #f4ede0; /* logo-beige */
}

/* Light anchor pane variant */
.anchor-pane.light {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-effect: dropshadow(three-pass-box, rgba(38,61,140,0.2), 5, 0, 0, 2); /* logo-blue with opacity */
    -fx-border-width: 1px;
}

/* Primary colored anchor pane */
.anchor-pane.primary {
    -fx-background-color: #3498db; /* my-primary-color */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-text-fill: #f4ede0; /* logo-beige */
    -fx-border-width: 1px;
}

/* Secondary colored anchor pane */
.anchor-pane.secondary {
    -fx-background-color: #2ecc71; /* my-secondary-color */
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-text-fill: #f4ede0; /* logo-beige */
    -fx-border-width: 1px;
}

/* Card style anchor pane */
.anchor-pane.card-style {
    -fx-background-color: #f4ede0; /* logo-beige */
    -fx-background-radius: 8px;
    -fx-effect: dropshadow(three-pass-box, rgba(38,61,140,0.15), 10, 0, 0, 3); /* logo-blue with opacity */
    -fx-border-width: 1px;
    -fx-border-color: #263d8c; /* logo-blue */
    -fx-padding: 20px;
}

/* Warning/alert style anchor pane */
.anchor-pane.warning {
    -fx-background-color: #e7a436; /* logo-orange */
    -fx-border-color: #bb1f09; /* logo-red */
    -fx-text-fill: #263d8c; /* logo-blue */
    -fx-border-width: 1px;
}

/* ===== ADDITIONAL CONTROL STYLING ===== */

/* Root application background - beige */
.root {
    -fx-background-color: #f4ede0; /* logo-beige */
}

/* All text should be blue */
.label {
    -fx-text-fill: #263d8c; /* logo-blue */
}

/* Progress bar styling - yellow background, blue progress */
.progress-bar {
    -fx-background-color: #f2c83d; /* logo-yellow background */
    -fx-border-color: #263d8c; /* logo-blue border */
    -fx-border-width: 1px;
    -fx-background-radius: 4px;
    -fx-border-radius: 4px;
}

.progress-bar > .bar {
    -fx-background-color: #263d8c; /* logo-blue progress fill */
    -fx-background-radius: 2px;
    -fx-padding: 0.25em;
}

.combo-box {
    -fx-background-color: #f2c83d; /* logo-yellow */
    -fx-border-color: #263d8c;     /* logo-blue */
    -fx-border-radius: 4px;
    -fx-border-width: 1px;
}

.combo-box .list-cell {
    -fx-background-color: #f4ede0; /* logo-yellow */
    -fx-text-fill: #263d8c;        /* logo-blue */
}

.combo-box-popup .list-view {
    -fx-background-color: #f4ede0;
    -fx-border-color: #263d8c;
    -fx-border-width: 1px;
}

.combo-box-popup .list-cell {
    -fx-background-color: #f4ede0;
    -fx-text-fill: #263d8c;
}

.combo-box-popup .list-cell:hover {
    -fx-background-color: #f6d85f; /* fresh yellow highlight */
}

.combo-box-popup .list-cell:selected {
    -fx-background-color: #f6d85f; /* fresh yellow highlight */
}

/* ── Scroll bars (global) ───────────────────────────── */
.scroll-bar                              { -fx-background-color: #f4ede0; }
.scroll-bar .thumb                       { -fx-background-color: #263d8c; -fx-background-radius: 4px; }
.scroll-bar .thumb:hover                 { -fx-background-color: #e7a436; }
.scroll-bar .thumb:pressed               { -fx-background-color: #e7a436; }
.scroll-bar .track                       { -fx-background-color: #f4ede0; }
.scroll-bar .track-background            { -fx-background-color: #f4ede0; }
.scroll-bar .increment-button,
.scroll-bar .decrement-button            { -fx-background-color: #f2c83d; -fx-padding: 4px; }
.scroll-bar .increment-button:hover,
.scroll-bar .decrement-button:hover      { -fx-background-color: #e7a436; }
.scroll-bar .increment-arrow,
.scroll-bar .decrement-arrow             { -fx-background-color: #263d8c; }

/* ── Context menus ──────────────────────────────────── */
.context-menu {
    -fx-background-color: #f4ede0;
    -fx-border-color: #263d8c;
    -fx-border-width: 1px;
    -fx-padding: 4px 0;
}
.context-menu .menu-item                 { -fx-background-color: transparent; }
.context-menu .menu-item .label          { -fx-text-fill: #263d8c; }
.context-menu .menu-item:hover,
.context-menu .menu-item:focused         { -fx-background-color: #f6d85f; }
.context-menu .menu-item:hover .label,
.context-menu .menu-item:focused .label  { -fx-text-fill: #263d8c; }
.context-menu .menu-item:disabled .label { -fx-text-fill: #aaaaaa; }
.context-menu .separator .line           { -fx-border-color: #263d8c; -fx-border-width: 1px 0 0 0; }
.context-menu .menu-item > .right-container > .arrow { -fx-background-color: #263d8c; }

/* ── Text nodes ─────────────────────────────────────── */
#memoryUsageText { -fx-fill: #263d8c; }

/* ── Spinner ────────────────────────────────────────── */
.spinner                                 { -fx-background-color: #f2c83d; -fx-border-color: #263d8c; -fx-border-width: 1px; -fx-border-radius: 4px; }
.spinner .text-field                     { -fx-background-color: #f4ede0; -fx-text-fill: #263d8c; -fx-border-width: 0; }
.spinner .increment-arrow-button,
.spinner .decrement-arrow-button         { -fx-background-color: #ddd0bc; -fx-border-color: #263d8c; -fx-border-width: 0 0 0 1px; }
.spinner .increment-arrow-button:hover,
.spinner .decrement-arrow-button:hover   { -fx-background-color: #f6d85f; }
.spinner .increment-arrow-button:pressed,
.spinner .decrement-arrow-button:pressed { -fx-background-color: #e7a436; }
.spinner .increment-arrow,
.spinner .decrement-arrow                { -fx-background-color: #263d8c; }

/* ── Editable combo box (setUpNumberChoices) ────────── */
.combo-box:editable .text-field          { -fx-background-color: #f4ede0; -fx-text-fill: #263d8c; -fx-border-width: 0; }
.combo-box .arrow-button                 { -fx-background-color: #ddd0bc; -fx-border-color: #263d8c; -fx-border-width: 0 0 0 1px; }
.combo-box .arrow-button:hover           { -fx-background-color: #f6d85f; }
.combo-box .arrow-button .arrow          { -fx-background-color: #263d8c; }

/* ── Radio buttons ──────────────────────────────────── */
.radio-button                            { -fx-text-fill: #263d8c; }
.radio-button .radio                     { -fx-background-color: #f4ede0; -fx-border-color: #263d8c; -fx-border-width: 2px; -fx-border-radius: 50%; -fx-background-radius: 50%; }
.radio-button:hover .radio               { -fx-border-color: #e7a436; }
.radio-button:selected .radio            { -fx-border-color: #263d8c; }
.radio-button:selected .dot              { -fx-background-color: #263d8c; -fx-background-radius: 50%; }

/* ── Check boxes ────────────────────────────────────── */
.check-box                               { -fx-text-fill: #263d8c; }
.check-box .box                          { -fx-background-color: #f4ede0; -fx-border-color: #263d8c; -fx-border-width: 2px; -fx-border-radius: 3px; -fx-background-radius: 3px; }
.check-box:hover .box                    { -fx-border-color: #e7a436; }
.check-box:selected .box                 { -fx-background-color: #263d8c; -fx-border-color: #263d8c; }
.check-box:selected .mark                { -fx-background-color: #f4ede0; }
.check-box:indeterminate .box            { -fx-background-color: #f2c83d; -fx-border-color: #263d8c; }

/* ── MenuButton arrow/caret ─────────────────────────── */
.menu-button .arrow-button {
    -fx-background-color: transparent;
}

.menu-button .arrow {
    -fx-background-color: #263d8c; /* logo-blue */
}

.menu-button:hover .arrow {
    -fx-background-color: #263d8c;
}

.menu-button:pressed .arrow {
    -fx-background-color: #f4ede0; /* logo-beige */
}


/* ===== Long-hover / enlarged preview =====
   If the enlarged shape preview is implemented as a JavaFX Tooltip,
   this makes it opaque and visually related to the cream UI. */
.tooltip {
    -fx-background-color: #ddd0bc;
    -fx-text-fill: #263d8c;
    -fx-border-color: #aa8e68;
    -fx-border-width: 1px;
    -fx-border-radius: 4px;
    -fx-background-radius: 4px;
    -fx-opacity: 1.0;
    -fx-padding: 6px 8px;
}

.grid-key-color {
    -fx-text-fill: #98705bc4; /* main grid: darker milk chocolate, ~77% alpha */
}
.grid-dark-color {
    -fx-text-fill: #b6907bb0; /* millimeter grid: slightly darker, still lighter than main, ~69% alpha */
}
.grid-light-color {
    -fx-text-fill: #d9c8ba42; /* grid plane/background: very light, slightly darker than v4, ~26% alpha */
}

/* ===== Navigation cube ===== */
.nav-cube-surface-color {
    -fx-text-fill: #cfe8f7; /* slightly darker light blue */
}

.nav-cube-edge-color {
    -fx-text-fill: #82b9e6; /* a bit stronger/darker blue */
}

.nav-cube-corner-color {
    -fx-text-fill: #263d8c; /* navy */
}

.nav-cube-corner-hover {
    -fx-text-fill: #ff9a9a; /* lighter red so labels stay readable */
}