@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&family=Fira+Code&family=Poppins&family=Source+Code+Pro&family=Work+Sans&display=swap');

.theme-gray {
        font-family: 'DM Sans', sans-serif;
        zoom: 1.15;

        /* CATPPUCCIN COLORS */
        --catppuccin-background: #181825;
        --catppuccin-background-dark: #11111b;
        --catppuccin-foreground: #1e1e2e;
        --catppuccin-text: #cdd6f4;
        --catppuccin-surface: #6272a4;
        --catppuccin-cyan: #89dceb;
        --catppuccin-teal: #94e2d5;
        --catppuccin-green: #a6e3a1;
        --catppuccin-orange: #fab387;
        --catppuccin-pink: #f5c2e7;
        --catppuccin-purple: #cba6f7;
        --catppuccin-lavender: #b4befe;
        --catppuccin-red: #f38ba8;
        --catppuccin-maroon: #eba0ac;
        --catppuccin-yellow: #f9e2af;

        /* Theme preset colors */
        --color-50: 249 250 251 !important;
        --color-100: 243 244 246 !important;
        --color-200: 215 214 244 !important; /* Text Color - use Catppuccin text color */
        --color-300: 209 213 219 !important;
        --color-400: 156 163 175 !important;
        --color-500: 107 114 128 !important;
        --color-600: 75 85 99 !important;
        --color-700: 55 65 81 !important;
        --color-800: 30 30 46 !important; /* Background color - use Catppuccin theme color */
        --color-900: 17 17 27 !important; /* Catppuccin specific */
        --color-logo-start: 156 163 175 !important;
        --color-logo-stop: 55 65 81 !important;

        --standard-bg: #44475a8e;

        /* INFO WIDGET COLORS */
        --info-widgets: var(--catppuccin-purple);
        --resource-bar-bg: var(--standard-bg);
        --resource-bar-fg: var(--catppuccin-green);

        --widget-border: var(--catppuccin-foreground);

        /* SERVICES COLORS */
        --service-group: var(--catppuccin-purple);

        --service-name: var(--catppuccin-text);
        --service-description: var(--catppuccin-maroon);

        --service-block-bg: #1e1e2e;
        --service-block-text: var(--catppuccin-pink);

        /* BOOKMARKS COLORS */
        --bookmark-group: var(--catppuccin-purple);

        --bookmark-icon-bg: #11111b;
        --bookmark-icon: var(--catppuccin-purple);
        --bookmark-name: var(--catppuccin-text);

        /* ALL CARD COLORS */
        --card-color: #181825;
        --card-color-hover: #232336;

        /* FOOTER COLORS */
        --footer-items: var(--catppuccin-pink);

        /* FOOTER COLORS */
        --scrollbar-fg: var(--catppuccin-purple);
        --scrollbar-bg: var(--standard-bg);

        /*Class color values */
        .service-tags .dark\:bg-theme-900\/50 {
                background-color: rgb(var(--color-900) / 0.3) !important;
        }

        /*******************************
  *  INFORMATION WIDGETS STYLES  *
  *******************************/
        #information-widgets {
                border-color: var(--widget-border);
        }

        #information-widgets * {
                color: var(--info-widgets);
        }

        .resource-usage {
                background-color: var(--resource-bar-bg);
        }

        .resource-usage > div {
                background-color: var(--resource-bar-fg);
        }

        /*******************************
  *       SERVICES STYLES        *
  *******************************/
        .service-group-icon > div {
                background: var(--service-group) !important; /* group label ICON color */
        }

        .service-group-name {
                color: var(--service-group) !important; /* group label NAME color */
        }

        .services-group > button > svg {
                color: var(--service-group); /* group label EXPAND/COLLAPSE ICON color */
        }

        .service-card {
                background-color: var(--card-color) !important;
        }

        .service-card:hover {
                background-color: var(--card-color-hover) !important;
        }

        .service-name.text-sm {
                font-size: 0.95rem;
                color: var(--service-name);
        }

        .service-description.text-xs {
                font-size: 0.75rem;
                color: var(--service-description);
        }

        .service img {
                border-radius: 25%;
        }

        .service-block {
                background: var(--service-block-bg);
        }

        .service-block .uppercase {
                color: var(--service-block-text);
        }

        .service-block .font-thin {
                color: var(--catppuccin-text);
        }

        /*******************************
  *       BOOKMARK STYLES        *
  *******************************/

        .bookmark-group-name {
                color: var(--bookmark-group);
        }

        .bookmark-icon {
                background-color: var(--bookmark-icon-bg) !important;
        }

        .bookmark-icon > div > div {
                background: var(
                        --bookmark-icon
                ) !important; /* If using si or md icons, make default purple */
        }

        .bookmark-name.text-xs {
                font-size: 0.85rem;
                color: var(--bookmark-name);
        }

        li.bookmark > a {
                background-color: var(--card-color);
        }

        li.bookmark > a:hover {
                background-color: var(--card-color-hover);
        }

        /*******************************
  *       CALENDAR STYLES        *
  *******************************/

        #catppuccin-calendar .flex.justify-between.flex-wrap span {
                color: var(--catppuccin-purple);
        }

        /*******************************
  *        FOOTER STYLES         *
  *******************************/

        #footer svg {
                color: var(--footer-items);
        }

        /*******************************
  *      SCROLLBAR STYLES        *
  *******************************/

        * {
                --scrollbar-thumb: var(--scrollbar-fg);
                --scrollbar-track: var(--scrollbar-bg);
        }

        /*******************************
  *       GLANCES STYLES         *
  *******************************/

        li[id^='glances-'] .recharts-surface > g:nth-of-type(1) path:nth-child(1) {
                fill: var(--catppuccin-maroon);
                fill-opacity: 0.35;
        }

        li[id^='glances-'] .recharts-surface g:nth-of-type(1) path:nth-child(2) {
                stroke: var(--catppuccin-maroon);
                stroke-opacity: 0.5;
        }

        li[id^='glances-'] .recharts-surface g:nth-of-type(2) path:nth-child(1) {
                fill: var(--catppuccin-lavender);
                fill-opacity: 0.35;
        }

        li[id^='glances-'] .recharts-surface g:nth-of-type(2) path:nth-child(2) {
                stroke: var(--catppuccin-lavender);
                stroke-opacity: 0.5;
        }

        li[id^='glances-'] .bottom-3.left-3 {
                color: var(--catppuccin-pink);
        }

        li[id^='glances-'] .bottom-3.right-3 .opacity-75 {
                color: var(--catppuccin-cyan);
                opacity: 1;
                font-size: 0.8rem;
        }

        li[id^='glances-'] .top-3.right-3 .opacity-50 {
                color: var(--catppuccin-cyan);
                opacity: 1;
                font-size: 0.8rem;
        }

        li[id^='glances-'] .opacity-50 {
                opacity: 0.8;
        }

        li[id^='glances-'] .flex.items-center.text-xs .text-right {
                color: var(--catppuccin-cyan);
        }

        li[id^='glances-'] .flex.items-center .opacity-25.w-14.text-right {
                color: var(--catppuccin-purple);
                opacity: 0.85;
        }

        li[id^='glances-']
                .bottom-4.right-3.left-3.z-20
                .w-3.h-3.mr-1\.5.opacity-50
                > div {
                background: var(--catppuccin-green) !important;
                opacity: 1;
        }

        li[id^='glances-'] .bottom-4.right-3.left-3.z-20 .opacity-75.grow {
                color: var(--catppuccin-pink) !important;
                opacity: 0.75;
        }

        /*******************************
  *      HOMEPAGE PRESETS        *
  *******************************/
        .bg-amber-500 {
                background-color: var(--catppuccin-orange);
        }

        .bg-black {
                background-color: rgb(0, 0, 0);
        }

        .bg-blue-500 {
                background-color: var(--catppuccin-cyan);
        }

        .bg-cyan-500 {
                background-color: var(--catppuccin-cyan);
        }

        .bg-emerald-500 {
                background-color: var(--catppuccin-green);
        }

        .bg-fuchsia-500 {
                background-color: var(--catppuccin-pink);
        }

        .bg-gray-500 {
                background-color: var(--catppuccin-foreground);
        }

        .bg-green-500 {
                background-color: var(--catppuccin-green);
        }

        .bg-indigo-500 {
                background-color: var(--catppuccin-purple);
        }

        .bg-lime-500 {
                background-color: var(--catppuccin-green);
        }

        .bg-neutral-500 {
                background-color: rgb(115,115,115);
        }

        .bg-orange-400 {
                background-color: var(--catppuccin-orange);
        }

        .bg-orange-500 {
                background-color: var(--catppuccin-orange);
        }

        .bg-pink-500 {
                background-color: var(--catppuccin-pink);
        }

        .bg-purple-500 {
                background-color: var(--catppuccin-purple);
        }

        .bg-red-500 {
                background-color: var(--catppuccin-red);
        }

        .bg-rose-100 {
                background-color: rgb(255, 205, 205);
        }

        .bg-rose-500 {
                background-color: var(--catppuccin-red);
        }

        .bg-rose-900\/80 {
                background-color: var(--catppuccin-red);
        }

        .bg-sky-500 {
                background-color: var(--catppuccin-cyan);
        }

        .bg-slate-500 {
                background-color: var(--catppuccin-surface);
        }

        .bg-stone-500 {
                background-color: rgb(120,113,108);
        }

        .bg-teal-500 {
                background-color: #94e2d5;
        }

        .bg-violet-500 {
                background-color: var(--catppuccin-purple);
        }

        .bg-white {
                background-color: var(--catppuccin-text);
        }

        .bg-white\/50 {
                background-color: hsla(0, 0%, 100%, 0.5);
        }

        .bg-yellow-500 {
                background-color: var(--catppuccin-yellow);
        }

        .bg-zinc-500 {
                background-color: rgb(113,113,122);
        }

        .text-amber-800 {
                color: var(--catppuccin-orange);
        }

        .text-black {
                color: rgb(0,0,0);
        }

        .text-black\/20 {
                color: rgba(0, 0, 0, 0.2);
        }

        .text-blue-500\/80 {
                color: rgba(137, 220, 235, 0.8);
        }

        .text-emerald-300 {
                color: var(--catppuccin-green);
        }

        .text-emerald-500\/80 {
                color: rgba(80, 250, 123, 0.8);
        }

        .text-gray-500 {
                color: rgb(107,114,128);
        }

        .text-green-500 {
                color: var(--catppuccin-green);
        }

        .text-orange-400\/50 {
                color: rgba(250, 179, 135, 0.5);
        }

        .text-red-400 {
                color: var(--catppuccin-red);
        }

        .text-red-500 {
                color: var(--catppuccin-red);
        }

        .text-red-500\/40 {
                color: rgba(243, 139, 168, 0.4);
        }

        .text-rose-300 {
                color: var(--catppuccin-red);
        }

        .text-rose-500 {
                color: var(--catppuccin-red);
        }

        .text-rose-500\/80 {
                color: rgba(243, 139, 168, 0.8);
        }

        .text-rose-900 {
                color: var(--catppuccin-red);
        }

        .text-white {
                color: var(--catppuccin-text);
        }
}

