/* ── Homepage Dashboard — Material 3 + Catppuccin Macchiato ── */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

:root {
  --ctp-rosewater: #f4dbd6;
  --ctp-flamingo: #f0c6c6;
  --ctp-pink: #f5bde6;
  --ctp-mauve: #c6a0f6;
  --ctp-red: #ed8796;
  --ctp-maroon: #ee99a0;
  --ctp-peach: #f5a97f;
  --ctp-yellow: #eed49f;
  --ctp-green: #a6da95;
  --ctp-teal: #8bd5ca;
  --ctp-sky: #91d7e3;
  --ctp-sapphire: #7dc4e4;
  --ctp-blue: #8aadf4;
  --ctp-lavender: #b7bdf8;
  --ctp-text: #cad3f5;
  --ctp-subtext1: #b8c0e0;
  --ctp-subtext0: #a5adcb;
  --ctp-overlay2: #939ab7;
  --ctp-overlay1: #8087a2;
  --ctp-overlay0: #6e738d;
  --ctp-surface2: #5b6078;
  --ctp-surface1: #494d64;
  --ctp-surface0: #363a4f;
  --ctp-base: #24273a;
  --ctp-mantle: #1e2030;
  --ctp-crust: #181926;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* ── Base ── */
body {
  background-color: var(--ctp-base) !important;
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  color: var(--ctp-text) !important;
}

/* ── Service group containers — M3 section cards ── */
.service-list {
  background: color-mix(in srgb, var(--ctp-mantle) 70%, var(--ctp-blue) 5%) !important;
  border: 1px solid color-mix(in srgb, var(--ctp-surface0) 50%, var(--ctp-blue) 8%) !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px !important;
  backdrop-filter: blur(16px) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.10),
    0 4px 12px rgba(0,0,0,0.06) !important;
}

/* ── Service cards — flat inside the group ── */
.service {
  background: color-mix(in srgb, var(--ctp-surface0) 40%, var(--ctp-blue) 6%) !important;
  border: 1px solid color-mix(in srgb, var(--ctp-surface1) 35%, var(--ctp-blue) 8%) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  padding: 14px 16px !important;
}

.service:hover {
  background: color-mix(in srgb, var(--ctp-surface0) 35%, var(--ctp-blue) 12%) !important;
  border-color: color-mix(in srgb, var(--ctp-surface1) 30%, var(--ctp-blue) 16%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  transform: translateY(-1px) !important;
}

.service-title {
  color: var(--ctp-text) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}

.service-description {
  color: var(--ctp-subtext0) !important;
  font-size: 0.8rem !important;
}

/* ── Group headers ── */
.group-title {
  color: var(--ctp-lavender) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 10px !important;
}

/* ── Bookmarks ── */
.bookmark-title {
  color: var(--ctp-subtext1) !important;
  font-size: 0.88rem !important;
  transition: color 0.15s ease !important;
}

.bookmark-title:hover {
  color: var(--ctp-blue) !important;
}

.bookmark-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--radius-xs) !important;
}

/* ── Widget containers — top row ── */
.widget {
  background: color-mix(in srgb, var(--ctp-mantle) 70%, var(--ctp-blue) 5%) !important;
  border: 1px solid color-mix(in srgb, var(--ctp-surface0) 50%, var(--ctp-blue) 8%) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(16px) !important;
  padding: 14px 18px !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.10),
    0 4px 12px rgba(0,0,0,0.06) !important;
}

/* ── Greeting ── */
.greeting {
  color: var(--ctp-text) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── Date/Time ── */
.datetime {
  color: var(--ctp-subtext1) !important;
  font-size: 1.1rem !important;
}

/* ── Search bar ── */
.search input {
  background-color: color-mix(in srgb, var(--ctp-surface0) 70%, var(--ctp-blue) 4%) !important;
  border: 1px solid var(--ctp-surface1) !important;
  color: var(--ctp-text) !important;
  border-radius: var(--radius-xl) !important;
  font-size: 0.95rem !important;
  font-family: 'Lexend', sans-serif !important;
  padding: 12px 18px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.search input::placeholder {
  color: var(--ctp-overlay0) !important;
}

.search input:focus {
  border-color: var(--ctp-blue) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ctp-blue) 18%, transparent) !important;
}

/* ── Resources widget ── */
.resources-label,
.resources-value {
  color: var(--ctp-subtext1) !important;
  font-size: 0.85rem !important;
}

/* ── Status dots ── */
.status-dot { background-color: var(--ctp-green) !important; }
.status-dot.warning { background-color: var(--ctp-yellow) !important; }
.status-dot.error { background-color: var(--ctp-red) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ctp-surface2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ctp-overlay0); }

/* ── Selection ── */
::selection {
  background-color: color-mix(in srgb, var(--ctp-blue) 25%, transparent);
  color: var(--ctp-text);
}