:root {
    --bs-primary: #1a4d2e;
    --bs-primary-rgb: 26, 77, 46;
    --bs-secondary: #4a5568;
    --bs-secondary-rgb: 74, 85, 104;
    --bs-success: #2f855a;
    --bs-info: #2c5282;
    --bs-warning: #d69e2e;
    --bs-danger: #c53030;
    --bs-light: #f7fafc;
    --bs-dark: #1a202c;
}

html {
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Times New Roman', Times, serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* Unicode font support for international characters */
.form-select,
.form-select option,
.form-control,
input,
select,
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, 
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji",
                 "Noto Sans Arabic", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans Devanagari", "Noto Sans Thai";
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #c53030 !important;
    background-color: rgba(197, 48, 48, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    display: inline-block;
    margin-top: 0.25rem;
}

/* Override Bootstrap's text-danger class - use dark red on light backgrounds, light on dark */
.text-danger {
    color: #c53030 !important;
}

/* For dark backgrounds specifically (like auth pages), override with light color */
.auth-page .text-danger,
.auth-card .text-danger,
.landing-page .text-danger,
.navbar .text-danger,
.dropdown-menu .text-danger {
    color: #ffb3b3 !important;
}

/* Validation messages on auth pages - light text for dark green backgrounds */
.auth-page .validation-message,
.auth-page .field-validation-error,
.auth-card .validation-message,
.auth-card .field-validation-error {
    color: #ffb3b3 !important;
    background-color: rgba(255, 179, 179, 0.1);
}

/* Validation summary on auth pages */
.auth-page .validation-summary-errors,
.auth-card .validation-summary-errors {
    background-color: rgba(255, 179, 179, 0.1) !important;
    border-color: rgba(255, 179, 179, 0.3) !important;
    color: #ffb3b3 !important;
}

.auth-page .validation-summary-errors li,
.auth-card .validation-summary-errors li {
    color: #ffb3b3 !important;
}

/* Alert danger styling - dark red for light backgrounds */
.alert-danger {
    background-color: #f8d7da !important;
    border-color: #f5c2c7 !important;
    color: #842029 !important;
}

/* Validation summary styling - dark red on light backgrounds */
.validation-summary-errors,
.validation-errors {
    color: #842029 !important;
    background-color: #f8d7da;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #f5c2c7;
}

.validation-summary-errors ul,
.validation-errors ul {
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.validation-summary-errors li,
.validation-errors li {
    color: #842029 !important;
}

/* Override field validation messages that appear below inputs - dark red for light backgrounds */
.field-validation-error {
    color: #c53030 !important;
    background-color: rgba(197, 48, 48, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* For StatusMessage component on white backgrounds */
.alert .text-danger {
    color: #842029 !important;
}

/* Logout dropdown item styling - light pink on dark menu */
.dropdown-menu .dropdown-item.text-danger {
    color: #ffb3b3 !important;
    background-color: transparent;
}

.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus {
    background-color: rgba(197, 48, 48, 0.2) !important;
    color: #ffffff !important;
}

.dropdown-menu .dropdown-item.text-danger i {
    color: #ffb3b3 !important;
}

.dropdown-menu .dropdown-item.text-danger:hover i,
.dropdown-menu .dropdown-item.text-danger:focus i {
    color: #ffffff !important;
}

/* Account Management Settings Sidebar - Replace blue with green theme */
/* Override the active/selected state for list-group items */
.list-group-item.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: #153d24 !important;
    border-color: #153d24 !important;
}

/* Override any blue links in the sidebar */
.list-group-item a,
.list-group-item-action {
    color: inherit;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: rgba(26, 77, 46, 0.1) !important;
    color: var(--bs-primary) !important;
}

/* Ensure text remains visible when active */
.list-group-item.active .fas,
.list-group-item.active .fa {
    color: #ffffff !important;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0"idHJyYW5zZm9ybS0yMzUgLTUxKSI+PHBhdGggZD0iTTI26My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xO

/* Navbar brand styling */
.navbar-brand {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Dropdown menu theming */
.dropdown-menu {
    background-color: #1a4d2e;
    border: 1px solid #153d24;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border-radius: 0.25rem;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.95) !important;
    transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #153d24 !important;
    color: #ffffff !important;
}

.dropdown-item:active {
    background-color: #0f2b1a !important;
    color: #ffffff !important;
}

.dropdown-item.active {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.95) !important;
}

.dropdown-item i {
    width: 1.25rem;
    text-align: center;
    margin-right: 0.5rem;
    color: rgba(255, 255, 255, 0.95) !important;
}

.dropdown-item:hover i,
.dropdown-item:focus i {
    color: #ffffff !important;
}

.dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.2);
}

/* Dropdown header username styling */
.dropdown-header {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Account Settings Menu - Override Bootstrap nav-pills active state */
.nav-pills .nav-link.active {
    background-color: #1a4d2e !important;
    color: white !important;
}

.nav-pills .nav-link.active:hover {
    background-color: #153d24 !important;
}

/* Management menu sidebar - force green color on all links */
.manage-nav-list a,
.manage-nav-list .nav-link {
    color: #1a4d2e !important;
}

.manage-nav-list a:hover,
.manage-nav-list .nav-link:hover {
    color: #1a4d2e !important;
}

.manage-nav-list a.active,
.manage-nav-list .nav-link.active {
    color: #ffffff !important;
    background-color: #1a4d2e !important;
}

/* Form Switch (Toggle) Improvements - Better visibility on light backgrounds */
.form-check-input[type="checkbox"] {
    background-color: #d1d5db !important;
    border: 2px solid #9ca3af !important;
    cursor: pointer;
}

.form-check-input[type="checkbox"]:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.form-check-input[type="checkbox"]:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(26, 77, 46, 0.25) !important;
}

.form-check-input[type="checkbox"]:hover:not(:checked) {
    background-color: #b8bfc7 !important;
    border-color: #6b7280 !important;
}

/* Ensure the toggle switch handle (slider) is visible */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

/* Form control focus state - use green theme instead of blue */
.form-control:focus,
textarea.form-control:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(26, 77, 46, 0.25) !important;
}

/* SVG Document Node Hover Styles */
.document-node {
    cursor: pointer;
}

.document-node .node-normal {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.document-node .node-hover {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.document-node:hover .node-normal {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.document-node:hover .node-hover {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Button primary - use green theme */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary:hover {
    background-color: #153d24 !important;
    border-color: #153d24 !important;
}

.btn-primary:focus,
.btn-primary:active {
    background-color: #153d24 !important;
    border-color: #153d24 !important;
}

/* Landing page and login page button contrast - white border */
.landing-page .btn-primary,
.auth-page .btn-primary {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.landing-page .btn-primary:hover,
.auth-page .btn-primary:hover {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Footer link styling */