*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
  background: #0f172a;
  /* 8 - dark background to prevent white gaps from showing */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
  overflow-x: hidden;
  /* 3 - prevent horizontal scroll/white gap from overflow */
  background: #0f172a;
  /* 4 - dark background to prevent white gaps */
  /* 5 - iPad Pro notch safe area (viewport-fit=cover) */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

.collapse {
  visibility: collapse;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.h-screen {
  height: 100vh;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.ps-3 {
  padding-inline-start: 0.75rem;
}

.text-center {
  text-align: center;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.font-extrabold {
  font-weight: 800;
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

html, body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  touch-action: manipulation;    /* eliminate 300ms tap delay on mobile/tablet */
  -webkit-text-size-adjust: 100%; /* prevent iOS text size inflation */
  overscroll-behavior: none;      /* prevent pull-to-refresh and bounce */
}

/* iPad scroll lock: prevent background scroll when any modal/overlay is open.
   Uses :has() to auto-detect — no JS class toggling needed. */
body:has(.modal-backdrop),
body:has(.modal.open),
body:has(.payment-overlay) {
  overflow: hidden !important;
}

h1:focus {
  outline: none;
}

a, .btn-link {
  color: #0071c1;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
  padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred."
}

/* Loader rules live in app.css under .mesero-loader; the stock
   .loading-progress block was removed here so site.css (loaded after
   app.css) stops overriding the branded loader with the default
   20vh-margin blue ring. */

code {
  color: #c02d76;
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

























/* Full background */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url('/Images/background.jpg') no-repeat center center;
    background-size: cover;
}

/* White card */
.login-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    width: 320px;
    text-align: center;
}


/* PIN input */
.pin-input {
    width: 100%;
    padding: 0.8rem;
    font-size: 1.2rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    text-align: center;
    outline: none;
}


/* Number buttons */
.num-btn {
    background-color: #b30000;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

    .num-btn:hover {
        background-color: #990000;
        transform: scale(1.05);
    }


/* Clear / Enter */
.clear-btn {
    flex: 1;
    background-color: #444;
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.2s;
}

.clear-btn:hover {
    background-color: #333;
}

.enter-btn {
    flex: 1;
    background-color: #008f39;
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.2s;
}

    .enter-btn:hover {
        background-color: #006b2b;
    }


/* Animations (keep @@ inside .razor) */
@@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}


.nav-section-title {
    color: #cbd5e1;
    font-weight: 800;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 12px 12px 6px;
}


/* default: no edge */
.page .main {
    margin-left: 0;
}


    /* fully offscreen until hover */
    .page .sidebar:hover {
        transform: translateX(0);
    }

/* keep the 40px hot edge only on non-login pages */


.page.has-edge .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    transform: translateX(-220px);
    transition: transform .18s ease-in-out;
    background: linear-gradient(180deg,#0f1f3b,#1f3b6b);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 45;
}


.page.no-edge .sidebar {
    display: none;
}

.main {
    margin-left: 0 !important;
}


    /* overlay behavior */
    .sidebar:hover {
        transform: translateX(0);
    }

/* keep your existing .content rules; just add: */
.content--full {
    padding: 0 !important;
}
/* no top/left/right padding */


/* base */
.page .main {
    margin-left: 0;
    width: 100%;
    flex: 1;
}
/* REMOVED: hover-edge is no longer used - sidebar overlays content
.page.has-edge .main {
    margin-left: 40px;
}
only when the edge is enabled */




/* no-edge: hide sidebar and remove any leftover margin */
.page.no-edge .sidebar {
    display: none !important;
    transform: none !important;
}

.page.no-edge .main {
    margin-left: 0 !important;
}

/* (important) remove any stray rule like `.main { margin-left: 40px; }` */
.page.has-edge .sidebar:hover {
    transform: translateX(0);
}
/* full-bleed content */
.content--full {
    padding: 0 !important;
}


/* Slide-out sidebar on every page except login */
.page.has-edge .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    transform: translateX(-220px); /* 40px hot edge */
    transition: transform .18s ease-in-out;
    background: linear-gradient(180deg,#0f1f3b,#1f3b6b);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 45;
}

    .page.has-edge .sidebar:hover {
        transform: translateX(0);
    }

/* REMOVED: hover-edge is no longer used - sidebar now overlays content
.page.has-edge .main {
    margin-left: 40px;
    transition: margin-left .18s;
}

.page.has-edge .sidebar:hover + .main {
    margin-left: 260px;
}
*/

/* Login: hide sidebar completely */
.page.no-edge .sidebar {
    display: none !important;
    transform: none !important;
}

.page.no-edge .main {
    margin-left: 0 !important;
}

/* Full-bleed content removes article padding only */
.content--full {
    padding: 0 !important;
}
/* Order lines: 4 columns = info | qty | total | trash */
.line {
    display: grid;
    grid-template-columns: 1fr max-content max-content 36px;
    align-items: center; /* vertical centering */
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

/* Dark theme - more visible row borders */
html[data-theme="dark"] .line {
    border-bottom-color: #4b5563;
}

    .line .info .name {
        font-weight: 800;
    }

    /* replace the old .line .total rule with this */
    .line .line-total {
        font-weight: 900;
        background: transparent; /* ensure it isn't a pill */
        color: var(--ink);
        padding: 0;
        border-radius: 0;
        white-space: nowrap; /* avoids wrapping to two lines */
    }

/* Qty cluster: fixed widths so every row aligns */
.qty {
    display: grid;
    grid-template-columns: 34px 36px 34px; /* - | count | + */
    align-items: center;
    gap: 6px;
}

    .qty button {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid #ececec;
        background: #fff;
        cursor: pointer;
        display: grid;
        place-items: center;
    }

    .qty .count {
        min-width: 36px;
        text-align: center;
        font-weight: 800;
    }

/* Trash button */
.line .trash {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #f3f4f6;
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}

    .line .trash:hover {
        background: #fee2e2;
        border-color: #fecaca;
        color: #b91c1c;
    }


/* === Consistent column widths for order lines === */
/* === Order summary (scoped & aligned) === */
/* Order summary – clean, scoped */
:root {
    /* a little extra so minus / count / plus always fit on one line */
    --col-qty: 200px;
    --col-total: 96px;
    --col-trash: 34px;
    --ink: #1f2937;
}

.summary .line {
    display: grid;
    grid-template-columns: 1fr var(--col-qty) var(--col-total) var(--col-trash);
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

    .summary .line .info {
        min-width: 0;
    }

        .summary .line .info .name {
            font-weight: 800;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

/* qty cluster */
.summary .qty {
    display: grid;
    grid-template-columns: 34px 36px 34px;
    gap: 6px;
    align-items: center;
    width: var(--col-qty);
    justify-self: end;
}

    .summary .qty button {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid #ececec;
        background: #fff;
        display: grid;
        place-items: center;
    }

    .summary .qty .count {
        min-width: 36px;
        text-align: center;
        font-weight: 800;
    }

/* total column */
.summary .line-total {
    justify-self: end;
    width: var(--col-total);
    text-align: right;
    white-space: nowrap;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1,"lnum" 1;
    color: var(--ink);
}

/* ========================================
   DISCOUNT DISPLAY - Global styles
   ======================================== */
.discount-badge {
    display: inline-block !important;
    margin-left: 6px !important;
    padding: 2px 6px !important;
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: #fff !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.3);
}

/* Discounted line total - stack original and new price vertically */
/* Must override .summary .line-total which has white-space:nowrap */
.line-total.discounted,
.summary .line-total.discounted,
.lines .line-total.discounted {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0 !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    width: auto !important;
}

.line-total.discounted .original-price,
.summary .line-total.discounted .original-price,
.lines .line-total.discounted .original-price {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    text-decoration: line-through !important;
}

.line-total.discounted > span:last-child,
.summary .line-total.discounted > span:last-child,
.lines .line-total.discounted > span:last-child {
    color: #059669 !important;
    font-weight: 900 !important;
}

/* Dark theme discount styles */
html[data-theme="dark"] .discount-badge {
    background: linear-gradient(135deg, #065f46, #047857) !important;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.3);
}

html[data-theme="dark"] .line-total.discounted .original-price,
html[data-theme="dark"] .summary .line-total.discounted .original-price,
html[data-theme="dark"] .lines .line-total.discounted .original-price {
    color: #6b7280 !important;
}

html[data-theme="dark"] .line-total.discounted > span:last-child,
html[data-theme="dark"] .summary .line-total.discounted > span:last-child,
html[data-theme="dark"] .lines .line-total.discounted > span:last-child {
    color: #10b981 !important;
}

/* trash */
.summary .trash {
    justify-self: end;
    width: var(--col-trash);
    height: 34px;
    border-radius: 8px;
    border: 1px solid #f3f4f6;
    background: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s ease, transform .08s ease, box-shadow .12s ease;
}

    .summary .trash:hover {
        background: #fee2e2;
        border-color: #fecaca;
        color: #b91c1c;
    }



/* Make the app fill the viewport reliably (mobile/desktop) */
.pos-shell {
    min-height: 100svh;
    height: 100dvh;
}

/* Let the main workspace take the remaining height and allow its children to scroll */
.workspace {
    flex: 1 1 auto; /* fill remaining space */
    min-height: 0; /* CRUCIAL: allow children to shrink/scroll */
    overflow: hidden; /* children handle their own scrollbars */
}

/* Product grid scroll */
.grid {
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* inertial scroll on iOS */
    touch-action: pan-y;
    overscroll-behavior: contain; /* no page bounce */
    scrollbar-gutter: stable; /* no layout shift */
    min-height: 0; /* play nice inside grid/flex parents */
}

/* Summary column: make it a flex box with a scrollable lines area */
.summary {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
}

/* BASKET FULL HEIGHT MODE - Now handled by grid layout in Pos.razor.css */
/* The basket is part of the document flow, not fixed positioned */

    /* Sticky header for the basket + nice backdrop */
    .summary h3 {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--card);
        padding-bottom: 6px;
    }

    /* Scrollable list of lines (basket) */
    .summary .lines {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        min-height: 0;
        flex: 1 1 auto; /* take remaining space under the header */
    }

/* Premium scrollbar styling - visible, touch-friendly, works in dark mode */
/* Target POS products-panel and grid (direct selectors - no .page wrapper) */
.products-panel::-webkit-scrollbar,
.main-content .grid::-webkit-scrollbar,
.summary .lines::-webkit-scrollbar {
    width: 10px !important;
}

.products-panel::-webkit-scrollbar-track,
.main-content .grid::-webkit-scrollbar-track,
.summary .lines::-webkit-scrollbar-track {
    background: transparent !important;
    margin: 8px 0;
}

.products-panel::-webkit-scrollbar-thumb,
.main-content .grid::-webkit-scrollbar-thumb,
.summary .lines::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.4) !important;
    border-radius: 10px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

.products-panel::-webkit-scrollbar-thumb:hover,
.main-content .grid::-webkit-scrollbar-thumb:hover,
.summary .lines::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7) !important;
}

.products-panel::-webkit-scrollbar-thumb:active,
.main-content .grid::-webkit-scrollbar-thumb:active,
.summary .lines::-webkit-scrollbar-thumb:active {
    background: rgba(156, 163, 175, 0.9) !important;
}

/* Firefox scrollbar */
.products-panel,
.main-content .grid,
.summary .lines {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

/* Widen scrollbar on desktop for easier grabbing */
@media (pointer: fine) {
    .products-panel::-webkit-scrollbar,
    .main-content .grid::-webkit-scrollbar,
    .summary .lines::-webkit-scrollbar {
        width: 12px !important;
    }

    .products-panel::-webkit-scrollbar-thumb,
    .main-content .grid::-webkit-scrollbar-thumb,
    .summary .lines::-webkit-scrollbar-thumb {
        border: 3px solid transparent !important;
    }

    .products-panel,
    .main-content .grid,
    .summary .lines {
        scrollbar-width: auto;
    }
}

/* Dark mode scrollbar - lighter thumb for visibility */
:root[data-theme="dark"] .products-panel::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .main-content .grid::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .summary .lines::-webkit-scrollbar-thumb {
    background: rgba(209, 213, 219, 0.3) !important;
}

:root[data-theme="dark"] .products-panel::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] .main-content .grid::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] .summary .lines::-webkit-scrollbar-thumb:hover {
    background: rgba(209, 213, 219, 0.5) !important;
}

:root[data-theme="dark"] .products-panel::-webkit-scrollbar-thumb:active,
:root[data-theme="dark"] .main-content .grid::-webkit-scrollbar-thumb:active,
:root[data-theme="dark"] .summary .lines::-webkit-scrollbar-thumb:active {
    background: rgba(209, 213, 219, 0.65) !important;
}

:root[data-theme="dark"] .products-panel,
:root[data-theme="dark"] .main-content .grid,
:root[data-theme="dark"] .summary .lines {
    scrollbar-color: rgba(209, 213, 219, 0.3) transparent;
}

/* Add right padding so content doesn't feel glued to scrollbar */
.products-panel .grid {
    padding-right: 8px;
}

.modal-root {
    z-index: 50;
}

    .modal-root.confirm {
        z-index: 70;
    }
    /* generic “Show” dialog above sheets */
    .modal-root.alert {
        z-index: 80;
    }
/* “Vaciar pedido” confirm on top of all */

/* LEFT: keep behavior, but use ~ because <main> is no longer adjacent */
.sidebar:hover ~ .main {
    margin-left: 260px;
}

/* RIGHT slide-out (mirrors the left) */
.tablesbar {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 300px; /* expanded width */
    transform: translateX(260px); /* leaves ~40px “hot edge” visible */
    transition: transform .18s ease-in-out;
    background: #fff;
    border-left: 1px solid #ececec;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 45;
}

    .tablesbar:hover {
        transform: translateX(0);
    }

        /* When the right panel is open, give content breathing room */
        .tablesbar:hover ~ .main {
            margin-right: 300px;
        }

    /* Scroll wrapper to match your left .nav-scrollable */
    .tablesbar .tables-nav-scrollable {
        height: 100%;
        overflow: auto;
        padding: 0;  /* Remove padding to eliminate top gap */
    }

/* Mobile: both panels overlay content (no push) */
@media (max-width: 768px) {
    .sidebar:hover ~ .main {
        margin-left: 0;
    }

    .tablesbar:hover ~ .main {
        margin-right: 0;
    }
}


.edge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 6px;
    font-weight: 900;
    color: #1f2937;
}

