/* css/layout.css */

/* Desktop & Icons */
#desktop {
  position: absolute; top: 0; left: 0; right: 0; bottom: 32px; padding: 16px;
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 18px;
}
.desktop-icon { width: 72px; text-align: center; cursor: pointer; color: white; }
.desktop-icon .icon-graphic { width: 32px; height: 32px; margin: 0 auto 4px auto; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.desktop-icon span { display: inline-block; padding: 1px 3px; text-shadow: 1px 1px 1px black; word-break: break-word; color: white; }
.desktop-icon:focus span, .desktop-icon:active span { background-color: var(--win-navy); outline: 1px dotted var(--win-light); }

/* Windows */
.win95-window { position: absolute; min-width: 260px; display: flex; flex-direction: column; z-index: 10; }
.win95-window.hidden { display: none; }
.win-header { background: var(--win-navy); color: white; padding: 3px 4px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; cursor: move; }
.win-header * { color: white; }
.win-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.win-controls { display: flex; gap: 2px; }
.win-btn {
  width: 16px; height: 14px; font-family: inherit; font-size: 9px; line-height: 9px; padding: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1px solid;
  border-color: var(--win-light) var(--win-black) var(--win-black) var(--win-light);
  background-color: var(--win-gray); font-weight: bold; color: var(--win-black);
}
.win-btn:active { border-color: var(--win-black) var(--win-light) var(--win-light) var(--win-black); }
.win-body { padding: 8px; user-select: text; flex-grow: 1; overflow: auto; }

/* Tabs (Properties & Browser) */
.prop-tabs { display: flex; gap: 2px; margin-bottom: -2px; position: relative; z-index: 2; padding-left: 4px; }
.prop-tab {
  padding: 3px 6px; background-color: var(--win-gray); border: 2px solid;
  border-color: var(--win-light) var(--win-black) var(--win-gray) var(--win-light);
  border-top-left-radius: 3px; border-top-right-radius: 3px; cursor: pointer; font-size: 11px;
  display: flex; align-items: center; gap: 4px;
}
.prop-tab.active { border-bottom-color: var(--win-gray); font-weight: bold; padding-top: 2px; margin-top: -1px; background: var(--win-light); }
.prop-tab-content { border: 2px solid; border-color: var(--win-light) var(--win-black) var(--win-black) var(--win-light); padding: 10px; background: var(--win-gray); box-shadow: inset 1px 1px 0px #dfdfdf; }

/* Display Properties Specifics */
.crt-monitor-container { display: flex; flex-direction: column; align-items: center; margin: 2px auto 8px auto; }
.crt-monitor-bezel { width: 146px; height: 108px; background: #c8c8c8; border: 3px solid; border-color: #efefef #707070 #707070 #efefef; border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 1px 1px 0px #000; }
.crt-monitor-bezel::after { content: ""; position: absolute; bottom: 4px; right: 12px; width: 6px; height: 3px; background: #39ff14; border: 1px solid #005500; }
.crt-screen-glass { width: 122px; height: 84px; background: var(--win-teal); border: 3px solid; border-color: #404040 #ffffff #ffffff #404040; position: relative; overflow: hidden; }
.crt-screen-preview-window { position: absolute; top: 10px; left: 14px; width: 60px; height: 40px; background: var(--win-gray); border: 1px solid var(--win-black); transform-origin: top left; }
.crt-screen-preview-header { background: var(--win-navy); height: 7px; }
.crt-screen-preview-taskbar { position: absolute; bottom: 0; left: 0; right: 0; height: 7px; background: var(--win-gray); border-top: 1px solid var(--win-light); transform-origin: bottom left; }
.crt-stand { width: 50px; height: 8px; background: #a0a0a0; border: 1px solid #404040; border-top: none; }
.crt-base { width: 80px; height: 6px; background: #c0c0c0; border: 2px solid; border-color: #ffffff #505050 #505050 #ffffff; border-radius: 2px; }
.win95-listbox { background: var(--win-light); font-size: 11px; }
.listbox-item { padding: 1px 4px; cursor: pointer; color: var(--win-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listbox-item.selected { background-color: var(--win-navy); color: #fff; outline: 1px dotted #ffff55; }
.win-groupbox { border: 1px solid var(--win-dark); box-shadow: inset 1px 1px 0px var(--win-gray), 1px 1px 0px var(--win-light); padding: 8px; margin-top: 6px; position: relative; }
.win-groupbox legend { padding: 0 4px; font-size: 11px; }

/* Settings Slider */
input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; background: transparent; margin: 8px 0; position: relative; z-index: 2; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: var(--win-gray); border-top: 1px solid var(--win-dark); border-left: 1px solid var(--win-dark); border-bottom: 1px solid var(--win-light); border-right: 1px solid var(--win-light); box-shadow: inset 1px 1px 0px var(--win-black); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 11px; background: var(--win-gray); border-top: 1px solid var(--win-light); border-left: 1px solid var(--win-light); border-bottom: 1px solid var(--win-black); border-right: 1px solid var(--win-black); box-shadow: inset -1px -1px 0px var(--win-dark), inset 1px 1px 0px #dfdfdf; margin-top: -9px; cursor: pointer; }

/* Context Menu */
.context-menu { position: absolute; display: none; z-index: 2000; min-width: 170px; padding: 2px; background-color: var(--win-gray); box-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
.menu-item { padding: 3px 18px 3px 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; position: relative; color: var(--win-black); white-space: nowrap; }
.menu-item:hover:not(.disabled) { background-color: var(--win-navy); color: white; }
.menu-item.disabled { color: var(--win-dark); text-shadow: 1px 1px 0px var(--win-light); cursor: default; }
.menu-divider { height: 1px; margin: 3px 1px; border-top: 1px solid var(--win-dark); border-bottom: 1px solid var(--win-light); }
.has-submenu::after { content: "▶"; font-size: 8px; margin-left: 10px; }
.submenu { display: none; position: absolute; left: 100%; top: -2px; margin-left: -2px; min-width: 140px; }
.menu-item:hover > .submenu { display: block; }

/* Netscape Navigator Extras */
.ns-menu-label { padding: 2px 5px; cursor: pointer; border-radius: 1px; }
.ns-menu-label:hover, .ns-menu-label.open { background-color: var(--win-navy); color: #fff; }
.ns-menu-label:hover u, .ns-menu-label.open u { color: #fff; }

#ns-logo { transition: none; }
#ns-logo.loading { animation: ns-logo-pulse 0.9s infinite ease-in-out; }
@keyframes ns-logo-pulse {
  0% { color: teal; }
  50% { color: #ff8800; }
  100% { color: teal; }
}

.ns-bookmark-btn {
  font-family: var(--win-font); font-size: 10px; padding: 1px 6px; cursor: pointer;
  background: transparent; border: 1px solid transparent; white-space: nowrap;
  display: flex; align-items: center; gap: 3px; color: var(--win-black);
}
.ns-bookmark-btn:hover { border: 1px solid; border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark); background: var(--win-gray); }

.ns-bookmark-row {
  display: flex; align-items: center; justify-content: space-between; padding: 3px 4px;
  cursor: pointer; font-size: 11px; border-bottom: 1px solid var(--win-gray);
}
.ns-bookmark-row:hover { background-color: var(--win-navy); color: #fff; }
.ns-bookmark-row .ns-bm-del { flex-shrink: 0; }

/* Taskbar & Start Menu */
#taskbar { position: absolute; display: flex; align-items: center; padding: 2px 4px; z-index: 1000; gap: 6px; cursor: move; }
#taskbar.dock-bottom { bottom: 0; left: 0; right: 0; height: 32px; width: auto; flex-direction: row; }
#taskbar.dock-top { top: 0; left: 0; right: 0; height: 32px; width: auto; flex-direction: row; }
#taskbar.dock-left { top: 0; bottom: 0; left: 0; width: 60px; height: auto; flex-direction: column; align-items: stretch; }
#taskbar.dock-right { top: 0; bottom: 0; right: 0; width: 60px; height: auto; flex-direction: column; align-items: stretch; }
#start-button { height: 24px; padding: 2px 6px; display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: bold; cursor: pointer; }
#start-button:active, #start-button.active { border-color: var(--win-black) var(--win-light) var(--win-light) var(--win-black); }
#task-list { display: flex; flex-grow: 1; gap: 4px; overflow: hidden; padding: 0 4px; }
#taskbar.dock-bottom #task-list, #taskbar.dock-top #task-list { flex-direction: row; }
#taskbar.dock-left #task-list, #taskbar.dock-right #task-list { flex-direction: column; padding: 4px 0; }
.taskbar-btn { flex: 0 1 150px; height: 24px; font-family: var(--win-font); font-size: 11px; padding: 2px 4px; border: 2px solid; border-color: var(--win-light) var(--win-black) var(--win-black) var(--win-light); background-color: var(--win-gray); cursor: pointer; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
#taskbar.dock-left .taskbar-btn, #taskbar.dock-right .taskbar-btn { flex: 0 0 24px; width: 100%; }
.taskbar-btn.active { border-color: var(--win-black) var(--win-light) var(--win-light) var(--win-black); box-shadow: inset 1px 1px 0px var(--win-dark); background-color: var(--win-light); font-weight: bold; background-image: linear-gradient(45deg, var(--win-gray) 25%, transparent 25%, transparent 75%, var(--win-gray) 75%, var(--win-gray)), linear-gradient(45deg, var(--win-gray) 25%, transparent 25%, transparent 75%, var(--win-gray) 75%, var(--win-gray)); background-size: 2px 2px; background-position: 0 0, 1px 1px; }
.task-tray { padding: 2px 6px; font-size: 11px; text-align: center; }
#taskbar.dock-bottom .task-tray, #taskbar.dock-top .task-tray { margin-left: auto; }
#taskbar.dock-left .task-tray, #taskbar.dock-right .task-tray { margin-top: auto; }

#start-menu { position: absolute; width: 200px; display: none; z-index: 1001; box-shadow: 2px 2px 6px rgba(0,0,0,0.5); }
#start-menu.open { display: flex; }
.start-sidebar { background: var(--win-dark); width: 24px; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--win-gray); font-weight: bold; font-size: 14px; padding: 6px 2px; letter-spacing: 2px; }
.start-items { display: flex; flex-direction: column; flex-grow: 1; padding: 3px 0; }
.start-item { padding: 6px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--win-black); text-decoration: none; }
.start-item:hover { background-color: var(--win-navy); color: white; }
.start-divider { height: 1px; margin: 4px 2px; border-top: 1px solid var(--win-dark); border-bottom: 1px solid var(--win-light); }