/* Mobile palette base. Component rules live here; palette files set --mobile-* tokens. */

:root {
  --mobile-primary: #2f6f73;
  --mobile-primary-strong: #174f52;
  --mobile-bg: #f5f6f7;
  --mobile-surface: #ffffff;
  --mobile-surface-strong: #f0f3f5;
  --mobile-text: #1f2933;
  --mobile-text-muted: #667085;
  --mobile-border: #d0d5dd;
  --mobile-shadow-soft: rgba(15, 23, 42, 0.08);
  --mobile-focus-ring: rgba(47, 111, 115, 0.18);
  --mobile-on-strong: #ffffff;
  --mobile-status-new-bg: #64748b;
  --mobile-status-new-text: #ffffff;
  --mobile-status-waiting-bg: #b7791f;
  --mobile-status-waiting-text: #ffffff;
  --mobile-status-active-bg: #2563eb;
  --mobile-status-active-text: #ffffff;
  --mobile-status-ready-bg: #0891b2;
  --mobile-status-ready-text: #ffffff;
  --mobile-status-success-bg: #2e7d32;
  --mobile-status-success-text: #ffffff;
  --mobile-status-error-bg: #d64545;
  --mobile-status-error-text: #ffffff;
  --mobile-status-muted-bg: #667085;
  --mobile-status-muted-text: #ffffff;
  --mobile-status-info-bg: #4f8cc9;
  --mobile-status-info-text: #ffffff;
  --mobile-status-warning-bg: #d99a2b;
  --mobile-status-warning-text: #ffffff;
  --mobile-step-upcoming-bg: transparent;
  --mobile-step-upcoming-text: var(--mobile-text-muted);
  --mobile-step-upcoming-border: var(--mobile-border);
  --mobile-step-locked-bg: var(--mobile-surface-strong);
  --mobile-step-locked-text: var(--mobile-text-muted);
  --mobile-step-locked-border: var(--mobile-border);
  --bs-primary: var(--mobile-primary);
  --bs-success: var(--mobile-status-success-bg);
  --bs-warning: var(--mobile-status-warning-bg);
  --bs-danger: var(--mobile-status-error-bg);
  --bs-info: var(--mobile-status-info-bg);
}

.palette-mobile,
body.palette-mobile {
  background-color: var(--mobile-bg);
  color: var(--mobile-text);
}

body.palette-mobile #page,
body.palette-mobile .page-content {
  background-color: var(--mobile-bg) !important;
  color: var(--mobile-text);
}

.palette-mobile .bg-theme,
.theme-dark.palette-mobile .bg-theme {
  background-color: var(--mobile-bg) !important;
}

.palette-mobile #mobile-header {
  background-color: var(--mobile-surface) !important;
  border-bottom: 1px solid var(--mobile-border);
  box-shadow: 0 2px 8px var(--mobile-shadow-soft);
}

.palette-mobile #mobile-header .header-title {
  color: var(--mobile-text) !important;
}

.palette-mobile #mobile-header .header-title-secondary,
.palette-mobile #mobile-header .text-muted,
.palette-mobile .text-muted {
  color: var(--mobile-text-muted) !important;
}

.palette-mobile .list-group-item,
.palette-mobile .card,
.palette-mobile .modal-content,
.palette-mobile .accordion-item {
  background-color: var(--mobile-surface);
  border-color: var(--mobile-border);
  color: var(--mobile-text);
}

.palette-mobile .accordion-button {
  background-color: var(--mobile-surface);
  color: var(--mobile-text);
  box-shadow: none;
}

.palette-mobile .accordion-button:not(.collapsed) {
  background-color: var(--mobile-surface);
  color: var(--mobile-primary);
}

.theme-dark.palette-mobile .accordion-button::after {
  filter: invert(1) grayscale(1);
}

.palette-mobile .form-control,
.palette-mobile .form-select,
.palette-mobile .input-group-text {
  background-color: var(--mobile-surface);
  border-color: var(--mobile-border);
  color: var(--mobile-text);
}

