/* tools/parts/tools-common-light.css */
/* ============================================================
   DAs Gaming - Light Theme Overrides
   Applied when body has class "theme-light"
   ============================================================ */

/* ================================================
   Light Mode CSS Variables
   ================================================ */
body.theme-light {
    /* Base Colors - Fresh & Clean */
    --color-bg: #f0f9ff;
    --color-text: #0f172a;
    --color-text-muted: #64748b;

    /* Accent Colors - Warm & Vibrant */
    --color-accent-primary: #f97316;
    --color-accent-primary-rgb: 249, 115, 22;
    --color-accent-secondary: #0891b2;
    --color-accent-secondary-rgb: 8, 145, 178;
    --color-accent-tertiary: #4f46e5;
    --color-accent-tertiary-rgb: 79, 70, 229;

    /* Status Colors */
    --color-success: #16a34a;
    --color-error: #dc2626;
    --color-warning: #d97706;
    --color-info: #2563eb;

    /* Card/Surface - Bright & Airy */
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: #e2e8f0;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Input/Form */
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-focus-border: var(--color-accent-primary);
    --input-focus-shadow: 0 0 0 3px rgba(var(--color-accent-primary-rgb), 0.15);

    /* Markdown Preview (Light theme) */
    --md-bg: #ffffff;
    --md-text: #24292f;
    --md-border: #d0d7de;
    --md-link: #0969da;
    --md-code-bg: #f6f8fa;
    --md-blockquote: #57606a;

    /* Apply base styles */
    background: var(--color-bg);
    color: var(--color-text);
}

/* ================================================
   Header Overrides
   ================================================ */
body.theme-light .tool-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, transparent 100%);
    border-bottom-color: var(--card-border);
}

body.theme-light .brand-text {
    background-image: linear-gradient(90deg, #ea580c, #f97316, #fb923c);
    filter: drop-shadow(0 0 6px rgba(var(--color-accent-primary-rgb), 0.4));
}

body.theme-light .brand-link:hover .brand-text {
    filter: drop-shadow(0 0 12px rgba(var(--color-accent-primary-rgb), 0.6));
}

body.theme-light .breadcrumb a {
    color: var(--color-text-muted);
}

body.theme-light .breadcrumb .separator {
    color: var(--card-border);
}

/* ================================================
   Card Overrides
   ================================================ */
body.theme-light .card {
    background: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
    backdrop-filter: none;
}

body.theme-light .card-header {
    border-bottom-color: var(--card-border);
}

body.theme-light .card-header h3 {
    color: var(--color-accent-primary);
}

body.theme-light .card-footer {
    border-top-color: var(--card-border);
}

body.theme-light .card-interactive:hover {
    border-color: var(--color-accent-primary);
    box-shadow: var(--card-shadow), 0 0 25px rgba(var(--color-accent-primary-rgb), 0.12);
}

/* ================================================
   Form Elements
   ================================================ */
body.theme-light input[type="text"],
body.theme-light input[type="number"],
body.theme-light input[type="url"],
body.theme-light input[type="email"],
body.theme-light input[type="password"],
body.theme-light textarea,
body.theme-light select {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--color-text);
}

body.theme-light input:focus,
body.theme-light textarea:focus,
body.theme-light select:focus {
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
}

body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
    color: #94a3b8;
}

body.theme-light select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
}

body.theme-light select option {
    background: #ffffff;
    color: var(--color-text);
}

/* Labels */
body.theme-light label {
    color: var(--color-text-muted);
}

body.theme-light .checkbox-label,
body.theme-light .radio-label,
body.theme-light .options-grid label {
    color: var(--color-text);
}

/* Range Slider */
body.theme-light input[type="range"] {
    background: #e2e8f0;
}

body.theme-light input[type="range"]::-webkit-slider-thumb {
    background: var(--color-accent-primary);
    box-shadow: 0 2px 8px rgba(var(--color-accent-primary-rgb), 0.3);
}

body.theme-light input[type="range"]::-moz-range-thumb {
    background: var(--color-accent-primary);
}

/* ================================================
   Buttons
   ================================================ */
body.theme-light button,
body.theme-light .btn {
    background: #ffffff;
    border-color: var(--card-border);
    color: var(--color-text);
}

body.theme-light button:hover,
body.theme-light .btn:hover {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(var(--color-accent-primary-rgb), 0.25);
}

/* Action Button */
body.theme-light .btn-action {
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(var(--color-accent-primary-rgb), 0.3);
}

