/* Light Mode - Light Blue Sky Theme */
:root {
    --p1-color: #3b82f6; /* Light blue primary */
    --p1-opty: rgba(59, 130, 246, 0.1);
    --p2-color: #1d4ed8; /* Darker blue for gradients */
    --s1-color: #10b981; /* Success green */
    --s2-color: #ef4444; /* Error red */
    --s3-color: #f59e0b; /* Warning yellow */
    --n0-color: #ffffff; /* White background */
    --n100-color: #f8fafc; /* Light gray background */
    --n200-color: #e2e8f0; /* Border gray */
    --n300-color: #cbd5e1; /* Text gray light */
    --n500-color: #64748b; /* Text gray medium */
    --n700-color: #334155; /* Text gray dark */
    --n900-color: #0f172a; /* Text black */
    --border-color: #e2e8f0;
    --bg1-opty: rgba(59, 130, 246, 0.05);
    --bg2-opty: rgba(16, 185, 129, 0.1);
    --bg3-opty: rgba(239, 68, 68, 0.1);
    --bg4-opty: rgba(245, 158, 11, 0.1);
}

/* Dark mode adjustments */
[data-mode="dark"] {
    --p1-color: #3b82f6;
    --n0-color: #1e293b;
    --n100-color: #334155;
    --n200-color: #475569;
    --n300-color: #64748b;
    --n500-color: #94a3b8;
    --n700-color: #f1f5f9;
    --n900-color: #ffffff;
    --border-color: #334155;
    --bg1-opty: rgba(59, 130, 246, 0.1);
    --bg2-opty: rgba(16, 185, 129, 0.1);
    --bg3-opty: rgba(239, 68, 68, 0.1);
    --bg4-opty: rgba(245, 158, 11, 0.1);
}

/* Adjust main content for full width */
.main-content {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: 100vh;
}

.footer {
    margin-left: 0;
    margin-top: 3rem;
}

.footer__copyright {
    justify-content: center !important;
}

.action-button {
    background: linear-gradient(135deg, var(--p1-color), var(--p2-color));
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-button:hover {
    color: white !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.customer_btn_box {
    background: linear-gradient(135deg, var(--p1-color), var(--p2-color)) !important;
    border-color: var(--p1-color) !important;
    color: #fff !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.customer_btn_box:hover {
    background: white !important;
    border-color: var(--p2-color) !important;
    color: var(--p2-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.customer_btn_box.btn_alt {
    background: transparent !important;
    border-color: var(--p1-color) !important;
    color: var(--p1-color) !important;
}

.customer_btn_box.btn_alt:hover {
    background: var(--p1-color) !important;
    border-color: var(--p1-color) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Blue theme for header buttons */
.customer_btn_box_blue {
    background: var(--p1-color) !important;
    border-color: var(--p1-color) !important;
    color: #fff !important;
}

.p1-color {
    color: var(--p1-color);
}

.dropdown-item {
    cursor: pointer;
}