/* ==============================================
   vibeOS Luna Theme — Complete
   Companion to 2026-06-05-vibeos-mvp.md Task 2
   ============================================== */

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  background: var(--desktop-bg);
  font-family: var(--font-family);
  font-size: 11px;
  color: #000;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

input, textarea, [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* === Theme Variables (default: vibeOS) === */
body.theme-windows, body:not([class*="theme-"]) {
  --desktop-bg: #3A6EA5;
  --taskbar-bg: linear-gradient(to bottom, #3168D5 0%, #4993E6 2%, #3168D5 3%, #2156C0 100%);
  --taskbar-border: #5599EE;
  --start-btn-bg: linear-gradient(to bottom, #3C9A3C 0%, #5CBF5C 50%, #3C9A3C 51%, #2D8A2D 100%);
  --window-border: 2px solid #0054E3;
  --titlebar-bg: linear-gradient(to bottom, #0A246A 0%, #3A6EA5 3%, #2C5C9A 10%, #1E4A8A 100%);
  --titlebar-text: white;
  --window-bg: #ECE9D8;
  --button-bg: #ECE9D8;
  --button-border: #ACA899;
  --menu-hover: #3168D5;
  --font-family: 'Tahoma', 'Segoe UI', sans-serif;
  --border-radius-title: 8px 8px 0 0;
  --window-shadow: 2px 2px 10px rgba(0,0,0,0.35);
}

body.theme-mac {
  --desktop-bg: #808080;
  --taskbar-bg: #DDDDDD;
  --taskbar-border: #999;
  --start-btn-bg: #DDDDDD;
  --window-border: 1px solid #000;
  --titlebar-bg: #FFFFFF;
  --titlebar-text: #000;
  --window-bg: #FFFFFF;
  --button-bg: #DDDDDD;
  --button-border: #666;
  --menu-hover: #000080;
  --font-family: 'Chicago', 'Charcoal', 'Tahoma', sans-serif;
  --border-radius-title: 4px 4px 0 0;
  --window-shadow: 1px 1px 0 #000, 2px 2px 0 #000;
}

body.theme-lisa {
  --desktop-bg: #C8C8C8;
  --taskbar-bg: #B0B0B0;
  --taskbar-border: #888;
  --start-btn-bg: #B0B0B0;
  --window-border: 1px solid #333;
  --titlebar-bg: #D8D8D8;
  --titlebar-text: #000;
  --window-bg: #FFFFFF;
  --button-bg: #E0E0E0;
  --button-border: #555;
  --menu-hover: #000;
  --font-family: 'Courier New', 'Geneva', 'Tahoma', monospace;
  --border-radius-title: 2px 2px 0 0;
  --window-shadow: 1px 1px 0 #555;
}

/* === Desktop === */
.desktop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--desktop-bg);
  display: flex; flex-direction: column;
}

/* === Taskbar === */
.taskbar {
  display: flex; align-items: center;
  height: 30px; min-height: 30px;
  background: var(--taskbar-bg);
  padding: 2px 4px; gap: 4px;
  border-top: 1px solid var(--taskbar-border);
}
.taskbar .start-btn {
  height: 24px; padding: 0 10px;
  background: var(--start-btn-bg);
  border: none; border-radius: 0 8px 8px 0;
  color: white; font-weight: bold; font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
body.theme-mac .taskbar .start-btn,
body.theme-lisa .taskbar .start-btn {
  color: #000;
  text-shadow: none;
}
body.theme-mac .taskbar .system-tray,
body.theme-lisa .taskbar .system-tray {
  color: #000;
}
body.theme-mac .desktop-icon,
body.theme-lisa .desktop-icon {
  color: #000;
  text-shadow: none;
}

/* Mac OS — complete theme overrides */
body.theme-mac .start-menu {
  border-color: #555;
  box-shadow: 3px 3px 12px rgba(0,0,0,0.5);
}
body.theme-mac .start-menu .start-header {
  background: linear-gradient(to bottom, #555 0%, #333 100%);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.5px;
}
body.theme-mac .start-menu .start-right {
  background: #E8E8E8;
}
body.theme-mac .taskbar {
  font-family: 'Chicago', 'Charcoal', var(--font-family);
  font-size: 10px;
}
body.theme-mac .window-body {
  background: #FFFFFF;
}
body.theme-mac menu-bar {
  background: #F0F0F0;
  border-bottom: 1px solid #CCC;
}
body.theme-mac menu-item:hover {
  background: #000080;
  color: white;
}
body.theme-mac menu-popup {
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #666;
  border-radius: 0;
}
body.theme-mac menu-row:hover {
  background: #000080;
  color: white;
}
body.theme-mac .status-bar {
  background: #F0F0F0;
  border-top: 1px solid #CCC;
}
body.theme-mac .toolbar {
  background: #F0F0F0;
  border-bottom: 1px solid #CCC;
}
body.theme-mac button {
  border-radius: 4px;
  border-color: #888;
}
body.theme-mac button:hover {
  border-color: #000;
}
body.theme-mac input[type="text"], body.theme-mac textarea, body.theme-mac select {
  border-color: #888;
  border-radius: 3px;
}
body.theme-mac .context-menu {
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: 1px 1px 0 #666;
}
body.theme-mac .context-item:hover {
  background: #000080;
  color: white;
}
body.theme-mac section.tabs button[role="tab"] {
  border-radius: 3px 3px 0 0;
}
body.theme-mac section.tabs button[role="tab"][aria-selected="true"] {
  background: #FFFFFF;
}
body.theme-mac fieldset {
  border-color: #999;
  border-radius: 4px;
}
body.theme-mac ::-webkit-scrollbar-track { background: #F0F0F0; }
body.theme-mac ::-webkit-scrollbar-thumb { background: #C0C0C0; border-color: #999; }

/* Lisa OS — monochrome, flat, document-centric, sharp edges */
body.theme-lisa * {
  text-shadow: none !important;
}
body.theme-lisa .start-menu {
  border: 1px solid #333;
  box-shadow: 1px 1px 0 #666;
  border-radius: 0;
}
body.theme-lisa .start-header {
  background: #333;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 6px 12px;
}
body.theme-lisa .start-right {
  background: #D8D8D8;
  border-left: 1px solid #999;
}
body.theme-lisa .window-body {
  background: #FFFFFF;
}
body.theme-lisa menu-bar {
  background: #E8E8E8;
  border-bottom: 1px solid #555;
}
body.theme-lisa menu-item {
  padding: 2px 10px;
}
body.theme-lisa menu-item:hover {
  background: #000;
  color: #fff;
}
body.theme-lisa menu-popup {
  border: 1px solid #333;
  box-shadow: 1px 1px 0 #666;
  border-radius: 0;
}
body.theme-lisa menu-row:hover {
  background: #000;
  color: #fff;
}
body.theme-lisa .status-bar {
  background: #E8E8E8;
  border-top: 1px solid #555;
  font-family: monospace;
  font-size: 10px;
}
body.theme-lisa .toolbar {
  background: #E8E8E8;
  border-bottom: 1px solid #555;
}
body.theme-lisa button {
  border-radius: 0;
  border: 1px solid #555;
  background: #E8E8E8;
  font-family: monospace;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
}
body.theme-lisa button:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}
body.theme-lisa button.primary {
  border: 2px solid #000;
  font-weight: bold;
}
body.theme-lisa input[type="text"], body.theme-lisa textarea, body.theme-lisa select {
  border: 1px solid #555;
  border-radius: 0;
  font-family: monospace;
  font-size: 11px;
  background: #FFF;
}
body.theme-lisa .context-menu {
  border: 1px solid #333;
  border-radius: 0;
  box-shadow: 1px 1px 0 #666;
}
body.theme-lisa .context-item:hover {
  background: #000;
  color: #fff;
}
body.theme-lisa section.tabs button[role="tab"] {
  border-radius: 0;
  border: 1px solid #555;
  background: #D8D8D8;
}
body.theme-lisa section.tabs button[role="tab"][aria-selected="true"] {
  background: #FFFFFF;
  border-bottom-color: #FFF;
  font-weight: bold;
}
body.theme-lisa fieldset {
  border: 1px solid #555;
  border-radius: 0;
}
body.theme-lisa fieldset legend {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
}
body.theme-lisa ::-webkit-scrollbar-track { background: #E8E8E8; }
body.theme-lisa ::-webkit-scrollbar-thumb { background: #999; border: 1px solid #555; border-radius: 0; }
body.theme-lisa ::-webkit-scrollbar-button { border: 1px solid #555; }
body.theme-lisa .taskbar {
  border-top: 1px solid #555;
}
body.theme-lisa .desktop-icon {
  font-family: monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.taskbar .start-btn:hover { filter: brightness(1.1); }
.taskbar .taskbar-spacer { flex: 1; }
.taskbar .system-tray {
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px; color: white; font-size: 11px;
  background: rgba(255,255,255,0.1); height: 22px; border-radius: 2px;
}

/* === Desktop Icons === */
.desktop-icons {
  display: flex; flex-direction: column; flex-wrap: wrap;
  padding: 12px; gap: 4px;
  flex: 1; overflow: auto;
  align-content: flex-start;
}

/* Windows container — takes no space, windows are position:fixed */
#windows-container { flex: 0; height: 0; overflow: visible; }
.desktop-icon {
  display: flex; flex-direction: column; align-items: center;
  width: 72px; padding: 6px 4px; cursor: pointer; border-radius: 4px;
  text-align: center; color: white; font-size: 11px; gap: 4px;
}
.desktop-icon:hover { background: rgba(255,255,255,0.15); }
.desktop-icon .icon-img { font-size: 32px; line-height: 1; }

/* === Windows === */
.window {
  position: fixed; min-width: 300px; min-height: 200px;
  background: var(--window-bg);
  border: var(--window-border);
  border-radius: var(--border-radius-title);
  box-shadow: var(--window-shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.window.maximized {
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: calc(100% - 30px) !important;
  border-radius: 0 !important;
}

/* === Title Bar === */
.title-bar {
  display: flex; align-items: center;
  background: var(--titlebar-bg);
  color: var(--titlebar-text); padding: 3px 5px 3px 8px;
  font-size: 12px; font-weight: bold;
  cursor: default; min-height: 28px;
  user-select: none; gap: 4px;
}
.title-bar .title-bar-text {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.title-bar .title-bar-icon { width: 16px; height: 16px; margin-right: 2px; }
.title-bar-controls { display: flex; gap: 2px; }
.title-bar-controls button {
  width: 21px; height: 21px; border: none;
  background: linear-gradient(to bottom, #3C8CEC 0%, #1A5CC8 50%, #1050B0 51%, #0A3C90 100%);
  color: white; font-size: 11px; cursor: pointer; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
}
.title-bar-controls button:hover { filter: brightness(1.2); }
.title-bar-controls button.close-btn { background: #C75000; }
.title-bar-controls button.close-btn:hover { background: #E05000; }

/* === Mac OS window buttons (traffic light, left side) === */
body.theme-mac .title-bar {
  flex-direction: row-reverse;
  background: linear-gradient(to bottom, #F0F0F0 0%, #D0D0D0 100%);
  padding: 4px 8px;
}
body.theme-mac .title-bar .title-bar-text {
  text-align: center;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.5px;
}
body.theme-mac .title-bar .title-bar-icon {
  display: none;
}
body.theme-mac .title-bar-controls {
  order: -1;
  gap: 6px;
  padding-right: 4px;
}
body.theme-mac .title-bar-controls button {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: none;
  font-size: 0;
  line-height: 0;
  min-height: 0;
  background: #CCCCCC;
  padding: 0;
}
body.theme-mac .title-bar-controls button:hover {
  filter: none;
  font-size: 8px;
  line-height: 12px;
  text-align: center;
  color: rgba(0,0,0,0.5);
}
body.theme-mac .title-bar-controls button.close-btn {
  background: #FF5F57;
  order: 0;
}
body.theme-mac .title-bar-controls button.close-btn:hover { background: #FF3B30; }
body.theme-mac .title-bar-controls button.min-btn {
  background: #FFBD2E;
  order: 1;
}
body.theme-mac .title-bar-controls button.min-btn:hover { background: #FF9F0A; }
body.theme-mac .title-bar-controls button.max-btn {
  background: #28CA41;
  order: 2;
}
body.theme-mac .title-bar-controls button.max-btn:hover { background: #00B31A; }

/* Show ✕ ─ □ on hover for Mac buttons */
body.theme-mac .title-bar-controls button.close-btn:hover::after { content: '✕'; }
body.theme-mac .title-bar-controls button.min-btn:hover::after   { content: '─'; }
body.theme-mac .title-bar-controls button.max-btn:hover::after   { content: '□'; }

/* Lisa OS — square monochrome window controls, close on left */
body.theme-lisa .title-bar {
  flex-direction: row-reverse;
  background: #D8D8D8;
  border-bottom: 1px solid #555;
}
body.theme-lisa .title-bar .title-bar-text {
  text-align: center;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: monospace;
}
body.theme-lisa .title-bar .title-bar-icon { display: none; }
body.theme-lisa .title-bar-controls { gap: 3px; }
body.theme-lisa .title-bar-controls button {
  width: 18px; height: 18px;
  min-height: 0;
  border-radius: 0;
  border: 1px solid #333;
  background: #E8E8E8;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  color: #000;
  padding: 0;
  font-weight: bold;
}
body.theme-lisa .title-bar-controls button:hover {
  background: #000;
  color: #fff;
  filter: none;
}
body.theme-lisa .title-bar-controls button.close-btn {
  order: 0;
  border-width: 2px;
}
body.theme-lisa .title-bar-controls button.min-btn { order: 2; }
body.theme-lisa .title-bar-controls button.max-btn { order: 1; background: #FFFFFF; }

/* === Window Body === */
.window-body {
  flex: 1; overflow: auto; padding: 8px;
  display: flex; flex-direction: column;
}

/* === Menu Bar === */
menu-bar {
  display: flex; background: #ECE9D8; border-bottom: 1px solid #ACA899;
  padding: 1px 0; font-size: 11px; min-height: 22px;
}
menu-item {
  position: relative; padding: 2px 8px; cursor: pointer;
}
menu-item:hover { background: var(--menu-hover); color: white; }
menu-popup {
  display: none; position: absolute; top: 100%; left: 0;
  background: #FFFFFF; border: 1px solid #ACA899;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  min-width: 180px; z-index: 1000; padding: 2px 0;
  color: #000;
}
menu-item.active > menu-popup { display: block; }
menu-row {
  display: flex; align-items: center; padding: 3px 24px 3px 8px;
  cursor: pointer; font-size: 11px; gap: 6px;
  white-space: nowrap;
  color: #000;
}
menu-row:hover { background: var(--menu-hover); color: white; }
menu-divider {
  display: block; height: 1px; background: #ACA899; margin: 3px 2px;
}

/* === XP Start Menu === */
.start-menu {
  position: fixed; bottom: 30px; left: 0;
  background: #FFFFFF; border: 2px solid #0A246A;
  border-radius: 8px 8px 0 0;
  box-shadow: 3px 3px 12px rgba(0,0,0,0.4);
  width: 380px; z-index: 9999;
  display: flex; flex-direction: column;
}
.start-menu .start-header {
  background: linear-gradient(to bottom, #245090 0%, #3470B0 100%);
  color: white; font-size: 18px; font-weight: bold;
  padding: 8px 12px; border-radius: 6px 6px 0 0;
}
.start-menu .start-body { display: flex; flex: 1; }
.start-menu .start-left { background: #FFFFFF; flex: 1; padding: 4px 0; }
.start-menu .start-right {
  background: #D3E5FA; width: 140px; padding: 6px;
  border-left: 1px solid #ACA899; font-size: 11px;
}
.start-menu .start-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer; font-size: 12px;
}
.start-menu .start-item:hover { background: var(--menu-hover); color: white; }
.start-menu .start-item .start-icon { font-size: 20px; width: 24px; text-align: center; }

/* === Tabs === */
section.tabs {
  display: flex; border-bottom: 1px solid #ACA899;
  background: #ECE9D8; gap: 0;
}
button[role="tab"] {
  background: #ECE9D8; border: 1px solid #ACA899;
  border-bottom: none; padding: 4px 12px;
  cursor: pointer; font-size: 11px;
  border-radius: 4px 4px 0 0; margin-bottom: -1px;
}
button[role="tab"][aria-selected="true"] {
  background: #FFFFFF; border-bottom: 1px solid #FFFFFF;
  font-weight: bold; z-index: 1;
}
[role="tabpanel"] { padding: 8px; display: none; }
[role="tabpanel"].active { display: block; }

/* === Tree View === */
ul.tree-view {
  list-style: none; padding: 0 0 0 8px; margin: 0; font-size: 12px;
}
ul.tree-view ul { padding-left: 18px; }
ul.tree-view li { padding: 2px 0; cursor: pointer; list-style: none; }
ul.tree-view li ul { display: none; }
ul.tree-view li.expanded > ul { display: block; }
ul.tree-view li::before {
  content: ''; display: inline-block; width: 16px; height: 16px;
  vertical-align: middle; margin-right: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='7' width='12' height='2' fill='%23888'/%3E%3C/svg%3E") center no-repeat;
}
ul.tree-view li.expanded::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='7' width='12' height='2' fill='%23888'/%3E%3Crect x='7' y='2' width='2' height='12' fill='%23888'/%3E%3C/svg%3E") center no-repeat;
}

/* === Buttons (XP style) === */
button {
  background: var(--button-bg); border: 1px solid var(--button-border);
  padding: 4px 16px; font-size: 11px; cursor: pointer;
  border-radius: 3px; font-family: var(--font-family);
  min-height: 23px;
}
button:hover { border-color: #7A8A9A; }
button:active { border-color: #666; background: #D4D0C8; }
button.primary { border: 2px solid #0A246A; padding: 3px 16px; }

/* === Input controls === */
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  background: #FFFFFF; border: 1px solid #7F9DB9;
  padding: 2px 4px; font-size: 11px; font-family: 'Tahoma', sans-serif;
  border-radius: 0; min-height: 21px;
}
input[type="text"]:focus, textarea:focus, select:focus {
  outline: 1px dotted #000; outline-offset: -2px;
}
textarea { padding: 4px; resize: none; }
select { padding: 1px 2px; }
input[type="checkbox"], input[type="radio"] {
  vertical-align: middle; margin: 0 4px 0 0;
}

/* === Field Row === */
div.field-row {
  display: flex; align-items: center; gap: 6px; padding: 2px 0;
}
div.field-row > label { min-width: 60px; text-align: right; font-size: 11px; }

/* === Fieldset === */
fieldset {
  border: 1px solid #ACA899; margin: 8px 0; padding: 8px;
  border-radius: 3px;
}
legend { font-size: 11px; font-weight: bold; padding: 0 4px; }

/* === Status Bar === */
div.status-bar {
  display: flex; align-items: center;
  background: #ECE9D8; border-top: 1px solid #ACA899;
  padding: 2px 8px; min-height: 22px; font-size: 11px;
  gap: 8px;
}
p.status-bar-field {
  margin: 0; padding: 1px 6px; border-left: 1px solid #ACA899;
}
p.status-bar-field:first-child { border-left: none; }

/* === Progress Bar === */
div[role="progressbar"] {
  background: #FFFFFF; border: 1px solid #7F9DB9;
  height: 14px; overflow: hidden; position: relative;
}
div[role="progressbar"]::after {
  content: ''; display: block; height: 100%;
  background: repeating-linear-gradient(
    90deg,
    #0A246A 0px, #0A246A 8px, #A0C0E0 8px, #A0C0E0 16px
  );
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
  background: #ECE9D8; border: 1px solid #ACA899;
}
::-webkit-scrollbar-thumb {
  background: #D4D0C8; border: 1px solid #ACA899;
}
::-webkit-scrollbar-button {
  background: #ECE9D8; border: 1px solid #ACA899;
  display: block; height: 16px;
}

/* === Toolbar === */
.toolbar {
  display: flex; align-items: center; gap: 2px;
  padding: 2px 4px; background: #ECE9D8;
  border-bottom: 1px solid #ACA899;
}
.toolbar button {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 6px; font-size: 11px; min-height: 22px;
}
.toolbar .toolbar-separator {
  width: 1px; height: 20px; background: #ACA899; margin: 0 2px;
}

/* === Address Bar === */
.address-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px; background: #ECE9D8;
  border-bottom: 1px solid #ACA899;
}
.address-bar label { font-size: 11px; white-space: nowrap; }
.address-bar input[type="text"] { flex: 1; }

/* === Context Menu === */
.context-menu {
  position: fixed; background: #FFFFFF; border: 1px solid #ACA899;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  min-width: 160px; z-index: 10000; padding: 2px 0;
  display: none;
}
.context-menu .context-item {
  padding: 3px 16px; cursor: pointer; font-size: 11px;
}
.context-menu .context-item:hover { background: var(--menu-hover); color: white; }

/* Style submenu — prevent white-text inheritance from parent hover */
#style-submenu,
#style-submenu .context-item,
#recent-submenu,
#recent-submenu .context-item {
  color: #000;
}
#style-submenu .context-item:hover,
#recent-submenu .context-item:hover {
  color: #fff;
}
/* Active theme indicator */
#style-submenu .context-item.active-theme {
  font-weight: bold;
}
#style-submenu .context-item.active-theme::before {
  content: '✓ ';
}

/* === Dialog Overlay === */
.dialog-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.25); z-index: 5000;
}

/* === Utility === */
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }