/* 
 * SADS Premium Dark Mode System
 * Using CSS Variables for modularity and consistency
 */

:root {
    /* Dark Theme Palette (Based on HSL for harmony) */
    --sads-bg-body: #0a0b10;
    --sads-bg-card: #161721;
    --sads-bg-navbar: rgba(22, 23, 33, 0.85);
    --sads-bg-sidebar: #12131a;
    --sads-bg-lighter: #1d1e2b;

    --sads-border: #2b2c40;
    --sads-border-light: #363753;

    --sads-text-primary: #e1e1e6;
    --sads-text-secondary: #a3a3b3;
    --sads-text-muted: #6b6d7d;

    --sads-brand: #696cff;
    --sads-brand-glow: rgba(105, 108, 255, 0.3);

    --sads-glass-blur: blur(12px);
}

.dark-style body {
    background-color: var(--sads-bg-body) !important;
    color: var(--sads-text-primary) !important;
}

/* Layout Elements */
.dark-style .layout-navbar {
    background-color: var(--sads-bg-navbar) !important;
    backdrop-filter: var(--sads-glass-blur);
    border-bottom: 1px solid var(--sads-border);
}

.dark-style .layout-menu,
.dark-style .bg-menu-theme {
    background-color: var(--sads-bg-sidebar) !important;
}

.dark-style .footer {
    background-color: var(--sads-bg-body) !important;
    color: var(--sads-text-muted) !important;
}

/* Cards & Containers */
.dark-style .card,
.dark-style .modal-content,
.dark-style .dropdown-menu {
    background-color: var(--sads-bg-card) !important;
    border: 1px solid var(--sads-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.dark-style .card-header,
.dark-style .modal-header {
    border-bottom: 1px solid var(--sads-border) !important;
}

/* Typography Overrides */
.dark-style h1,
.dark-style h2,
.dark-style h3,
.dark-style h4,
.dark-style h5,
.dark-style h6,
.dark-style .card-title,
.dark-style .modal-title,
.dark-style .app-brand-text {
    color: #fff !important;
}

.dark-style .text-muted {
    color: var(--sads-text-muted) !important;
}

/* Forms */
.dark-style .form-control,
.dark-style .form-select,
.dark-style .input-group-text {
    background-color: var(--sads-bg-body) !important;
    border-color: var(--sads-border) !important;
    color: var(--sads-text-primary) !important;
}

.dark-style .form-control:focus,
.dark-style .form-select:focus {
    border-color: var(--sads-brand) !important;
    box-shadow: 0 0 10px var(--sads-brand-glow) !important;
    background-color: var(--sads-bg-body) !important;
}

/* Tables - High Definition Dark */
.dark-style .table:not(.table-dark) th,
.dark-style .table:not(.table-dark) thead th {
    background-color: var(--sads-bg-lighter) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--sads-border-light) !important;
    font-weight: 700;
}

.dark-style .table td {
    border-color: var(--sads-border) !important;
    color: var(--sads-text-secondary) !important;
}

.dark-style .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* SADS Specific Components */
.dark-style .campaign-island,
.dark-style .campaign-card {
    background-color: var(--sads-bg-card) !important;
    border-color: var(--sads-border) !important;
}

.dark-style .island-header,
.dark-style .campaign-header {
    background-color: var(--sads-bg-lighter) !important;
    border-bottom: 1px solid var(--sads-brand) !important;
}

.dark-style .metric-item {
    background-color: var(--sads-bg-body) !important;
    border: 1px solid var(--sads-border-light) !important;
}

.dark-style .metric-label {
    color: var(--sads-text-muted) !important;
}

.dark-style .metric-value {
    color: #fff !important;
}

.dark-style .notes-box {
    background-color: var(--sads-bg-body) !important;
    border-color: var(--sads-border-light) !important;
    color: var(--sads-text-secondary) !important;
}

.dark-style .ad-box-info {
    background-color: var(--sads-bg-lighter) !important;
    border-right-color: var(--sads-border) !important;
}

.dark-style .ad-box-analysis {
    background-color: var(--sads-bg-card) !important;
}

/* Buttons */
.dark-style .btn-outline-secondary {
    border-color: var(--sads-border) !important;
    color: var(--sads-text-primary) !important;
}

.dark-style .btn-outline-secondary:hover {
    background-color: var(--sads-bg-lighter) !important;
}

/* Scrollbar Refinement */
.dark-style ::-webkit-scrollbar-track {
    background: var(--sads-bg-body);
}

.dark-style ::-webkit-scrollbar-thumb {
    background: var(--sads-border-light);
    border-radius: 10px;
}

.dark-style ::-webkit-scrollbar-thumb:hover {
    background: var(--sads-text-muted);
}

/* Background Helpers */
.dark-style .bg-light,
.dark-style .bg-white {
    background-color: var(--sads-bg-body) !important;
}

.dark-style .bg-lighter {
    background-color: var(--sads-bg-lighter) !important;
}

.dark-style .dark-style-bg-dark {
    background-color: var(--sads-bg-card) !important;
}

.dark-style .dark-style-bg-darker {
    background-color: var(--sads-bg-body) !important;
}

/* Border Helpers */
.dark-style .border {
    border-color: var(--sads-border) !important;
}

/* Pagination */
.dark-style .pagination .page-link {
    background-color: var(--sads-bg-card) !important;
    border-color: var(--sads-border) !important;
    color: var(--sads-text-secondary) !important;
}

.dark-style .pagination .page-item.active .page-link {
    background-color: var(--sads-brand) !important;
    border-color: var(--sads-brand) !important;
    color: #fff !important;
}