/* ===================================================================
   ui.css - Windows XP "Luna" chrome.

   Measured off the real thing: the title bar is a six-stop blue gradient
   with a bright band near the top and a dark lip at the bottom, the
   window frame is 3px of #0054E3 with only the top corners rounded, the
   face is #ECE9D8, fields take a 1px #7F9DB9 border, and buttons are
   3px-radius pills that glow amber on hover.

   Type is Tahoma, which is what XP actually shipped its UI in.
   =================================================================== */

:root {
  /* Luna blue */
  --frame:     #0054e3;
  --frame-off: #7ba2e0;
  --face:      #ece9d8;
  --face-hi:   #f5f4ea;
  --face-lo:   #d6d2c2;
  --field-brd: #7f9db9;
  --btn-brd:   #003c74;
  --sel:       #316ac5;
  --sel-soft:  #d3e5fa;

  /* taskbar + start */
  --tb-1: #3f8cf3;
  --tb-2: #245edb;
  --tb-3: #1941a5;
  --start-1: #75c475;
  --start-2: #3d9b3d;
  --start-3: #2a7a2a;
  --tray-1: #16adf8;
  --tray-2: #1290e8;

  --text:  #000000;
  --muted: #4a4a4a;

  --font: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  --mono: "Lucida Console", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: 11px;
  color: var(--text);
  background: #204d9c;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text);
  min-width: 75px;
  min-height: 23px;
  padding: 3px 12px;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--btn-brd);
  border-radius: 3px;
  background: linear-gradient(180deg, #fff 0%, #f2f2ec 46%, #e3e3d5 54%, #d8d8c8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.btn:hover {
  border-color: #e5a900;
  background: linear-gradient(180deg, #fffefa 0%, #fdf3d4 46%, #fbe6a3 54%, #f7d982 100%);
}
.btn:active, .btn.pressed {
  background: linear-gradient(180deg, #cfcdbf 0%, #dcdacb 55%, #eae8da 100%);
  box-shadow: inset 1px 1px 3px rgba(0,0,0,.22);
  padding: 4px 11px 2px 13px;
}
.btn:focus-visible { outline: 1px dotted #333; outline-offset: -4px; }
.btn.primary { font-weight: bold; }
.btn[disabled] { color: #a0a0a0; cursor: default; background: var(--face); }

/* ---------- fields ---------- */
.field {
  font-family: var(--font);
  font-size: 11px;
  background: #fff;
  padding: 3px 5px;
  border: 1px solid var(--field-brd);
}
.field:focus { outline: none; border-color: var(--frame); }

/* ---------- group box ---------- */
.group {
  position: relative;
  border: 1px solid #d0cec0;
  border-radius: 3px;
  padding: 15px 11px 11px;
  margin: 18px 0 10px;
  background: rgba(255,255,255,.45);
}
.group > .gl {
  position: absolute;
  top: -8px; left: 9px;
  background: var(--face);
  padding: 0 5px;
  font-size: 11px;
  font-weight: bold;
  color: #003399;
}

/* ---------- windows ---------- */
.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  min-height: 130px;
  background: var(--face);
  border: 3px solid var(--frame);
  border-top: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 3px 4px 16px rgba(0,0,0,.45);
  overflow: hidden;
}
.window.inactive { border-color: var(--frame-off); box-shadow: 2px 3px 10px rgba(0,0,0,.3); }
.window.maxed { border-radius: 0; border-left: 0; border-right: 0; }

.titlebar {
  height: 29px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px 2px 6px;
  border-radius: 7px 7px 0 0;
  /* the real Luna caption: dark edge, bright band at 10%, long mid, dark lip */
  background: linear-gradient(180deg,
    #0058e6 0%, #2586f2 8%, #4b9dfb 14%, #2d84f0 26%,
    #2a7fea 82%, #2073dd 90%, #1657c0 96%, #0e47a6 100%);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  cursor: default;
  user-select: none;
}
.window.maxed .titlebar { border-radius: 0; }
.window.inactive .titlebar {
  background: linear-gradient(180deg,
    #7ea7e8 0%, #a9c6f2 10%, #c2d8f7 16%, #a8c4ee 30%,
    #97b6e6 84%, #86a7dc 94%, #7295cf 100%);
  color: #e8eefb;
  text-shadow: none;
}
.titlebar .tbicon { width: 16px; height: 16px; flex: 0 0 16px; }
.titlebar .tbtitle {
  flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.titlebar .tbbtns { display: flex; gap: 2px; margin-left: 6px; }
.titlebar-btn {
  width: 21px; height: 21px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: bold; line-height: 1;
  color: #fff;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 3px;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background: linear-gradient(180deg, #7db4f8 0%, #4a8ef2 40%, #2264d8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.titlebar-btn:hover { background: linear-gradient(180deg, #9ecafb 0%, #6ba7f6 40%, #3579e4 100%); }
.titlebar-btn:active { background: linear-gradient(180deg, #2264d8, #4a8ef2); }
.titlebar-btn.close { background: linear-gradient(180deg, #f2937b 0%, #e35f41 40%, #c22e0f 100%); }
.titlebar-btn.close:hover { background: linear-gradient(180deg, #f8ae99 0%, #ee7355 40%, #d43d1c 100%); }
.window.inactive .titlebar-btn { opacity: .85; }

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

/* menu strip */
.window-menu {
  flex: 0 0 auto;
  display: flex; gap: 1px;
  padding: 3px 4px;
  background: linear-gradient(180deg, #fbfaf6 0%, #f0eee1 60%, #e9e6d6 100%);
  border-bottom: 1px solid #d5d1c1;
  user-select: none;
}
.window-menu span { padding: 3px 8px; font-size: 11px; cursor: default; border-radius: 2px; }
.window-menu span:hover { background: var(--sel); color: #fff; }

/* status bar */
.window-statusbar {
  flex: 0 0 auto;
  display: flex; gap: 3px;
  padding: 3px 4px;
  background: var(--face);
  border-top: 1px solid #d5d1c1;
}
.window-statusbar .cell {
  padding: 2px 8px;
  font-size: 11px;
  flex: 0 0 auto;
  border: 1px solid #d5d1c1;
  border-radius: 2px;
  background: var(--face-hi);
}
.window-statusbar .cell:first-child { flex: 1 1 auto; }

/* ---------- scrollbars (Luna) ---------- */
.window-body::-webkit-scrollbar { width: 17px; height: 17px; }
.window-body::-webkit-scrollbar-track {
  background: #f1efe2;
  border-left: 1px solid #dedbc9;
}
.window-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  border: 1px solid #3c6fb5;
  background: linear-gradient(90deg, #f0f6ff 0%, #cde0f8 30%, #a8c9f2 60%, #86b0ea 100%);
}
.window-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #fff 0%, #ddebfd 30%, #bcd8f6 60%, #9ac0ee 100%);
}
.window-body { scrollbar-width: auto; scrollbar-color: #a8c9f2 #f1efe2; }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; background: #fff; font-size: 11px; }
.table th {
  text-align: left; font-weight: normal;
  padding: 4px 8px;
  background: linear-gradient(180deg, #fff 0%, #f3f1e6 60%, #e8e5d6 100%);
  border: 1px solid #d5d1c1;
  white-space: nowrap;
}
.table td { padding: 4px 8px; border-bottom: 1px solid #eceae0; white-space: nowrap; }
.table tr:hover td { background: #f2f7fd; }
.table tr.sel td { background: var(--sel); color: #fff; }

/* ---------- text ---------- */
.mono { font-family: var(--mono); font-size: 11px; }
.muted { color: var(--muted); }
.up { color: #008000; }
.down { color: #c00000; }
.amber { color: #a06000; }