/**
 * EECOL Wire Tools Suite - Shared Theme Styles
 * Enterprise PWA v0.8.0.0
 */

/* Load Roboto Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

/* ===== CORE VARIABLES ===== */
:root {
    --eecol-blue: #0058B3;
    --eecol-blue-light: #004a99;
    --eecol-blue-bg: linear-gradient(to bottom, var(--eecol-blue) 20%, white 80%);
    --eecol-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
    --eecol-shadow: 0 10px 25px rgba(0, 88, 179, 0.3);
    --eecol-border-radius: 12px;
    --eecol-border-radius-lg: 16px;

    /* Dark Mode Defaults (overridden by .dark-mode) */
    --bg-color: #F0F8FF;
    --text-color: #2d3748;
    --card-bg: white;
    --input-bg: white;
    --input-border: #e2e8f0;
    --input-text: #2d3748;
    --heading-color: #0058B3;
    --info-box-green-bg: #f0fdf4; /* green-50 */
    --info-box-green-border: #bbf7d0; /* green-200 */
    --info-box-green-text: #166534; /* green-800 */
    --info-box-blue-bg: #eff6ff; /* blue-50 */
    --info-box-blue-border: #bfdbfe; /* blue-200 */
    --info-box-blue-text: #1e40af; /* blue-800 */
    --info-box-amber-bg: #fffbeb; /* amber-50 */
    --info-box-amber-border: #fde68a; /* amber-200 */
    --info-box-amber-text: #92400e; /* amber-800 */
    --info-box-red-bg: #fef2f2; /* red-50 */
    --info-box-red-border: #fecaca; /* red-200 */
    --info-box-red-text: #991b1b; /* red-800 */
    --info-box-gray-bg: #f9fafb; /* gray-50 */
    --info-box-gray-border: #e5e7eb; /* gray-200 */
    --info-box-gray-text: #374151; /* gray-700 */
    --info-box-purple-bg: #faf5ff; /* purple-50 */
    --info-box-purple-border: #e9d5ff; /* purple-200 */
    --info-box-purple-text: #6b21a8; /* purple-800 */
    /* New mappings for extended palette */
    --info-box-indigo-bg: #eef2ff; /* indigo-50 */
    --info-box-indigo-border: #c7d2fe; /* indigo-200 */
    --info-box-indigo-text: #3730a3; /* indigo-800 */
    --info-box-yellow-bg: #fefce8; /* yellow-50 */
    --info-box-yellow-border: #fef08a; /* yellow-200 */
    --info-box-yellow-text: #854d0e; /* yellow-800 */
    --info-box-orange-bg: #fff7ed; /* orange-50 */
    --info-box-orange-border: #fed7aa; /* orange-200 */
    --info-box-orange-text: #9a3412; /* orange-800 */
    --info-box-teal-bg: #f0fdfa; /* teal-50 */
    --info-box-teal-border: #99f6e4; /* teal-200 */
    --info-box-teal-text: #115e59; /* teal-800 */
    --info-box-emerald-bg: #ecfdf5; /* emerald-50 */
    --info-box-emerald-border: #a7f3d0; /* emerald-200 */
    --info-box-emerald-text: #065f46; /* emerald-800 */
    --info-box-cyan-bg: #ecfeff; /* cyan-50 */
    --info-box-cyan-border: #a5f3fc; /* cyan-200 */
    --info-box-cyan-text: #155f75; /* cyan-800 */
}

