/* Dark mode. Light values live on :root. Dark values switch with data-theme="dark". */

:root {
    --es-bg: #ffffff;
    --es-surface: #ffffff;
    --es-surface-2: #f8fafc;
    --es-text: #1a1a1a;
    --es-muted: #64748b;
    --es-border: #e2e8f0;
    --es-header: rgba(255, 255, 255, 0.98);
    --es-link: #0948a7;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --es-bg: #0e1524;
    --es-surface: #172033;
    --es-surface-2: #223049;
    --es-text: #e7eef8;
    --es-muted: #b4c0d4;
    --es-border: #2c3b55;
    --es-header: rgba(14, 21, 36, 0.96);
    --es-link: #8eb7ff;
    --bs-body-bg: var(--es-bg);
    --bs-body-color: var(--es-text);
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--es-muted);
    --bs-secondary-bg: var(--es-surface);
    --bs-tertiary-bg: var(--es-surface-2);
    --bs-border-color: var(--es-border);
    --bs-heading-color: var(--es-text);
    --bs-link-color: var(--es-link);
    --bs-card-bg: var(--es-surface);
    --bs-card-color: var(--es-text);
    --bs-card-border-color: var(--es-border);
    --bs-modal-bg: var(--es-surface);
    --bs-modal-color: var(--es-text);
    --bs-dropdown-bg: var(--es-surface);
    --bs-dropdown-color: var(--es-text);
    --bs-dropdown-link-color: var(--es-text);
    --bs-dropdown-link-hover-bg: var(--es-surface-2);
    --bs-dropdown-link-hover-color: #ffffff;
}

html.theme-ready body,
html.theme-ready .main-header,
html.theme-ready .main-footer,
html.theme-ready .main-content,
html.theme-ready .card,
html.theme-ready .modal-content,
html.theme-ready .dropdown-menu,
html.theme-ready .speed-dial-item,
html.theme-ready .form-control,
html.theme-ready .form-select,
html.theme-ready .admin-navbar,
html.theme-ready .admin-main-content {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

button.speed-dial-item {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
    text-align: left;
}

/* Warm screen layer. It sits on top of light or dark mode and does not block clicks. */
html::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10050;
    pointer-events: none;
    background: rgba(255, 176, 84, 0.18);
    mix-blend-mode: multiply;
    opacity: 0;
}

html.theme-ready::after {
    transition: opacity 0.35s ease;
}

html[data-eye="on"]::after {
    opacity: 1;
}

html[data-theme="dark"][data-eye="on"]::after {
    background: rgba(255, 186, 110, 0.22);
    mix-blend-mode: soft-light;
}

.speed-dial-item.is-on .speed-dial-icon {
    background-color: rgba(255, 167, 38, 0.28);
    color: #b45309;
}

html[data-theme="dark"] .speed-dial-item.is-on .speed-dial-icon {
    color: #ffd59a;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main-content {
    background-color: var(--es-bg);
    color: var(--es-text);
}

