@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* ==========================================================================
   Base Styles & Dark Mode Configuration
   ========================================================================== */

/* Force dark mode globally */
:root {
    color-scheme: dark;
}

/* Basic element styling */
html, body {
    background-color: #181a1b;
    color: #e8e6e3;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Remove outline on focused h1 */
h1:focus {
    outline: none;
}

/* Links */
a, .btn-link {
    color: #e8b64c !important; /* Warm color instead of default blue */
}

a:hover, .btn-link:hover {
    color: #f3c971 !important;
    text-decoration: underline;
}

/* Text color utilities */
.text-muted {
    color: #a0a0a0;
}

.text-white,
.text-dark { /* Override default text-dark for dark mode */
    color: #e8e6e3;
}

/* ==========================================================================
   Layout Structure (Page, Sidebar, Main Content)
   ========================================================================== */

.page {
    background-color: #181a1b;
    display: flex; /* Ensure sidebar and main content flow correctly */
    flex-direction: row;
    min-height: 100vh;
}

main {
    background-color: #181a1b;
    flex: 1; /* Allow main content to take remaining space */
}

.sidebar {
    /* Use a gradient for the sidebar background */
    background-image: none;
    background: linear-gradient(180deg, #2a2a2a 0%, #1c1c1c 100%);
    border-right: 1px solid #333;
    /* Ensure consistent width, adjust as needed */
    /* width: 250px; */
}

/* Increased specificity for sidebar background to override potential conflicts */
/* Consider reducing specificity if possible later */
/* Commented out highly specific rule as likely redundant after removing !important and MainLayout.razor.css */
/*
html body .page .sidebar,
div.sidebar,
.navbar-dark,
.navbar,
nav.sidebar {
    background-image: none !important;
    background: linear-gradient(180deg, #2a2a2a 0%, #1c1c1c 100%) !important;
    border-right: 1px solid #333 !important;
}
*/

.top-row {
    background-color: #252729;
    border-bottom: 1px solid #333;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align items like login links to the right */
    padding: 0 1rem; /* Add some padding */
}


.top-row > p { /* Specifically target <p> elements that are direct children of .top-row. */
    margin-bottom: 0; /* Reset default bottom margin */
    /* Alternatively, use margin: 0; to reset both top and bottom if needed */
}

.content {
    background-color: #181a1b;
    padding: 1.1rem; /* Standard Blazor content padding */
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    /* background-color: #181a1b !important; Match site background and make opaque */
    z-index: 9999;
}

.loading-spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav-link {
    color: #e8e6e3;
}

.nav-link:hover {
    color: #f3c971;
}

.nav-link.active {
    color: #f3c971;
    background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Components
   ========================================================================== */

/* --- Cards --- */
.card {
    background-color: #232527;
    border-color: #333;
    margin-bottom: 1rem; /* Add some spacing between cards */
}

.card-header {
    background-color: #292c2e;
    border-bottom-color: #333;
}

.card-header h6 { /* Style for headers often used in filter cards */
    color: #e8e6e3;
    margin-bottom: 0; /* Remove default margin if needed */
}

.card-body {
    background-color: #232527;
    color: #e8e6e3;
}

.card-footer {
    background-color: #292c2e;
    border-top-color: #333;
}

/* --- Modals --- */
.modal-content {
    background-color: #232527;
    border-color: #333;
}

.modal-header {
    border-bottom-color: #333;
}

.modal-footer {
    border-top-color: #333;
}

/* --- Forms --- */
label,
.form-check-label {
    color: #e8e6e3;
}

.form-control,
input,
select,
textarea {
    background-color: #1c1e1f;
    color: #e8e6e3;
    border-color: #4e4e4e;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: #252729;
    color: #e8e6e3;
    border-color: #6e6e6e;
    box-shadow: none; /* Remove default Bootstrap focus shadow if desired */
}

/* Custom focus outline for better visibility in dark mode */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; /* Default Blazor focus, adjust if needed */
}

.input-group-text {
    background-color: #292c2e;
    color: #e8e6e3;
    border-color: #4e4e4e;
}

.form-check-input:checked {
    background-color: #1a3a5f; /* Using primary color */
    border-color: #1861ac; /* Using primary border color */
}

/* Select boxes (dropdowns) */
.form-select {
    background-color: #232527;
    color: #e8e6e3;
    border-color: #4e4e4e;
}

.form-select:focus {
    background-color: #252729;
    color: #e8e6e3;
    border-color: #6e6e6e;
    box-shadow: 0 0 0 0.25rem rgba(37, 140, 251, 0.25);
}

/* Add this to ensure dropdown options are also dark */
.form-select option {
    background-color: #232527;
    color: #e8e6e3;
}

/* Readonly inputs specifically for API keys and similar read-only content */
.form-control[readonly] {
    background-color: #1c1e1f;
    color: #e8e6e3;
    border-color: #4e4e4e;
}

/* Input groups (like the API key section) */
.input-group .form-control,
.input-group .btn {
    border-color: #4e4e4e;
}

/* --- Buttons --- */
/* General button styling (apply to all .btn classes) */
.btn {
    /* Add transitions for smoother hover effects */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.btn-primary {
    color: #e8e6e3;
    background-color: #1a3a5f;
    border-color: #1861ac;
}
/* Add hover/active states for buttons if desired */
.btn-primary:hover {
    background-color: #152f4f;
    border-color: #135393;
}

.btn-secondary {
    color: #e8e6e3;
    background-color: #3e4144;
    border-color: #4e4e4e;
}
.btn-secondary:hover {
    background-color: #333638;
    border-color: #3e3e3e;
}

.btn-success {
    color: #e8e6e3;
    background-color: #1e472e;
    border-color: #2a5a3a;
}
.btn-success:hover {
    background-color: #183825;
    border-color: #21482f;
}

.btn-warning {
    color: #e8e6e3; /* Text color for warning button */
    background-color: #4e3e10;
    border-color: #5e4c18;
}
.btn-warning:hover {
    background-color: #3e310d;
    border-color: #4b3d13;
}

.btn-danger {
    color: #e8e6e3;
    background-color: #4e1d1d;
    border-color: #5e2929;
}
.btn-danger:hover {
    background-color: #3e1717;
    border-color: #4b2121;
}

.btn-light {
    color: #181a1b; /* Dark text on light button */
    background-color: #c9c9c9;
    border-color: #b0b0b0;
}
.btn-light:hover {
    background-color: #b8b8b8;
    border-color: #a0a0a0;
}

.btn-outline-secondary {
    color: #e8e6e3;
    border-color: #4e4e4e;
}
.btn-outline-secondary:hover {
    background-color: #3e4144; /* Match secondary background */
    color: #e8e6e3;
}


.btn-outline-warning {
    color: #e8e6e3; /* Text color for outline warning */
    border-color: #5e4c18;
}
.btn-outline-warning:hover {
    background-color: #4e3e10; /* Match warning background */
    color: #e8e6e3;
}

/* --- Alerts --- */
.alert {
    border-radius: 0.25rem; /* Ensure alerts have rounded corners */
}

.alert-info {
    background-color: #1e3a4e;
    color: #8fcbe5;
    border-color: #29516c;
}

.alert-success {
    background-color: #1e472e;
    color: #8ee5a1;
    border-color: #2a5a3a;
}

.alert-danger {
    background-color: #4e1d1d;
    color: #e58f8f;
    border-color: #5e2929;
}

.alert-warning {
    background-color: #4e3e10;
    color: #e5cf8f;
    border-color: #5e4c18;
}

/* --- Tables --- */
.table {
    color: #e8e6e3;
    border-collapse: collapse;
    width: 100%; /* Ensure tables take full width */
}

.table thead th {
    color: #f0f0f0;
    background-color: #292c2e;
    border: 1px solid #444;
    vertical-align: bottom;
    text-align: inherit;
}

.table td, .table th {
    padding: 0.75rem; /* Default Bootstrap padding */
    vertical-align: top;
    border: 1px solid #444;
}

/* Enhanced contrast and readability for table body cells */
.table tbody td {
    color: #ffffff;
    font-weight: 500;
}

/* Striped table rows */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #2a2d30;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #232527;
}

/* Hover effect for table rows */
.table-hover tbody tr:hover {
    background-color: #3a3d40;
    color: #ffffff;
}


/* ==========================================================================
   Utility & Override Classes
   ========================================================================== */

/* Background color utilities */
.bg-primary { background-color: #1a3a5f; }
.bg-success { background-color: #1e472e; }
.bg-warning { background-color: #4e3e10; }
.bg-danger { background-color: #4e1d1d; }
.bg-info { background-color: #1e3a4e; }
.bg-light, 
.form-control.bg-light,
div.bg-light,
input.bg-light,
textarea.bg-light,
select.bg-light {
    background-color: #2a2c2e !important;
    color: #e8e6e3 !important; 
}
.bg-white { background-color: #232527; } /* Override white backgrounds */

/* Image filters for dark mode */
img:not([src*=".svg"]), video {
    filter: brightness(0.8) contrast(1.2) !important;
}

/* Invert SVGs - adjust if needed */
img[src*=".svg"] {
    filter: invert(0.85) !important;
}

/* ==========================================================================
   Validation Styles
   ========================================================================== */

.validation-message {
    color: red;
}

/* Standard Blazor validation outlines */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}


/* ==========================================================================
   Blazor Specific Styles
   ========================================================================== */

#blazor-error-ui {
    background: lightyellow; /* Keep default for high visibility */
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: black; /* Ensure text is readable */
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Note on !important:
   The extensive use of !important is necessary here to override default Bootstrap 5 styles
   and enforce the dark theme consistently. Removing them might cause elements
   to revert to Bootstrap's default light theme styling. Consider carefully
   before removing them, and test thoroughly. Alternatives involve higher
   specificity selectors or restructuring the CSS load order, which can be complex.

   UPDATE: Removed most '!important' flags. Testing is required to see if
   Bootstrap defaults override these styles in unintended ways.
   Kept !important only for image filters as they are strong global overrides.
*/