/*
 * ============================================================
 *  HOMEPAGE — UBUNTU DARK AUBERGINE THEME
 *  Palette: Ubuntu official aubergine + deep space purple
 *  Style:   Glassmorphism cards, gradient orb background,
 *           animated hover borders, Ubuntu Mono numbers
 * ============================================================
 */

/*==================================
  GOOGLE FONTS
  - Poppins:     body text, UI labels
  - Ubuntu Mono: numbers, stats, clock
==================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Ubuntu+Mono:wght@400;700&display=swap');

/*==================================
  DESIGN TOKENS
==================================*/
:root {
  /* Ubuntu Aubergine palette (official brand colours) */
  --ubuntu-dark:        #1a0a2e;  /* deep space (custom, darker than brand) */
  --ubuntu-aubergine:   #2C001E;  /* Ubuntu Dark Aubergine */
  --ubuntu-mid:         #5E2750;  /* Ubuntu Mid Aubergine */
  --ubuntu-light:       #77216F;  /* Ubuntu Light Aubergine */
  --ubuntu-canonical:   #772953;  /* Ubuntu Canonical Aubergine */
  --ubuntu-orange:      #E95420;  /* Ubuntu Orange (warnings/alerts) */

  /* Purple highlight / pastel accent */
  --accent-bright:      #C084FC;  /* violet-400 */
  --accent-glow:        rgba(192, 132, 252, 0.22);
  --accent-card-bg:     rgba(119, 33, 111, 0.16);
  --accent-card-border: rgba(173, 95, 173, 0.35);

  /* Text */
  --text-primary:   #E6D5F5;  /* soft lavender */
  --text-muted:     #A89BC2;  /* muted purple */
  --text-bright:    #F3F0FF;  /* near-white */

  /* Status */
  --status-ok:      #4EC94E;  /* Ubuntu-ish green */
  --status-warn:    #E95420;
  --status-unknown: #A89BC2;

  /* Glassmorphism */
  --glass-blur:   blur(14px);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.45), 0 1px 8px rgba(119, 33, 111, 0.2);
  --glass-shadow-hover: 0 8px 40px rgba(119, 33, 111, 0.4), 0 2px 12px rgba(0, 0, 0, 0.5);

  /* Animated gradient border (hover) */
  --gradient-border: linear-gradient(90deg, #77216F, #C084FC, #5E2750, #C084FC, #77216F);

  /* Spacing */
  --gap:            10px;
  --radius-card:    12px;
  --radius-inner:   10px;
  --border-w:       1.5px;

  /* Fonts */
  --font-ui:     'Poppins', sans-serif;
  --font-mono:   'Ubuntu Mono', monospace;

  /* Layout: 4-column grid, 12 groups total */
  --col-width: calc(25% - (var(--gap) * 3 / 4));
}

/*==================================
  GLOBAL RESET & FONT
==================================*/
* {
  font-family: var(--font-ui) !important;
  box-sizing: border-box;
}

/*==================================
  BACKGROUND — Deep space purple
  Two floating radial-gradient orbs
  give an Ubuntu "cosmic" atmosphere
  without needing an image file.
==================================*/
html {
  background-color: var(--ubuntu-dark) !important;
}

body {
  background-color: var(--ubuntu-dark) !important;
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 20%,  rgba(119, 33, 111, 0.50) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 80%,  rgba(94,  39,  80, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 55% 50%,  rgba(44,   0,  30, 0.30) 0%, transparent 65%);
  min-height: 100vh;
}

/*==================================
  SCROLLBAR — aubergine tint
==================================*/
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(26, 10, 46, 0.6); }
::-webkit-scrollbar-thumb {
  background: var(--ubuntu-light);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-bright); }

/*==================================
  LOGO
==================================*/
.information-widget-logo img {
  width:  68px !important;
  height: 68px !important;
  max-width: none !important;
  max-height: none !important;
  margin-left: 24px;
  filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.4));
}

/*==================================
  GREETING / SERVER NAME
==================================*/
.information-widget-logo + .information-widget-greeting span {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  color: var(--text-bright) !important;
  text-shadow: 0 0 16px rgba(192, 132, 252, 0.5);
}

