/**
 * Theme Styles
 * Cross-theme compatible styles for light/dark mode
 */

/* Theme Cards - Glass morphism effect */
.theme-card {
    background-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    color: #111827 !important;
    border-color: rgba(229, 231, 235, 0.6) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease;
}

html.dark .theme-card {
    background-color: rgba(31, 41, 55, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    color: white !important;
    border-color: rgba(55, 65, 81, 0.6) !important;
    border-radius: 10px !important;
}

/* Theme Text */
.theme-text {
    color: #111827 !important;
}

html.dark .theme-text {
    color: white !important;
}

/* Theme Borders */
.theme-border {
    border-color: rgba(229, 231, 235, 0.6) !important;
}

html.dark .theme-border {
    border-color: rgba(55, 65, 81, 0.6) !important;
}

/* Universal Card Borders - Transparent cross-theme */
.card-border,
.border-base-200,
[class*="border-base-200"],
[class*="dark:border-base-700"] {
    border-color: rgba(229, 231, 235, 0.6) !important;
}

html.dark .card-border,
html.dark .border-base-200,
html.dark [class*="border-base-200"],
html.dark [class*="dark:border-base-700"] {
    border-color: rgba(55, 65, 81, 0.6) !important;
}

/* Icon Spacing Defaults */
.theme-card .material-icons:not(.no-margin) {
    margin-right: 0.75rem !important; /* 12px default spacing */
}

.theme-card .flex.items-center .material-icons {
    margin-right: 0.75rem !important;
}

.theme-card .status-badge .material-icons {
    margin-right: 0.25rem !important; /* 4px for badges */
}

/* Icon spacing for buttons and links */
.theme-card button .material-icons,
.theme-card a .material-icons {
    margin-right: 0.5rem !important;
}

/* Fieldset Headers - Better contrast for dark theme */
/* Override Unfold's default which uses color-mix(in oklab, white 2%, transparent) */

/* Collapsed state - more contrast */
fieldset details:not([open]) h2 {
    background-color: oklch(92.8% .006 264.531) !important; /* Light theme: base-200 - more visible */
    color: var(--color-font-important-light) !important;
}

html.dark fieldset details:not([open]) h2 {
    background-color: oklch(37.3% 0 0 / 0.5) !important; /* Dark theme: base-700 with 50% opacity - more contrast */
    color: var(--color-font-important-dark) !important;
}

/* Open state - primary color with white text */
fieldset details[open] h2,
fieldset h2 {
    background-color: var(--color-primary-600) !important; /* Light theme: primary-600 */
    color: white !important;
}

html.dark fieldset details[open] h2,
html.dark fieldset h2 {
    background-color: var(--color-primary-700) !important; /* Dark theme: primary-700 */
    color: white !important;
}

/* Border for open fieldset content */
fieldset details[open] > div {
    border: 2px solid var(--color-primary-600) !important;
}

html.dark fieldset details[open] > div {
    border-color: var(--color-primary-700) !important;
}
