@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Custom Theme Variables */
:root {
    --theme-primary-color: #0B1B17;
    --theme-primary-rgb: 11, 27, 23;
    --brand-color: #0F766E;
    --brand-color-rgb: 15, 118, 110;
    --accent-color: #34D399;
    --accent-color-rgb: 52, 211, 153;
    
    /* Basic colors */
    --color-white: #fff;
    --color-black: #000;
    --color-gray-333: #333;
    --color-gray-666: #666;
    --color-gray-ccc: #ccc;
    --color-gray-ddd: #ddd;
    --color-gray-e0: #e0e0e0;
    --color-gray-f0: #f0f0f0;
    --color-gray-f8: #f8f8f8;
    
    /* Semantic colors */
    --color-error: red;
    --color-label-default: black;
    --color-text-on-dark: white;
    --color-text-muted-light: #ccc;
    --color-text-muted-dark: #666;
    
    /* Bootstrap alert colors */
    --alert-success-color: #155724;
    --alert-success-bg: #d4edda;
    --alert-success-border: #c3e6cb;
    --alert-danger-color: #721c24;
    --alert-danger-bg: #f8d7da;
    --alert-danger-border: #f5c6cb;
    
    /* Shadow colors */
    --shadow-color: rgba(0, 0, 0, 0.2);
    
    /* Profile completion colors */
    --profile-weak: var(--color-gray-ccc);
    --profile-good: var(--color-gray-666);
    --profile-strong: var(--color-gray-333);
    --profile-complete: var(--theme-primary-color);
}

/* Bootstrap Color Overrides for Black & White Theme */
:root {
    --bs-primary: var(--theme-primary-color);
    --bs-primary-rgb: var(--theme-primary-rgb);
    --bs-secondary: var(--color-gray-666);
    --bs-secondary-rgb: 102, 102, 102;
    --bs-success: var(--theme-primary-color);
    --bs-success-rgb: var(--theme-primary-rgb);
    --bs-info: var(--color-gray-333);
    --bs-info-rgb: 51, 51, 51;
    --bs-warning: var(--color-gray-666);
    --bs-warning-rgb: 102, 102, 102;
    --bs-danger: var(--theme-primary-color);
    --bs-danger-rgb: var(--theme-primary-rgb);
    --bs-light: var(--color-gray-f8);
    --bs-light-rgb: 248, 248, 248;
    --bs-dark: var(--theme-primary-color);
    --bs-dark-rgb: var(--theme-primary-rgb);
}

/* Outline Button Overrides for Black & White Theme */
.btn-outline-primary {
    color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--color-white);
    background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}

.btn-outline-secondary {
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    color: var(--theme-primary-color);
    background-color: var(--color-white);
    border-color: var(--color-white);
}

.btn-outline-danger {
    color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
    color: var(--color-white);
    background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}

/* Additional button state overrides to prevent blue colors */
.btn-secondary {
    color: var(--theme-primary-color);
    background-color: var(--color-white);
    border-color: var(--color-white);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    color: var(--color-white) !important;
    background-color: var(--theme-primary-color) !important;
    border-color: var(--theme-primary-color) !important;
}

.btn-info {
    color: var(--color-white);
    background-color: var(--color-gray-333);
    border-color: var(--color-gray-333);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
    color: var(--color-white) !important;
    background-color: var(--theme-primary-color) !important;
    border-color: var(--theme-primary-color) !important;
}

.btn-success {
    color: var(--color-white);
    background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    color: var(--color-white) !important;
    background-color: var(--color-gray-333) !important;
    border-color: var(--color-gray-333) !important;
}

.btn-warning {
    color: var(--theme-primary-color);
    background-color: var(--color-gray-f8);
    border-color: var(--color-gray-e0);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    color: var(--theme-primary-color) !important;
    background-color: var(--color-gray-e0) !important;
    border-color: var(--color-gray-ccc) !important;
}

.btn-danger {
    color: var(--color-white);
    background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    color: var(--color-white) !important;
    background-color: var(--color-gray-333) !important;
    border-color: var(--color-gray-333) !important;
}

html,
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--brand-color);
    color: var(--color-text-on-dark);
}

/* Bold headers for better visual hierarchy */
h1 {
    font-weight: 700;
}

h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
}

h1:focus {
    outline: none;
}

a,
.btn-link {
    color: var(--theme-primary-color);
    text-decoration: none;
}

a:hover,
.btn-link:hover {
    color: var(--theme-primary-color);
    text-decoration: underline;
}

.nav-item .nav-link {
    color: var(--color-white);
}