.palette-mobile .form-control:focus,
.palette-mobile .form-select:focus {
  border-color: var(--mobile-primary);
  box-shadow: 0 0 0 0.15rem var(--mobile-focus-ring);
  color: var(--mobile-text);
}

.palette-mobile .mobile-search-input-group {
  background-color: var(--mobile-surface) !important;
  border-color: var(--mobile-border) !important;
  box-shadow: none;
}

.palette-mobile .mobile-search-input-group .input-group-text,
.palette-mobile .mobile-search-input-group .form-control {
  background-color: var(--mobile-surface) !important;
  border-color: transparent !important;
  color: var(--mobile-text);
}

.palette-mobile .mobile-search-input-group .form-control {
  font-size: 16px;
  line-height: 1.25;
}

.palette-mobile .mobile-search-input-group .btn,
.palette-mobile .mobile-search-input-group #decode_input_button {
  background-color: var(--mobile-primary) !important;
  background-image: none !important;
  border-color: var(--mobile-primary) !important;
  color: var(--mobile-on-strong) !important;
}

.palette-mobile .bg-highlight,
.palette-mobile .dashboard-menu-tile.bg-highlight,
.palette-mobile #video-wrapper.bg-highlight {
  background-color: var(--mobile-primary) !important;
  background-image: none !important;
  color: var(--mobile-on-strong) !important;
}

.palette-mobile .dashboard-menu-tile.bg-highlight {
  box-shadow: 0 0.2rem 0.5rem var(--mobile-shadow-soft);
}

.palette-mobile .tab-controls a.tab-control-active {
  background-color: var(--mobile-primary) !important;
  border-color: var(--mobile-primary) !important;
  color: var(--mobile-on-strong) !important;
}

.palette-mobile .dashboard-menu-section-title {
  color: var(--mobile-text-muted) !important;
}

.palette-mobile #footer-bar {
  background-color: var(--mobile-surface) !important;
  border-top: 1px solid var(--mobile-border);
}

.theme-dark.palette-mobile #footer-bar a span,
.theme-dark.palette-mobile #footer-bar a i {
  color: var(--mobile-text-muted) !important;
}

.palette-mobile #footer-bar .active-nav i,
.palette-mobile #footer-bar .active-nav span {
  color: var(--mobile-primary) !important;
}

.palette-mobile .btn,
.palette-mobile .btn:hover,
.palette-mobile .btn:focus,
.palette-mobile .btn:active {
  background-image: none !important;
}

.palette-mobile .btn-primary {
  --bs-btn-bg: var(--mobile-primary);
  --bs-btn-border-color: var(--mobile-primary);
  --bs-btn-hover-bg: var(--mobile-primary-strong);
  --bs-btn-hover-border-color: var(--mobile-primary-strong);
  background-color: var(--mobile-primary);
  border-color: var(--mobile-primary);
  color: var(--mobile-on-strong);
}

.palette-mobile .btn-primary:hover,
.palette-mobile .btn-primary:focus,
.palette-mobile .btn-primary:active {
  background-color: var(--mobile-primary-strong);
  border-color: var(--mobile-primary-strong);
  color: var(--mobile-on-strong);
}

.palette-mobile .btn-outline-primary {
  --bs-btn-color: var(--mobile-primary);
  --bs-btn-border-color: var(--mobile-primary);
  --bs-btn-hover-bg: var(--mobile-primary);
  --bs-btn-hover-border-color: var(--mobile-primary);
  border-color: var(--mobile-primary);
  color: var(--mobile-primary);
}

.palette-mobile .btn-outline-primary:hover,
.palette-mobile .btn-outline-primary:focus,
.palette-mobile .btn-check:checked + .btn-outline-primary,
.palette-mobile .btn-check:active + .btn-outline-primary {
  background-color: var(--mobile-primary) !important;
  border-color: var(--mobile-primary) !important;
  color: var(--mobile-on-strong) !important;
}

