@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

:root {
    /* Adjusted to darker shades for visibility on light backgrounds */
    --color-info: hsl(43, 50%, 30%);
    --color-warning: hsl(43, 50%, 30%);
    --color-primary: hsl(0, 0%, 100%);

    --color-text-subdue: hsl(0, 0%, 70%);
    /* YOUR PREFERENCE: Kept the 2% opacity as requested */
    --bga: 70%;
    --color-widget-background: hsl(0, 0%, 0%, 20%);
} /* Fixed syntax error: removed extra ");" here */

* {
    box-sizing: border-box;
}

body {
    font-family: "Outfit", sans-serif;
    background-image: url(https://nc.pacu.dev/apps/files_sharing/publicpreview/otbicncCBCAGwq9?file=/&fileId=514463&x=1920&y=1080&a=true&etag=789e99db57a214b0b31fd69316a16ab1);
    background-repeat: no-repeat;

    /* These three lines fix the issue: */
    background-size: cover; /* Fill the screen */
    background-position: center; /* Keep the image centered */
    background-attachment: fixed; /* Lock image in place so it doesn't scroll away */

    color: #ffffff;
}

/* Force headings and widgets to inherit the dark text color */
.widget-content,
h1,
h2,
h3,
h4,
span,
div,
button {
    color: inherit;
}

/* Blur effect for widget backgrounds */
.widget-content:not(.widget-content-frameless),
.widget-content-frame {
    backdrop-filter: blur(16px);
    box-shadow:
        rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
        rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;

    /* Optional: Add a very faint dark border to help define the box edges */
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Make widgets same height */
.widget-type-dns-stats {
    height: 100%;
}
.widget-type-dns-stats .widget-content {
    height: calc(100% - var(--widget-gap));
}
.widget-type-dns-stats .widget-content .dns-stats {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.widget-type-prowlarr-custom .widget-content {
    height: calc(100% - var(--widget-gap));
}
.seerr-item {
}

.group header button,
.group-header button {
    color: #1a1a1a !important;
    opacity: 1 !important; /* Stop inactive tabs from fading out */
    font-weight: 700; /* Make text bolder for better contrast */
}

/* 1. Base style for ALL tabs (Inactive state) */
button.widget-group-title {
    color: #1a1a1a !important; /* Dark Text */
    font-weight: 600 !important;
}

/* 2. Active tab specific style */
button.widget-group-title.widget-group-title-current {
    color: #ffffff !important; /* White Text */
    border-bottom-color: #ffffff !important; /* White underline */
}

/* 1. Fade out dates from previous/next months */
.widget-type-calendar .calendar-spillover-date {
    opacity: 0.35 !important;
}

/* 2. Style the 'Today' highlight box */
.widget-type-calendar .calendar-current-date {
    background-color: #1a1a1a !important; /* Matches your main text color */
    color: #ffffff !important; /* Forces white text for contrast */
    font-weight: bold !important;
}

.widget-type-calendar .calendar-date {
    color: #ffffff !important;
}

/* 3. Ensure Navigation Arrows are visible (Dark Grey) */
.widget-type-calendar .calendar-header-button svg {
    stroke: #ffffff !important;
}

/* 4. Subtly fade the Weekday Headers (Mo, Tu, We...) */
.widget-type-calendar .size-h6.color-subdue {
    opacity: 0.7 !important;
    font-weight: 600 !important;
}
.expand-toggle-button {
    color: #ffffff !important;
    font-weight: 600 !important;
    background: none !important;
}

.expand-toggle-button-icon {
    display: none !important;
}

.auto-scaling-textarea::placeholder {
    color: #dfdfdf !important;
}

.search-input::placeholder {
    color: #dfdfdf !important;
}