/* Custom styles for POS System */

/* Ensure fixed-top truly fixes the navbar to the very top */
.app-navbar.fixed-top { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1030; }
/* Prevent any accidental top offset above the navbar */
html, body, .app-navbar { margin-top: 0 !important; border-top: 0 !important; }
body > :first-child { margin-top: 0 !important; }


/* Theme variables */
:root {
  --color-bg: #f8f9fa;
  --color-text: #212529;
  --color-card: #ffffff;
  --color-muted: #6c757d;
  --color-border: #dee2e6;
  --color-primary: #0d6efd; /* editable */
  --color-primary-2: color-mix(in srgb, var(--color-primary) 80%, #6f42c1 20%);
  --radius: 12px;
  --shadow-sm: 0 .25rem .75rem rgba(0,0,0,.06);
  --shadow-md: 0 .6rem 1.4rem rgba(0,0,0,.12);
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-heading: 'Poppins', var(--font-body);
  /* Map Bootstrap primary to our theme so components update */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 13, 110, 253; /* fallback, overridden below via computed color */
}

[data-theme="dark"] {
  --color-bg: #121212;
  --color-text: #e2e6ea;
  --color-card: #1b1f24;
  --color-muted: #b3bac2;
  --color-border: #2a2f34;
  --shadow-sm: 0 .25rem .75rem rgba(0,0,0,.35);
  --shadow-md: 0 .6rem 1.4rem rgba(0,0,0,.45);
  /* Bootstrap core vars so components inherit correctly */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-heading-color: var(--color-text);
  --bs-link-color: #6fb3ff;
  --bs-link-hover-color: #9ac7ff;
}

/* System-wide primary usage: align Bootstrap utilities to --color-primary */
.btn-primary,
.bg-primary,
.border-primary,
.text-primary { --bs-primary: var(--color-primary) !important; }
.btn-primary { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline-primary { color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.btn-outline-primary:hover { background-color: var(--color-primary) !important; color: #fff !important; }
.link-primary { color: var(--color-primary) !important; }
.badge.bg-primary { background-color: var(--color-primary) !important; }
.progress-bar.bg-primary { background-color: var(--color-primary) !important; }
.form-check-input:checked { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.form-range::-webkit-slider-thumb { background-color: var(--color-primary); }
.form-range::-moz-range-thumb { background-color: var(--color-primary); }
.nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color: var(--color-primary) !important; }
.page-link { color: var(--color-primary); }
.page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); }

/* General styles */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
}
html, body { margin: 0 !important; padding: 0; }
body > nav.navbar:first-child { margin-top: 0 !important; }
body > main.container-fluid { margin-top: 0 !important; }
main.container-fluid { margin-top: 0 !important; }
body > .container-fluid:first-child { margin-top: 0 !important; }
body > .admin-content:first-child { margin-top: 0 !important; }

/* Ensure text isn’t black in dark mode */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] p, [data-theme="dark"] label, [data-theme="dark"] .form-label,
[data-theme="dark"] .card-title, [data-theme="dark"] .card-text,
[data-theme="dark"] .table, [data-theme="dark"] .table td, [data-theme="dark"] .table th {
  color: var(--color-text) !important;
}
[data-theme="dark"] .modal, [data-theme="dark"] .modal-dialog, [data-theme="dark"] .modal-content,
[data-theme="dark"] .offcanvas, [data-theme="dark"] .offcanvas-body,
[data-theme="dark"] .dropdown-menu, [data-theme="dark"] .popover, [data-theme="dark"] .tooltip-inner {
  color: var(--color-text) !important;
}
[data-theme="dark"] .dropdown-item, [data-theme="dark"] .popover-body, [data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { color: var(--color-text) !important; }
[data-theme="dark"] .text-dark, [data-theme="dark"] .text-body { color: var(--color-text) !important; }
/* Ensure explicit text-white utilities don’t break readability in light mode toggles */
[data-theme="light"] .text-white { color: #fff !important; }
[data-theme="dark"] .text-white { color: #f1f3f5 !important; }
[data-theme="dark"] .text-dark { color: var(--color-text) !important; }
[data-theme="dark"] a { color: var(--bs-link-color); }
[data-theme="dark"] a:hover { color: var(--bs-link-hover-color); }
[data-theme="dark"] .btn-link { color: var(--bs-link-color); }
[data-theme="dark"] .btn-link:hover { color: var(--bs-link-hover-color); }
[data-theme="dark"] .bg-light { background-color: #232a31 !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .table-light { background-color: #262a2f !important; color: #e6e9ee !important; }
[data-theme="dark"] .list-group-item { background-color: #1b1f24; color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .list-group { background-color: transparent; }
[data-theme="dark"] .modal-content { background-color: #1e242a; color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .popover, [data-theme="dark"] .tooltip-inner { background: #1e242a; color: var(--color-text); border-color: var(--color-border); }
/* Common menu modal wrapper (fallback if custom modal classes are used) */
[data-theme="dark"] .menu-modal, .menu-modal .modal-content { background-color: #1e242a !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
/* Strong overrides for the menu modal when class or id are present */
[data-theme="dark"] .modal.menu-modal .modal-header,
[data-theme="dark"] .modal.menu-modal .modal-body,
[data-theme="dark"] .modal.menu-modal .modal-footer,
[data-theme="dark"] #menuModal .modal-header,
[data-theme="dark"] #menuModal .modal-body,
[data-theme="dark"] #menuModal .modal-footer { background-color: #1e242a !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .menu-modal .btn-close,
[data-theme="dark"] #menuModal .btn-close { filter: invert(1) grayscale(100%); opacity: .85; }
[data-theme="dark"] .menu-modal .form-control,
[data-theme="dark"] #menuModal .form-control,
[data-theme="dark"] .menu-modal .form-select,
[data-theme="dark"] #menuModal .form-select { background-color: #1b1f24 !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .menu-modal .form-control::placeholder,
[data-theme="dark"] #menuModal .form-control::placeholder { color: #9aa3ad !important; }

/* Colorful theme alignment for menu modal */
.colorful-theme .menu-modal .modal-content,
.colorful-theme #menuModal .modal-content { background: color-mix(in srgb, var(--color-card) 84%, var(--color-primary) 16%) !important; border-color: color-mix(in srgb, var(--color-border) 75%, var(--color-primary) 25%) !important; color: var(--color-text) !important; }
[data-theme="dark"].colorful-theme .menu-modal .modal-content,
[data-theme="dark"].colorful-theme #menuModal .modal-content { background: color-mix(in srgb, var(--color-card) 78%, var(--color-primary) 22%) !important; border-color: color-mix(in srgb, var(--color-border) 65%, var(--color-primary) 35%) !important; }

/* Remove extra space above navbar and main for admin pages */
/* (Duplicate rules cleaned; these are already defined earlier in the file) */
/* Unificación: eliminamos hacks de admin; todos usan mismo padding controlado más abajo */
/* Safe-area & mobile top gap fix */
html, body { padding-top: 0 !important; }
@supports(padding: max(0px)) {
  body { padding-top: 0 !important; }
  .navbar { padding-top: .3rem !important; }
}

/* Remove top margin from first row or d-flex in admin content */
.admin-content > .row:first-child,
.admin-content > .d-flex:first-child {
  margin-top: 0 !important;
}

/* Headings: friendlier, tighter */
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-heading); letter-spacing: .2px; }
h1, .h1 { font-weight: 700; }
h2, .h2 { font-weight: 600; }
h3, .h3 { font-weight: 600; }
/* Force navbar to sit flush at the top (fixes stray top gap) */
body, .navbar { margin-top: 0 !important; border-top: 0 !important; }
/* Safeguard: if the first element has default top margin, neutralize it */
body > :first-child { margin-top: 0 !important; }
html, body { scroll-padding-top: 0 !important; }

/* Navigation */
.navbar-brand {
  font-weight: bold;
}

/* Navbar contrast and links */
.navbar-dark .navbar-brand, .navbar-dark .navbar-nav .nav-link { color: #fff !important; }
.navbar-dark .navbar-nav .nav-link:hover { color: #f8f9fa !important; }
[data-theme="dark"] .navbar { border-bottom: 1px solid var(--color-border); }

/* Gradient navbar for a more vibrant feel */
.navbar.bg-primary {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-primary) 92%, #000 8%) 0%,
    var(--color-primary) 40%,
    var(--color-primary-2) 100%) !important;
}

/* Colorful theme: tint backgrounds and surfaces using the selected primary color */
.colorful-theme :root,
.colorful-theme body { background-color: color-mix(in srgb, var(--color-bg) 65%, var(--color-primary) 35%); }
.colorful-theme main,
.colorful-theme .container-fluid,
.colorful-theme .admin-content,
.colorful-theme .content,
.colorful-theme .pos-content { background-color: color-mix(in srgb, var(--color-bg) 60%, var(--color-primary) 40%) !important; }
.colorful-theme .card { background: color-mix(in srgb, var(--color-card) 82%, var(--color-primary) 18%); border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 30%); }
.colorful-theme .list-group { background: transparent; }
.colorful-theme .list-group-item { background: color-mix(in srgb, var(--color-card) 86%, var(--color-primary) 14%); border-color: color-mix(in srgb, var(--color-border) 75%, var(--color-primary) 25%); }
.colorful-theme .table { --bs-table-bg: color-mix(in srgb, var(--color-card) 90%, var(--color-primary) 10%); }
.colorful-theme .table thead { background: color-mix(in srgb, var(--color-card) 84%, var(--color-primary) 16%); }
.colorful-theme .modal-content,
.colorful-theme .popover,
.colorful-theme .tooltip-inner { background: color-mix(in srgb, var(--color-card) 84%, var(--color-primary) 16%); border-color: color-mix(in srgb, var(--color-border) 75%, var(--color-primary) 25%); }
.colorful-theme .dropdown-menu { background: color-mix(in srgb, var(--color-card) 88%, var(--color-primary) 12%); border-color: color-mix(in srgb, var(--color-border) 75%, var(--color-primary) 25%); }
.colorful-theme .bg-light { background-color: color-mix(in srgb, var(--color-card) 80%, var(--color-primary) 20%) !important; }
.colorful-theme .progress { background-color: color-mix(in srgb, var(--color-bg) 70%, var(--color-primary) 30%); }
.colorful-theme .badge.bg-secondary { background-color: color-mix(in srgb, #6c757d 50%, var(--color-primary) 50%) !important; }
.colorful-theme .form-control,
.colorful-theme .form-select { background: color-mix(in srgb, var(--color-card) 90%, var(--color-primary) 10%); border-color: color-mix(in srgb, var(--color-border) 85%, var(--color-primary) 15%); }
.colorful-theme .form-control:focus, .colorful-theme .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 30%, transparent); }

/* Keep navbar visually solid when colorful theme is active.
   Some pages toggle global 'colorful-theme' which tints many surfaces;
   explicitly ensure the app navbar keeps a solid background and full opacity. */
.colorful-theme .app-navbar,
.colorful-theme .navbar.app-navbar,
[data-theme="dark"].colorful-theme .app-navbar,
[data-theme="dark"].colorful-theme .navbar.app-navbar {
  background-image: none !important;
  background-color: color-mix(in srgb, var(--color-primary) 92%, var(--color-card) 8%) !important;
  color: var(--color-text) !important;
  opacity: 1 !important;
  box-shadow: var(--shadow-sm) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 85%, var(--color-primary) 15%) !important;
}
.colorful-theme .app-navbar .nav-link,
.colorful-theme .app-navbar .navbar-brand,
.colorful-theme .app-navbar .navbar-nav .nav-link { color: inherit !important; }

/* Dark mode adjustments for colorful theme */
[data-theme="dark"].colorful-theme body { background-color: color-mix(in srgb, var(--color-bg) 60%, var(--color-primary) 40%); }
[data-theme="dark"].colorful-theme main,
[data-theme="dark"].colorful-theme .container-fluid,
[data-theme="dark"].colorful-theme .admin-content,
[data-theme="dark"].colorful-theme .content,
[data-theme="dark"].colorful-theme .pos-content { background-color: color-mix(in srgb, var(--color-bg) 55%, var(--color-primary) 45%) !important; }
[data-theme="dark"].colorful-theme .card { background: color-mix(in srgb, var(--color-card) 78%, var(--color-primary) 22%); border-color: color-mix(in srgb, var(--color-border) 65%, var(--color-primary) 35%); }
[data-theme="dark"].colorful-theme .list-group-item { background: color-mix(in srgb, var(--color-card) 84%, var(--color-primary) 16%); border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 30%); }
[data-theme="dark"].colorful-theme .navbar { border-bottom-color: color-mix(in srgb, var(--color-border) 60%, var(--color-primary) 40%); }
[data-theme="dark"].colorful-theme .bg-light { background-color: color-mix(in srgb, #232a31 65%, var(--color-primary) 35%) !important; }

/* Legend pills: strengthen contrast in dark and colorful modes */
.legend-pill { box-shadow: 0 2px 6px rgba(0,0,0,.06); }
[data-theme="dark"] .legend-pill { box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.legend-pill .pill-count { color:#000; }
[data-theme="dark"] .legend-pill .pill-count { color:#121212; }
.legend-pill.occupied { background: color-mix(in srgb, #e8f8f2 70%, #2f8a54 30%) !important; color: #1e5e39 !important; }
.legend-pill.needs-cleaning { background: color-mix(in srgb, #fff7e6 70%, #b36b00 30%) !important; color: #7a4a00 !important; }
.legend-pill.free { background: color-mix(in srgb, #f4f6f8 70%, #6b7280 30%) !important; color: #3c4048 !important; }
.legend-pill.reservada { background: color-mix(in srgb, #f5efff 70%, #6b3bb3 30%) !important; color: #4b2a80 !important; }
.legend-pill.bill { background: color-mix(in srgb, #fff0f0 70%, #c9302c 30%) !important; color: #8c201d !important; }
[data-theme="dark"] .legend-pill.occupied { background: color-mix(in srgb, #1f2a23 35%, #2f8a54 65%) !important; color: #d4f6e6 !important; }
[data-theme="dark"] .legend-pill.needs-cleaning { background: color-mix(in srgb, #2a2318 35%, #b36b00 65%) !important; color: #fff1d6 !important; }
[data-theme="dark"] .legend-pill.free { background: color-mix(in srgb, #202326 35%, #6b7280 65%) !important; color: #e6eaee !important; }
[data-theme="dark"] .legend-pill.reservada { background: color-mix(in srgb, #231f2a 35%, #6b3bb3 65%) !important; color: #f2e9ff !important; }
[data-theme="dark"] .legend-pill.bill { background: color-mix(in srgb, #2a1f1f 35%, #c9302c 65%) !important; color: #ffecec !important; }

/* When colorful theme is enabled, gently align pill backgrounds with primary without washing them out */
.colorful-theme .legend-pill { border: 1px solid color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 30%); }
[data-theme="dark"].colorful-theme .legend-pill { border-color: color-mix(in srgb, var(--color-border) 55%, var(--color-primary) 45%); }
.navbar { padding-top: .5rem; padding-bottom: .55rem; }
/* Dashboard admin: reducir un poco espacio debajo de la navbar sin afectar otras vistas */
body.endpoint-admin-dashboard .app-navbar + main.container-fluid { padding-top:.25rem !important; }
.navbar .nav-link { border-radius: 999px; padding: .35rem .75rem; transition: none; }
.navbar .nav-link:hover { background: rgba(255,255,255,.12); }
.navbar .dropdown-menu { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
/* Unified compact & responsive navbar refinements */
.app-navbar { --nav-gap: .35rem; --nav-padding-y: .45rem; --nav-padding-x: .75rem; }
.app-navbar .navbar-brand { font-weight:600; font-size: .95rem; letter-spacing:.3px; }
.app-navbar .navbar-brand .logo { height:28px; width:auto; }
.app-navbar .navbar-nav .nav-link { font-size:.85rem; font-weight:500; padding:.4rem .85rem; line-height:1.1; }
.app-navbar .navbar-nav .dropdown-menu { font-size:.85rem; }
.app-navbar .connection-indicator small { font-size:.65rem; letter-spacing:.4px; }
@media (min-width: 992px) {
  .app-navbar { padding-top: .4rem !important; padding-bottom:.45rem !important; }
  .app-navbar .navbar-brand .logo { height:30px; }
  .app-navbar .navbar-nav .nav-link { font-size:.87rem; padding:.45rem .95rem; }
}
@media (max-width: 991.98px) {
  .app-navbar .navbar-collapse { padding-top:.35rem; border-top:1px solid rgba(255,255,255,.15); margin-top:.45rem; }
  [data-theme="dark"] .app-navbar .navbar-collapse { border-top-color: var(--color-border); }
  .app-navbar .connection-indicator { order: 99; }
  .app-navbar .navbar-nav .nav-link { padding:.55rem .85rem; }
}
@media (max-width: 575.98px) {
  .app-navbar .navbar-brand .brand-text { font-size:.8rem; }
  .app-navbar .navbar-nav .nav-link { font-size:.78rem; padding:.5rem .75rem; }
  .app-navbar .navbar-toggler { padding:.3rem .45rem; }
  .app-navbar .status-dot { width:.55rem; height:.55rem; }
  .app-navbar .connection-indicator { margin-top:.25rem; }
}
/* Improve focus visibility */
.app-navbar .nav-link:focus-visible, .app-navbar .dropdown-item:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Cards */
.card {
  border: 1px solid var(--color-border);
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: none;
}
.card-header { background: var(--color-card); border-bottom: 1px solid var(--color-border); }
[data-theme="dark"] .card { background: var(--color-card); border-color: var(--color-border); }
[data-theme="dark"] .card-header { background: #1e242a; border-color: var(--color-border); }

.card:hover { box-shadow: var(--shadow-sm); transform: none; }

/* Menu items */
.menu-item { cursor: pointer; overflow: hidden; border: none; }
.menu-item .card-img-top { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.menu-item:hover { transform: translateY(-2px); }
.menu-item .card-body h6 { font-weight: 600; }
/* Dark mode readability for menu product cards */
[data-theme="dark"] .menu-item .card { background-color: #1b1f24 !important; border-color: var(--color-border) !important; color: var(--color-text) !important; }
[data-theme="dark"] .menu-item .card .card-title,
[data-theme="dark"] .menu-item .card .card-text,
[data-theme="dark"] .menu-item .card .text-dark,
[data-theme="dark"] .menu-item .card .text-body { color: var(--color-text) !important; }
[data-theme="dark"] .menu-item .card .text-muted { color: #9aa4ae !important; }
[data-theme="dark"] .menu-item .card .badge { color: var(--color-text) !important; }
[data-theme="dark"] .menu-item .card .btn-outline-secondary { color: var(--color-text) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .menu-item .card .btn-outline-secondary:hover { background-color: #232a31 !important; }

/* Order summary */
.order-summary {
  position: sticky;
  top: 20px;
}

.cart-item {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
}
/* Dark mode for order/consumption cards */
[data-theme="dark"] .order-summary,
[data-theme="dark"] .order-summary .card,
[data-theme="dark"] .order-summary .card-header,
[data-theme="dark"] .order-summary .card-body { background-color: #1b1f24 !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
[data-theme="dark"] .order-summary .text-muted { color: #9aa4ae !important; }
[data-theme="dark"] .order-summary .bg-light { background-color: #232a31 !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }

/* Tables grid */
.table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.table-card {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.table-card.available {
  background-color: #d4edda;
  border: 2px solid #c3e6cb;
  color: #155724;
}

.table-card.occupied {
  background-color: #f8d7da;
  border: 2px solid #f5c6cb;
  color: #721c24;
}

.table-card:hover {
  transform: scale(1.05);
  text-decoration: none;
}

/* Kitchen dashboard - Enhanced order cards */
.order-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
  border-left: 4px solid #6c757d;
  position: relative;
  overflow: hidden;
}

.order-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

.order-card .card-body { padding: .9rem 1rem; }
.order-card h6 { font-weight:600; }
.order-card p { margin-bottom:.25rem; }
.order-card .btn-group .btn { padding:.3rem .55rem; }
.order-card .status-badge { font-size:.7rem; letter-spacing:.5px; }

.order-card.new { border-left-color: #28a745; }

.order-card.in-prep { border-left-color: #ffc107; }

.order-card.ready { border-left-color: #dc3545; }

/* Scroll containers inside dashboard */
.custom-scrollbar { overflow-y: auto; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.4); }

/* ===== Dark mode readability improvements ===== */
/* Tables */
[data-theme="dark"] .table { color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--color-border); }
[data-theme="dark"] .table thead.table-light { background-color: #262a2f; color: #e6e9ee; }
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { --bs-table-bg-type: rgba(255,255,255,.03); --bs-table-color-type: var(--color-text); }
[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: rgba(255,255,255,.06); color: var(--color-text); }

/* Badges */
[data-theme="dark"] .badge.bg-light { background-color: #2a2f36 !important; color: #e2e6ea !important; }

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background-color: #1b1f24; color: var(--color-text); border-color: #2a2f34; }
[data-theme="dark"] .form-control::placeholder { color: #8a9096; }
[data-theme="dark"] .input-group-text { background-color: #1e242a; color: var(--color-text); border-color: #2a2f34; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { border-color: #3a84ff; box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }

/* Dropdowns */
[data-theme="dark"] .dropdown-menu { background-color: #1e242a; color: var(--color-text); border-color: #2a2f34; }
[data-theme="dark"] .dropdown-item { color: var(--color-text); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus { background-color: rgba(255,255,255,.08); color: #fff; }

/* Outline buttons */
[data-theme="dark"] .btn-outline-secondary { color: #cbd3da; border-color: #6c757d; }
[data-theme="dark"] .btn-outline-secondary:hover { background-color: #6c757d; border-color: #6c757d; color: #fff; }
[data-theme="dark"] .btn-outline-danger { color: #ff8b8b; border-color: #dc3545; }
[data-theme="dark"] .btn-outline-danger:hover { background-color: #dc3545; color: #fff; }
[data-theme="dark"] .btn-outline-info { color: #8bd5ff; border-color: #0dcaf0; }
[data-theme="dark"] .btn-outline-info:hover { background-color: #0dcaf0; color: #0e1720; }

/* Alerts */
[data-theme="dark"] .alert-light { background-color: #232a31; color: var(--color-text); border-color: #2a2f34; }

/* Muted text a bit brighter for readability */
[data-theme="dark"] .text-muted { color: var(--color-muted) !important; }

/* Keep text dark on bright backgrounds for readability */
[data-theme="dark"] .bg-warning.text-dark,
[data-theme="dark"] .badge.bg-warning.text-dark,
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .btn-warning { color: #212529 !important; }

/* POS waiter dashboard order lists */
.orders-scroll { max-height: 340px; overflow-y: auto; padding-right: .25rem; }
.orders-scroll .order-card:last-child { margin-bottom: 0; }

/* Status badges */
.status-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Notifications */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1050;
  min-width: 300px;
  max-width: 400px;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .table-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .order-summary {
    position: static;
    margin-top: 2rem;
  }
}

/* ===== Additional Global Responsive Enhancements ===== */
/* Ultra small devices (portrait phones <576px) */
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.55rem; }
  h2, .h2 { font-size: 1.35rem; }
  h3, .h3 { font-size: 1.15rem; }
  .navbar .nav-link { padding: .4rem .65rem; font-size: .85rem; }
  .kpi-card .kpi-value { font-size: 1.35rem; }
  .kpi-card .kpi-label { font-size: .75rem; }
  /* Admin chart reduced height */
  #salesChart { height: 240px !important; max-height: 240px !important; }
  /* Dashboard header groups wrap */
  .flex-wrap-gap { gap: .65rem !important; }
  .btn-group-responsive, .btn-group.flex-wrap { flex-wrap: wrap; }
  .btn-group-responsive > .btn, .btn-group.flex-wrap > .btn { flex: 1 1 auto; min-width: 46%; }
  /* POS tables: allow larger tap targets */
  #tables-grid .col-4 { flex: 0 0 50%; max-width: 50%; }
  .orders-scroll { max-height: 55vh; }
  .kitchen-col .card { height: auto !important; max-height: none !important; }
  .kitchen-col .card-body { max-height: 55vh; }
  .order-items { max-height: 120px; }
}

/* Medium and below: soften fixed heights */
@media (max-width: 991.98px) {
  .orders-scroll { max-height: clamp(260px, 50vh, 380px); }
  .kitchen-col .card { height: calc(100vh - 260px); }
}

/* Large desktops: allow taller scroll zones */
@media (min-width: 1400px) {
  .orders-scroll { max-height: 400px; }
}

/* Utility classes */
.btn-group-responsive { display: flex; flex-wrap: wrap; gap: .5rem; }
.stack-sm { display: flex; }
@media (max-width: 575.98px) { .stack-sm { flex-direction: column; align-items: stretch !important; } }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Page head reusable pattern */
.page-head { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.page-head-title { margin:0; flex:1 1 auto; }
.page-head-actions { display:flex; flex-wrap:wrap; gap:.55rem; }
@media (max-width: 575.98px) {
  /* Only top-level buttons expand; avoid catching buttons inside input-groups */
  .page-head-actions > .btn { flex:1 1 calc(50% - .55rem); min-width:138px; white-space:nowrap; }
  .page-head-actions .badge { width:100%; text-align:left; }
  .page-head .badge { order:3; }
}
@media (max-width:380px){
  .page-head-actions .btn { flex:1 1 100%; }
}

/* Compact buttons variant */
.btn-compact { padding:.4rem .65rem; font-size:.85rem; line-height:1.1; }

/* Compact search group for mobile */
.search-group .input-group-text { padding:.25rem .5rem; }
.search-group .form-control { padding:.35rem .5rem; }

/* Floating action buttons: hide when a modal is open (avoid overlap) */
/* Hide FABs only when the 'Gestionar mesas' modal is open (safer than hiding on any modal-open state) */
body.fd-add-open #themeAppearanceBtn,
body.fd-add-open #fabOrders,
body.fd-add-open #themeAppearancePanel {
  display: none !important;
}

/* Floating action buttons base styling (non-draggable) */
#themeAppearanceBtn, #fabOrders {
  z-index: 1080;
}

/* ===== Floor dashboard responsive improvements ===== */
/* Make header controls wrap nicely and prioritize visibility on small screens */
.floor-dashboard .page-head { gap: .6rem; }
.floor-dashboard .page-head-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.floor-dashboard .page-head-actions > * { flex: 0 1 auto; }

.floor-zoom-wrap { 
  position:relative; 
  display:inline-block; 
  line-height:0; 
}
.floor-scale-layer { 
  position:relative; 
  transform-origin: top left; 
  will-change: transform; 
}
.floor-canvas { 
  position:relative; 
  border:none; 
  border-radius:12px; 
  background:#fff; 
  background-size:cover; 
  background-position:center; 
  min-height:480px; 
}

/* Ensure table tiles remain tappable on small screens */
.table-tile, .table-card, .table-card .consumption-row { min-height:48px; min-width:48px; }

/* Make resize handle easier to tap on touch devices without changing desktop visuals */
.table-tile .resize-handle {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 6px;
  bottom: 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.06);
  display: inline-block;
  z-index: 5;
}
@media (hover: none) and (pointer: coarse) {
  .table-tile .resize-handle { width: 28px; height: 28px; right: 8px; bottom: 8px; }
}

/* Orders drawer: make it a bottom sheet on narrow screens using the show-drawer class already used by JS
  NOTE: limit this to small phones only so tablets render the orders panel like desktop */
@media (max-width: 600px) {
  .floor-dashboard > .d-flex { flex-direction: column; }
  .floor-dashboard > .d-flex > #fdOrdersWrapper.fd-orders-wrapper {
    position: fixed !important;
    left: 0; right: 0; bottom: 0; top: auto;
    height: 55vh; max-height: 70vh; width: 100%; z-index: 1075;
    transform: translateY(100%);
    transition: transform .25s ease;
    box-shadow: 0 -8px 24px rgba(0,0,0,.12);
    border-top-left-radius: .6rem; border-top-right-radius: .6rem; overflow: hidden;
  }
  .floor-dashboard > .d-flex > #fdOrdersWrapper.fd-orders-wrapper.show-drawer { transform: translateY(0); }
  /* Make orders header handle visible and touchable */
  .orders-header-sticky { cursor: grab; }
  .orders-header-sticky .orders-handle-wrap { display:inline-flex; width:36px; height:24px; align-items:center; justify-content:center; }
  /* Reduce floor canvas height so sheet and content share space */
  #fdCanvas.floor-canvas { min-height: 34vh; }
}

/* Medium screens: improve spacing and ensure side panels don't overflow */
@media (min-width: 821px) and (max-width: 1199.98px) {
  .floor-center { padding: .25rem; }
  #fdCanvas.floor-canvas { max-height: 65vh; }
  .fd-orders-wrapper { max-width: 360px; }
}

/* Accessibility: enlarge interactive controls slightly on touch devices */
@media (hover: none) and (pointer: coarse) {
  .page-head-actions .btn, .btn { min-height:44px; }
  .table-responsive table.table td, .table-responsive table.table th { padding: .6rem .7rem; }
}

/* ===== Strong overrides for floor dashboard responsiveness (override inline template CSS duplicates) ===== */
/* These rules intentionally use higher specificity or !important to ensure they win over duplicated inline/template CSS blocks. */
.floor-zoom-wrap { position: relative !important; width: 100% !important; max-width: 100% !important; display:block !important; }
#fdCanvas.floor-canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 180px !important; box-sizing: border-box !important; background-size: cover !important; }
.floor-scale-layer { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; transform-origin: top left !important; }
.floor-center { overflow: auto !important; }

/* Ensure tiles remain tappable and scale their internal fonts slightly */
.floor-canvas .table-tile { min-width: 44px !important; min-height: 44px !important; }
.floor-canvas .table-tile .tile-number, .floor-canvas .table-tile .tile-capacity { font-size: clamp(12px, 1.6vw, 14px) !important; }

@media (max-width: 820px) {
  #fdCanvas.floor-canvas { min-height: 34vh !important; background-size: contain !important; }

  /* Remove earlier reserved right padding so the canvas can reach the edge. */
  .floor-center { padding-right: 0 !important; box-sizing: border-box !important; }

  /* Keep FABs touch-friendly but allow them to overlay the canvas. These rules ensure
    they size down slightly on phones but won't create layout gaps. */
  #themeAppearanceBtn, #fabOrders {
   width: 48px !important;
   height: 48px !important;
   min-width: 48px !important;
   min-height: 48px !important;
   right: 12px !important;
   bottom: 12px !important;
   position: fixed !important;
   z-index: 2090 !important; /* above canvas but under some UI like dialogs */
  }
  /* offset the appearance button so two FABs don't fully overlap */
  #themeAppearanceBtn { right: 72px !important; }

  /* Override template inline min-height that creates an unused gap on small screens.
     The template sets `.floor-plan-wrapper { min-height:520px; }` inline; on phones
     this produces a large empty area below the canvas. We remove it here so the
     canvas aspect-driven size controls the height. */
  .floor-plan-wrapper { min-height: auto !important; max-height: none !important; }
}

/* ------------------------------------------------------------------
   Force desktop layout for the floor "plano" view on all devices.
   This targets only the floor plan canvas and related wrappers so the
   rest of the template remains responsive. The canvas will keep a
   desktop-sized surface (horizontal scroll on small screens) so the
   layout appears *exactly* like desktop on tablets/phones.
   ------------------------------------------------------------------ */
.floor-plan-container .floor-zoom-wrap,
.floor-plan-container .floor-scale-layer { position: static !important; width: auto !important; height: auto !important; transform: none !important; }
.floor-plan-container #fdCanvas.floor-canvas,
.floor-plan-container .floor-canvas {
  /* Desktop fallback dimensions (match typical floor defaults). Adjust if your floors use a different base size. */
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  min-width: 1200px !important; /* force desktop width */
  max-width: none !important;
  height: auto !important;
  min-height: 800px !important;  /* force desktop height */
  max-height: none !important;
  transform: none !important;
  background-size: cover !important;
}
.floor-plan-container .floor-center { overflow: auto !important; }
.floor-plan-container .floor-plan-wrapper { overflow: auto !important; }
.floor-plan-container .floor-plan-wrapper {
  min-height: 0 !important;
  /* Give more vertical room on desktop: subtract a smaller header/toolbars height so the
     plan uses more of the viewport. For very large screens the subtraction is reduced. */
  height: calc(100vh - 150px) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
  scroll-behavior: smooth; /* smoother programmatic scrolls */
}

@media (min-width: 1400px) {
  /* On very wide screens, give even more vertical space */
  .floor-plan-container .floor-plan-wrapper { height: calc(100vh - 120px) !important; }
}

/* Improve rendering performance of the scalable layer and table tiles */
.floor-plan-container .floor-scale-layer {
  will-change: transform; /* hint for smoother transforms when zooming/panning */
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  touch-action: none; /* avoid unexpected scrolling while interacting with the canvas */
}

.floor-plan-container .floor-scale-layer .table-tile {
  transition: transform 120ms cubic-bezier(.2,.8,.2,1), box-shadow 140ms ease, opacity 120ms ease;
  box-shadow: 0 6px 12px rgba(0,0,0,0.06) !important; /* slightly lighter to reduce visual weight */
  will-change: transform, opacity;
}

/* Make tiles stable: ensure consistent box-sizing and prevent content reflow while drag/animation occurs */
.floor-plan-container .floor-scale-layer .table-tile,
.floor-plan-container .floor-scale-layer .table-tile * {
  box-sizing: border-box !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Dragging state: remove transitions and lift the element for smooth movement */
.table-tile.dragging {
  transition: none !important;
  z-index: 9999 !important;
  transform: translate3d(0,0,0) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,0.12) !important;
}

/* Fallback min dimensions: prevent extreme shrink in production when CSS/JS differences exist */
.floor-plan-container .floor-canvas {
  min-width: 800px !important;
  min-height: 600px !important;
  box-sizing: border-box !important;
}

/* Make the center wrapper use available space and center by default while allowing scroll/pan */
.floor-plan-container .floor-center {
  display: flex !important;
  justify-content: center !important;
  min-height: 100% !important;
}

/* Ensure tiles keep intended absolute positions inside the forced-size canvas */
.floor-plan-container .floor-scale-layer .table-tile { position: absolute !important; }

/* Menu modal category chips/layout fixes: ensure chips always wrap and are fully visible on small screens */
#menuModal .categories-scroll, #menuModal.menu-modal .categories-scroll {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
  overflow-x: visible !important;
  padding: .5rem .5rem .75rem !important;
  align-items: flex-start !important;
}
#menuModal .categories-scroll .cat-chip, #menuModal .categories-scroll .category-btn {
  flex: 0 0 auto !important;
  margin-bottom: 6px !important;
  white-space: normal !important; /* allow wrapping inside chip text */
  text-overflow: clip !important;
  overflow: visible !important;
}
/* Reduce min-width for very small screens so chips don't force overflow */
@media (max-width: 420px){
  #menuModal .categories-scroll .cat-chip, #menuModal .categories-scroll .category-btn {
    font-size: 0.88rem !important;
    padding: 5px 8px !important;
    min-width: 0 !important;
  }
}

/* Ensure the categories bar doesn't get hidden behind the header when sticky */
#menuModal .menu-modal-header + .categories-bar { z-index: 1075; position: relative; }





/* Improve responsive + touch targets for the "Gestionar mesas" modal */
#fdAddExistingModal .modal-dialog { max-width: 980px; }
#fdAddExistingModal .modal-body .table-responsive { max-height: 58vh; overflow: auto; }
#fdAddExistingModal table.table thead th { white-space: normal; font-weight:600; }
#fdAddExistingModal table.table tbody tr { min-height: 52px; }
#fdAddExistingModal table.table td, #fdAddExistingModal table.table th { padding: .55rem .6rem; vertical-align: middle; }
#fdAddExistingModal button[data-action="delete-table"] { min-width:44px; min-height:44px; padding:.4rem; border-radius:.5rem; }
#fdAddExistingModal .fd-at-row { width:18px; height:18px; transform:scale(1.05); }

@media (max-width: 767.98px) {
  /* Make modal comfortably fullscreen on phones */
  #fdAddExistingModal .modal-dialog { margin: .35rem; max-width: 100%; }
  #fdAddExistingModal .modal-content { border-radius: .6rem; }
  /* Stack footer buttons and enlarge for touch */
  #fdAddExistingModal .modal-footer { display:flex; gap:.5rem; flex-wrap:wrap; }
  #fdAddExistingModal .modal-footer .btn { flex: 1 1 48%; min-height:48px; padding:.6rem .8rem; font-size:1rem; }
  /* Table adjustments for small screens: keep header visible and allow horizontal scroll when needed.
    This avoids awkward truncation of header labels and preserves a clean tabular layout while
    still keeping controls tappable on phones. */
  #fdAddExistingModal .modal-body .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #fdAddExistingModal table.table { width: 100%; table-layout: fixed; min-width: 560px; font-size:0.95rem; }
  #fdAddExistingModal table.table thead { display: table-header-group; }
  /* Prevent header labels from wrapping into multiple lines */
  #fdAddExistingModal table.table thead th { white-space: nowrap; font-weight:600; font-size:0.95rem; padding:.45rem .5rem; }
  #fdAddExistingModal table.table tbody tr { display: table-row; }
  #fdAddExistingModal table.table td, #fdAddExistingModal table.table th { padding:.45rem .5rem; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Center the table 'Nombre' column and give it extra horizontal breathing room */
  #fdAddExistingModal table.table th:nth-child(3),
  #fdAddExistingModal table.table td:nth-child(3) {
    text-align: center !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  /* Add separation between Nombre and Sección so names don't appear glued to section */
  #fdAddExistingModal table.table th:nth-child(5),
  #fdAddExistingModal table.table td:nth-child(5) {
    padding-left: 1rem !important;
  }
  /* Reserve tappable areas for checkbox, number, capacity and delete button */
  #fdAddExistingModal table.table td:first-child { width:48px; text-align:center; }
  #fdAddExistingModal table.table td:nth-child(2) { width:70px; }
  #fdAddExistingModal table.table td:nth-child(4) { width:64px; text-align:center; }
  #fdAddExistingModal table.table td:last-child { width:56px; text-align:center; }
  #fdAddExistingModal table.table td .text-muted.small { display:block; font-size:.85rem; color:var(--color-muted); }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  #fdAddExistingModal .modal-dialog { max-width: 900px; }
  #fdAddExistingModal .modal-body .table-responsive { max-height: 62vh; }
}

/* ===== Accessibility & touch-friendly enhancements ===== */
/* Base adjustments to improve readability and tappable areas */
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.45; }

/* Keep confirm order button visible in menu modal when cart is long (Edge/overflow) */
#menuModal.menu-modal .menu-cart-column { display: flex; flex-direction: column; min-height: 0; }
#menuModal.menu-modal .menu-cart-column .cart-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#menuModal.menu-modal .menu-cart-column .cart-panel .card-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#menuModal.menu-modal .menu-cart-column .cart-panel .cart-items-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; }
#menuModal.menu-modal .menu-cart-column .cart-panel .cart-footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, #fff 45%);
  padding-top: .75rem;
  box-shadow: 0 -6px 12px rgba(0,0,0,0.08);
  z-index: 5;
}

/* Make images and svgs fluid */
img, svg { max-width: 100%; height: auto; display: block; }

/* Touch target minimums on small/medium screens (48x48 recommended) */
@media (max-width: 991.98px) {
  .btn, .nav-link, .form-control, .form-select, .input-group-text {
    min-height: 48px !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    padding-left: .6rem !important;
    padding-right: .6rem !important;
    font-size: 1rem !important;
  }
  /* Ensure small button groups still wrap but remain tappable */
  .btn-group-responsive > .btn, .page-head-actions > .btn {
    min-height: 48px;
    min-width: 48px;
  }
  /* Inputs get larger hit area */
  .form-control { padding: .5rem .6rem; }
}

/* Ensure navbar links are easier to tap on very small screens */
@media (max-width: 575.98px) {
  .app-navbar .navbar-nav .nav-link { padding: .6rem .85rem; font-size: 1rem; }
  .app-navbar .navbar-toggler { padding: .45rem .6rem; }
  .app-navbar .navbar-brand .brand-text { font-size: .9rem; }
}

/* Modals: make them use more of the viewport on small devices and stack footer buttons */
@media (max-width: 767.98px) {
  .modal-dialog { max-width: 100%; margin: .5rem; }
  .modal-content { max-height: calc(100vh - 2rem); overflow: auto; border-radius: 10px; }
  .modal-footer { display: flex; gap: .5rem; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 48%; min-height: 48px; }
}

/* Make certain interactive controls more prominent on touch devices */
.touch-target { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; padding: .45rem .6rem; border-radius: 8px; }

/* Larger form controls for accessibility on desktop when user zooms */
@media (min-width: 1200px) {
  .form-control-lg, .btn-lg { min-height: 52px; padding: .6rem 1rem; }
}

/* Utility: make primary action buttons more prominent on mobile */
.btn-primary { padding-left: .9rem; padding-right: .9rem; }

/* Ensure tables/grid items have adequate spacing on touch devices */
@media (max-width: 575.98px) {
  .table-grid { gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .table-card { padding: .6rem; }
}
@media (max-width: 575.98px) {
  .search-group { font-size:.9rem; }
  .search-group .input-group-text i { font-size:.9rem; }
  .search-group .btn { padding:.3rem .5rem; font-size:.9rem; min-width:auto; }
  .page-head-actions .search-group .btn { flex:0 0 auto !important; min-width:auto !important; }
  .search-group .input-group-text, .search-group .form-control, .search-group .btn { height: 34px; border-radius:.5rem; }
}

/* Center page head actions on mobile */
@media (max-width: 575.98px) {
  .page-head { justify-content: center; }
  .page-head-actions { justify-content: center; width:100%; }
  .page-head-actions form { width:100%; }
  .page-head-actions .search-group { max-width: 520px; margin-left:auto; margin-right:auto; }
  /* Top-level buttons: center and don't stretch */
  .page-head-actions > .btn { flex:0 0 auto; min-width: 160px; margin-left:auto; margin-right:auto; }
}

/* Global mobile button responsiveness across templates */
@media (max-width: 575.98px) {
  .container-fluid .btn { padding:.42rem .6rem; font-size:.95rem; line-height:1.1; border-radius:.55rem; }
  .container-fluid .btn i { margin-right:.4rem; }
  .container-fluid .btn.btn-sm { padding:.3rem .5rem; font-size:.9rem; }
  /* Buttons inside tables and cards a bit tighter */
  .table .btn, .card .btn, .btn-toolbar .btn, .btn-group .btn { padding:.32rem .5rem; font-size:.9rem; }
  .table .btn i, .card .btn i { margin-right:.35rem; }
  /* Wrap toolbars safely */
  .actions-toolbar, .btn-toolbar, .btn-group { flex-wrap: wrap; gap:.4rem; }
  .actions-toolbar > .btn { flex: 1 1 auto; }
  /* Icon-only small utility */
  .btn-icon-sm { width:34px; height:34px; display:grid; place-items:center; padding:0; }
}

/* Reduce vertical gap inside header buttons on very small devices */
@media (max-width:575.98px){
  .page-head-actions .btn i { margin-right:.35rem !important; }
}

/* Improve table grid responsiveness at wider viewports */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .table-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (min-width: 1200px) {
  .table-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Better button wrapping inside order cards */
.order-card .btn-group { flex-wrap: wrap; }
.order-card .btn-group .btn { margin-bottom: .25rem; }

/* Reduce horizontal overflow risk in small devices */
body { word-wrap: break-word; overflow-wrap: anywhere; }

/* Connection indicator chip */
.conn-chip { display:inline-flex; align-items:center; gap:.25rem; padding:.25rem .6rem; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); position:relative; }
[data-theme="dark"] .conn-chip { background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.conn-chip .label { font-size:.78rem; opacity:.9; letter-spacing:.2px; }
.conn-chip .status-dot { width:.55rem; height:.55rem; border-radius:50%; display:inline-block; background:#999; box-shadow:0 0 0 3px rgba(255,255,255,.12) inset; }
.conn-chip .pulse-ring { position:absolute; left:8px; width:10px; height:10px; border-radius:50%; pointer-events:none; }
.conn-chip.is-online { background:rgba(25,135,84,.2); box-shadow:inset 0 0 0 1px rgba(25,135,84,.35); }
.conn-chip.is-online .status-dot { background:#28a745; box-shadow:0 0 0 4px rgba(40,167,69,.25); }
.conn-chip.is-offline { background:rgba(220,53,69,.18); box-shadow:inset 0 0 0 1px rgba(220,53,69,.35); }
.conn-chip.is-offline .status-dot { background:#dc3545; box-shadow:0 0 0 4px rgba(220,53,69,.25); }
.conn-chip.is-connecting { background:rgba(255,193,7,.18); box-shadow:inset 0 0 0 1px rgba(255,193,7,.35); }
.conn-chip.is-connecting .status-dot { background:#ffc107; box-shadow:0 0 0 4px rgba(255,193,7,.3); }
@keyframes conn-pulse { from { transform:scale(.9); opacity:.6;} to { transform:scale(1.1); opacity:1;} }
.conn-chip.is-connecting .pulse-ring { animation: conn-pulse 1s ease-in-out infinite alternate; background: radial-gradient(circle, rgba(255,193,7,.65) 0%, rgba(255,193,7,0) 70%); }


/* Print styles */
@media print {
  .navbar,
  .btn,
  .no-print {
    display: none !important;
  }

  .container-fluid {
    margin: 0;
    padding: 0;
  }
}

/* Animation for new orders */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}

.new-order {
  animation: pulse 2s infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track { background: var(--color-card); }

::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }

::-webkit-scrollbar-thumb:hover { background: #555; }

/* Bootstrap color overrides using CSS variables */
.bg-primary { background-color: var(--color-primary) !important; }
.text-primary { color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 90%, #000 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--color-primary) 90%, #000 10%);
  --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 80%, #000 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--color-primary) 80%, #000 20%);
  border-radius: 10px;
}

.btn { border-radius: 10px; }
.btn-outline-primary { border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline-primary:hover { background: var(--color-primary); color: #fff; }

/* Tables (better contrast in dark) — duplicate block removed; see earlier dark table rules */

/* Dropdowns in dark mode — duplicate block removed; see earlier dark dropdown rules */

/* Outline buttons contrast in dark */
/* Dark outline buttons: keep only unique rules; duplicates removed */
[data-theme="dark"] .btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); }
[data-theme="dark"] .btn-outline-primary:hover { background: var(--color-primary); color: #fff; }
/* Duplicates of .btn-outline-secondary, .text-muted, .navbar link styles removed — defined earlier */
/* ---- Navbar redesign overrides (end-of-file to win specificity) ---- */
.app-navbar { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); position:sticky; top:0; }
.app-navbar.bg-primary { background: linear-gradient(92deg, var(--color-primary) 0%, color-mix(in srgb,var(--color-primary) 85%, #1e1e1e) 55%, var(--color-primary-2) 100%) !important; }
.app-navbar .navbar-nav .nav-link { display:flex; align-items:center; gap:.25rem; border-radius: .65rem; }
.app-navbar .navbar-nav .nav-link.active, .app-navbar .navbar-nav .nav-link.show { background: rgba(255,255,255,.18); color:#fff !important; text-decoration:none !important; }
.app-navbar .dropdown-menu .active { background: var(--color-primary); color:#fff; }
.app-navbar .navbar-brand { letter-spacing:.4px; }
/* Espaciado estándar entre navbar y contenido */
.app-navbar + main.container-fluid { padding-top:.55rem !important; }
/* Give dashboard head a little breathing room */
/* Cabeceras reutilizables */
.page-head, .admin-dash-head { margin-top:0; padding-top:0; }
/* Remove earlier zero-padding forcing content to stick */
body.role-admin main.container-fluid > *:first-child { margin-top:0 !important; }
/* Slight separator line */
.app-navbar { box-shadow: 0 1px 0 rgba(255,255,255,.15), 0 2px 4px -1px rgba(0,0,0,.25); }
/* Improve hover without underline clutter */
.app-navbar .navbar-nav .nav-link:hover { background: rgba(255,255,255,.12); text-decoration:none; }
/* Compact height but not cramped */
.app-navbar { padding-top:.5rem !important; padding-bottom:.55rem !important; }
body.role-admin .app-navbar { padding-top:.5rem !important; padding-bottom:.55rem !important; }
@media (max-width: 575.98px){
  .app-navbar .navbar-nav .nav-link { padding:.55rem .8rem; }
  .app-navbar + main.container-fluid { padding-top:.75rem !important; }
}
/* Icon only option (hidden for now, keep code for quick enable) */
/* .app-navbar .navbar-nav .nav-link span { display:none; } @media(min-width:576px){ .app-navbar .navbar-nav .nav-link span{ display:inline; } } */
/* ===== FINAL NAVBAR LAYOUT OVERRIDES ===== */
/* Eliminamos padding global que creaba gran espacio en todas las páginas */
body.has-app-nav { padding-top:0 !important; }
.app-navbar { --app-nav-height:56px; min-height:var(--app-nav-height); display:flex; }
.app-navbar .navbar-brand .logo { height:34px; }
.app-navbar .navbar-brand { font-size:1.05rem; }
.app-navbar .navbar-nav .nav-link { font-size:.9rem; }
@media (min-width: 992px){
  .app-navbar { --app-nav-height:58px; }
  .app-navbar .navbar-nav .nav-link { padding:.6rem 1rem; }
  .app-navbar .navbar-brand .logo { height:36px; }
}
@media (max-width: 575.98px){
  .app-navbar { --app-nav-height:54px; }
  .app-navbar .navbar-brand { font-size:.9rem; }
  .app-navbar .navbar-brand .logo { height:30px; }
}
/* Ensure admin dashboard gets slight breathing space but no white bar above nav */
/* Admin igual que resto (sin excepción) */
body.role-admin.has-app-nav .app-navbar + main.container-fluid { padding-top:.55rem !important; }

/* Page title tweaks */
.page-title { display:flex; align-items:center; gap:.6rem; }
.page-title .icon{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: rgba(13,110,253,.15); color: var(--color-primary); }

/* Form polish */
.form-control, .form-select { border-radius: 10px; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 20%, transparent); border-color: color-mix(in srgb, var(--color-primary) 75%, #000 25%); }

/* Subtle section separators */
.section { border: 1px dashed var(--color-border); border-radius: var(--radius); padding: 1rem; }

/* ===== Consolidated Responsive Styles for Financial/Expense Pages ===== */
@media (max-width: 720px) {
  /* Expenses list transforms rows into card blocks */
  .expenses-table table thead { display:none; }
  .expenses-table table tbody tr { display:flex; flex-direction:column; align-items:stretch; border:1px solid var(--color-border,#dee2e6); margin-bottom:.85rem; border-radius:.6rem; padding:.65rem .75rem; background: var(--color-card,#fff); box-shadow: var(--shadow-sm,0 .2rem .4rem rgba(0,0,0,.05)); }
  .expenses-table table tbody tr:last-child { margin-bottom:0; }
  .expenses-table table tbody td { display:flex; width:100%; justify-content:space-between; padding:.25rem 0 !important; border:0 !important; font-size:.83rem; }
  .expenses-table table tbody td[data-label='Acciones'] { justify-content:flex-end; }
  .expenses-table table tbody td::before { content: attr(data-label); font-weight:600; color: var(--color-muted,#6c757d); margin-right: .75rem; text-transform:uppercase; letter-spacing:.5px; font-size:.68rem; display:inline-block; }
}
@media (max-width: 900px) {
  /* Income Statement filters */
  .income-filters { width:100%; }
  .income-filters .d-flex.gap-2 { width:100%; }
  .income-filters input[type=date] { flex:1 1 48%; min-width:140px; }
  .income-filters .presets-group { flex:1 1 100%; order:4; }
  .income-filters .export-group { width:100%; justify-content:space-between; order:5; }
  .income-filters .export-group .btn { flex:1 1 auto; }
  .income-head h2 { flex:1 1 100%; }
  /* Balance Sheet filters */
  .balance-filters { width:100%; }
  .balance-filters input[type=date] { flex:1 1 48%; min-width:140px; }
  .balance-filters .presets-group { flex:1 1 100%; order:4; }
  .balance-filters .export-group { width:100%; justify-content:space-between; order:5; }
  .balance-head h2 { flex:1 1 100%; }
}
@media (max-width: 575.98px) {
  .income-content .card, .balance-content .card { margin-bottom:1rem; }
  .income-filters input[type=date], .balance-filters input[type=date] { font-size:.75rem; }
  .income-filters .btn, .income-filters a.btn, .balance-filters .btn, .balance-filters a.btn { font-size:.65rem; padding:.35rem .5rem; }
  .income-filters .presets-group a.btn, .balance-filters .presets-group a.btn { flex:1 1 calc(50% - .5rem); }
  .income-filters .export-group .btn, .balance-filters .export-group .btn { font-size:.7rem; padding:.4rem .5rem; }
  .income-filters .vr, .balance-filters .vr { display:none !important; }
}

  /* === Fix: Notificaciones detrás de la navbar === */
  /* Aseguramos que la navbar tenga un z-index consistente y las notificaciones la superen */
  .app-navbar { z-index: 1200; }
  /* Notificaciones (clase .notification usada en varias vistas) */
  .notification { 
    z-index: 2000 !important; 
    top: calc(var(--app-nav-height, 56px) + 1rem); /* Evita quedar tapada */
  }
  /* Sistema de toasts (#pos-toast) forzado encima también */
  #pos-toast, #pos-toast .pos-toast-item { z-index: 2000 !important; }
  @media (max-width: 575.98px){
    .notification { top: calc(var(--app-nav-height, 54px) + .6rem); right:.6rem; left:.6rem; width:auto; }
  }


/* Offset main content for fixed-top navbar so it doesn't overlap */
body.has-app-nav .app-navbar.fixed-top + main.container-fluid,
.app-navbar.fixed-top + main.container-fluid {
  padding-top: calc(var(--app-nav-height, 56px) + .75rem) !important;
}
/* Cuando hay mensajes flash: nav + .container-fluid (flashes) + main */
.app-navbar.fixed-top + .container-fluid { /* contenedor de flashes */
  padding-top: calc(var(--app-nav-height, 56px) + .5rem) !important;
}
.app-navbar.fixed-top + .container-fluid + main.container-fluid {
  /* Evita doble desplazamiento si ya se aplicó al contenedor de flashes */
  padding-top: .75rem !important;
}

/* ================= Floor Plan Responsive Enhancements (NEW) ================= */
/* Scope selectors so we don't accidentally affect other pages */
/* Toolbar wrapping & compacting */
.floor-toolbar-condensed .btn-group, .floor-toolbar-condensed .d-flex { flex-wrap:wrap; }
/* Strong: preserve natural canvas aspect and scale via transform (prevents X/Y stretching of tiles)
  This block intentionally comes last for specificity and will be used by the JS scaler to set
  --fd-natural-width / --fd-natural-height and --fd-aspect. The JS will compute a uniform scale
  and apply it via transform to `.floor-scale-layer` so tiles (positioned in %) keep their shape. */
/* VERSIÓN QUE FUNCIONABA (styles_antes.css) */
.floor-zoom-wrap { position:relative; display:inline-block; line-height:0; }
.floor-scale-layer { position:relative; transform-origin: top left; will-change: transform; }
.floor-canvas { position:relative; border:none; border-radius:12px; background:#fff; background-size:cover; background-position:center; min-height:480px; }
.floor-center { overflow: auto !important; }

.floor-toolbar-condensed .btn-group .btn { margin-bottom:.35rem; }

/* Side panel overlay mode on small screens */
@media (max-width: 991.98px){
  #sideListPanel.side-panel { width:280px; box-shadow:-4px 0 14px -2px rgba(0,0,0,.25); }
  body.floor-panel-open { overflow:hidden; }
  body.floor-panel-open::before { content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1040; animation:fp-fade .18s ease; }
  #sideListPanel.side-panel { position:fixed; top:var(--app-nav-height,56px); height:calc(100vh - var(--app-nav-height,56px)); border-radius:0; background:var(--color-card,#fff); z-index:1050; }
  #sideListPanel.side-panel.open { transform:translateX(0); }
}
@keyframes fp-fade { from { opacity:0; } to { opacity:1; } }

/* Canvas adaptive container: allow horizontal scrolling but keep centered when space */
@media (max-width: 991.98px){
  .floor-center { align-items:flex-start; padding:0.5rem; }
  #floorCanvas { transform-origin:top left !important; }
}

/* Ultra small devices: ensure minimum tap size & readable numbers */
@media (max-width: 575.98px){
  #floorCanvas .table-tile { padding:4px 4px 26px; }
  #floorCanvas .tile-number { font-size:14px; }
  #floorCanvas .tile-capacity { font-size:10px; }
  #floorCanvas .tile-actions { gap:4px; }
  #floorCanvas .btn.btn-xs { --bs-btn-padding-x:4px; min-width:24px; }
}

/* Improve touch interactions */
#floorCanvas { touch-action: none; } /* prevents pinch-zoom interfering while dragging */
@media (pointer: coarse){
  #floorCanvas .resize-handle { width:16px; height:16px; }
}

/* Zoom range full width on narrow viewports */
@media (max-width: 575.98px){
  #zoomRange { width:120px !important; }
  .floor-toolbar-wrap { width:100%; }
}

/* Fit buttons shrink */
@media (max-width: 420px){
  #fitWidthBtn, #fitAllBtn { padding:.3rem .45rem; font-size:.7rem; }
  #fitWidthBtn, #fitAllBtn i { margin-right:.25rem; }
}

/* Hide background dim slider when toolbar wraps heavily (already handled with JS for no image) */
@media (max-width: 480px){
  .dim-slider { flex-wrap:wrap; padding-left:4px; }
  .dim-slider label { display:none; }
}

/* Accessibility: focus ring inside tiles */
#floorCanvas .table-tile:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }

/* ===== Orders panel / Orders table sizing ===== */
/* Ensure orders content uses similar height/width constraints as the consumption/cart area
   so tables don't get squashed. Applies to the orders drawer and modal orders lists. */
#fdOrdersWrapper, #fdOrdersWrapper .orders-inner { box-sizing: border-box; }

/* Make any table or list inside the orders area fill available width and be scrollable */
#fdOrdersContent table, #fdOrdersContent .orders-list, #fdOrdersContent .orders-scroll,
#tamOrdersList, #tamOrdersList .order-card, #tamOrdersList .orders-list {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Give the orders scroll area a similar max-height to the consumption cart for parity */
#fdOrdersContent { max-height: calc(100vh - 160px) !important; overflow: auto !important; }
#fdOrdersContent .orders-scroll, #fdOrdersContent .orders-list { max-height: calc(100vh - 220px) !important; overflow: auto !important; }

/* Ensure tables use responsive wrapper so columns wrap and don't compress */
#fdOrdersContent .table-responsive, #fdOrdersContent .table { display: block; width: 100%; }
#fdOrdersContent .table td, #fdOrdersContent .table th { white-space: normal; word-break: break-word; }

/* Make tamOrdersList items more readable and avoid vertical compression */
#tamOrdersList .d-flex, #tamOrdersList .order-card { min-height: 56px !important; }

@media (max-width: 820px) {
  /* On phones keep orders drawer as bottom sheet but allow more height for the list */
  #fdOrdersWrapper.fd-orders-wrapper { height: 60vh !important; max-height: 70vh !important; }
  #fdOrdersContent { max-height: calc(60vh - 64px) !important; }
  /* Ensure table rows scale comfortably */
  #fdOrdersContent .table td, #fdOrdersContent .table th { padding: .6rem .5rem !important; }
}

/* End Orders panel sizing */

/* ===== Merged from responsive.css (scoped, de-duplicated) ===== */
/* Global spacing & fluid typography scale */
:root {
  /* Spacing scale */
  --sp-0: 0; --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 2rem;
  /* Fluid type */
  --fs-body: clamp(14px, 1.6vw, 16px);
  --fs-sm: clamp(12px, 1.4vw, 14px);
  --fs-h1: clamp(22px, 3.6vw, 32px);
  --fs-h2: clamp(20px, 3.2vw, 28px);
  --fs-h3: clamp(18px, 2.8vw, 24px);
  --fs-h4: clamp(16px, 2.2vw, 20px);
}

/* Fluid body text and headings (keeps earlier font-family & weights) */
body { font-size: var(--fs-body); line-height: 1.45; }
h1, .h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.3; }

/* Default gutters on small screens for breathing room */
.container, .container-fluid { padding-left: var(--sp-4); padding-right: var(--sp-4); }
@media (max-width: 575.98px) {
  .container, .container-fluid { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}

/* Touch targets and inputs: comfortable on mobile/tablets */
@media (pointer: coarse), (max-width: 768px) {
  .btn { min-height: 42px; border-radius: 12px; }
  .btn.btn-sm { min-height: 36px; border-radius: 10px; }
  .form-control, .form-select { min-height: 40px; border-radius: 10px; }
  .input-group-text { min-height: 40px; }
}

/* Tables: improve legibility and spacing on small screens */
.table { font-size: .98rem; }
@media (max-width: 767.98px) {
  .table { font-size: .9rem; }
  .table th, .table td { padding: .5rem .55rem; }
}

/* Utilities */
.wrap-anywhere { word-break: break-word; overflow-wrap: anywhere; }

/* Modals: friendlier margins and full-height feel on phones */
@media (max-width: 575.98px) {
  .modal-dialog { margin: .75rem; }
  .modal-content { border-radius: 14px; }
}

/* Forms: spacing & helper text sizes */
.form-label { margin-bottom: .3rem; }
.form-text { font-size: var(--fs-sm); }
@media (max-width: 575.98px) { .row.g-3, .row.g-2, .row.g-1 { --bs-gutter-y: .65rem; } }

/* Lists and badges sizing */
.badge { border-radius: .6rem; }

/* Safe-area for iOS (e.g., PWA) */
@supports(padding: max(0px)) { body { padding-bottom: env(safe-area-inset-bottom); } }

/* Kitchen/Cashier cards: better rhythm on narrow screens */
@media (max-width: 820px) {
  .order-card { padding: .85rem; }
  .order-card .btn { padding: .4rem .6rem; }
}

/* POS menu grid guardrails */
.menu-items-grid { gap: .9rem 1rem; }
@media (max-width: 600px) { .menu-items-grid { --col-min: 150px; gap: .75rem; } }
/* ===== End merged responsive.css ===== */
/* Additional mobile override to ensure menu category chips wrap and are visible */
@media (max-width: 480px) {
  .categories-bar { overflow: visible !important; }
  .categories-scroll, #menuModal .categories-scroll { flex-wrap: wrap !important; overflow-x: visible !important; }
  .categories-scroll.full-wrap, #menuModal .categories-scroll.full-wrap { flex-wrap: wrap !important; }
  .cat-chip, .category-btn, #menuModal .cat-chip, #menuModal .category-btn {
    white-space: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: calc(100% - 12px) !important;
    padding: 6px 8px !important;
    font-size: 0.92rem !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
  }
}

/* Product-assign modal: ensure it is usable on small screens */
@media (max-width: 720px) {
  .product-assign-modal .modal-dialog { margin: .5rem !important; max-width: calc(100% - 16px) !important; }
  .product-assign-modal .modal-content { border-radius: 10px !important; }
  .product-assign-modal .pa-select { min-width: 64px !important; width: auto !important; }
  .product-assign-modal .table-responsive { overflow: auto !important; }
  .product-assign-modal table thead th { position: sticky !important; top: 0 !important; background: #fff !important; z-index: 3 !important; }
  .product-assign-modal table td { word-break: break-word !important; white-space: normal !important; }
}

/* Mobile: convert product-assign table into stacked rows for readability */
@media (max-width: 720px) {
  .product-assign-modal .modal-body { max-height: calc(100vh - 160px); overflow: auto; }
  .product-assign-modal table { width: 100% !important; border-collapse: separate !important; }
  .product-assign-modal thead { display: none !important; }
  .product-assign-modal tbody tr { display: block !important; margin-bottom: .6rem !important; background: var(--color-card, #fff) !important; border: 1px solid var(--color-border, #e9ecef) !important; border-radius: 8px !important; padding: .35rem .4rem !important; }
  .product-assign-modal tbody td { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: .4rem .45rem !important; }
  .product-assign-modal tbody td:first-child { padding-left: .6rem !important; }
  .product-assign-modal tbody td:before { content: '' !important; font-weight: 600 !important; color: var(--color-muted, #6c757d) !important; margin-right: .5rem !important; display: inline-block !important; }
  .product-assign-modal tbody td:nth-child(1):before { content: 'ID' !important; width: 3.5ch !important; }
  .product-assign-modal tbody td:nth-child(2):before { content: 'Producto' !important; }
  .product-assign-modal tbody td:nth-child(3):before { content: 'Cant' !important; width: 4ch !important; }
  .product-assign-modal tbody td:nth-child(4):before { content: 'Precio' !important; width: 6ch !important; }
  .product-assign-modal tbody td:nth-child(5):before { content: 'Parte' !important; width: 6ch !important; }
  .product-assign-modal tbody td .pa-select { min-width: 56px !important; width: auto !important; }
  .product-assign-modal .modal-footer { position: sticky !important; bottom: 0 !important; background: var(--color-card, #fff) !important; z-index: 6 !important; box-shadow: 0 -6px 12px rgba(0,0,0,0.06) !important; }
}

/* Remove any pseudo-element spacer on the zoom wrapper that could create blank space */
.floor-zoom-wrap::before{
  content: none !important;
  display: none !important;
  padding-top: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* === Exclude navbar from colorful-theme ===
   Prevent the document-level `.colorful-theme` from tinting the top nav.
   Keep the navbar's own `bg-*` / `.app-navbar` rules and active link color.
*/
.colorful-theme nav.app-navbar,
.colorful-theme .app-navbar {
  background: revert !important;
  background-color: revert !important;
  /* Force navbar text to white for contrast when colorful theme tints surfaces */
  color: #fff !important;
  box-shadow: revert !important;
  backdrop-filter: revert !important;
  -webkit-backdrop-filter: revert !important;
}

.colorful-theme nav.app-navbar .container-fluid,
.colorful-theme .app-navbar > .container-fluid {
  background: transparent !important;
}

.colorful-theme nav.app-navbar .navbar-nav .nav-link,
.colorful-theme .app-navbar .navbar-nav .nav-link,
.colorful-theme .app-navbar .nav-link,
.colorful-theme .app-navbar .navbar-brand {
  background: transparent !important;
  color: #fff !important;
}

.colorful-theme nav.app-navbar .navbar-nav .nav-link.active,
.colorful-theme .app-navbar .navbar-nav .nav-link.active {
  /* Active nav links must remain readable against the colorful header.
     Use white text and a subtle translucent white background for contrast. */
  color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
  text-decoration: none !important;
}

/* Ensure readable text when primary-colored pills / category chips are active
   Some category/chip components reuse .nav-pills or custom classes; force
   high-contrast (white) text when the background is the primary color. */
.colorful-theme .nav-pills .nav-link.active,
.colorful-theme .nav-pills .show > .nav-link,
.colorful-theme .cat-chip.active,
.colorful-theme .category-btn.active,
.colorful-theme #menuModal .categories-scroll .cat-chip.active,
.colorful-theme .categories-scroll .cat-chip.active {
  color: #fff !important;
}

/* Ensure category / pill selected text is readable even when colorful-theme is off.
   Some components set the background to the primary color but leave the text
   colored with the primary variable. Force white text for active pills. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.cat-chip.active,
.category-btn.active,
#menuModal .categories-scroll .cat-chip.active,
.categories-scroll .cat-chip.active {
  color: #fff !important;
}

/* Stronger: very-specific selectors to override any prior color rules
   (covers top-level nav-pills and the menu categories area). */
html body #menuModal .categories-scroll .cat-chip.active,
html body #menuModal .categories-scroll .category-btn.active,
html body .categories-scroll .cat-chip.active,
html body .nav-pills.nav-pills .nav-link.active,
html body .nav-pills .nav-link.active {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

/* Global safety: ensure selected/primary-background elements use white text,
   but avoid forcing white on all descendants (which breaks dropdowns). */
.bg-primary,
.btn-primary,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-outline-primary.show,
.list-group-item.active,
.category-btn.active,
.cat-chip.active,
#menuModal .categories-scroll .cat-chip.active,
.categories-scroll .cat-chip.active {
  color: #fff !important;
}

/* Keep icons inside selected pills readable */
.nav-pills .nav-link.active i,
.category-btn.active i,
.cat-chip.active i,
.list-group-item.active i {
  color: #fff !important;
}