/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ---------- Base + Wallpaper ---------- */
:root{
  --xp-blue:#3a6ea5;
  --xp-blue-dark:#24598a;
  --xp-blue-mid:#2f6ab3;
  --xp-green:#4db21b;
  --xp-green-dark:#2f7f00;
  --xp-title:#0a246a;
  --xp-title-grad-top:#2a62d4;
  --xp-title-grad-bot:#08306b;
  --xp-gray:#ece9d8;
  --xp-shadow: rgba(0,0,0,.35);
  --radius:8px;
  --z-taskbar:1000;
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0;
  font:14px/1.2 "Tahoma", "Segoe UI", Arial, sans-serif;
  color:#000;
  background: #1e90ff;
}

.desktop {
  position:fixed; inset:0 0 34px 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.1), transparent 200px),
    url("images/bliss.jpg") center/cover no-repeat fixed;
}
.desktop:focus { outline:none; }

/* Fallback if no wallpaper image uploaded */
@supports not (background: url("images/bliss.jpg")){
  .desktop{ background: linear-gradient(180deg,#6db1ff,#88d87d); }
}

/* ---------- Icons ---------- */
.icons {
  list-style:none; margin:20px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, 96px); gap:18px;
  width:max-content;
}
.icon {
  width:96px; text-align:center; cursor:default; user-select:none;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.8);
  outline:none;
}
.icon img { width:48px; height:48px; display:block; margin:0 auto 4px; image-rendering: pixelated; }
.icon span{
  display:inline-block; padding:2px 4px; border-radius:4px;
  background: transparent;
}
.icon:focus span,
.icon.selected span { background: rgba(30,144,255,.35); }

/* ---------- Window ---------- */
.window {
  position:absolute; top:120px; left:120px; width:640px; min-width:320px; max-width:90vw;
  background:#fff; border:1px solid #003c74; border-radius:6px;
  box-shadow:0 12px 28px var(--xp-shadow);
  overflow:hidden;
}
.window[hidden]{ display:none !important; }

.titlebar {
  display:flex; align-items:center; justify-content:space-between;
  height:28px; padding:0 6px 0 4px; cursor:move;
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.6);
  background: linear-gradient(#3b6ea5,#24598a);
  border-bottom:1px solid #1b4f8c;
}
.titlebar .title { display:flex; align-items:center; gap:6px; font-weight:bold; }
.titlebar img { width:16px; height:16px; image-rendering: pixelated; }

.win-controls { display:flex; gap:4px; }
.win-controls button{
  width:20px; height:18px; border:1px solid #1b4f8c; border-radius:3px; background:#e0e0e0; padding:0;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.15);
  position:relative; cursor:pointer;
}
.win-controls .btn-min::before,
.win-controls .btn-max::before,
.win-controls .btn-close::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:10px; height:10px;
  background-repeat:no-repeat; background-position:center;
}
.btn-min::before { border-bottom:2px solid #000; width:10px; height:0; top:8px; }
.btn-max::before { border:2px solid #000; top:3px; }
.btn-close { background:#e81123; border-color:#900; }
.btn-close::before{ content:"×"; color:#fff; font-weight:bold; font-size:12px; line-height:16px; text-align:center; top:0; }

.content { display:flex; min-height:220px; background:#fff; }
.pane {
  width:220px; background:#f0f5ff; border-right:1px solid #d6e4ff; padding:10px;
}
.pane h3 { color:#003399; margin:6px 0; font-size:13px; }
.pane ul { margin:0 0 10px 18px; padding:0; }
.main { flex:1; padding:10px; overflow:auto; }
.folder-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:16px; }
.folder { display:flex; align-items:center; gap:10px; }
.folder img { width:32px; height:32px; image-rendering: pixelated; }

.window.maximized {
  inset:0 0 34px 0 !important; width:auto !important; height:auto !important; top:0 !important; left:0 !important;
  border-radius:0;
}

.statusbar {
  height:22px; background:#ece9d8; border-top:1px solid #c8c2ad; padding:3px 8px; font-size:12px;
}

/* Notepad */
.window-notepad .content{ padding:0; }
.notepad-area{
  width:100%; height:320px; border:none; outline:none; padding:8px;
  font:14px/1.4 "Lucida Console", monospace;
}

/* ---------- Taskbar ---------- */
.taskbar{
  position:fixed; left:0; right:0; bottom:0; height:34px; z-index:var(--z-taskbar);
  display:flex; align-items:center; gap:8px; padding:4px 6px;
  background: linear-gradient(#24598a,#173b5a); border-top:1px solid #0d2b46;
}

.start-btn{
  height:28px; min-width:88px; display:flex; align-items:center; gap:6px;
  padding:0 10px; border-radius:14px; border:1px solid #215b10;
  background: linear-gradient(#5bd926,#2f7f00); color:#fff; font-weight:bold; text-shadow:0 1px 0 rgba(0,0,0,.6);
  cursor:pointer;
}
.start-btn img{ width:16px; height:16px; }

.tasks{ flex:1; display:flex; align-items:center; gap:6px; overflow:auto; scrollbar-width:thin; }
.task{
  height:26px; min-width:160px; max-width:260px; padding:0 10px;
  display:flex; align-items:center; gap:8px; border-radius:4px;
  background: linear-gradient(#f3f3f3,#d8d8d8); border:1px solid #7a7a7a; color:#000;
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden; cursor:pointer;
}
.task.active{ outline:2px solid #ffcc66; }

.tray{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.clock{ color:#fff; font-weight:bold; }

/* ---------- Start Menu ---------- */
.start-menu{
  position:fixed; left:6px; bottom:34px; width:420px; height:380px; display:flex; overflow:hidden;
  border:1px solid #0d2b46; border-radius:6px 6px 0 0; box-shadow:0 -8px 24px var(--xp-shadow);
  background: linear-gradient(#3a6ea5,#24598a);
  z-index:calc(var(--z-taskbar) + 1);
}
.start-menu[hidden]{ display:none !important; }
.sm-left, .sm-right{ padding:10px; background:#f0f5ff; }
.sm-left{ width:280px; border-right:1px solid #c7dbff; }
.sm-left ul, .sm-right ul{ list-style:none; margin:0; padding:0; }
.sm-left li button, .sm-left li a{
  width:100%; display:flex; align-items:center; gap:10px; padding:6px; margin-bottom:6px;
  border:1px solid transparent; border-radius:4px; text-decoration:none; color:#000; background:transparent;
}
.sm-left li button:hover, .sm-left li a:hover{ background:#e6f0ff; border-color:#c7dbff; }
.sm-left img{ width:20px; height:20px; }
.sm-right{ flex:1; background:#e7eefc; }
.sm-right a{ display:block; padding:6px; color:#003399; text-decoration:none; border-radius:4px; }
.sm-right a:hover{ background:#d8e5ff; }

/* ---------- Context Menu ---------- */
.ctx{
  position:fixed; min-width:160px; background:#fff; border:1px solid #999; box-shadow:0 6px 18px rgba(0,0,0,.25);
  padding:4px; z-index:2000;
}
.ctx[hidden]{ display:none !important; }
.ctx button{
  display:block; width:100%; text-align:left; padding:6px 10px; border:none; background:transparent; cursor:pointer;
}
.ctx button:hover{ background:#e6f0ff; }

/* ---------- Helpers ---------- */
.hidden{ display:none !important; }