/* 
 * Telecom - Dark Mode Styles
 * Comprehensive dark mode overrides for all components
 * Version: 2.0
 */

/* ==========================================================================
   1. DARK MODE VARIABLES
   ========================================================================== */
[data-theme="dark"] {
    /* Core Background Colors */
    --bg-body: #0a0e27;
    --bg-surface: #0f1629;
    --bg-card: #1a1f3a;
    --bg-sidebar: #0f1629;
    --bg-header: #0f1629;
    --dark-color: #0f1629;

    /* Text Colors */
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;

    /* Border & Dividers */
    --border-color: #1e293b;

    /* Input Elements */
    --input-bg: #0f1629;
    --input-border: #1e293b;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);

    /* Offcanvas (Mobile Menu) - Dark Mode */
    --offcanvas-bg: rgba(15, 23, 42, 0.95);
    --offcanvas-text: #ffffff;
    --offcanvas-text-muted: rgba(255, 255, 255, 0.6);
    --offcanvas-border: rgba(255, 255, 255, 0.08);
    --offcanvas-link-hover: rgba(255, 255, 255, 0.05);
    --offcanvas-active-bg: linear-gradient(90deg, rgba(13, 110, 253, 0.2), rgba(13, 110, 253, 0.05));
    --offcanvas-close-filter: invert(1) grayscale(100%) brightness(200%);
    --offcanvas-icon-bg: rgba(255, 255, 255, 0.05);
    --offcanvas-title-gradient: linear-gradient(45deg, #ffffff, rgba(255, 255, 255, 0.7));
}

/* ==========================================================================
   2. BASE ELEMENTS
   ========================================================================== */
body[data-theme="dark"] {
    background-color: var(--bg-body);
    color: var(--text-main);
}

[data-theme="dark"] .navbar-brand {
    color: var(--text-main);
}

[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: var(--text-main);
}

/* ==========================================================================
   3. DASHBOARD LAYOUT
   ========================================================================== */

/* Sidebar */
[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #0f1629 0%, #0a0e27 100%);
    border-right: 1px solid var(--border-color);
}

[data-theme="dark"] .sidebar-link {
    color: rgba(226, 232, 240, 0.7);
}

[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .sidebar-link.active {
    color: #e2e8f0;
    background: rgba(13, 110, 253, 0.15);
    border-left-color: var(--primary-color);
}

/* Dashboard Header */
[data-theme="dark"] .dashboard-header {
    background-color: var(--dark-color);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .header-icon-btn {
    background: rgba(226, 232, 240, 0.1);
    color: rgba(226, 232, 240, 0.9);
}

[data-theme="dark"] .header-icon-btn:hover {
    background: rgba(226, 232, 240, 0.2);
}

[data-theme="dark"] .user-profile-chip:hover {
    background: rgba(226, 232, 240, 0.1);
    border-color: rgba(226, 232, 240, 0.2);
}

/* Main Content */
[data-theme="dark"] .main-content {
    background-color: var(--bg-body);
}

/* ==========================================================================
   4. DASHBOARD COMPONENTS
   ========================================================================== */

/* Dashboard Cards */
[data-theme="dark"] .dashboard-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

[data-theme="dark"] .dashboard-card:hover {
    border-color: rgba(13, 110, 253, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* KPI Cards */
[data-theme="dark"] .kpi-label {
    color: var(--text-muted);
}

[data-theme="dark"] .kpi-value {
    color: var(--text-main);
}

/* Chart Placeholder */
[data-theme="dark"] .chart-placeholder {
    background: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* ==========================================================================
   5. BOOTSTRAP OVERRIDES
   ========================================================================== */

/* Utilities */
[data-theme="dark"].bg-light,
[data-theme="dark"] .bg-light {
    background-color: var(--bg-surface) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--text-main) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-body {
    color: var(--text-main) !important;
}

[data-theme="dark"] .btn-outline-primary {
    color: #60a5fa;
    border-color: #60a5fa;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #60a5fa;
    color: #0f1629;
    border-color: #60a5fa;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end {
    border-color: var(--border-color) !important;
}

/* Cards */
[data-theme="dark"] .card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

[data-theme="dark"] .card-header {
    background-color: rgba(226, 232, 240, 0.05);
    border-bottom-color: var(--border-color);
    color: var(--text-main);
}

/* Tables */
[data-theme="dark"] .table {
    color: var(--text-main);
    border-color: var(--border-color);
}

[data-theme="dark"] .dashboard-table thead th {
    background-color: var(--bg-surface);
    color: var(--text-muted);
    border-color: var(--border-color);
}

[data-theme="dark"] .dashboard-table tbody td {
    color: var(--text-main);
    border-color: var(--border-color);
    background-color: transparent;
}

[data-theme="dark"] .dashboard-table tbody tr {
    background-color: transparent;
}

[data-theme="dark"] .dashboard-table tbody tr:hover {
    background-color: rgba(226, 232, 240, 0.05);
}

/* Override Bootstrap default table backgrounds */
[data-theme="dark"] .table> :not(caption)>*>* {
    background-color: transparent;
}

[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(226, 232, 240, 0.02);
}

[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(even)>* {
    background-color: transparent;
}

[data-theme="dark"] .table-hover>tbody>tr:hover>* {
    color: var(--text-main);
    background-color: rgba(226, 232, 240, 0.05);
}

[data-theme="dark"] .table-light,
[data-theme="dark"] thead.bg-light,
[data-theme="dark"] .bg-light {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    color: var(--text-main) !important;
}

[data-theme="dark"] .table th {
    background-color: rgba(226, 232, 240, 0.05) !important;
}

[data-theme="dark"] .table-responsive {
    background-color: transparent;
}

[data-theme="dark"] .table tbody,
[data-theme="dark"] .dashboard-table tbody {
    background-color: transparent;
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #1a1f3a;
    border-color: #2d3548;
    color: #e2e8f0;
}

[data-theme="dark"] .form-control::placeholder {
    color: #cbd5e1;
    opacity: 0.9;
}

/* Date input specific styling */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"] {
    background-color: #1a1f3a;
    color: #e2e8f0;
    border-color: #2d3548;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5);
    cursor: pointer;
}

/* Select dropdown arrow */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Select options in dark mode */
[data-theme="dark"] .form-select option {
    background-color: #1a1f3a;
    color: #e2e8f0;
}

[data-theme="dark"] .input-group-text {
    background-color: var(--bg-surface);
    border-color: var(--input-border);
    color: var(--text-main);
}

[data-theme="dark"] .form-label {
    color: var(--text-main);
}

/* Buttons */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-main);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-surface);
    border-color: var(--text-muted);
    color: var(--text-main);
}

[data-theme="dark"] .btn-outline-light,
[data-theme="dark"] .btn-outline-dark {
    color: var(--text-main);
    border-color: rgba(226, 232, 240, 0.3);
}

[data-theme="dark"] .btn-outline-light:hover,
[data-theme="dark"] .btn-outline-dark:hover {
    background-color: rgba(226, 232, 240, 0.1);
    border-color: rgba(226, 232, 240, 0.5);
    color: var(--text-main);
}

/* Badges */
[data-theme="dark"] .badge {
    border: 1px solid transparent;
}

[data-theme="dark"] .bg-success-subtle {
    background-color: rgba(25, 135, 84, 0.2) !important;
}

[data-theme="dark"] .bg-primary-subtle {
    background-color: rgba(13, 110, 253, 0.2) !important;
}

[data-theme="dark"] .bg-info-subtle {
    background-color: rgba(14, 165, 233, 0.2) !important;
}

[data-theme="dark"] .bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.2) !important;
}

[data-theme="dark"] .bg-danger-subtle {
    background-color: rgba(220, 38, 38, 0.2) !important;
}

[data-theme="dark"] .text-success {
    color: #4ade80 !important;
}

[data-theme="dark"] .text-primary,
[data-theme="dark"] .text-telecom {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-info {
    color: #38bdf8 !important;
}

[data-theme="dark"] .text-warning {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-danger {
    color: #f87171 !important;
}

/* List Groups */
[data-theme="dark"] .list-group-item {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-main);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: rgba(226, 232, 240, 0.05);
}

[data-theme="dark"] .list-group-flush .list-group-item {
    background-color: transparent;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-main);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-surface);
    color: var(--text-main);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color);
}