/* ===== DARK MODE VARIABLES ===== */
.dark-mode {
    --bg-color: #0f172a;
    --text-color: #e2e8f0;
    --card-bg: #1e293b;
    --input-bg: #334155;
    --input-border: #475569;
    --input-text: #f1f5f9;
    --heading-color: #60a5fa; /* Lighter blue for dark mode */
    --eecol-blue-bg: #0f172a; /* Override gradient with solid color */

    /* Info Box Dark Mode Colors - Low Saturation, Comfortable Contrast */
    --info-box-green-bg: rgba(20, 83, 45, 0.3);
    --info-box-green-border: #14532d;
    --info-box-green-text: #86efac; /* green-300 */
    --info-box-blue-bg: rgba(30, 58, 138, 0.3);
    --info-box-blue-border: #1e3a8a;
    --info-box-blue-text: #93c5fd; /* blue-300 */
    --info-box-amber-bg: rgba(120, 53, 15, 0.3);
    --info-box-amber-border: #78350f;
    --info-box-amber-text: #fcd34d; /* amber-300 */
    --info-box-red-bg: rgba(127, 29, 29, 0.3);
    --info-box-red-border: #7f1d1d;
    --info-box-red-text: #fca5a5; /* red-300 */
    --info-box-gray-bg: rgba(55, 65, 81, 0.4);
    --info-box-gray-border: #374151;
    --info-box-gray-text: #d1d5db; /* gray-300 */
    --info-box-purple-bg: rgba(88, 28, 135, 0.3);
    --info-box-purple-border: #581c87;
    --info-box-purple-text: #d8b4fe; /* purple-300 */

    /* Extended Palette Mappings to Main Colors or Similar */
    --info-box-indigo-bg: rgba(49, 46, 129, 0.3); /* indigo-900 with opacity */
    --info-box-indigo-border: #312e81;
    --info-box-indigo-text: #a5b4fc; /* indigo-300 */
    --info-box-yellow-bg: rgba(113, 63, 18, 0.3); /* yellow-900 like amber */
    --info-box-yellow-border: #713f12;
    --info-box-yellow-text: #fde047; /* yellow-300 */
    --info-box-orange-bg: rgba(124, 45, 18, 0.3); /* orange-900 */
    --info-box-orange-border: #7c2d12;
    --info-box-orange-text: #fdba74; /* orange-300 */
    --info-box-teal-bg: rgba(19, 78, 74, 0.3); /* teal-900 */
    --info-box-teal-border: #134e4a;
    --info-box-teal-text: #5eead4; /* teal-300 */
    --info-box-emerald-bg: rgba(6, 78, 59, 0.3); /* emerald-900 */
    --info-box-emerald-border: #064e3b;
    --info-box-emerald-text: #6ee7b7; /* emerald-300 */
    --info-box-cyan-bg: rgba(22, 78, 99, 0.3); /* cyan-900 */
    --info-box-cyan-border: #164e63;
    --info-box-cyan-text: #67e8f9; /* cyan-300 */
}

/* ===== GLOBAL EECOL STYLES ===== */
html,
body {
    height: 100%;
    min-height: 100vh;
    font-family: 'Roboto', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    /* Use CSS variable for background */
    background: var(--eecol-blue-bg);
    color: var(--text-color);
    line-height: 1.6;
    transition: var(--eecol-transition);
}

.dark-mode body {
    background: var(--bg-color) !important;
}

/* Smooth Transition for all major elements */
div,
section,
article,
header,
footer,
main,
aside,
nav,
button,
input,
select,
textarea,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6,
table,
tr,
td,
th {
    transition: var(--eecol-transition);
}

@media (prefers-reduced-motion: reduce) {
    html,
    body,
    div,
    section,
    article,
    header,
    footer,
    main,
    aside,
    nav,
    button,
    input,
    select,
    textarea,
    span,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    table,
    tr,
    td,
    th {
        transition: none;
    }
}

/* Dark Mode Overrides for Specific Elements */
.dark-mode .bg-\[\#F0F8FF\] {
    background-color: var(--bg-color) !important;
}

.dark-mode .bg-white {
    background-color: var(--card-bg) !important;
    color: var(--text-color);
}

.dark-mode .text-\[\#0058B3\] {
    color: var(--heading-color) !important;
}

.dark-mode .border-\[\#0058B3\] {
    border-color: var(--heading-color) !important;
}

/* Info Box / Colored Background Overrides using variables */
.dark-mode .bg-green-50 { background-color: var(--info-box-green-bg) !important; border-color: var(--info-box-green-border) !important; }
.dark-mode .text-green-800, .dark-mode .text-green-700, .dark-mode .text-green-600 { color: var(--info-box-green-text) !important; }
.dark-mode .border-green-200, .dark-mode .border-green-600 { border-color: var(--info-box-green-border) !important; }