.edge-title {
    font-size: 1rem;
}

.edge-link {
    font-weight: 800;
    color: #0ea5e9;
    text-decoration: none;
}

.edge-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    overflow: auto;
}

.edge-tab {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    cursor: pointer;
}

    .edge-tab.active {
        background: #c62828;
        border-color: #c62828;
        color: #fff;
    }

.edge-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
}

.edge-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.edge-label {
    font-weight: 800;
    color: #1f2937;
}

.edge-total {
    font-weight: 900;
}

.edge-empty {
    color: #6b7280;
    font-style: italic;
    padding: 10px;
}

/* status dots */
.dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

    .dot.free {
        background: #22c55e;
    }

    .dot.open {
        background: #ef4444;
    }

    .dot.reserved {
        background: #f59e0b;
    }

    .dot.paid {
        background: #94a3b8;
    }

/* minimal styles so the list isn't “invisible” */
.tables-nav-scrollable {
    height: 100%;
    overflow: auto;
    background: #fff;
}

.edge-header {
    display: flex;
    align-items: center;
    /* Pack title + search button on the left and let the Fijar / Plano
       segmented-control claim the right via margin-left:auto. Pre-fix
       the rule used justify-content:space-between with three children,
       which sat the search button alone in the middle with a wide
       empty gap before the right-side controls — the slide-panel
       header read like an unfinished layout, not a premium toolbar. */
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-weight: 900;
}

.edge-header > .edge-actions {
    margin-left: auto;
}

.edge-title {
    font-size: 1.05rem;
}

.edge-link {
    font-weight: 800;
    text-decoration: none;
}

.edge-tabs {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f1f1;
    overflow: auto;
}

.edge-tab {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 10px;
    background: #fff;
    font-weight: 800;
}

    .edge-tab.active {
        background: #c62828;
        color: #fff;
        border-color: #c62828;
    }

.edge-list {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
    cursor: pointer;
}

.edge-label {
    font-weight: 800;
}

.edge-total {
    margin-left: auto;
    font-weight: 900;
    background: #111827;
    color: #fff;
    border-radius: 8px;
    padding: 2px 8px;
}

.edge-empty {
    color: #6b7280;
    font-weight: 700;
    padding: 20px;
    text-align: center;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

    .dot.free {
        background: #22c55e;
    }

    .dot.open {
        background: #ef4444;
    }

    .dot.reserved {
        background: #f59e0b;
    }

    .dot.paid {
        background: #94a3b8;
    }
.tablesbar {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 340px; /* expanded width */
    transform: translateX(300px); /* leaves ~40px “hot edge” */
    transition: transform .18s ease-in-out;
    background: #fff;
    box-shadow: -12px 0 30px rgba(0,0,0,.18);
    z-index: 46;
}

    .tablesbar:hover {
        transform: translateX(0);
    }

    .tablesbar .tables-nav-scrollable {
        height: 100%;
        overflow: auto;
        padding: 10px;
    }

    /* optional: nudge main content when hovering */
    .tablesbar:hover ~ .main {
        margin-right: 340px;
        transition: margin-right .18s;
    }


/* Panel container (card) */
.card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.03)
}

    .card.pad {
        padding: 10px
    }

/* Toolbar above table */
.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.input.grow {
    flex: 1;
    min-width: 220px;
}

   
/* Datagrid table */
.datagrid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

    .datagrid th, .datagrid td {
        padding: 10px 12px
    }

    .datagrid thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fafafa;
        color: #2b2b2b;
        font-weight: 600;
        border-bottom: 1px solid #eaeaea
    }

    .datagrid tbody tr {
        border-bottom: 1px solid #f2f2f2
    }

        .datagrid tbody tr:hover {
            background: #f9fbff
        }

    .datagrid td.num {
        text-align: right
    }

    .datagrid td.center {
        text-align: center
    }

/* Small image cell */
.cell-img {
    width: 64px
}

    .cell-img img {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 8px;
        display: block
    }

/* Tiny icon buttons */
.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0 6px
}

    .icon-btn:hover {
        opacity: .7
    }

/* Right-side sheet */
.sheet {
    width: 560px; /* <- controls width */
    max-width: 92vw;
    margin-left: auto; /* anchor to the right */
    background: #fff;
    border-left: 1px solid #eee;
    border-radius: 12px 0 0 12px;
    box-shadow: -8px 0 24px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

.sheet-header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    z-index: 1;
    border-bottom: 1px solid #f3f3f3;
}

.tabs {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    position: sticky;
    top: 52px;
    background: #fff;
    z-index: 1
}

.tab {
    padding: 8px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    background: #fafafa;
    cursor: pointer
}

    .tab:disabled {
        background: #e9f2ff;
        border-color: #cfe3ff;
        cursor: default;
        font-weight: 600
    }

.btn.primary {
    background: #2563eb;
    color: #fff;
    border: 1px solid #1e4fcb
}

.input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 10px
}


/* Backdrop + slide-in */
.backdrop {
    flex: 1;
    background: rgba(0,0,0,.5);
    animation: fadeIn .18s ease-out
}

.sheet {
    width: 560px;
    max-width: 100%;
    background: #fff;
    border-left: 1px solid #eee;
    box-shadow: -6px 0 24px rgba(0,0,0,.08);
    animation: sheetIn .22s ease-out
}

.sheet-header {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 12px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2
}

.tabs {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
    background: #fafafa;
    position: sticky;
    top: 52px;
    z-index: 1
}

.tab {
    padding: .4rem .7rem;
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    background: #fff
}

    .tab[disabled] {
        background: #2b6cb0;
        color: #fff;
        border-color: #2b6cb0
    }

/* 44px touch floor for the admin tab buttons — the rules above set padding only
   (~36-42px tall). inline-flex keeps the label centered at the taller height. */
.tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

/* Dark theme: the global .tabs/.tab rules above are light-only (#fff/#fafafa),
   so admin pages that use them (Loyalty, Gift Cards, Campaigns, CRM, Tips,
   Integrations, Inventory*, etc.) rendered a bright white tab slab in dark
   mode. Scoped to data-theme="dark" so light mode is untouched; .tabs/.tab are
   admin-only classes (no POS/customer usage), so blast radius is the admin
   shell only. */
:root[data-theme="dark"] .tabs {
    background: #0d1117;
    border-bottom-color: #21262d;
}
:root[data-theme="dark"] .tab {
    background: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
}
:root[data-theme="dark"] .tab:hover:not(:disabled):not([disabled]) {
    background: #21262d;
    border-color: #3d444d;
}
:root[data-theme="dark"] .tab:disabled,
:root[data-theme="dark"] .tab[disabled] {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #fff;
}

.sheet-body {
    padding: 12px 16px 20px
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.variant-row {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 6px
}

.img-preview {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #eee
}

@keyframes sheetIn {
    from {
        transform: translateX(18px);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px
}

    .card.pad {
        padding: 12px
    }

.toolbar {
    display: flex;
    gap: 8px;
    align-items: center
}

.input.grow {
    flex: 1;
    min-width: 180px
}

/* datagrid */
.datagrid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

    .datagrid th, .datagrid td {
        padding: 10px 12px;
        border-bottom: 1px solid #f1f3f5
    }

    .datagrid thead th {
        position: sticky;
        top: 0;
        background: #f8fafc;
        z-index: 1
    }

    .datagrid tbody tr:hover {
        background: #fafcff
    }

.cell-img img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px
}

.num {
    text-align: right
}

.center {
    text-align: center
}

.icon-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px
}

    .icon-btn:hover {
        filter: brightness(.9)
    }


/* Grid wrapper so columns behave */
.admin-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr); /* ← minmax keeps right pane from overflowing */
    gap: 16px;
    align-items: start;
}

/* Right column must be allowed to shrink */
.admin-right {
    min-width: 0;
}

/* Toolbar polish so it wraps instead of pushing sideways */
.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.input.grow {
    flex: 1;
    min-width: 220px;
}