html[data-theme="dark"] .main-header {
    background: var(--es-header);
    border-bottom-color: var(--es-border);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .main-header.scrolled,
html[data-theme="dark"] .main-header:hover {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .brand-name,
html[data-theme="dark"] .desktop-nav-link {
    color: var(--es-text) !important;
}

html[data-theme="dark"] .desktop-nav-link:hover,
html[data-theme="dark"] .logo-link:hover .brand-name,
html[data-theme="dark"] .footer-nav-item:hover {
    color: var(--es-link) !important;
}

html[data-theme="dark"] .main-header .dropdown-menu,
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--es-surface);
    border-color: var(--es-border);
    color: var(--es-text);
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .main-header .dropdown-item {
    color: var(--es-text);
    border-bottom-color: var(--es-border);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .main-header .dropdown-item:hover {
    background: var(--es-surface-2);
    color: #ffffff;
}

html[data-theme="dark"] .main-footer {
    background-color: var(--es-surface);
    border-top-color: var(--es-border);
    color: var(--es-text);
}

html[data-theme="dark"] .main-footer p,
html[data-theme="dark"] .footer-brand-name,
html[data-theme="dark"] .footer-corporate-title,
html[data-theme="dark"] .footer-contact-info,
html[data-theme="dark"] .footer-nav-item {
    color: var(--es-text) !important;
}

html[data-theme="dark"] .footer-nav-separator {
    color: var(--es-muted);
}

html[data-theme="dark"] .speed-dial-item {
    background-color: var(--es-surface);
    color: var(--es-text);
}

html[data-theme="dark"] .speed-dial-item:hover {
    background-color: var(--es-surface-2);
    color: #ffffff;
}

html[data-theme="dark"] .welcome-overlay {
    background: rgba(14, 21, 36, 0.88);
}

html[data-theme="dark"] .welcome-title,
html[data-theme="dark"] .welcome-description,
html[data-theme="dark"] .reasons-title,
html[data-theme="dark"] .authorized-service-main-title,
html[data-theme="dark"] .main-content h1,
html[data-theme="dark"] .main-content h2,
html[data-theme="dark"] .main-content h3,
html[data-theme="dark"] .main-content h4,
html[data-theme="dark"] .main-content p,
html[data-theme="dark"] .main-content li {
    color: var(--es-text);
}

html[data-theme="dark"] .service-category-card,
html[data-theme="dark"] .service-category-card h3,
html[data-theme="dark"] .service-category-card p,
html[data-theme="dark"] .service-category-card li,
html[data-theme="dark"] .service-category-title,
html[data-theme="dark"] .service-types-header,
html[data-theme="dark"] .service-description,
html[data-theme="dark"] .service-card-title,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .product-card h3,
html[data-theme="dark"] .product-card p,
html[data-theme="dark"] .product-name,
html[data-theme="dark"] .product-title,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .about-card p {
    color: var(--es-text);
}

html[data-theme="dark"] .reasons-subtitle,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .main-content .text-muted {
    color: var(--es-muted) !important;
}

html[data-theme="dark"] .hero-section,
html[data-theme="dark"] .hero-section h1,
html[data-theme="dark"] .hero-section p,
html[data-theme="dark"] .get-started-section,
html[data-theme="dark"] .get-started-title,
html[data-theme="dark"] .get-started-description,
html[data-theme="dark"] .get-started-button,
html[data-theme="dark"] .reason-card,
html[data-theme="dark"] .reason-card h3,
html[data-theme="dark"] .reason-card p,
html[data-theme="dark"] .reason-card li {
    color: #ffffff;
}

html[data-theme="dark"] .reasons-section,
html[data-theme="dark"] .authorized-service-section,
html[data-theme="dark"] .services-brands-bg-styled {
    background: var(--es-bg);
    background-image: none;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .service-category-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .branch-service-card-enhanced,
html[data-theme="dark"] .branch-product-card-enhanced,
html[data-theme="dark"] .auth-slide-card,
html[data-theme="dark"] .auth-pane {
    background-color: var(--es-surface) !important;
    color: var(--es-text);
    border-color: var(--es-border);
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--es-surface-2) !important;
    color: var(--es-text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
    background-color: var(--es-surface-2);
    color: var(--es-text);
    border-color: var(--es-border);
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--es-muted);
}

html[data-theme="dark"] .table {
    --bs-table-bg: var(--es-surface);
    --bs-table-color: var(--es-text);
    --bs-table-border-color: var(--es-border);
    --bs-table-striped-bg: var(--es-surface-2);
    --bs-table-hover-bg: var(--es-surface-2);
    color: var(--es-text);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1);
}

/* Admin panel follows the same saved theme. The sidebar stays brand blue. */
html[data-theme="dark"] body {
    background-color: var(--es-bg) !important;
}

html[data-theme="dark"] .admin-navbar {
    background: var(--es-header) !important;
    border-bottom-color: var(--es-border) !important;
    color: var(--es-text);
}

html[data-theme="dark"] .admin-navbar .navbar-brand,
html[data-theme="dark"] .admin-navbar .nav-link,
html[data-theme="dark"] .admin-navbar .admin-navbar-brand,
html[data-theme="dark"] .admin-navbar .admin-navbar-brand-name,
html[data-theme="dark"] .admin-navbar .admin-navbar-brand-store {
    color: var(--es-text) !important;
}

html[data-theme="dark"] .admin-navbar .admin-navbar-brand-role {
    background: rgba(56, 189, 248, 0.16);
    color: #7dd3fc;
}

html[data-theme="dark"] .admin-main-content {
    background: var(--es-bg) !important;
    color: var(--es-text) !important;
}

html[data-theme="dark"] .admin-main-content .card,
html[data-theme="dark"] .admin-main-content .card-header,
html[data-theme="dark"] .admin-main-content .modal-content {
    background: var(--es-surface) !important;
    border-color: var(--es-border) !important;
    color: var(--es-text) !important;
}

html[data-theme="dark"] .admin-main-content .card-header h5,
html[data-theme="dark"] .admin-main-content h1,
html[data-theme="dark"] .admin-main-content h2,
html[data-theme="dark"] .admin-main-content h3,
html[data-theme="dark"] .admin-main-content .table tbody td {
    color: var(--es-text) !important;
}

html[data-theme="dark"] .admin-main-content .table thead th {
    background: var(--es-surface-2) !important;
    color: var(--es-muted) !important;
}

html[data-theme="dark"] .admin-main-content .text-muted {
    color: var(--es-muted) !important;
}