/*
 * Stackimus AI Support - Complete Custom Theme
 * Version 1.0 - Upgrade Safe Custom CSS
 * 
 * This file provides a complete dark theme matching Stackimus.com branding
 * Colors: Black (#000000), Dark Gray (#1a1a1a), Green (#4CAF50)
 */

/* ===== BASE THEME VARIABLES ===== */
:root {
    --stackimus-black: #000000;
    --stackimus-dark-gray: #1a1a1a;
    --stackimus-medium-gray: #333333;
    --stackimus-light-gray: #555555;
    --stackimus-green: #4CAF50;
    --stackimus-light-green: #66BB6A;
    --stackimus-accent-green: #00E676;
    --stackimus-white: #ffffff;
    --stackimus-text-light: #e0e0e0;
    --stackimus-text-muted: #b0b0b0;
    --stackimus-border: #404040;
    --stackimus-hover: #2a2a2a;
}

/* ===== GLOBAL OVERRIDES ===== */
html, body {
    background-color: var(--stackimus-black) !important;
    color: var(--stackimus-text-light) !important;
    font-family: 'Roboto', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    min-height: 100vh !important;
}

/* ===== LAYOUT CONTAINERS ===== */
.main-container {
    background-color: var(--stackimus-black) !important;
}

.main-container:before {
    background-color: var(--stackimus-dark-gray) !important;
    box-shadow: 0 0 0 1px var(--stackimus-border) !important;
}

.page-content {
    background-color: var(--stackimus-dark-gray) !important;
    color: var(--stackimus-text-light) !important;
}

.sidebar {
    background-color: var(--stackimus-dark-gray) !important;
    border-right: 1px solid var(--stackimus-border) !important;
}

/* ===== NAVIGATION ===== */
.navbar,
.navbar-inverse {
    background-color: var(--stackimus-black) !important;
    border-color: var(--stackimus-green) !important;
}

.navbar-inverse .navbar-brand {
    color: var(--stackimus-white) !important;
}

.navbar-inverse .navbar-nav > li > a {
    color: var(--stackimus-text-light) !important;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: var(--stackimus-green) !important;
    background-color: var(--stackimus-hover) !important;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
}

/* Top bar user area and dropdown styling */
.navbar-right,
.navbar-nav.navbar-right {
    background: transparent !important;
}

.navbar-right .dropdown-toggle,
.navbar-nav.navbar-right .dropdown-toggle {
    background: linear-gradient(135deg, var(--stackimus-green), var(--stackimus-light-green)) !important;
    border: 1px solid var(--stackimus-green) !important;
    color: white !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.navbar-right .dropdown-toggle:hover,
.navbar-nav.navbar-right .dropdown-toggle:hover {
    background: linear-gradient(135deg, var(--stackimus-light-green), var(--stackimus-accent-green)) !important;
    border-color: var(--stackimus-light-green) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* User dropdown menu */
.navbar-right .dropdown-menu,
.navbar-nav .dropdown-menu {
    background-color: var(--stackimus-medium-gray) !important;
    border: 1px solid var(--stackimus-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    margin-top: 5px !important;
}

.navbar-right .dropdown-menu a,
.navbar-nav .dropdown-menu a {
    color: var(--stackimus-text-light) !important;
    padding: 8px 16px !important;
    transition: all 0.3s ease !important;
}

.navbar-right .dropdown-menu a:hover,
.navbar-nav .dropdown-menu a:hover {
    background-color: var(--stackimus-green) !important;
    color: white !important;
}

/* Fix any blue buttons */
.btn-info {
    background: linear-gradient(135deg, var(--stackimus-green), var(--stackimus-light-green)) !important;
    border-color: var(--stackimus-green) !important;
    color: white !important;
}

.btn-info:hover,
.btn-info:focus {
    background: linear-gradient(135deg, var(--stackimus-light-green), var(--stackimus-accent-green)) !important;
    border-color: var(--stackimus-light-green) !important;
}

/* Navigation Lists */
.nav-list > li > a {
    color: var(--stackimus-text-light) !important;
    background-color: transparent !important;
}

.nav-list > li > a:hover {
    background-color: var(--stackimus-hover) !important;
    color: var(--stackimus-green) !important;
}

.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
    background-color: var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
}

/* ===== WIDGETS AND PANELS ===== */
.widget-box {
    background-color: var(--stackimus-medium-gray) !important;
    border: 1px solid var(--stackimus-border) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.widget-header {
    background: linear-gradient(135deg, var(--stackimus-green), var(--stackimus-light-green)) !important;
    border-color: var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
    text-shadow: none !important;
}

.widget-body {
    background-color: var(--stackimus-medium-gray) !important;
    color: var(--stackimus-text-light) !important;
}

.widget-title {
    color: var(--stackimus-white) !important;
}

/* Panel styling */
.panel {
    background-color: var(--stackimus-medium-gray) !important;
    border: 1px solid var(--stackimus-border) !important;
}

.panel-heading {
    background-color: var(--stackimus-green) !important;
    border-color: var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
}

.panel-body {
    background-color: var(--stackimus-medium-gray) !important;
    color: var(--stackimus-text-light) !important;
}

/* ===== BUTTONS ===== */
.btn {
    border-radius: 4px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--stackimus-green), var(--stackimus-light-green)) !important;
    border-color: var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--stackimus-light-green), var(--stackimus-accent-green)) !important;
    border-color: var(--stackimus-light-green) !important;
    color: var(--stackimus-white) !important;
}