/* use a unique name to avoid any collisions */
.catalog-grid {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.catalog-right {
    min-width: 0;
}
/* lets the table/toolbar shrink, not push the left column */

/* optional mobile fallback */
@media (max-width: 900px) {
    .catalog-grid {
        grid-template-columns: 1fr;
    }
}


/* good: only zero on pages without the hover-edge */
.page.no-edge .main {
    margin-left: 0 !important;
}

/* REMOVED: hover-edge 40px gap is no longer used - sidebar now overlays content
.page.has-edge .main {
    margin-left: 40px !important;
} */

/* REMOVED: sidebar now overlays content, doesn't push
.sidebar:hover ~ .main {
    margin-left: 260px !important;
} */



/* Categories header */
.cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* Right-side actions, compact */
.cat-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .cat-actions .chk {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
    }

/* Small neutral buttons (avoid global .btn collisions) */
.btn-sm {
    border: 1px solid #e6e6e6;
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

    .btn-sm:hover {
        background: #f8fafc;
    }


/* Title + controls live in a column; controls become the second row */
.cat-header {
    display: flex;
    flex-direction: column; /* <-- pushes actions BELOW the title */
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

/* Single horizontal row, compact, wraps nicely on small widths */
.cat-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Small, clean “chips” for the two buttons */
.chip {
    border: 1px solid #e6e6e6;
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
    white-space: nowrap;
}

    .chip:hover {
        background: #f8fafc;
    }

/* Tiny checkbox label so it lines up nicely with the chips */
.cat-actions .chk {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.bulkbar {
    position: sticky;
    top: -1px;
    z-index: 2;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
}

    .bulkbar .spacer {
        flex: 1;
    }

.chips {
    display: inline-flex;
    gap: 6px;
    margin-left: 8px;
}

.chip {
    border: 1px solid #e6e6e6;
    background: #fff;
    border-radius: 999px;
    padding: 4px 8px;
    font-weight: 700;
}

    .chip.ok {
        background: #e8fff1;
        border-color: #9ae6b4;
    }

    .chip.warn {
        background: #fff7ed;
        border-color: #fdba74;
    }

    .chip.gray {
        background: #f5f5f5;
        border-color: #e5e7eb;
        color: #4b5563;
    }

    .chip.danger {
        background: #fff1f2;
        border-color: #fecdd3;
        color: #b91c1c;
    }

tr[draggable="true"] {
    cursor: grab;
}


/* dim the one you're dragging */
tr.dragging {
    opacity: .45;
}

/* highlight the hovered target row */
tr.drop-target {
    box-shadow: 0 3px 0 0 #3b82f6 inset, 0 -3px 0 0 #3b82f6 inset;
}

/* optional: show a move cursor on the handle cell */
td.drag-cell, td.drag-cell * {
    cursor: move;
}


/* === DOCK THE RIGHT PANEL, ALWAYS === */

/* === POS: permanently dock the right Tables panel === */

/* 1) Two-column layout for pages that include the panel */
.page.with-tables {
    grid-template-columns: minmax(0,1fr) 360px !important; /* content | panel */
    min-height: 100vh;
}

    /* 2) Main content lives in column 1 and must be shrinkable */
    .page.with-tables .main {
        grid-column: 1 !important;
        margin: 0 !important;
        width: auto !important; /* override any width:100% */
    }

    /* only zero out margins when the panel is docked */
.page.with-tables.tables-docked > .main {
    grid-column: 1 !important;
    margin: 0 !important;
    width: auto !important;
}

/* REMOVED: hover-edge is no longer used - sidebar overlays content
.page.with-tables.tables-auto > .main {
    margin-left: 40px !important;
} */

    /* 3) Right panel lives in column 2; kill ALL slide-out behaviors */
    .page.with-tables .tablesbar,
    .page.with-tables .tablesbar:hover {
        grid-column: 2 !important;
        position: sticky !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 360px !important;
        transform: none !important; /* <— critical: stops being off-screen */
        box-shadow: none !important;
        border-left: 1px solid #e5e7eb !important;
        z-index: 1 !important; /* below modals, above content */
        background: #fff !important;
    }

        /* 4) If the inner slide panel used fixed/overlay styles, neutralize them */
        .page.with-tables .tablesbar .slidepanel-root,
        .page.with-tables .tablesbar .sheet,
        .page.with-tables .tablesbar .panel,
        .page.with-tables .tablesbar .backdrop,
        .page.with-tables .tablesbar .modal-root,
        .page.with-tables .tablesbar .modal-backdrop {
            position: static !important;
            inset: auto !important;
            transform: none !important;
            width: auto !important;
            height: auto !important;
            max-height: none !important;
            box-shadow: none !important;
            border: 0 !important;
            background: transparent !important;
        }

/* 5) Mobile: overlay the panel again so content keeps width */
@media (max-width: 920px) {
    .page.with-tables {
        display: block !important;
    }

        .page.with-tables .main {
            width: 100% !important;
            margin: 0 !important;
        }

        .page.with-tables .tablesbar {
            position: fixed !important;
            right: 0 !important;
            top: 0 !important;
            bottom: 0 !important;
            width: 86vw !important;
            transform: none !important;
            box-shadow: -12px 0 30px rgba(0,0,0,.25) !important;
            z-index: 46 !important;
        }
}




/* tiny switch */
.panel-toggle {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 4px 10px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
}

    .panel-toggle:hover {
        background: #f8fafc;
    }

/* --- Base visual for the right bar --- */
.tablesbar {
    width: 360px;
    background: #fff;
}

/* ===== Mode A: AUTO-HIDE (slide-out on hover) ===== */
.page.with-tables.tables-auto {
    display: block !important;
}

    .page.with-tables.tables-auto .main {
        margin-right: 0 !important;
        width: auto !important;
    }

    .page.with-tables.tables-auto .tablesbar {
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: translateX(320px) !important;
        transition: transform .18s ease-in-out;
        box-shadow: -12px 0 30px rgba(0,0,0,.18);
        border-left: 1px solid #ececec;
        z-index: 46;
    }

        .page.with-tables.tables-auto .tablesbar:hover {
            transform: none !important;
        }



.with-tables.tables-docked .tablesbar {
    display: block; /* ensure visible in docked */
}

/* Do NOT have any .with-tables or .tables-auto rules that change layout */


/* push content only while hovering (desktop) */
@media (pointer:fine) {
    .page.with-tables.tables-auto .tablesbar:hover ~ .main {
        margin-right: 360px !important;
    }
}

/* ===== Mode B: DOCKED (always visible, VS “pinned”) ===== */
.page.with-tables.tables-docked {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 360px !important;
    min-height: 100vh;
}

   

    .page.with-tables.tables-docked .tablesbar {
        grid-column: 2 !important;
        position: sticky !important;
        top: 0 !important;
        right: auto !important;
        height: 100vh;
        transform: none !important;
        box-shadow: none !important;
        border-left: 1px solid #e5e7eb !important;
        z-index: 1 !important;
    }

/* Mobile: always overlay (both modes) */
@media (max-width:920px) {
    .page.with-tables.tables-docked {
        display: block !important;
    }

       

        .page.with-tables.tables-docked .tablesbar,
        .page.with-tables.tables-auto .tablesbar {
            position: fixed !important;
            right: 0 !important;
            top: 0 !important;
            bottom: 0 !important;
            width: 86vw !important;
            transform: none !important;
            box-shadow: -12px 0 30px rgba(0,0,0,.25) !important;
            z-index: 46 !important;
        }
}



/* small VS-style toggle button on the panel header */
.edge-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.panel-toggle {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 4px 10px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}

    .panel-toggle:hover {
        background: #f8fafc;
    }

/* Base width */
.tablesbar {
    width: 360px;
    background: #fff;
}

/* ===== Auto-hide mode (slide on hover) ===== */
.page.with-tables.tables-auto {
    display: block !important;
}

    .page.with-tables.tables-auto .main {
        margin-right: 0 !important;
        width: auto !important;
    }

    .page.with-tables.tables-auto .tablesbar {
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: translateX(320px) !important;
        transition: transform .18s ease-in-out;
        box-shadow: -12px 0 30px rgba(0,0,0,.18);
        border-left: 1px solid #ececec;
        z-index: 46;
    }

        .page.with-tables.tables-auto .tablesbar:hover {
            transform: none !important;
        }
/* push content only while hovered (desktop pointers) */
@media (pointer:fine) {
    .page.with-tables.tables-auto .tablesbar:hover ~ .main {
        margin-right: 360px !important;
    }
}

/* ===== Docked mode (always visible) ===== */
.page.with-tables.tables-docked {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 360px !important;
    min-height: 100vh;
}

 

    .page.with-tables.tables-docked .tablesbar {
        grid-column: 2 !important;
        position: sticky !important;
        top: 0;
        height: 100vh;
        transform: none !important;
        box-shadow: none !important;
        border-left: 1px solid #e5e7eb !important;
    }

/* Mobile: overlay either way */
@media (max-width:920px) {
    .page.with-tables.tables-docked {
        display: block !important;
    }

       

    .page.with-tables .tablesbar {
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 86vw !important;
        transform: none !important;
        box-shadow: -12px 0 30px rgba(0,0,0,.25) !important;
        z-index: 46 !important;
    }
}

/* Docked layout: keep main and tablesbar on the same grid row */
.page.with-tables.tables-docked {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    min-height: 100vh;
}

    .page.with-tables.tables-docked > .main {
        grid-column: 1 !important;
        grid-row: 1 !important; /* ← this line fixes the "page goes down" */
        margin: 0 !important;
        width: auto !important;
        min-width: 0; /* avoid overflow */
        overflow: hidden; /* prevent content from overlapping the tablesbar */
    }

    .page.with-tables.tables-docked > .tablesbar {
        grid-column: 2 !important;
        grid-row: 1 !important; /* ← ensure it stays on row 1 */
        position: sticky !important;
        top: 0 !important;
        height: 100vh;
        transform: none !important;
        box-shadow: none !important;
        border-left: 1px solid #e5e7eb !important;
    }

/* keep the left hover-edge out of the grid flow */
.page.has-edge .sidebar {
    position: fixed;
}

/* just in case an older “hover pushes main” rule leaks into docked mode */
.page.with-tables.tables-docked .tablesbar:hover ~ .main {
    margin-right: 0 !important;
}

:root {
    --hw-radius: 12px;
    --hw-border: #e5e7eb;
    --hw-header: #0f172a;
    --hw-sub: #475569;
    --hw-shadow: 0 22px 80px -24px rgba(2,6,23,.55), 0 8px 28px -12px rgba(2,6,23,.25);
}

/* Backdrop */
.hw__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(3px);
    z-index: 1050;
    animation: hwFade .18s ease-out;
}

/* Modal shell */
.hw__modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(680px,94vw);
    max-height: 86vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid var(--hw-border);
    border-radius: var(--hw-radius);
    box-shadow: var(--hw-shadow);
    z-index: 1060;
    animation: hwPop .18s ease-out;
}

/* Header */
.hw__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(180%) blur(6px);
    border-bottom: 1px solid var(--hw-border);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hw__title {
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--hw-header);
}

.hw__close {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--hw-border);
    background: #fff;
    display: grid;
    place-items: center;
}

    .hw__close:hover {
        background: #f8fafc;
    }

/* Body */
.hw__body {
    padding: 14px 16px 8px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Single-column layout: Pulso del cajón moved into the collapsible
   "Ajustes avanzados" accordion below the Conexión card, so the old
   two-column grid left an empty right column. Single column keeps the
   operator's eye on one flow (Conexión → Avanzados → Adicionales). */
.hw__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
    box-sizing: border-box;
}

.hw__section {
    /* Solid hairline > dashed: dashed reads as "placeholder/debug" in
       settings UIs; solid reads as a premium bounded card. Colour stays
       very soft so the section grouping is visible without dominating. */
    border: 1px solid #eef2f7;
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 0;
    overflow: hidden;
}

.hw__label {
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hw-sub);
    margin-bottom: 6px;
}

.hw__hint {
    color: #64748b;
    font-size: .85rem;
}

