/* Altiora POS: load after the vendor stylesheet and theme_style.
   --color-base remains the restaurant's runtime theme; status colors stay intact. */
:root {
    --altiora-blue: #2563eb;
    --altiora-charcoal: #1d1d1b;
    --altiora-white: #ffffff;
    --altiora-canvas: #f8fafc;
    --altiora-focus: #2563eb;
    --altiora-action: rgb(var(--color-base, 37, 99, 235));
}

html.dark {
    --altiora-canvas: var(--altiora-charcoal);
    --altiora-focus: #93c5fd;
}

/* Only the existing application shell receives the canvas treatment. */
#main-body,
#main-body #main-content {
    background-color: var(--altiora-canvas);
}

#main-body {
    color: var(--altiora-charcoal);
}

.dark #main-body {
    color: var(--altiora-white);
}

/* An outline supplements existing rings, including red validation borders.
   Important is limited to keyboard focus because vendor utilities remove outlines. */
:where(button, a[href], input:not([type="hidden"]), select, textarea,
    [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid var(--altiora-focus) !important;
    outline-offset: 3px !important;
}

/* Brand actions only: no overrides for green payments, red cancellations or status badges. */
button.bg-skin-base,
a.bg-skin-base {
    background-color: var(--altiora-action);
    border-radius: 0.625rem;
    min-block-size: 2.5rem;
    font-weight: 600;
    line-height: 1.35;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

button.bg-skin-base:not(:disabled):not([aria-disabled="true"]):hover,
a.bg-skin-base:not([aria-disabled="true"]):hover {
    background-color: var(--altiora-action);
    opacity: 1;
}

@supports (background-color: color-mix(in srgb, #2563eb 90%, #000000)) {
    button.bg-skin-base:not(:disabled):not([aria-disabled="true"]):hover,
    a.bg-skin-base:not([aria-disabled="true"]):hover {
        background-color: color-mix(in srgb, var(--altiora-action) 90%, #000000);
    }
}

/* Keep disabled labels readable. This does not enable, disable or intercept controls. */
button[disabled]:disabled,
input[type="submit"][disabled]:disabled,
input[type="button"][disabled]:disabled,
button[aria-disabled="true"],
a[role="button"][aria-disabled="true"],
.pos-menu-items-ul [role="button"][aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.62;
}

/* The primary component temporarily exchanges its background class while loading. */
button[wire\:loading\.class="bg-skin-base/[.8]"]:disabled {
    background-color: var(--altiora-action);
}

button[aria-busy="true"],
button[aria-busy="true"]:disabled,
button:disabled:has(.animate-spin:not(.hidden)),
.pos-order-action-btn:disabled:has([id$="Loading"]:not(.hidden)) {
    cursor: progress;
    opacity: 0.85;
}

/* Allow long Spanish labels to wrap inside the existing dock/grid. */
#pos-container,
#order-items-container,
#pos-order-items-panel,
.pos-kot-cart-panel,
.pos-order-detail-panel,
#pos-cart-action-footer,
#pos-kot-cart-footer,
#pos-mobile-action-dock,
[data-pos-cart-order-actions] {
    min-inline-size: 0;
}

#order-items-container :is(.pos-order-action-btn, .pos-new-kot-link),
[data-pos-cart-order-actions] :is(.pos-order-action-btn, .pos-new-kot-link) {
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: 2.75rem;
    padding-block: 0.625rem;
    padding-inline: 0.625rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The original tablet rule shrinks this long action to 10 px. Keep it readable. */
#order-items-container [data-pos-cart-order-actions] #saveBillPrintBtnText {
    font-size: 0.75rem;
    line-height: 1.35;
}

#pos-cart-scroll,
#pos-kot-cart-scroll,
.pos-menu-items-ul {
    scrollbar-gutter: stable;
    overscroll-behavior-y: contain;
    scroll-padding-top: 0.5rem;
}

#total-display,
#subtotal-display,
#pos-mobile-cart-summary-text,
#pos-offline-payment-due-display {
    font-variant-numeric: tabular-nums;
}

/* A lighter blue preserves readable price emphasis on the dark cart surface. */
.dark #order-items-container #total-display {
    color: #93c5fd;
}

/* The menu FAB is 3.5rem tall and visible only below md. Reserve its bottom
   offset plus a 0.75rem gap outside the cart, so the footer stays above it.
   The existing flex scroll area and footer docking remain in control. */
@media (max-width: 767.98px) {
    #pos-container #order-items-container {
        bottom: calc(3.5rem + max(1.5rem, env(safe-area-inset-bottom, 0px)) + 0.75rem);
    }
}

/* Coarse-pointer targets are limited to primary/form controls and named POS actions.
   Quantity steppers, table grids and the provider's fixed-dock geometry are unchanged. */
@media (pointer: coarse) {
    button.bg-skin-base,
    a.bg-skin-base,
    button[wire\:loading\.attr="disabled"],
    #theme-toggle,
    #pos-change-order-type-btn,
    #pos-mobile-cart-summary,
    #pos-offline-payment-close,
    #pos-offline-payment-confirm {
        min-block-size: 2.75rem;
        min-inline-size: 2.75rem;
    }

    #products-search,
    #selectDeliveryExecutiveInput,
    #pickupDateInput,
    #pickupTimeInput,
    #pos-offline-payment-method,
    #pos-offline-payment-tendered {
        min-block-size: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    button.bg-skin-base,
    a.bg-skin-base {
        transition: none;
    }

    button .animate-spin {
        animation-duration: 2s;
    }
}

@media (forced-colors: active) {
    :where(button, a[href], input:not([type="hidden"]), select, textarea,
        [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
        outline-color: Highlight !important;
    }

    button[disabled]:disabled,
    button[aria-disabled="true"] {
        color: GrayText;
        opacity: 1;
    }
}