.palette-mobile .btn-success {
  background-color: var(--mobile-status-success-bg);
  border-color: var(--mobile-status-success-bg);
  color: var(--mobile-status-success-text);
}

.palette-mobile .btn-danger {
  background-color: var(--mobile-status-error-bg);
  border-color: var(--mobile-status-error-bg);
  color: var(--mobile-status-error-text);
}

.palette-mobile .btn-warning {
  background-color: var(--mobile-status-warning-bg);
  border-color: var(--mobile-status-warning-bg);
  color: var(--mobile-status-warning-text);
}

.palette-mobile .bg-primary {
  background-color: var(--mobile-primary) !important;
}

.palette-mobile .bg-info {
  background-color: var(--mobile-status-info-bg) !important;
}

.palette-mobile .text-info {
  color: var(--mobile-status-info-bg) !important;
}

.palette-mobile .badge {
  border-radius: 0.45rem;
  font-weight: 700;
  letter-spacing: 0;
}

.palette-mobile .badge-status-new {
  background-color: var(--mobile-status-new-bg) !important;
  color: var(--mobile-status-new-text) !important;
}

.palette-mobile .badge-status-waiting {
  background-color: var(--mobile-status-waiting-bg) !important;
  color: var(--mobile-status-waiting-text) !important;
}

.palette-mobile .badge-status-active {
  background-color: var(--mobile-status-active-bg) !important;
  color: var(--mobile-status-active-text) !important;
}

.palette-mobile .badge-status-ready {
  background-color: var(--mobile-status-ready-bg) !important;
  color: var(--mobile-status-ready-text) !important;
}

.palette-mobile .badge-status-success {
  background-color: var(--mobile-status-success-bg) !important;
  color: var(--mobile-status-success-text) !important;
}

.palette-mobile .badge-status-error {
  background-color: var(--mobile-status-error-bg) !important;
  color: var(--mobile-status-error-text) !important;
}

.palette-mobile .badge-status-muted {
  background-color: var(--mobile-status-muted-bg) !important;
  color: var(--mobile-status-muted-text) !important;
}

.palette-mobile .badge-status-info {
  background-color: var(--mobile-status-info-bg) !important;
  color: var(--mobile-status-info-text) !important;
}

.palette-mobile .badge-status-warning {
  background-color: var(--mobile-status-warning-bg) !important;
  color: var(--mobile-status-warning-text) !important;
}

.palette-mobile .wms-stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 1.75rem;
}

.palette-mobile .wms-step {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.55rem;
  max-width: 100%;
  padding: 0.25rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: normal;
}

.palette-mobile .wms-step__icon {
  flex: 0 0 auto;
  font-size: 0.65rem;
  line-height: 1;
}

.palette-mobile .wms-step__label {
  overflow-wrap: anywhere;
}

.palette-mobile .wms-step--done {
  background-color: var(--mobile-status-success-bg);
  border-color: var(--mobile-status-success-bg);
  color: var(--mobile-status-success-text);
}

.palette-mobile .wms-step--active {
  background-color: var(--mobile-status-active-bg);
  border-color: var(--mobile-primary-strong);
  color: var(--mobile-status-active-text);
  box-shadow: 0 0 0 2px var(--mobile-focus-ring);
}

.palette-mobile .wms-step--upcoming {
  background-color: var(--mobile-step-upcoming-bg);
  border-color: var(--mobile-step-upcoming-border);
  color: var(--mobile-step-upcoming-text);
}

.palette-mobile .wms-step--locked {
  background-color: var(--mobile-step-locked-bg);
  border-color: var(--mobile-step-locked-border);
  color: var(--mobile-step-locked-text);
}

.palette-mobile #video-wrapper.scanner-active {
  border: 2px solid var(--mobile-status-ready-bg) !important;
  box-shadow: 0 0 0 3px var(--mobile-focus-ring);
}