/* Sticky actions */
.hw__actions {
    position: sticky;
    bottom: -1px;
    margin-top: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: linear-gradient(180deg,rgba(255,255,255,.6),#fff 70%);
    border-top: 1px solid var(--hw-border);
    max-width: 100%;
    box-sizing: border-box;
}

    .hw__actions .btn {
        padding: .45rem .7rem;
        border-radius: 10px;

    }

.hw__meta {
    color: #94a3b8;
    font-size: .8rem;
}

@keyframes hwFade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes hwPop {
    from {
        transform: translate(-50%,-46%) scale(.98);
        opacity: 0
    }

    to {
        transform: translate(-50%,-50%) scale(1);
        opacity: 1
    }
}

/* Botones en la barra de acciones: ícono + texto en una sola línea */
.hw__actions .btn {
    display: inline-flex; /* <- importante si falta Tailwind */
    align-items: center;
    gap: .4rem;
}

    .hw__actions .btn svg {
        width: 16px !important;
        height: 16px !important;
        display: inline-block !important;
    }


/* ── Hardware modal: dark theme ───────────────────────────── */
html[data-theme="dark"] {
    --hw-border: #334155;
    --hw-header: #e2e8f0;
    --hw-sub: #94a3b8;
}

html[data-theme="dark"] .hw__modal {
    background: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .hw__header {
    background: rgba(30,41,59,.97);
    border-bottom-color: #334155;
}

html[data-theme="dark"] .hw__close {
    background: #334155;
    border-color: #475569;
    color: #94a3b8;
}

html[data-theme="dark"] .hw__close:hover {
    background: #475569;
    color: #e2e8f0;
}

html[data-theme="dark"] .hw__body {
    color: #e2e8f0;
}

html[data-theme="dark"] .hw__section {
    border-color: #334155;
    background: rgba(51,65,85,.3);
}

html[data-theme="dark"] .hw__section:hover {
    background: rgba(51,65,85,.5);
}

html[data-theme="dark"] .hw__actions {
    background: linear-gradient(180deg, rgba(30,41,59,.6), #1e293b 70%);
    border-top-color: #334155;
}

html[data-theme="dark"] .hw__meta {
    color: #64748b;
}

html[data-theme="dark"] .hw__hint {
    color: #94a3b8;
}

/* Generic input styling so fields always look like inputs */
input[type="text"],
input[type="number"],
input[type="datetime-local"],
select, textarea, .input {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111827;
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 220px;
}

    input:focus, select:focus, textarea:focus, .input:focus {
        outline: 2px solid #c62828;
        outline-offset: 1px;
        border-color: #c62828;
    }
/* Table cell selects shouldn’t collapse */
.tbl select, .tbl .input {
    width: 100%;
    min-width: 220px;
}


.input, select, input[type="number"], textarea {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
}


/* RIGHT PANEL: never push content in auto-hide */
.page.with-tables.tables-auto .tablesbar:hover ~ .main {
    margin-right: 0 !important;
}

/* Also neutralize any legacy generic push rules */
.tablesbar:hover ~ .main {
    margin-right: 0 !important;
}



/* ================= RIGHT PANEL FIXES (place at very end) ================= */

/* z-index tokens (optional but handy) */
:root {
    --z-topbar: 20;
    --z-bottombar: 10;
    --z-rightpanel: 120;
    --z-modal: 500
}

/* make sure your bars keep modest z-indexes */
.topbar {
    z-index: var(--z-topbar) !important;
}

.bottombar {
    z-index: var(--z-bottombar) !important;
}

/* ---------- AUTO-HIDE (overlay; never pushes; sits above bars) ---------- */
.page.with-tables.tables-auto .tablesbar {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 360px !important;
    transform: translateX(320px) !important; /* ~40px hot edge */
    transition: transform .18s ease-in-out;
    z-index: var(--z-rightpanel) !important; /* over top/bottom bars */
    box-shadow: -12px 0 30px rgba(0,0,0,.18);
}

    .page.with-tables.tables-auto .tablesbar:hover {
        transform: none !important;
    }

        /* kill any “push the main to the left/right” side-effects in auto mode */
        .page.with-tables.tables-auto .tablesbar:hover ~ .main {
            margin-right: 0 !important;
        }

.page.with-tables.tables-auto .main {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* If your overlay uses .tables-panel/.tp-card instead of .tablesbar, lift them too */
.page.with-tables.tables-auto .tables-panel,
.page.with-tables.tables-auto .tp-card {
    z-index: var(--z-rightpanel) !important;
}

/* ------------- DOCKED (grid; zero margins; no hover-edge push) ---------- */
.page.with-tables.tables-docked {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 360px !important; /* content | panel */
    min-height: 100vh;
}

    .page.with-tables.tables-docked > .main {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        min-width: 0;
    }

    .page.with-tables.tables-docked > .tablesbar {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: sticky !important;
        top: 0 !important;
        height: 100vh;
        transform: none !important;
        border-left: 1px solid #e5e7eb !important;
        box-shadow: none !important;
        z-index: 2 !important; /* under modals, above content */
    }

    /* nuke the left “hover edge” pushes while docked */
    .page.with-tables.tables-docked .main {
        margin-left: 0 !important;
    }

    .page.with-tables.tables-docked .sidebar:hover ~ .main {
        margin-left: 0 !important;
    }
    /* and any right-push ghosts */
    .page.with-tables.tables-docked .tablesbar:hover ~ .main {
        margin-right: 0 !important;
    }


/* layering for bars */
.topbar {
    z-index: 20 !important;
}

.bottombar {
    z-index: 10 !important;
}

/* ========== AUTO-HIDE: overlay, never pushes, above bars ========== */
.page.with-tables.tables-auto .tablesbar {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 360px !important;
    transform: translateX(320px) !important; /* ~40px hot edge */
    transition: transform .18s ease-in-out;
    z-index: 120 !important; /* sit ON TOP of top/bottom bars */
    box-shadow: -12px 0 30px rgba(0,0,0,.18);
    border-left: 1px solid #ececec;
}

    .page.with-tables.tables-auto .tablesbar:hover {
        transform: none !important;
    }

        /* never push the POS in auto-hide */
        .page.with-tables.tables-auto .tablesbar:hover ~ .main {
            margin-right: 0 !important;
        }

/* ===== Reserva modals escape the auto-hide panel transform =====
   The reserva modals (Nueva/Editar reserva, Llegada, calendario) are
   true full-screen centered modals (position:fixed; translate(-50%,-50%))
   rendered INSIDE TableSlidePanel, which lives inside .tablesbar. In
   auto-hide mode .tablesbar carries `transform: translateX(320px)`, which
   establishes a containing block — so the fixed modal + its backdrop get
   trapped inside the 360px panel instead of the viewport (the ":hover"
   reset above masks this for mouse users but never fires on touch POS
   terminals). TableSlidePanel adds `body.reserva-modal-open` while any
   reserva modal is open; neutralizing the transform here lets the modal
   resolve against the viewport. The panel slides fully in behind the
   backdrop, which is harmless (the backdrop covers it). */
body.reserva-modal-open .page.with-tables.tables-auto .tablesbar {
    transform: none !important;
}

/* ===== Phone: the off-canvas table panel opens on TAP, not hover =====
   The auto-hide `.tablesbar` is a desktop hover paradigm: it parks off-screen
   behind a ~56px "Mesas" edge pill revealed on :hover, which touch can't do —
   on a phone that pill was an invisible ghost. So on phones we keep it fully
   off-screen by DEFAULT (no pill, no chevron, no hover-reveal, no tap-overlay)
   and open it with a deliberate tap on the topbar "📋 Lista" button, which
   adds `.is-open` (OpenTablesList → JS). tablesbar.js already closes it on
   outside-tap / swipe-right / Esc. The `body:not(.reserva-modal-open)` guard
   lets the reserva-modal transform-neutralise above still win while a reserva
   modal is open (so its fixed modal escapes to the viewport as before). */
@media (max-width: 600px) {
    /* Closed: fully off-screen — covers the default, :hover and :focus-within
       states (the `:not(.is-open)` makes this mutually exclusive with the open
       rule below, so a deliberate tap can still reveal it). */
    body:not(.reserva-modal-open) .page.with-tables.tables-auto .tablesbar:not(.is-open),
    body:not(.reserva-modal-open) .page.with-tables.tables-auto .tablesbar:hover:not(.is-open),
    body:not(.reserva-modal-open) .page.with-tables.tables-auto .tablesbar:focus-within:not(.is-open) {
        transform: translateX(100%) !important;
        box-shadow: none !important;
    }

    /* Opened by the 📋 Lista button: slide fully in as a near-full drawer,
       leaving a ~12vw strip of the POS to tap (or swipe right) to close. */
    body:not(.reserva-modal-open) .page.with-tables.tables-auto .tablesbar.is-open {
        transform: translateX(0) !important;
        width: 88vw !important;
        max-width: 88vw !important;
        box-shadow: -16px 0 48px rgba(0, 0, 0, .45) !important;
    }

    /* Kill the edge pill / chevron / swipe-hint pseudo-elements and the
       collapsed tap-overlay so nothing lingers or catches touches — the panel
       is opened only via the explicit Lista button. */
    .page.with-tables.tables-auto .tablesbar::before,
    .page.with-tables.tables-auto .tablesbar::after {
        display: none !important;
    }
    .page.with-tables.tables-auto .tablesbar .collapsed-click-overlay {
        display: none !important;
        pointer-events: none !important;
    }
}

.page.with-tables.tables-auto .main {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========== DOCKED: grid layout, kill legacy pushes ========== */
.page.with-tables.tables-docked {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 360px !important; /* content | panel */
    min-height: 100vh;
}

    .page.with-tables.tables-docked > .main {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        min-width: 0;
    }

    .page.with-tables.tables-docked > .tablesbar {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: sticky !important;
        top: 0 !important;
        height: 100vh;
        transform: none !important;
        box-shadow: none !important;
        border-left: 1px solid #e5e7eb !important;
    }

    /* neutralize any sidebar/tablesbar hover “push” leftovers */
    .page.with-tables.tables-docked .sidebar:hover ~ .main {
        margin-left: 0 !important;
    }

    .page.with-tables.tables-docked .tablesbar:hover ~ .main {
        margin-right: 0 !important;
    }



/* --- Auto-hide handle: make the edge obviously interactive --- */
:root {
    --hot-edge: 48px; /* Increased from 40px for better touch targets (Apple recommends 44px min) */
}
/* visible slice when hidden */

.page.with-tables.tables-auto .tablesbar {
    /* already overlaying and translated — keep your current values */
    border-left:double !important; /* we draw our own strip */
    z-index: 120 !important; /* above headers/footers */
}

    /* Vertical branded strip with label */
    .page.with-tables.tables-auto .tablesbar::before {
        content: "Mesas";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) rotate(180deg); /* read bottom→top */
        writing-mode: vertical-rl;
        width: var(--hot-edge);
        padding: 8px 0;
        text-align: center;
        font-weight: 900;
        letter-spacing: .02em;
        color: #fff;
        background: var(--brand, #c62828);
        border-radius: 10px 0 0 10px;
        box-shadow: -12px 0 30px rgba(0,0,0,.18);
        pointer-events: none; /* hover still targets the aside */
    }

    /* Chevron “nudge” */
    .page.with-tables.tables-auto .tablesbar::after {
        content: "‹";
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        font-weight: 900;
        color: #fff;
        opacity: .95;
        animation: edge-wiggle 1.4s ease-in-out 2; /* two gentle wiggles on load */
        pointer-events: none;
        transition: opacity .18s ease;
    }

    /* Auto-hide both pseudo-decorations once the panel slides into
       view. The pill + chevron are wayfinding for the COLLAPSED
       state — when the panel is open they overlap the panel content
       and add visual noise. Fade them out on hover; they slide
       back when the panel retracts. */
    .page.with-tables.tables-auto .tablesbar::before {
        transition: opacity .18s ease;
    }
    .page.with-tables.tables-auto .tablesbar:hover::before,
    .page.with-tables.tables-auto .tablesbar:hover::after,
    .page.with-tables.tables-auto .tablesbar:focus-within::before,
    .page.with-tables.tables-auto .tablesbar:focus-within::after {
        opacity: 0;
    }

@keyframes edge-wiggle {
    0%,100% {
        transform: translateY(-50%) translateX(0);
    }

    40% {
        transform: translateY(-50%) translateX(-4px);
    }

    70% {
        transform: translateY(-50%) translateX(0);
    }
}

/* On hover, calm the chevron */
.page.with-tables.tables-auto .tablesbar:hover::after {
    animation: none;
}



/* --- Config (shared) --- */
:root {
    --tablesbar-w: 360px;
    --hot-edge: 48px; /* Increased for better touch targets */
}
/* 48px visible when hidden */

/* Unify transform with variables (keeps your current behavior) */
.page.with-tables.tables-auto .tablesbar {
    width: var(--tablesbar-w) !important;
    transform: translateX(calc(var(--tablesbar-w) - var(--hot-edge))) !important;
    z-index: 120 !important;
}

    /* Make the pointer (chevron) loud and clear */
    .page.with-tables.tables-auto .tablesbar::after {
        color: #FACC15; /* yellow/amber */
        text-shadow: 0 1px 2px rgba(0,0,0,.35);
    }




/* === Right edge polish (hot-edge label, chevron, and close) === */
:root {
    --tablesbar-w: 360px;
    --hot-edge: 48px; /* Increased for better touch targets */
}

.page.with-tables.tables-auto .tablesbar {
    /* overlay, visible strip, and a clear border so it looks like a panel */
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--tablesbar-w) !important;
    transform: translateX(calc(var(--tablesbar-w) - var(--hot-edge))) !important;
    border-left: 1px solid #e5e7eb !important;
    box-shadow: -12px 0 30px rgba(0,0,0,.18);
    z-index: 120 !important;
}

    /* Vertical “Mesas” strip */
    .page.with-tables.tables-auto .tablesbar::before {
        content: "Mesas";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
        writing-mode: vertical-rl;
        width: var(--hot-edge);
        padding: 8px 0;
        text-align: center;
        font-weight: 900;
        letter-spacing: .02em;
        color: #fff;
        background: var(--brand, #c62828);
        border-radius: 10px 0 0 10px;
        box-shadow: -12px 0 30px rgba(0,0,0,.18);
        pointer-events: none; /* don't block hover */
    }

    /* Chevron pointer */
    .page.with-tables.tables-auto .tablesbar::after {
        content: "‹";
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        font-weight: 900;
        color: #FACC15;
        text-shadow: 0 1px 2px rgba(0,0,0,.35);
        pointer-events: none;
        transition: opacity .18s ease;
    }

    /* Same auto-hide-on-hover as the earlier definition. Specificity
       is identical so this just reinforces the fade across both
       declarations. */
    .page.with-tables.tables-auto .tablesbar::before {
        transition: opacity .18s ease;
    }
    .page.with-tables.tables-auto .tablesbar:hover::before,
    .page.with-tables.tables-auto .tablesbar:hover::after,
    .page.with-tables.tables-auto .tablesbar:focus-within::before,
    .page.with-tables.tables-auto .tablesbar:focus-within::after {
        opacity: 0;
    }

    /* Close button sits ABOVE the chevron on the strip */
    .page.with-tables.tables-auto .tablesbar .edge-dismiss {
        position: absolute;
        left: 8px; /* inside the colored strip */
        top: calc(50% - 28px); /* ~28px above the chevron */
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        line-height: 1;
        font-weight: 900;
        color: #fff;
        border: 1px solid rgba(255,255,255,.75);
        border-radius: 999px;
        background: rgba(255,255,255,.15);
        z-index: 2; /* above ::after chevron */
    }

    /* Hide the little × while the panel is open to avoid jumpiness */
    .page.with-tables.tables-auto .tablesbar:hover .edge-dismiss {
        opacity: 0;
        pointer-events: none;
    }

/* Docked mode: no hot-edge UI at all */
.page.with-tables.tables-docked .tablesbar::before,
.page.with-tables.tables-docked .tablesbar::after,
.page.with-tables.tables-docked .edge-dismiss {
    display: none !important;
}
/* ===== Right panel (AUTO-HIDE) — border + hidden-state gap ===== */
:root{
  /* tune these quickly */
  --edge-border: #ef4444;          /* border color for the panel (rose-500) */
  --edge-gap: 8px;                 /* visual space when hidden */
  --edge-gap-color: #fff;          /* usually your page/content bg */
}

/* Base overlay panel */
.page.with-tables.tables-auto .tablesbar{
  border-left: 0.30px ridge var(--edge-border) !important;  /* clearer, branded edge */
  box-shadow: -12px 0 30px rgba(0,0,0,.18);              /* existing shadow */
}

/* When NOT open (not hovered), paint a thin 'gutter' to the left.
   This is a visual gap only; it doesn't push layout. */
.page.with-tables.tables-auto .tablesbar:not(:hover){
  box-shadow:
    /* the faux gap drawn to the left of the panel */
    calc(-1 * var(--edge-gap)) 0 0 0 var(--edge-gap-color),
    -12px 0 30px rgba(0,0,0,.18);
}

/* Optional: soften the hot-edge label’s radius so the gap reads nicer */
.page.with-tables.tables-auto .tablesbar::before{
  border-radius: 20px 0 0 20px !important;
}


/* Tiny right gutter so POS content never touches the Tables edge */
:root {
    --pos-gutter: 16px;
}
/* tweak to taste */

.page.with-tables .main {
    padding-right: var(--pos-gutter) !important;
}

/* content--full zeroes padding, so override just the right side */
.page.with-tables .content--full {
    padding-right: var(--pos-gutter) !important;
}

/* keep the gutter even while the panel is hovered/open in auto mode */
.page.with-tables.tables-auto .tablesbar:hover ~ .main {
    padding-right: var(--pos-gutter) !important;
}

/* Optional: a bit smaller on narrow screens */
@media (max-width: 920px) {
    :root {
        --pos-gutter: 8px;
    }
}

/* Dark theme (applies when <html data-theme="dark">) */
:root[data-theme="dark"] {
    --bg: #0f1117;
    --card: #151a22;
    --ink: #e5e7eb;
    --muted: #94a3b8;
    /* keep your brand */
    --brand: #c62828;
    --brand-dark: #8e0000;
}

/* WCAG AA fix (axe-confirmed): #64748b muted text on dark panels measured
   ~3.66–3.72:1, under the 4.5:1 minimum. Lift the POS topbar role label and the
   tables-panel meta chips to slate-400 (~6:1). Scoped to the two flagged
   selectors so other (light-background) #64748b uses are untouched. */
:root[data-theme="dark"] header .muted,
:root[data-theme="dark"] .meta-chip {
    color: #94a3b8;
}

    /* Optional polish for common elements that used hardcoded light colors */
    :root[data-theme="dark"] .grid,
    :root[data-theme="dark"] .summary,
    :root[data-theme="dark"] .actions,
    :root[data-theme="dark"] .filters,
    :root[data-theme="dark"] .bottombar,
    :root[data-theme="dark"] .topbar {
        background: var(--card);
        color: var(--ink);
        border-color: #222831;
    }

    :root[data-theme="dark"] .btn {
        background: #1e2631;
        color: var(--ink);
        border: 1px solid #2b3340;
    }

        :root[data-theme="dark"] .btn:hover {
            filter: brightness(1.05);
        }

    :root[data-theme="dark"] .chip {
        background: #141922;
        border-color: #2b3340;
        color: var(--ink);
    }

    :root[data-theme="dark"] .tile {
        background: #141922;
        border: 1px solid #2b3340;
    }

    :root[data-theme="dark"] .search {
        background: #141922;
        border-color: #2b3340;
    }

    :root[data-theme="dark"] .modal-card {
        background: #151a22;
        color: var(--ink);
    }



    /* Fix balance/total contrast in dark mode — scoped to the two admin
       reports/purchasing surfaces that actually want the white pill
       (SupplierAnalytics, AutoPurchaseOrders). The previous unscoped `.total`
       selector leaked white slabs onto EVERY element with a `total` class
       app-wide: admin online-order cards, customer checkout/QR/invoice totals,
       the order sheet. Those surfaces are dark by design and now keep their
       own styling. */
    :root[data-theme="dark"] .analytics-container .total,
    :root[data-theme="dark"] .auto-po-container .total {
        background: #ffffff; /* clear white pill */
        color: #0f172a; /* near-black text */
        border: 1px solid #e2e8f0; /* subtle edge so it reads on dark UI */
    }

    /* If you also show totals in the right panel list */
    :root[data-theme="dark"] .edge-total {
        background: #ffffff;
        color: #0f172a;
      /*  color: #111827 !important;  almost black */

        border: 1px solid #e2e8f0;
    }


/* =================== TABLES PANEL — POLISH & OVERRIDES =================== */
/* Scope to the right panel so we don't change other pages */
.page.with-tables .tablesbar .tables-nav-scrollable {
    padding: 10px;
}

    /* 1) Edge‑to‑edge list (remove side gap) */
    .page.with-tables .tablesbar .tables-nav-scrollable > .edge-list {
        /* cancel the panel's 10px inner padding only for the list */
        margin-inline: 0px !important;
        margin-right: 2px !important;
        padding-inline: 0;
        gap: 0; /* no vertical gaps; just use a divider per row */
    }

/* Keep the card look only for GRID mode */
.page.with-tables .tablesbar .edge-list.grid {
    margin-inline: 0;
    padding: 8px 12px;
    gap: .5rem;
}

/* 2) Row: borderless left/right, only a bottom divider; make the pill flush */
.page.with-tables .tablesbar .edge-list:not(.grid) .edge-row {
    border: 0; /* kill the 1px card border */
    border-radius: 0; /* no rounded corners in list mode */
    background: transparent; /* blend with panel background */
    padding: 10px 0 10px 12px; /* <-- no right padding so the pill can “kiss” the edge */
    border-bottom: 1px dashed #eee;
}

    /* Total pill sits flush with the panel edge but keeps inner padding.
       Top-aligned (align-self) so the € amount lines up with the "Mesa N"
       hero text instead of vertically centering across the 2-row main
       block (hero + seats meta) — pre-fix the pill drifted down to the
       midpoint of the row, which on rows where the meta line wrapped
       made the total feel like a third row equal in importance to the
       seat count. Reading priority is: name → total → meta. */
    .page.with-tables .tablesbar .edge-list:not(.grid) .edge-row .edge-total {
        padding-right: 12px; /* readability against the panel border */
        align-self: flex-start;
        margin-top: 2px;
    }

/* 3) Tabs: clean underline style (no rounded badges) */
.page.with-tables .tablesbar .edge-tabs {
    border-bottom: 1px solid #eee;
    padding: 6px 12px;
    gap: 8px;
}

.page.with-tables .tablesbar .edge-tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0; /* neutralize earlier “pill” rules */
    padding: 6px 2px;
    font-weight: 800;
    color: #374151;
}

    .page.with-tables .tablesbar .edge-tab.active {
        color: #0ea5e9;
        border-bottom-color: currentColor;
    }

    .page.with-tables .tablesbar .edge-tab .tab-badge {
        font-size: .72rem;
        color: #64748b;
        font-weight: 600;
    }

/* 4) Filters: compact, always horizontal; chips can scroll if many */
.page.with-tables .tablesbar .edge-filters {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px dashed #eee;
}

    .page.with-tables .tablesbar .edge-filters .filter-left {
        display: flex;
        gap: 6px;
        overflow: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

        .page.with-tables .tablesbar .edge-filters .filter-left::-webkit-scrollbar {
            display: none;
        }

    .page.with-tables .tablesbar .edge-filters .filter-right {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .page.with-tables .tablesbar .edge-filters .edge-input {
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
        font-size: 0.75rem;
        background: #fff;
    }

    .page.with-tables .tablesbar .edge-filters .edge-search--compact {
        width: 80px;
        text-align: center;
    }

    .page.with-tables .tablesbar .edge-filters .edge-search--compact:focus {
        width: 150px;
    }

    .page.with-tables .tablesbar .edge-filters .edge-select {
        height: 44px;
        line-height: 44px;
        padding: 0 2.2rem 0 1rem;
        border-radius: 14px;
        border: none;
        font-size: 0.9rem;
        font-weight: 700;
        /* Combine arrow + gradient in single background declaration */
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234b5563' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 12px,
            linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        transition: all 0.15s ease;
    }

    .page.with-tables .tablesbar .edge-filters .edge-select:hover {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234b5563' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 12px,
            linear-gradient(180deg, #fff 0%, #e2e8f0 100%);
        box-shadow: 0 3px 10px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,1);
    }

    :root[data-theme="dark"] .page.with-tables .tablesbar .edge-filters .edge-input,
    :root[data-theme="dark"] .page.with-tables .tablesbar .edge-filters .edge-select {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 12px,
            linear-gradient(180deg, #374151 0%, #1f2937 100%);
        border: none;
        color: #f3f4f6;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    }

    :root[data-theme="dark"] .page.with-tables .tablesbar .edge-filters .edge-select:hover {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 12px,
            linear-gradient(180deg, #4b5563 0%, #374151 100%);
        box-shadow: 0 3px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
    }

    /* Dark mode dropdown options - ensure readable text */
    :root[data-theme="dark"] .page.with-tables .tablesbar .edge-filters .edge-select option {
        background: #1f2937;
        color: #f3f4f6;
    }

.page.with-tables .tablesbar .chip {
    padding: .22rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
}

/* Header title row with search input */
.page.with-tables .tablesbar .edge-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
}

.page.with-tables .tablesbar .edge-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.page.with-tables .tablesbar .edge-table-search {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    color: inherit;
    transition: width 0.15s ease, background 0.15s ease;
    text-align: center;
    flex-shrink: 0;
}

.page.with-tables .tablesbar .edge-table-search:focus,
.page.with-tables .tablesbar .edge-table-search:not(:placeholder-shown) {
    width: 32px;
    max-width: 32px;
    text-align: center;
    padding: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(14, 165, 233, 0.5);
    outline: none;
}

/* Prevent header buttons from being pushed off screen */
.page.with-tables .tablesbar .edge-header .edge-actions {
    flex-shrink: 0;
}

.page.with-tables .tablesbar .edge-table-search::placeholder {
    opacity: 0.6;
}

.page.with-tables .tablesbar .edge-search-clear {
    display: none; /* Hidden - input too small for clear button */
}

/* Clear button hover removed - button hidden */

/* Table Search Button in Header */
.page.with-tables .tablesbar .edge-search-btn {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 1.25rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}

.page.with-tables .tablesbar .edge-search-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.page.with-tables .tablesbar .edge-search-btn:active {
    background: rgba(14, 165, 233, 0.3);
    transform: scale(0.95);
}

/* New feature badge on search button */
.page.with-tables .tablesbar .edge-search-btn.has-hint {
    animation: pulse-hint 2s ease-in-out infinite;
}

.page.with-tables .tablesbar .edge-search-btn .new-feature-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    padding: 2px 5px;
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    animation: badge-bounce 1s ease-in-out infinite;
}

@keyframes pulse-hint {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(14, 165, 233, 0); }
}

@keyframes badge-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Search button wrapper for tooltip positioning */
.page.with-tables .tablesbar .edge-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Feature discovery tooltip */
.page.with-tables .tablesbar .feature-tooltip {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 240px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: tooltip-appear 0.3s ease-out;
}

.page.with-tables .tablesbar .feature-tooltip-arrow {
    position: absolute;
    top: -8px;
    left: 14px;
    width: 16px;
    height: 16px;
    background: #1e40af;
    transform: rotate(45deg);
    border-radius: 3px;
}

.page.with-tables .tablesbar .feature-tooltip-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 6px;
}

.page.with-tables .tablesbar .feature-tooltip-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    margin-bottom: 12px;
}

.page.with-tables .tablesbar .feature-tooltip-dismiss {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.page.with-tables .tablesbar .feature-tooltip-dismiss:hover {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes tooltip-appear {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Feature tooltip responsive - hide on very small screens or collapsed panel */
@media (max-width: 500px) {
    .page.with-tables .tablesbar .feature-tooltip {
        display: none; /* Too cramped on mobile - badge is enough */
    }
}

/* Table Search Modal */
.table-search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
}

.table-search-modal {
    position: fixed;
    top: 60px;
    right: 60px; /* Default: auto-hide mode position */
    transform: none;
    width: 360px;
    max-height: calc(100vh - 100px);
    background: var(--surface-card, #1e293b);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #f1f5f9; /* Light text for dark mode */
}

/* Hide modals when panel is collapsed in AUTO-HIDE mode only */
/* This prevents orphaned modals when panel auto-closes and fixes double-tap issue */
/* ONLY applies to .tables-auto - docked mode doesn't need this */
.page.with-tables.tables-auto .tablesbar:not(.is-open) .table-search-backdrop,
.page.with-tables.tables-auto .tablesbar:not(.is-open) .table-search-modal,
.page.with-tables.tables-auto .tablesbar:not(.is-open) .pax-modal-backdrop,
.page.with-tables.tables-auto .tablesbar:not(.is-open) .pax-modal {
    display: none !important;
}

/* Mouse/trackpad devices: allow modal to show when hovering (for CSS auto-hide mode) */
@media (hover: hover) and (pointer: fine) {
    .page.with-tables.tables-auto .tablesbar:not(.is-open):hover .table-search-backdrop,
    .page.with-tables.tables-auto .tablesbar:not(.is-open):hover .table-search-modal,
    .page.with-tables.tables-auto .tablesbar:not(.is-open):hover .pax-modal-backdrop,
    .page.with-tables.tables-auto .tablesbar:not(.is-open):hover .pax-modal {
        display: block !important;
    }
    .page.with-tables.tables-auto .tablesbar:not(.is-open):hover .table-search-modal {
        display: flex !important;
    }
}

/* Docked mode: position next to the always-visible panel */
.table-search-modal.modal-docked {
    right: 380px;
}

/* Auto-hide mode: position at right edge */
.table-search-modal.modal-auto {
    right: 60px;
}

/* Responsive: smaller screens - full width bottom sheet style */
@media (max-width: 768px) {
    .table-search-modal {
        top: auto;
        bottom: 10px;
        left: 10px;
        right: 10px !important;
        width: auto;
        max-height: 60vh;
    }

    .table-search-modal.modal-docked,
    .table-search-modal.modal-auto {
        right: 10px !important;
    }
}

/* Medium screens */
@media (max-width: 1024px) and (min-width: 769px) {
    .table-search-modal {
        width: 340px;
    }

    .table-search-modal.modal-docked {
        right: 380px;
    }

    .table-search-modal.modal-auto {
        right: 60px;
    }
}

.tsm-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tsm-input {
    flex: 1;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9; /* Explicit white text - inherit can be overridden by browser defaults */
    font-size: 1rem;
}

.tsm-input::placeholder {
    color: rgba(241, 245, 249, 0.5);
}

.tsm-input:focus {
    outline: none;
    border-color: rgba(14, 165, 233, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.tsm-close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 1.25rem;
    color: inherit;
    cursor: pointer;
}

.tsm-close:hover {
    background: rgba(239, 68, 68, 0.3);
}

.tsm-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.tsm-empty {
    padding: 24px;
    text-align: center;
    opacity: 0.6;
}

.tsm-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px; /* Larger touch target for easier selection */
    padding: 14px 16px;
    margin-bottom: 6px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, transform 0.1s ease;
}

.tsm-result:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tsm-result:active {
    transform: scale(0.98);
    background: rgba(14, 165, 233, 0.2);
}

.tsm-result.selected {
    background: rgba(14, 165, 233, 0.2);
    border: 1px solid rgba(14, 165, 233, 0.4);
}

.tsm-result.occupied {
    border-left: 4px solid #ef4444; /* Red for occupied, matching TableSlidePanel */
}

.tsm-table-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.tsm-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: #f1f5f9; /* Explicit light color for dark mode */
}

.tsm-zone {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}

.tsm-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tsm-amount {
    font-weight: 600;
    color: #22c55e;
}

.tsm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444; /* Red for occupied */
}

/* QWERTY Keyboard for Table Search */
.tsm-keyboard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tsm-keyboard.qwerty {
    /* Full QWERTY layout */
}

.tsm-kb-row {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.tsm-kb-row.numbers {
    gap: 2px;
}

.tsm-kb-row.bottom {
    margin-top: 2px;
}

.tsm-key {
    min-width: 28px;
    height: 36px;
    padding: 0 6px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s ease;
    flex-shrink: 0;
}

.tsm-kb-row.numbers .tsm-key {
    min-width: 30px;
    font-size: 0.9rem;
}

.tsm-key:hover {
    background: rgba(255, 255, 255, 0.18);
}

.tsm-key:active {
    background: rgba(14, 165, 233, 0.4);
    transform: scale(0.95);
}

.tsm-key.wide {
    min-width: 50px;
}

.tsm-key.backspace {
    font-size: 1rem;
    min-width: 44px;
}

.tsm-key.clear {
    font-size: 0.7rem;
    min-width: 50px;
    background: rgba(239, 68, 68, 0.2);
}

.tsm-key.clear:hover {
    background: rgba(239, 68, 68, 0.35);
}

.tsm-key.space {
    flex: 1;
    max-width: 200px;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.tsm-key.accent {
    background: rgba(14, 165, 233, 0.15);
}

/* Responsive keyboard for smaller screens */
@media (max-width: 768px) {
    .tsm-keyboard {
        padding: 6px;
        gap: 3px;
    }

    .tsm-kb-row {
        gap: 2px;
    }

    .tsm-key {
        min-width: 24px;
        height: 32px;
        font-size: 0.8rem;
        padding: 0 4px;
    }

    .tsm-kb-row.numbers .tsm-key {
        min-width: 26px;
    }

    .tsm-key.backspace {
        min-width: 38px;
    }
}

/* Keyboard toggle button in input */
.tsm-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
}

.tsm-input-wrapper .tsm-input {
    padding-right: 40px;
}

.tsm-keyboard-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 6px;
}

.tsm-keyboard-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.tsm-keyboard-toggle.active {
    color: #0ea5e9;
}

/* Zone pills spacing - more touch-friendly gap */
.page.with-tables .tablesbar .edge-tabs--zones {
    gap: 10px !important;
    padding: 8px 12px !important;
}

/* 5) Give the label more room: meta (timer/pax) drops under it on tight widths */
.page.with-tables .tablesbar .edge-list:not(.grid) .edge-row {
    display: grid;
    grid-template-columns: 12px 1fr auto; /* dot | label | total */
    grid-template-rows: auto auto; /* second line for tiny meta */
    column-gap: .55rem;
}

    .page.with-tables .tablesbar .edge-list:not(.grid) .edge-row > .dot {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .page.with-tables .tablesbar .edge-list:not(.grid) .edge-row > .edge-label {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 800;
    }

    .page.with-tables .tablesbar .edge-list:not(.grid) .edge-row > .edge-time,
    .page.with-tables .tablesbar .edge-list:not(.grid) .edge-row > .edge-pax {
        grid-column: 2;
        grid-row: 2;
        margin-top: 2px; /* tiny second line */
    }

    .page.with-tables .tablesbar .edge-list:not(.grid) .edge-row > .edge-total {
        grid-column: 3;
        grid-row: 1 / span 2; /* keeps pill vertical center */
    }

/* Optional: on very narrow screens hide the timer to prioritize names */
@media (max-width: 380px) {
    .page.with-tables .tablesbar .edge-list:not(.grid) .edge-row > .edge-time {
        display: none;
    }
}

/* (Optional) Slightly wider docked panel if you want more breathing room */
/* .page.with-tables.tables-docked{ grid-template-columns: minmax(0,1fr) 380px !important; }
    .page.with-tables.tables-docked .tablesbar{ width: 380px !important; } */

/* === POS layout guardrails (tables auto-hide) === */
:root {
    --tablesbar-w-default: 360px;
}

/* REMOVED: hover-edge is no longer used - sidebar overlays content
.page.has-edge.with-tables.tables-auto .main {
    margin-left: 40px !important;
    margin-right: var(--pos-gutter, 16px) !important;
}

.page.has-edge.with-tables.tables-auto .sidebar:hover ~ .main {
    margin-left: 40px !important;
} */

/* Keep right gutter for tables panel */
.page.has-edge.with-tables.tables-auto .main {
    margin-left: 0 !important;
    margin-right: var(--pos-gutter, 16px) !important;
}

/* Tables panel hover/focus/tap overlays the POS; no horizontal push */
.page.with-tables.tables-auto .tablesbar:hover ~ .main,
.page.with-tables.tables-auto .tablesbar:focus-within ~ .main,
.page.with-tables.tables-auto .tablesbar.is-open ~ .main {
    margin-right: var(--pos-gutter, 16px) !important;
}

/* Docked mode: use grid columns, no extra margins/push */
.page.with-tables.tables-docked {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) var(--tablesbar-w, 360px) !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important; /* no left gap - sidebar overlays */
}

.page.has-edge.with-tables.tables-docked .main {
    grid-column: 1 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Remove padding/gutters while docked so POS can span its column fully */
.page.with-tables.tables-docked .main,
.page.with-tables.tables-docked .content--full {
    padding: 0 !important;
}

/* Final docked overrides: explicit 3-column grid (40px edge | POS | tables) */
.page.with-tables.tables-docked {
    grid-template-columns: minmax(0,1fr) var(--tablesbar-w, 360px) !important;
}

.page.with-tables.tables-docked > .main {
    grid-column: 1 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.page.with-tables.tables-docked > .tablesbar {
    grid-column: 2 !important;
    position: sticky !important;
    top: 0 !important;
    height: 100vh;
    transform: none !important;
    box-shadow: none !important;
    border-left: 1px solid #e5e7eb !important;
}

/* --- FINAL DOCKED LAYOUT GUARDRAILS --- */
.page.with-tables.tables-docked {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) var(--tablesbar-w, 360px) !important;
    padding-left: 0 !important; /* no left gap - sidebar overlays */
    width: auto !important;
    max-width: none !important;
    min-height: 100vh;
}

.page.with-tables.tables-docked > .main {
    grid-column: 1 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.page.has-edge.with-tables.tables-docked .main {
    margin: 0 !important;
}

.page.with-tables.tables-docked > .tablesbar {
    grid-column: 2 !important;
    width: var(--tablesbar-w, 360px) !important;
    position: sticky !important;
    top: 0 !important;
    height: 100vh;
    transform: none !important;
    box-shadow: none !important;
    border-left: 1px solid #e5e7eb !important;
}


/* POS — basket rows (right column) */
:root {
    /* widths are tuned so “−  1  +” never wraps */
    --col-qty: 116px; /* 34 + 36 + 34 + gaps */
    --col-total: 96px; /* total price */
    --col-btn: 34px; /* width/height for ⋯ and 🗑 */
    --gap: 6px;
    --ink: #1f2937;
}

/* one row = info | qty | total | ⋯ | 🗑  */
.summary .line {
    display: grid;
    grid-template-columns: 1fr var(--col-qty) var(--col-total) var(--col-btn) var(--col-btn);
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

    /* left block */
    .summary .line .info {
        min-width: 0;
    }

        .summary .line .info .name {
            font-weight: 800;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* hide the redundant unit price on the left */
        .summary .line .info .muted {
            display: none;
        }

/* quantity cluster (never wraps) */
.summary .qty {
    display: grid;
    grid-template-columns: 34px 36px 34px; /* − | count | + */
    gap: var(--gap);
    align-items: center;
    justify-self: end;
}

    .summary .qty button {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid #ececec;
        background: #fff;
        display: grid;
        place-items: center;
    }

    .summary .qty .count {
        min-width: 36px;
        text-align: center;
        font-weight: 800;
    }

/* total (right‑aligned) */
.summary .line-total {
    justify-self: end;
    width: var(--col-total);
    text-align: right;
    white-space: nowrap;
    font-weight: 900;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1,"lnum" 1;
}

/* action buttons aligned all the way right */
.summary .more, .summary .trash {
    justify-self: end;
    width: var(--col-btn);
    height: var(--col-btn);
    border-radius: 8px;
    border: 1px solid #f3f4f6;
    background: #fff;
    display: grid;
    place-items: center;
}

    .summary .trash:hover {
        background: #fee2e2;
        border-color: #fecaca;
        color: #b91c1c;
    }

/* ===== Go-to-top button positioning when tables panel is docked ===== */
.page.with-tables.tables-docked .go-to-top {
    right: calc(var(--tablesbar-w, 360px) + 44px);
}

/* =============================================
   SIDEBAR TAP-TO-TOGGLE (Touch-friendly)
   ============================================= */

/* Hamburger toggle button */
.sidebar-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 60;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f1f3b 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.sidebar-toggle:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e3a5f 100%);
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

.sidebar-toggle:active {
    transform: scale(0.95);
}

/* Hamburger icon with animation */
.sidebar-toggle-icon {
    width: 20px;
    height: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebar-toggle-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform .2s ease, opacity .2s ease;
}

/* X animation when open */
.sidebar-toggle-icon.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.sidebar-toggle-icon.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.sidebar-toggle-icon.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Scrim overlay - always present for smooth fade in/out */
.sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    touch-action: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    pointer-events: none;
}

.sidebar-scrim.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Body scroll lock when sidebar is open */
.page.sidebar-open {
    overflow: hidden;
    height: 100vh;
}

.page.sidebar-open .main {
    overflow: hidden;
    pointer-events: none;
}

/* Sidebar: fully off-screen by default (no hot edge) */
.page.has-edge .sidebar {
    transform: translateX(-100%);
}

/* Open state: slide in */
.page.has-edge .sidebar.open {
    transform: translateX(0);
}

/* Remove hover behavior - tap only */
.page.has-edge .sidebar:hover {
    transform: translateX(-100%);
}

.page.has-edge .sidebar.open:hover {
    transform: translateX(0);
}

/* Main content: no margin needed since we don't have hot edge */
.page.has-edge .main {
    margin-left: 0 !important;
}

/* Don't push main when sidebar opens - it overlays */
.page.has-edge .sidebar:hover ~ .main,
.page.has-edge .sidebar.open ~ .main {
    margin-left: 0 !important;
}

.sidebar:hover ~ .main {
    margin-left: 0 !important;
}

/* Keep docked tables layout intact */
.page.with-tables.tables-docked {
    padding-left: 0 !important;
}

.page.with-tables.tables-auto > .main {
    margin-left: 0 !important;
}

/* Dark mode hamburger */
:root[data-theme="dark"] .sidebar-toggle {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

:root[data-theme="dark"] .sidebar-toggle:hover {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}

/* Dark mode scrim */
:root[data-theme="dark"] .sidebar-scrim {
    background: rgba(0,0,0,.6);
}

/* ========================================
   MOBILE / TABLET SIDEBAR IMPROVEMENTS
   ======================================== */
@media (max-width: 600px) {
    /* Wider sidebar on phone — easier to tap, more readable */
    .page.has-edge .sidebar {
        width: min(300px, 82vw);
    }

    /* Hamburger: slightly smaller on phone to avoid topbar collision */
    .sidebar-toggle {
        top: 8px;
        left: 8px;
        width: 38px;
        height: 38px;
        border-radius: 8px;
    }

    .sidebar-toggle-icon {
        width: 16px;
        height: 12px;
    }
}

/* iPad portrait - sidebar is fine at 260px */
@media (min-width: 601px) and (max-width: 1024px) {
    .sidebar-toggle {
        width: 40px;
        height: 40px;
    }
}

/* ============================================================
   IMPERSONATION BANNER — shift fixed-position UI down
   The .imp-banner is position:fixed at top:0 with z-index 10005,
   so any other fixed-positioned element with top:0..40px (sidebar
   toggle, printer banners, etc.) gets covered. When the banner is
   active we add 40px to their top offset so they sit below it.
   `body:has(.imp-banner)` is supported in all evergreen browsers.
   ============================================================ */
body:has(.imp-banner) .sidebar-toggle {
    top: 52px; /* default 12px + banner 40px */
}

/* Hide the global hamburger while the POS floor-plan overlay is open: it's a
   focused full-screen view with its own "×" close + restaurant name in the
   header, and the fixed hamburger otherwise overlaps that name (and tempts a
   mid-task nav that drops a sheet over the floor). Same approach as the editor
   route (HideSidebar) — just driven by the overlay's presence in the DOM. */
body:has(.tables-overlay) .sidebar-toggle {
    display: none;
}

@media (max-width: 600px) {
    body:has(.imp-banner) .sidebar-toggle {
        top: 48px; /* mobile default 8px + banner 40px */
    }
}

body:has(.imp-banner) .printer-offline-banner,
body:has(.imp-banner) .printer-config-banner {
    top: 40px;
}

/* ============================================================
   DISCOUNT + PIN MODALS — premium styling
   Kept in global site.css (not Pos.razor.css) so the cascade is
   not subject to Blazor CSS-isolation scoping attributes; the
   markup lives in Pos.razor but the styling must always resolve
   even when the scoped bundle is stale in the browser cache.
   ============================================================ */

/* Backdrop — subtle blur for premium depth. Scoped to only these two
   modals via a .disc-backdrop class so we don't blur every modal in the
   POS. backdrop-filter is widely supported (Safari/Chrome/Firefox 2023+)
   and gracefully degrades to a semi-transparent black on older browsers. */
.modal-backdrop.disc-backdrop {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Shared card shell --------------------------------------------------- */

.modal-card.discount-modal {
    /* Wider card hosts the two-column body layout (input | summary) so the
       modal fits laptop screens without vertical scroll. Falls back to 95vw
       on narrow screens via the media query at the bottom of this block.

       Vertical flex column + max-height 92vh + scrollable body: on shorter
       restaurant-terminal screens (~720-800px tall) the modal no longer
       overflows the viewport. Previously `align-items:center` on the
       .modal-root flex parent left the top half of the hero clipped above
       the window edge (position:fixed parents can't scroll up). Now the
       hero and actions stay pinned; only .disc-body scrolls if needed. */
    width: 720px;
    max-width: 95vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    text-align: left;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(15, 23, 42, 0.06);
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.modal-card.pin-modal {
    /* PIN modal stays single-column (there's no summary to flank) — keep
       the original width so dots + keypad read as one compact surface.
       Same flex-column + max-height pattern as discount modal so the PIN
       keypad also degrades gracefully on short viewports. */
    width: 460px;
    max-width: 95vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    text-align: left;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(15, 23, 42, 0.06);
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="dark"] .modal-card.discount-modal,
:root[data-theme="dark"] .modal-card.pin-modal {
    background: #0f172a;
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* Hero — gradient band, icon badge, title, hero amount ---------------- */

/* Hero padding trimmed ~25% from the original (32/24 → 22/18). Codex flagged
   the original as too tall for a task modal; the reduction lets the working
   area (toggles, summary, keypad) carry more of the visual weight and reads
   as restrained premium rather than "marketing banner on top of a form".

   flex-shrink: 0 keeps the hero at its natural height when the modal card
   is in flex-column mode (see .modal-card.discount-modal). Prevents the
   hero from being squashed on short viewports — the body scrolls instead. */
.disc-hero,
.pin-hero {
    position: relative;
    flex-shrink: 0;
    padding: 22px 28px 18px;
    color: #f8fafc;
    text-align: center;
    isolation: isolate;
}

/* Single-hue color story — emerald climbs into teal without the old
   cold-blue #0369a1 tail. Ties the hero to the A-pagar green so the
   whole modal reads as one product surface. */
.disc-hero {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #0f766e 100%);
}

.pin-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #111827 100%);
}

/* Gradient shine — diagonal highlight in the top-right quadrant plus a
   secondary lift at the bottom-left so the hero reads as a lit surface
   rather than a flat fill. Subtle enough not to tip into "loud" but
   present enough to feel physical. Sits behind everything via z-index -1. */
.disc-hero::after,
.pin-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 85% -20%, rgba(255, 255, 255, 0.28), transparent 55%),
        radial-gradient(ellipse at 10% 120%, rgba(0, 0, 0, 0.12), transparent 45%);
    pointer-events: none;
    z-index: -1;
}

/* Icon is a corner anchor (top-left), paired with the X close button
   in the top-right. Two fixed-position marks at the edges frame the
   centered title + amount stack — the "header moment" Codex flagged
   as missing. Smaller than the previous inline icon (36px vs 44px)
   because it's now a frame element, not a hero subject. */
.disc-hero-icon,
.pin-hero-icon {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Close X in hero top-right — affordance for operators who prefer a
   single decisive exit over backdrop-click or a bottom Cancelar. Sits
   above the radial-highlight pseudo-element so it stays legible. */
.disc-hero-close,
.pin-hero-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    appearance: none;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .14s ease;
    padding: 0;
}

.disc-hero-close:hover,
.pin-hero-close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}

.disc-hero-close:focus-visible,
.pin-hero-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.pin-hero-icon {
    color: #fde68a;
    background: rgba(253, 230, 138, 0.14);
}

.disc-hero-icon svg,
.pin-hero-icon svg {
    width: 18px;
    height: 18px;
}

/* Editorial serif display — Fraunces is now reserved for the hero moment
   only (title + gross amount). The summary numerals below switched to the
   sans body stack so the modal has ONE typographic voice per zone: serif
   = hero climax, sans = everything the operator interacts with. Previously
   the Descuento/A-pagar numerals were also Fraunces which created two
   competing "display moments" in one card. */
.disc-hero-title,
.pin-hero-title {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-variation-settings: "opsz" 120;
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: -0.005em;
    opacity: 0.95;
    margin: 0 0 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.disc-hero-gross {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-variation-settings: "opsz" 144;
    font-weight: 900;
    font-size: 2.35rem;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
    font-variant-numeric: tabular-nums;
}

/* Micro accent rule under the bruto — thin, short, centred. Reads as a
   frame element rather than a line break, tying the display amount to
   the subtitle. */
.disc-hero-gross::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    margin: 10px auto 0;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 2px;
}

.disc-hero-sub {
    margin: 10px 0 0;
    font-size: 0.74rem;
    font-weight: 600;
    opacity: 0.85;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pin-hero-sub {
    margin: 0;
    font-size: 0.92rem;
    opacity: 0.9;
}

.pin-hero-sub b {
    color: #fde68a;
    font-weight: 700;
}

/* Body section — generous breathing room ------------------------------ */

.pin-body {
    padding: 22px 24px 6px;
    /* Flex-column peer with .pin-hero / .pin-actions — body scrolls if the
       keypad + dots + error message don't fit on a short viewport. Same
       min-height:0 trick as .disc-body so the max-height constraint wins
       over intrinsic content sizing. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Two-column body grid — primary flow on the left (toggle → chips →
   summary → reason), keypad as a narrow fixed-width tool on the right.
   Previously the grid was 1fr | 1fr which cramped the A-pagar summary
   into ~300px; now the summary gets the flex column and the keypad a
   fixed 260px that matches the cell math (3 × ~75px + gaps). Grid
   collapses to one column under 700px via the media query below. */
.disc-body {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 0 28px;
    padding: 22px 24px 6px;
    position: relative;
    /* Body grows/shrinks between hero and actions; scrolls internally on
       short viewports. min-height:0 is the flex-child trick that lets the
       overflow constraint actually kick in (without it the intrinsic
       content height wins and the card overflows the max-height anyway). */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Divider between the two columns — thin vertical rule that fades at
   the edges so it reads as a column separator rather than a hard
   boundary. Pseudo-element so it doesn't add layout width. */
.disc-body::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 6px;
    right: calc(260px + 14px);
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.08) 15%, rgba(15, 23, 42, 0.08) 85%, transparent);
    pointer-events: none;
}

:root[data-theme="dark"] .disc-body::before {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08) 15%, rgba(255, 255, 255, 0.08) 85%, transparent);
}

.disc-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Center the keypad vertically against the taller primary column so
   the two columns read as balanced instead of the keypad hugging the
   top while the primary column carries all the weight below. */
.disc-col-keypad {
    justify-content: center;
}

/* Segmented toggle (%/€) — iOS-style sliding pill indicator ----------- */

.disc-seg {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 18px;
    isolation: isolate;
}

:root[data-theme="dark"] .disc-seg {
    background: rgba(255, 255, 255, 0.05);
}

/* Animated indicator that slides between the two segments. Driven by a
   data-mode attribute on .disc-seg so Blazor only toggles one attribute
   and the transition handles the rest. Spring-cubic-bezier for a snappy
   "click" feel rather than linear. */
.disc-seg::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background: #ffffff;
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.04);
    transition: transform .26s cubic-bezier(.32,.72,0,1);
    z-index: -1;
}

.disc-seg[data-mode="Fixed"]::before {
    transform: translateX(100%);
}

:root[data-theme="dark"] .disc-seg::before {
    background: #1e293b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.disc-seg-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: #64748b;
    padding: 9px 8px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

:root[data-theme="dark"] .disc-seg-btn {
    color: #94a3b8;
}

.disc-seg-btn:hover:not(.active) {
    color: #0f172a;
}

:root[data-theme="dark"] .disc-seg-btn:hover:not(.active) {
    color: #e2e8f0;
}

.disc-seg-btn.active {
    color: #0f172a;
}

:root[data-theme="dark"] .disc-seg-btn.active {
    color: #f8fafc;
}

.disc-seg-btn:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 1px;
    border-radius: 9px;
}

.disc-seg-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 900;
    background: rgba(15, 23, 42, 0.06);
    color: inherit;
}

.disc-seg-btn.active .disc-seg-glyph {
    background: #059669;
    color: #ffffff;
}

/* Big value display --------------------------------------------------- */

/* Entry echo — disappears entirely when empty (no "0" placeholder
   clutter). When a value has been typed it appears as a quiet inline
   confirmation, not a second numeric hero. Slides in with a short
   fade so it doesn't pop abruptly. The summary block below owns the
   climax ("A pagar"); this echo is purely a receipt of keystrokes. */
.disc-echo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 4px 0;
    margin-bottom: 16px;
    animation: disc-echo-in 0.18s ease-out both;
}

@keyframes disc-echo-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.disc-echo-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
}