/* Separator dashes — smaller, muted */
.information-widget-greeting span:has(+ *) {
  color: var(--text-muted) !important;
  font-size: 1rem !important;
}

/*==================================
  CLOCK — Ubuntu Mono, large
==================================*/
.information-widget-datetime time {
  font-family: var(--font-mono) !important;
  color: var(--text-bright) !important;
  letter-spacing: 0.04em;
}

/* Big clock */
.text-4xl .information-widget-datetime time,
.information-widget-datetime.text-4xl time {
  text-shadow: 0 0 20px rgba(192, 132, 252, 0.35);
}

/*==================================
  RESOURCE STATS (CPU/RAM/Disk)
  Monospace for numbers
==================================*/
.information-widget-resources span,
.information-widget-resources div {
  font-family: var(--font-mono) !important;
}

/*==================================
  SEARCH BAR
==================================*/
#searchbox input {
  background: rgba(94, 39, 80, 0.25) !important;
  border: var(--border-w) solid var(--accent-card-border) !important;
  border-radius: 8px !important;
  color: var(--text-bright) !important;
  backdrop-filter: var(--glass-blur) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#searchbox input:focus {
  border-color: var(--accent-bright) !important;
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.18) !important;
  outline: none !important;
}

#searchbox input::placeholder { color: var(--text-muted) !important; }

/*==================================
  WEATHER WIDGET
==================================*/
.information-widget-openweathermap,
.information-widget-weather {
  font-family: var(--font-mono) !important;
}

/*==================================
  INFO BAR CONTAINER
==================================*/
#information-widgets {
  background: rgba(26, 10, 46, 0.55) !important;
  backdrop-filter: blur(8px);
  border-bottom: var(--border-w) solid var(--accent-card-border);
}

/*==================================
  LAYOUT — 4-column grid, 3 rows
  All 12 groups at 25% width →
  auto-wraps into 4 per row.
==================================*/
#layout-groups {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--gap) !important;
  padding: var(--gap) !important;
}

#layout-groups > .services-group {
  flex: 1 1 var(--col-width) !important;
  max-width: var(--col-width) !important;
  min-width: 0 !important;
}

/* Hide any groups beyond the 12th (safety) */
#layout-groups > .services-group:nth-child(n+13) {
  display: none !important;
}

/*==================================
  GROUP HEADERS
  Ubuntu Mono font, left aubergine accent
==================================*/
.services-group-header,
[class*="services-group"] > div:first-child {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  border-left: 3px solid var(--ubuntu-light) !important;
  padding-left: 8px !important;
  margin-bottom: 6px !important;
}

/*==================================
  SERVICE CARDS — Glassmorphism
==================================*/
.service-card {
  position: relative;
  padding: 0;
  margin: 0 0 var(--gap) 0;
  border-radius: var(--radius-card) !important;
  border: var(--border-w) solid var(--accent-card-border) !important;
  background: var(--accent-card-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--glass-shadow) !important;
  overflow: visible !important;
  transition:
    transform      0.25s ease,
    box-shadow     0.25s ease,
    border-color   0.25s ease;
}

/* Service card inner data blocks */
.bg-theme-200\/50,
.flex-1.service-block {
  background-color: rgba(44, 0, 30, 0.3) !important;
  transition: background-color 0.25s ease;
}

/* Hover: lift + glow */
.service-card:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: var(--glass-shadow-hover) !important;
  border-color: transparent !important;
}

.service-card:hover [class*="bg-theme-200/50"],
.service-card:hover .flex-1.service-block {
  background-color: rgba(94, 39, 80, 0.35) !important;
}

/* ── Animated gradient border on hover ────── */
.service-card::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--border-w));
  background: var(--gradient-border);
  background-size: 300% 100%;
  border-radius: var(--radius-card);
  z-index: -2;
  opacity: 0;
  animation: borderSweep 3s linear infinite;
  transition: opacity 0.3s ease;
}

.service-card:hover::before { opacity: 1; }

