﻿/* DARK MODE */
body.dark-mode {
  background-color: var(--bg-dark);
  color: var(--light);
}

body.dark-mode {
  --primary: #8ca989;
  --bs-primary: #8ca989;
  --bs-primary-rgb: 14, 75, 196;
  --secondary: #ecede8;
  --light: #eae6f2;
  --dark: #08000d;
  --bg-dark: #000000;
  --bg-darker: #140909;
}

/* Ensure template wrapper doesn't force light background */
body.dark-mode .bg-white {
  background-color: var(--bg-dark) !important;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--primary) 68%, transparent),
    color-mix(in srgb, #000 68%, transparent),
    color-mix(in srgb, var(--secondary) 68%, transparent)
  );
}

/*** Bootstrap "primary" overrides (bootstrap.min.css uses hard-coded colors) ***/
body.dark-mode .text-primary,
body.dark-mode .link-primary {
  color: var(--primary) !important;
}
body.dark-mode .bg-primary {
  background-color: var(--primary) !important;
}
body.dark-mode .border-primary {
  border-color: var(--primary) !important;
}
body.dark-mode .btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
body.dark-mode .btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:focus {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Dashboard */
body.dark-mode .dashboard-header {
  background: linear-gradient(
    135deg,
    rgba(14, 75, 196, 0.18),
    rgba(32, 201, 151, 0.12)
  ) !important;
  border-color: rgba(234, 230, 242, 0.14) !important;
}

body.dark-mode .dashboard-tile,
body.dark-mode .dashboard-entity {
  background: rgba(16, 9, 20, 0.75) !important;
  border-color: rgba(234, 230, 242, 0.14) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .dashboard-tile:hover,
body.dark-mode .dashboard-entity:hover {
  border-color: rgba(14, 75, 196, 0.35) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode .dashboard-tile__desc,
body.dark-mode .dashboard-entity__meta {
  color: rgba(234, 230, 242, 0.72) !important;
}

body.dark-mode .dashboard-tile__chev,
body.dark-mode .dashboard-entity__chev {
  color: rgba(234, 230, 242, 0.55) !important;
}

body.dark-mode .dashboard-tile__icon {
  background: rgba(14, 75, 196, 0.18) !important;
  color: var(--primary) !important;
}

body.dark-mode .dashboard-entity__icon {
  background: rgba(32, 201, 151, 0.16) !important;
  color: #20c997 !important;
}

/* Warehouse storage: entity tabs */
body.dark-mode .warehouse-entity-tabs.nav-tabs {
  border-bottom-color: rgba(234, 230, 242, 0.18);
}

body.dark-mode .warehouse-entity-tabs .nav-link {
  color: rgba(234, 230, 242, 0.78) !important;
  border-color: transparent !important;
}

body.dark-mode .warehouse-entity-tabs .nav-link:hover,
body.dark-mode .warehouse-entity-tabs .nav-link:focus {
  border-color: rgba(234, 230, 242, 0.18) rgba(234, 230, 242, 0.18) transparent !important;
  color: var(--light) !important;
}

body.dark-mode .warehouse-entity-tabs .nav-link.active {
  background-color: rgba(16, 9, 20, 0.92) !important;
  border-color: rgba(234, 230, 242, 0.22) rgba(234, 230, 242, 0.22) transparent !important;
  color: var(--light) !important;
}

/* Warehouse storage: stock view pills (Stock/Shortages) */
body.dark-mode .warehouse-stock-view-tabs .nav-link {
  color: rgba(234, 230, 242, 0.78) !important;
}

body.dark-mode .warehouse-stock-view-tabs .nav-link:hover,
body.dark-mode .warehouse-stock-view-tabs .nav-link:focus {
  color: var(--light) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .warehouse-stock-view-tabs .nav-link.active {
  background: var(--primary) !important;
  color: var(--light) !important;
}

/* Warehouse storage: product mode tabs (Existing/New) */
body.dark-mode .wh-product-mode-tabs .btn-outline-primary,
body.dark-mode .wh-product-mode-tabs .btn-outline-primary:hover,
body.dark-mode .wh-product-mode-tabs .btn-outline-primary:focus,
body.dark-mode .wh-product-mode-tabs .btn-check:checked + .btn-outline-primary {
  color: var(--light) !important;
}

/* Workshop services: light-mode step pills and source tabs */
[data-service-step-indicator][role="button"] {
  cursor: pointer;
}

[data-service-step-indicator][role="button"]:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

body:not(.dark-mode) [data-service-step-indicator] {
  border: 1px solid #c8d4e4;
  background: #eef3f9;
  color: #445b78;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body:not(.dark-mode) [data-service-step-indicator].text-bg-primary {
  background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
  border-color: #0a58ca !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(13, 110, 253, 0.22);
}

body:not(.dark-mode) [data-service-step-indicator].text-bg-secondary {
  background: #eef3f9 !important;
  border-color: #c8d4e4 !important;
  color: #445b78 !important;
}

body:not(.dark-mode) .service-car-source-tabs .btn-outline-primary {
  color: #184f9a !important;
  background: #f6faff !important;
  border-color: #b8cbe6 !important;
}

body:not(.dark-mode) .service-car-source-tabs .btn-outline-primary:hover,
body:not(.dark-mode) .service-car-source-tabs .btn-outline-primary:focus {
  color: #123d77 !important;
  background: #edf5ff !important;
  border-color: #8fb1e3 !important;
}

body:not(.dark-mode)
  .service-car-source-tabs
  .btn-check:checked
  + .btn-outline-primary,
body:not(.dark-mode)
  .service-car-source-tabs
  .btn-check:active
  + .btn-outline-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
  border-color: #0a58ca !important;
  box-shadow: 0 10px 22px rgba(13, 110, 253, 0.2);
}

/* Workshop services: status badges */
body:not(.dark-mode) .workshop-service-status-badge {
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body:not(.dark-mode) .workshop-service-status-badge--open {
  background: #dcecff;
  border-color: #9ec0f6;
  color: #0a4a9f;
}

body:not(.dark-mode) .workshop-service-status-badge--overdue {
  background: #fde4e4;
  border-color: #f1b6b6;
  color: #a11d1d;
}

body:not(.dark-mode) .workshop-service-status-badge--done {
  background: #dff5e8;
  border-color: #a6dcbe;
  color: #1d6a42;
}

/* Workshop services: car source tabs */
body.dark-mode
  .service-car-source-tabs
  .btn-check:checked
  + .btn-outline-primary {
  color: var(--light) !important;
}

body.dark-mode .workshop-service-status-badge {
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.dark-mode .workshop-service-status-badge--open {
  background: rgba(14, 75, 196, 0.24);
  border-color: rgba(14, 75, 196, 0.45);
  color: var(--light);
}

body.dark-mode .workshop-service-status-badge--overdue {
  background: rgba(181, 41, 58, 0.26);
  border-color: rgba(221, 112, 126, 0.42);
  color: #ffd7dc;
}

body.dark-mode .workshop-service-status-badge--done {
  background: rgba(33, 140, 90, 0.26);
  border-color: rgba(93, 201, 150, 0.42);
  color: #d8ffee;
}

body.dark-mode .fleet-car-source-tabs .btn-check:checked + .btn-outline-primary,
body.dark-mode .fleet-car-source-tabs .btn-check:active + .btn-outline-primary {
  color: var(--light) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode .h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--light);
}

body.dark-mode .bg-light {
  background-color: var(--dark) !important;
}
body.dark-mode .fa-bars,
body.dark-mode p.text-primary {
  color: var(--primary) !important;
}
body.dark-mode .navbar-toggler {
  border-color: var(--primary) !important;
}
body.dark-mode .accordion-button {
  background-color: var(--dark) !important;
}
body.dark-mode.accordion-button:not(.collapsed) {
  color: var(--primary) !important;
}

body.dark-mode .faq-text {
  color: var(--light) !important;
}

/*** Forms ***/
body.dark-mode .form-control {
  color: var(--light) !important;
  background-color: var(--bg-darker) !important;
  border-color: rgba(234, 230, 242, 0.2) !important;
}

body.dark-mode .form-control::placeholder {
  color: rgba(234, 230, 242, 0.6) !important;
}

body.dark-mode .form-control:focus {
  color: var(--light) !important;
  background-color: var(--bg-darker) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(164, 0, 252, 0.25) !important;
  outline: 0;
}

body.dark-mode .form-select {
  color: var(--light) !important;
  background-color: var(--bg-darker) !important;
  border-color: rgba(234, 230, 242, 0.2) !important;
}

body.dark-mode .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(164, 0, 252, 0.25) !important;
  outline: 0;
}

/*** Shared app surfaces (cards/tables/dropdowns) ***/
body.dark-mode .card {
  background: rgba(16, 9, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--light);
}

body.dark-mode .card.shadow-sm {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .text-muted {
  color: rgba(234, 230, 242, 0.62) !important;
}

body.dark-mode .table {
  color: rgba(234, 230, 242, 0.88);
}

body.dark-mode .table thead th,
body.dark-mode .table thead th a,
body.dark-mode .table thead th button,
body.dark-mode .link-body-emphasis {
  color: var(--light) !important;
}

body.dark-mode .table > :not(caption) > * > * {
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.03);
  color: inherit;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: rgba(0, 0, 0, 0.08);
  color: inherit;
}

body.dark-mode .table a {
  color: var(--light);
}

body.dark-mode .addon-access-row-toggle,
body.dark-mode .addon-access-row-toggle:hover,
body.dark-mode .addon-access-row-toggle:focus,
body.dark-mode .addon-access-row-toggle:focus-visible {
  color: #ffffff !important;
}

body.dark-mode .dropdown-menu {
  background: rgba(16, 9, 20, 0.98);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--light);
}

body.dark-mode .dropdown-item {
  color: rgba(234, 230, 242, 0.92);
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.06);
  color: var(--light);
}

body.dark-mode .dropdown-divider {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/*** Profile page ***/
body.dark-mode .profile-page .card {
  background: rgba(16, 9, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--light);
}

body.dark-mode .profile-page .card.shadow-sm {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .profile-page .form-label {
  color: rgba(234, 230, 242, 0.92);
}

body.dark-mode .profile-page .form-text {
  color: rgba(234, 230, 242, 0.72) !important;
}

body.dark-mode .profile-page .alert {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--light);
}

body.dark-mode .profile-page .alert-danger {
  background: rgba(220, 53, 69, 0.16);
  border-color: rgba(220, 53, 69, 0.35);
}

body.dark-mode .profile-page .alert-success {
  background: rgba(25, 135, 84, 0.16);
  border-color: rgba(25, 135, 84, 0.35);
}

body.dark-mode .profile-page #generated-password-box {
  background: rgba(14, 75, 196, 0.14);
  border-color: rgba(14, 75, 196, 0.32);
}

body.dark-mode .profile-page #passwordAdvisor {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/*** Modals ***/
body.dark-mode .modal-backdrop.show {
  background-color: rgba(3, 0, 8, 0.9);
  opacity: 0.84;
}

body.dark-mode .modal-content {
  background: linear-gradient(
    180deg,
    rgba(22, 12, 32, 0.98),
    rgba(10, 5, 18, 0.98)
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--light) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(14, 75, 196, 0.18);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .modal-title {
  color: var(--light) !important;
}

body.dark-mode .modal .btn-close {
  filter: invert(1) grayscale(1) brightness(200%);
  opacity: 0.85;
}

body.dark-mode .modal .btn-close:hover,
body.dark-mode .modal .btn-close:focus {
  opacity: 1;
  box-shadow: none;
}

body.dark-mode .modal .form-label {
  color: rgba(234, 230, 242, 0.92) !important;
}

body.dark-mode .modal .btn-outline-secondary {
  color: rgba(234, 230, 242, 0.92) !important;
  border-color: rgba(234, 230, 242, 0.24) !important;
}

body.dark-mode .modal .btn-outline-secondary:hover,
body.dark-mode .modal .btn-outline-secondary:focus {
  color: var(--light) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(234, 230, 242, 0.34) !important;
}

body.dark-mode
  #customerVoucherActionModal
  [data-customer-voucher-modal-summary] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.8rem;
  padding: 0.75rem 0.9rem;
}

body.dark-mode .customer-voucher-tabs.nav-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .customer-voucher-tabs .nav-link {
  color: rgba(234, 230, 242, 0.78) !important;
  border-color: transparent !important;
}

body.dark-mode .customer-voucher-tabs .nav-link:hover,
body.dark-mode .customer-voucher-tabs .nav-link:focus {
  color: var(--light) !important;
  border-color: rgba(234, 230, 242, 0.16) rgba(234, 230, 242, 0.16) transparent !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode .customer-voucher-tabs .nav-link.active {
  color: var(--light) !important;
  background: rgba(16, 9, 20, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.18) rgba(255, 255, 255, 0.18) transparent !important;
}

/*** Admin page ***/
body.dark-mode .admin-page .bg-light {
  background: rgba(16, 9, 20, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--light);
}

body.dark-mode .admin-page .nav-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .admin-page .nav-tabs .nav-link {
  color: var(--light) !important;
  background: transparent;
  border-color: transparent;
}

body.dark-mode .admin-page .nav-tabs .nav-link:hover,
body.dark-mode .admin-page .nav-tabs .nav-link:focus {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--light);
}

body.dark-mode .admin-page .nav-tabs .nav-link.active {
  background: rgba(14, 75, 196, 0.16);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--light) !important;
}

