:root {
    --primary-color: #9945FF;
    --secondary-color: #14F195;
    --accent-blue: #3B82F6;
    --accent-green: #10B981;
    --accent-yellow: #F59E0B;
    --accent-purple: #8B5CF6;
}

/* Light theme (default) */
[data-theme="light"] {
    --bg-color: #f8f9fa;
    --sidebar-bg: #ffffff;
    --main-bg: #ffffff;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --text-secondary: #9ca3af;
    --border-color: #e5e7eb;
    --hover-bg: #f3f4f6;
    --input-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.1);
    --card-shadow: rgba(0, 0, 0, 0.05);
    --section-gap: 1rem;
    --card-gap: 0.75rem;
}

/* Dark theme */
[data-theme="dark"] {
    --bg-color: #0a0a0a;
    --sidebar-bg: #1a1a1a;
    --main-bg: #0a0a0a;
    --text-color: #ffffff;
    --text-muted: #a0a0a0;
    --text-secondary: #666666;
    --border-color: #2a2a2a;
    --hover-bg: #2a2a2a;
    --input-bg: #0f0f0f;
    --shadow: rgba(0, 0, 0, 0.8);
    --card-shadow: rgba(0, 0, 0, 0.6);
    --section-gap: 1rem;
    --card-gap: 0.75rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

/* Dark mode toggle */
.theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-color);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.theme-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(153, 69, 255, 0.2);
}

.theme-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-icon {
    transform: rotate(180deg);
}

/* Common container styles */
.container {
    background: var(--sidebar-bg);
    transition: background-color 0.3s ease;
}

.card, .tool-card {
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* Text colors */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color) !important;
}

p, span, div, li, td, th {
    color: var(--text-color);
}

.text-danger {
    color: #dc3545 !important;
}

.text-success {
    color: #198754 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.text-info {
    color: #0dcaf0 !important;
}

/* Small text elements */
small, .small, .text-small {
    color: var(--text-muted) !important;
}

/* Form elements */
input, textarea, select, .form-control {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus, .form-control:focus {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(153, 69, 255, 0.2) !important;
}

input::placeholder, textarea::placeholder, .form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* Form labels and text */
.form-label, label {
    color: var(--text-color) !important;
    font-weight: 500;
}

.form-text {
    color: var(--text-muted) !important;
}

.form-check-label {
    color: var(--text-color) !important;
}

/* Form check inputs (checkboxes and radio buttons) */
.form-check-input {
    background-color: var(--input-bg) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 4px !important;
    width: 18px !important;
    height: 18px !important;
}

.form-check-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(153, 69, 255, 0.2) !important;
}

.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

.form-check-input[type=radio] {
    border-radius: 50% !important;
}

.form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-check-input:not(:checked) {
    background-image: none !important;
}

/* Button styles */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: #8030e0 !important;
    border-color: #8030e0 !important;
    color: white !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.btn-secondary {
    background-color: var(--hover-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.btn-secondary:hover {
    background-color: var(--border-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Table styles */
.table {
    color: var(--text-color) !important;
    background-color: var(--sidebar-bg) !important;
}

.table th,
.table td {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.table thead th {
    background-color: var(--hover-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--hover-bg) !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--sidebar-bg) !important;
}

.table-dark {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
}

.table-dark th,
.table-dark td {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Alert styles */
.alert {
    background-color: var(--hover-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.alert-success {
    background-color: rgba(25, 135, 84, 0.1) !important;
    border-color: #198754 !important;
    color: #198754 !important;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

.alert-info {
    background-color: rgba(13, 202, 240, 0.1) !important;
    border-color: #0dcaf0 !important;
    color: #0dcaf0 !important;
}

/* Progress bar */
.progress {
    background-color: var(--hover-bg);
}

.progress-bar {
    background-color: var(--primary-color);
}

/* Modal styles */
.modal-content {
    background-color: var(--sidebar-bg);
    border-color: var(--border-color);
}

.modal-header {
    border-bottom-color: var(--border-color);
}

.modal-footer {
    border-top-color: var(--border-color);
}

/* Additional elements that need theme support */
.info-box {
    background-color: var(--hover-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.loader {
    border-color: var(--border-color) !important;
    border-top-color: var(--primary-color) !important;
}

/* Links */
a {
    color: var(--primary-color);
}

a:hover {
    color: #8030e0;
}

.back-btn {
    color: var(--primary-color) !important;
}

.back-btn:hover {
    color: #8030e0 !important;
}

/* List items */
ul, ol {
    color: var(--text-color);
}

/* Strong and bold text */
strong, b {
    color: var(--text-color) !important;
}

/* Code elements */
code, pre {
    background-color: var(--hover-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Tab styles */
.nav-tabs {
    border-bottom: 1px solid var(--border-color) !important;
}

.nav-tabs .nav-link {
    background-color: var(--hover-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    border-bottom: none !important;
}

.nav-tabs .nav-link:hover {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--border-color) var(--border-color) var(--sidebar-bg) !important;
    color: var(--primary-color) !important;
}

/* Tab content */
.tab-content {
    background-color: var(--sidebar-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
    padding: 1rem !important;
}

.tab-pane {
    background-color: var(--sidebar-bg) !important;
    color: var(--text-color) !important;
}

/* Bootstrap nav pills (alternative tab style) */
.nav-pills .nav-link {
    background-color: var(--hover-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

.nav-pills .nav-link:hover {
    background-color: var(--sidebar-bg) !important;
    color: var(--text-color) !important;
}

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

/* Custom tab styles for specific implementations */
.btn-group .btn {
    background-color: var(--hover-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.btn-group .btn:hover {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.btn-group .btn.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

/* Badge styles */
.badge {
    background-color: var(--hover-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

.badge-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Dropdown styles */
.dropdown-menu {
    background-color: var(--sidebar-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.dropdown-item {
    color: var(--text-color) !important;
}

.dropdown-item:hover {
    background-color: var(--hover-bg) !important;
    color: var(--text-color) !important;
}

/* Input group styles */
.input-group-text {
    background-color: var(--hover-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .theme-toggle {
        font-size: 11px;
        padding: 6px 10px;
    }
}