.theme-gray body,
.theme-gray html,
body,
html {
  font-family: 'DM Sans', 'Manrope', sans-serif !important;
}

/* Search bar: keep the themed background in every state */
input[type="search"],
input[placeholder*="earch"] {
  background-color: rgb(var(--color-800)) !important;
  color: rgb(var(--color-100)) !important;
  border-color: rgb(var(--color-700)) !important;
}
div[class*="absolute"] input {
  background-color: rgb(var(--color-800)) !important;
  color: rgb(var(--color-100)) !important;
}

/* Lock the viewport on the login page so it never scrolls */
html:has(main[class*="min-h-screen"]) {
  height: 100vh;
  overflow: hidden;
}
body:has(main[class*="min-h-screen"]) {
  height: 100vh;
  overflow: hidden;
}

/* Login page: neutralize the theme's dashboard zoom so the card fits the viewport */
html:has(main[class*="min-h-screen"]) {
  zoom: 1 !important;
}
/* ============ Login page (auth/signin) — professional Catppuccin Mocha ============ */
/* Lock + center on normal screens; allow scroll only on very short viewports */
@media (min-height: 640px) {
  html:has(main[class*="min-h-screen"]),
  body:has(main[class*="min-h-screen"]) {
    height: 100vh;
    overflow: hidden;
  }
}
html:has(main[class*="min-h-screen"]) {
  zoom: 1 !important;
}