.btn-success {
    background-color: var(--stackimus-green) !important;
    border-color: var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--stackimus-light-green) !important;
    border-color: var(--stackimus-light-green) !important;
    color: var(--stackimus-white) !important;
}

.btn-default {
    background-color: var(--stackimus-light-gray) !important;
    border-color: var(--stackimus-border) !important;
    color: var(--stackimus-text-light) !important;
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--stackimus-hover) !important;
    color: var(--stackimus-white) !important;
}

.btn-warning {
    background-color: #FFA726 !important;
    border-color: #FF9800 !important;
    color: var(--stackimus-white) !important;
}

.btn-danger {
    background-color: #F44336 !important;
    border-color: #D32F2F !important;
    color: var(--stackimus-white) !important;
}

.btn-info {
    background-color: #29B6F6 !important;
    border-color: #0288D1 !important;
    color: var(--stackimus-white) !important;
}

/* ===== FORMS ===== */
.form-control {
    background-color: var(--stackimus-light-gray) !important;
    border: 1px solid var(--stackimus-border) !important;
    color: var(--stackimus-white) !important;
}

.form-control:focus {
    border-color: var(--stackimus-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
    background-color: var(--stackimus-medium-gray) !important;
    color: var(--stackimus-white) !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--stackimus-dark-gray) !important;
    color: var(--stackimus-text-muted) !important;
    border-color: var(--stackimus-medium-gray) !important;
}

/* Select dropdowns */
select.form-control {
    background-color: var(--stackimus-light-gray) !important;
    color: var(--stackimus-white) !important;
}

select.form-control option {
    background-color: var(--stackimus-medium-gray) !important;
    color: var(--stackimus-white) !important;
}

/* Textareas */
textarea.form-control {
    background-color: var(--stackimus-light-gray) !important;
    color: var(--stackimus-white) !important;
    border-color: var(--stackimus-border) !important;
}

/* Form labels */
.form-group label,
.control-label {
    color: var(--stackimus-text-light) !important;
    font-weight: 500 !important;
}

/* Input groups */
.input-group-addon {
    background-color: var(--stackimus-green) !important;
    border-color: var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
}

/* ===== TABLES ===== */
.table {
    background-color: var(--stackimus-medium-gray) !important;
    color: var(--stackimus-text-light) !important;
}

.table th {
    background-color: var(--stackimus-light-gray) !important;
    border-color: var(--stackimus-border) !important;
    color: var(--stackimus-white) !important;
    font-weight: 600 !important;
}

.table td {
    border-color: var(--stackimus-border) !important;
    color: var(--stackimus-text-light) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--stackimus-hover) !important;
}

.table-hover > tbody > tr:hover {
    background-color: var(--stackimus-light-gray) !important;
}

/* Table responsive wrapper */
.table-responsive {
    border: 1px solid var(--stackimus-border) !important;
}

/* ===== LINKS ===== */
a {
    color: var(--stackimus-light-green) !important;
    transition: color 0.3s ease !important;
}

a:hover,
a:focus {
    color: var(--stackimus-accent-green) !important;
    text-decoration: none !important;
}

/* ===== PAGE HEADERS ===== */
.page-header {
    border-bottom: 1px solid var(--stackimus-border) !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
}

