/* ============================================================
   Ubuntu Desktop Emulator — base layer
   Yaru design tokens, fonts, reset, shared controls
   ============================================================ */

@font-face {
  font-family: 'Ubuntu';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/Ubuntu-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/Ubuntu-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/Ubuntu-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/UbuntuMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/UbuntuMono-700.woff2') format('woff2');
}

:root {
  /* Yaru palette */
  --orange: #E95420;
  --aubergine-dark: #2C001E;
  --aubergine-mid: #77216F;
  --aubergine: #772953;
  --purple-light: #AEA79F;
  --warm-gray: #AEA79F;
  --cool-gray: #333333;
  --text-gray: #111111;
  --blue: #19B6EE;

  /* theme-able */
  --accent: #E95420;
  --accent-soft: #E9542040;
  --accent-softer: #E9542022;
  --accent-fg: #ffffff;

  --font: 'Ubuntu', -apple-system, 'Segoe UI', Cantarell, sans-serif;
  --font-mono: 'Ubuntu Mono', ui-monospace, Menlo, monospace;

  --topbar-h: 28px;
  --dock-w: 68px;
  --topbar-bg: rgba(21, 21, 21, 0.88);
  --topbar-fg: #f2f2f2;
  --dock-bg: rgba(23, 23, 23, 0.82);

  /* light window theme (default) */
  --win-bg: #fafafa;
  --win-header: #ececec;
  --win-header-unfocused: #f4f4f4;
  --win-fg: #1b1b1b;
  --win-fg-dim: rgba(0, 0, 0, 0.56);
  --win-border: rgba(0, 0, 0, 0.22);
  --win-content-bg: #ffffff;
  --win-sidebar: #f2f1f0;
  --view-bg: #ffffff;
  --hover: rgba(0, 0, 0, 0.07);
  --active: rgba(0, 0, 0, 0.12);
  --card: #ffffff;
  --card-border: rgba(0, 0, 0, 0.12);
  --entry-bg: #ffffff;
  --entry-border: rgba(0, 0, 0, 0.22);
  --btn-bg: #fafafa;
  --btn-border: rgba(0, 0, 0, 0.2);
  --menu-bg: rgba(247, 246, 245, 0.985);
  --menu-fg: #1b1b1b;
  --menu-border: rgba(0, 0, 0, 0.18);
  --menu-hover: rgba(0, 0, 0, 0.07);
  --link: #1a6fb5;
  --selection: var(--accent-soft);
  --shadow-1: 0 1px 3px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.14);
  --shadow-win: 0 3px 9px rgba(0,0,0,.28), 0 14px 42px rgba(0,0,0,.34);
  --shadow-win-unfocused: 0 2px 6px rgba(0,0,0,.16), 0 8px 24px rgba(0,0,0,.18);
  --trough: rgba(0,0,0,.14);
}

body.dark {
  --win-bg: #333333;
  --win-header: #3d3d3d;
  --win-header-unfocused: #383838;
  --win-fg: #f0f0f0;
  --win-fg-dim: rgba(255, 255, 255, 0.6);
  --win-border: rgba(0, 0, 0, 0.55);
  --win-content-bg: #2b2b2b;
  --win-sidebar: #303030;
  --view-bg: #262626;
  --hover: rgba(255, 255, 255, 0.08);
  --active: rgba(255, 255, 255, 0.14);
  --card: #3a3a3a;
  --card-border: rgba(255, 255, 255, 0.1);
  --entry-bg: #242424;
  --entry-border: rgba(255, 255, 255, 0.2);
  --btn-bg: #4a4a4a;
  --btn-border: rgba(0, 0, 0, 0.4);
  --menu-bg: rgba(43, 43, 43, 0.985);
  --menu-fg: #f0f0f0;
  --menu-border: rgba(0, 0, 0, 0.6);
  --menu-hover: rgba(255, 255, 255, 0.09);
  --link: #5eb4f0;
  --trough: rgba(255,255,255,.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--win-fg);
  background: #000;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}

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

button { font-family: var(--font); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(127,127,127,.45);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(127,127,127,.7); background-clip: content-box; border: 2px solid transparent; }
body.dark ::-webkit-scrollbar-thumb { background: rgba(200,200,200,.3); background-clip: content-box; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- shared controls ---------- */

.u-btn {
  font-size: 14px;
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--win-fg);
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
  transition: background .12s ease, box-shadow .12s ease;
}
.u-btn:hover { background: var(--hover); }
.u-btn:active { background: var(--active); }
.u-btn.suggested {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-fg);
  font-weight: 500;
}
.u-btn.suggested:hover { filter: brightness(1.08); }
.u-btn.destructive {
  background: #e01b24;
  border-color: transparent;
  color: #fff;
  font-weight: 500;
}
.u-btn.destructive:hover { background: #c01c28; }
.u-btn.flat { background: transparent; border-color: transparent; box-shadow: none; }
.u-btn.flat:hover { background: var(--hover); }
.u-btn:disabled { opacity: .45; pointer-events: none; }

.u-entry {
  font-family: var(--font);
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--entry-border);
  background: var(--entry-bg);
  color: var(--win-fg);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.u-entry:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* switch */
.u-switch {
  position: relative; display: inline-block;
  width: 44px; height: 24px; border-radius: 999px;
  background: var(--trough);
  cursor: pointer; flex: none;
  transition: background .18s ease;
}
.u-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .18s cubic-bezier(.3,1.4,.5,1);
}
.u-switch.on { background: var(--accent); }
.u-switch.on::after { transform: translateX(20px); }
.u-switch.disabled { opacity: .45; pointer-events: none; }