:root[data-theme="dark"] .disc-echo-label {
    color: #64748b;
}

.disc-echo-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
    line-height: 1;
}

:root[data-theme="dark"] .disc-echo-val {
    color: #f1f5f9;
}

/* Matches .disc-currency weight/opacity so every € in the modal reads
   the same — hero, echo, and summary all use 600/0.55. */
.disc-echo-unit {
    font-weight: 600;
    opacity: 0.55;
    margin-left: 2px;
}

/* Preset % chips — pill row with clear selected state ----------------- */

/* Quick-pick grid — 6 chips in 2 rows of 3. Previously a single row of
   6 which read as overcrowded in the narrower column; the 2x3 arrangement
   gives each chip ~50% more width and makes 50% look composed instead
   of squeezed in at the end. Rarer values (30, 40, 75, 100) still go
   via the keypad. */
.disc-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.disc-chip {
    appearance: none;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    padding: 11px 0;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all .12s ease;
    font-variant-numeric: tabular-nums;
}

:root[data-theme="dark"] .disc-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

.disc-chip:hover {
    border-color: #059669;
    color: #059669;
}

.disc-chip:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

.disc-chip.active {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
}

/* Keypad — consistent grid rhythm, refined key surfaces --------------- */

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.keypad-key {
    appearance: none;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 16px 0;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .08s ease;
    font-variant-numeric: tabular-nums;
    touch-action: manipulation;
    user-select: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

:root[data-theme="dark"] .keypad-key {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

.keypad-key:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
}

:root[data-theme="dark"] .keypad-key:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
}

