/*
 * Valenzo POS v260 — compact public controls and clearer sales/table states.
 * Behaviour stays in the existing modules; this layer only refines presentation.
 */

/* The native select remains the full 44px target, while only a real flag is visible. */
.valenzo-language-selector:has(> [data-valenzo-language-flag]) {
  position: relative !important;
  box-sizing: border-box !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 5px 7px !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
  overflow: visible !important;
}

.valenzo-language-selector > [data-valenzo-language-flag] {
  width: 32px !important;
  height: 22px !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 4px !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .24), 0 4px 12px rgba(0, 0, 0, .18) !important;
  pointer-events: none !important;
}

html[lang^="tr"] .valenzo-language-selector > [data-valenzo-language-flag] { background-image: url("./assets/flags/flag-tr-v260.svg") !important; }
html[lang^="en"] .valenzo-language-selector > [data-valenzo-language-flag] { background-image: url("./assets/flags/flag-gb-v260.svg") !important; }
html[lang^="es"] .valenzo-language-selector > [data-valenzo-language-flag] { background-image: url("./assets/flags/flag-es-v260.svg") !important; }
html[lang^="ar"] .valenzo-language-selector > [data-valenzo-language-flag] { background-image: url("./assets/flags/flag-sa-v260.svg") !important; }
html[lang^="fr"] .valenzo-language-selector > [data-valenzo-language-flag] { background-image: url("./assets/flags/flag-fr-v260.svg") !important; }
html[lang^="de"] .valenzo-language-selector > [data-valenzo-language-flag] { background-image: url("./assets/flags/flag-de-v260.svg") !important; }
html[lang^="ru"] .valenzo-language-selector > [data-valenzo-language-flag] { background-image: url("./assets/flags/flag-ru-v260.svg") !important; }
html[lang^="zh"] .valenzo-language-selector > [data-valenzo-language-flag] { background-image: url("./assets/flags/flag-cn-v260.svg") !important; }
html[lang^="pt"] .valenzo-language-selector > [data-valenzo-language-flag] { background-image: url("./assets/flags/flag-pt-v260.svg") !important; }
html[lang^="hi"] .valenzo-language-selector > [data-valenzo-language-flag] { background-image: url("./assets/flags/flag-in-v260.svg") !important; }

.valenzo-language-selector:has(> [data-valenzo-language-flag]) select {
  position: absolute !important;
  box-sizing: border-box !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  appearance: none !important;
  background: transparent !important;
  color: transparent !important;
  cursor: pointer !important;
  opacity: 0 !important;
}

.valenzo-language-selector:has(> [data-valenzo-language-flag]):focus-within {
  outline: 2px solid #2dd4bf !important;
  outline-offset: 2px !important;
}

.valenzo-auth-v245 .valenzo-auth-site-nav > [data-valenzo-language-host] {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
}

.valenzo-auth-v245 .valenzo-auth-site-nav .valenzo-language-selector:has(> [data-valenzo-language-flag]),
.valenzo-auth-v245 .valenzo-auth-site-nav .valenzo-language-selector:has(> [data-valenzo-language-flag]) select {
  height: 44px !important;
  min-height: 44px !important;
}

.valenzo-auth-v245 .valenzo-auth-site-nav .valenzo-language-selector:has(> [data-valenzo-language-flag]) select {
  inset: -1px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
}

/* App downloads keep their accessible text, but visually become compact icon controls. */
.valenzo-auth-v246 .valenzo-auth-device-cards {
  grid-template-columns: repeat(3, minmax(62px, 78px)) !important;
  justify-content: end !important;
  align-items: center !important;
  gap: clamp(7px, .8vw, 11px) !important;
}

.valenzo-auth-v246 .valenzo-auth-device-card {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  height: 58px !important;
  padding: 8px 9px !important;
  grid-template-columns: minmax(0, 1fr) 20px !important;
  align-items: center !important;
  gap: 4px !important;
}

.valenzo-auth-v246 .valenzo-auth-device-card > .valenzo-auth-device-icon {
  width: 34px !important;
  height: 34px !important;
  justify-self: center !important;
  font-size: 25px !important;
}

.valenzo-auth-v246 .valenzo-auth-device-card > span:nth-child(2) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.valenzo-auth-v246 .valenzo-auth-device-card > i:last-child {
  width: 20px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: end !important;
  color: var(--v246-gold-soft, #f0c66d) !important;
  font-style: normal !important;
}

.valenzo-auth-v246 .valenzo-auth-device-card > i:last-child .valenzo-auth-icon {
  width: 17px !important;
  height: 17px !important;
}

.valenzo-auth-v246 .valenzo-auth-coming-pill {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}

.valenzo-auth-v246 .valenzo-auth-coming-pill::before {
  content: "↓";
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  opacity: .42;
}

.valenzo-auth-v246 .valenzo-auth-device-card.is-coming {
  cursor: not-allowed !important;
}

/* Three useful cart columns: product, quantity and amount. */
@media screen and (min-width: 700px) {
  .pos-v247-shell.pos-v220-shell .pos-v247-cart-columns,
  body.pos-active .pos-v247-shell.pos-v220-shell .pos-v247-cart-row.resto-cart-row {
    grid-template-columns: minmax(0, 1fr) clamp(94px, 7.5vw, 116px) clamp(72px, 5.8vw, 86px) !important;
  }

  body.pos-active .pos-v247-shell.pos-v220-shell .pos-v247-cart-row.resto-cart-row {
    min-height: 76px !important;
  }

  .pos-v247-shell.pos-v220-shell .pos-v247-cart-name {
    min-width: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .pos-v247-shell.pos-v220-shell .pos-v247-cart-amount {
    white-space: nowrap !important;
  }

  .pos-v247-shell.pos-v220-shell .pos-v247-cart-more {
    display: none !important;
  }
}

/* An occupied table must read as occupied before the operator reads the label. */
.pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="open"] {
  border-color: color-mix(in srgb, var(--v257-cyan) 72%, var(--v257-line)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--v257-cyan) 20%, var(--v257-raised)),
      color-mix(in srgb, var(--v257-cyan) 8%, var(--v257-surface))) !important;
  box-shadow:
    inset 4px 0 0 var(--v257-cyan),
    inset 0 0 0 1px color-mix(in srgb, var(--v257-cyan) 14%, transparent),
    0 8px 22px color-mix(in srgb, var(--v257-cyan) 10%, transparent) !important;
}

.pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="open"]
  :is(.tv173-active-card__status), .pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="open"]
  :is(.tv173-available-table__status) {
  border: 1px solid color-mix(in srgb, var(--v257-cyan) 38%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--v257-cyan) 13%, transparent) !important;
  color: var(--v257-cyan) !important;
  padding: 4px 7px !important;
}

.pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="open"]
  :is(.tv173-active-card__number), .pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="open"]
  :is(.tv173-active-card__name), .pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="open"]
  :is(.tv173-available-table__number) {
  color: var(--v257-cyan) !important;
}

html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .table-workspace-v173
  :is(.tv173-active-card, .tv173-available-table)[data-state="open"]
  :is(.tv173-active-card__status), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .table-workspace-v173
  :is(.tv173-active-card, .tv173-available-table)[data-state="open"]
  :is(.tv173-available-table__status) {
  color: #075760 !important;
}

.pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="open"]:is(:hover, :focus-visible) {
  border-color: var(--v257-cyan) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--v257-cyan) 24%, var(--v257-elevated)),
      color-mix(in srgb, var(--v257-cyan) 11%, var(--v257-surface))) !important;
}

/* A requested bill is an urgent amber state, not another neutral/open card. */
.pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="requested"] {
  border-color: color-mix(in srgb, var(--v257-orange) 76%, var(--v257-line)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--v257-orange) 22%, var(--v257-raised)),
      color-mix(in srgb, var(--v257-orange) 9%, var(--v257-surface))) !important;
  box-shadow:
    inset 4px 0 0 var(--v257-orange),
    inset 0 0 0 1px color-mix(in srgb, var(--v257-orange) 16%, transparent),
    0 8px 22px color-mix(in srgb, var(--v257-orange) 11%, transparent) !important;
}

.pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="requested"]
  :is(.tv173-active-card__status), .pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="requested"]
  :is(.tv173-available-table__status) {
  border: 1px solid color-mix(in srgb, var(--v257-orange) 42%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--v257-orange) 14%, transparent) !important;
  color: var(--v257-orange) !important;
  padding: 4px 7px !important;
}

.pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="requested"]
  :is(.tv173-active-card__number), .pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="requested"]
  :is(.tv173-active-card__name), .pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="requested"]
  :is(.tv173-available-table__number) {
  color: var(--v257-orange) !important;
}

html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .table-workspace-v173
  :is(.tv173-active-card, .tv173-available-table)[data-state="requested"]
  :is(.tv173-active-card__status), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .table-workspace-v173
  :is(.tv173-active-card, .tv173-available-table)[data-state="requested"]
  :is(.tv173-available-table__status), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .table-workspace-v173
  :is(.tv173-active-card, .tv173-available-table)[data-state="requested"]
  :is(.tv173-active-card__number), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .table-workspace-v173
  :is(.tv173-active-card, .tv173-available-table)[data-state="requested"]
  :is(.tv173-active-card__name), html[data-valenzo-theme="light"] .pos-v247-shell.pos-v220-shell .table-workspace-v173
  :is(.tv173-active-card, .tv173-available-table)[data-state="requested"]
  :is(.tv173-available-table__number) {
  color: #8a4300 !important;
}

.pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="requested"]:is(:hover, :focus-visible) {
  border-color: var(--v257-orange) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--v257-orange) 27%, var(--v257-elevated)),
      color-mix(in srgb, var(--v257-orange) 12%, var(--v257-surface))) !important;
}

@media screen and (max-width: 699px) {
  .valenzo-auth-v246 .valenzo-auth-device-cards {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .valenzo-auth-v246 .valenzo-auth-device-card {
    min-height: 54px !important;
    height: 54px !important;
  }
}

@media (forced-colors: active) {
  .valenzo-language-selector:has(> [data-valenzo-language-flag]) > [data-valenzo-language-flag] {
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }

  .pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="open"] {
    border: 3px solid Highlight !important;
    box-shadow: none !important;
  }

  .pos-v247-shell.pos-v220-shell .table-workspace-v173 :is(.tv173-active-card, .tv173-available-table)[data-state="requested"] {
    border: 3px solid Mark !important;
    box-shadow: none !important;
  }
}