.dark-mode .bg-blue-50, .dark-mode .bg-blue-100 { background-color: var(--info-box-blue-bg) !important; border-color: var(--info-box-blue-border) !important; }
.dark-mode .text-blue-800, .dark-mode .text-blue-700, .dark-mode .text-blue-600 { color: var(--info-box-blue-text) !important; }
.dark-mode .border-blue-200 { border-color: var(--info-box-blue-border) !important; }

.dark-mode .bg-amber-50 { background-color: var(--info-box-amber-bg) !important; border-color: var(--info-box-amber-border) !important; }
.dark-mode .text-amber-800, .dark-mode .text-amber-700, .dark-mode .text-amber-600 { color: var(--info-box-amber-text) !important; }
.dark-mode .border-amber-200, .dark-mode .border-amber-600 { border-color: var(--info-box-amber-border) !important; }

.dark-mode .bg-red-50, .dark-mode .bg-red-100 { background-color: var(--info-box-red-bg) !important; border-color: var(--info-box-red-border) !important; }
.dark-mode .text-red-800, .dark-mode .text-red-700 { color: var(--info-box-red-text) !important; }
.dark-mode .border-red-200, .dark-mode .border-red-500 { border-color: var(--info-box-red-border) !important; }

.dark-mode .bg-gray-50, .dark-mode .bg-gray-100 { background-color: var(--info-box-gray-bg) !important; border-color: var(--info-box-gray-border) !important; }
.dark-mode .text-gray-700, .dark-mode .text-gray-600, .dark-mode .text-gray-500, .dark-mode .text-gray-800 { color: var(--info-box-gray-text) !important; }
.dark-mode .border-gray-200, .dark-mode .border-gray-300 { border-color: var(--info-box-gray-border) !important; }

.dark-mode .bg-purple-50 { background-color: var(--info-box-purple-bg) !important; border-color: var(--info-box-purple-border) !important; }
.dark-mode .text-purple-800, .dark-mode .text-purple-600 { color: var(--info-box-purple-text) !important; }
.dark-mode .border-purple-200 { border-color: var(--info-box-purple-border) !important; }

/* Extended Palette Overrides */
.dark-mode .bg-indigo-50, .dark-mode .bg-indigo-100 { background-color: var(--info-box-indigo-bg) !important; border-color: var(--info-box-indigo-border) !important; }
.dark-mode .text-indigo-800, .dark-mode .text-indigo-700, .dark-mode .text-indigo-600 { color: var(--info-box-indigo-text) !important; }
.dark-mode .border-indigo-200 { border-color: var(--info-box-indigo-border) !important; }

.dark-mode .bg-yellow-50, .dark-mode .bg-yellow-100 { background-color: var(--info-box-yellow-bg) !important; border-color: var(--info-box-yellow-border) !important; }
.dark-mode .text-yellow-800, .dark-mode .text-yellow-700 { color: var(--info-box-yellow-text) !important; }
.dark-mode .border-yellow-200 { border-color: var(--info-box-yellow-border) !important; }

.dark-mode .bg-orange-50, .dark-mode .bg-orange-100 { background-color: var(--info-box-orange-bg) !important; border-color: var(--info-box-orange-border) !important; }
.dark-mode .text-orange-800, .dark-mode .text-orange-700 { color: var(--info-box-orange-text) !important; }
.dark-mode .border-orange-200 { border-color: var(--info-box-orange-border) !important; }

.dark-mode .bg-teal-50, .dark-mode .bg-teal-100 { background-color: var(--info-box-teal-bg) !important; border-color: var(--info-box-teal-border) !important; }
.dark-mode .text-teal-800, .dark-mode .text-teal-700 { color: var(--info-box-teal-text) !important; }
.dark-mode .border-teal-200 { border-color: var(--info-box-teal-border) !important; }

.dark-mode .bg-emerald-50, .dark-mode .bg-emerald-100 { background-color: var(--info-box-emerald-bg) !important; border-color: var(--info-box-emerald-border) !important; }
.dark-mode .text-emerald-800, .dark-mode .text-emerald-700 { color: var(--info-box-emerald-text) !important; }
.dark-mode .border-emerald-200 { border-color: var(--info-box-emerald-border) !important; }

