@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Fira+Sans:wght@300;400;500&display=swap');

:root {
  --font-body: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', monospace;
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-hover: rgba(147, 197, 253, 0.3);
  --text-primary: rgba(255, 255, 255, 0.85);
  --text-secondary: rgba(255, 255, 255, 0.45);
  --text-tertiary: rgba(255, 255, 255, 0.25);
  --accent: rgba(255, 255, 255, 0.15);
  --accent-hover: rgba(255, 255, 255, 0.2);
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.15);
  --transition: 200ms ease;
}

/* ── Typography ── */
body, div, span, p, input, button, li, a {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
}

h1, h2, h3, h4, h5, h6,
.font-bold, .font-semibold, .font-medium,
.widget-header, .bookmark-group,
.title-bar, .group\/card .name {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

/* ── Cards — transparent, no lift ── */
.group\/card {
  background: var(--bg-card) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important;
  transition: border-color var(--transition) !important;
}

.group\/card:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-hover) !important;
}

/* ── Service Items ── */
.group\/item {
  transition: background var(--transition) !important;
  border-radius: 4px !important;
}

.group\/item:hover {
  background: rgba(147, 197, 253, 0.1) !important;
}

.group\/item .name {
  font-weight: 400 !important;
  font-size: 0.8rem !important;
  color: var(--text-primary) !important;
}

.group\/item .description {
  font-size: 0.7rem !important;
  color: var(--text-secondary) !important;
  font-weight: 300 !important;
}

/* ── Section Headers ── */
.group\/header {
  margin-bottom: 0.5rem !important;
}

.group\/header .title {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-tertiary) !important;
}

/* ── Search ── */
.search-wrapper {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important;
}

.search-wrapper input {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  font-size: 0.875rem !important;
}

.search-wrapper input:focus {
  border-color: var(--border-hover) !important;
  box-shadow: none !important;
}

/* ── Date/Time Widget ── */
.datetime-widget {
  font-family: var(--font-mono) !important;
  letter-spacing: -0.03em;
  color: var(--text-primary) !important;
}

.datetime-widget .date {
  color: var(--text-secondary) !important;
  font-size: 0.8rem !important;
}

/* ── Resource Widget ── */
.resource-widget .label {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  color: var(--text-tertiary) !important;
}

.resource-widget .value {
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  font-size: 0.8rem !important;
  color: var(--text-primary) !important;
}

/* ── Status Indicators ── */
.status-ok { color: rgba(34, 197, 94, 0.7) !important; }
.status-warning { color: rgba(245, 158, 11, 0.7) !important; }
.status-error { color: rgba(239, 68, 68, 0.7) !important; }

/* ── Icons ── */
.icon-wrapper svg {
  opacity: 0.6;
  transition: opacity var(--transition) !important;
}

.group\/item:hover .icon-wrapper svg {
  opacity: 1;
}

/* ── Bookmarks ── */
.bookmarks .group-title {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-tertiary) !important;
  font-weight: 500 !important;
}

.bookmarks .bookmark-item {
  transition: background var(--transition) !important;
  border-radius: 4px !important;
}

.bookmarks .bookmark-item:hover {
  background: rgba(147, 197, 253, 0.08) !important;
}

/* ── Quick Launch ── */
.quicklaunch-wrapper {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 6px !important;
}

/* ── Weather Widget ── */
.weather-widget {
  font-weight: 300 !important;
  color: var(--text-primary) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ── Glances Widgets ── */
.glances-widget {
  font-family: var(--font-mono) !important;
}

.glances-widget .metric-value {
  font-weight: 400 !important;
  color: var(--text-primary) !important;
}

.glances-widget .metric-label {
  font-size: 0.65rem !important;
  color: var(--text-tertiary) !important;
}

/* ── Remove decorative noise ── */
.group\/card .divide-y > div {
  border-color: var(--border-subtle) !important;
}

/* ── Button minimal ── */
button, .btn {
  transition: opacity var(--transition) !important;
}

button:hover, .btn:hover {
  opacity: 0.7;
}