/* CDE (Common Desktop Environment) CSS by Gemini */

:root {
  --cde-bg-color: #4A6E6E;
  /* A dark teal characteristic of CDE */
  --cde-widget-bg: #c7b1a9;
  /* The classic beige for widgets and windows */
  --cde-inset-bg: #696e7f;
  /* Lighter beige for inset areas like text fields */
  --cde-light-shadow: #FFFFFF;
  --cde-dark-shadow: #424242;
  --cde-title-bar-bg: #212121;
  /* Inactive title bar */
  --cde-title-bar-active-bg: #eaab6e;
  /* Active title bar (yellow) */
  --cde-title-bar-text: #FFFFFF;
  /* Inactive title bar text */
  --cde-title-bar-active-text: #000000;
  /* Active title bar text */
  --cde-menu-bar-bg: #4a91aa;
  /* Teal for menu bar */
  --cde-text-color: #000000;
  --font-family: 'PixelMplus12', 'VT323', monospace;
}

body.cde-desktop {
  background-color: var(--cde-bg-color);
  color: var(--cde-text-color);
  font-family: var(--font-family);
  font-size: 16px;
  margin: 0;
  padding: 1em;
  padding-bottom: 115px;
  /* Space for front panel */
}

/* CDE Window - NOW ABSOLUTELY POSITIONED */
.window {
  position: absolute;
  min-width: 300px;
  max-width: 600px;
  background-color: var(--cde-widget-bg);
  border: 2px solid;
  border-color: var(--cde-light-shadow) var(--cde-dark-shadow) var(--cde-dark-shadow) var(--cde-light-shadow);
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.window.cde-focused .title-bar {
  background-color: var(--cde-title-bar-active-bg);
  color: var(--cde-title-bar-active-text);
  border: #eaab6e 2px solid;
}

/* Generic bevelled box */
.cde-bevel {
  background-color: var(--cde-widget-bg);
  border: 2px solid;
  border-color: var(--cde-light-shadow) var(--cde-dark-shadow) var(--cde-dark-shadow) var(--cde-light-shadow);
}


.title-bar {
  background-color: var(--cde-title-bar-bg);
  color: var(--cde-title-bar-text);
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
}

.title-bar-text {
  font-weight: bold;
  padding-left: 4px;
}

.title-bar-controls {
  display: flex;
}

.title-bar-controls button {
  width: 20px;
  height: 20px;
  margin-left: 4px;
  background-color: var(--cde-widget-bg);
  border: 2px solid;
  border-color: var(--cde-light-shadow) var(--cde-dark-shadow) var(--cde-dark-shadow) var(--cde-light-shadow);
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}



.title-bar-controls button[aria-label="Minimize"] {
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><rect x="3" y="10" width="8" height="2" fill="black"/></svg>');
}

.title-bar-controls button[aria-label="Maximize"] {
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><rect x="3" y="3" width="8" height="8" stroke="black" fill="none" stroke-width="2"/></svg>');
}

.title-bar-controls button[aria-label="Close"] {
  /* No specific CDE close icon, so a generic look */
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><line x1="3" y1="3" x2="11" y2="11" stroke="black" stroke-width="2"/><line x1="3" y1="11" x2="11" y2="3" stroke="black" stroke-width="2"/></svg>');
}


.window-body {
  padding: 1em;
  min-height: 100px;
}

/* CDE Button */
button,
.cde-button {
  background-color: var(--cde-widget-bg);
  color: var(--cde-text-color);
  border: 2px solid;
  border-color: var(--cde-light-shadow) var(--cde-dark-shadow) var(--cde-dark-shadow) var(--cde-light-shadow);
  padding: 4px 12px;
  font-family: inherit;
  font-size: 14px;
  min-width: 60px;
  text-align: center;
  margin: 2px;
  cursor: pointer;
}

button:active,
.cde-button:active {
  border-color: var(--cde-dark-shadow) var(--cde-light-shadow) var(--cde-light-shadow) var(--cde-dark-shadow);
  outline: none;
}

button.default {
  outline: 2px solid var(--cde-text-color);
  outline-offset: -5px;
}

button:disabled {
  color: var(--cde-dark-shadow);
  cursor: default;
  opacity: 0.6;
}

/* More authentic CDE focus style */
button:focus,
.cde-button:focus,
select:focus,
input[type="text"]:focus,
textarea:focus,
input[type="checkbox"]:focus+label::before,
input[type="radio"]:focus+label::before {
  outline: 1px dashed var(--cde-text-color);
  outline-offset: -4px;
}


/* CDE Form Elements */
fieldset {
  border: 2px solid;
  border-color: var(--cde-dark-shadow) var(--cde-light-shadow) var(--cde-light-shadow) var(--cde-dark-shadow);
  padding: 1.5em 1em 1em;
  margin: 1em 0;
}

legend {
  padding: 0 0.5em;
  margin-left: 0.5em;
  font-weight: bold;
}

hr {
  border: none;
  height: 2px;
  background-color: transparent;
  border-top: 2px solid var(--cde-dark-shadow);
  border-bottom: 2px solid var(--cde-light-shadow);
  margin: 1em 0;
}

input[type="text"],
textarea {
  background-color: var(--cde-inset-bg);
  border: 2px solid;
  border-color: var(--cde-dark-shadow) var(--cde-light-shadow) var(--cde-light-shadow) var(--cde-dark-shadow);
  padding: 4px;
  font-family: inherit;
  font-size: inherit;
  color: #fff;
  /* CDE text fields often had white text on dark background */
}

.window-body select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--cde-widget-bg);
  color: var(--cde-text-color);
  border: 2px solid;
  border-color: var(--cde-light-shadow) var(--cde-dark-shadow) var(--cde-dark-shadow) var(--cde-light-shadow);
  padding: 5px 25px 5px 10px;
  font-family: inherit;
  font-size: inherit;
  min-width: 100px;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z" fill="black"/></svg>');
  background-repeat: no-repeat;
  background-position: right 5px center;
  image-rendering: pixelated;
}

