/* Dark Mode Styles for ICTerminal */
/* Applied when body has class 'dark-mode' */

/* ============================================
   CSS Variables for Dark Mode
   ============================================ */
body.dark-mode {
    --dm-bg-primary: #0a0a0a;
    --dm-bg-secondary: #111;
    --dm-bg-tertiary: #1a1a1a;
    --dm-bg-card: #111;
    --dm-bg-card-header: #1a1a1a;
    --dm-bg-input: #1a1a1a;
    --dm-bg-hover: #222;
    --dm-bg-selected: rgba(25, 135, 84, 0.25);
    
    --dm-border-primary: #333;
    --dm-border-secondary: #444;
    --dm-border-light: #2a2a2a;
    
    --dm-text-primary: #e0e0e0;
    --dm-text-secondary: #b0b0b0;
    --dm-text-muted: #9a9a9a;
    --dm-text-heading: #d0d0d0;
    
    --dm-success: #198754;
    --dm-danger: #dc3545;
    --dm-warning: #ffc107;
    --dm-info: #0dcaf0;
}

/* ============================================
   Base Body Styles
   ============================================ */
body.dark-mode {
    background-color: var(--dm-bg-primary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode #_pages_plugin_container {
    background-color: var(--dm-bg-primary) !important;
}

/* ============================================
   Navbar Styles
   ============================================ */
body.dark-mode .navbar {
    background-color: var(--dm-bg-tertiary) !important;
    border-bottom: 2px solid var(--dm-border-primary) !important;
}

body.dark-mode .navbar .navbar-brand,
body.dark-mode .navbar a[id*="brand"] {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .navbar .btn-link {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .navbar .btn-link:hover {
    color: var(--bs-primary) !important;
}

body.dark-mode .navbar .bi-person-circle {
    color: var(--dm-text-secondary) !important;
}

/* Dropdown Menu */
body.dark-mode .navbar .dropdown-menu {
    background-color: var(--dm-bg-tertiary) !important;
    border: 1px solid var(--dm-border-primary) !important;
}

body.dark-mode .navbar .dropdown-menu .dropdown-item {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .navbar .dropdown-menu .dropdown-item:hover {
    background-color: var(--dm-bg-hover) !important;
    color: var(--bs-primary) !important;
}

body.dark-mode .navbar .dropdown-menu .dropdown-header {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .navbar .dropdown-menu .dropdown-divider {
    border-color: var(--dm-border-primary) !important;
}

/* ============================================
   Cards
   ============================================ */
body.dark-mode .card {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border-primary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .card-header {
    background-color: var(--dm-bg-card-header) !important;
    border-bottom: 1px solid var(--dm-border-primary) !important;
    color: var(--dm-text-heading) !important;
}

body.dark-mode .card-body {
    background-color: var(--dm-bg-card) !important;
}

body.dark-mode .card-footer {
    background-color: var(--dm-bg-card-header) !important;
    border-top: 1px solid var(--dm-border-primary) !important;
}

/* ============================================
   Tables
   ============================================ */
body.dark-mode .table {
    color: var(--dm-text-primary) !important;
    --bs-table-bg: var(--dm-bg-secondary) !important;
    --bs-table-striped-bg: var(--dm-bg-tertiary) !important;
    --bs-table-hover-bg: var(--dm-bg-hover) !important;
}

body.dark-mode .table thead th {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-secondary) !important;
    border-bottom: 2px solid var(--dm-border-secondary) !important;
}

body.dark-mode .table td,
body.dark-mode .table th {
    border-color: var(--dm-border-primary) !important;
}

/* Dash DataTable */
body.dark-mode .dash-table-container {
    background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .dash-table-container .dash-spreadsheet-container {
    background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .dash-table-container .dash-spreadsheet {
    background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .dash-table-container .dash-header {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .dash-table-container .dash-cell {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-primary) !important;
}

body.dark-mode .dash-table-container .dash-cell.focused {
    background-color: var(--dm-bg-hover) !important;
}

body.dark-mode .dash-table-container .dash-cell.cell--selected {
    background-color: var(--dm-bg-selected) !important;
}

/* Additional Dash DataTable Styles */
body.dark-mode .dash-table-container th {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border-primary) !important;
}

body.dark-mode .dash-table-container td {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-primary) !important;
}

body.dark-mode .dash-table-container .previous-next-container button {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .dash-table-container .page-number {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .dash-table-container input.current-page {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-primary) !important;
}

/* ============================================
   Forms & Inputs
   ============================================ */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border-primary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--bs-primary) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

body.dark-mode .form-control::placeholder {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .input-group-text {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border-primary) !important;
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .form-label {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .form-check-label {
    color: var(--dm-text-primary) !important;
}

/* ============================================
   Buttons
   ============================================ */
body.dark-mode .btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

body.dark-mode .btn-outline-secondary {
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border-secondary) !important;
}

body.dark-mode .btn-outline-light {
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-secondary) !important;
}

body.dark-mode .btn-light {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border-primary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .btn-light:hover {
    background-color: var(--dm-bg-hover) !important;
}

/* ============================================
   Alerts
   ============================================ */
body.dark-mode .alert-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
    border-color: rgba(13, 202, 240, 0.3) !important;
    color: #6edff6 !important;
}

body.dark-mode .alert-secondary {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border-primary) !important;
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .alert-success {
    background-color: rgba(25, 135, 84, 0.15) !important;
    border-color: rgba(25, 135, 84, 0.3) !important;
    color: #75b798 !important;
}

body.dark-mode .alert-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
    color: #ea868f !important;
}

body.dark-mode .alert-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: #ffda6a !important;
}

body.dark-mode .alert-dark {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border-primary) !important;
    color: var(--dm-text-secondary) !important;
}

/* ============================================
   Modals
   ============================================ */
body.dark-mode .modal-content {
    background-color: var(--dm-bg-secondary) !important;
    border: 1px solid var(--dm-border-primary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .modal-header {
    background-color: var(--dm-bg-tertiary) !important;
    border-bottom: 1px solid var(--dm-border-primary) !important;
}

body.dark-mode .modal-header .modal-title {
    color: var(--dm-text-heading) !important;
}

body.dark-mode .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .modal-body {
    background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .modal-footer {
    background-color: var(--dm-bg-tertiary) !important;
    border-top: 1px solid var(--dm-border-primary) !important;
}

/* ============================================
   Tabs
   ============================================ */
body.dark-mode .nav-tabs {
    border-bottom-color: var(--dm-border-primary) !important;
}

body.dark-mode .nav-tabs .nav-link {
    color: var(--dm-text-secondary) !important;
    border-color: transparent !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
    border-color: var(--dm-border-primary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border-primary) var(--dm-border-primary) var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .nav-pills .nav-link {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .nav-pills .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* ============================================
   Badges
   ============================================ */
body.dark-mode .badge.bg-light {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .badge.bg-secondary {
    background-color: #444 !important;
}

/* ============================================
   List Groups
   ============================================ */
body.dark-mode .list-group-item {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border-primary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .list-group-item:hover {
    background-color: var(--dm-bg-hover) !important;
}

body.dark-mode .list-group-item.active {
    background-color: var(--dm-bg-selected) !important;
    border-color: var(--dm-success) !important;
}

/* ============================================
   Accordions
   ============================================ */
body.dark-mode .accordion-item {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border-primary) !important;
}

body.dark-mode .accordion-button {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .accordion-button:not(.collapsed) {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .accordion-body {
    background-color: var(--dm-bg-secondary) !important;
}

/* ============================================
   Popovers & Tooltips
   ============================================ */
body.dark-mode .popover {
    background-color: var(--dm-bg-tertiary) !important;
    border-color: var(--dm-border-primary) !important;
}

body.dark-mode .popover-header {
    background-color: var(--dm-bg-hover) !important;
    border-bottom-color: var(--dm-border-primary) !important;
    color: var(--dm-text-heading) !important;
}

body.dark-mode .popover-body {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .tooltip-inner {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   Scrollbars (Webkit)
   ============================================ */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-primary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   Text Colors
   ============================================ */
body.dark-mode .text-dark {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .text-muted {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .text-secondary {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--dm-text-heading) !important;
}

body.dark-mode .text-light {
    color: var(--dm-text-primary) !important;
}

/* ============================================
   Background Utilities
   ============================================ */
body.dark-mode .bg-light {
    background-color: var(--dm-bg-tertiary) !important;
}

body.dark-mode .bg-white {
    background-color: var(--dm-bg-secondary) !important;
}

/* ============================================
   Borders
   ============================================ */
body.dark-mode .border {
    border-color: var(--dm-border-primary) !important;
}

body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end {
    border-color: var(--dm-border-primary) !important;
}

/* ============================================
   Spinners
   ============================================ */
body.dark-mode .spinner-border {
    color: var(--dm-text-secondary);
}

/* ============================================
   Progress Bars
   ============================================ */
body.dark-mode .progress {
    background-color: var(--dm-bg-tertiary) !important;
}

/* ============================================
   Breadcrumbs
   ============================================ */
body.dark-mode .breadcrumb {
    background-color: var(--dm-bg-tertiary) !important;
}

body.dark-mode .breadcrumb-item a {
    color: var(--bs-primary) !important;
}

body.dark-mode .breadcrumb-item.active {
    color: var(--dm-text-muted) !important;
}

/* ============================================
   Code & Pre
   ============================================ */
body.dark-mode pre,
body.dark-mode code {
    background-color: var(--dm-bg-tertiary) !important;
    color: #e83e8c !important;
}

body.dark-mode pre {
    border: 1px solid var(--dm-border-primary) !important;
    padding: 1rem !important;
}

/* ============================================
   Pagination
   ============================================ */
body.dark-mode .page-link {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-border-primary) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .page-link:hover {
    background-color: var(--dm-bg-hover) !important;
}

body.dark-mode .page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

body.dark-mode .page-item.disabled .page-link {
    background-color: var(--dm-bg-tertiary) !important;
    color: var(--dm-text-muted) !important;
}

/* ============================================
   Inline Subtab Bar
   ============================================ */
body.dark-mode .inline-subtab-bar {
    background-color: var(--dm-bg-tertiary) !important;
    border-bottom-color: var(--dm-border-primary) !important;
}

/* ============================================
   Hover Card Effects
   ============================================ */
body.dark-mode .hover-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
}

/* ============================================
   Dropdown Menus (General)
   ============================================ */
body.dark-mode .dropdown-menu {
    background-color: var(--dm-bg-tertiary) !important;
    border: 1px solid var(--dm-border-primary) !important;
}

body.dark-mode .dropdown-item {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: var(--dm-bg-hover) !important;
    color: var(--bs-primary) !important;
}

body.dark-mode .dropdown-divider {
    border-color: var(--dm-border-primary) !important;
}

/* ============================================
   Containers
   ============================================ */
body.dark-mode .container,
body.dark-mode .container-fluid {
    background-color: transparent !important;
}

/* ============================================
   Selection Highlight
   ============================================ */
body.dark-mode ::selection {
    background-color: rgba(13, 110, 253, 0.4);
    color: white;
}

/* ============================================
   Focus States
   ============================================ */
body.dark-mode *:focus {
    outline-color: var(--bs-primary) !important;
}

/* ============================================
   Dark Mode Toggle Button Style
   ============================================ */
body.dark-mode .dark-mode-toggle-icon {
    color: #ffc107 !important; /* Sun color when in dark mode */
}

body:not(.dark-mode) .dark-mode-toggle-icon {
    color: #6c757d !important; /* Moon color when in light mode */
}

/* ============================================
   Fix for specific components that might 
   have inline styles in dashboard_tab.py
   ============================================ */
body.dark-mode [style*="backgroundColor: '#f8f9fa'"],
body.dark-mode [style*="background-color: #f8f9fa"] {
    background-color: var(--dm-bg-tertiary) !important;
}

/* ============================================
   Config Preview & Definition Lists
   ============================================ */
body.dark-mode .config-preview,
body.dark-mode .config-value,
body.dark-mode .preview-value {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .config-label,
body.dark-mode .preview-label {
    color: var(--dm-text-secondary) !important;
}

/* Small text and labels - ensure good contrast */
body.dark-mode small,
body.dark-mode .small,
body.dark-mode .form-text {
    color: var(--dm-text-muted) !important;
}

/* Definition lists commonly used in config previews */
body.dark-mode dt {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode dd {
    color: var(--dm-text-primary) !important;
}

/* Span and div values in config-style layouts */
body.dark-mode .fw-bold,
body.dark-mode .fw-semibold,
body.dark-mode strong,
body.dark-mode b {
    color: var(--dm-text-primary) !important;
}

/* Row/column based config displays */
body.dark-mode [class*="config"] span:not(.badge),
body.dark-mode [class*="preview"] span:not(.badge) {
    color: var(--dm-text-primary) !important;
}

/* Ensure paragraph text has proper contrast */
body.dark-mode p {
    color: var(--dm-text-primary) !important;
}

body.dark-mode p.text-muted {
    color: var(--dm-text-muted) !important;
}

/* Labels above values (uppercase small text) */
body.dark-mode .text-uppercase {
    color: var(--dm-text-secondary) !important;
}

/* General fallback for any dark gray text */
body.dark-mode [style*="color: #6c757d"],
body.dark-mode [style*="color:#6c757d"],
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color: #555"],
body.dark-mode [style*="color:#555"],
body.dark-mode [style*="color: #212529"],
body.dark-mode [style*="color:#212529"],
body.dark-mode [style*="color: rgb(33, 37, 41)"],
body.dark-mode [style*="color:rgb(33, 37, 41)"],
body.dark-mode [style*="color: rgb(33,37,41)"],
body.dark-mode [style*="color:rgb(33,37,41)"] {
    color: var(--dm-text-primary) !important;
}

/* Bootstrap's default text color - needs override in dark mode */
body.dark-mode,
body.dark-mode .text-body,
body.dark-mode .text-dark {
    color: var(--dm-text-primary) !important;
}

/* Override Bootstrap's default body color variable */
body.dark-mode {
    --bs-body-color: var(--dm-text-primary);
    --bs-body-color-rgb: 224, 224, 224;
}

/* ============================================
   Deploy Step Indicator (Modal Wizard)
   ============================================ */
body.dark-mode .deploy-step-indicator {
    background-color: var(--dm-bg-tertiary) !important;
}

body.dark-mode .deploy-step-number {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .deploy-step-label {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .deploy-step-pending {
    background-color: var(--dm-bg-hover) !important;
    border-color: var(--dm-border-secondary) !important;
    color: var(--dm-text-muted) !important;
}

body.dark-mode .deploy-step-current {
    background-color: var(--dm-bg-secondary) !important;
    border-color: var(--dm-success) !important;
    color: var(--dm-success) !important;
}

body.dark-mode .deploy-step-connector-pending {
    background-color: var(--dm-border-secondary) !important;
}

body.dark-mode .deploy-step-status-pending {
    color: var(--dm-text-muted) !important;
}

/* ============================================
   Home Page Step Cards (Get Started Guide)
   ============================================ */
body.dark-mode .home-steps-container {
    background-color: var(--dm-bg-tertiary) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

body.dark-mode .home-step-title {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .home-step-arrow {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .home-step-card:hover {
    background-color: var(--dm-bg-hover) !important;
}