body.theme-light .btn-action:hover {
    background: linear-gradient(135deg, #f97316, #fb923c);
    box-shadow: 0 6px 25px rgba(var(--color-accent-primary-rgb), 0.4);
    color: #ffffff;
}

/* Copy Button */
body.theme-light .btn-copy {
    background: rgba(var(--color-accent-secondary-rgb), 0.1);
    border-color: var(--color-accent-secondary);
    color: var(--color-accent-secondary);
}

body.theme-light .btn-copy:hover {
    background: var(--color-accent-secondary);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(var(--color-accent-secondary-rgb), 0.25);
}

/* Reset Button */
body.theme-light .btn-reset {
    background: rgba(220, 38, 38, 0.1);
    border-color: var(--color-error);
    color: var(--color-error);
}

body.theme-light .btn-reset:hover {
    background: var(--color-error);
    color: #ffffff;
}

/* Secondary Button */
body.theme-light .btn-secondary {
    background: var(--color-accent-tertiary);
    border-color: var(--color-accent-tertiary);
    color: #ffffff;
}

body.theme-light .btn-secondary:hover {
    background: #6366f1;
    color: #ffffff;
}

/* ================================================
   Result Display
   ================================================ */
body.theme-light .result-box {
    background: #ffffff;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 25px rgba(var(--color-accent-primary-rgb), 0.08) inset;
}

body.theme-light .result-value {
    color: var(--color-accent-primary);
    text-shadow: none;
}

/* ================================================
   Table Styles
   ================================================ */
body.theme-light th {
    color: var(--color-accent-primary);
    background: rgba(var(--color-accent-primary-rgb), 0.05);
}

body.theme-light td {
    color: var(--color-text);
    border-bottom-color: var(--card-border);
}

body.theme-light tr:hover td {
    background: rgba(var(--color-accent-primary-rgb), 0.03);
}

/* ================================================
   Code Output
   ================================================ */
body.theme-light .code-output {
    background: #f8fafc;
    border-color: var(--card-border);
}

body.theme-light .code-output pre {
    color: var(--color-text);
}

body.theme-light pre,
body.theme-light code {
    background: #f1f5f9;
    color: var(--color-text);
}

/* ================================================
   Badges
   ================================================ */
body.theme-light .badge-success {
    background: rgba(22, 163, 74, 0.1);
    color: var(--color-success);
    border-color: var(--color-success);
}

body.theme-light .badge-error {
    background: rgba(220, 38, 38, 0.1);
    color: var(--color-error);
    border-color: var(--color-error);
}

body.theme-light .badge-warning {
    background: rgba(217, 119, 6, 0.1);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

body.theme-light .badge-info {
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-info);
    border-color: var(--color-info);
}

/* ================================================
   Loading & Spinner
   ================================================ */
body.theme-light .spinner {
    border-color: var(--card-border);
    border-top-color: var(--color-accent-primary);
}

body.theme-light .loading {
    color: var(--color-text-muted);
}

/* ================================================
   Toast Notifications
   ================================================ */
body.theme-light .toast {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--card-border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

body.theme-light .toast-success {
    border-color: var(--color-success);
    color: var(--color-success);
}

body.theme-light .toast-error {
    border-color: var(--color-error);
    color: var(--color-error);
}

body.theme-light .toast-info {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

/* ================================================
   Footer
   ================================================ */
body.theme-light .tool-footer {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.95) 0%, transparent 100%);
    border-top-color: var(--card-border);
}

body.theme-light .footer-links {
    color: var(--color-text-muted);
}

body.theme-light .footer-links a {
    color: var(--color-text-muted);
}

body.theme-light .footer-links a:hover {
    color: var(--color-accent-primary);
}

/* ================================================
   Utility Overrides
   ================================================ */
body.theme-light .text-muted {
    color: var(--color-text-muted);
}

body.theme-light .text-accent {
    color: var(--color-accent-primary);
}

/* ================================================
   Flash Animation (Light)
   ================================================ */
body.theme-light .flash {
    animation: flashAnimLight 0.5s ease;
}

@keyframes flashAnimLight {
    0% {
        color: var(--color-accent-primary);
        text-shadow: 0 0 20px rgba(var(--color-accent-primary-rgb), 0.5);
    }

    100% {
        color: var(--color-accent-primary);
        text-shadow: none;
    }
}

/* ================================================
   Panel/Section Backgrounds (Light Mode)
   ================================================ */
body.theme-light .control-group,
body.theme-light .section,
body.theme-light .controls-panel,
body.theme-light .builder-form,
body.theme-light .config-form,
body.theme-light .color-card,
body.theme-light .score-card,
body.theme-light .manual-section,
body.theme-light .upload-section,
body.theme-light .size-reference,
body.theme-light .raw-data-section,
body.theme-light .result-section,
body.theme-light .cheat-sheet-container,
body.theme-light .bulk-options,
body.theme-light .converters,
body.theme-light .result-list,
body.theme-light .base-setting-box,
body.theme-light .converter-box,
body.theme-light .current-time-box,
body.theme-light .form-section,
body.theme-light .settings-card {
    background: var(--card-bg);
    border-color: var(--card-border);
}

/* Result/Output Areas */
body.theme-light .result-area,
body.theme-light #replace-result,
body.theme-light .scroll-list,
body.theme-light .backdrop {
    background: var(--input-bg);
    color: var(--color-text);
    border-color: var(--card-border);
}

/* Preview Areas - Dynamic styles via JS, no override needed */

/* Mode/Toggle Buttons - Active State */
body.theme-light .mode-btn.active,
body.theme-light .toggle-btn.active,
body.theme-light .tab-btn.active,
body.theme-light .type-btn.active,
body.theme-light .device-btn.active {
    background: var(--color-accent-primary);
    color: var(--color-white);
    border-color: var(--color-accent-primary);
}

/* Decode Button (differentiated from Encode) */
body.theme-light .btn-decode {
    background: rgba(var(--color-accent-tertiary-rgb), 0.1);
    border-color: var(--color-accent-tertiary);
    color: var(--color-accent-tertiary);
}

body.theme-light .btn-decode:hover {
    background: var(--color-accent-tertiary);
    color: var(--color-white);
}

/* File Drop Zones */
body.theme-light .file-drop-zone,
body.theme-light .upload-area {
    background: rgba(var(--color-accent-primary-rgb), 0.03);
    border-color: var(--card-border);
}

body.theme-light .file-drop-zone:hover,
body.theme-light .file-drop-zone.over,
body.theme-light .upload-area.dragover {
    background: rgba(var(--color-accent-primary-rgb), 0.08);
    border-color: var(--color-accent-primary);
}

/* Match Items */
body.theme-light .match-item {
    color: var(--color-text);
    border-bottom-color: var(--card-border);
}

/* Details/Summary */
body.theme-light details,
body.theme-light summary {
    color: var(--color-text);
}

/* Single UUID Box */
body.theme-light .single-uuid-box {
    background: var(--card-bg);
}

body.theme-light .uuid-text {
    text-shadow: none;
}

/* Stats Bar */
body.theme-light .stats-bar {
    background: var(--card-bg);
    border-color: var(--card-border);
}

body.theme-light .stat-value {
    text-shadow: none;
}

/* Code areas */
body.theme-light #sql-input,
body.theme-light #builder-output,
body.theme-light #input-area,
body.theme-light #config-output,
body.theme-light #markdown-input {
    background: var(--input-bg);
    color: var(--color-text);
    border-color: var(--card-border);
}