/* Custom Checkbox and Radio */
label {
  display: flex;
  align-items: center;
  margin: 5px 0;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  background-color: var(--cde-widget-bg);
  border: 2px solid;
  cursor: pointer;
  flex-shrink: 0;
}

/* Checkbox Style */
input[type="checkbox"] {
  border-color: var(--cde-dark-shadow) var(--cde-light-shadow) var(--cde-light-shadow) var(--cde-dark-shadow);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  background: var(--cde-text-color);
  box-shadow: 2px 2px 0px 0px var(--cde-light-shadow) inset;
}

/* Radio Button Style (Diamond) */
input[type="radio"] {
  border: none;
  background: none;
  width: 20px;
  height: 20px;
}

input[type="radio"]::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background-color: var(--cde-widget-bg);
  border: 2px solid;
  border-color: var(--cde-dark-shadow) var(--cde-light-shadow) var(--cde-light-shadow) var(--cde-dark-shadow);
}

input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 7px;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background-color: var(--cde-text-color);
}

/* CDE Tabs */
.window-body .cde-tab-container {
  margin-top: 1em;
}

.window-body .cde-tab-list {
  display: flex;
  list-style-type: none;
  padding-left: 10px;
  margin: 0;
  position: relative;
  top: 2px;
  /* Move tabs down to overlap the content pane's border */
}

.window-body .cde-tab {
  background-color: var(--cde-widget-bg);
  color: var(--cde-text-color);
  border: 2px solid;
  border-color: var(--cde-light-shadow) var(--cde-dark-shadow) var(--cde-dark-shadow) var(--cde-light-shadow);
  padding: 5px 15px;
  margin-right: 4px;
  cursor: pointer;
  border-bottom: none;
}

.window-body .cde-tab.cde-active {
  background-color: var(--cde-widget-bg);
  border-bottom: 2px solid var(--cde-widget-bg);
  position: relative;
  z-index: 1;
}

.window-body .cde-tab-content {
  border: 2px solid;
  border-color: var(--cde-dark-shadow) var(--cde-light-shadow) var(--cde-light-shadow) var(--cde-dark-shadow);
  padding: 1em;
  background-color: var(--cde-widget-bg);
}

/* CDE Scrollbar - The True Final Version */
/* For Webkit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

::-webkit-scrollbar-track {
  background-color: var(--cde-inset-bg);
  /* Classic Motif stipple pattern - adjusted for beige */
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"><path d="M0 0h2v2H0z M2 2h2v2H2z" fill="%23C2AE8B" fill-opacity="0.5" /></svg>');
}

::-webkit-scrollbar-thumb {
  background-color: var(--cde-widget-bg);
  border: 2px solid;
  border-color: var(--cde-light-shadow) var(--cde-dark-shadow) var(--cde-dark-shadow) var(--cde-light-shadow);
}

