/* ═══════════════════════════════════════
   DuOSc — DESKTOP ENVIRONMENT
   True Linux DE Clone (XFCE/GNOME style)
   ═══════════════════════════════════════ */

:root {
  --panel-bg: rgba(30, 30, 30, 0.95);
  --panel-border: rgba(0, 0, 0, 0.5);
  --win-bg: #2d2d2d;
  --win-border: #1a1a1a;
  --win-titlebar: #333333;
  --win-titlebar-active: #404040;
  
  --accent: #39d98a;
  --accent-hover: #4af09c;
  
  --text-main: #f4f4f4;
  --text-muted: #9e9e9e;
  
  --font-ui: 'Ubuntu', sans-serif;
  --font-mono: 'Ubuntu Mono', monospace;
}

body, html {
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  overflow: hidden;
  background: #000;
  color: var(--text-main);
  font-family: var(--font-ui);
  user-select: none;
}

/* ═══════ DESKTOP WALLPAPER ═══════ */
.desktop {
  position: fixed; inset: 0;
  overflow: hidden;
}

.desktop-wallpaper {
  position: absolute; inset: 0;
  background-image: url('../assets/wallpaper.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* ═══════ TOP PANEL (XFCE Style) ═══════ */
.top-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 52px;
  background: rgba(10, 10, 15, 0.98);
  border-top: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  z-index: 10000;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  font-size: 13px;
}

.panel-left, .panel-right {
  display: flex; align-items: center; height: 100%;
}

.panel-svg {
  width: 26px; height: 26px;
  fill: currentColor;
}

.panel-btn {
  display: flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 8px;
  background: transparent; border: none;
  color: var(--text-main); font-family: var(--font-ui); font-size: 13px;
  cursor: pointer; transition: background 0.1s;
}

.panel-btn:hover { background: rgba(255,255,255,0.1); }
.panel-btn:active { background: rgba(0,0,0,0.3); }

.panel-divider {
  width: 1px; height: 16px;
  background: rgba(255,255,255,0.1);
  margin: 0 4px;
}

.panel-window-list {
  display: flex; align-items: center; gap: 2px;
  height: 100%;
}

.window-list-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 100%; padding: 0 8px 0 12px;
  background: transparent; border: none;
  color: var(--text-muted); font-family: var(--font-ui); font-size: 13px;
  cursor: pointer; transition: all 0.1s;
  max-width: 160px;
  border-top: 2px solid transparent;
}

.window-list-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-main); }
.window-list-btn.active {
  background: rgba(255,255,255,0.1);
  color: var(--text-main);
  border-top-color: var(--accent);
}

.panel-tray-item {
  display: flex; align-items: center; gap: 4px;
  height: 100%; padding: 0 6px;
  color: var(--text-main); font-size: 13px;
}

.panel-tray-item.clock { padding: 0 12px; font-weight: 500; cursor: pointer; }
.panel-tray-item.clock:hover { background: rgba(255,255,255,0.1); }
.panel-tray-item.power-btn { cursor: pointer; padding: 0 8px; }
.panel-tray-item.power-btn:hover { background: rgba(255,255,255,0.1); }

/* ═══════ START MENU ═══════ */
.app-menu {
  position: fixed !important;
  bottom: 52px !important; left: 0 !important; top: auto !important; right: auto !important;
  width: 380px; height: 500px;
  background: var(--win-bg);
  border: 1px solid var(--win-border);
  border-bottom: none;
  border-radius: 0 8px 0 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  z-index: 10001;
  padding: 12px;
  font-family: var(--font-ui);
  color: var(--text-main);
}

/* ═══════ TRAY POPUPS ═══════ */
.tray-popup {
  position: absolute !important; bottom: 56px !important; top: auto !important;
  background: var(--panel-bg);
  border: 1px solid var(--win-border);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  z-index: 10001;
  padding: 12px;
  font-family: var(--font-ui);
  color: var(--text-main);
}

.cal-header { font-weight: 500; margin-bottom: 8px; font-size: 14px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 12px; }
.cal-day { color: var(--text-muted); font-weight: 500; margin-bottom: 4px; }
.cal-date { padding: 4px; border-radius: 4px; }
.cal-date.active { background: var(--accent); color: #000; font-weight: bold; }

.sys-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sys-item:last-child { margin-bottom: 0; }
.sys-info { display: flex; flex-direction: column; font-size: 12px; }
.sys-val { color: var(--text-muted); font-size: 11px; }

/* ═══════ DESKTOP ICONS ═══════ */
.desktop-icons {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 10;
}

.desktop-icon {
  position: absolute;
  pointer-events: auto;
  width: 84px; padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; border-radius: 4px; border: 1px solid transparent;
}

.desktop-icon:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.1);
}

.desktop-icon.selected {
  background: rgba(0, 122, 204, 0.4);
  border-color: rgba(0, 122, 204, 0.6);
}

.icon-label {
  font-size: 12px; text-align: center; line-height: 1.2;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  word-break: break-word;
}

/* ═══════ SELECTION BOX ═══════ */
.selection-box {
  position: absolute;
  background: rgba(0, 120, 215, 0.4);
  border: 1px solid rgba(0, 120, 215, 0.8);
  pointer-events: none; /* Let mouse events pass through */
  z-index: 5;
}

/* ═══════ LINUX WINDOW CHROME ═══════ */
.app-window {
  position: absolute;
  background: var(--win-bg);
  border: 1px solid var(--win-border);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.app-window.opening {
  opacity: 0;
  transform: scale(0.95);
}

.app-window.focused {
  box-shadow: 0 15px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1) inset;
}

.window-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; padding: 0 8px;
  background: var(--win-titlebar);
  border-bottom: 1px solid var(--win-border);
  cursor: default; user-select: none;
}

.app-window.focused .window-titlebar {
  background: var(--win-titlebar-active);
}

.window-title {
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
}
.app-window.focused .window-title { color: var(--text-main); }

.window-controls {
  display: flex; align-items: center; gap: 4px;
}

.win-btn {
  width: 24px; height: 24px;
  background: transparent; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.1s;
}

.win-btn:hover { background: rgba(255,255,255,0.1); }
.win-btn.close:hover { background: #E53935; }
.win-btn.close:hover .win-ctrl-svg { stroke: #fff; }

.window-body {
  flex: 1; overflow: auto;
  position: relative;
  background: var(--win-bg);
}

.resize-handle-e { position:absolute; top:0; right:-3px; bottom:0; width:6px; cursor:e-resize; z-index:100; }
.resize-handle-w { position:absolute; top:0; left:-3px; bottom:0; width:6px; cursor:w-resize; z-index:100; }
.resize-handle-s { position:absolute; bottom:-3px; left:0; right:0; height:6px; cursor:s-resize; z-index:100; }
.resize-handle-se { position:absolute; bottom:-3px; right:-3px; width:12px; height:12px; cursor:se-resize; z-index:101; }

/* ═══════ MOBILE RESPONSIVE ═══════ */
@media (max-width: 600px) {
  .window-list-btn { max-width: 80px; padding: 0 6px; font-size: 11px; }
  .panel-tray-item { padding: 0 4px; }
  .panel-tray-item.clock { font-size: 11px; padding: 0 6px; }
  .desktop-icon { width: 60px; }
  .icon-label { font-size: 10px; }
  .app-menu { width: 95%; max-width: 320px; left: 2.5%; }
  .app-window { border-radius: 4px 4px 0 0; }
  .window-titlebar { height: 28px; }
}