.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;
  --panel-soft: #10243a;
  --panel-muted: #122941;
  --ink: #edf5ff;
  --muted: #a8b7ca;
  --line: #243a54;
  --blue: #4c94ff;
  --cyan: #3ed6e8;
  --green: #52d58d;
  --amber: #f7bd58;
  --red: #ff6b7d;
  --violet: #a78bfa;
  --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,
.dark-mode .enterprise-hero,
.dark-mode .enterprise-stat,
.dark-mode .enterprise-panel,
.dark-mode .pipeline-card,
.dark-mode .quick-card,
.dark-mode .readiness-strip,
.dark-mode .module-section,
.dark-mode .quick-list div,
.dark-mode .readiness-strip div {
  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;
}

.dark-mode .tag-list span {
  border-color: rgba(20, 102, 223, .35) !important;
  background: rgba(20, 102, 223, .16) !important;
  color: #8bbcff !important;
}

.dark-mode .enterprise-eyebrow {
  background: rgba(20, 102, 223, .18) !important;
  color: #8bbcff !important;
}

.dark-mode .pipeline-list strong {
  background: rgba(35, 173, 107, .16) !important;
  color: #72e0a5 !important;
}

/* Final dark-mode polish: this layer catches module-specific hardcoded whites. */
.dark-mode body,
.dark-mode main,
.dark-mode .app {
  background:
    radial-gradient(circle at 20% 0%, rgba(76, 148, 255, .16), transparent 28%),
    linear-gradient(180deg, #07111f 0%, #091827 100%) !important;
  color: var(--ink) !important;
}

.dark-mode .topbar {
  border-color: var(--line) !important;
  background: transparent !important;
}

.dark-mode .card,
.dark-mode .table-card,
.dark-mode .filters,
.dark-mode .toolbar,
.dark-mode .side-card,
.dark-mode .panel,
.dark-mode .mini-panel,
.dark-mode .form-section,
.dark-mode .form-card,
.dark-mode .detail-panel,
.dark-mode .notes-card,
.dark-mode .shipment-card,
.dark-mode .operations,
.dark-mode .stat,
.dark-mode .stat-card,
.dark-mode .metric-card,
.dark-mode .supplier-toolbar,
.dark-mode .client-toolbar,
.dark-mode .user-toolbar,
.dark-mode .catalog-shell,
.dark-mode .catalog-card,
.dark-mode .profile-card,
.dark-mode .settings-card,
.dark-mode .auth-card,
.dark-mode .login-box,
.dark-mode .login-dialog {
  border-color: var(--line) !important;
  background: linear-gradient(180deg, rgba(13, 27, 45, .98), rgba(12, 25, 42, .98)) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
}

.dark-mode .module-section,
.dark-mode .profile-meta div,
.dark-mode .profile-stats,
.dark-mode .profile-stats div,
.dark-mode .quick-list div,
.dark-mode .readiness-strip div,
.dark-mode .tracking-summary,
.dark-mode .tracking-event-form-card,
.dark-mode .tracking-timeline-card,
.dark-mode .tracking-hero,
.dark-mode .tracking-metrics,
.dark-mode .tracking-metrics article,
.dark-mode .tracking-timeline-panel,
.dark-mode .tracking-map-panel,
.dark-mode .tracking-empty,
.dark-mode .tracking-mini-empty,
.dark-mode .tracking-shipment-list a,
.dark-mode .tracking-hero-meta span,
.dark-mode .tracking-steps-clean div,
.dark-mode .tracking-check,
.dark-mode .detail-list div,
.dark-mode .service-options label,
.dark-mode .permission-card,
.dark-mode .side-stat,
.dark-mode .row-actions a,
.dark-mode .quick a,
.dark-mode .doc,
.dark-mode .alert,
.dark-mode .status-stack a,
.dark-mode .legal-check,
.dark-mode .verify-note,
.dark-mode .demo-users {
  border-color: var(--line) !important;
  background: var(--panel-soft) !important;
  color: var(--ink) !important;
}

.dark-mode table,
.dark-mode thead,
.dark-mode tbody,
.dark-mode tr,
.dark-mode th,
.dark-mode td,
.dark-mode .table-wrap {
  border-color: var(--line) !important;
  background: transparent !important;
  color: var(--ink) !important;
}

.dark-mode th {
  color: #c9d8eb !important;
  background: rgba(16, 36, 58, .92) !important;
}

.dark-mode tbody tr:hover,
.dark-mode .clients-table tr:hover,
.dark-mode .users-table tr:hover,
.dark-mode .suppliers-table tr:hover {
  background: rgba(76, 148, 255, .07) !important;
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea,
.dark-mode .search-box,
.dark-mode .field input,
.dark-mode .field select,
.dark-mode .auth-form input,
.dark-mode .auth-form select,
.dark-mode .user-form input,
.dark-mode .user-form select,
.dark-mode .client-form input,
.dark-mode .client-form select,
.dark-mode .client-form textarea,
.dark-mode .shipment-form input,
.dark-mode .shipment-form select,
.dark-mode .tracking-event-form input,
.dark-mode .tracking-event-form select,
.dark-mode .tracking-event-form textarea,
.dark-mode .quote-form input,
.dark-mode .quote-form select,
.dark-mode .quote-form textarea,
.dark-mode .settings-form input,
.dark-mode .tenant-switcher {
  border-color: var(--line) !important;
  background: #0a1a2c !important;
  color: var(--ink) !important;
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(76, 148, 255, .18) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: #788ba3 !important;
}

.dark-mode label,
.dark-mode dt,
.dark-mode .meta-label,
.dark-mode .eyebrow,
.dark-mode .section-head h2,
.dark-mode .side-title h2,
.dark-mode .panel-head span,
.dark-mode .profile-meta span,
.dark-mode .profile-stats span,
.dark-mode .quick-list span,
.dark-mode .readiness-strip span,
.dark-mode .alert span,
.dark-mode .doc span,
.dark-mode .detail-row,
.dark-mode .ports span {
  color: var(--muted) !important;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode strong,
.dark-mode b,
.dark-mode dd,
.dark-mode .route,
.dark-mode .meta-value,
.dark-mode .panel-head strong,
.dark-mode .quick-list strong,
.dark-mode .readiness-strip strong,
.dark-mode .ports strong {
  color: var(--ink) !important;
}

.dark-mode a:not(.primary-action):not(.primary-btn):not(.nav a),
.dark-mode .side-title a {
  color: #8bbcff !important;
}

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

.dark-mode .primary-action,
.dark-mode .primary-btn,
.dark-mode .login-submit,
.dark-mode .login-button {
  background: linear-gradient(135deg, #1f6fe5, #0f4aa0) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(31, 111, 229, .22) !important;
}

.dark-mode .status,
.dark-mode .status-pill,
.dark-mode .type-pill,
.dark-mode .pill {
  border: 1px solid rgba(82, 213, 141, .24) !important;
  background: rgba(82, 213, 141, .14) !important;
  color: #8df0b7 !important;
}

.dark-mode .status-pending,
.dark-mode .status-draft,
.dark-mode .status-warning,
.dark-mode .priority-medium {
  border-color: rgba(247, 189, 88, .28) !important;
  background: rgba(247, 189, 88, .14) !important;
  color: #ffd58b !important;
}

.dark-mode .status-cancelled,
.dark-mode .status-rejected,
.dark-mode .status-blocked,
.dark-mode .priority-high,
.dark-mode .danger-button {
  border-color: rgba(255, 107, 125, .32) !important;
  background: rgba(255, 107, 125, .13) !important;
  color: #ff9aa8 !important;
}

.dark-mode .ship-icon,
.dark-mode .metric i,
.dark-mode .stat i,
.dark-mode .stat-icon,
.dark-mode .alert i,
.dark-mode .step-mark,
.dark-mode .profile-avatar,
.dark-mode .hero-module-icon {
  box-shadow: none !important;
}

.dark-mode .ship-icon,
.dark-mode .metric i,
.dark-mode .stat i,
.dark-mode .stat-icon {
  background: rgba(76, 148, 255, .14) !important;
  color: #8bbcff !important;
}

.dark-mode .map-card {
  border-color: var(--line) !important;
  background-color: #0a1a2c !important;
  filter: saturate(.82) brightness(.78) contrast(1.04);
}

.dark-mode .map-card::after {
  background: rgba(7, 17, 31, .35) !important;
}

.dark-mode .map-progress {
  border: 1px solid var(--line) !important;
  background: rgba(13, 27, 45, .9) !important;
  color: var(--ink) !important;
}

.dark-mode .tracking-progress {
  background: #182d45 !important;
}

.dark-mode .tracking-step-strip b {
  border-color: var(--line) !important;
  background: var(--panel-soft) !important;
  color: var(--muted) !important;
}

.dark-mode .tracking-step-strip .done b {
  border-color: var(--green) !important;
  background: var(--green) !important;
  color: #062112 !important;
}

.dark-mode .tracking-timeline-item:not(:last-child)::before {
  background: var(--line) !important;
}

.dark-mode .tracking-timeline-item p {
  color: #d7e5f8 !important;
}

.dark-mode .timeline-feed-item p {
  color: #d7e5f8 !important;
}

.dark-mode .empty-tracking-state {
  border-color: var(--line) !important;
  background: rgba(16, 36, 58, .72) !important;
  color: var(--muted) !important;
}

.dark-mode .tracking-hero-icon,
.dark-mode .tracking-metrics i {
  background: rgba(76, 148, 255, .14) !important;
  color: #8bbcff !important;
}

.dark-mode .tracking-hero-status,
.dark-mode .tracking-steps-clean .done,
.dark-mode .tracking-shipment-list a.active {
  border-color: rgba(82, 213, 141, .24) !important;
  background: rgba(82, 213, 141, .14) !important;
  color: #8df0b7 !important;
}

.dark-mode .tracking-hero-status span,
.dark-mode .tracking-hero-status strong,
.dark-mode .tracking-steps-clean .done {
  color: #8df0b7 !important;
}

.dark-mode .tracking-steps-clean b {
  background: #182d45 !important;
  color: var(--muted) !important;
}

.dark-mode .timeline-feed-item:not(:last-child)::before {
  background: var(--line) !important;
}

.dark-mode .route-progress-bar {
  background: #182d45 !important;
}

.dark-mode .timeline,
.dark-mode .metrics,
.dark-mode .metric,
.dark-mode .section-head,
.dark-mode .panel-head,
.dark-mode .tabs,
.dark-mode .table-footer,
.dark-mode .pagination-row,
.dark-mode .profile-stats div {
  border-color: var(--line) !important;
}

.dark-mode .nav a.active {
  background: linear-gradient(90deg, #1d6fe7, #1553b3) !important;
  color: #ffffff !important;
}