.theme-toggle {
  width: 38px;
  height: 38px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  background: #ffffff;
  color: #24425f;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.theme-toggle i {
  width: 18px;
  height: 18px;
}

.public-theme {
  min-height: 38px;
}

.language-switch {
  min-height: 38px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  padding: 3px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.language-switch button {
  min-width: 34px;
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #24425f;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.language-switch button.active {
  color: white;
  background: var(--blue);
}

.public-language {
  width: fit-content;
}

.dark-mode {
  --page: #07111f;
  --panel: #0d1b2d;
  --ink: #e8f1ff;
  --muted: #9fb0c5;
  --line: #21364e;
  --shadow: 0 18px 46px rgba(0, 0, 0, .34);
  color-scheme: dark;
}

.dark-mode body {
  color: var(--ink) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(20, 102, 223, .18), transparent 28%),
    var(--page) !important;
}

.dark-mode main,
.dark-mode .public-page {
  color: var(--ink);
}

.dark-mode .topbar h1,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode strong,
.dark-mode .route,
.dark-mode .meta-value,
.dark-mode .metric strong,
.dark-mode .stat strong,
.dark-mode .detail-row strong,
.dark-mode .doc,
.dark-mode .profile-head h2,
.dark-mode .profile-meta strong,
.dark-mode .mini-top strong,
.dark-mode .mini-kpis strong,
.dark-mode .mini-route strong,
.dark-mode .auth-card-head h2,
.dark-mode .public-brand strong,
.dark-mode .public-nav nav a {
  color: var(--ink) !important;
}

.dark-mode p,
.dark-mode span,
.dark-mode small,
.dark-mode time,
.dark-mode .title-row p,
.dark-mode .metric p,
.dark-mode .metric small,
.dark-mode .alert span,
.dark-mode .detail-row,
.dark-mode .profile-head span,
.dark-mode .profile-meta span,
.dark-mode .profile-stats span,
.dark-mode .mini-top span,
.dark-mode .mini-kpis span,
.dark-mode .auth-card-head span,
.dark-mode .hero-copy > span,
.dark-mode .trust-row div,
.dark-mode .feature-strip span,
.dark-mode .workflow span,
.dark-mode .support-card span,
.dark-mode .metrics-footer span,
.dark-mode .demo-users span,
.dark-mode .public-brand em {
  color: var(--muted) !important;
}

.dark-mode .card,
.dark-mode .side-card,
.dark-mode .shipment-card,
.dark-mode .stat-card,
.dark-mode .side-stat,
.dark-mode .permission-card,
.dark-mode .form-card,
.dark-mode .detail-panel,
.dark-mode .notes-card,
.dark-mode .operations,
.dark-mode .stat,
.dark-mode .profile-card,
.dark-mode .auth-card,
.dark-mode .login-dialog,
.dark-mode .mini-dashboard,
.dark-mode .mini-kpis div,
.dark-mode .mini-route,
.dark-mode .platform-modules div,
.dark-mode .platform-footer div,
.dark-mode .feature-strip article,
.dark-mode .workflow article,
.dark-mode .support-card,
.dark-mode .executive-heading,
.dark-mode .executive-card,
.dark-mode .services-panel,
.dark-mode .solution-panel,
.dark-mode .profile-hero,
.dark-mode .settings-hero,
.dark-mode .panel,
.dark-mode .mini-panel,
.dark-mode .metrics-footer div,
.dark-mode .demo-users,
.dark-mode .profile-meta div,
.dark-mode .profile-stats,
.dark-mode .services-list span,
.dark-mode .solution-list span,
.dark-mode .setting-language,
.dark-mode .toggle-list label,
.dark-mode .security-list div,
.dark-mode .secure-note,
.dark-mode .field input,
.dark-mode .field select,
.dark-mode .auth-form input,
.dark-mode .auth-form select,
.dark-mode .captcha-box,
.dark-mode .settings-form input {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow);
}

.dark-mode .theme-toggle,
.dark-mode .language-switch,
.dark-mode .ghost-link,
.dark-mode .outline-link,
.dark-mode .outline-button,
.dark-mode .field-top a,
.dark-mode .link-btn,
.dark-mode .profile-action,
.dark-mode .profile-contact a,
.dark-mode .close-login,
.dark-mode .account,
.dark-mode .dashboard-account,
.dark-mode .bell,
.dark-mode .icon-btn,
.dark-mode .profile-logout button {
  border-color: var(--line) !important;
  background: #10243a !important;
  color: var(--ink) !important;
}