.dark-mode .bg-cyan-50, .dark-mode .bg-cyan-100 { background-color: var(--info-box-cyan-bg) !important; border-color: var(--info-box-cyan-border) !important; }
.dark-mode .text-cyan-800, .dark-mode .text-cyan-700 { color: var(--info-box-cyan-text) !important; }
.dark-mode .border-cyan-200 { border-color: var(--info-box-cyan-border) !important; }


/* Gradient Overrides for Database Config Page & Changelogs */
/* Map existing gradients to solid dark mode backgrounds for readability */
.dark-mode .bg-gradient-to-br.from-blue-50.to-blue-100 { background: var(--info-box-blue-bg) !important; }
.dark-mode .bg-gradient-to-br.from-green-50.to-green-100 { background: var(--info-box-green-bg) !important; }
.dark-mode .bg-gradient-to-br.from-purple-50.to-purple-100 { background: var(--info-box-purple-bg) !important; }
.dark-mode .bg-gradient-to-br.from-orange-50.to-orange-100 { background: var(--info-box-orange-bg) !important; }

/* Changelog Gradients */
.dark-mode .bg-gradient-to-r {
    background-image: none !important;
    background-color: var(--card-bg) !important; /* Default fallback */
    border-color: var(--heading-color) !important;
}

/* Specific overrides for changelog banners to keep color identity but low contrast */
.dark-mode .bg-gradient-to-r.from-green-100,
.dark-mode .bg-gradient-to-r.from-emerald-50 {
    background-color: var(--info-box-emerald-bg) !important;
}

.dark-mode .bg-gradient-to-r.from-purple-100 {
    background-color: var(--info-box-purple-bg) !important;
}

.dark-mode .bg-gradient-to-r.from-orange-100 {
    background-color: var(--info-box-orange-bg) !important;
}

.dark-mode .bg-gradient-to-r.from-cyan-100 {
    background-color: var(--info-box-cyan-bg) !important;
}

.dark-mode .bg-gradient-to-r.from-teal-100 {
    background-color: var(--info-box-teal-bg) !important;
}

.dark-mode .bg-gradient-to-r.from-indigo-100 {
    background-color: var(--info-box-indigo-bg) !important;
}

.dark-mode .bg-gradient-to-r.from-red-50 {
    background-color: var(--info-box-red-bg) !important;
}

.dark-mode .bg-gradient-to-r.from-yellow-50 {
    background-color: var(--info-box-yellow-bg) !important;
}

.dark-mode .bg-gradient-to-r.from-blue-50 {
    background-color: var(--info-box-blue-bg) !important;
}


.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

.dark-mode .shadow-lg,
.dark-mode .shadow-2xl,
.dark-mode .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Update SVG fills in dark mode */
.dark-mode svg.text-\[\#0058B3\] {
    color: var(--heading-color) !important;
}

/* Modal dark mode */
.dark-mode .modal-content {
    background-color: var(--card-bg);
    border-color: var(--heading-color);
    color: var(--text-color);
}

/* Mobile Menu Dark Mode */
.dark-mode #mobileMenuOverlay .bg-\[\#F0F8FF\] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark-mode #mobileMenuOverlay .text-\[\#0058B3\] {
    color: var(--heading-color) !important;
}

.dark-mode #mobileMenuOverlay .border-blue-200 {
    border-color: #334155 !important;
}

/* ===== EECOL BACKGROUND GRADIENT ===== */
.eecol-blue-bg {
    background: var(--eecol-blue-bg);
}