@keyframes borderSweep {
  0%   { background-position: 0%   center; }
  100% { background-position: 300% center; }
}

/* Card inner background fill (sits between border gradient and content) */
.service-card::after {
  content: '';
  position: absolute;
  inset: var(--border-w);
  background: var(--ubuntu-dark);
  border-radius: var(--radius-inner);
  z-index: -1;
  transition: background 0.25s ease;
}

.service-card:hover::after {
  background: rgba(44, 0, 30, 0.95);
}

/*==================================
  SERVICE CARD TEXT
==================================*/
/* App name */
.service-title {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  color: var(--text-bright) !important;
}

/* Description / subtitle */
.service-description {
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
}

/* Stat labels inside widgets */
.service-card .text-xs,
.service-card .text-sm {
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
}

/* Stat values */
.service-card .font-bold,
.service-card .text-lg,
.service-card .text-xl {
  font-family: var(--font-mono) !important;
  color: var(--text-bright) !important;
}

/*==================================
  STATUS DOTS — Ubuntu green
==================================*/
/* Online / healthy */
.w-3.h-3.rounded-full[class*="green"],
.status-dot-online,
[class*="status"][class*="green"] {
  background-color: var(--status-ok) !important;
  box-shadow: 0 0 6px var(--status-ok) !important;
}

/* Warning / unreachable */
.w-3.h-3.rounded-full[class*="orange"],
.w-3.h-3.rounded-full[class*="yellow"],
[class*="status"][class*="orange"] {
  background-color: var(--ubuntu-orange) !important;
  box-shadow: 0 0 6px var(--ubuntu-orange) !important;
}

/* Error */
.w-3.h-3.rounded-full[class*="red"],
[class*="status"][class*="red"] {
  background-color: #ef4444 !important;
  box-shadow: 0 0 6px #ef4444 !important;
}

/*==================================
  BOOKMARK COLUMNS
==================================*/
.flex.flex-col.mt-3.bookmark-list {
  border: var(--border-w) solid var(--accent-card-border) !important;
  border-radius: var(--radius-card) !important;
  background: var(--accent-card-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  padding: 10px 8px 4px 8px !important;
  margin-bottom: var(--gap) !important;
}

/* Bookmark icon chips */
.bookmark-icon {
  background-color: rgba(44, 0, 30, 0.7) !important;
  border: var(--border-w) solid rgba(173, 95, 173, 0.25) !important;
  border-radius: 6px !important;
}

/* Bookmark link text */
.bookmark-name {
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
  transition: color 0.2s ease;
}

a:hover .bookmark-name { color: var(--accent-bright) !important; }

/*==================================
  HIDE: bookmark group titles (_docs etc.)
  HIDE: service titles for groups that
        start with _ (hidden anchor groups)
==================================*/
[data-name^="_"] .service-title,
.bookmark-group .bookmark-group-name {
  display: none !important;
}

/*==================================
  TABS (if ever added)
==================================*/
button[id$='-tab'] {
  border: var(--border-w) solid rgba(119, 33, 111, 0.4) !important;
  border-radius: 6px !important;
  backdrop-filter: blur(4px);
  transition: border-color 0.25s ease, background 0.25s ease;
}

button[id$='-tab']:hover,
button[id$='-tab'][aria-selected="true"] {
  border-color: var(--accent-bright) !important;
  background: rgba(119, 33, 111, 0.2) !important;
}

/*==================================
  FOOTER — hide it
==================================*/
#footer { display: none !important; }

/*==================================
  PROGRESS BARS (resource widgets)
  Override default to aubergine
==================================*/
progress,
[role="progressbar"],
.progress-bar-fill {
  accent-color: var(--ubuntu-light) !important;
}

/* Tailwind-generated meter/progress elements */
[class*="bg-emerald"],
[class*="bg-blue"],
[class*="bg-sky"] {
  background-color: var(--ubuntu-light) !important;
}

/* High usage warning → Ubuntu orange */
[class*="bg-red"],
[class*="bg-orange"] {
  background-color: var(--ubuntu-orange) !important;
}