.keypad-key:active:not(:disabled) {
    transform: scale(0.96);
    background: #e2e8f0;
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.12);
}

:root[data-theme="dark"] .keypad-key:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.keypad-key:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.keypad-key:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 1px;
}

.keypad-key-alt {
    background: #f1f5f9;
    color: #64748b;
}

:root[data-theme="dark"] .keypad-key-alt {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

/* Delete gets a matching tinted surface so the two "special" keys read as
   a pair — one neutral (alt), one destructive (del). Previously del was an
   untinted red glyph against the default white surface, which felt
   asymmetric next to the grey-tinted alt key. */
.keypad-key-del {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fee2e2;
}

:root[data-theme="dark"] .keypad-key-del {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.25);
}

.keypad-key-del:hover:not(:disabled) {
    background: #fee2e2;
    border-color: #fecaca;
}

:root[data-theme="dark"] .keypad-key-del:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.35);
}

/* Summary block — strong visual weight, always visible ---------------- */

/* Currency symbol de-emphasis — the digits are the signal, the € is a
   label. Lowered weight + opacity so amounts read cleanly left-to-right
   instead of the symbol visually anchoring the end of every number. */
.disc-currency {
    font-weight: 600;
    opacity: 0.55;
    margin-left: 1px;
}

/* Summary — the visual climax of the modal. Two slots side-by-side:
   Descuento on the left, A pagar on the right with a thin vertical
   divider between them. Each slot stacks its uppercase label above
   the numeric amount. Previously two stacked rows inside a narrow
   card caused "A pagar 9,00 €" to break across two lines; horizontal
   slots give each amount the full half-width and guarantee a single
   clean line. Idle state gets a whisper-gradient (top-to-bottom
   subtle warm tint) so it doesn't read as a flat grey box. */