main[class*="min-h-screen"] {
  height: 100vh;
  min-height: 100vh;
  align-items: center !important;
  justify-content: center !important;
}

/* Card: single column, centered, compact */
main[class*="min-h-screen"] [class*="rounded-3xl"] {
  max-width: 25rem !important;
  width: 100%;
  background: rgb(var(--color-900)) !important;
  border: 1px solid rgb(var(--color-700)) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 6px 24px -8px rgb(17 17 27 / 0.35) !important;
}

/* Force the internal 2-column grid into one column, compact */
main[class*="min-h-screen"] [class*="rounded-3xl"] [class*="grid"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.1rem !important;
  padding: 1.75rem 1.5rem !important;
}

/* Intro column centered */
main[class*="min-h-screen"] [class*="grid"] > div:first-child {
  text-align: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
}

/* "Login Required" eyebrow */
main[class*="min-h-screen"] span[class*="text-sm"] {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  color: #cba6f7 !important;
}

main[class*="min-h-screen"] h1 {
  margin: 0.4rem 0 0 0 !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin: 0 !important;
}

main[class*="min-h-screen"] [class*="rounded-3xl"] p {
  font-size: 0.82rem !important;
  color: rgb(var(--color-300)) !important;
  margin: 0 !important;
}

/* Strip the nested form panel so fields span the card width */
main[class*="min-h-screen"] [class*="rounded-2xl"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
}

