/* ==========================================================================
   XP Service Hub - Dark Theme
   Professional dark theme with softer contrast and adjusted shadows
   ========================================================================== */

/* ---- Dark Theme ---- */
[data-theme="dark"] {
    --bg-body:                  #1a1a2e;
    --bg-main:                  #16213e;
    --bg-sidebar:               #0f0f23;
    --bg-sidebar-hover:         #1a1a3a;
    --bg-sidebar-active:        #1a73e8;
    --bg-navbar:                #16213e;
    --bg-card:                  #1e2a4a;
    --bg-input:                 #1a2340;
    --bg-input-focus:           #1e2a4a;
    --bg-dropdown:              #1e2a4a;
    --bg-modal:                 #1e2a4a;
    --bg-overlay:               rgba(0, 0, 0, 0.7);
    --bg-code:                  #0f0f23;
    --bg-table-header:          #152038;
    --bg-table-hover:           #1a2845;
    --bg-table-stripe:          #172440;

    --text-primary:             #e8eaed;
    --text-secondary:           #bdc1c6;
    --text-muted:               #9aa0a6;
    --text-inverse:             #202124;
    --text-link:                #8ab4f8;
    --text-link-hover:          #aecbfa;
    --text-sidebar:             #e8eaed;
    --text-sidebar-muted:       #9aa0a6;
    --text-navbar:              #e8eaed;
    --text-on-primary:          #ffffff;

    --border-color:             #2d3a5c;
    --border-color-light:       #253050;
    --border-color-dark:        #3d4a6c;
    --border-color-focus:       #8ab4f8;
    --border-color-input:       #2d3a5c;

    /* Softer shadows for dark mode */
    --shadow-sm:                0 1px 2px 0 rgba(0, 0, 0, 0.3),
                                0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --shadow-md:                0 1px 3px 0 rgba(0, 0, 0, 0.4),
                                0 4px 8px 3px rgba(0, 0, 0, 0.2);
    --shadow-lg:                0 4px 8px 0 rgba(0, 0, 0, 0.5),
                                0 8px 16px 6px rgba(0, 0, 0, 0.25);
    --shadow-focus:             0 0 0 3px rgba(138, 180, 248, 0.3);

    /* Adjusted semantic colors for dark backgrounds */
    --color-primary:            #8ab4f8;
    --color-primary-hover:      #aecbfa;
    --color-primary-light:      #1a2845;
    --color-primary-dark:       #669df6;

    --color-success:            #81c995;
    --color-success-hover:      #a8dab5;
    --color-success-light:      #1a2e25;

    --color-danger:             #f28b82;
    --color-danger-hover:       #f6aea8;
    --color-danger-light:       #2e1a1a;

    --color-warning:            #fdd663;
    --color-warning-hover:      #fde293;
    --color-warning-light:      #2e2a1a;

    --color-info:               #8ab4f8;
    --color-info-hover:         #aecbfa;
    --color-info-light:         #1a2845;

    --color-accent:             #fdd663;
    --color-accent-hover:       #fde293;
    --color-accent-light:       #2e2a1a;

    --color-secondary:          #9aa0a6;
    --color-secondary-hover:    #bdc1c6;
    --color-secondary-light:    #253050;

    color-scheme: dark;
}

/* ---- Dark-specific component adjustments ---- */
[data-theme="dark"] .sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
}

[data-theme="dark"] .navbar {
    background: var(--bg-navbar);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .table th {
    background: var(--bg-table-header);
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

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

[data-theme="dark"] .table tbody tr:hover {
    background: var(--bg-table-hover);
}

[data-theme="dark"] .form-control {
    background: var(--bg-input);
    border-color: var(--border-color-input);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
    background: var(--bg-input-focus);
    border-color: var(--border-color-focus);
    box-shadow: var(--shadow-focus);
}

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

[data-theme="dark"] .dropdown-menu {
    background: var(--bg-dropdown);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--bg-table-hover);
}

[data-theme="dark"] .modal-content {
    background: var(--bg-modal);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--border-color-dark);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--bg-table-hover);
}

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

[data-theme="dark"] .breadcrumb a {
    color: var(--text-link);
}

[data-theme="dark"] .badge-status {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] img,
[data-theme="dark"] svg {
    opacity: 0.92;
}

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

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

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

[data-theme="dark"] .ai-widget-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .ai-widget-message--assistant {
    background: var(--bg-input);
}

[data-theme="dark"] ::selection {
    background: rgba(138, 180, 248, 0.3);
    color: #ffffff;
}

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-main);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color-dark);
    border-radius: var(--radius-full);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}