::-webkit-scrollbar-thumb:active {
  border-color: var(--cde-dark-shadow) var(--cde-light-shadow) var(--cde-light-shadow) var(--cde-dark-shadow);
}

::-webkit-scrollbar-button {
  background-color: var(--cde-widget-bg);
  border: 2px solid;
  border-color: var(--cde-light-shadow) var(--cde-dark-shadow) var(--cde-dark-shadow) var(--cde-light-shadow);
  background-repeat: no-repeat;
  background-position: center;
  height: 20px;
  width: 20px;
}

::-webkit-scrollbar-button:active {
  border-color: var(--cde-dark-shadow) var(--cde-light-shadow) var(--cde-light-shadow) var(--cde-dark-shadow);
}

::-webkit-scrollbar-button:vertical:start {
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 4 L2 8 h8z" fill="black" /></svg>');
}

::-webkit-scrollbar-button:vertical:end {
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 8 L2 4 h8z" fill="black" /></svg>');
}

::-webkit-scrollbar-button:horizontal:start {
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M8 6 L4 2 v8z" fill="black" /></svg>');
}

::-webkit-scrollbar-button:horizontal:end {
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M4 6 L8 2 v8z" fill="black" /></svg>');
}


/* CDE Menu Bar */
.window-body .cde-menu-bar {
  display: flex;
  background-color: var(--cde-menu-bar-bg);
  /* Use the new teal variable */
  padding: 2px;
  border-bottom: 2px solid;
  border-color: var(--cde-dark-shadow) var(--cde-light-shadow) var(--cde-light-shadow) var(--cde-dark-shadow);
  margin: -1em -1em 1em;
  /* Absorb window content padding */
}

.window-body .cde-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.window-body .cde-menu-item {
  position: relative;
  padding: 2px 8px;
  cursor: pointer;
  user-select: none;
}

.window-body .cde-menu-item:hover,
.window-body .cde-menu-item-active {
  background-color: var(--cde-title-bar-bg);
  color: var(--cde-title-bar-text);
}

.cde-dropdown-menu {
  display: none;
  /* Hidden by default, shown with JS */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--cde-widget-bg);
  border: 2px solid;
  border-color: var(--cde-light-shadow) var(--cde-dark-shadow) var(--cde-dark-shadow) var(--cde-light-shadow);
  padding: 4px;
  list-style: none;
  margin: 2px 0 0;
  min-width: 150px;
  z-index: 10;
}

/* Static demo class */
.cde-dropdown-menu.cde-show {
  display: block;
}

.cde-dropdown-item {
  padding: 2px 20px 2px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.cde-dropdown-item:hover {
  background-color: var(--cde-title-bar-bg);
  color: var(--cde-title-bar-text);
}

.cde-menu-separator {
  height: 2px;
  background-color: transparent;
  border-top: 2px solid var(--cde-dark-shadow);
  border-bottom: 2px solid var(--cde-light-shadow);
  margin: 4px 0;
}

/* CDE Status Bar */
.cde-status-bar {
  display: flex;
  margin: 1em -1em -1em;
  /* Absorb window content padding */
  padding: 2px;
  border-top: 2px solid;
  border-color: var(--cde-light-shadow) var(--cde-dark-shadow) var(--cde-dark-shadow) var(--cde-light-shadow);
}

.cde-status-pane {
  flex: 1;
  border: 1px solid;
  border-color: var(--cde-dark-shadow) var(--cde-light-shadow) var(--cde-light-shadow) var(--cde-dark-shadow);
  padding: 2px 6px;
  margin: 1px;
  font-size: 14px;
}

/* CDE Desktop Icons */
.cde-desktop-icon {
  position: absolute;
  width: 80px;
  text-align: center;
  cursor: pointer;
  color: white;
  text-shadow: 1px 1px 2px black;
}

.cde-desktop-icon:focus {
  outline: 1px dashed white;
  outline-offset: 2px;
}

.cde-desktop-icon-image {
  width: 50px;
  height: 50px;
  margin: 0 auto 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.cde-icon-folder {
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M5 12 h15 l4 4 h21 v24 H5z" stroke="black" stroke-width="2" fill="%23E0E0E0" /></svg>');
}

.cde-icon-file {
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M10 5 h20 l10 10 v30 H10z M30 5 v10 h10" stroke="black" stroke-width="2" fill="%23FFFFFF" /></svg>');
}