:root {
  --background: 320 40% 98%;
  --foreground: 320 18% 12%;
  --card: 0 0% 100%;
  --card-foreground: 320 18% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 320 18% 12%;
  --primary: 322 84% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 288 72% 36%;
  --secondary-foreground: 0 0% 100%;
  --muted: 320 28% 95%;
  --muted-foreground: 320 10% 42%;
  --accent: 288 72% 36%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 20% 98%;
  --border: 320 22% 88%;
  --input: 320 22% 88%;
  --ring: 322 84% 40%;
  --radius: 0.75rem;
  --font-sans: "Inter", sans-serif;
}

body,
.main-content-wrap,
.auth-layout-wrap {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
}

.auth-layout-wrap {
  background-image: none !important;
}

.main-header,
.card,
.sidebar-left-secondary,
.modal-content,
.dropdown-menu {
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.card,
.modal-content,
.auth-layout-wrap .card {
  border-radius: var(--radius);
}

.main-header {
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.sidebar-left,
.customizer .handle,
.customizer .handle:hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.card-icon-bg-primary [class^="i-"] {
  color: hsl(var(--primary) / 0.28) !important;
}

.sidebar-left .navigation-left .nav-item,
.sidebar-left .navigation-left .nav-item .nav-item-hold,
.sidebar-left .navigation-left .nav-item i,
.sidebar-left .navigation-left .nav-item span {
  color: hsl(var(--primary-foreground)) !important;
  border-bottom-color: transparent !important;
}

.sidebar-left .navigation-left .nav-item.active,
.sidebar-left .navigation-left .nav-item:hover {
  background: hsl(var(--accent)) !important;
}

.sidebar-left .navigation-left .nav-item.active .nav-item-hold,
.sidebar-left .navigation-left .nav-item.active i,
.sidebar-left .navigation-left .nav-item.active span,
.sidebar-left .navigation-left .nav-item:hover .nav-item-hold,
.sidebar-left .navigation-left .nav-item:hover i,
.sidebar-left .navigation-left .nav-item:hover span {
  color: hsl(var(--accent-foreground)) !important;
}

.btn-primary,
.bg-primary,
.badge-primary,
.page-item.active .page-link,
.custom-control-input:checked ~ .custom-control-label::before,
.spinner-primary {
  background-color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-outline-primary:hover {
  background-color: hsl(var(--accent)) !important;
  border-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

.btn-outline-primary {
  color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  background: transparent !important;
}

.text-primary,
.nav-tabs .nav-link.active {
  color: hsl(var(--primary)) !important;
}

.sidebar-left-secondary a,
.sidebar-left-secondary .nav-item,
.main-header,
.main-header a,
.card,
.card a:not(.btn) {
  color: hsl(var(--foreground));
}

.dark-theme,
.dark-theme .main-content-wrap,
.dark-theme .sidebar-left-secondary,
.dark-theme .main-header,
.dark-theme .card,
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6,
.dark-theme .card-title,
.dark-theme .text-title,
.dark-theme .text-muted,
.dark-theme label,
.dark-theme p {
  color: hsl(var(--foreground)) !important;
}

.dark-theme input,
.dark-theme textarea,
.dark-theme select,
.dark-theme .form-control,
.dark-theme .vs__dropdown-toggle {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.pos-theme-panel {
  margin-bottom: 1rem;
}

.pos-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pos-swatch {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.pos-swatch.active {
  border-color: hsl(var(--foreground));
  box-shadow: 0 0 0 2px hsl(var(--primary));
}

.pos-mode-buttons .btn {
  margin-right: 6px;
  margin-bottom: 6px;
}

/* ===== Dark surfaces: template components that hardcode light colors ===== */
/* .dark-theme is set by appearance.js for "Oscuro" and for company styles whose background is dark. */
.dark-theme {
  color-scheme: dark;
}

.dark-theme .bg-white,
.dark-theme .b-sidebar.bg-white {
  background-color: hsl(var(--card)) !important;
}

.dark-theme hr,
.dark-theme .border-bottom,
.dark-theme .border-top,
.dark-theme .separator-breadcrumb {
  border-color: hsl(var(--border)) !important;
}

/* page title + breadcrumb */
.dark-theme .breadcrumb ul li,
.dark-theme .breadcrumb ul li a {
  color: hsl(var(--muted-foreground)) !important;
}

.dark-theme .breadcrumb ul li:not(:last-child)::after {
  background: hsl(var(--border)) !important;
}

/* settings panel (gear on the side) */
.dark-theme .customizer .customizer-body,
.dark-theme .customizer .card,
.dark-theme .customizer .card-body {
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .customizer .card-header {
  background: hsl(var(--muted)) !important;
  border-color: hsl(var(--border)) !important;
}

.dark-theme .customizer p,
.dark-theme .customizer span,
.dark-theme .customizer label {
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .customizer .text-muted {
  color: hsl(var(--muted-foreground)) !important;
}

/* secondary sidebar (submenus) */
.dark-theme .sidebar-left-secondary .childNav li a,
.dark-theme .sidebar-left-secondary .childNav li a .item-name,
.dark-theme .sidebar-left-secondary .childNav li a .nav-icon {
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .sidebar-left-secondary .childNav li a:hover,
.dark-theme .sidebar-left-secondary .childNav li a.open,
.dark-theme .sidebar-left-secondary .childNav li a.router-link-active,
.dark-theme .sidebar-left-secondary .childNav li a:hover .item-name,
.dark-theme .sidebar-left-secondary .childNav li a:hover .nav-icon,
.dark-theme .sidebar-left-secondary .childNav li a.router-link-active .item-name,
.dark-theme .sidebar-left-secondary .childNav li a.router-link-active .nav-icon {
  color: hsl(var(--primary)) !important;
}

/* header icons */
.dark-theme .main-header .header-icon,
.dark-theme .main-header .text-muted,
.dark-theme .main-header .menu-toggle div {
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .main-header .menu-toggle div {
  background: hsl(var(--card-foreground)) !important;
}

/* dropdowns, modals, pagination */
.dark-theme .dropdown-item,
.dark-theme .dropdown-menu a {
  color: hsl(var(--popover-foreground, var(--card-foreground))) !important;
}

.dark-theme .dropdown-item:hover,
.dark-theme .dropdown-item:focus {
  background: hsl(var(--muted)) !important;
}

.dark-theme .modal-header,
.dark-theme .modal-footer {
  border-color: hsl(var(--border)) !important;
}

.dark-theme .modal-content .close,
.dark-theme .modal-content .modal-title {
  color: hsl(var(--card-foreground)) !important;
  text-shadow: none;
}

.dark-theme .page-link {
  background: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--card-foreground)) !important;
}

/* form controls */
.dark-theme .form-control::placeholder,
.dark-theme input::placeholder,
.dark-theme textarea::placeholder,
.dark-theme .vs__search::placeholder {
  color: hsl(var(--muted-foreground)) !important;
  opacity: 1;
}

.dark-theme .input-group-text,
.dark-theme .custom-select {
  background: hsl(var(--muted)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .custom-control-label::before {
  background: hsl(var(--card));
  border-color: hsl(var(--border));
}

/* vue-select */
.dark-theme .v-select .vs__selected,
.dark-theme .v-select .vs__search,
.dark-theme .v-select .vs__search:focus {
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .v-select .vs__clear,
.dark-theme .v-select .vs__open-indicator {
  fill: hsl(var(--muted-foreground)) !important;
}

.dark-theme .vs__dropdown-menu {
  background: hsl(var(--popover, var(--card))) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--popover-foreground, var(--card-foreground))) !important;
}

.dark-theme .vs__dropdown-option {
  color: hsl(var(--popover-foreground, var(--card-foreground))) !important;
}

.dark-theme .vs__dropdown-option--highlight {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.dark-theme .vs--disabled .vs__dropdown-toggle,
.dark-theme .vs--disabled .vs__search,
.dark-theme .vs--disabled .vs__selected {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* tables (vue-good-table + bootstrap) */
.dark-theme .vgt-wrap,
.dark-theme .vgt-inner-wrap,
.dark-theme .vgt-global-search,
.dark-theme .vgt-wrap__footer,
.dark-theme .vgt-wrap__actions-footer,
.dark-theme .vgt-table,
.dark-theme .vgt-table td {
  background: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .vgt-table thead th,
.dark-theme .vgt-table tfoot th {
  background: hsl(var(--muted)) !important;
  background-image: none !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .vgt-table.striped tbody tr:nth-of-type(odd),
.dark-theme .vgt-table tbody tr:hover {
  background: hsl(var(--muted) / .5) !important;
}

.dark-theme .vgt-wrap__footer .footer__row-count__label,
.dark-theme .vgt-wrap__footer .footer__navigation,
.dark-theme .vgt-wrap__footer .footer__navigation__info,
.dark-theme .vgt-wrap__footer .footer__navigation__page-btn,
.dark-theme .vgt-wrap__footer .footer__navigation__page-btn span,
.dark-theme .vgt-wrap__footer .footer__navigation__page-info {
  color: hsl(var(--muted-foreground)) !important;
}

.dark-theme .vgt-wrap__footer .footer__row-count__select {
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .vgt-wrap__footer .footer__navigation__page-btn .chevron.left::after {
  border-right-color: hsl(var(--muted-foreground)) !important;
}

.dark-theme .vgt-wrap__footer .footer__navigation__page-btn .chevron.right::after {
  border-left-color: hsl(var(--muted-foreground)) !important;
}

.dark-theme .vgt-global-search__input .input__icon .magnifying-glass {
  border-color: hsl(var(--muted-foreground)) !important;
}

.dark-theme .vgt-global-search__input .input__icon .magnifying-glass::before {
  background: hsl(var(--muted-foreground)) !important;
}

.dark-theme .vgt-selection-info-row {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--card-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.dark-theme .table,
.dark-theme .table td,
.dark-theme .table th {
  color: hsl(var(--card-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.dark-theme .table-striped tbody tr:nth-of-type(odd) {
  background: hsl(var(--muted) / .5) !important;
}

/* image upload box (products) */
.dark-theme .image-container,
.dark-theme .drag-text {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

/* date range picker (reports) */
.dark-theme .mj-daterange-picker,
.dark-theme .mj-daterange-picker .mj-calendar,
.dark-theme .mj-daterange-picker .panel,
.dark-theme .mj-daterange-picker .panels-choices,
.dark-theme .mj-daterange-picker .mj-daterange-picker-controls {
  background: hsl(var(--popover, var(--card))) !important;
  color: hsl(var(--popover-foreground, var(--card-foreground))) !important;
  border-color: hsl(var(--border)) !important;
}

.dark-theme .mj-daterange-picker span,
.dark-theme .mj-daterange-picker .calendar-header,
.dark-theme .mj-daterange-picker .calendar-days-name {
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .mj-daterange-picker .panel-button {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .mj-daterange-picker .panel-button.is-current,
.dark-theme .mj-daterange-picker .mj-daterange-picker-submit {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.dark-theme .btn-outline-primary {
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .btn-outline-primary:hover,
.dark-theme .btn-outline-primary:focus {
  color: hsl(var(--accent-foreground)) !important;
}

.dark-theme .btn .ul-btn__text,
.dark-theme .btn .ul-btn__icon {
  color: inherit !important;
}

.dark-theme .table thead th,
.dark-theme .bg-gray-100,
.dark-theme .bg-gray-200,
.dark-theme .bg-gray-300 {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .mj-daterange-picker .calendar-month-name {
  color: hsl(var(--card-foreground)) !important;
}

.dark-theme .pos_page #pos .list-grid .badge-primary {
  color: hsl(var(--card-foreground)) !important;
}

/* Template's ".dark-theme a" (gray) must not recolor link-buttons. */
.dark-theme .btn-primary,
.dark-theme a.btn-primary {
  color: hsl(var(--primary-foreground)) !important;
}

.dark-theme a.btn:not([class*="btn-outline"]):not(.btn-primary):not(.btn-link) {
  color: #fff !important;
}

/* Status bar replacing the template footer (see js/statusbar.js) */
.app-admin-wrap .footer_wrap .app-footer {
  display: none !important;
}

.has-statusbar .main-content-wrap {
  padding-bottom: 32px !important;
}

[data-statusbar] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  height: calc(24px + env(safe-area-inset-bottom, 0px));
  padding: 0 12px env(safe-area-inset-bottom, 0px);
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  font: 500 12px/1 var(--font-sans, "Inter", sans-serif);
  letter-spacing: .01em;
  user-select: none;
}

[data-statusbar] .sb-item {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 6px;
  color: inherit;
}

[data-statusbar] strong {
  color: hsl(var(--card-foreground));
  font-weight: 700;
}

[data-statusbar] .sb-sep {
  margin: 0 6px;
  opacity: .6;
}

[data-statusbar] .sb-link {
  text-decoration: none !important;
}

[data-statusbar] .sb-link:hover,
[data-statusbar] .sb-link:focus-visible {
  background: hsl(var(--muted));
  color: hsl(var(--card-foreground)) !important;
}

/* Transparent XIMO logo: on dark surfaces use the variant with a lighter blue. */
.dark-theme img[src$="/images/ximo-logo.svg"],
.dark-theme img[src$="images/ximo-logo.svg"] {
  content: url("/images/ximo-logo-dark.svg");
}

/* user avatar: a person icon instead of an uploaded photo (top bar, POS, profile) */
.pos-user-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  vertical-align: middle;
}

.pos-user-icon svg {
  width: 60%;
  height: 60%;
}

.pos-user-icon.is-lg {
  width: 96px;
  height: 96px;
  cursor: default;
  border: 4px solid hsl(var(--background));
  box-shadow: 0 4px 16px rgba(15, 23, 42, .12);
}