/* Bootstrap Component Overrides & Custom Glass UI */

/* 
   -------------------------------------------------------------------------
   1. FLOATING GLASS MENU
   -------------------------------------------------------------------------
*/
/* Wrapper handles fixed positioning */
.fixed-top-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding-top: 1.5rem;
    pointer-events: none; /* Allow clicks to pass through wrapper */
}

/* Ensure container doesn't block clicks in empty spaces */
.fixed-top-wrapper .container {
    pointer-events: none;
}

.floating-menu {
    position: relative;
    width: 100%;        /* Fill the container */
    pointer-events: auto; /* Re-enable clicks on the menu itself */
    
    display: flex;
    align-items: center;
    gap: 0.75rem;
    
    /* Visuals: Less blur, more opaque */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    
    transition: all 0.3s ease;
}

/* Dark Mode Menu Background */
[data-theme="dark"] .floating-menu {
    background: rgba(30, 30, 35, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

.floating-menu .nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.floating-menu .nav-link:hover {
    color: var(--color-primary);
    background: rgba(59, 130, 246, 0.1);
}

/* Dark Mode Nav Link Fix */
[data-theme="dark"] .floating-menu .nav-link {
    color: rgba(255, 255, 255, 0.9); /* Bright white for visibility */
}
[data-theme="dark"] .floating-menu .nav-link:hover {
    color: #fff;
}

.floating-menu .nav-link.active {
    color: #fff;
    background: var(--color-primary-gradient);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.floating-menu .navbar-brand {
    font-weight: 800;
    font-size: 1.3rem;
    padding-right: 1.5rem;
    margin-right: 0.5rem;
    border-right: 1px solid var(--text-secondary);
    background: var(--color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Mobile responsive menu adjustments */
@media (max-width: 768px) {
    .fixed-top-wrapper {
        top: auto;
        bottom: 0;
        padding-top: 0;
        padding-bottom: 1.5rem;
    }

    .floating-menu {
        border-radius: 1.5rem;
        justify-content: space-between;
        padding: 0.75rem 1.25rem;
    }
    
    .floating-menu .navbar-brand {
        display: block;
        border-right: none;
        margin-right: 0;
        font-size: 1.3rem;
    }

    /* Hide standard nav links on mobile */
    .floating-menu .nav-link.desktop-only,
    .floating-menu .dropdown.desktop-only,
    .floating-menu div.desktop-only {
        display: none !important;
    }
}

/* Offcanvas (Mobile Menu Drawer) */
.offcanvas-glass {
    background: var(--bg-surface);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-right: var(--glass-border);
}

.offcanvas-glass .offcanvas-header {
    border-bottom: var(--glass-border);
}

.offcanvas-glass .btn-close {
    filter: invert(var(--invert-icon));
}

/* Dark Mode Offcanvas Fixes */
[data-theme="dark"] .offcanvas-glass .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

[data-theme="dark"] .offcanvas-glass .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 
   -------------------------------------------------------------------------
   2. FORMS & INPUTS
   -------------------------------------------------------------------------
*/
.form-control, .form-select, .form-control-plaintext {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--text-secondary);
    border-radius: 0.75rem;
    color: var(--text-primary);
    backdrop-filter: blur(10px);
    transition: all 0.2s;
}

.form-control:focus, .form-select:focus {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.2);
    color: var(--text-primary);
}

/* Dark Mode Fixes */
[data-theme="dark"] .form-control, 
[data-theme="dark"] .form-select {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15);
    background-color: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .form-label, 
[data-theme="dark"] .form-check-label {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

/* Textarea */
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Checkboxes & Radios */
.form-check-input {
    background-color: rgba(128, 128, 128, 0.2); /* Darker for visibility in light mode */
    border-color: var(--text-secondary);
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
    margin-right: 0.5em;
}
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Switches specific */
.form-switch .form-check-input {
    width: 2.5em;
    border-radius: 2em;
    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='%23666'/%3e%3c/svg%3e"); /* Darker circle for light mode visibility */
    background-color: rgba(128, 128, 128, 0.3); /* Visible track */
    border-color: rgba(128, 128, 128, 0.4);
}
[data-theme="dark"] .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='rgba%28255, 255, 255, 0.7%29'/%3e%3c/svg%3e");
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}
.form-switch .form-check-input:checked {
    background-position: right center;
    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='%23fff'/%3e%3c/svg%3e");
}
.form-switch {
    padding-left: 2.5em; /* Reset Bootstrap padding */
}

/* Range Slider */
.form-range {
    height: 1.5rem;
}
.form-range::-webkit-slider-thumb {
    background: var(--color-primary);
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.5);
    cursor: grab;
}
.form-range::-webkit-slider-runnable-track {
    background: rgba(128, 128, 128, 0.2);
    border-radius: 1rem;
    height: 0.5rem;
}

/* File Upload */
.form-file-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 150px;
    padding: 2rem;
    border: 2px dashed var(--text-secondary);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s;
    text-align: center;
    cursor: pointer;
}
.form-file-upload:hover {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.05);
}