.page-header h1 {
    color: var(--stackimus-white) !important;
    margin: 0 !important;
}

.page-header h1 small {
    color: var(--stackimus-text-muted) !important;
}

/* ===== LABELS AND BADGES ===== */
.label {
    border-radius: 3px !important;
}

.label-primary {
    background-color: var(--stackimus-green) !important;
}

.label-success {
    background-color: var(--stackimus-light-green) !important;
}

.label-warning {
    background-color: #FFA726 !important;
}

.label-danger {
    background-color: #F44336 !important;
}

.label-info {
    background-color: #29B6F6 !important;
}

.badge {
    background-color: var(--stackimus-green) !important;
}

/* ===== ALERTS ===== */
.alert {
    border-radius: 4px !important;
}

.alert-success {
    background-color: rgba(76, 175, 80, 0.2) !important;
    border-color: var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
}

.alert-warning {
    background-color: rgba(255, 167, 38, 0.2) !important;
    border-color: #FFA726 !important;
    color: var(--stackimus-white) !important;
}

.alert-danger {
    background-color: rgba(244, 67, 54, 0.2) !important;
    border-color: #F44336 !important;
    color: var(--stackimus-white) !important;
}

.alert-info {
    background-color: rgba(41, 182, 246, 0.2) !important;
    border-color: #29B6F6 !important;
    color: var(--stackimus-white) !important;
}

/* ===== PROGRESS BARS ===== */
.progress {
    background-color: var(--stackimus-light-gray) !important;
}

.progress-bar {
    background-color: var(--stackimus-green) !important;
}

.progress-bar-success {
    background-color: var(--stackimus-light-green) !important;
}

.progress-bar-warning {
    background-color: #FFA726 !important;
}

.progress-bar-danger {
    background-color: #F44336 !important;
}

.progress-bar-info {
    background-color: #29B6F6 !important;
}

/* ===== PAGINATION ===== */
.pagination > li > a,
.pagination > li > span {
    background-color: var(--stackimus-medium-gray) !important;
    border-color: var(--stackimus-border) !important;
    color: var(--stackimus-text-light) !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    background-color: var(--stackimus-hover) !important;
    color: var(--stackimus-green) !important;
    border-color: var(--stackimus-green) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--stackimus-green) !important;
    border-color: var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
}

/* ===== BREADCRUMBS ===== */
.breadcrumb {
    background-color: var(--stackimus-medium-gray) !important;
    border: 1px solid var(--stackimus-border) !important;
}

.breadcrumb > li + li:before {
    color: var(--stackimus-text-muted) !important;
}

.breadcrumb > li > a {
    color: var(--stackimus-light-green) !important;
}

/* ===== MODALS ===== */
.modal-content {
    background-color: var(--stackimus-medium-gray) !important;
    border: 1px solid var(--stackimus-border) !important;
    color: var(--stackimus-text-light) !important;
}

.modal-header {
    border-bottom: 1px solid var(--stackimus-border) !important;
    background-color: var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
}

.modal-title {
    color: var(--stackimus-white) !important;
}

.modal-footer {
    border-top: 1px solid var(--stackimus-border) !important;
    background-color: var(--stackimus-light-gray) !important;
}

.modal-backdrop {
    background-color: var(--stackimus-black) !important;
}

/* ===== TABS ===== */
.nav-tabs {
    border-bottom: 2px solid var(--stackimus-green) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--stackimus-green) !important;
    border-color: var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
}

.nav-tabs > li > a {
    color: var(--stackimus-text-light) !important;
    background-color: var(--stackimus-medium-gray) !important;
    border-color: var(--stackimus-border) !important;
}

.nav-tabs > li > a:hover {
    background-color: var(--stackimus-hover) !important;
    border-color: var(--stackimus-green) !important;
    color: var(--stackimus-green) !important;
}

.tab-content {
    background-color: var(--stackimus-medium-gray) !important;
    color: var(--stackimus-text-light) !important;
    border: 1px solid var(--stackimus-border) !important;
    border-top: none !important;
    padding: 15px !important;
}

/* ===== WELLS ===== */
.well {
    background-color: var(--stackimus-hover) !important;
    border: 1px solid var(--stackimus-border) !important;
    color: var(--stackimus-text-light) !important;
}

