/**
 * ALUMINIUMGLASS.CO.IN
 * Public Marketplace
 *
 * File:
 * /public_html/assets/css/themes/dark.css
 *
 * Purpose:
 * Dark theme overrides for the public marketplace.
 *
 * IMPORTANT:
 * - No marketplace data is stored here.
 * - No vendor/business/product data is hardcoded here.
 * - Live data must always come from the backend API/database.
 *
 * Theme activation:
 * <html data-theme="dark">
 *
 * or:
 * <body class="theme-dark">
 */


/* =========================================================
   1. DARK THEME ROOT VARIABLES
   ========================================================= */

:root[data-theme="dark"],
html.theme-dark,
body.theme-dark {

    color-scheme: dark;

    /* -----------------------------------------------------
       Background
       ----------------------------------------------------- */

    --theme-bg: #0b1120;
    --theme-bg-soft: #111827;
    --theme-bg-muted: #172033;
    --theme-surface: #111827;
    --theme-surface-raised: #182235;
    --theme-surface-hover: #202c42;
    --theme-surface-active: #26344c;

    /* -----------------------------------------------------
       Text
       ----------------------------------------------------- */

    --theme-text: #f3f4f6;
    --theme-text-strong: #ffffff;
    --theme-text-muted: #aeb8c8;
    --theme-text-subtle: #7f8ba0;
    --theme-text-disabled: #5f6b7d;

    /* -----------------------------------------------------
       Borders
       ----------------------------------------------------- */

    --theme-border: #263247;
    --theme-border-light: #1f2a3d;
    --theme-border-strong: #35435b;

    /* -----------------------------------------------------
       Brand
       ----------------------------------------------------- */

    --theme-primary: #38bdf8;
    --theme-primary-hover: #60cfff;
    --theme-primary-active: #0ea5e9;
    --theme-primary-soft: rgba(56, 189, 248, 0.12);
    --theme-primary-border: rgba(56, 189, 248, 0.35);

    /* -----------------------------------------------------
       Secondary
       ----------------------------------------------------- */

    --theme-secondary: #a78bfa;
    --theme-secondary-hover: #b8a2ff;
    --theme-secondary-soft: rgba(167, 139, 250, 0.12);

    /* -----------------------------------------------------
       Status
       ----------------------------------------------------- */

    --theme-success: #34d399;
    --theme-success-soft: rgba(52, 211, 153, 0.12);
    --theme-success-border: rgba(52, 211, 153, 0.35);

    --theme-warning: #fbbf24;
    --theme-warning-soft: rgba(251, 191, 36, 0.12);
    --theme-warning-border: rgba(251, 191, 36, 0.35);

    --theme-danger: #fb7185;
    --theme-danger-soft: rgba(251, 113, 133, 0.12);
    --theme-danger-border: rgba(251, 113, 133, 0.35);

    --theme-info: #60a5fa;
    --theme-info-soft: rgba(96, 165, 250, 0.12);
    --theme-info-border: rgba(96, 165, 250, 0.35);

    /* -----------------------------------------------------
       Overlay
       ----------------------------------------------------- */

    --theme-overlay: rgba(0, 0, 0, 0.72);

    /* -----------------------------------------------------
       Shadows
       ----------------------------------------------------- */

    --theme-shadow-xs:
        0 1px 2px rgba(0, 0, 0, 0.30);

    --theme-shadow-sm:
        0 2px 8px rgba(0, 0, 0, 0.35);

    --theme-shadow-md:
        0 8px 24px rgba(0, 0, 0, 0.40);

    --theme-shadow-lg:
        0 16px 48px rgba(0, 0, 0, 0.48);

    /* -----------------------------------------------------
       Focus
       ----------------------------------------------------- */

    --theme-focus-ring:
        0 0 0 3px rgba(56, 189, 248, 0.25);
}


/* =========================================================
   2. GLOBAL DARK BACKGROUND
   ========================================================= */

html[data-theme="dark"],
html.theme-dark {
    background: var(--theme-bg);
}

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


/* =========================================================
   3. COMMON SURFACES
   ========================================================= */