/* Dark Mode File Upload */
[data-theme="dark"] .form-file-upload {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .form-file-upload:hover {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.1);
}

/* 
   -------------------------------------------------------------------------
   3. CARDS & CONTAINERS
   -------------------------------------------------------------------------
*/
.card {
    background: var(--bg-surface);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: var(--glass-border);
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Dark Mode Card Fix */
[data-theme="dark"] .card {
    background: rgba(30, 30, 35, 0.6); /* Slightly darker for contrast */
    border-color: rgba(255, 255, 255, 0.1);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow);
}
.card-header, .card-footer {
    background: rgba(0,0,0,0.03);
    border-color: var(--text-secondary);
}
.card-img-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

/* Info Card (For SEO blocks, highlights) */
.info-card {
    background: var(--bg-surface);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    height: 100%;
    transition: all 0.3s ease;
}

.info-card:hover {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.05);
}

[data-theme="dark"] .info-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .info-card:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--color-primary);
}


/* 
   -------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------
*/
.btn {
    border-radius: 0.75rem;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    transition: all 0.2s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--color-primary-gradient);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
    color: white;
}
.btn-secondary {
    background: transparent;
    border: 1px solid var(--text-secondary);
    color: var(--text-primary);
}
.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(59, 130, 246, 0.1);
}
/* Colorful buttons */
.btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }
.btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; }
.btn-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; }
.btn-info { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: white; }

.btn-icon {
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

/* 
   -------------------------------------------------------------------------
   5. ALERTS & BADGES
   -------------------------------------------------------------------------
*/
.alert {
    border-radius: 1rem;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.alert-success { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
.alert-danger  { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.alert-warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); }
.alert-info    { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); }

.badge {
    border-radius: 0.5rem;
    padding: 0.4em 0.8em;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

/* 
   -------------------------------------------------------------------------
   6. TABLES
   -------------------------------------------------------------------------
*/
.table-glass {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    border-collapse: separate;
    border-spacing: 0 0.5rem;
}
.table-glass thead th {
    border-bottom: 1px solid rgba(128,128,128,0.2);
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem;
}
.table-glass tbody tr {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(5px);
    transition: all 0.2s;
}
.table-glass tbody tr:hover {
    transform: scale(1.005);
    background: rgba(59, 130, 246, 0.05);
}
.table-glass td {
    border: none;
    padding: 1rem;
    vertical-align: middle;
}
.table-glass td:first-child { border-radius: 1rem 0 0 1rem; }
.table-glass td:last-child { border-radius: 0 1rem 1rem 0; }

/* 
   -------------------------------------------------------------------------
   7. TYPOGRAPHY & MISC
   -------------------------------------------------------------------------
*/
.display-title {
    background: var(--color-primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
.lead {
    font-weight: 400;
    color: var(--text-secondary);
}
/* Typography Dark Mode Optimizations */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, 
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #ffffff;
}
/* Ensure paragraph text is explicitly light in dark mode */
[data-theme="dark"] p, 
[data-theme="dark"] li,
[data-theme="dark"] .list-group-item {
    color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .text-secondary {
    color: #a1a1aa !important;
}
[data-theme="dark"] mark {
    background-color: rgba(255, 215, 0, 0.3);
    color: #fff;
}
[data-theme="dark"] code {
    color: #f472b6; /* Pinkish for code */
    background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] s {
    color: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] u {
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1rem;
    font-style: italic;
    color: var(--text-secondary);
    margin: 1.5rem 0;
}
[data-theme="dark"] blockquote {
    color: #d1d5db;
    border-left-color: #60a5fa;
}

/* Avatars */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: white;
    font-weight: bold;
}
.avatar-sm { width: 32px; height: 32px; font-size: 0.8rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }

/* Skeletons */
.skeleton {
    background: linear-gradient(90deg, rgba(128,128,128,0.1) 25%, rgba(128,128,128,0.2) 50%, rgba(128,128,128,0.1) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 0.5rem;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 
   -------------------------------------------------------------------------
   8. PROGRESS & STEPS (FIXED)
   -------------------------------------------------------------------------
*/

/* Timeline */
.timeline {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid rgba(128,128,128,0.2);
}
.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -2.4rem;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid var(--bg-surface); /* Matches card bg */
}

/* Stepper (Flex based, no background hacks) */
.steps-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    margin-bottom: 2rem;
    width: 100%;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1; /* Distribute space */
}

/* Connector Lines between steps */
.step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px; /* Half of circle height */
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--text-secondary);
    opacity: 0.3;
    z-index: -1;
}

[data-theme="dark"] .step-item:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.3); /* Higher contrast for dark mode */
    opacity: 1;
}