.palette-mobile .scan-flash-success {
  background-color: var(--mobile-status-success-bg) !important;
  color: var(--mobile-status-success-text) !important;
  transition: background-color 0.15s ease;
}

.palette-mobile .scan-flash-error {
  background-color: var(--mobile-status-error-bg) !important;
  color: var(--mobile-status-error-text) !important;
  transition: background-color 0.15s ease;
}

.palette-mobile #preloader {
  background-color: var(--mobile-bg);
}

.palette-mobile .alert-status-muted {
  background-color: var(--mobile-status-muted-bg) !important;
  color: var(--mobile-status-muted-text) !important;
  border-color: var(--mobile-border) !important;
}

.palette-mobile .alert-status-info {
  background-color: var(--mobile-status-info-bg) !important;
  color: var(--mobile-status-info-text) !important;
  border-color: var(--mobile-border) !important;
}

/* Banner statusu — własny komponent (bez klas sticky offline-message) */
.palette-mobile {
  --mobile-status-banner-height: 0px;
}

.palette-mobile .mobile-status-banner,
.palette-mobile #mobile-status-banner,
.palette-mobile #mobile-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  margin: 0;
  padding: calc(0.65rem + env(safe-area-inset-top, 0px)) 0.75rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 2px 8px var(--mobile-shadow-soft, rgba(15, 23, 42, 0.12));
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.palette-mobile .mobile-status-banner.is-visible,
.palette-mobile #mobile-status-banner.is-visible,
.palette-mobile #mobile-offline-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.palette-mobile .mobile-status-banner.mobile-status-offline,
.palette-mobile #mobile-status-banner.mobile-status-offline,
.palette-mobile #mobile-offline-banner.mobile-status-offline {
  background-color: var(--mobile-status-error-bg);
  color: var(--mobile-status-error-text);
}

.palette-mobile .mobile-status-banner.mobile-status-success,
.palette-mobile #mobile-status-banner.mobile-status-success,
.palette-mobile #mobile-offline-banner.mobile-status-success {
  background-color: var(--mobile-status-success-bg);
  color: var(--mobile-status-success-text);
}

.palette-mobile .mobile-status-banner.mobile-status-error,
.palette-mobile #mobile-status-banner.mobile-status-error,
.palette-mobile #mobile-offline-banner.mobile-status-error {
  background-color: var(--mobile-status-error-bg);
  color: var(--mobile-status-error-text);
}

.palette-mobile .mobile-status-banner.mobile-status-warning,
.palette-mobile #mobile-status-banner.mobile-status-warning,
.palette-mobile #mobile-offline-banner.mobile-status-warning {
  background-color: var(--mobile-status-warning-bg);
  color: var(--mobile-status-warning-text);
}

.palette-mobile .mobile-status-banner.mobile-status-info,
.palette-mobile #mobile-status-banner.mobile-status-info,
.palette-mobile #mobile-offline-banner.mobile-status-info {
  background-color: var(--mobile-status-info-bg);
  color: var(--mobile-status-info-text);
}

.palette-mobile.mobile-status-banner-active #mobile-header.header-fixed {
  top: var(--mobile-status-banner-height, 0px);
  transition: top 0.25s ease;
}

.palette-mobile.mobile-status-banner-active #video-wrapper,
.palette-mobile.mobile-status-banner-active #video-updated,
.palette-mobile.mobile-status-banner-active #video-camera-off {
  top: calc(12px + var(--mobile-status-banner-height, 0px));
}

.palette-mobile.mobile-status-banner-active #context-wms-place-user {
  top: calc(35px + var(--mobile-status-banner-height, 0px));
}

.palette-mobile.mobile-status-banner-active .page-content.header-clear-medium {
  padding-top: calc(
    75px + var(--search-height, 0px) + var(--nav-height, 0px)
    + var(--mobile-status-banner-height, 0px)
    + (env(safe-area-inset-top, 0px) * 0.8)
  ) !important;
}