/* ===== Ubuntu Desktop Emulation — base tokens & primitives ===== */
@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:#f06635;
  --accent-active:#d34c1d;
  --accent-fg:#ffffff;
  --ubu-orange:#E95420;
  --aubergine:#2C001E;
  --aubergine-mid:#772953;

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

  --topbar-h:30px;
  --radius-win:12px;
  --radius-card:12px;
}

body[data-theme="light"] {
  --win-bg:#fafafa;
  --view-bg:#ffffff;
  --hb-bg:#f7f7f7;
  --sidebar-bg:#ebebeb;
  --card-bg:#ffffff;
  --fg:#241f25;
  --fg-dim:#6e6a70;
  --border:rgba(0,0,0,.12);
  --border-strong:rgba(0,0,0,.18);
  --btn-bg:#ffffff;
  --btn-hover:#f2f1f2;
  --btn-active:#e6e4e6;
  --entry-bg:#ffffff;
  --hover-row:rgba(0,0,0,.06);
  --selected-row:rgba(0,0,0,.09);
  --menu-bg:#ffffff;
  --shadow-win:0 10px 34px rgba(0,0,0,.36), 0 2px 8px rgba(0,0,0,.22);
  --shadow-win-unfocused:0 5px 16px rgba(0,0,0,.20);
  --shadow-pop:0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.08);
  --scroll-thumb:rgba(0,0,0,.24);
  --link:#0073e5;
  --danger:#e01b24;
  --success:#1b8553;
  --warning:#cd9409;
}
body[data-theme="dark"] {
  --win-bg:#242424;
  --view-bg:#1e1e1e;
  --hb-bg:#2f2f2f;
  --sidebar-bg:#282828;
  --card-bg:#333333;
  --fg:#ffffff;
  --fg-dim:#a8a4ab;
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.18);
  --btn-bg:#3a3a3a;
  --btn-hover:#454545;
  --btn-active:#505050;
  --entry-bg:#333333;
  --hover-row:rgba(255,255,255,.07);
  --selected-row:rgba(255,255,255,.12);
  --menu-bg:#333333;
  --shadow-win:0 12px 38px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --shadow-win-unfocused:0 6px 18px rgba(0,0,0,.42);
  --shadow-pop:0 12px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.09);
  --scroll-thumb:rgba(255,255,255,.26);
  --link:#78aeed;
  --danger:#ff5257;
  --success:#33d17a;
  --warning:#f8e45c;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body {
  font-family:var(--font-ui);
  font-size:14px;
  color:var(--fg);
  background:#000;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  cursor:default;
}
img { -webkit-user-drag:none; }
button { font-family:inherit; color:inherit; }
input, textarea, select { font-family:inherit; color:inherit; }
::selection { background:color-mix(in srgb, var(--accent) 35%, transparent); }

#screen { position:fixed; inset:0; overflow:hidden; }
#wallpaper { position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }

/* ---------- scrollbars (GNOME overlay style) ---------- */
.scroll { overflow-y:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; }
.scroll:hover, .scroll:focus-within { scrollbar-color:var(--scroll-thumb) transparent; }
.scroll::-webkit-scrollbar { width:8px; height:8px; }
.scroll::-webkit-scrollbar-thumb { background:transparent; border-radius:4px; }
.scroll:hover::-webkit-scrollbar-thumb { background:var(--scroll-thumb); }
.scroll::-webkit-scrollbar-track { background:transparent; }

/* ---------- GTK-ish buttons ---------- */
.gbtn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:5px 14px; min-height:30px;
  background:var(--btn-bg);
  border:1px solid var(--border-strong);
  border-radius:8px;
  font-size:13.5px; font-weight:400;
  color:var(--fg);
  box-shadow:0 1px 1px rgba(0,0,0,.06);
  transition:background .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.gbtn:hover { background:var(--btn-hover); }
.gbtn:active { background:var(--btn-active); }
.gbtn.suggested { background:var(--accent); border-color:transparent; color:var(--accent-fg); font-weight:500; }
.gbtn.suggested:hover { background:var(--accent-hover); }
.gbtn.suggested:active { background:var(--accent-active); }
.gbtn.destructive { background:var(--danger); border-color:transparent; color:#fff; font-weight:500; }
.gbtn.destructive:hover { filter:brightness(1.1); }
.gbtn.flat { background:transparent; border-color:transparent; box-shadow:none; }
.gbtn.flat:hover { background:var(--hover-row); }
.gbtn:disabled { opacity:.45; pointer-events:none; }
.gbtn.circular { width:32px; min-width:32px; padding:0; border-radius:999px; }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; border:none; background:transparent; color:var(--fg);
  transition:background .12s ease;
}
.icon-btn:hover { background:var(--hover-row); }
.icon-btn:active { background:var(--selected-row); }
.icon-btn:disabled { opacity:.4; pointer-events:none; }
.icon-btn.sym svg { width:16px; height:16px; fill:currentColor; }