/* Navbar (Public Pages) */
[data-theme="dark"] .navbar {
    background-color: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
    color: var(--text-muted);
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link.active {
    color: var(--primary-color);
}

[data-theme="dark"] .navbar-light .navbar-brand {
    color: var(--text-main) !important;
}

[data-theme="dark"] .navbar-light .navbar-toggler {
    border-color: var(--border-color);
}

[data-theme="dark"] .navbar-light .navbar-toggler-icon {
    filter: invert(1);
    opacity: 0.8;
}

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .modal-title {
    color: var(--text-main);
}

/* Alerts */
[data-theme="dark"] .alert {
    border-color: var(--border-color);
}

/* ==========================================================================
   6. SPECIFIC COMPONENTS
   ========================================================================== */

/* Hero Section */
[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #0a0e27 0%, #0f1629 100%) !important;
}

/* Footer */
[data-theme="dark"] footer {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
}

/* Small Text */
[data-theme="dark"] small {
    color: var(--text-muted);
}

[data-theme="dark"] .small {
    color: var(--text-muted);
}

/* Images & Placeholders */
[data-theme="dark"] img {
    opacity: 0.9;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Accordion */
[data-theme="dark"] .accordion-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--bg-card);
    color: var(--text-main);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(13, 110, 253, 0.1);
    color: var(--primary-color);
    box-shadow: inset 0 -1px 0 var(--border-color);
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(2);
}

[data-theme="dark"] .accordion-body {
    background-color: var(--bg-card);
    color: var(--text-muted);
}

/* View Switcher */
[data-theme="dark"] #viewSwitcher .btn-white {
    background-color: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #viewSwitcher .btn-white:hover {
    background-color: var(--bg-surface);
}

[data-theme="dark"] #viewSwitcher .btn-white.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color) !important;
}

/* ==========================================================================
   7. THEME TOGGLE BUTTON
   ========================================================================== */
[data-theme="dark"] #theme-toggle {
    background: rgba(226, 232, 240, 0.1);
    color: rgba(226, 232, 240, 0.9);
}

[data-theme="dark"] #theme-toggle:hover {
    background: rgba(226, 232, 240, 0.2);
}

/* ==========================================================================
   8. TRANSITIONS
   ========================================================================== */
[data-theme="dark"] * {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}