/* ===== TOOLTIPS ===== */
.tooltip-inner {
    background-color: var(--stackimus-light-gray) !important;
    color: var(--stackimus-white) !important;
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--stackimus-light-gray) !important;
}

.tooltip.right .tooltip-arrow {
    border-right-color: var(--stackimus-light-gray) !important;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--stackimus-light-gray) !important;
}

.tooltip.left .tooltip-arrow {
    border-left-color: var(--stackimus-light-gray) !important;
}

/* ===== STATUS COLORS ===== */
.status-10-fg { color: var(--stackimus-text-light) !important; } /* new */
.status-20-fg { color: #FFA726 !important; } /* feedback */
.status-30-fg { color: #29B6F6 !important; } /* acknowledged */
.status-40-fg { color: #AB47BC !important; } /* confirmed */
.status-50-fg { color: var(--stackimus-green) !important; } /* assigned */
.status-80-fg { color: var(--stackimus-light-green) !important; } /* resolved */
.status-90-fg { color: var(--stackimus-text-muted) !important; } /* closed */

/* ===== PRIORITY COLORS ===== */
.priority-none { color: #9E9E9E !important; }
.priority-low { color: #66BB6A !important; }
.priority-normal { color: #FFA726 !important; }
.priority-high { color: #FF7043 !important; }
.priority-urgent { color: #F44336 !important; }
.priority-immediate { color: #D32F2F !important; }

/* ===== SEVERITY COLORS ===== */
.severity-feature { color: #4CAF50 !important; }
.severity-trivial { color: #66BB6A !important; }
.severity-text { color: #81C784 !important; }
.severity-tweak { color: #FFA726 !important; }
.severity-minor { color: #FF7043 !important; }
.severity-major { color: #F44336 !important; }
.severity-crash { color: #D32F2F !important; }
.severity-block { color: #B71C1C !important; }

/* ===== MANTISBT SPECIFIC ELEMENTS ===== */

/* Bug view page */
.bug-view-page {
    background-color: var(--stackimus-dark-gray) !important;
}

/* Category styling */
.category,
td.category,
th.category {
    background-color: var(--stackimus-medium-gray) !important;
    color: var(--stackimus-green) !important;
    font-weight: bold !important;
}

/* Bug notes */
.bugnote {
    background-color: var(--stackimus-hover) !important;
    border: 1px solid var(--stackimus-border) !important;
    border-radius: 4px !important;
    margin: 8px 0 !important;
}

.bugnote-note {
    background-color: var(--stackimus-medium-gray) !important;
    color: var(--stackimus-text-light) !important;
    padding: 12px !important;
}

.bugnote-private {
    background-color: #3E2723 !important;
    border-color: #5D4037 !important;
}

/* Issue summary */
.bug-summary {
    font-size: 1.2em !important;
    font-weight: 600 !important;
    color: var(--stackimus-white) !important;
}

/* User links */
.user-link {
    color: var(--stackimus-green) !important;
    font-weight: 500 !important;
}

.user-link:hover {
    color: var(--stackimus-light-green) !important;
    text-decoration: none !important;
}

/* Date displays */
.date-display {
    color: var(--stackimus-text-muted) !important;
    font-family: monospace !important;
}

/* Attachments */
.attachment-list {
    background-color: var(--stackimus-hover) !important;
    border: 1px solid var(--stackimus-border) !important;
    border-radius: 4px !important;
    padding: 8px !important;
}

.attachment-item {
    color: var(--stackimus-green) !important;
    margin: 4px 0 !important;
}

/* Filter box */
.filter-box {
    background-color: var(--stackimus-medium-gray) !important;
    border: 1px solid var(--stackimus-border) !important;
    border-radius: 4px !important;
    padding: 15px !important;
}

/* Project selector */
.project-selector {
    background-color: var(--stackimus-medium-gray) !important;
    border: 1px solid var(--stackimus-green) !important;
    color: var(--stackimus-white) !important;
}

/* Timeline */
.timeline-item {
    border-left: 3px solid var(--stackimus-green) !important;
    background-color: var(--stackimus-hover) !important;
    margin: 8px 0 !important;
    padding: 8px 12px !important;
}

/* Quick summary boxes */
.quick-summary {
    background: linear-gradient(135deg, var(--stackimus-medium-gray), var(--stackimus-hover)) !important;
    border: 1px solid var(--stackimus-border) !important;
    border-radius: 4px !important;
    color: var(--stackimus-text-light) !important;
    padding: 12px !important;
}

/* Configuration sections */
.config-section {
    background-color: var(--stackimus-hover) !important;
    border: 1px solid var(--stackimus-border) !important;
    margin: 8px 0 !important;
    padding: 12px !important;
}

/* Version info */
.version-info {
    background-color: var(--stackimus-medium-gray) !important;
    border: 1px solid var(--stackimus-border) !important;
    border-radius: 4px !important;
    color: var(--stackimus-green) !important;
    padding: 4px 8px !important;
}

/* ===== CHECKBOXES AND RADIO BUTTONS ===== */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--stackimus-green) !important;
}

/* ===== SCROLLBARS (Webkit) ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--stackimus-dark-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--stackimus-green);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--stackimus-light-green);
}

/* ===== PLACEHOLDERS ===== */
::placeholder {
    color: var(--stackimus-text-muted) !important;
    opacity: 1 !important;
}

::-webkit-input-placeholder {
    color: var(--stackimus-text-muted) !important;
}

::-moz-placeholder {
    color: var(--stackimus-text-muted) !important;
}

:-ms-input-placeholder {
    color: var(--stackimus-text-muted) !important;
}

/* ===== CODE BLOCKS ===== */
pre, code {
    background-color: var(--stackimus-black) !important;
    border: 1px solid var(--stackimus-border) !important;
    color: var(--stackimus-text-light) !important;
}

/* ===== FOOTER ===== */
#footer {
    background-color: var(--stackimus-black) !important;
    border-top: 1px solid var(--stackimus-border) !important;
    color: var(--stackimus-text-muted) !important;
}

#footer a {
    color: var(--stackimus-green) !important;
}

#footer a:hover {
    color: var(--stackimus-light-green) !important;
}

/* ===== LOADING ANIMATION ===== */
.loading-spinner {
    border: 4px solid var(--stackimus-border) !important;
    border-top: 4px solid var(--stackimus-green) !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    animation: spin 1s linear infinite !important;
}

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

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .widget-box {
        margin: 5px !important;
    }
    
    .page-content {
        padding: 10px !important;
    }
    
    .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    .main-container.container:before {
        box-shadow: none !important;
        width: 100% !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    body,
    .main-container,
    .page-content,
    .widget-box {
        background-color: white !important;
        color: black !important;
    }
    
    .widget-header {
        background-color: #f0f0f0 !important;
        color: black !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
.text-muted {
    color: var(--stackimus-text-muted) !important;
}

.help-block {
    color: var(--stackimus-text-muted) !important;
}

/* Focus states for better accessibility */
.form-control:focus,
.btn:focus,
a:focus {
    outline: 2px solid var(--stackimus-green) !important;
    outline-offset: 2px !important;
}

/* ===== LOGIN PAGE STYLING ===== */
/* Detect login pages and style them properly */
html:has(form[action*="login"]),
html:has(.widget-header:contains("Login")),
html:has(.widget-header:contains("Authenticate")),
html[class*="login"],
body:has(form[action*="login"]),
body:has(.widget-header:contains("Login")),
body:has(.widget-header:contains("Authenticate")),
body[class*="login"] {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(form[action*="login"]),
body:has(.widget-header:contains("Login")),
body:has(.widget-header:contains("Authenticate")),
body[class*="login"] {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 25%, #2d2d2d 50%, #1a1a1a 75%, #000000 100%) !important;
    min-height: 100vh !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
}

/* Login page container */
body:has(form[action*="login"]) .main-container,
body:has(.widget-header:contains("Login")) .main-container,
body:has(.widget-header:contains("Authenticate")) .main-container,
body[class*="login"] .main-container {
    max-width: 500px !important;
    width: 90% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Login widget box styling */
body:has(form[action*="login"]) .widget-box,
body:has(.widget-header:contains("Login")) .widget-box,
body:has(.widget-header:contains("Authenticate")) .widget-box,
body[class*="login"] .widget-box {
    background-color: var(--stackimus-dark-gray) !important;
    border: 2px solid var(--stackimus-green) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(76, 175, 80, 0.1) !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    backdrop-filter: blur(10px) !important;
}

/* Login widget header */
body:has(form[action*="login"]) .widget-header,
body:has(.widget-header:contains("Login")) .widget-header,
body:has(.widget-header:contains("Authenticate")) .widget-header,
body[class*="login"] .widget-header {
    background: linear-gradient(135deg, var(--stackimus-green), var(--stackimus-light-green)) !important;
    border-radius: 0 !important;
    text-align: center !important;
    padding: 2rem 1.5rem !important;
    color: white !important;
    border-bottom: none !important;
    position: relative !important;
}

/* Login widget header text */
body:has(form[action*="login"]) .widget-header h4,
body:has(.widget-header:contains("Login")) .widget-header h4,
body:has(.widget-header:contains("Authenticate")) .widget-header h4,
body[class*="login"] .widget-header h4,
body:has(form[action*="login"]) .widget-header .widget-title,
body:has(.widget-header:contains("Login")) .widget-header .widget-title,
body:has(.widget-header:contains("Authenticate")) .widget-header .widget-title,
body[class*="login"] .widget-header .widget-title {
    color: white !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Login widget body */
body:has(form[action*="login"]) .widget-body,
body:has(.widget-header:contains("Login")) .widget-body,
body:has(.widget-header:contains("Authenticate")) .widget-body,
body[class*="login"] .widget-body {
    padding: 2.5rem 2rem !important;
    background-color: var(--stackimus-dark-gray) !important;
    color: var(--stackimus-text-light) !important;
}

/* Login form labels */
body:has(form[action*="login"]) .form-group label,
body:has(.widget-header:contains("Login")) .form-group label,
body:has(.widget-header:contains("Authenticate")) .form-group label,
body[class*="login"] .form-group label,
body:has(form[action*="login"]) .control-label,
body:has(.widget-header:contains("Login")) .control-label,
body:has(.widget-header:contains("Authenticate")) .control-label,
body[class*="login"] .control-label {
    color: var(--stackimus-text-light) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

/* Login form styling */
body:has(form[action*="login"]) .form-group,
body:has(.widget-header:contains("Login")) .form-group,
body:has(.widget-header:contains("Authenticate")) .form-group,
body[class*="login"] .form-group {
    margin-bottom: 2rem !important;
}

body:has(form[action*="login"]) .form-control,
body:has(.widget-header:contains("Login")) .form-control,
body:has(.widget-header:contains("Authenticate")) .form-control,
body[class*="login"] .form-control {
    background-color: var(--stackimus-medium-gray) !important;
    border: 2px solid var(--stackimus-border) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    color: var(--stackimus-white) !important;
    transition: all 0.3s ease !important;
}

body:has(form[action*="login"]) .form-control:focus,
body:has(.widget-header:contains("Login")) .form-control:focus,
body:has(.widget-header:contains("Authenticate")) .form-control:focus,
body[class*="login"] .form-control:focus {
    border-color: var(--stackimus-green) !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25) !important;
    outline: none !important;
    background-color: var(--stackimus-light-gray) !important;
}

body:has(form[action*="login"]) .form-control::placeholder,
body:has(.widget-header:contains("Login")) .form-control::placeholder,
body:has(.widget-header:contains("Authenticate")) .form-control::placeholder,
body[class*="login"] .form-control::placeholder {
    color: var(--stackimus-text-muted) !important;
}

/* Login button styling */
body:has(form[action*="login"]) .btn-primary,
body:has(.widget-header:contains("Login")) .btn-primary,
body:has(.widget-header:contains("Authenticate")) .btn-primary,
body[class*="login"] .btn-primary,
body:has(form[action*="login"]) .btn,
body:has(.widget-header:contains("Login")) .btn,
body:has(.widget-header:contains("Authenticate")) .btn,
body[class*="login"] .btn {
    background: linear-gradient(135deg, var(--stackimus-green), var(--stackimus-light-green)) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    margin-top: 10px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

body:has(form[action*="login"]) .btn-primary:hover,
body:has(.widget-header:contains("Login")) .btn-primary:hover,
body:has(.widget-header:contains("Authenticate")) .btn-primary:hover,
body[class*="login"] .btn-primary:hover,
body:has(form[action*="login"]) .btn:hover,
body:has(.widget-header:contains("Login")) .btn:hover,
body:has(.widget-header:contains("Authenticate")) .btn:hover,
body[class*="login"] .btn:hover {
    background: linear-gradient(135deg, var(--stackimus-light-green), var(--stackimus-accent-green)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.4) !important;
}

/* Logo container for login page */
.login-logo-container {
    background-color: #141416 !important;
    padding: 2rem !important;
    border-radius: 20px !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(76, 175, 80, 0.1) !important;
    text-align: center !important;
    border: 2px solid rgba(76, 175, 80, 0.2) !important;
}

.login-logo-container img {
    max-width: 280px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Remove any top navigation on login pages */
body:has(form[action*="login"]) .navbar,
body:has(.widget-header:contains("Login")) .navbar,
body:has(.widget-header:contains("Authenticate")) .navbar,
body[class*="login"] .navbar {
    display: none !important;
}

/* Hide footer on login pages */
body:has(form[action*="login"]) #stackimus-footer,
body:has(.widget-header:contains("Login")) #stackimus-footer,
body:has(.widget-header:contains("Authenticate")) #stackimus-footer,
body[class*="login"] #stackimus-footer {
    display: none !important;
}

/* Login page links styling */
body:has(form[action*="login"]) a,
body:has(.widget-header:contains("Login")) a,
body:has(.widget-header:contains("Authenticate")) a,
body[class*="login"] a {
    color: var(--stackimus-green) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    font-weight: 500 !important;
}

body:has(form[action*="login"]) a:hover,
body:has(.widget-header:contains("Login")) a:hover,
body:has(.widget-header:contains("Authenticate")) a:hover,
body[class*="login"] a:hover {
    color: var(--stackimus-light-green) !important;
    text-shadow: 0 0 8px rgba(76, 175, 80, 0.3) !important;
}

/* Alert/message styling on login page */
body:has(form[action*="login"]) .alert,
body:has(.widget-header:contains("Login")) .alert,
body:has(.widget-header:contains("Authenticate")) .alert,
body[class*="login"] .alert {
    background-color: rgba(139, 69, 19, 0.9) !important;
    border: 2px solid #CD853F !important;
    color: #FFE4B5 !important;
    border-radius: 12px !important;
    padding: 18px !important;
    margin-bottom: 1.5rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3) !important;
}

/* Text readability improvements */
body:has(form[action*="login"]) *,
body:has(.widget-header:contains("Login")) *,
body:has(.widget-header:contains("Authenticate")) *,
body[class*="login"] * {
    text-rendering: optimizeLegibility !important;
}

/* Additional text color fixes */
body:has(form[action*="login"]) .widget-body *,
body:has(.widget-header:contains("Login")) .widget-body *,
body:has(.widget-header:contains("Authenticate")) .widget-body *,
body[class*="login"] .widget-body * {
    color: var(--stackimus-text-light) !important;
}

body:has(form[action*="login"]) .widget-body input,
body:has(.widget-header:contains("Login")) .widget-body input,
body:has(.widget-header:contains("Authenticate")) .widget-body input,
body[class*="login"] .widget-body input {
    color: var(--stackimus-white) !important;
}

/* Mobile responsiveness for login */
@media (max-width: 768px) {
    body:has(form[action*="login"]) .main-container,
    body:has(.widget-header:contains("Login")) .main-container,
    body:has(.widget-header:contains("Authenticate")) .main-container,
    body[class*="login"] .main-container {
        width: 95% !important;
        padding: 1rem !important;
    }
    
    .login-logo-container {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .login-logo-container img {
        max-width: 220px !important;
    }
}

/* ===== LOGO BACKGROUND STYLING ===== */
/* Applied everywhere logos appear */
.logo-container,
.navbar-brand img,
img[src*="logo"],
img[src*="stackimus"],
.widget-header img,
.header img {
    background-color: #141416 !important;
    padding: 8px !important;
    border-radius: 8px !important;
}

/* Specific logo styling for login page */
.login-page .logo-container {
    background-color: #141416 !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    display: inline-block !important;
    margin-bottom: 1rem !important;
}

.login-page .logo-container img {
    max-width: 200px !important;
    height: auto !important;
    display: block !important;
}

/* ===== THEME INDICATOR ===== */
/* This helps verify the theme is loaded - remove in production */
.page-content:after {
    content: "Stackimus Theme v1.0";
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: linear-gradient(135deg, var(--stackimus-green), var(--stackimus-light-green));
    color: var(--stackimus-white);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    opacity: 0.8;
}

@media print {
    .page-content:after {
        display: none !important;
    }
}