/* ===== EECOL GRADIENT TEXT ===== */
.header-gradient {
    background: linear-gradient(90deg, var(--eecol-blue), #004a99);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}

.dark-mode .header-gradient {
    background: linear-gradient(90deg, #60a5fa, #93c5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ===== EECOL BRAND COLORS ===== */
.text-eecol-blue {
    color: var(--eecol-blue);
}
.bg-eecol-blue {
    background-color: var(--eecol-blue);
}
.border-eecol-blue {
    border-color: var(--eecol-blue);
}

.dark-mode .text-eecol-blue { color: var(--heading-color); }
.dark-mode .bg-eecol-blue { background-color: var(--heading-color); }
.dark-mode .border-eecol-blue { border-color: var(--heading-color); }

/* ===== EECOL LOGO STYLES ===== */
.eecol-logo-tilt {
    transform: rotate(-20deg);
    transform-origin: center;
}

/* ===== EECOL CARD BORDERS ===== */
.card-border-blue {
    border-left-color: var(--eecol-blue);
}
.dark-mode .card-border-blue {
    border-left-color: var(--heading-color);
}

/* ===== EECOL BUTTON STYLES ===== */
.btn-eecol {
    background-color: var(--eecol-blue);
    color: white;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: var(--eecol-border-radius);
    box-shadow: var(--eecol-shadow);
    transition: var(--eecol-transition);
    border: 2px solid var(--eecol-blue);
    position: relative;
}

.btn-eecol:hover {
    background-color: var(--eecol-blue-light);
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0, 88, 179, 0.4);
}

.dark-mode .btn-eecol {
    background-color: #2563eb; /* Slightly brighter blue for dark mode */
    border-color: #2563eb;
}
.dark-mode .btn-eecol:hover {
    background-color: #3b82f6;
}

.btn-eecol:active {
    transform: translateY(0);
    box-shadow: var(--eecol-shadow);
}

/* ===== EECOL INPUT STYLES ===== */
.input-eecol {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background-color: white;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: var(--eecol-transition);
    font-size: 14px;
}

.input-eecol:focus {
    outline: none;
    border-color: var(--eecol-blue);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(0, 88, 179, 0.1);
}

/* ===== EECOL MODAL STYLES ===== */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    background: white;
    border-radius: var(--eecol-border-radius);
    box-shadow: var(--eecol-shadow);
    border: 2px solid var(--eecol-blue);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

/* ===== EECOL RESULT BOXES ===== */
.result-box {
    background: linear-gradient(135deg, #e0f0ff 0%, #f8f9fa 100%);
    border: 2px solid var(--eecol-blue);
    border-radius: var(--eecol-border-radius-lg);
    padding: 20px;
    box-shadow: var(--eecol-shadow);
    text-align: center;
}

.dark-mode .result-box {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: var(--heading-color);
}

/* ===== EECOL PWA ICON ===== */
.pwa-icon-small {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    width: 48px;
    height: 48px;
}

/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 640px) {
    .mobile-compact { padding: 8px !important; }
    .mobile-text-sm { font-size: 11px !important; }
    .mobile-hide { display: none !important; }

    /* Touch-friendly inputs */
    .mobile-touch-input {
        padding: 0.75rem !important;
        font-size: 16px !important;
        min-height: 44px !important;
    }

    /* Better button stacking */
    .mobile-button-stack {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100%;
    }
    .mobile-button-stack button,
    .mobile-button-stack a {
        width: 100% !important;
        margin: 0 !important;
        padding: 0.75rem 1rem !important;
        min-height: 44px !important;
    }

    /* Compact spacing */
    .mobile-compact-spacing {
        gap: 0.5rem !important;
        padding: 0.75rem !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    button, input, select, a {
        min-height: 44px !important;
        touch-action: manipulation;
    }
}

/* ===== ANIMATION UTILITIES ===== */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.slide-up {
    animation: slideUp 0.4s ease-out;
}

.scale-in {
    animation: scaleIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== UTILITY CLASSES ===== */
.text-select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.overflow-hidden {
    overflow: hidden;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.z-50 {
    z-index: 50;
}


/* ===== PRINT STYLES ===== */
@media print {
    body {
        background: white !important;
        color: black !important;
    }

    .no-print {
        display: none !important;
    }

    .page-break {
        page-break-before: always;
    }
}

/* ===== SVG DIMENSION STYLES ===== */
.svg-dimension-stroke {
    stroke: black;
    transition: stroke 0.3s ease;
}

.svg-dimension-text {
    fill: black;
    transition: fill 0.3s ease;
}

.dark-mode .svg-dimension-stroke {
    stroke: white;
}

.dark-mode .svg-dimension-text {
    fill: white;
}