/* ============ Ubuntu Desktop Web — base tokens & widgets (Yaru) ============ */
@font-face {
  font-family: 'Ubuntu';
  src: url('../assets/fonts/Ubuntu-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('../assets/fonts/Ubuntu-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('../assets/fonts/Ubuntu-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu Mono';
  src: url('../assets/fonts/UbuntuMono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu Mono';
  src: url('../assets/fonts/UbuntuMono-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --accent: #E95420;
  --accent-hover: #ed6a3c;
  --accent-fg: #ffffff;

  --topbar-h: 32px;
  --dock-w: 74px;
  --dock-icon: 48px;

  --radius-win: 12px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-win: 0 4px 18px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.55);
  --shadow-win-active: 0 14px 46px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.65);
  --shadow-menu: 0 6px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.45);
  --shadow-popover: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.4);

  --ease-out: cubic-bezier(.25,.46,.45,.94);
  --ease-over: cubic-bezier(.2,.8,.2,1);

  --font: 'Ubuntu', 'Ubuntu Sans', system-ui, sans-serif;
  --mono: 'Ubuntu Mono', 'Ubuntu Sans Mono', monospace;
}

/* Light (default) theme surfaces */
body {
  --window-bg: #fafafa;
  --window-bg-alt: #f3f3f3;
  --sidebar-bg: #ebebeb;
  --headerbar-bg: #ffffff;
  --headerbar-dim: rgba(246,245,244,.98);
  --headerbar-border: rgba(0,0,0,.12);
  --fg: rgba(0,0,0,.86);
  --fg-dim: rgba(0,0,0,.55);
  --fg-faint: rgba(0,0,0,.38);
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,.09);
  --list-row-hover: rgba(0,0,0,.05);
  --list-row-active: rgba(0,0,0,.1);
  --entry-bg: rgba(0,0,0,.06);
  --entry-focus: var(--accent);
  --menu-bg: #ffffff;
  --menu-fg: rgba(0,0,0,.86);
  --scrollbar-thumb: rgba(0,0,0,.35);
  --separator: rgba(0,0,0,.1);
  --dialog-bg: #fafafa;
  --shade: rgba(0,0,0,.32);
  --btn-bg: rgba(0,0,0,.07);
  --btn-hover: rgba(0,0,0,.12);
  --btn-border: rgba(0,0,0,.12);
  --btn-flat-hover: rgba(0,0,0,.07);
  --toast-bg: #111;
  --toast-fg: #fff;
}
body.theme-dark {
  --window-bg: #242424;
  --window-bg-alt: #2e2e2e;
  --sidebar-bg: #303030;
  --headerbar-bg: #303030;
  --headerbar-dim: rgba(48,48,48,.96);
  --headerbar-border: rgba(255,255,255,.09);
  --fg: #ffffff;
  --fg-dim: rgba(255,255,255,.62);
  --fg-faint: rgba(255,255,255,.4);
  --card-bg: #363636;
  --card-border: rgba(255,255,255,.08);
  --list-row-hover: rgba(255,255,255,.06);
  --list-row-active: rgba(255,255,255,.12);
  --entry-bg: rgba(255,255,255,.08);
  --entry-focus: var(--accent);
  --menu-bg: #383838;
  --menu-fg: #ffffff;
  --scrollbar-thumb: rgba(255,255,255,.35);
  --separator: rgba(255,255,255,.09);
  --dialog-bg: #363636;
  --shade: rgba(0,0,0,.5);
  --btn-bg: rgba(255,255,255,.1);
  --btn-hover: rgba(255,255,255,.16);
  --btn-border: rgba(255,255,255,.12);
  --btn-flat-hover: rgba(255,255,255,.08);
  --toast-bg: #383838;
  --toast-fg: #fff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  color: var(--fg);
  background: #000;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; }
input, textarea { user-select: text; }

/* ---- Systemic form-control reset ----
   Native <button> elements must never pick up the UA 'buttonface' background:
   on machines that resolve a light color scheme that paints white chips under
   the white shell text of the top bar and dock (unreadable). Every button is
   transparent + borderless by default; component classes provide their own
   backgrounds. color-scheme is pinned per theme for selects/spinners/scrollbars. */
button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
body.theme-dark { color-scheme: dark; }
body:not(.theme-dark) { color-scheme: light; }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }

/* ---------- scrollbars (GNOME overlay style) ---------- */
.scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.scroll:hover { scrollbar-color: var(--scrollbar-thumb) transparent; }
.scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
}
.scroll:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); background-clip: content-box; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 4px 16px; border-radius: 999px;
  background: var(--btn-bg); border: 1px solid var(--btn-border);
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .12s var(--ease-out), box-shadow .12s;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { background: var(--list-row-active); }
.btn.suggested { background: var(--accent); border-color: transparent; color: #fff; font-weight: 500; }
.btn.suggested:hover { background: var(--accent-hover); }
.btn.destructive { background: #e01b24; border-color: transparent; color: #fff; }
.btn.destructive:hover { background: #f13943; }
.btn.pill { border-radius: 999px; }
.btn.small { min-height: 28px; padding: 2px 12px; font-size: 13.5px; }
.btn svg { flex: none; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-flat, .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; border: none;
  background: transparent; color: var(--fg); cursor: pointer;
  transition: background .12s;
}
.icon-btn.small { width: 28px; height: 28px; }
.btn-flat:hover, .icon-btn:hover { background: var(--btn-flat-hover); }
.btn-flat:active, .icon-btn:active { background: var(--list-row-active); }
.btn-flat.circular, .icon-btn.circular { border-radius: 50%; }
.btn-flat[disabled], .icon-btn[disabled] { opacity: .35; pointer-events: none; }

/* ---------- GTK-like switch ---------- */
.switch {
  position: relative; width: 46px; height: 26px; border-radius: 999px;
  background: var(--entry-bg); border: 1px solid var(--btn-border);
  cursor: pointer; transition: background .18s var(--ease-out), border-color .18s; flex: none;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--fg); opacity: .75;
  transition: left .18s var(--ease-over), background .18s, opacity .18s;
}
.switch.on { background: var(--accent); border-color: transparent; }
.switch.on::after { left: 22px; background: #fff; opacity: 1; }

/* ---------- slider ---------- */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0;
}
.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 4px;
  background: linear-gradient(to right, var(--slider-fill-color, #fff) 0 var(--fill, 50%), var(--track-color, var(--entry-bg)) var(--fill, 50%) 100%);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px;
  border-radius: 50%; background: #fff; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.5);
  transition: transform .1s;
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.slider::-moz-range-track { height: 6px; border-radius: 4px; background: var(--track-color, var(--entry-bg)); }
.slider::-moz-range-progress { height: 6px; border-radius: 4px; background: var(--slider-fill-color, #fff); }
.slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* ---------- entry ---------- */
.entry {
  min-height: 34px; padding: 4px 12px; border-radius: 8px;
  background: var(--entry-bg); border: 1px solid transparent; color: var(--fg);
  caret-color: var(--accent);
}
.entry:focus { border-color: var(--entry-focus); background: var(--card-bg); box-shadow: 0 0 0 1px var(--entry-focus); }
.entry::placeholder { color: var(--fg-faint); }

/* ---------- popover / menu ---------- */
.menu {
  position: absolute; z-index: 5000; min-width: 200px; padding: 8px 0;
  background: var(--menu-bg); color: var(--menu-fg);
  border-radius: 14px; box-shadow: var(--shadow-menu);
  animation: menu-in .14s var(--ease-out);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 16px; min-height: 34px;
  cursor: pointer; font-size: 14.5px; border-radius: 6px; margin: 0 6px;
}
.menu-item:hover { background: var(--list-row-hover); }
.menu-item.disabled { opacity: .4; pointer-events: none; }
.menu-item .shortcut { margin-left: auto; color: var(--fg-faint); font-size: 13px; }
.menu-sep { height: 1px; margin: 6px 12px; background: var(--separator); }
.menu-item .check { width: 16px; display: inline-flex; justify-content: center; }

/* ---------- tooltip ---------- */
.tooltip {
  position: fixed; z-index: 9000; pointer-events: none;
  background: #111; color: #fff; padding: 5px 10px; border-radius: 7px;
  font-size: 13px; box-shadow: 0 3px 10px rgba(0,0,0,.5);
  animation: tooltip-in .12s var(--ease-out);
}
@keyframes tooltip-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 9500; background: var(--toast-bg); color: var(--toast-fg);
  padding: 9px 18px; border-radius: 999px; font-size: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.5); animation: toast-in .22s var(--ease-over);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast.leaving { transition: opacity .25s, transform .25s; opacity: 0; transform: translate(-50%, 10px); }

/* ---------- modal dialog (per window or system) ---------- */
.modal-layer {
  position: absolute; inset: 0; z-index: 300; display: flex;
  align-items: center; justify-content: center; background: var(--shade);
  border-radius: inherit; animation: fade-in .15s var(--ease-out);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.dialog {
  min-width: 340px; max-width: 460px; background: var(--dialog-bg); color: var(--fg);
  border-radius: 16px; box-shadow: var(--shadow-popover);
  padding: 22px 24px 18px; text-align: center;
  animation: dialog-in .18s var(--ease-over);
}
@keyframes dialog-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.dialog h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.dialog p { margin: 0 0 18px; color: var(--fg-dim); font-size: 14.5px; line-height: 1.45; }
.dialog .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- symbolic icon helper ---------- */
.icon { display: inline-flex; flex: none; }
.icon svg { display: block; }

/* ---------- generic list rows ---------- */
.list-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 8px; cursor: default; }
.list-row.hoverable:hover { background: var(--list-row-hover); }
.list-row.selected { background: color-mix(in srgb, var(--accent) 26%, transparent); }

/* adw-style preferences group */
.pref-group { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; }
.pref-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 48px; }
.pref-row + .pref-row { border-top: 1px solid var(--separator); }
.pref-row .grow { flex: 1; min-width: 0; }
.pref-row .title { font-weight: 500; }
.pref-row .subtitle { color: var(--fg-dim); font-size: 13px; margin-top: 1px; }

/* selection checkbox style */
.check-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--fg-faint); flex: none; display:inline-flex; align-items:center; justify-content:center; }
.check-dot.on { background: var(--accent); border-color: var(--accent); }

/* ---------- animations util ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}