.dark-mode .captcha-box button {
  border-color: var(--line) !important;
  background: #10243a !important;
  color: var(--ink) !important;
}

.dark-mode .captcha-box img {
  filter: saturate(.9) brightness(.92);
}

.dark-mode .language-switch button {
  color: var(--muted);
}

.dark-mode .language-switch button.active {
  color: white;
}

.dark-mode .public-nav,
.dark-mode .topbar {
  color: var(--ink);
}

.dark-mode .eyebrow,
.dark-mode .status,
.dark-mode .pill,
.dark-mode .mini-route b {
  background: rgba(35, 173, 107, .16) !important;
  color: #72e0a5 !important;
}

.dark-mode .metric i,
.dark-mode .ship-icon,
.dark-mode .profile-avatar,
.dark-mode .mini-user,
.dark-mode .avatar {
  box-shadow: none;
}

.dark-mode .map-card,
.dark-mode .mini-map {
  border-color: var(--line) !important;
  filter: saturate(.85) brightness(.78);
}

.dark-mode .map-progress,
.dark-mode .login-backdrop {
  background: rgba(6, 15, 28, .72) !important;
}

.dark-mode .supplier-card {
  background:
    linear-gradient(90deg, rgba(13, 27, 45, .96), rgba(13, 27, 45, .78)),
    url("https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1200&q=80") center / cover !important;
}

.dark-mode .ocean-section,
.dark-mode .dark-card {
  border: 1px solid var(--line);
}

.dark-mode .table,
.dark-mode table,
.dark-mode tr,
.dark-mode td,
.dark-mode th,
.dark-mode .clients-table td,
.dark-mode .clients-table th,
.dark-mode .tabs,
.dark-mode .filters,
.dark-mode .toolbar,
.dark-mode .shipment,
.dark-mode .doc,
.dark-mode .alert {
  border-color: var(--line) !important;
}

.dark-mode .search-box,
.dark-mode .row-actions a,
.dark-mode .detail-list div,
.dark-mode .user-toolbar select,
.dark-mode .user-form input,
.dark-mode .user-form select,
.dark-mode .search,
.dark-mode .select,
.dark-mode .date,
.dark-mode .native-select,
.dark-mode .status-stack a,
.dark-mode .shipment-form input,
.dark-mode .shipment-form select,
.dark-mode .quote-form input,
.dark-mode .quote-form select,
.dark-mode .quote-form textarea,
.dark-mode .form-section,
.dark-mode .service-options label,
.dark-mode .quick a,
.dark-mode .client-form input,
.dark-mode .client-form select,
.dark-mode .client-form textarea {
  border-color: var(--line) !important;
  background: #10243a !important;
  color: var(--ink) !important;
}

.dark-mode .client-form label,
.dark-mode .user-form label,
.dark-mode .shipment-form label,
.dark-mode .quote-form label,
.dark-mode .clients-table td strong,
.dark-mode .users-table td strong,
.dark-mode .detail-list strong,
.dark-mode .stat-card strong,
.dark-mode .permission-card strong,
.dark-mode .side-stat strong,
.dark-mode .shipment-hero h2,
.dark-mode .quote-hero h2,
.dark-mode .detail-panel dd {
  color: var(--ink) !important;
}

.dark-mode .danger-button {
  border-color: rgba(248, 113, 113, .45) !important;
  background: rgba(185, 28, 28, .16) !important;
  color: #fca5a5 !important;
}

.dark-mode .section-title,
.dark-mode .detail-panel .service-tags + .requirements-text {
  border-color: var(--line) !important;
}

.dark-mode .service-tags span {
  border-color: var(--line) !important;
  background: #10243a !important;
  color: var(--muted) !important;
}

.dark-mode .service-tags span.enabled {
  border-color: rgba(35, 173, 107, .45) !important;
  background: rgba(35, 173, 107, .16) !important;
  color: #72e0a5 !important;
}

.dark-mode input::placeholder {
  color: #788ba3;
}

.dark-mode .legal-check,
.dark-mode .legal-document,
.dark-mode .verify-note,
.dark-mode .logout-inline button {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow);
}

.dark-mode .legal-document p {
  color: var(--muted) !important;
}