body.dark-mode .admin-page .table {
  color: rgba(234, 230, 242, 0.88);
}

body.dark-mode .admin-page .table thead th,
body.dark-mode .admin-page .table thead th a,
body.dark-mode .admin-page .table thead th button {
  color: var(--light) !important;
}

body.dark-mode .admin-page .text-primary,
body.dark-mode .admin-page .link-primary,
body.dark-mode .admin-page .text-secondary,
body.dark-mode .admin-page .link-secondary {
  color: var(--light) !important;
}

body.dark-mode .admin-page .table > :not(caption) > * > * {
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .admin-page .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.03);
  color: inherit;
}

body.dark-mode .admin-page .table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: rgba(0, 0, 0, 0.08);
  color: inherit;
}

body.dark-mode .admin-page .table a {
  color: var(--light);
}

body.dark-mode .admin-page .text-muted {
  color: rgba(234, 230, 242, 0.62) !important;
}

body.dark-mode .admin-page .h5,
body.dark-mode .admin-page span.h5 {
  color: var(--light) !important;
}

body.dark-mode .admin-page .btn-outline-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

body.dark-mode .admin-page .btn-outline-primary:hover,
body.dark-mode .admin-page .btn-outline-primary:focus {
  filter: brightness(1.05);
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

/*** Navbar ***/
body.dark-mode .navbar-light {
  /* Prevent dark-mode "stripe" under the navbar (bootstrap shadow/border on transparent nav). */
  background-color: #000000ac !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* Authenticated app topbar should never be transparent in dark-mode (prevents top "stripe" at scrollTop=0). */
body.dark-mode .app-topbar.navbar-light {
  background-color: #000000ac !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body.dark-mode .sticky-top.navbar-light {
  background-color: #000000ac !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body.dark-mode .navbar.shadow-sm,
body.dark-mode .navbar-light.shadow-sm {
  box-shadow: none !important;
}
body.dark-mode .navbar .dropdown-menu {
  background: rgba(16, 9, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body.dark-mode .navbar .dropdown-item {
  color: rgba(234, 230, 242, 0.9);
}

body.dark-mode .navbar .dropdown-item:hover,
body.dark-mode .navbar .dropdown-item:focus {
  background: rgba(14, 75, 196, 0.18);
  color: var(--light);
}

body.dark-mode .navbar .dropdown-item.active,
body.dark-mode .navbar .dropdown-item:active {
  background: var(--primary);
  color: #ffffff;
}

body.dark-mode .navbar .dropdown-divider {
  border-top-color: rgba(255, 255, 255, 0.12);
}
body.dark-mode .sticky-top.navbar-light .navbar-nav .nav-link {
  color: var(--light) !important;
}
body.dark-mode .navbar-light .navbar-nav .nav-link:not(.active) {
  color: var(--light) !important;
}
body.dark-mode .navbar-light .navbar-brand h1 {
  color: var(--light);
}
body.dark-mode .navbar-light .navbar-contact,
body.dark-mode .navbar-light .navbar-contact a {
  color: var(--light) !important;
}
body.dark-mode .navbar-light .btn {
  background-color: var(--secondary);
  color: var(--dark);
}

@media (max-width: 991.98px) {
  body.dark-mode .navbar-light .navbar-collapse {
    border-top: 1px solid rgba(234, 230, 242, 0.15);
  }
  body.dark-mode .navbar-light .navbar-nav .nav-link,
  body.dark-mode .sticky-top.navbar-light .navbar-nav .nav-link {
    color: var(--light) !important;
  }
  body.dark-mode .navbar-light .navbar-contact,
  body.dark-mode .navbar-light .navbar-contact a {
    color: var(--light) !important;
  }
  body.dark-mode .navbar-light .navbar-brand img {
    content: url("../img/logo-main-job.png");
    margin: 0;
  }
}
/*** Hero Header ***/
body.dark-mode .hero-header {
  color: var(--light);
}

body.dark-mode .hero-header::after {
  background: rgba(0, 0, 0, 0.5);
}

body.dark-mode .hero-card {
  background-color: rgba(0, 0, 0, 0.18);
  box-shadow:
    inset 10px 12px 24px rgba(0, 0, 0, 0.72),
    inset -10px -12px 22px rgba(255, 255, 255, 0.06);
}

/*** Service Item ***/
body.dark-mode .service-item {
  background: var(--bg-darker);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--light);
}
body.dark-mode .service-item p {
  color: #bbb;
}

body.dark-mode .service body.dark-mode .service-item:hover {
  background: var(--primary);
}
body.dark-mode .service-item:hover p,
body.dark-mode .service-item:hover h5 {
  color: var(--light);
}
body.dark-mode .text-dark {
  color: var(--light) !important;
}
body.dark-mode .service-item a.btn {
  color: var(--dark);
  background: var(--secondary);
}
body.dark-mode .service-card {
  background: var(--dark);
}

/*** Portfolio ***/
body.dark-mode #portfolio-flters li {
  color: var(--light);
}
body.dark-mode #portfolio-flters li:hover,
body.dark-mode #portfolio-flters li.active {
  color: var(--secondary);
  border-color: var(--secondary);
}
body.dark-mode .portfolio-item .portfolio-overlay {
  background: rgba(50, 20, 90, 0.85);
}

/*** Sekcje z blobami ***/
body.dark-mode .fact,
body.dark-mode .newsletter {
  background-color: var(--bg-darker);
  color: var(--light);
}

/*** Kroki procesu ***/
body.dark-mode .step {
  background: var(--bg-darker);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body.dark-mode .step p {
  color: #bbb;
}

/*** Testimonial ***/
body.dark-mode .testimonial-carousel .owl-nav .owl-prev,
body.dark-mode .testimonial-carousel .owl-nav .owl-next {
  color: var(--light);
  background: var(--bg-darker);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
body.dark-mode .testimonial-carousel .owl-nav .owl-prev:hover,
body.dark-mode .testimonial-carousel .owl-nav .owl-next:hover {
  background: var(--primary);
  color: var(--dark);
}

/*** Footer ***/
body.dark-mode .footer::before {
  opacity: 1;
}
body.dark-mode .footer-divider path {
  fill: rgba(255, 255, 255, 0.04);
}
body.dark-mode .footer-cta {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
body.dark-mode .footer-contact-item__label {
  color: rgba(219, 232, 215, 0.62);
}
body.dark-mode .footer-link {
  color: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
body.dark-mode .footer .btn.btn-social {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--light);
}
body.dark-mode .footer .btn.btn-link {
  color: var(--light);
}
body.dark-mode .footer .btn.btn-link:hover {
  color: var(--secondary);
}
body.dark-mode .footer .copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .home-section__lead {
  color: rgba(234, 230, 242, 0.75);
}

body.dark-mode .home-section__title {
  color: var(--light);
}

body.dark-mode .access-card--customer {
  color: #ffffff;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
}

body.dark-mode .access-card--user {
  color: var(--light);
  background: rgba(16, 9, 20, 0.94);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42);
}

body.dark-mode .access-card--user .access-card__icon {
  background: rgba(14, 75, 196, 0.18);
  color: var(--light);
}

body.dark-mode .navbar-login-trigger {
  color: rgba(234, 230, 242, 0.86);
}

body.dark-mode .login-choice-modal__lead {
  color: rgba(234, 230, 242, 0.72);
}

body.dark-mode .auth-shell {
  background: rgba(16, 9, 20, 0.92);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
}

body.dark-mode .auth-shell__tabs {
  background: rgba(9, 5, 14, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .auth-shell__tab {
  color: rgba(234, 230, 242, 0.78);
}

body.dark-mode .auth-shell__tab:hover,
body.dark-mode .auth-shell__tab:focus-visible {
  color: #ffffff;
  background: rgba(59, 130, 246, 0.16);
}

body.dark-mode .auth-shell__tab.is-active,
body.dark-mode .auth-shell__tab[aria-current="page"] {
  color: #bfdbfe;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.22),
    rgba(20, 184, 166, 0.18)
  );
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.2);
}

body.dark-mode .auth-shell__panel {
  background: rgba(9, 5, 14, 0.96);
  color: var(--light);
}

body.dark-mode .consent-content__details {
  background: rgba(9, 5, 14, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .consent-content__summary {
  color: #bfdbfe;
  background: rgba(14, 75, 196, 0.14);
}

body.dark-mode .consent-content__preview,
body.dark-mode .consent-content__full {
  color: rgba(234, 230, 242, 0.9);
}

body.dark-mode .consent-content__preview::after {
  background: linear-gradient(
    180deg,
    rgba(9, 5, 14, 0),
    rgba(9, 5, 14, 0.98) 90%
  );
}

body.dark-mode .consent-content__full {
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .auth-shell__footnote {
  border-top-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .auth-shell__switch {
  color: #f2a257;
}

body.dark-mode .auth-action-card {
  background: rgba(16, 9, 20, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--light);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
}

body.dark-mode .auth-action-card:hover,
body.dark-mode .auth-action-card:focus-visible {
  color: #ffffff;
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.42);
}

body.dark-mode .auth-action-card__text {
  color: rgba(234, 230, 242, 0.72);
}

body.dark-mode .auth-action-card--primary {
  border-color: rgba(59, 130, 246, 0.26);
}

body.dark-mode .auth-action-card--primary .auth-action-card__icon {
  background: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
}

body.dark-mode .auth-action-card--accent {
  border-color: rgba(248, 113, 113, 0.22);
}

body.dark-mode .auth-action-card--accent .auth-action-card__icon {
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
}

body.dark-mode .auth-action-card--neutral {
  border-color: rgba(148, 163, 184, 0.22);
}

body.dark-mode .auth-action-card--neutral .auth-action-card__icon {
  background: rgba(148, 163, 184, 0.15);
  color: #e2e8f0;
}

body.dark-mode .auth-action-card--danger {
  border-color: rgba(248, 113, 113, 0.22);
  background: rgba(24, 7, 12, 0.96);
}

body.dark-mode .auth-action-card--danger .auth-action-card__icon {
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
}

body.dark-mode .home-card {
  background: rgba(16, 9, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 10px 12px 24px rgba(0, 0, 0, 0.65),
    inset -10px -12px 22px rgba(255, 255, 255, 0.05);
}

body.dark-mode .home-card.home-about__card {
  background: #000000;
}

/* Home -> Services: inner-shadow cards should be dark-blue at 0.5 opacity (dark mode) */
body.dark-mode .home-services .home-card:not([data-shadow="outer"]) {
  background: #000000;
}

body.dark-mode .home-card__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.dark-mode .home-card__icon {
  background: rgba(14, 75, 196, 0.18);
  color: var(--light);
}

body.dark-mode .home-card__text,
body.dark-mode .home-card__subtitle,
body.dark-mode .home-list li {
  color: rgba(234, 230, 242, 0.85);
}

body.dark-mode .home-list li::before {
  background: rgba(14, 75, 196, 0.22);
  color: var(--light);
}

body.dark-mode .home-services__logo--light {
  display: none;
}

body.dark-mode .home-services__logo--dark {
  display: block;
}

/*** Home -> About ***/
body.dark-mode .home-about::before {
  background:
    radial-gradient(
      1200px 600px at 15% 0%,
      rgba(14, 75, 196, 0.22),
      transparent 60%
    ),
    radial-gradient(
      1000px 520px at 85% 25%,
      rgba(164, 0, 252, 0.18),
      transparent 55%
    );
}

body.dark-mode .home-about__photo {
  background: rgba(16, 9, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 22px 45px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.dark-mode .home-about__photo::after {
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.55));
  opacity: 1;
}

body.dark-mode .home-about__photo:hover,
body.dark-mode .home-about__photo:focus-within {
  border-color: rgba(118, 164, 255, 0.4);
  box-shadow:
    0 26px 55px rgba(0, 0, 0, 0.62),
    0 0 0 6px rgba(14, 75, 196, 0.12);
}

body.dark-mode .home-about__photo:focus-visible {
  outline: 3px solid rgba(118, 164, 255, 0.55);
}

/* Home -> Services: cards without inner shadow should be transparent (dark mode) */
body.dark-mode .home-services .home-card[data-shadow="outer"] {
  background: transparent;
  box-shadow: none;
  border: none;
}

body.dark-mode .home-services .home-card[data-shadow="outer"]:hover,
body.dark-mode .home-services .home-card[data-shadow="outer"]:focus-within {
  box-shadow: none;
}

/*** Bitrix24 embedded form (b24) ***/
body.dark-mode .b24-form-wrapper {
  background: rgba(16, 9, 20, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--light) !important;
}

body.dark-mode .b24-form-wrapper .b24-form-header {
  background: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .b24-form-wrapper .b24-form-header-title,
body.dark-mode .b24-form-wrapper .b24-form-progress-bar-title,
body.dark-mode .b24-form-wrapper label,
body.dark-mode .b24-form-wrapper p,
body.dark-mode .b24-form-wrapper span,
body.dark-mode .b24-form-wrapper div {
  color: inherit;
}

body.dark-mode .b24-form-wrapper .b24-form-content {
  background: transparent !important;
}

body.dark-mode .b24-form-wrapper .b24-form-control,
body.dark-mode .b24-form-wrapper input,
body.dark-mode .b24-form-wrapper textarea,
body.dark-mode .b24-form-wrapper select {
  color: var(--light) !important;
  background-color: var(--bg-darker) !important;
  border-color: rgba(234, 230, 242, 0.2) !important;
}

body.dark-mode .b24-form-wrapper .b24-form-control:focus,
body.dark-mode .b24-form-wrapper input:focus,
body.dark-mode .b24-form-wrapper textarea:focus,
body.dark-mode .b24-form-wrapper select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(14, 75, 196, 0.25) !important;
  outline: 0;
}

body.dark-mode .b24-form-wrapper .b24-form-btn {
  background: var(--secondary) !important;
  color: var(--dark) !important;
  border-color: transparent !important;
}

body.dark-mode .b24-form-wrapper .b24-form-btn:hover,
body.dark-mode .b24-form-wrapper .b24-form-btn:focus {
  filter: brightness(1.05);
}

body.dark-mode .b24-form-wrapper .b24-form-progress-track {
  stroke: rgba(234, 230, 242, 0.18) !important;
}
body.dark-mode .b24-form-wrapper .b24-form-progress-bar {
  stroke: var(--primary) !important;
}

body.dark-mode .b24-form-wrapper .b24-form-control-list-selector-item {
  background: rgba(0, 0, 0, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .b24-form-wrapper .b24-form-control-list-selector-item:hover,
body.dark-mode
  .b24-form-wrapper
  .b24-form-control-list-selector-item:focus-within {
  background: rgba(14, 75, 196, 0.18) !important;
}

body.dark-mode
  .b24-form-wrapper
  .b24-form-control-list-selector-item-title
  span,
body.dark-mode .b24-form-wrapper .b24-form-control-list-selector-item-price {
  color: var(--light) !important;
}

body.dark-mode .b24-form-wrapper .b24-window-popup,
body.dark-mode .b24-form-wrapper .b24-window-popup-wrapper,
body.dark-mode .b24-form-wrapper .b24-window-popup-body,
body.dark-mode .b24-form-wrapper .b24-window-popup-head {
  background: rgba(16, 9, 20, 0.96) !important;
  color: var(--light) !important;
}

body.dark-mode .b24-form-wrapper .b24-window-popup-title,
body.dark-mode .b24-form-wrapper .b24-form-sign-abuse-popup,
body.dark-mode .b24-form-wrapper .b24-form-sign-abuse-link {
  color: var(--light) !important;
}

body.dark-mode .b24-form-wrapper .b24-window-close {
  filter: invert(1) grayscale(1);
}

/* Bitrix24 embedded form (b24) -> dropdown (rendered outside .b24-form-wrapper) */
body.dark-mode .b24-form-dropdown-container {
  background: #000 !important;
  color: var(--light) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .b24-form-dropdown-container .b24-form-dropdown-header {
  background: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .b24-form-dropdown-container .b24-form-dropdown-title {
  color: inherit !important;
}

body.dark-mode .b24-form-dropdown-container .b24-window-close {
  filter: invert(1) grayscale(1);
}

body.dark-mode
  .b24-form-dropdown-container
  .b24-form-control-list-selector-item {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode
  .b24-form-dropdown-container
  .b24-form-control-list-selector-item:hover,
body.dark-mode
  .b24-form-dropdown-container
  .b24-form-control-list-selector-item:focus-within {
  background: rgba(14, 75, 196, 0.18) !important;
}

/* Cars addon: color palette (selected state visibility) */
body.dark-mode .cars-color-palette .btn {
  border-color: rgba(234, 230, 242, 0.28) !important;
}

body.dark-mode .cars-color-palette .btn-check:focus + .btn,
body.dark-mode .cars-color-palette .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(14, 75, 196, 0.25) !important;
}

body.dark-mode .cars-color-palette .btn-check:checked + .btn {
  border-color: rgba(118, 164, 255, 0.85) !important;
  box-shadow:
    0 0 0 0.22rem rgba(14, 75, 196, 0.45),
    inset 0 0 0 2px rgba(255, 255, 255, 0.65),
    inset 0 0 0 4px rgba(0, 0, 0, 0.55) !important;
}
