/**
 * ProCargo Dark Theme CSS
 * Toggle via body.dark-mode class or prefers-color-scheme media query
 * 
 * @package ProCargo
 * @since 2.0.0
 */

/* ============================================
   CSS VARIABLES - LIGHT THEME (Default)
   ============================================ */
:root {
    /* Primary Colors */
    --pc-primary: #5EC7F2;
    --pc-primary-dark: #5368B9;
    --pc-secondary: #E5007E;
    --pc-accent: #5EC7F2;
    
    /* Gradients */
    --pc-gradient-primary: linear-gradient(88deg, #5368B9 -25.12%, #5EC7F2 107.96%);
    --pc-gradient-secondary: linear-gradient(88deg, #E5007E -25.12%, #5EC7F2 107.96%);
    --pc-gradient-hero: linear-gradient(180deg, rgba(94, 199, 242, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
    
    /* Background Colors */
    --pc-bg-primary: #ffffff;
    --pc-bg-secondary: #E3F4FF;
    --pc-bg-tertiary: #f8f9fa;
    --pc-bg-card: #E3F4FF;
    --pc-bg-input: #ffffff;
    --pc-bg-hover: rgba(94, 199, 242, 0.05);
    --pc-bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Text Colors */
    --pc-text-primary: #141414;
    --pc-text-secondary: #666666;
    --pc-text-tertiary: #888888;
    --pc-text-muted: #999999;
    --pc-text-inverse: #ffffff;
    --pc-text-link: #5EC7F2;
    
    /* Border Colors */
    --pc-border-primary: rgba(0, 0, 0, 0.1);
    --pc-border-secondary: rgba(0, 0, 0, 0.05);
    --pc-border-accent: rgba(94, 199, 242, 0.2);
    --pc-border-input: #dddddd;
    --pc-border-focus: #5EC7F2;
    
    /* Status Colors */
    --pc-success: #22c55e;
    --pc-success-bg: rgba(34, 197, 94, 0.1);
    --pc-warning: #f97316;
    --pc-warning-bg: rgba(249, 115, 22, 0.1);
    --pc-error: #ef4444;
    --pc-error-bg: rgba(239, 68, 68, 0.1);
    --pc-info: #3b82f6;
    --pc-info-bg: rgba(59, 130, 246, 0.1);
    
    /* Shadow */
    --pc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --pc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --pc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
    --pc-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    
    /* Transitions */
    --pc-transition-fast: 0.15s ease;
    --pc-transition-normal: 0.3s ease;
    --pc-transition-slow: 0.5s ease;
    
    /* Border Radius */
    --pc-radius-sm: 8px;
    --pc-radius-md: 12px;
    --pc-radius-lg: 16px;
    --pc-radius-xl: 24px;
    --pc-radius-full: 9999px;
    
    /* Spacing */
    --pc-space-xs: 4px;
    --pc-space-sm: 8px;
    --pc-space-md: 16px;
    --pc-space-lg: 24px;
    --pc-space-xl: 32px;
    --pc-space-2xl: 48px;
    
    /* Font */
    --pc-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pc-font-size-xs: 12px;
    --pc-font-size-sm: 14px;
    --pc-font-size-md: 16px;
    --pc-font-size-lg: 18px;
    --pc-font-size-xl: 20px;
    --pc-font-size-2xl: 24px;
    --pc-font-size-3xl: 32px;
    --pc-font-size-4xl: 42px;
}

/* ============================================
   CSS VARIABLES - DARK THEME
   ============================================ */
.dark-mode,
[data-theme="dark"] {
    /* Primary Colors - slightly adjusted for dark */
    --pc-primary: #6DD3FF;
    --pc-primary-dark: #7B8FE0;
    --pc-secondary: #FF4DA6;
    --pc-accent: #6DD3FF;
    
    /* Gradients */
    --pc-gradient-primary: linear-gradient(88deg, #7B8FE0 -25.12%, #6DD3FF 107.96%);
    --pc-gradient-secondary: linear-gradient(88deg, #FF4DA6 -25.12%, #6DD3FF 107.96%);
    --pc-gradient-hero: linear-gradient(180deg, rgba(94, 199, 242, 0.1) 0%, rgba(20, 20, 20, 0) 100%);
    
    /* Background Colors */
    --pc-bg-primary: #0f0f0f;
    --pc-bg-secondary: #1a1a1a;
    --pc-bg-tertiary: #242424;
    --pc-bg-card: #1a1a1a;
    --pc-bg-input: #242424;
    --pc-bg-hover: rgba(94, 199, 242, 0.1);
    --pc-bg-overlay: rgba(0, 0, 0, 0.7);
    
    /* Text Colors */
    --pc-text-primary: #f5f5f5;
    --pc-text-secondary: #a0a0a0;
    --pc-text-tertiary: #808080;
    --pc-text-muted: #666666;
    --pc-text-inverse: #141414;
    --pc-text-link: #6DD3FF;
    
    /* Border Colors */
    --pc-border-primary: rgba(255, 255, 255, 0.1);
    --pc-border-secondary: rgba(255, 255, 255, 0.05);
    --pc-border-accent: rgba(94, 199, 242, 0.3);
    --pc-border-input: #3a3a3a;
    --pc-border-focus: #6DD3FF;
    
    /* Status Colors */
    --pc-success: #4ade80;
    --pc-success-bg: rgba(74, 222, 128, 0.15);
    --pc-warning: #fb923c;
    --pc-warning-bg: rgba(251, 146, 60, 0.15);
    --pc-error: #f87171;
    --pc-error-bg: rgba(248, 113, 113, 0.15);
    --pc-info: #60a5fa;
    --pc-info-bg: rgba(96, 165, 250, 0.15);
    
    /* Shadow - darker for dark mode */
    --pc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --pc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --pc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --pc-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pc-primary: #6DD3FF;
        --pc-primary-dark: #7B8FE0;
        --pc-secondary: #FF4DA6;
        --pc-accent: #6DD3FF;
        --pc-gradient-primary: linear-gradient(88deg, #7B8FE0 -25.12%, #6DD3FF 107.96%);
        --pc-gradient-secondary: linear-gradient(88deg, #FF4DA6 -25.12%, #6DD3FF 107.96%);
        --pc-gradient-hero: linear-gradient(180deg, rgba(94, 199, 242, 0.1) 0%, rgba(20, 20, 20, 0) 100%);
        --pc-bg-primary: #0f0f0f;
        --pc-bg-secondary: #1a1a1a;
        --pc-bg-tertiary: #242424;
        --pc-bg-card: #1a1a1a;
        --pc-bg-input: #242424;
        --pc-bg-hover: rgba(94, 199, 242, 0.1);
        --pc-bg-overlay: rgba(0, 0, 0, 0.7);
        --pc-text-primary: #f5f5f5;
        --pc-text-secondary: #a0a0a0;
        --pc-text-tertiary: #808080;
        --pc-text-muted: #666666;
        --pc-text-inverse: #141414;
        --pc-text-link: #6DD3FF;
        --pc-border-primary: rgba(255, 255, 255, 0.1);
        --pc-border-secondary: rgba(255, 255, 255, 0.05);
        --pc-border-accent: rgba(94, 199, 242, 0.3);
        --pc-border-input: #3a3a3a;
        --pc-border-focus: #6DD3FF;
        --pc-success: #4ade80;
        --pc-success-bg: rgba(74, 222, 128, 0.15);
        --pc-warning: #fb923c;
        --pc-warning-bg: rgba(251, 146, 60, 0.15);
        --pc-error: #f87171;
        --pc-error-bg: rgba(248, 113, 113, 0.15);
        --pc-info: #60a5fa;
        --pc-info-bg: rgba(96, 165, 250, 0.15);
        --pc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --pc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --pc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
        --pc-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
}

/* ============================================
   BASE STYLES USING VARIABLES
   ============================================ */

/* Body */
body {
    font-family: var(--pc-font-family);
    background-color: var(--pc-bg-primary);
    color: var(--pc-text-primary);
    transition: background-color var(--pc-transition-normal), color var(--pc-transition-normal);
}

/* Links */
a {
    color: var(--pc-text-link);
    transition: color var(--pc-transition-fast);
}

a:hover {
    color: var(--pc-primary);
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

/* Cards */
.procargo-card {
    background: var(--pc-bg-card);
    border-radius: var(--pc-radius-lg);
    border: 1px solid var(--pc-border-secondary);
    box-shadow: var(--pc-shadow-card);
    transition: all var(--pc-transition-normal);
}

.procargo-card:hover {
    border-color: var(--pc-border-accent);
}

.procargo-card-header {
    border-bottom: 1px solid var(--pc-border-secondary);
}

.procargo-card-header h3 {
    color: var(--pc-text-primary);
}

.procargo-card-icon {
    background: rgba(94, 199, 242, 0.1);
}

.dark-mode .procargo-card-icon,
[data-theme="dark"] .procargo-card-icon {
    background: rgba(109, 211, 255, 0.15);
}

.procargo-card-icon svg {
    color: var(--pc-primary);
}

/* Info Cards */
.procargo-info-card {
    background: var(--pc-bg-card);
    border: 1px solid var(--pc-border-accent);
    border-radius: var(--pc-radius-lg);
}

.procargo-info-card h4 {
    color: var(--pc-text-secondary);
}

.procargo-info-card p {
    color: var(--pc-text-primary);
}

.procargo-info-card__icon {
    background: rgba(94, 199, 242, 0.1);
}

.dark-mode .procargo-info-card__icon,
[data-theme="dark"] .procargo-info-card__icon {
    background: rgba(109, 211, 255, 0.15);
}

/* Buttons */
.procargo-btn {
    font-family: var(--pc-font-family);
    border-radius: var(--pc-radius-md);
    transition: all var(--pc-transition-normal);
}

.procargo-btn-primary {
    background: var(--pc-gradient-primary);
    color: var(--pc-text-inverse);
}

.procargo-btn-gradient {
    background: var(--pc-gradient-primary);
    color: #fff;
}

.procargo-btn-outline {
    background: transparent;
    border: 2px solid var(--pc-border-input);
    color: var(--pc-text-primary);
}

.procargo-btn-outline:hover {
    border-color: var(--pc-primary);
    color: var(--pc-primary);
}

.procargo-btn-warning {
    background: var(--pc-warning-bg);
    color: var(--pc-warning);
}

.procargo-btn-danger {
    background: var(--pc-error-bg);
    color: var(--pc-error);
}

/* Inputs */
.procargo-input,
.procargo-select,
.procargo-textarea {
    background: var(--pc-bg-input);
    border: 1px solid var(--pc-border-input);
    border-radius: var(--pc-radius-md);
    color: var(--pc-text-primary);
    transition: all var(--pc-transition-fast);
}

.procargo-input:focus,
.procargo-select:focus,
.procargo-textarea:focus {
    border-color: var(--pc-border-focus);
    outline: none;
    box-shadow: 0 0 0 3px rgba(94, 199, 242, 0.1);
}

.procargo-input::placeholder {
    color: var(--pc-text-muted);
}

/* Tables */
.procargo-table {
    background: var(--pc-bg-card);
}

.procargo-table th {
    background: var(--pc-bg-tertiary);
    color: var(--pc-text-secondary);
    border-bottom: 1px solid var(--pc-border-primary);
}

.procargo-table td {
    color: var(--pc-text-primary);
    border-bottom: 1px solid var(--pc-border-secondary);
}

.procargo-table tr:hover td {
    background: var(--pc-bg-hover);
}

/* Alerts / Notifications */
.procargo-alert {
    border-radius: var(--pc-radius-md);
    padding: var(--pc-space-md);
}

.procargo-alert-success {
    background: var(--pc-success-bg);
    border: 1px solid var(--pc-success);
    color: var(--pc-success);
}

.procargo-alert-error {
    background: var(--pc-error-bg);
    border: 1px solid var(--pc-error);
    color: var(--pc-error);
}

.procargo-alert-warning {
    background: var(--pc-warning-bg);
    border: 1px solid var(--pc-warning);
    color: var(--pc-warning);
}

.procargo-alert-info {
    background: var(--pc-info-bg);
    border: 1px solid var(--pc-info);
    color: var(--pc-info);
}

/* Modals */
.procargo-modal__overlay {
    background: var(--pc-bg-overlay);
}

.procargo-modal__content {
    background: var(--pc-bg-primary);
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow-lg);
}

.procargo-modal__content h2 {
    color: var(--pc-text-primary);
}

.procargo-modal__content p {
    color: var(--pc-text-secondary);
}

/* Status Badges */
.procargo-status-badge {
    border-radius: var(--pc-radius-sm);
    font-size: var(--pc-font-size-sm);
}

.procargo-status-badge.status-pending {
    background: var(--pc-warning-bg);
    color: var(--pc-warning);
}

.procargo-status-badge.status-processing {
    background: var(--pc-info-bg);
    color: var(--pc-info);
}

.procargo-status-badge.status-completed {
    background: var(--pc-success-bg);
    color: var(--pc-success);
}

.procargo-status-badge.status-cancelled {
    background: var(--pc-error-bg);
    color: var(--pc-error);
}

/* Info List */
.procargo-info-item__label {
    color: var(--pc-text-secondary);
}

.procargo-info-item__value {
    color: var(--pc-text-primary);
}

.procargo-info-item svg {
    color: var(--pc-primary);
}

/* Profile Tabs */
.procargo-profile-tabs .tab-btn {
    color: var(--pc-text-secondary);
    border-bottom: 2px solid transparent;
}

.procargo-profile-tabs .tab-btn:hover {
    color: var(--pc-text-primary);
}

.procargo-profile-tabs .tab-btn.active {
    color: var(--pc-primary);
    border-bottom-color: var(--pc-primary);
}

.procargo-profile-sidebar .nav-item {
    color: var(--pc-text-secondary);
    background: transparent;
}

.procargo-profile-sidebar .nav-item:hover {
    background: var(--pc-bg-hover);
    color: var(--pc-text-primary);
}

.procargo-profile-sidebar .nav-item.active {
    background: var(--pc-gradient-primary);
    color: #fff;
}

/* Loading States */
.procargo-spinner,
.procargo-spinner-lg {
    border-color: rgba(94, 199, 242, 0.2);
    border-top-color: var(--pc-primary);
}

.procargo-loading p {
    color: var(--pc-text-secondary);
}

/* File Items */
.procargo-file-item {
    background: var(--pc-bg-tertiary);
    border: 1px solid var(--pc-border-secondary);
}

.procargo-file-item__details h5 {
    color: var(--pc-text-primary);
}

.procargo-file-item__details span {
    color: var(--pc-text-secondary);
}

/* Places & Items */
.procargo-place {
    border-color: var(--pc-border-primary);
}

.procargo-place__header {
    background: var(--pc-bg-tertiary);
}

.procargo-place__header h4 {
    color: var(--pc-text-primary);
}

.procargo-place__meta {
    color: var(--pc-text-secondary);
}

/* Pagination */
.procargo-pagination button {
    background: var(--pc-bg-primary);
    border: 1px solid var(--pc-border-input);
    color: var(--pc-text-primary);
}

.procargo-pagination button:hover {
    border-color: var(--pc-primary);
    color: var(--pc-primary);
}

.procargo-pagination button.active {
    background: var(--pc-primary);
    border-color: var(--pc-primary);
    color: #fff;
}

/* FAQ */
.procargo-faq-item {
    background: var(--pc-bg-card);
}

.procargo-faq-question {
    color: var(--pc-text-primary);
}

.procargo-faq-question:hover {
    color: var(--pc-primary);
}

.procargo-faq-answer-content {
    color: var(--pc-text-secondary);
}

/* Tariffs */
.procargo-tariffs-table {
    background: var(--pc-bg-primary);
    box-shadow: var(--pc-shadow-card);
}

.procargo-tariffs-table th {
    background: var(--pc-bg-tertiary);
    color: var(--pc-text-secondary);
}

.procargo-tariffs-table td {
    border-bottom-color: var(--pc-border-secondary);
}

.route-name {
    color: var(--pc-text-primary);
}

/* Page Header */
.procargo-page-header__title {
    color: var(--pc-text-primary);
}

.procargo-page-header__subtitle {
    color: var(--pc-text-secondary);
}

.procargo-breadcrumbs a {
    color: var(--pc-primary);
}

.procargo-breadcrumbs__current {
    color: var(--pc-text-secondary);
}

/* Text Content */
.procargo-text-content {
    color: var(--pc-text-secondary);
}

.procargo-text-content h2,
.procargo-text-content h3,
.procargo-text-content h4,
.procargo-text-content strong {
    color: var(--pc-text-primary);
}

.procargo-text-content a {
    color: var(--pc-primary);
}

.procargo-text-content blockquote {
    background: var(--pc-bg-card);
    border-left-color: var(--pc-primary);
}

.procargo-text-content th {
    background: var(--pc-bg-card);
}

.procargo-text-toc {
    background: var(--pc-bg-card);
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */
.procargo-theme-toggle {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9990;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pc-bg-card);
    border: 1px solid var(--pc-border-primary);
    box-shadow: var(--pc-shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--pc-transition-normal);
}

.procargo-theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--pc-shadow-lg);
}

.procargo-theme-toggle svg {
    width: 24px;
    height: 24px;
    color: var(--pc-primary);
}

/* Sun icon (shown in dark mode) */
.procargo-theme-toggle .icon-sun {
    display: none;
}

.dark-mode .procargo-theme-toggle .icon-sun,
[data-theme="dark"] .procargo-theme-toggle .icon-sun {
    display: block;
}

/* Moon icon (shown in light mode) */
.procargo-theme-toggle .icon-moon {
    display: block;
}

.dark-mode .procargo-theme-toggle .icon-moon,
[data-theme="dark"] .procargo-theme-toggle .icon-moon {
    display: none;
}

/* ============================================
   SMOOTH TRANSITIONS FOR THEME CHANGE
   ============================================ */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Disable transitions initially to prevent flash */
.no-transitions * {
    transition: none !important;
}