/* ---------- entries ---------- */
.gentry {
  display:flex; align-items:center; gap:6px;
  background:var(--entry-bg);
  border:1px solid var(--border-strong);
  border-radius:8px; padding:0 10px; height:32px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.gentry:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.gentry input {
  flex:1; border:none; outline:none; background:transparent;
  font-size:13.5px; min-width:0; user-select:text;
}
.gentry input::placeholder { color:var(--fg-dim); }
.gentry .sym { width:15px; height:15px; fill:var(--fg-dim); flex:none; }

select.gselect {
  appearance:none; -webkit-appearance:none;
  background:var(--btn-bg); border:1px solid var(--border-strong); border-radius:8px;
  height:32px; padding:0 30px 0 12px; font-size:13.5px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23888888' d='M8 11.5 2.8 6.3l1-1L8 9.4l4.2-4.1 1 1z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}

/* ---------- switches ---------- */
.gswitch { position:relative; width:46px; height:24px; flex:none; cursor:pointer; }
.gswitch input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.gswitch .track {
  position:absolute; inset:0; border-radius:99px;
  background:color-mix(in srgb, var(--fg) 22%, transparent);
  border:1px solid var(--border-strong);
  transition:background .18s ease, border-color .18s ease;
}
.gswitch .knob {
  position:absolute; top:50%; left:3px; width:20px; height:20px; border-radius:99px;
  transform:translateY(-50%);
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:left .18s cubic-bezier(.4,0,.2,1);
}
.gswitch input:checked ~ .track { background:var(--accent); border-color:transparent; }
.gswitch input:checked ~ .knob { left:23px; }

/* ---------- checkbox / radio rows ---------- */
.gcheck { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13.5px; }
.gcheck .box {
  width:16px; height:16px; border-radius:5px; border:1.5px solid var(--border-strong);
  background:var(--entry-bg); display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:background .12s ease;
}
.gcheck input { display:none; }
.gcheck input:checked + .box { background:var(--accent); border-color:var(--accent); }
.gcheck input:checked + .box::after {
  content:''; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
}

/* ---------- sliders ---------- */
.gslider { -webkit-appearance:none; appearance:none; height:4px; border-radius:2px; outline:none;
  background:linear-gradient(to right, var(--accent) var(--fill,50%), color-mix(in srgb,var(--fg) 22%, transparent) var(--fill,50%)); }
.gslider::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px; border-radius:99px; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.08); cursor:pointer;
  transition:transform .1s ease;
}
.gslider::-webkit-slider-thumb:hover { transform:scale(1.12); }
.gslider::-moz-range-thumb { width:18px; height:18px; border-radius:99px; background:#fff; border:none; box-shadow:0 1px 4px rgba(0,0,0,.4); }

/* ---------- progress bars ---------- */
.gprogress { height:6px; border-radius:3px; background:color-mix(in srgb, var(--fg) 15%, transparent); overflow:hidden; }
.gprogress > div { height:100%; background:var(--accent); border-radius:3px; transition:width .25s ease; }

/* ---------- spinners ---------- */
.gspinner { width:18px; height:18px; border-radius:99px; border:2.5px solid color-mix(in srgb, var(--fg) 25%, transparent); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- menus / popovers ---------- */
.menu {
  position:fixed; z-index:7500; min-width:180px;
  background:var(--menu-bg); border-radius:12px; box-shadow:var(--shadow-pop);
  padding:6px; animation:menu-in .12s ease;
  font-size:13.5px;
}
@keyframes menu-in { from { opacity:0; transform:translateY(-4px) scale(.98); } }
.menu-item {
  display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:7px; cursor:pointer;
  white-space:nowrap;
}
.menu-item:hover { background:var(--hover-row); }
.menu-item.danger { color:var(--danger); }
.menu-item.disabled { opacity:.4; pointer-events:none; }
.menu-item .sym { width:15px; height:15px; fill:currentColor; opacity:.85; flex:none; }
.menu-item .accel { margin-left:auto; padding-left:24px; color:var(--fg-dim); font-size:12px; }
.menu-sep { height:1px; background:var(--border); margin:5px 8px; }
.menu-check { width:15px; flex:none; display:inline-flex; }
.menu-check svg { width:13px; height:13px; fill:currentColor; }

/* ---------- tooltip ---------- */
.tooltip {
  position:fixed; z-index:8000; pointer-events:none;
  background:rgba(0,0,0,.86); color:#fff; font-size:12.5px; font-weight:500;
  padding:5px 10px; border-radius:8px; white-space:nowrap;
  animation:tooltip-in .14s ease .25s backwards;
}
@keyframes tooltip-in { from { opacity:0; } }

/* ---------- symbolic icon default sizing helper ---------- */
svg.sym { display:block; }

/* ---------- generic empty state ---------- */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--fg-dim); text-align:center; padding:40px 20px; height:100%;
}
.empty-state .big { font-size:17px; font-weight:500; color:var(--fg); }
.empty-state svg { width:52px; height:52px; fill:var(--fg-dim); opacity:.65; }

/* ---------- reduced motion ---------- */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration:.001s !important; transition-duration:.001s !important;
}

/* ---------- selection rectangle for desktop? n/a ---------- */
.hidden { display:none !important; }

/* app roots that take programmatic focus should not show focus rings */
.naut:focus, .editor-root:focus, .term-root:focus, .calc-root:focus,
.browser-root:focus, .soft-root:focus, .clocks-root:focus, .eog-root:focus,
.sysmon-root:focus, .settings-root:focus, .welcome-root:focus { outline:none; }