main[class*="min-h-screen"] h2 {
  display: none !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: rgb(var(--color-300)) !important;
  margin: 0 !important;
}

/* Form: full width, clean spacing */
main[class*="min-h-screen"] form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100% !important;
}
main[class*="min-h-screen"] form > * {
  width: 100% !important;
}

main[class*="min-h-screen"] label {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: rgb(var(--color-200)) !important;
  display: block !important;
  margin-bottom: 0.3rem !important;
}

main[class*="min-h-screen"] input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.68rem 0.9rem !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  border-radius: 0.55rem !important;
  background: rgb(var(--color-800)) !important;
  border: 1px solid rgb(var(--color-600)) !important;
  color: rgb(var(--color-100)) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
main[class*="min-h-screen"] input::placeholder {
  color: rgb(var(--color-500)) !important;
}
main[class*="min-h-screen"] input:hover {
  border-color: rgb(var(--color-500)) !important;
}
main[class*="min-h-screen"] input:focus {
  border-color: #cba6f7 !important;
  box-shadow: 0 0 0 3px rgb(203 166 247 / 0.22) !important;
}
main[class*="min-h-screen"] input.is-invalid {
  border-color: #f38ba8 !important;
}
main[class*="min-h-screen"] #login-email-error {
  font-size: 0.75rem !important;
  color: #f38ba8 !important;
}

/* Show/Hide toggle sits inline right of the field */
main[class*="min-h-screen"] #toggle-password {
  width: auto !important;
  margin: 0 0 0 auto !important;
  padding: 0.15rem 0.4rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: #cba6f7 !important;
  box-shadow: none !important;
}

/* Submit button */
main[class*="min-h-screen"] button[type="submit"],
main[class*="min-h-screen"] button:not(#toggle-password) {
  width: 100% !important;
  margin-top: 0.35rem !important;
  padding: 0.78rem 1rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  border-radius: 0.55rem !important;
  background: #cba6f7 !important;
  color: #11111b !important;
  border: none !important;
  box-shadow: 0 8px 22px -8px rgb(203 166 247 / 0.45) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.08s ease;
}
main[class*="min-h-screen"] button[type="submit"]:hover,
main[class*="min-h-screen"] button:not(#toggle-password):hover {
  background: #b4befe !important;
  transform: translateY(-1px);
}
main[class*="min-h-screen"] button:active {
  transform: translateY(0) scale(0.99);
}

/* NextAuth invalid-password banner */
main[class*="min-h-screen"] [class*="bg-red"] {
  border-radius: 0.5rem !important;
  font-size: 0.8rem !important;
  text-align: center !important;
}



/* Hide the "Login Required" eyebrow pill on the login page */
main[class*="min-h-screen"] [class*="rounded-full"] {
  display: none !important;
}