.theme-dark .surface,
.theme-dark .card,
.theme-dark .panel,
.theme-dark .box,
.theme-dark .section-card,
.theme-dark .content-card,
.theme-dark .marketplace-card {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .surface-raised,
.theme-dark .card-raised,
.theme-dark .panel-raised {

    background-color: var(--theme-surface-raised);
}


/* =========================================================
   4. HEADER
   ========================================================= */

.theme-dark header,
.theme-dark .site-header,
.theme-dark .header,
html[data-theme="dark"] header,
html[data-theme="dark"] .site-header {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-bottom-color: var(--theme-border);
}


.theme-dark .header a,
.theme-dark .site-header a {

    color: var(--theme-text);
}


.theme-dark .header a:hover,
.theme-dark .site-header a:hover {

    color: var(--theme-primary);
}


/* =========================================================
   5. TOPBAR
   ========================================================= */

.theme-dark .topbar,
.theme-dark .site-topbar {

    background-color: #080d18;
    color: var(--theme-text-muted);
    border-bottom-color: var(--theme-border-light);
}


.theme-dark .topbar a,
.theme-dark .site-topbar a {

    color: var(--theme-text-muted);
}


.theme-dark .topbar a:hover,
.theme-dark .site-topbar a:hover {

    color: var(--theme-primary);
}


/* =========================================================
   6. NAVIGATION
   ========================================================= */

.theme-dark .navigation,
.theme-dark .main-navigation,
.theme-dark .navbar {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .navigation a,
.theme-dark .main-navigation a,
.theme-dark .navbar a {

    color: var(--theme-text-muted);
}


.theme-dark .navigation a:hover,
.theme-dark .navigation a.active,
.theme-dark .main-navigation a:hover,
.theme-dark .main-navigation a.active,
.theme-dark .navbar a:hover,
.theme-dark .navbar a.active {

    color: var(--theme-primary);
    background-color: var(--theme-primary-soft);
}


/* =========================================================
   7. DROPDOWN MENUS
   ========================================================= */

.theme-dark .dropdown-menu,
.theme-dark .menu-dropdown,
.theme-dark .navigation-dropdown {

    background-color: var(--theme-surface-raised);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow-lg);
}


.theme-dark .dropdown-menu a,
.theme-dark .menu-dropdown a {

    color: var(--theme-text);
}


.theme-dark .dropdown-menu a:hover,
.theme-dark .menu-dropdown a:hover {

    background-color: var(--theme-surface-hover);
    color: var(--theme-primary);
}


/* =========================================================
   8. SEARCH
   ========================================================= */

.theme-dark .search-box,
.theme-dark .search-container,
.theme-dark .search-panel {

    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
}


.theme-dark .search-box input,
.theme-dark .search-box select,
.theme-dark .search-box textarea,
.theme-dark .search-container input,
.theme-dark .search-container select {

    background-color: var(--theme-bg-soft);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .search-box input::placeholder,
.theme-dark .search-container input::placeholder {

    color: var(--theme-text-subtle);
}


.theme-dark .search-box input:focus,
.theme-dark .search-box select:focus,
.theme-dark .search-container input:focus,
.theme-dark .search-container select:focus {

    border-color: var(--theme-primary);
    box-shadow: var(--theme-focus-ring);
    outline: none;
}


/* =========================================================
   9. AUTOCOMPLETE
   ========================================================= */

.theme-dark .search-autocomplete,
.theme-dark .autocomplete-results {

    background-color: var(--theme-surface-raised);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow-lg);
}


.theme-dark .autocomplete-item {

    color: var(--theme-text);
    border-bottom-color: var(--theme-border-light);
}


.theme-dark .autocomplete-item:hover,
.theme-dark .autocomplete-item.active {

    background-color: var(--theme-surface-hover);
}


.theme-dark .autocomplete-item .muted,
.theme-dark .autocomplete-item small {

    color: var(--theme-text-muted);
}


/* =========================================================
   10. LOCATION SELECTOR
   ========================================================= */

.theme-dark .location-selector,
.theme-dark .location-picker {

    background-color: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
}


.theme-dark .location-selector input,
.theme-dark .location-picker input {

    background-color: var(--theme-bg-soft);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .location-selector .location-icon,
.theme-dark .location-picker .location-icon {

    color: var(--theme-primary);
}


/* =========================================================
   11. BUTTONS
   ========================================================= */

.theme-dark .btn-primary,
.theme-dark button.btn-primary {

    background-color: var(--theme-primary);
    color: #06111a;
    border-color: var(--theme-primary);
}


.theme-dark .btn-primary:hover,
.theme-dark button.btn-primary:hover {

    background-color: var(--theme-primary-hover);
    border-color: var(--theme-primary-hover);
}


.theme-dark .btn-primary:active {

    background-color: var(--theme-primary-active);
}


.theme-dark .btn-secondary {

    background-color: var(--theme-secondary);
    color: #100c1c;
    border-color: var(--theme-secondary);
}


.theme-dark .btn-outline,
.theme-dark .btn-outline-primary {

    background-color: transparent;
    color: var(--theme-primary);
    border-color: var(--theme-primary-border);
}


.theme-dark .btn-outline:hover,
.theme-dark .btn-outline-primary:hover {

    background-color: var(--theme-primary-soft);
}


.theme-dark .btn-light {

    background-color: var(--theme-surface-raised);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .btn-light:hover {

    background-color: var(--theme-surface-hover);
}


.theme-dark .btn-danger {

    background-color: var(--theme-danger);
    color: #21080e;
    border-color: var(--theme-danger);
}


.theme-dark .btn-success {

    background-color: var(--theme-success);
    color: #061711;
    border-color: var(--theme-success);
}


/* =========================================================
   12. FORMS
   ========================================================= */

.theme-dark input,
.theme-dark select,
.theme-dark textarea {

    background-color: var(--theme-bg-soft);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark input::placeholder,
.theme-dark textarea::placeholder {

    color: var(--theme-text-subtle);
}


.theme-dark input:hover,
.theme-dark select:hover,
.theme-dark textarea:hover {

    border-color: var(--theme-border-strong);
}


.theme-dark input:focus,
.theme-dark select:focus,
.theme-dark textarea:focus {

    border-color: var(--theme-primary);
    outline: none;
    box-shadow: var(--theme-focus-ring);
}


.theme-dark label {

    color: var(--theme-text);
}


.theme-dark .form-text,
.theme-dark .help-text {

    color: var(--theme-text-muted);
}


/* =========================================================
   13. CHECKBOX / RADIO
   ========================================================= */

.theme-dark input[type="checkbox"],
.theme-dark input[type="radio"] {

    accent-color: var(--theme-primary);
}


/* =========================================================
   14. CARDS
   ========================================================= */

.theme-dark .business-card,
.theme-dark .vendor-card,
.theme-dark .service-card,
.theme-dark .product-card,
.theme-dark .category-card,
.theme-dark .review-card,
.theme-dark .quote-card,
.theme-dark .offer-card {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow-xs);
}


.theme-dark .business-card:hover,
.theme-dark .vendor-card:hover,
.theme-dark .service-card:hover,
.theme-dark .product-card:hover,
.theme-dark .category-card:hover,
.theme-dark .review-card:hover,
.theme-dark .quote-card:hover {

    background-color: var(--theme-surface-raised);
    border-color: var(--theme-border-strong);
    box-shadow: var(--theme-shadow-md);
}


/* =========================================================
   15. CARD TEXT
   ========================================================= */

.theme-dark .card-title,
.theme-dark .business-card-title,
.theme-dark .vendor-card-title,
.theme-dark .product-card-title,
.theme-dark .service-card-title {

    color: var(--theme-text-strong);
}


.theme-dark .card-description,
.theme-dark .business-card-description,
.theme-dark .vendor-card-description,
.theme-dark .product-card-description,
.theme-dark .service-card-description {

    color: var(--theme-text-muted);
}


.theme-dark .card-meta,
.theme-dark .business-card-meta,
.theme-dark .vendor-card-meta {

    color: var(--theme-text-subtle);
}


/* =========================================================
   16. LINKS
   ========================================================= */

.theme-dark a {

    color: var(--theme-primary);
}


.theme-dark a:hover {

    color: var(--theme-primary-hover);
}


.theme-dark a.muted,
.theme-dark .muted-link {

    color: var(--theme-text-muted);
}


/* =========================================================
   17. BADGES
   ========================================================= */

.theme-dark .badge {

    background-color: var(--theme-surface-hover);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .badge-primary {

    background-color: var(--theme-primary-soft);
    color: var(--theme-primary);
    border-color: var(--theme-primary-border);
}


.theme-dark .badge-success {

    background-color: var(--theme-success-soft);
    color: var(--theme-success);
    border-color: var(--theme-success-border);
}


.theme-dark .badge-warning {

    background-color: var(--theme-warning-soft);
    color: var(--theme-warning);
    border-color: var(--theme-warning-border);
}


.theme-dark .badge-danger {

    background-color: var(--theme-danger-soft);
    color: var(--theme-danger);
    border-color: var(--theme-danger-border);
}


.theme-dark .badge-info {

    background-color: var(--theme-info-soft);
    color: var(--theme-info);
    border-color: var(--theme-info-border);
}


/* =========================================================
   18. VERIFICATION
   ========================================================= */

.theme-dark .verification-badge {

    background-color: var(--theme-success-soft);
    color: var(--theme-success);
    border-color: var(--theme-success-border);
}


.theme-dark .verification-badge.pending {

    background-color: var(--theme-warning-soft);
    color: var(--theme-warning);
    border-color: var(--theme-warning-border);
}


.theme-dark .verification-badge.rejected {

    background-color: var(--theme-danger-soft);
    color: var(--theme-danger);
    border-color: var(--theme-danger-border);
}


/* =========================================================
   19. FILTER PANEL
   ========================================================= */

.theme-dark .filter-panel,
.theme-dark .filters,
.theme-dark .filter-sidebar {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .filter-group {

    border-bottom-color: var(--theme-border);
}


.theme-dark .filter-group-title {

    color: var(--theme-text-strong);
}


.theme-dark .filter-option {

    color: var(--theme-text-muted);
}


.theme-dark .filter-option:hover {

    color: var(--theme-text);
    background-color: var(--theme-surface-hover);
}


/* =========================================================
   20. SORT PANEL
   ========================================================= */

.theme-dark .sort-panel,
.theme-dark .sort-control {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


/* =========================================================
   21. PAGINATION
   ========================================================= */

.theme-dark .pagination a,
.theme-dark .pagination button {

    background-color: var(--theme-surface);
    color: var(--theme-text-muted);
    border-color: var(--theme-border);
}


.theme-dark .pagination a:hover,
.theme-dark .pagination button:hover {

    background-color: var(--theme-surface-hover);
    color: var(--theme-primary);
}


.theme-dark .pagination .active {

    background-color: var(--theme-primary);
    color: #06111a;
    border-color: var(--theme-primary);
}


/* =========================================================
   22. MODAL
   ========================================================= */

.theme-dark .modal {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow-lg);
}


.theme-dark .modal-backdrop,
.theme-dark .modal-overlay {

    background-color: var(--theme-overlay);
}


.theme-dark .modal-header,
.theme-dark .modal-footer {

    border-color: var(--theme-border);
}


.theme-dark .modal-title {

    color: var(--theme-text-strong);
}


.theme-dark .modal-close {

    color: var(--theme-text-muted);
}


.theme-dark .modal-close:hover {

    color: var(--theme-text);
    background-color: var(--theme-surface-hover);
}


/* =========================================================
   23. ENQUIRY
   ========================================================= */

.theme-dark .enquiry-form,
.theme-dark .enquiry-panel {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .enquiry-status {

    background-color: var(--theme-surface-raised);
    border-color: var(--theme-border);
}


.theme-dark .enquiry-success {

    background-color: var(--theme-success-soft);
    color: var(--theme-success);
    border-color: var(--theme-success-border);
}


/* =========================================================
   24. QUOTE
   ========================================================= */

.theme-dark .quote-panel,
.theme-dark .quote-card {

    background-color: var(--theme-surface);
    border-color: var(--theme-border);
}


.theme-dark .quote-price {

    color: var(--theme-text-strong);
}


.theme-dark .quote-meta {

    color: var(--theme-text-muted);
}


/* =========================================================
   25. CART
   ========================================================= */

.theme-dark .cart-item,
.theme-dark .cart-summary {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .cart-total {

    color: var(--theme-text-strong);
}


/* =========================================================
   26. CHECKOUT
   ========================================================= */

.theme-dark .checkout-section,
.theme-dark .checkout-summary {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .checkout-step {

    background-color: var(--theme-surface-raised);
    color: var(--theme-text-muted);
    border-color: var(--theme-border);
}


.theme-dark .checkout-step.active {

    color: var(--theme-primary);
    border-color: var(--theme-primary-border);
}


/* =========================================================
   27. ORDERS
   ========================================================= */

.theme-dark .order-card,
.theme-dark .order-detail,
.theme-dark .order-status {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .order-status.success {

    color: var(--theme-success);
}


.theme-dark .order-status.pending {

    color: var(--theme-warning);
}


.theme-dark .order-status.failed {

    color: var(--theme-danger);
}


/* =========================================================
   28. PAYMENT
   ========================================================= */

.theme-dark .payment-card,
.theme-dark .payment-method {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .payment-success {

    background-color: var(--theme-success-soft);
    color: var(--theme-success);
}


.theme-dark .payment-failed {

    background-color: var(--theme-danger-soft);
    color: var(--theme-danger);
}


.theme-dark .payment-pending {

    background-color: var(--theme-warning-soft);
    color: var(--theme-warning);
}


/* =========================================================
   29. PRICING
   ========================================================= */

.theme-dark .pricing-card,
.theme-dark .plan-card {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .pricing-card.featured,
.theme-dark .plan-card.featured {

    border-color: var(--theme-primary-border);
    box-shadow: var(--theme-shadow-md);
}


.theme-dark .pricing-price {

    color: var(--theme-text-strong);
}


.theme-dark .pricing-feature {

    color: var(--theme-text-muted);
}


/* =========================================================
   30. REVIEWS
   ========================================================= */

.theme-dark .review-card {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .review-rating {

    color: var(--theme-warning);
}


.theme-dark .review-author {

    color: var(--theme-text-strong);
}


.theme-dark .review-date {

    color: var(--theme-text-subtle);
}


/* =========================================================
   31. CHAT
   ========================================================= */

.theme-dark .chat-widget,
.theme-dark .chat-window {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow-lg);
}


.theme-dark .chat-header {

    background-color: var(--theme-surface-raised);
    border-bottom-color: var(--theme-border);
}


.theme-dark .chat-message.incoming {

    background-color: var(--theme-surface-hover);
    color: var(--theme-text);
}


.theme-dark .chat-message.outgoing {

    background-color: var(--theme-primary);
    color: #06111a;
}


.theme-dark .chat-input {

    background-color: var(--theme-bg-soft);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


/* =========================================================
   32. NOTIFICATIONS
   ========================================================= */

.theme-dark .notification-panel,
.theme-dark .notification-item {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark .notification-item:hover {

    background-color: var(--theme-surface-hover);
}


.theme-dark .notification-item.unread {

    background-color: var(--theme-primary-soft);
}


/* =========================================================
   33. EMPTY STATE
   ========================================================= */

.theme-dark .empty-state {

    background-color: var(--theme-surface);
    color: var(--theme-text-muted);
    border-color: var(--theme-border);
}


.theme-dark .empty-state h1,
.theme-dark .empty-state h2,
.theme-dark .empty-state h3 {

    color: var(--theme-text-strong);
}


/* =========================================================
   34. ERROR STATE
   ========================================================= */

.theme-dark .error-state {

    background-color: var(--theme-danger-soft);
    color: var(--theme-text);
    border-color: var(--theme-danger-border);
}


.theme-dark .error-state-title {

    color: var(--theme-danger);
}


/* =========================================================
   35. LOADER
   ========================================================= */

.theme-dark .loader-overlay {

    background-color: rgba(11, 17, 32, 0.82);
}


.theme-dark .loader {

    border-color: var(--theme-border);
    border-top-color: var(--theme-primary);
}


/* =========================================================
   36. BREADCRUMB
   ========================================================= */

.theme-dark .breadcrumb {

    color: var(--theme-text-muted);
}


.theme-dark .breadcrumb a {

    color: var(--theme-primary);
}


.theme-dark .breadcrumb .current {

    color: var(--theme-text);
}


/* =========================================================
   37. TABLE
   ========================================================= */

.theme-dark table {

    background-color: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
}


.theme-dark th {

    background-color: var(--theme-surface-raised);
    color: var(--theme-text-strong);
    border-color: var(--theme-border);
}


.theme-dark td {

    border-color: var(--theme-border);
    color: var(--theme-text-muted);
}


.theme-dark tbody tr:hover {

    background-color: var(--theme-surface-hover);
}


/* =========================================================
   38. TABS
   ========================================================= */

.theme-dark .tabs {

    border-bottom-color: var(--theme-border);
}


.theme-dark .tab {

    color: var(--theme-text-muted);
}


.theme-dark .tab:hover {

    color: var(--theme-text);
}


.theme-dark .tab.active {

    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
}


/* =========================================================
   39. ACCORDION
   ========================================================= */

.theme-dark .accordion-item {

    background-color: var(--theme-surface);
    border-color: var(--theme-border);
}


.theme-dark .accordion-header {

    color: var(--theme-text);
}


.theme-dark .accordion-header:hover {

    background-color: var(--theme-surface-hover);
}


.theme-dark .accordion-content {

    color: var(--theme-text-muted);
}


/* =========================================================
   40. TOOLTIP
   ========================================================= */

.theme-dark .tooltip {

    background-color: #020617;
    color: #ffffff;
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow-md);
}


/* =========================================================
   41. FOOTER
   ========================================================= */

.theme-dark footer,
.theme-dark .site-footer {

    background-color: #080d18;
    color: var(--theme-text-muted);
    border-top-color: var(--theme-border);
}


.theme-dark footer a,
.theme-dark .site-footer a {

    color: var(--theme-text-muted);
}


.theme-dark footer a:hover,
.theme-dark .site-footer a:hover {

    color: var(--theme-primary);
}


.theme-dark .footer-heading {

    color: var(--theme-text-strong);
}


/* =========================================================
   42. SOCIAL / ICON BUTTONS
   ========================================================= */

.theme-dark .icon-button,
.theme-dark .social-button {

    background-color: var(--theme-surface-raised);
    color: var(--theme-text-muted);
    border-color: var(--theme-border);
}


.theme-dark .icon-button:hover,
.theme-dark .social-button:hover {

    background-color: var(--theme-surface-hover);
    color: var(--theme-primary);
}


/* =========================================================
   43. IMAGE PLACEHOLDER
   ========================================================= */

.theme-dark .image-placeholder,
.theme-dark .media-placeholder {

    background-color: var(--theme-bg-muted);
    color: var(--theme-text-subtle);
    border-color: var(--theme-border);
}


/* =========================================================
   44. DIVIDERS
   ========================================================= */

.theme-dark hr,
.theme-dark .divider {

    border-color: var(--theme-border);
}


/* =========================================================
   45. CODE / PRE
   ========================================================= */

.theme-dark code,
.theme-dark pre {

    background-color: #020617;
    color: #dbeafe;
    border-color: var(--theme-border);
}


/* =========================================================
   46. SELECTION
   ========================================================= */

.theme-dark ::selection {

    background-color: var(--theme-primary);
    color: #06111a;
}


/* =========================================================
   47. SCROLLBAR
   ========================================================= */

.theme-dark {

    scrollbar-color: #334155 #0b1120;
    scrollbar-width: thin;
}


.theme-dark ::-webkit-scrollbar {

    width: 10px;
    height: 10px;
}


.theme-dark ::-webkit-scrollbar-track {

    background: var(--theme-bg);
}


.theme-dark ::-webkit-scrollbar-thumb {

    background: #334155;
    border-radius: 999px;
    border: 2px solid var(--theme-bg);
}


.theme-dark ::-webkit-scrollbar-thumb:hover {

    background: #475569;
}


/* =========================================================
   48. DISABLED ELEMENTS
   ========================================================= */

.theme-dark button:disabled,
.theme-dark input:disabled,
.theme-dark select:disabled,
.theme-dark textarea:disabled,
.theme-dark .disabled {

    background-color: var(--theme-bg-muted);
    color: var(--theme-text-disabled);
    border-color: var(--theme-border-light);
    cursor: not-allowed;
}


/* =========================================================
   49. FOCUS ACCESSIBILITY
   ========================================================= */

.theme-dark :focus-visible {

    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}


/* =========================================================
   50. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .theme-dark *,
    .theme-dark *::before,
    .theme-dark *::after {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   51. PRINT
   ========================================================= */

@media print {

    .theme-dark {

        background: #ffffff !important;
        color: #000000 !important;
    }

    .theme-dark body,
    .theme-dark .card,
    .theme-dark .panel,
    .theme-dark .surface {

        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
    }

    .theme-dark a {

        color: #000000 !important;
        text-decoration: underline !important;
    }
}


/* =========================================================
   END OF DARK THEME
   ========================================================= */