/**
 * CNGate Dark Blue Theme
 * Inspired by 10mail.app
 * Created: 2025-11-18
 */

:root {
    /* Primary Dark Colors */
    --primary-dark: #1a1a2e;
    --primary-darker: #16213e;
    --primary-accent: #0f3460;

    /* Accent Colors */
    --accent-purple: #667eea;
    --accent-indigo: #764ba2;
    --accent-cyan: #06b6d4;
    --accent-blue: #3b82f6;
    --accent-coral: #ff6b6b;
    --accent-success: #10b981;
    --accent-success-light: #6ee7b7;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;
    --accent-danger-light: #fca5a5;
    --accent-info: #3b82f6;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;

    /* Borders & Shadows */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-light: rgba(255, 255, 255, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-cyan-blue: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);

    /* Component Colors */
    --card-bg: #1a1a2e;
    --card-border: rgba(255, 255, 255, 0.1);
    --input-bg: #16213e;
    --input-border: rgba(255, 255, 255, 0.2);
    --input-focus-border: #667eea;

    /* Button Colors */
    --btn-primary-bg: #667eea;
    --btn-primary-hover: #764ba2;
    --btn-secondary-bg: #6b7280;
    --btn-secondary-hover: #4b5563;
    --btn-success-bg: #10b981;
    --btn-success-hover: #059669;
    --btn-danger-bg: #ef4444;
    --btn-danger-hover: #dc2626;
    --btn-warning-bg: #f59e0b;
    --btn-warning-hover: #d97706;
    --btn-info-bg: #3b82f6;
    --btn-info-hover: #2563eb;

    /* Table Colors */
    --table-header-bg: #0f3460;
    --table-row-bg: #1a1a2e;
    --table-row-hover: #16213e;
    --table-border: rgba(255, 255, 255, 0.1);

    /* Alert Colors */
    --alert-success-bg: rgba(16, 185, 129, 0.1);
    --alert-success-border: #10b981;
    --alert-danger-bg: rgba(239, 68, 68, 0.1);
    --alert-danger-border: #ef4444;
    --alert-warning-bg: rgba(245, 158, 11, 0.1);
    --alert-warning-border: #f59e0b;
    --alert-info-bg: rgba(59, 130, 246, 0.1);
    --alert-info-border: #3b82f6;
}

/* Base Styles */
body {
    background-color: var(--primary-darker);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Card Styles */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    padding: 2rem;
}

/* Form Controls */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    border-radius: 4px;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    background-color: var(--input-bg);
    border-color: var(--input-focus-border);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* Button Styles */
.btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--gradient-primary);
    border: none;
    color: var(--text-primary);
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border: none;
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
}

.btn-success {
    background-color: var(--btn-success-bg);
    border: none;
    color: var(--text-primary);
}

.btn-success:hover {
    background-color: var(--btn-success-hover);
}

.btn-danger {
    background-color: var(--btn-danger-bg);
    border: none;
    color: var(--text-primary);
}

.btn-danger:hover {
    background-color: var(--btn-danger-hover);
}

.btn-warning {
    background-color: var(--btn-warning-bg);
    border: none;
    color: var(--text-primary);
}

.btn-warning:hover {
    background-color: var(--btn-warning-hover);
}

.btn-info {
    background-color: var(--btn-info-bg);
    border: none;
    color: var(--text-primary);
}

.btn-info:hover {
    background-color: var(--btn-info-hover);
}

/* Table Styles */
table {
    color: var(--text-primary);
}

table thead {
    background-color: var(--table-header-bg);
}

table tbody tr {
    background-color: var(--table-row-bg);
    border-bottom: 1px solid var(--table-border);
}

table tbody tr:hover {
    background-color: var(--table-row-hover);
}

table th,
table td {
    border-color: var(--table-border);
}

/* Alert Styles */
.alert {
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
}

.alert-success {
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
    color: var(--accent-success-light);
}

.alert-danger {
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
    color: var(--accent-danger-light);
}

.alert-warning {
    background-color: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--accent-warning);
}

.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--accent-info);
}

/* Link Styles */
a {
    color: var(--accent-purple);
    text-decoration: none;
}

a:hover {
    color: var(--accent-indigo);
    text-decoration: underline;
}

/* Label Styles */
label {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Code Styles */
code {
    background-color: var(--input-bg);
    color: var(--accent-cyan);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Badge Styles */
.badge {
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
}

.badge-primary {
    background: var(--gradient-primary);
}

.badge-success {
    background-color: var(--accent-success);
}

.badge-danger {
    background-color: var(--accent-danger);
}

.badge-warning {
    background-color: var(--accent-warning);
}

.badge-info {
    background-color: var(--accent-info);
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--primary-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-accent);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-purple);
}