.step-item.completed::after {
    background: #10b981 !important; /* Force green if completed */
    opacity: 1;
}

.step-circle {
    width: 32px;
    height: 32px;
    background: var(--bg-surface); /* Card background */
    border: 2px solid var(--text-secondary);
    color: var(--text-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    font-weight: bold;
    transition: all 0.3s;
}

.step-item.active .step-circle {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: white;
}

.step-item.completed .step-circle {
    border-color: #10b981;
    background: #10b981;
    color: white;
}

/* Accordion Dark Mode Fix */
.accordion-glass .accordion-item {
    background: transparent;
    border: none;
    margin-bottom: 0.5rem;
}
.accordion-glass .accordion-button {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border-radius: 1rem !important;
    color: var(--text-primary);
    box-shadow: none;
    border: 1px solid rgba(128, 128, 128, 0.2);
}
[data-theme="dark"] .accordion-glass .accordion-button {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
.accordion-glass .accordion-button:not(.collapsed) {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.accordion-glass .accordion-body {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 0 0 1rem 1rem;
    padding: 1.5rem;
    color: var(--text-secondary);
}

/* Chart Container */
.chart-container {
    position: relative;
    width: 100%;
    min-height: 300px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 1rem;
    padding: 1rem;
}
[data-theme="dark"] .chart-container {
    background: rgba(255, 255, 255, 0.02);
}

canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* 
   -------------------------------------------------------------------------
   9. COMPONENT DARK MODE FIXES (Tables, Tabs, Breadcrumbs, etc.)
   -------------------------------------------------------------------------
*/

/* Global Table Dark Mode Fixes */
[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Reset Bootstrap's cell backgrounds to allow transparency */
[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text-primary);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Fix Striped Rows */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* Fix Hover State */
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(59, 130, 246, 0.15);
    color: #fff;
    box-shadow: none; /* Remove any potential shadow causing artifacts */
}

/* Fix Table Headings specifically */
[data-theme="dark"] .table thead th {
    color: var(--text-secondary);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Tabs Dark Mode */
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
    border-color: transparent;
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: rgba(255,255,255,0.1);
    color: #fff;
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    color: #fff;
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.1);
}

/* Breadcrumbs Dark Mode */
[data-theme="dark"] .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
}

/* Pagination Dark Mode */
[data-theme="dark"] .page-link {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
[data-theme="dark"] .page-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
[data-theme="dark"] .page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
}

/* List Group Dark Mode */
[data-theme="dark"] .list-group-item {
    background-color: transparent; /* Assuming glass effect container */
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown Menu Dark Mode Text & Background */
[data-theme="dark"] .dropdown-menu {
    background-color: rgba(30, 30, 35, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Form Text Dark Mode Visibility */
[data-theme="dark"] .form-text {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Table Dark Mode Visibility Fixes */
[data-theme="dark"] .table-glass {
    --bs-table-color: var(--text-primary);
    color: var(--text-primary);
}
[data-theme="dark"] .table-glass td, 
[data-theme="dark"] .table-glass th {
    color: var(--text-primary);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .table-glass tbody tr:hover {
    background: rgba(59, 130, 246, 0.15);
}