.disc-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background: linear-gradient(180deg, #fbfcfd 0%, #f4f6f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 18px;
    transition: background .2s ease, border-color .2s ease;
}

:root[data-theme="dark"] .disc-preview {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.disc-preview.live {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(15, 118, 110, 0.07));
    border-color: rgba(5, 150, 105, 0.3);
}

:root[data-theme="dark"] .disc-preview.live {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(15, 118, 110, 0.12));
    border-color: rgba(16, 185, 129, 0.4);
}

/* Horizontal slot: label above amount, stacked inside the slot. */
.disc-preview-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 2px 4px;
}

/* Vertical divider between the two slots — thin fading rule that
   echoes the body's column divider styling for visual continuity. */
.disc-preview-slot--total {
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    padding-left: 20px;
}

:root[data-theme="dark"] .disc-preview-slot--total {
    border-left-color: rgba(255, 255, 255, 0.1);
}

.disc-preview-label {
    color: #64748b;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

:root[data-theme="dark"] .disc-preview-label {
    color: #94a3b8;
}

/* Descuento is supporting info — sans body stack, medium weight, muted
   red. Previously Fraunces 800/1.35rem which competed with A pagar for
   eye-attention; demoted so the summary has a single climax. */
.disc-preview-neg {
    color: #b91c1c;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.005em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0.85;
}

:root[data-theme="dark"] .disc-preview-neg {
    color: #fca5a5;
    opacity: 0.8;
}

/* A pagar is THE climax. Sans body stack (not Fraunces — that voice is
   reserved for the hero), high weight, bumped up a hair so it reads as
   the summary's answer rather than a peer of Descuento. Never wraps. */
.disc-preview-pos {
    color: #047857;
    font-weight: 800;
    font-size: 2.05rem;
    letter-spacing: -0.022em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:root[data-theme="dark"] .disc-preview-pos {
    color: #34d399;
}

/* Reason — label + chips on their own line + optional input ---------- */

.disc-reason {
    margin-bottom: 18px;
}

/* Match the preview slot labels — one uppercase-caption style used
   consistently across the body sections so Motivo reads as part of
   the same system as Descuento / A pagar. */
.disc-reason-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin-bottom: 10px;
}

:root[data-theme="dark"] .disc-reason-label {
    color: #94a3b8;
}

.disc-reason-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.disc-reason-chip {
    appearance: none;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all .1s ease;
}

:root[data-theme="dark"] .disc-reason-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}