/* Convert Cards */
body.theme-light .convert-card {
    background: var(--card-bg);
    border-color: var(--card-border);
}

/* Password Generator Progress Bar - Removed (Legacy) */

/* IP Check Details Table */
body.theme-light .details-table {
    background: var(--card-bg);
    border-color: var(--card-border);
}

body.theme-light .details-table .row {
    border-bottom-color: var(--card-border);
}

body.theme-light .details-table .key {
    color: var(--color-text-muted);
    border-right-color: var(--card-border);
}

body.theme-light .details-table .value {
    color: var(--color-text);
}

/* Color Picker Preview */
body.theme-light .color-preview {
    border-color: var(--card-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Slider backgrounds */
body.theme-light .slider {
    background-color: #cbd5e1;
}

/* Markdown Preview Pane */
body.theme-light .preview-pane {
    background: var(--md-bg);
    color: var(--md-text);
}

/* Editor Toolbar */
body.theme-light .editor-toolbar {
    background: var(--card-bg);
    border-color: var(--card-border);
}

/* Workspace */
body.theme-light .workspace {
    background: var(--card-bg);
    border-color: var(--card-border);
}

body.theme-light .editor-pane {
    border-right-color: var(--card-border);
}

/* Textarea Container */
body.theme-light .textarea-container {
    background: var(--input-bg);
    border-color: var(--card-border);
}

/* Table fixes */
body.theme-light .tag-table td,
body.theme-light .size-table td {
    color: var(--color-text);
}

/* Status bar */
body.theme-light .status-bar {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-muted);
}

/* htpasswd result */
body.theme-light .htpasswd-box {
    background: var(--input-bg);
    border-color: var(--card-border);
}

body.theme-light .htpasswd-result-row code {
    background: #f1f5f9;
    color: var(--color-accent-secondary);
}