/* slider */
.u-slider {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--trough) var(--fill, 50%));
  outline: none; cursor: pointer;
}
.u-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.u-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* generic icon */
.u-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.u-icon svg { display: block; }
.spin { animation: u-spin 1.1s linear infinite; }
@keyframes u-spin { to { transform: rotate(360deg); } }

/* ---------- context menu ---------- */
.ctx-menu {
  position: fixed; z-index: 9000;
  min-width: 190px; max-width: 320px;
  background: var(--menu-bg);
  color: var(--menu-fg);
  border: 1px solid var(--menu-border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  padding: 6px;
  animation: ctx-in .09s ease;
  backdrop-filter: blur(18px);
  font-size: 14px;
}
@keyframes ctx-in { from { opacity: 0; transform: scale(.96); } }
.ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-radius: 6px;
  cursor: pointer; white-space: nowrap;
}
.ctx-item:hover { background: var(--menu-hover); }
.ctx-item.disabled { opacity: .45; pointer-events: none; }
.ctx-item .ctx-check { width: 16px; text-align: center; flex: none; }
.ctx-item .ctx-sub { margin-left: auto; opacity: .55; font-size: 12px; }
.ctx-sep { height: 1px; background: var(--card-border); margin: 5px 8px; }

/* ---------- tooltip ---------- */
.u-tooltip {
  position: fixed; z-index: 9500;
  background: rgba(30,30,30,.94);
  color: #f2f2f2;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  pointer-events: none;
  animation: tip-in .12s ease;
  max-width: 260px;
  text-align: center;
}
@keyframes tip-in { from { opacity: 0; transform: translateY(2px); } }

/* ---------- modal dialog ---------- */
.dialog-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  animation: dlg-fade .12s ease;
}
@keyframes dlg-fade { from { opacity: 0; } }
.dialog {
  min-width: 380px; max-width: 520px;
  background: var(--menu-bg);
  color: var(--menu-fg);
  border-radius: 14px;
  box-shadow: 0 10px 44px rgba(0,0,0,.5), 0 0 0 1px var(--menu-border);
  overflow: hidden;
  animation: dlg-in .14s cubic-bezier(.2,1.2,.4,1);
  backdrop-filter: blur(20px);
}
@keyframes dlg-in { from { opacity: 0; transform: scale(.92) translateY(8px); } }
.dialog-body { padding: 22px 24px 16px; text-align: center; }
.dialog-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.dialog-text { font-size: 14px; color: var(--win-fg-dim); line-height: 1.45; }
body:not(.dark) .dialog-text { color: rgba(0,0,0,.62); }
.dialog-text b { color: var(--menu-fg); }
.dialog-buttons {
  display: flex; gap: 8px; padding: 0 12px 12px;
}
.dialog-buttons .u-btn { flex: 1; padding: 8px 12px; }
.dialog .dialog-entry { width: 100%; margin-top: 12px; text-align: left; }

/* in-window modal clamp */
.window .dialog-overlay { position: absolute; border-radius: 0 0 12px 12px; }

/* list rows used across apps */
.u-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 8px;
}
.u-row:hover { background: var(--hover); }
.u-row .grow { flex: 1; min-width: 0; }
.u-row .title { font-weight: 500; font-size: 14px; }
.u-row .sub { font-size: 12.5px; color: var(--win-fg-dim); margin-top: 1px; }

.hidden { display: none !important; }