/* Override for nav links in top navigation */
.top-nav-menu .nav-items a.nav-link {
    color: var(--color-white) !important;
}

.top-nav-menu .nav-items a.nav-link:hover {
    color: var(--color-white) !important;
    text-decoration: none;
}

.btn-primary {
    color: var(--color-white);
    background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: var(--theme-primary-color) !important;
    background-color: var(--color-white) !important;
    border-color: var(--theme-primary-color) !important;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--color-white), 0 0 0 0.25rem var(--color-gray-333);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--theme-primary-color);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.validation-message {
    color: var(--color-error);
}

#blazor-error-ui {
    background: var(--color-gray-f8);
    bottom: 0;
    box-shadow: 0 -1px 2px var(--shadow-color);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--theme-primary-color);
    border-top: 1px solid var(--color-gray-ddd);
}

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

.blazor-error-boundary {
    background: var(--color-gray-f0);
    padding: 1rem;
    color: var(--theme-primary-color);
    border: 1px solid var(--color-gray-ccc);
    border-radius: 4px;
}

.blazor-error-boundary::after {
    content: "Ett fel har uppstått."
}

.centered-content {
    min-height: calc(100vh - 60px);
    /* Subtract menu height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.version-info {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 1rem;
}

.actions-fade-parent:hover .actions-fade {
    opacity: 1;
    pointer-events: auto;
}

.actions-fade {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Default label color */
label {
    color: var(--color-label-default);
}

/* Card styling to ensure proper text contrast - extends white-background pattern */
.card {
    background-color: var(--color-white);
    color: var(--theme-primary-color);
}

.card-body {
    color: var(--theme-primary-color);
}

.card-body h1, 
.card-body h2, 
.card-body h3, 
.card-body h4, 
.card-body h5, 
.card-body h6 {
    color: var(--theme-primary-color);
}

.card-body p,
.card-body .lead {
    color: var(--bs-info);
}

/* Ensure Bootstrap alerts work properly in cards */
.card .alert {
    color: inherit;
}

.card .alert-success {
    color: var(--alert-success-color);
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
}

.card .alert-danger {
    color: var(--alert-danger-color);
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
}

/* White background container class */
.white-background {
    background-color: var(--color-white);
    color: var(--theme-primary-color);
}

.white-background h1,
.white-background h2,
.white-background h3,
.white-background h4,
.white-background h5,
.white-background h6 {
    color: var(--theme-primary-color);
}

.white-background p,
.white-background .lead {
    color: var(--bs-info);
}

.white-background label {
    color: var(--theme-primary-color);
}

.white-background a {
    color: var(--theme-primary-color);
}

.white-background a:hover {
    color: var(--theme-primary-color);
    text-decoration: underline;
}


.white-background .btn-link {
    color: var(--theme-primary-color);
}

.white-background .btn-link:hover {
    color: var(--theme-primary-color);
    text-decoration: underline;
}

/* Site footer styling */
.site-footer {
    background-color: var(--theme-primary-color);
    color: var(--color-text-on-dark);
    padding: 40px 0;
    margin-top: auto;
    width: 100%;
    margin-bottom: 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a {
    color: var(--color-text-on-dark);
    text-decoration: none;
    margin: 0 15px;
}

.footer-links a:hover {
    text-decoration: underline;
}

.copyright {
    color: var(--color-gray-ccc);
    font-size: 0.9rem;
}

/* Blazor SignalR Reconnection Modal Styling */
#components-reconnect-modal {
    color: var(--color-label-default) !important;
}

/* Text color overrides for dark background theme */
.text-muted {
    color: var(--color-text-muted-light) !important;
}

/* Override for white backgrounds - needs higher specificity */
.white-background .text-muted,
.card .text-muted {
    color: var(--color-text-muted-dark) !important;
}
/* Sliding text button effect - reusable across components */
.btn-slide-text {
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: width 0.3s ease, padding 0.3s ease;
    white-space: nowrap;
    width: auto;
    padding-right: 0.5rem; /* Default padding for icon only */
}

.btn-slide-text .slide-text {
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-left: 0;
}

.btn-slide-text:hover {
    padding-right: 0.75rem; /* Increased padding when expanded */
}

.btn-slide-text:hover .slide-text {
    width: auto;
    opacity: 1;
    margin-left: 0.5rem; /* Space between icon and text */
}

/* Ensure the icon stays in place */
.btn-slide-text .oi {
    flex-shrink: 0;
    transition: none;
}

/* Remove underline from buttons on hover */
.btn:hover {
    text-decoration: none;
}

.btn-slide-text:hover {
    text-decoration: none;
}