.disc-reason-chip:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

:root[data-theme="dark"] .disc-reason-chip:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Active reason chip now uses the same emerald fill as the preset % chip
   so the modal speaks one interaction language. Previously these two chip
   types had opposing active states (preset = green, reason = black),
   which read as two different design intents inside one card. */
.disc-reason-chip.active {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.3);
}

.disc-reason-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.9rem;
    outline: none;
    transition: all .15s ease;
}

:root[data-theme="dark"] .disc-reason-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

/* Phone-only native amount input for the discount modal (replaces the keypad). */
.disc-native-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center;
    outline: none;
    margin-bottom: 6px;
}
:root[data-theme="dark"] .disc-native-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}
.disc-native-input:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.disc-reason-input:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.disc-reason-input::placeholder {
    color: #94a3b8;
}

/* Inline error --------------------------------------------------------- */

.disc-error,
.pin-error {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    color: #b91c1c;
    border-radius: 10px;
    font-size: 0.88rem;
    text-align: center;
}

:root[data-theme="dark"] .disc-error,
:root[data-theme="dark"] .pin-error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* Actions — primary dominant, secondaries recede --------------------- */

.disc-actions,
.pin-actions {
    display: flex;
    gap: 10px;
    align-items: stretch;
    padding: 16px 24px 22px;
    background: #ffffff;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    /* Stays at natural height in the modal's flex column so the CTA is
       always reachable even when the body scrolls. */
    flex-shrink: 0;
}

:root[data-theme="dark"] .disc-actions,
:root[data-theme="dark"] .pin-actions {
    background: #0f172a;
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* Primary CTA — inset top highlight + gradient fill + layered outer
   shadows. The inset highlight is what Codex flagged as missing: without
   it the button read as a flat colour bar; with it the surface catches
   light at the top edge like a physical button. On hover both the
   shadow and the surface tilt together for a "lifting" feel; translateY
   is scoped to hover-capable devices only so touch POS doesn't jitter. */
.modal-cta.disc-apply,
.modal-cta.pin-authorize {
    flex: 1 1 auto;
    min-height: 50px;
    margin-top: 0;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(5, 150, 105, 0.25),
        0 8px 24px rgba(5, 150, 105, 0.32);
    transition: box-shadow .18s ease, transform .14s ease, filter .14s ease, opacity .18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modal-cta.pin-authorize {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 1px 2px rgba(15, 23, 42, 0.2),
        0 8px 24px rgba(15, 23, 42, 0.35);
}

@media (hover: hover) {
    .modal-cta.disc-apply:hover:not(:disabled),
    .modal-cta.pin-authorize:hover:not(:disabled) {
        filter: brightness(1.06);
        transform: translateY(-1px);
    }

    .modal-cta.disc-apply:hover:not(:disabled) {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.26),
            inset 0 -1px 0 rgba(0, 0, 0, 0.14),
            0 1px 2px rgba(5, 150, 105, 0.3),
            0 12px 28px rgba(5, 150, 105, 0.42);
    }

    .modal-cta.pin-authorize:hover:not(:disabled) {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            inset 0 -1px 0 rgba(0, 0, 0, 0.28),
            0 1px 2px rgba(15, 23, 42, 0.25),
            0 12px 28px rgba(15, 23, 42, 0.45);
    }
}

.modal-cta.disc-apply:active:not(:disabled),
.modal-cta.pin-authorize:active:not(:disabled) {
    transform: scale(0.985);
}

.modal-cta.disc-apply:disabled,
.modal-cta.pin-authorize:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.modal-cta.disc-apply:focus-visible,
.modal-cta.pin-authorize:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 2px;
}

/* Inline spinner for the "Aplicando…" / "Verificando…" busy state —
   appears only while a request is in flight and the button is disabled.
   Sits inside the CTA so the layout doesn't shift. */
.disc-cta-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: disc-spin 0.72s linear infinite;
}

@keyframes disc-spin {
    to { transform: rotate(360deg); }
}

/* Secondary — Cancelar is the neutral ghost, subtle border, low weight. */
.disc-cancel,
.pin-cancel {
    flex: 0 0 auto;
    padding: 14px 18px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.92rem;
    background: transparent;
    color: #64748b;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all .12s ease;
}

:root[data-theme="dark"] .disc-cancel,
:root[data-theme="dark"] .pin-cancel {
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.1);
}

.disc-cancel:hover:not(:disabled),
.pin-cancel:hover:not(:disabled) {
    background: #f8fafc;
    color: #0f172a;
}

:root[data-theme="dark"] .disc-cancel:hover:not(:disabled),
:root[data-theme="dark"] .pin-cancel:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
    color: #f1f5f9;
}

.disc-cancel:focus-visible,
.pin-cancel:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: 2px;
}

/* Tertiary — Quitar is a destructive link. No border, no filled surface;
   reads as a "remove" affordance rather than a third button that could
   be confused with Cancelar. Positioned left of the Cancelar/Aplicar
   pair via order: -1 on the disc-actions flex. */
.disc-remove {
    flex: 0 0 auto;
    padding: 14px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    background: transparent;
    color: #b91c1c;
    border: none;
    cursor: pointer;
    transition: all .12s ease;
    text-decoration: none;
    order: -1;
    margin-right: auto;
}

:root[data-theme="dark"] .disc-remove {
    color: #fca5a5;
}

.disc-remove:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.08);
    color: #991b1b;
}

:root[data-theme="dark"] .disc-remove:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
}

.disc-remove:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

/* PIN modal — dots + hidden input ------------------------------------- */

.pin-dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 28px 24px 18px;
}

.pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #cbd5e1;
    transition: all .18s ease;
}

:root[data-theme="dark"] .pin-dot {
    border-color: rgba(255, 255, 255, 0.2);
}

.pin-dot.filled {
    background: #0f172a;
    border-color: #0f172a;
    transform: scale(1.12);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.4);
}

:root[data-theme="dark"] .pin-dot.filled {
    background: #fde68a;
    border-color: #fde68a;
    box-shadow: 0 0 0 3px rgba(253, 230, 138, 0.15), 0 2px 8px rgba(253, 230, 138, 0.35);
}

/* Shake the dots when the entered PIN was rejected — a tactile cue that
   matches the pin-error message. The animation is keyed on a counter
   (_pinErrorShake) so consecutive failures replay it; otherwise Blazor's
   diff would keep the same element and CSS wouldn't restart. */
.pin-dots.pin-shake {
    animation: pin-dot-shake 0.32s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes pin-dot-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

.pin-keypad {
    padding: 0 24px 4px;
    margin-bottom: 0;
}

.pin-hidden-input {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Narrow / tablet portrait — collapse the two-column body to one column
   and hide the divider. Threshold at 700px so the 720px desktop card
   switches cleanly without leaving a cramped intermediate state. */
@media (max-width: 700px) {
    .disc-body {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .disc-body::before {
        display: none;
    }

    /* Single-column order: primary flow first (seg → chips → summary →
       reason), keypad at the bottom. The keypad column uses
       justify-content: center on desktop to vertically balance against
       the taller primary column — on mobile we want it flush-top. */
    .disc-col-keypad {
        justify-content: flex-start;
        margin-top: 14px;
    }

    /* Two-slot preview might feel cramped on very narrow phones; collapse
       to a stacked layout below a modest width so the amount never wraps
       even on small screens. */
    .disc-preview {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .disc-preview-slot--total {
        border-left: none;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        padding-left: 4px;
        padding-top: 14px;
    }

    :root[data-theme="dark"] .disc-preview-slot--total {
        border-top-color: rgba(255, 255, 255, 0.1);
    }
}

/* Narrow screens — keep modal usable on small tablets / phones -------- */

@media (max-width: 520px) {
    .modal-card.discount-modal,
    .modal-card.pin-modal {
        width: 95vw;
        border-radius: 16px;
    }

    .disc-hero,
    .pin-hero {
        padding: 22px 20px 18px;
    }

    .disc-hero-gross {
        font-size: 2.2rem;
    }

    .disc-body,
    .pin-body {
        padding: 18px 18px 6px;
    }

    .disc-actions,
    .pin-actions {
        padding: 14px 18px 18px;
        flex-wrap: wrap;
    }

    .modal-cta.disc-apply,
    .modal-cta.pin-authorize {
        flex: 1 0 100%;
    }
}