/* qiu-components.css */

/* ================== VARIABLES & THEME ================== */
:root {
    --color-primary: #e92d30;
    --color-primary-content: #ffffff;
    --color-secondary: #1e293b;
    --color-base-100: #ffffff;
    --color-base-200: #f8fafc;
    --color-base-300: #e2e8f0;
    --color-gray-50: #F9FAFB;
    --color-gray-50-hover: #F3F4F6; /* Tailwind gray-100 */
    --color-bg-red-600: #dc2626;
    --color-base-content: #1e293b;
    --color-primary-50: #fef2f2;
    --color-error: #ef4444;
    --color-blue-bg: #dbeafe;    /* bg-blue-100 */
    --color-blue-text: #1d4ed8;  /* text-blue-700 */
    --color-gray-600: #4B5563; /* Tailwind text-gray-600 */
}

html[data-theme="dark"] {
    --color-primary: #e92d30;
    --color-primary-content: #ffffff;
    --color-secondary: #94a3b8;
    --color-base-100: #0f172a;
    --color-base-200: #1e293b;
    --color-base-300: #334155;
    --color-bg-red-600: #ef4444;
    --color-gray-50: #334155;
    --color-gray-50-hover: #475569; /* Tailwind slate-600 */
    --color-base-content: #e2e8f0;
    --color-primary-50: #450a0a; 
    --color-error: #f87171;
    --color-blue-bg: #1e3a8a;    /* bg-blue-900 */
    --color-blue-text: #bfdbfe; /* text-blue-200 */
    --color-gray-600: #D1D5DB;
    
}

.bg-base-100 { background-color: var(--color-base-100); }
.bg-base-200 { background-color: var(--color-base-200); }
.bg-base-300 { background-color: var(--color-base-300); }
.text-base-content { color: var(--color-base-content); }
.text-secondary { color: var(--color-secondary); }

.bg-primary { background-color: var(--color-primary); }
.text-primary-content { color: var(--color-primary-content); }

/* ================== SCROLLBAR ================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; }

/* ================== SIDEBAR STYLES ================== */
.sidebar-bg-themed {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
}

html[data-theme='dark'] .sidebar-bg-themed {
    background-color: var(--color-base-100);
    color: var(--color-base-content);
}

.sidebar-link-wrapper {
    transition: background-color 150ms;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.sidebar-link-wrapper:hover { background-color: rgba(0, 0, 0, 0.1); }
.sidebar-link-wrapper.active { background-color: rgba(0, 0, 0, 0.2); }
html[data-theme='dark'] .sidebar-link-wrapper.active { background-color: var(--color-base-300); }

/* Sidebar Overlay for Mobile */
#sidebar-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dimmed background */
    backdrop-filter: blur(2px); /* Optional: nice blur effect */
    z-index: 40; /* High z-index, but below sidebar (z-50) */
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.overlay-visible { opacity: 1 !important; visibility: visible !important; }

/* ================== FLOATING TOGGLE ================== */
#floating-sidebar-toggle {
    transition: opacity 0.3s ease;
}



/* Fix for blocking content: Push content down on mobile if Topbar is missing */
@media (max-width: 768px) {
    body.qiu-mobile-spacer {
        padding-top: 60px !important; /* Reserves space for the floating button */
    }
}

/* ================== GLOBAL TOOLTIP ================== */
#global-tooltip {
    position: fixed;
    padding: 6px 10px;
    border-radius: 6px;
    background-color: #1f2937;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    z-index: 1000; /* Highest priority */
    font-size: 0.875rem;
    pointer-events: none; /* Crucial: Mouse ignores tooltip so it doesn't trigger mouseleave on the link */
    opacity: 0;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    white-space: nowrap;
}
.tooltip-visible { opacity: 1 !important; }

body:not(:has(qiu-sidebar)) #main-content {
    margin-left: 0 !important;
}

/* Container Layout */
qiu-tab {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* Aligns tabs to bottom of their row */
    width: 100%;
}

/* TAB BUTTON STYLES */
qiu-tab-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    margin-right: 4px;
    margin-bottom: -1px; /* Overlap the panel border */
    
    /* Default (Inactive) State */
    background-color: var(--color-base-200);
    color: var(--color-base-content);
    border: 1px solid var(--color-base-300);
    border-bottom: 1px solid var(--color-base-300); /* Adds the line under inactive tabs */
}

qiu-tab-button:hover {
    background-color: var(--color-base-300);
    color: var(--color-base-content);
    z-index: 30;
}

/* Active State for Button */
qiu-tab-button[active] {
    z-index: 20;
    background-color: var(--color-base-100);
    color: var(--color-primary);
    font-weight: 600;
    
    /* Border Logic */
    border-top: 1px solid var(--color-base-300);
    border-left: 1px solid var(--color-base-300);
    border-right: 1px solid var(--color-base-300);
    border-bottom: 1px solid transparent; /* Hide bottom border to merge with panel */
    
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

/* PANEL STYLES */
qiu-tab-panel {
    display: none; /* Hidden by default */
    width: 100%;
    order: 999; /* Forces panels to wrap to the next line below buttons */
    
    /* Content Container Styles */
    background-color: var(--color-base-100);
    padding: 2rem;
    border: 1px solid var(--color-base-300);
    border-top: 1px solid var(--color-base-300); /* The line that connects to inactive tabs */
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border-top-right-radius: 0.5rem; /* Rounded corner if needed */
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

qiu-tab-panel[active] {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0.9; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}