@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/* =========================================================
   1. BASE STRUCTURE & TYPOGRAPHY
   ========================================================= */
/* Only make the absolute base white */
html, body {
  background-color: #ffffff !important;
  color: #000000 !important;
  background-image: none !important;
}

/* Make wrappers transparent so the grid underneath is visible */
#__next, main, #inner_wrapper, .min-h-screen, .container {
  background-color: transparent !important;
}

/* =========================================================
   2. SUBTLE SWISS GRID BACKGROUND
   ========================================================= */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Swiss grid via SVG repeating pattern - thin lines */
  background-image: 
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 24px 24px; /* adjust density here */
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Thicker anchor lines for the structural grid */
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 96px 96px;
}

/* Ensure content stays above the grid */
#__next, main, .min-h-screen, .container {
  position: relative;
  z-index: 1;
}

/* Strip all default tailwind theme backgrounds */
[class*="bg-theme-"], [class*="dark:bg-"] {
  background-color: transparent !important;
}

/* Universal Bauhaus Reset */
* {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  color: #000000 !important;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: -0.02em !important;
  transition-duration: 0s !important; /* Instant brutalist transitions */
}

/* =========================================================
   3. CATEGORY HEADERS (Swiss Poster Typography)
   ========================================================= */
.service-group-name, .bookmark-group-name {
  text-transform: uppercase !important;
  font-weight: 800 !important;
  border-bottom: 4px solid #000000 !important;
  padding-bottom: 4px !important;
  margin-bottom: 12px !important;
  display: block !important;
  width: 100% !important;
}

/* Hide the dropdown chevron for a cleaner look */
button[id^="headlessui-disclosure-button"] svg {
  display: none !important;
}

/* =========================================================
   4. SERVICE CARDS & BOOKMARKS
   ========================================================= */
.service-card, .bookmark a {
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  cursor: pointer !important;
}

/* Bauhaus Hover Inversion */
.service-card:hover, .bookmark a:hover {
  background-color: #000000 !important;
}

.service-card:hover *, .bookmark a:hover * {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* =========================================================
   5. ICONS (Images, SVGs, and MDI Masks)
   ========================================================= */


/* Material Design Icons (Masks) - e.g., Vert */
.service-icon div[style*="mask"] {
  background: #000000 !important;
}
.service-card:hover .service-icon div[style*="mask"] {
  background: #ffffff !important;
}

/* Bookmark Letter Icons (GH, RE, YT) */
.bookmark-icon {
  border-right: 2px solid #000000 !important;
  background-color: #ffffff !important;
  font-weight: 800 !important;
}
.bookmark a:hover .bookmark-icon {
  background-color: #000000 !important;
}

/* =========================================================
   6. TOP WIDGETS (Search & Resources)
   ========================================================= */
/* Search Bar */
input[type="text"], input[type="search"] {
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}
input[type="text"]::placeholder, input[type="search"]::placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}
input[type="text"]:focus, input[type="search"]:focus {
  outline: 4px solid #000000 !important;
  outline-offset: 2px !important;
}

/* CPU / RAM Progress Bars */
.resource-usage {
  background-color: #ffffff !important;
  border: 1px solid #000000 !important;
  height: 10px !important; /* Slightly thicker for geometry */
}
.resource-usage > div {
  background-color: #000000 !important;
}