/* Fooodis Admin Custom Theme
   Modern light/dark UI for the Laravel admin dashboard
*/

/* =========================
   Color system
   ========================= */
:root {
  --bg-body: #e2e8f0;
  --bg-header: #f1f5f9;
  --bg-sidebar: #f1f5f9;
  --bg-card: #f8fafc;
  --bg-card-soft: #e2e8f0;
  --bg-input: #ffffff;

  --text-primary: #1d2029;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --border-subtle: #e2e8f0;
  --border-strong: #cbd5e1;

  --primary: #6366f1;
  --primary-soft: #4f46e5;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f97316;
  --info: #0ea5e9;

  /* Border-radius tokens — unified system */
  --radius-lg: 12px;       /* Cards, modals, large containers */
  --radius-md: 12px;       /* Cards (alias), medium elements */
  --radius-sm: 8px;        /* Inputs, buttons, small elements */
  --radius-xs: 6px;        /* Badges, tiny elements */
  --radius-pill: 999px;    /* Pills, tags, nav items */
  --radius-card: 12px;     /* Explicit card alias */

  --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.12);
}

body.dark-mode {
  --bg-body: #1d2029;
  --bg-header: #1d2029;
  --bg-sidebar: #10131a;
  --bg-card: #1e293b;
  --bg-card-soft: #342866;
  --bg-input: #1e293b;

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.86);
  --text-muted: rgba(255, 255, 255, 0.65);

  --border-subtle: rgba(152, 128, 255, 0.22);
  --border-strong: rgba(152, 128, 255, 0.38);

  --primary: #9880ff;
  --primary-soft: #342866;
  --success: #c7d037;
  --warning: #e8f24c;
  --info: #9880ff;

  --shadow-soft: 0 14px 35px rgba(0, 0, 0, 0.35);
}

body.dark-mode.dashboard-theme {
  --bg-body: #1d2029;
  --bg-header: #1d2029;
  --bg-sidebar: #10131a;
  --bg-card: #1e293b;
  --bg-card-soft: #342866;
  --bg-input: #1e293b;

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.86);
  --text-muted: rgba(255, 255, 255, 0.65);

  --border-subtle: rgba(152, 128, 255, 0.22);
  --border-strong: rgba(152, 128, 255, 0.38);

  --primary: #9880ff;
  --primary-soft: #342866;
  --success: #c7d037;
  --warning: #e8f24c;
  --info: #9880ff;

  --shadow-soft: 0 14px 35px rgba(0, 0, 0, 0.35);
}

/* =========================
   Base styles
   ========================= */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-body);
  color: var(--text-secondary);
  font-family: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--primary-soft);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--text-primary);
}

.text-muted,
small,
.small {
  color: var(--text-muted) !important;
}

/* =========================
   Layout: header & main
   ========================= */
.header {
  background: var(--bg-header) !important;
  background-image: none !important;
  border: 0;
  padding-top: 1.5rem !important;
  padding-bottom: 1rem !important;
  min-height: 80px;
  position: relative;
}

.header .container-fluid,
.header .row,
.header .col {
  background: transparent !important;
}

/* Critical fix: navbar-top positioning */
.navbar-top {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: auto !important;
  margin-top: 0 !important;
}

/* Fix navbar-top right-side elements - prevent jumping out of page */
.navbar-top .navbar-nav {
  position: relative !important;
  top: auto !important;
  margin-top: 0 !important;
}

.navbar-top .navbar-nav.align-items-center {
  flex-wrap: nowrap !important;
  gap: 0.5rem;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-top .navbar-nav.align-items-center .nav-item {
  margin: 0 0.25rem !important;
  flex-shrink: 0;
  position: relative !important;
  top: auto !important;
}

/* Fix buttons in header - prevent jumping */
.navbar-top .btn,
.header .btn {
  white-space: nowrap;
  margin: 0 0.15rem !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.78rem !important;
  position: relative !important;
  top: auto !important;
}

/* Ensure proper spacing for toggle and user menu */
.navbar-top .nav-item.dropdown {
  position: relative !important;
  top: auto !important;
}

/* Fix the user avatar/dropdown */
.navbar-top .avatar {
  position: relative !important;
  top: auto !important;
}

/* Fix header title spacing */
.header h2,
.header h6,
.header .text-white {
  margin-bottom: 0.25rem;
}

/* Ensure header row aligns items properly */
.header .row {
  align-items: center !important;
}

/* Fix any negative margins that might push elements up */
.header .container-fluid.mt--7,
.header .container-fluid.mt--8,
.header .container-fluid.mt--9 {
  margin-top: 0 !important;
}

/* CRITICAL: Fix navbar-main (top navbar) positioning without white gap */
#navbar-main,
.navbar-top#navbar-main {
  position: relative !important;
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: 1.75rem !important;
  padding-bottom: 0.75rem !important;
  background-color: var(--bg-header) !important;
}

body.dark-mode.dashboard-theme #navbar-main,
body.dark-mode.dashboard-theme .navbar-top#navbar-main {
  background-color: var(--bg-header) !important;
}

/* Fix the navbar container */
#navbar-main .container-fluid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Fix the right-side ul in navbar — only on desktop (>=992px) */
@media (min-width: 992px) {
  #navbar-main .navbar-nav.align-items-center {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #navbar-main .navbar-nav.align-items-center > li,
  #navbar-main .navbar-nav.align-items-center > .nav-item {
    display: flex !important;
    align-items: center !important;
    margin: 0 0.35rem !important;
  }
}

/* Fix avatar positioning */
#navbar-main .avatar,
#navbar-main .avatar-sm {
  position: relative !important;
  top: 0 !important;
}

/* Fix media body in navbar */
#navbar-main .media,
#navbar-main .media-body {
  display: flex !important;
  align-items: center !important;
}

.main-content {
  background-color: transparent !important;
  min-height: 100vh;
}

body.dark-mode .main-content {
  background-color: var(--bg-body) !important;
}

html.dark-mode,
html.dark-mode body,
.dark-mode,
.dark-mode body {
  background: var(--bg-body) !important;
  background-image: none !important;
}

html.dark-mode .main-content,
.dark-mode .main-content {
  background: var(--bg-body) !important;
  background-image: none !important;
}

.container-fluid,
.container-fluid.mt--7,
.container-fluid.mt--8,
.container-fluid.mt--9 {
  background-color: transparent !important;
}

body.dark-mode .bg-gradient-default,
body.dark-mode .bg-gradient-primary,
body.dark-mode .bg-gradient-info,
body.dark-mode .bg-gradient-dark {
  background: var(--bg-body) !important;
  background-image: none !important;
}

html.dark-mode .bg-gradient-default,
html.dark-mode .bg-gradient-primary,
html.dark-mode .bg-gradient-info,
html.dark-mode .bg-gradient-dark,
.dark-mode .bg-gradient-default,
.dark-mode .bg-gradient-primary,
.dark-mode .bg-gradient-info,
.dark-mode .bg-gradient-dark {
  background: var(--bg-body) !important;
  background-image: none !important;
}

body.dark-mode .bg-default {
  background: var(--bg-body) !important;
}

html.dark-mode .bg-default,
.dark-mode .bg-default {
  background: var(--bg-body) !important;
}

body.dark-mode .header.bg-gradient-default,
body.dark-mode .header.bg-gradient-primary,
body.dark-mode .header.bg-gradient-info,
body.dark-mode .header.bg-gradient-dark,
body.dark-mode .header.bg-default {
  background: var(--bg-body) !important;
  background-image: none !important;
}

html.dark-mode .header.bg-gradient-default,
html.dark-mode .header.bg-gradient-primary,
html.dark-mode .header.bg-gradient-info,
html.dark-mode .header.bg-gradient-dark,
html.dark-mode .header.bg-default,
.dark-mode .header.bg-gradient-default,
.dark-mode .header.bg-gradient-primary,
.dark-mode .header.bg-gradient-info,
.dark-mode .header.bg-gradient-dark,
.dark-mode .header.bg-default {
  background: var(--bg-body) !important;
  background-image: none !important;
}

body.dark-mode .header .mask.bg-gradient-default,
body.dark-mode .header .mask.bg-gradient-primary,
body.dark-mode .header .mask.bg-gradient-info,
body.dark-mode .header .mask.bg-gradient-dark,
body.dark-mode .header .mask.bg-default {
  background: var(--bg-body) !important;
  background-image: none !important;
  opacity: 1 !important;
}

html.dark-mode .header .mask.bg-gradient-default,
html.dark-mode .header .mask.bg-gradient-primary,
html.dark-mode .header .mask.bg-gradient-info,
html.dark-mode .header .mask.bg-gradient-dark,
html.dark-mode .header .mask.bg-default,
.dark-mode .header .mask.bg-gradient-default,
.dark-mode .header .mask.bg-gradient-primary,
.dark-mode .header .mask.bg-gradient-info,
.dark-mode .header .mask.bg-gradient-dark,
.dark-mode .header .mask.bg-default {
  background: var(--bg-body) !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* =========================
   Sidebar
   ========================= */
.navbar-vertical,
.navbar-vertical.navbar-expand-md,
#sidenav-main {
  background-color: var(--bg-sidebar) !important;
  border-right: none !important;
  box-shadow: none !important;
}

.navbar-vertical .navbar-brand {
  padding: 1.25rem 1.5rem 1rem;
}

.navbar-vertical .navbar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  margin: 0.15rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--text-primary) !important; /* base: readable on light; dark-mode overrides below */
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.navbar-vertical .navbar-nav .nav-link i {
  font-size: 0.95rem;
  color: rgba(148, 163, 184, 0.9) !important;
}

.navbar-vertical .navbar-nav .nav-link:hover {
  background-color: rgba(148, 163, 184, 0.16) !important;
  color: #e5e7eb !important;
  transform: translateX(2px);
}

.navbar-vertical .navbar-nav .nav-link.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(232, 242, 76, 0.22);
}

body.dark-mode .navbar-vertical .navbar-nav .nav-link.active {
  border-left: 3px solid var(--warning) !important;
}

.navbar-vertical .navbar-nav .nav-link.active i {
  color: #ffffff !important;
}

.navbar-vertical .navbar-nav .nav-link .nav-link-text {
  flex: 1;
}

body.sidebar-collapsed .navbar-vertical.fixed-left,
body.sidebar-collapsed #sidenav-main {
  width: 72px !important;
  max-width: 72px !important;
  min-width: 72px !important;
  overflow-x: hidden !important;
}

body.sidebar-collapsed .navbar-vertical .navbar-collapse {
  overflow: hidden !important;
}

body.sidebar-collapsed .navbar-vertical .navbar-brand-img {
  max-height: 28px;
  width: auto;
}

body.sidebar-collapsed .navbar-vertical {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.sidebar-collapsed .navbar-vertical > .container-fluid,
body.sidebar-collapsed .navbar-vertical .container-fluid.mt-3 {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center !important;
}
body.sidebar-collapsed .navbar-vertical .navbar-brand {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  min-width: 0;
  margin: 0 !important;
}

/* Top logo: hide in collapsed mode — circular mini-logo at bottom is shown instead */
body.sidebar-collapsed .navbar-vertical .navbar-brand,
body.sidebar-collapsed .navbar-vertical .navbar-brand .animated-logo {
  display: none !important;
}

/* Hide user profile section text */
body.sidebar-collapsed .navbar-vertical .media-body,
body.sidebar-collapsed .navbar-vertical .media .media-body,
body.sidebar-collapsed .navbar-vertical .sidenav-header .media-body,
body.sidebar-collapsed .navbar-vertical .dropdown-toggle span,
body.sidebar-collapsed .navbar-vertical .nav-link-text,
body.sidebar-collapsed .navbar-vertical .navbar-heading,
body.sidebar-collapsed .navbar-vertical hr.my-3,
body.sidebar-collapsed .navbar-vertical h6,
body.sidebar-collapsed .navbar-vertical small,
body.sidebar-collapsed .navbar-vertical .copyright {
  display: none !important;
}

/* Center user avatar in collapsed mode */
body.sidebar-collapsed .navbar-vertical .media {
  justify-content: center !important;
}

body.sidebar-collapsed .navbar-vertical .media .avatar {
  margin-right: 0 !important;
}

/* Nav links: center icons, hide ALL text using font-size trick */
body.sidebar-collapsed .navbar-vertical .navbar-nav .nav-link {
  justify-content: center !important;
  text-align: center;
  padding: 0.65rem 0.5rem !important;
  margin: 0.15rem 0.5rem;
  font-size: 0 !important;
  line-height: 0 !important;
}

body.sidebar-collapsed .navbar-vertical .navbar-nav .nav-link > span,
body.sidebar-collapsed .navbar-vertical .navbar-nav .nav-link .nav-link-text,
body.sidebar-collapsed .navbar-vertical .nav-link > span:not(.badge):not(.blob) {
  display: none !important;
}

body.sidebar-collapsed .navbar-vertical .navbar-nav .nav-link i,
body.sidebar-collapsed .navbar-vertical .navbar-nav .nav-link .ni,
body.sidebar-collapsed .navbar-vertical .navbar-nav .nav-link [class^="ni-"],
body.sidebar-collapsed .navbar-vertical .navbar-nav .nav-link [class*=" ni-"],
body.sidebar-collapsed .navbar-vertical .navbar-nav .nav-link [class^="fa-"],
body.sidebar-collapsed .navbar-vertical .navbar-nav .nav-link [class*=" fa-"] {
  font-size: 1.15rem !important;
  line-height: 1.5 !important;
  margin-right: 0 !important;
}

/* Subcategory dropdowns in collapsed mode: hide within sidebar */
body.sidebar-collapsed .navbar-vertical .nav-item > .collapse,
body.sidebar-collapsed .navbar-vertical .nav-item > .nav.nav-sm,
body.sidebar-collapsed .navbar-vertical .navbar-nav .nav.nav-sm {
  display: none !important;
}

body.sidebar-collapsed .navbar-vertical .nav-item {
  position: relative;
}

/* Flyout popup (appended to body by JS to escape overflow:hidden) */
.sidebar-flyout-popup {
  position: fixed;
  z-index: 10000;
  background: var(--bg-sidebar, #10131a);
  border: 1px solid var(--border-subtle, rgba(152,128,255,0.22));
  border-radius: 0.5rem;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.5);
  padding: 0.5rem 0;
  min-width: 200px;
  max-height: 60vh;
  overflow-y: auto;
}
.sidebar-flyout-popup .nav-link {
  display: flex !important;
  align-items: center;
  padding: 0.5rem 1rem !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: var(--text-secondary, #94a3b8) !important;
  white-space: nowrap;
  text-decoration: none;
}
.sidebar-flyout-popup .nav-link:hover {
  color: var(--warning, #e8f24c) !important;
  background: rgba(152,128,255,0.08);
}
.sidebar-flyout-popup .nav-link i {
  font-size: 0.8rem !important;
  margin-right: 0.5rem !important;
  width: 1.2rem;
  text-align: center;
  color: var(--text-muted, #64748b);
}
.sidebar-flyout-popup .nav-link:hover i {
  color: var(--warning, #e8f24c) !important;
}

/* Subcategory parent items: add a small dot indicator in collapsed mode */
body.sidebar-collapsed .navbar-vertical .nav-link[data-toggle="collapse"]::before {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary, #9880ff);
  opacity: 0.6;
}

body.sidebar-collapsed .navbar-vertical .nav-link[data-toggle="collapse"]:hover::before {
  opacity: 1;
}

/* Circular mini logo at bottom — shown when sidebar is collapsed */
body.sidebar-collapsed #sidebar-mini-logo {
  display: block !important;
}

/* Hide search bar in collapsed sidebar */
body.sidebar-collapsed #sidebar-search-wrapper {
  display: none !important;
}
body:not(.sidebar-collapsed) #sidebar-mini-logo {
  display: none !important;
}
#sidebar-mini-logo {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#sidebar-mini-logo:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(152,128,255,0.25);
}

/* Fix chevron rotation pivot to center */
.navbar-vertical .navbar-nav .nav-link[data-toggle="collapse"]::after {
  transform-origin: center center !important;
}

/* Hide dropdown arrows in collapsed mode */
body.sidebar-collapsed .navbar-vertical [data-toggle="collapse"]::after {
  display: none !important;
}

body.sidebar-collapsed .navbar-vertical.fixed-left ~ .main-content {
  margin-left: 72px !important;
}

body.sidebar-collapsed .navbar-vertical.fixed-left ~ .main-content .navbar-top {
  left: 72px !important;
}

body.sidebar-collapsed .navbar-vertical.fixed-right ~ .main-content {
  margin-right: 72px !important;
  margin-left: 0 !important;
}

body.sidebar-collapsed .navbar-vertical.fixed-right ~ .main-content .navbar-top {
  right: 72px !important;
  left: 0 !important;
}

.navbar-vertical .navbar-nav .dropdown-menu {
  background-color: var(--bg-card) !important;
  border-radius: var(--radius-md);
  border-color: var(--border-subtle);
}

.navbar-vertical .copyright,
.navbar-vertical small {
  color: var(--text-muted) !important;
}

/* Light theme: make sidebar items darker for visibility on white */
body:not(.dark-mode) .navbar-vertical,
body:not(.dark-mode) #sidenav-main {
  background-color: #ffffff !important;
}

body:not(.dark-mode) .navbar-vertical .navbar-nav .nav-link {
  color: var(--text-primary) !important; /* main text */
}

body:not(.dark-mode) .navbar-vertical .navbar-nav .nav-link i {
  color: #6b7280 !important; /* icons */
}

body:not(.dark-mode) .navbar-vertical .navbar-nav .nav-link:hover {
  background-color: rgba(15, 23, 42, 0.05) !important;
  color: #020617 !important;
}

body:not(.dark-mode) .navbar-vertical .navbar-nav .nav-link.active {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
}

/* Dark theme: override sidebar colors for contrast on dark background */
body.dark-mode .navbar-vertical,
body.dark-mode #sidenav-main {
  background-color: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border-subtle) !important;
}

body.dark-mode .navbar-vertical .navbar-nav .nav-link {
  color: var(--text-secondary) !important;
}

body.dark-mode .navbar-vertical .navbar-nav .nav-link i {
  color: var(--text-muted) !important;
}

body.dark-mode .navbar-vertical .navbar-nav .nav-link:hover {
  background-color: transparent !important;
  color: var(--warning) !important;
  transform: none !important;
}

body.dark-mode .navbar-vertical .navbar-nav .nav-link:hover i {
  color: var(--warning) !important;
}

body.dark-mode .navbar-vertical .navbar-nav .nav-link.active {
  background: transparent !important;
  color: var(--warning) !important;
  box-shadow: none !important;
}

body.dark-mode .navbar-vertical .navbar-nav .nav-link.active i {
  color: var(--warning) !important;
}

body.dark-mode .navbar-vertical .navbar-nav .nav-link.active:before {
  content: none !important;
  border-left: 0 !important;
}

body.dark-mode.dashboard-theme .navbar-vertical .navbar-nav .nav-link.active {
  background: transparent !important;
  color: var(--warning) !important;
  box-shadow: none !important;
}

body.dark-mode.dashboard-theme .navbar-vertical .navbar-nav .nav-link:hover {
  background-color: transparent !important;
  color: var(--warning) !important;
  transform: none !important;
}

body.dark-mode.dashboard-theme .navbar-vertical .navbar-nav .nav-link:hover i {
  color: var(--warning) !important;
}

body.dark-mode.dashboard-theme a {
  color: #9880ff;
}

body.dark-mode.dashboard-theme a:hover {
  color: #e8f24c;
}

body.dark-mode.dashboard-theme .bg-gradient-default,
body.dark-mode.dashboard-theme .bg-gradient-primary {
  background: var(--bg-body) !important;
  background-image: none !important;
}

body.dark-mode.dashboard-theme .icon-shape.bg-yellow {
  background-color: #e8f24c !important;
  color: #1d2029 !important;
}

body.dark-mode.dashboard-theme .icon-shape.bg-success {
  background-color: #c7d037 !important;
  color: #1d2029 !important;
}

body.dark-mode.dashboard-theme .icon-shape.bg-warning {
  background-color: #e8f24c !important;
  color: #1d2029 !important;
}

body.dark-mode .icon-shape.bg-info,
body.dark-mode.dashboard-theme .icon-shape.bg-info {
  background-color: #9880ff !important;
  color: #1d2029 !important;
}

body.dark-mode .icon-shape.bg-danger,
body.dark-mode.dashboard-theme .icon-shape.bg-danger {
  background-color: #342866 !important;
  color: #ffffff !important;
}

/* Restore gradients for icon shapes in dark mode (analytics dashboard) */
body.dark-mode .icon-shape.bg-gradient-primary,
body.dark-mode.dashboard-theme .icon-shape.bg-gradient-primary {
    background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%) !important;
    color: #ffffff !important;
}

body.dark-mode .icon-shape.bg-gradient-success,
body.dark-mode.dashboard-theme .icon-shape.bg-gradient-success {
    background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important;
    color: #ffffff !important;
}

body.dark-mode .icon-shape.bg-gradient-info,
body.dark-mode.dashboard-theme .icon-shape.bg-gradient-info {
    background: linear-gradient(87deg, #11cdef 0, #1171ef 100%) !important;
    color: #ffffff !important;
}

body.dark-mode .icon-shape.bg-gradient-danger,
body.dark-mode.dashboard-theme .icon-shape.bg-gradient-danger {
    background: linear-gradient(87deg, #f5365c 0, #f56036 100%) !important;
    color: #ffffff !important;
}

body.dark-mode .icon-shape.bg-gradient-warning,
body.dark-mode.dashboard-theme .icon-shape.bg-gradient-warning {
    background: linear-gradient(87deg, #fb6340 0, #fbb140 100%) !important;
    color: #ffffff !important;
}

/* Restore text-white behavior ONLY for these specific gradient backgrounds */
body.dark-mode .icon-shape[class*="bg-gradient-"] i,
body.dark-mode .icon-shape[class*="bg-gradient-"] svg,
body.dark-mode.dashboard-theme .icon-shape[class*="bg-gradient-"] i,
body.dark-mode.dashboard-theme .icon-shape[class*="bg-gradient-"] svg {
    color: #ffffff !important;
}

/* Ensure Font Awesome icons render correctly inside badges */
.icon-shape i.fas,
.icon-shape i.fa-solid {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

.icon-shape i.far,
.icon-shape i.fa-regular {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.icon-shape i.fab,
.icon-shape i.fa-brands {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.icon-shape i.fa {
  font-family: "FontAwesome" !important;
  font-weight: normal !important;
  font-style: normal !important;
}

.icon-shape i.ni,
.icon-shape .ni,
.icon-shape i.ni::before,
.icon-shape .ni::before {
  font-family: "NucleoIcons" !important;
  font-weight: normal !important;
  font-style: normal !important;
}

/* Fix invisible icons in stats cards: force dark icon color on bright backgrounds */
body.dark-mode .icon-shape.bg-yellow i,
body.dark-mode .icon-shape.bg-yellow svg,
body.dark-mode .icon-shape.bg-success i,
body.dark-mode .icon-shape.bg-success svg,
body.dark-mode .icon-shape.bg-warning i,
body.dark-mode .icon-shape.bg-warning svg,
body.dark-mode .icon-shape.bg-info i,
body.dark-mode .icon-shape.bg-info svg,
body.dark-mode.dashboard-theme .icon-shape.bg-yellow i,
body.dark-mode.dashboard-theme .icon-shape.bg-yellow svg,
body.dark-mode.dashboard-theme .icon-shape.bg-success i,
body.dark-mode.dashboard-theme .icon-shape.bg-success svg,
body.dark-mode.dashboard-theme .icon-shape.bg-warning i,
body.dark-mode.dashboard-theme .icon-shape.bg-warning svg,
body.dark-mode.dashboard-theme .icon-shape.bg-info i,
body.dark-mode.dashboard-theme .icon-shape.bg-info svg {
    color: #1d2029 !important;
}

/* Ensure the text-white class doesn't override it */
body.dark-mode .icon-shape.text-white i,
body.dark-mode .icon-shape.text-white svg,
body.dark-mode.dashboard-theme .icon-shape.text-white i,
body.dark-mode.dashboard-theme .icon-shape.text-white svg {
    color: #1d2029 !important;
}

body.dark-mode .icon-shape i.ni,
body.dark-mode .icon-shape .ni,
body.dark-mode .icon-shape i.ni::before,
body.dark-mode .icon-shape .ni::before,
html.dark-mode .icon-shape i.ni,
html.dark-mode .icon-shape .ni,
html.dark-mode .icon-shape i.ni::before,
html.dark-mode .icon-shape .ni::before,
.dark-mode .icon-shape i.ni,
.dark-mode .icon-shape .ni,
.dark-mode .icon-shape i.ni::before,
.dark-mode .icon-shape .ni::before,
body.dark-mode.dashboard-theme .icon-shape i.ni,
body.dark-mode.dashboard-theme .icon-shape .ni,
body.dark-mode.dashboard-theme .icon-shape i.ni::before,
body.dark-mode.dashboard-theme .icon-shape .ni::before {
    font-family: "NucleoIcons" !important;
    font-weight: normal !important;
    font-style: normal !important;
}

body.dark-mode .icon-shape.bg-danger i,
body.dark-mode .icon-shape.bg-danger svg,
body.dark-mode.dashboard-theme .icon-shape.bg-danger i,
body.dark-mode.dashboard-theme .icon-shape.bg-danger svg {
    color: #ffffff !important;
}

/* =========================
   Cards & generic containers
   ========================= */
.card,
.card.shadow,
.card.bg-secondary {
  background-color: var(--bg-card) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-soft);
  overflow: hidden !important; /* Ensure children don't overflow rounded corners */
}

.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
  border-top-left-radius: var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
}

.card-footer {
  background-color: transparent !important;
  border-top: 1px solid rgba(148, 163, 184, 0.25) !important;
  border-bottom-left-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
}

.card-title {
  color: var(--text-primary) !important;
  font-weight: 600;
}

.card-text {
  color: var(--text-secondary) !important;
}

/* =========================
   Buttons - Modern & Minimal
   ========================= */
.btn {
  border-radius: var(--radius-pill) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.btn-sm {
  font-size: 0.6rem !important;
  padding: 0.15rem 0.3rem !important;
  line-height: 1 !important;
  margin-right: 2px !important;
  margin-bottom: 2px !important;
  min-width: auto !important;
}

.btn-sm i {
  font-size: 0.6rem !important;
  margin-right: 2px !important;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Header action buttons specific style - apply to navbar-top as well */
.navbar-top .btn,
.header .btn,
.header .btn-neutral,
.header .btn-secondary,
.header .btn-primary,
.header .btn-info,
.header .btn-danger,
.header .btn-warning {
  background: rgba(255, 255, 255, 0.05) !important; /* Very subtle background */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
  margin-left: 0.5rem !important;
}

.navbar-top .btn:hover,
.header .btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px);
}

/* Specific button variants in dark mode - subdued */
body.dark-mode .btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

body.dark-mode .btn-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

body.dark-mode .btn-success {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #2ecc71 !important;
}

body.dark-mode .btn-warning {
  background: rgba(249, 115, 22, 0.15) !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
  color: #fb923c !important;
}

body.dark-mode .btn-info {
  background: rgba(6, 182, 212, 0.15) !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
  color: #22d3ee !important;
}

body.dark-mode .btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.2);
}

.btn-info {
  background-color: var(--info) !important;
  border-color: var(--info) !important;
  color: #ffffff !important;
}

.btn-success {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
  color: #ffffff !important;
}

.btn-danger {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #ffffff !important;
}

.btn-warning {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
  color: #111827 !important;
}

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

.btn-outline-primary:hover {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

.btn-outline-secondary {
  background-color: transparent !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}

.btn-outline-secondary:hover {
  background-color: rgba(148, 163, 184, 0.18) !important;
}

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

.btn-outline-danger:hover {
  background-color: var(--danger) !important;
  color: #ffffff !important;
}

body.dark-mode .btn-secondary {
  background-color: var(--bg-card-soft) !important;
  border-color: var(--border-subtle) !important;
  color: #fff !important;
}

body.dark-mode .btn-secondary:hover {
  background-color: var(--bg-input) !important;
  border-color: var(--border-subtle) !important;
}

body.dark-mode a:hover {
  color: var(--warning);
}

/* Reinforce nav-pills in dark mode */
body.dark-mode .nav-pills .nav-link:not(.active) {
  background-color: var(--bg-card) !important;
  color: #fff !important;
  border: 1px solid var(--border-subtle) !important;
}

/* Icon-only small button (filter toggle etc.) */
.btn.btn-icon,
.btn-icon-only {
  border-radius: 999px !important;
}

/* =========================
   Forms & inputs
   ========================= */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--text-primary) !important;
  padding: 0.6rem 1rem !important;
  box-shadow: none !important;
}
/* Phone inputs (intl-tel-input): override form-control padding-left
   The global .form-control sets padding:0.6rem 1rem !important which includes
   padding-left:1rem, blocking the library's dynamic padding. Fix by setting
   padding-left based on intl-tel-input mode. */
.iti--allow-dropdown .form-control,
.iti--allow-dropdown input.form-control,
.iti--allow-dropdown input[type="tel"],
.iti--allow-dropdown input[type="text"] {
  padding-left: 52px !important;
  border-radius: 0 8px 8px 0 !important;
}
.iti--separate-dial-code .form-control,
.iti--separate-dial-code input.form-control,
.iti--separate-dial-code input[type="tel"],
.iti--separate-dial-code input[type="text"] {
  padding-left: 90px !important;
  border-radius: 0 8px 8px 0 !important;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
}

/* Textarea specific - use card radius, not pill */
textarea.form-control {
  border-radius: var(--radius-md) !important;
  resize: vertical;
}

/* Select elements - use rounded corners, not pill */
select.form-control,
select.form-control[multiple],
select.form-control[size] {
  border-radius: var(--radius-md) !important;
}

/* Fix white card-body backgrounds */
.card-body,
.card-footer,
.table-responsive,
.table {
  background-color: var(--bg-card) !important;
}

body.dark-mode .card-body,
body.dark-mode .card-footer,
body.dark-mode .table-responsive,
body.dark-mode .table,
body.dark-mode .table tbody,
body.dark-mode .table thead {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .table td,
body.dark-mode .table th {
  background-color: transparent !important;
  border-color: var(--border-subtle) !important;
}

/* Additional fix for white backgrounds in cards */
body.dark-mode .card .card-body,
body.dark-mode .card .table-responsive,
body.dark-mode .bg-white,
body.dark-mode .bg-secondary,
body.dark-mode [class*="bg-white"],
body.dark-mode [class*="bg-secondary"] {
  background-color: var(--bg-card) !important;
}

body:not(.dark-mode) .card .card-body,
body:not(.dark-mode) .card .table-responsive,
body:not(.dark-mode) .bg-white,
body:not(.dark-mode) .bg-secondary {
  background-color: var(--bg-card) !important;
}

/* Force all white backgrounds to use theme colors */
body.dark-mode .main-content *[style*="background: white"],
body.dark-mode .main-content *[style*="background-color: white"],
body.dark-mode .main-content *[style*="background:#fff"],
body.dark-mode .main-content *[style*="background-color:#fff"] {
  background-color: var(--bg-card) !important;
}

body.dark-mode .card {
  background: linear-gradient(145deg, rgba(16, 19, 26, 0.72), rgba(41, 45, 51, 0.55)) !important;
  border: 1px solid var(--border-subtle) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark-mode .card .card-header,
body.dark-mode .card .card-body,
body.dark-mode .card .card-footer {
  background-color: transparent !important;
}

body.dark-mode .card .card-header {
  border-bottom-color: var(--border-subtle) !important;
}

/* Hide footer */
.footer,
footer.footer {
  display: none !important;
}

/* Dashboard stat cards equal height */
.card-stats {
  min-height: 130px !important;
}

/* Fix select and date inputs in dark mode */
body.dark-mode select,
body.dark-mode select.form-control,
body.dark-mode .custom-select,
body.dark-mode input[type="date"],
body.dark-mode input[type="text"],
body.dark-mode .datepicker,
body.dark-mode .input-group .form-control,
body.dark-mode .form-control-alternative,
body.dark-mode .input-group-alternative .form-control,
body.dark-mode .input-group-alternative {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
}

body.dark-mode .input-group-prepend .input-group-text,
body.dark-mode .input-group-append .input-group-text,
body.dark-mode .input-group-alternative .input-group-text {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .input-group-alternative,
body.dark-mode .input-group {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  background-color: var(--bg-card) !important;
}

body.dark-mode .input-group-alternative .form-control,
body.dark-mode .input-group .form-control {
  border: none !important;
  background-color: transparent !important;
}

body.dark-mode .input-group-prepend,
body.dark-mode .input-group-append {
  border: none !important;
}

body.dark-mode .input-daterange,
body.dark-mode .input-daterange.datepicker {
  border: none !important;
  box-shadow: none !important;
}

/* Fix order table filter inputs */
body.dark-mode .input-group.input-group-alternative {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-pill) !important;
}

body.dark-mode .input-group.input-group-alternative .form-control {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Fix select2 double frame in dark mode */
body.dark-mode .select2-container--default .select2-selection--single {
  background-color: var(--bg-card) !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .form-group .select2-container {
  border: none !important;
}

body.dark-mode .form-control-alternative.select2 {
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode select.form-control.form-control-alternative {
  border: none !important;
  box-shadow: none !important;
  background-color: var(--bg-card) !important;
}

body.dark-mode .form-group select.form-control {
  border: none !important;
  box-shadow: none !important;
}

/* Fix Filter button styling */
body.dark-mode .btn,
body.dark-mode .btn-primary,
body.dark-mode .btn-md,
body.dark-mode .btn-block,
body.dark-mode button.btn {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

body.dark-mode button.btn.btn-primary.btn-md.btn-block,
body.dark-mode button.btn.btn-primary {
  background-color: var(--bg-card) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  outline: none !important;
  padding: 10px 20px !important;
}

body.dark-mode .orders-filters .form-group[class*="col-"] {
  background-color: transparent !important;
  background: transparent !important;
}

body.dark-mode .orders-filters .row > [class*="col-"] {
  background-color: transparent !important;
  background: transparent !important;
}

body.dark-mode .orders-filters [class*="col-"] {
  background-color: transparent !important;
  background: transparent !important;
}

body.dark-mode .orders-filters .input-daterange.datepicker,
body.dark-mode .orders-filters .input-daterange {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .orders-filters .input-group {
  background-color: transparent !important;
}

body.dark-mode .orders-filters .input-group .form-control {
  background-color: transparent !important;
}

body.dark-mode .orders-filters .input-group-prepend .input-group-text,
body.dark-mode .orders-filters .input-group-append .input-group-text {
  background-color: transparent !important;
}

body.dark-mode .datepicker,
body.dark-mode .datepicker-dropdown,
body.dark-mode .datepicker.datepicker-dropdown {
  z-index: 3000 !important;
}

body.dark-mode .orders-filters button[type="submit"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
}

/* Fix AI Hub page styling */
body.dark-mode .card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
}

body.dark-mode .card-body {
  background-color: var(--bg-card) !important;
}

body.dark-mode .bg-gradient-primary {
  background: #1e293b !important;
}

body.dark-mode .aihub-inner-body {
  background: transparent !important;
  border: none !important;
}

/* AI Hub Container Styling */
.aihub-container-card,
.mobile-apps-container-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
}

/* Light mode: looks like a card */
body:not(.dark-mode) .aihub-container-card,
body:not(.dark-mode) .mobile-apps-container-card {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: .375rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; /* shadow-sm */
}

/* Dark mode: transparent */
body.dark-mode .aihub-container-card,
body.dark-mode .mobile-apps-container-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .aihub-container-card .card-header,
body.dark-mode .mobile-apps-container-card .card-header {
  background: transparent !important;
  border-bottom: none !important;
}

body.dark-mode .mobile-apps-inner-body {
  background: transparent !important;
  border: none !important;
}

#list-container #tabs-icons-text .nav-link,
#list-container #tabs-icons-text .nav-link * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

#list-container #tabs-icons-text .nav-link::selection,
#list-container #tabs-icons-text .nav-link *::selection {
  background: transparent !important;
}

#list-container #tabs-icons-text .nav-link::-moz-selection,
#list-container #tabs-icons-text .nav-link *::-moz-selection {
  background: transparent !important;
}

body.dark-mode .card.shadow-sm,
body.dark-mode .card.shadow,
body.dark-mode .card.hover-elevation,
body.dark-mode .hover-elevation {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

body.dark-mode .col-md-4 .card {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

/* Global styles for Nestable list (Menu Sorting) */
.dd3-content {
  border-radius: 0.375rem !important;
}

.dd3-handle {
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
}

/* Redesign drag handle */
.dd3-handle:before {
  content: "\f0c9" !important; /* fa-bars */
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* Dark mode styles for Nestable list (Menu Sorting) */
body.dark-mode .dd3-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: #fff !important;
}

body.dark-mode .dd3-content:hover {
  color: #2ea8e5 !important;
  background: var(--bg-card) !important;
}

body.dark-mode .dd3-handle {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: #fff !important;
}

body.dark-mode .dd3-handle:before {
  color: #fff !important;
}

body.dark-mode .dd3-handle:hover {
  background: var(--bg-card) !important;
  opacity: 0.8;
}

body.dark-mode .item-settings {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: #fff !important;
}

body.dark-mode .item-settings p label {
  color: #ccc !important;
}

body.dark-mode .item-settings p label input {
  background-color: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: #fff !important;
}

/* Bulk Price Update Form */
body.dark-mode .bulk-price-update {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Fix Menu Sorting Container Background in Dark Mode */
body.dark-mode .card > .row.bg-white.menu-manager-row {
  background-color: var(--bg-card) !important;
}

/* Ensure active state for toggle buttons is visible in dark mode */
body.dark-mode .btn-group-toggle .btn.active {
  background-color: #5e72e4 !important;
  color: #fff !important;
  border-color: #5e72e4 !important;
}

/* Make inner row of menu items transparent in dark mode */
body.dark-mode .dd3-content .row,
body.dark-mode .dd3-content span,
body.dark-mode .dd3-content label,
body.dark-mode .dd3-content div {
  background-color: transparent !important;
  background: transparent !important;
}
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-success,
body.dark-mode .btn-outline-danger,
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-primary:focus,
body.dark-mode .btn-outline-success:focus,
body.dark-mode .btn-outline-danger:focus,
body.dark-mode .btn-outline-secondary:focus,
body.dark-mode .btn-outline-primary:active,
body.dark-mode .btn-outline-success:active,
body.dark-mode .btn-outline-danger:active,
body.dark-mode .btn-outline-secondary:active {
  background-color: transparent !important;
  background: transparent !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Stretched Link Utility */
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

/* View Modes for Menu Items */
@media (min-width: 992px) {
  /* List Mode: Full width */
  .category-items.view-list .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Icon Mode: 3 per row */
  .category-items.view-icon .col-lg-6 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

/* List Mode Styling */
.category-items.view-list .menu-item-card .item-image-wrapper {
  flex: 0 0 10%;
  max-width: 10%;
  padding-right: 0;
}

.category-items.view-list .menu-item-card .col-md-8 {
  flex: 0 0 90%;
  max-width: 90%;
}

.category-items.view-list .item-image {
  height: 60px;
  width: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.category-items.view-list .menu-item-card .card-body {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.category-items.view-list .menu-item-card .item-title {
  margin-bottom: 0;
  font-size: 1rem;
  flex-grow: 1;
}

.category-items.view-list .menu-item-card .item-description {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0;
  width: 100%;
}

.category-items.view-list .menu-item-card .item-price {
  font-weight: bold;
}

/* Icon Mode Styling (Image Top) */
.category-items.view-icon .menu-item-card .row {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.category-items.view-icon .menu-item-card .item-image-wrapper {
  order: -1;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 200px !important;
  height: 200px !important;
  padding: 0 !important;
  overflow: hidden;
  display: block !important;
}

.category-items.view-icon .menu-item-card .col-md-8 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  padding: 0;
}

.category-items.view-icon .menu-item-card .item-image {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 0.375rem 0.375rem 0 0;
  display: block !important;
}

.category-items.view-icon .menu-item-card .card-body {
  padding: 1.25rem;
}

/* Fix impersonate back button and user info in sidebar */
body.dark-mode .nav-link.active-pro {
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 16px !important;
  font-size: 0.875rem !important;
  margin: 0 10px 15px 10px !important;
}

body.dark-mode .nav-link.active-pro::before {
  display: none !important;
}

body.dark-mode .nav-item .nav-link.active-pro.active {
  background: transparent !important;
  border-left: 1px solid var(--border-subtle) !important;
}

body.dark-mode .sidenav-header .media,
body.dark-mode .sidenav-header .dropdown-menu,
body.dark-mode .navbar-vertical .navbar-collapse .media,
body.dark-mode .media.align-items-center {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 16px !important;
}

body.dark-mode .media.align-items-center .media-body {
  color: var(--text-primary) !important;
}

body.dark-mode .media.align-items-center .media-body span {
  color: var(--text-primary) !important;
}

body.dark-mode .user-account-section .d-flex {
  background-color: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
}

body.dark-mode .user-account-section h5,
body.dark-mode .user-account-section small {
  color: var(--text-primary) !important;
}

body.dark-mode .user-account-section svg {
  stroke: var(--text-primary) !important;
  width: 16px !important;
  height: 16px !important;
}

body.dark-mode .user-account-section .dropdown {
  margin-right: 10px !important;
  position: relative !important;
  right: 5px !important;
}

/* Light mode - Go Back button and user account section */
body:not(.dark-mode) .nav-link.active-pro {
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid #dee2e6 !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 16px !important;
  font-size: 0.875rem !important;
  margin: 0 10px 15px 10px !important;
}

body:not(.dark-mode) .nav-link.active-pro::before {
  display: none !important;
}

body:not(.dark-mode) .user-account-section .d-flex {
  background-color: transparent !important;
  border: 1px solid #dee2e6 !important;
  border-radius: var(--radius-md) !important;
}

body:not(.dark-mode) .user-account-section .dropdown {
  margin-right: 10px !important;
  position: relative !important;
  right: 5px !important;
}

/* Plan cards equal height with scrollable features */
.card-body-wrap .card.shadow {
  height: 650px !important;
  display: flex !important;
  flex-direction: column !important;
}

.card-body-wrap .card.shadow .card-header {
  padding: 15px !important;
}

.card-body-wrap .card.shadow .card-img-top {
  border-radius: 8px !important;
  margin: 0 !important;
}

.card-body-wrap .card.shadow .card-header .col-8 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.card-body-wrap .card.shadow .card-header .col-4 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.card-body-wrap .card.shadow .card-header .col-4 h3 {
  color: #d4e157 !important;
}

/* Fix white block on overview page in dark mode */
body.dark-mode .card.bg-white,
body.dark-mode .bg-white {
  background-color: var(--bg-card) !important;
}

body.dark-mode .thead-light th {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* Fix navbar visibility on all pages */
.navbar-top {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 250px !important;
  z-index: 1030 !important;
  background-color: var(--bg-sidebar) !important;
}

.navbar-top .container-fluid {
  padding-right: 360px !important;
}

.navbar-top .navbar-nav.align-items-center {
  margin-right: 350px !important;
}

.navbar-top .navbar-nav {
  flex-wrap: nowrap !important;
}

@media (max-width: 768px) {
  .navbar-top {
    left: 0 !important;
  }
}

body.dark-mode .navbar-top {
  background-color: var(--bg-body) !important;
}

body.dark-mode .main-content {
  background-color: var(--bg-body) !important;
}

.navbar-top,
.navbar-top .container-fluid,
#navbar-main {
  overflow: visible !important;
}

.navbar-top .dropdown-menu {
  z-index: 2000 !important;
}

body.dark-mode .breadcrumb,
body.dark-mode .breadcrumb.breadcrumb-dark {
  background: linear-gradient(145deg, rgba(16, 19, 26, 0.72), rgba(41, 45, 51, 0.55)) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.dark-mode .breadcrumb .breadcrumb-item a {
  color: var(--text-secondary) !important;
}

body.dark-mode .breadcrumb .breadcrumb-item a:hover {
  color: var(--text-primary) !important;
}

body.dark-mode .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted) !important;
}

body.dark-mode .breadcrumb .breadcrumb-item.active {
  color: var(--text-primary) !important;
}

body.dark-mode {
  background-color: var(--bg-body) !important;
}

body.dark-mode html,
body.dark-mode body,
html.dark-mode,
.dark-mode {
  background-color: var(--bg-body) !important;
}

body.dark-mode .col-md-4 {
  background-color: transparent !important;
}

html, body {
  overflow-x: hidden !important;
}

/* Remove button style from Dashboard menu item */
.navbar-vertical .navbar-nav .nav-link.active:not(.active-pro),
.sidenav .navbar-nav .nav-link.active:not(.active-pro),
.navbar-nav .nav-item .nav-link.active:not(.active-pro) {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: inherit !important;
}

body.dark-mode .navbar-nav .nav-item .nav-link.active:not(.active-pro) {
  background-color: transparent !important;
  background: transparent !important;
}

.card-body-wrap .card.shadow .table-responsive {
  max-height: 350px !important;
  overflow-y: scroll !important;
  flex: 1 !important;
  scrollbar-width: thin !important;
  scrollbar-color: #6b7280 transparent !important;
}

.card-body-wrap .card.shadow .table-responsive::-webkit-scrollbar {
  width: 8px !important;
  display: block !important;
}

.card-body-wrap .card.shadow .table-responsive::-webkit-scrollbar-track {
  background: transparent !important;
}

.card-body-wrap .card.shadow .table-responsive::-webkit-scrollbar-thumb {
  background-color: #6b7280 !important;
  border-radius: 4px !important;
}

.card-body-wrap .card.shadow .card-footer {
  margin-top: auto !important;
}

.card-body-wrap .row > [class*="col-"] {
  margin-bottom: 30px !important;
}

body.dark-mode .dropdown-menu {
  background-color: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
}

body.dark-mode .dropdown-menu .dropdown-item {
  color: var(--text-primary) !important;
}

/* Fix double frame on select dropdowns */
body.dark-mode .form-group {
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode select.form-control-alternative,
body.dark-mode .form-control-alternative,
body.dark-mode .form-control-alternative:focus {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background-image: none !important;
  outline: none !important;
}

body.dark-mode .form-group select,
body.dark-mode .form-group select:focus {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.dark-mode .form-group .form-control,
body.dark-mode .form-group .form-control:focus {
  box-shadow: none !important;
}

body.dark-mode .select2-container,
body.dark-mode .select2-container--default .select2-selection--single {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-pill) !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent !important;
}

body.dark-mode select option {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .form-control::placeholder {
  color: var(--text-muted) !important;
}

/* Image upload sections - framed like allergens cards */
#tabs-icons-text-2 .col-md-4 {
  margin-bottom: 1.5rem;
}

#tabs-icons-text-2 .col-md-4 .form-group,
#tabs-icons-text-2 .col-md-4 > div {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.input-group.input-group-alternative .input-group-text {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-subtle) !important;
  border-right: none !important;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
  color: var(--text-muted) !important;
}

.input-group.input-group-alternative .form-control {
  border-left: none !important;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
}

/* Native selects */
select,
select.form-control,
select.custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-pill) !important;
  padding-right: 2.5rem !important;
  background-image: 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='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  box-shadow: none !important;
}

select option {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* Dark-mode selects: cleaner look with lighter palette */
body.dark-mode select,
body.dark-mode select.form-control,
body.dark-mode select.custom-select {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
  box-shadow: none !important;
}

body.dark-mode select option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Select2 */
.select2-container--default .select2-selection--single {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-pill) !important;
  min-height: 44px !important;
}

.select2-container--default .select2-selection--multiple {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  min-height: 44px !important;
}

/* Prevent "double container" look when Select2 wrapper is also styled as a form-control */
.select2-container.form-control,
.select2-container--default.form-control,
.select2-container--default.select2-container--open.form-control,
.select2-container--default.select2-container--focus.form-control {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
}

.select2-container.form-control .select2-selection--single,
.select2-container.form-control .select2-selection--multiple {
  width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
  line-height: 42px !important;
  padding: 0 2.5rem 0 1.1rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 12px !important;
}

.select2-dropdown {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
}

.select2-results__option {
  color: var(--text-secondary) !important;
}

.select2-results__option--highlighted[aria-selected],
.select2-results__option:hover {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

/* Dark-mode Select2 dropdown */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f1f5f9 !important;
}

body.dark-mode .select2-dropdown,
body.dark-mode .select2-results__options {
  background-color: #1e293b !important;
  border-color: #475569 !important;
}

body.dark-mode .select2-results__option {
  color: #e2e8f0 !important;
}

/* Bootstrap dropdown menus in dark mode */
body.dark-mode .dropdown-menu {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  border-radius: var(--radius-md) !important;
}

body.dark-mode .dropdown-item {
  color: #f1f5f9 !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* =========================
   Tables
   ========================= */
.table {
  margin-bottom: 0;
  color: var(--text-secondary);
}

.table thead th,
.thead-light th {
  background-color: var(--bg-card-soft) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-muted) !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.table tbody td {
  border-top: 1px solid var(--border-subtle) !important;
  vertical-align: middle;
}

.table-hover tbody tr:hover td {
  background-color: rgba(148, 163, 184, 0.08) !important;
}

.table .badge-success {
  background-color: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

.table .badge-warning {
  background-color: rgba(249, 115, 22, 0.2) !important;
  color: #fdba74 !important;
}

.table .badge-primary {
  background-color: rgba(99, 102, 241, 0.25) !important;
  color: #a5b4fc !important;
}

.table .badge-info {
  background-color: rgba(6, 182, 212, 0.2) !important;
  color: #67e8f9 !important;
}

.table .badge-danger {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

.table .badge-secondary,
.table .badge-default {
  background-color: rgba(148, 163, 184, 0.2) !important;
  color: #cbd5e1 !important;
}

.table a {
  color: var(--primary) !important;
}

/* =========================
   Tabs (nav-pills)
   ========================= */
.nav-pills .nav-link {
  border-radius: var(--radius-pill) !important;
  padding: 0.5rem 1.4rem !important;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--text-secondary) !important;
  font-weight: 600;
  margin-right: 0.4rem;
}

.nav-pills .nav-link:hover {
  background-color: rgba(148, 163, 184, 0.1) !important;
}

.nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Dark-mode specific tabs */
body.dark-mode .nav-pills .nav-link {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.dark-mode .nav-pills .nav-link:hover {
  background-color: #334155 !important;
  border-color: #6366f1 !important;
}

body.dark-mode .nav-pills .nav-link.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
}

/* =========================
   Topbar actions slot (action buttons in navbar)
   ========================= */
.topbar-actions-slot {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

.topbar-actions-slot:empty {
  display: none !important;
}

.topbar-actions-slot .btn {
  margin: 0 0.15rem !important;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ensure navbar-nav items stay inline - FORCE single row — desktop only */
@media (min-width: 992px) {
  #navbar-main .navbar-nav.align-items-center {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  #navbar-main .navbar-nav.align-items-center > li,
  #navbar-main .navbar-nav.align-items-center > .nav-item {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0;
  }

  /* Force container to use all available width */
  #navbar-main .container-fluid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* =========================
   Theme toggle (navbar top)
   ========================= */
.theme-toggle {
  position: relative !important;
  top: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.9);
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
}

.theme-toggle-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
  transition: transform 0.2s ease;
}

.theme-toggle-icon-sun,
.theme-toggle-icon-moon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: #facc15;
}

.theme-toggle-icon-sun {
  left: 7px;
}

.theme-toggle-icon-moon {
  right: 8px;
  color: #e5e7eb;
}

.theme-toggle.is-dark .theme-toggle-thumb {
  transform: translateX(22px);
}

/* Icon emphasis per state */
.theme-toggle .theme-toggle-icon-sun,
.theme-toggle .theme-toggle-icon-moon {
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.theme-toggle.is-dark .theme-toggle-icon-moon {
  opacity: 1;
}

.theme-toggle.is-dark .theme-toggle-icon-sun {
  opacity: 0.25;
}

.theme-toggle:not(.is-dark) .theme-toggle-icon-sun {
  opacity: 1;
}

.theme-toggle:not(.is-dark) .theme-toggle-icon-moon {
  opacity: 0.3;
}

/* =========================
   Plugins sub-tabs (Settings > Apps & Plugins)
   ========================= */
.plugins-subtabs {
  padding: 1rem 0;
}

.plugins-category-tabs {
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1rem;
}

.plugins-category-tabs .nav-link {
  padding: 0.5rem 1rem !important;
  font-size: 0.85rem !important;
  border-radius: var(--radius-sm) !important;
  margin-right: 0.5rem !important;
}

body.dark-mode .plugins-category-tabs .nav-link {
  background-color: transparent !important;
  border: 1px solid #334155 !important;
  color: #94a3b8 !important;
}

body.dark-mode .plugins-category-tabs .nav-link:hover {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}

body.dark-mode .plugins-category-tabs .nav-link.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Collapsible section styling */
.plugins-section {
  background-color: var(--bg-card-soft);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

body.dark-mode .plugins-section {
  background-color: rgba(30, 41, 59, 0.5);
  border: 1px solid #334155;
}

.plugins-section-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.plugins-section-header:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

body.dark-mode .plugins-section-header:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.plugins-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  width: 100%;
}

body.dark-mode .plugins-section-title {
  color: #e2e8f0 !important;
}

.plugins-section-chevron {
  transition: transform 0.3s ease;
  font-size: 0.75rem;
  color: #64748b;
}

body.dark-mode .plugins-section-chevron {
  color: #94a3b8;
}

/* Rotate chevron when expanded */
.plugins-section-header:not(.collapsed) .plugins-section-chevron {
  transform: rotate(180deg);
}

.plugins-section-body {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

body.dark-mode .plugins-section-body {
  border-color: #334155;
}

.plugins-section-body .form-group {
  margin-bottom: 1rem;
}

/* =========================
   Apps page
   ========================= */
.apps-page .card-header {
  border-bottom: none !important;
}

.apps-page .card-body {
  padding-top: 0.5rem !important;
}

.apps-page .nav-pills {
  margin-bottom: 1.25rem;
}

.apps-page .input-group.input-group-alternative .form-control {
  min-width: 260px;
}

.apps-page .row.apps-grid > [class^="col-"],
.apps-page .row.apps-grid > [class*=" col-"] {
  display: flex;
}

.apps-page .row.apps-grid .card {
  width: 100% !important;
  display: flex;
  flex-direction: column;
}

.apps-page .row.apps-grid .card-img-top {
  height: 180px;
  object-fit: cover;
}

.apps-page .row.apps-grid .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.apps-page .row.apps-grid .card-body .card-text {
  flex: 1;
}

.apps-page .row.apps-grid .card-body .btn {
  margin-top: 0.25rem;
}

/* =========================
   Misc dark-mode helpers
   ========================= */
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .bg-secondary {
  background-color: #1e293b !important;
}

body.dark-mode .badge.badge-success,
body.dark-mode .badge-success {
  background-color: rgba(34, 197, 94, 0.25) !important;
  color: #4ade80 !important;
}

body.dark-mode .badge.badge-warning,
body.dark-mode .badge-warning {
  background-color: rgba(249, 115, 22, 0.25) !important;
  color: #fb923c !important;
}

body.dark-mode .badge.badge-primary,
body.dark-mode .badge-primary {
  background-color: rgba(99, 102, 241, 0.3) !important;
  color: #a5b4fc !important;
}

body.dark-mode .badge.badge-info,
body.dark-mode .badge-info {
  background-color: rgba(6, 182, 212, 0.25) !important;
  color: #67e8f9 !important;
}

body.dark-mode .badge.badge-danger,
body.dark-mode .badge-danger {
  background-color: rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
}

body.dark-mode .badge.badge-secondary,
body.dark-mode .badge-secondary {
  background-color: rgba(148, 163, 184, 0.2) !important;
  color: #cbd5e1 !important;
}

body.dark-mode .badge.badge-default,
body.dark-mode .badge-default {
  background-color: rgba(100, 116, 139, 0.3) !important;
  color: #e2e8f0 !important;
}

body.dark-mode .badge.badge-lg {
  font-size: 0.75rem !important;
  padding: 0.35em 0.65em !important;
}

/* Dark mode text colors */
body.dark-mode .text-dark,
body.dark-mode .text-black {
  color: #f1f5f9 !important;
}

body.dark-mode .text-muted {
  color: #94a3b8 !important;
}

/* Dark mode form labels */
body.dark-mode label,
body.dark-mode .form-control-label {
  color: #e2e8f0 !important;
}

/* Dark mode accordion/collapse headers */
body.dark-mode .accordion .card-header,
body.dark-mode .collapse-header {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* =========================
   Header & page background – avoid double colors in dark mode
   ========================= */
body.dark-mode .header,
body.dark-mode .header.bg-gradient-primary,
body.dark-mode .header.bg-primary {
  background-color: var(--bg-header) !important;
  background-image: none !important;
}

/* LIGHT MODE: Flatten gradient headers completely */
body:not(.dark-mode) .header.bg-gradient-primary,
body:not(.dark-mode) .header.bg-primary,
body:not(.dark-mode) .bg-gradient-primary,
body:not(.dark-mode) .bg-primary,
body:not(.dark-mode) [class*="bg-gradient"],
body:not(.dark-mode) .header {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  background-image: none !important;
}

/* Light mode header text colors */
body:not(.dark-mode) .header h1,
body:not(.dark-mode) .header h2,
body:not(.dark-mode) .header h3,
body:not(.dark-mode) .header h4,
body:not(.dark-mode) .header h5,
body:not(.dark-mode) .header h6,
body:not(.dark-mode) .header .text-white {
  color: #1e293b !important;
}

/* LIGHT MODE: Override navbar-dark to light */
body:not(.dark-mode) .navbar-dark,
body:not(.dark-mode) .navbar-top,
body:not(.dark-mode) #navbar-main {
  background-color: #e2e8f0 !important;
  background: #e2e8f0 !important;
}

/* LIGHT MODE: Match header spacing with dark mode */
body:not(.dark-mode) .header {
  padding-top: 1.5rem !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 80px !important;
}

body:not(.dark-mode) .container-fluid.mt--7 {
  margin-top: 0 !important;
  padding-top: 80px !important;
}

/* LIGHT MODE: Toggle switcher colors */
body:not(.dark-mode) .theme-toggle-track {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

body:not(.dark-mode) .theme-toggle-thumb {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

body:not(.dark-mode) .theme-toggle-icon-sun {
  color: #f59e0b !important;
}

body:not(.dark-mode) .theme-toggle-icon-moon {
  color: #64748b !important;
}

body:not(.dark-mode) .navbar-dark .navbar-brand,
body:not(.dark-mode) .navbar-dark .text-white,
body:not(.dark-mode) .navbar-top .text-white,
body:not(.dark-mode) #navbar-main .text-white,
body:not(.dark-mode) .navbar-top .h4,
body:not(.dark-mode) #navbar-main .h4 {
  color: #1e293b !important;
}

/* Make body and main-content a single solid color in dark mode */
body.dark-mode,
body.dark-mode .main-content {
  background-color: var(--bg-body) !important;
}

/* Fix white band at top of page */
body.dark-mode .header.bg-gradient-primary,
body.dark-mode .header.bg-primary,
body.dark-mode .bg-gradient-primary,
body.dark-mode .bg-primary {
  background: var(--bg-header) !important;
  background-image: none !important;
}

/* Fix the page title area background in dark mode */
body.dark-mode .header .pb-8,
body.dark-mode .header .pb-7,
body.dark-mode .header .pb-6,
body.dark-mode .header .pt-5,
body.dark-mode .header .pt-md-8 {
  background-color: transparent !important;
}

/* Remove any white strips/borders at top */
body.dark-mode .border-top,
body.dark-mode hr {
  border-color: var(--border-subtle) !important;
}

/* Fix any light backgrounds in header area */
body.dark-mode .header *,
body.dark-mode #navbar-main * {
  background-image: none !important;
}

/* Ensure consistent header/title area in dark mode */
body.dark-mode .main-content > .header,
body.dark-mode .main-content .header {
  background-color: var(--bg-header) !important;
}

/* Header - light mode styling */
.header,
#navbar-main,
.navbar-top {
  background-color: #ffffff !important;
  background-image: none !important;
}

.navbar-top .navbar-brand,
.navbar-top .h4,
.navbar-top a.h4 {
  color: #1e293b !important;
}

/* Light mode navbar buttons */
.navbar-top .btn {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

.navbar-top .btn:hover {
  background-color: #e2e8f0 !important;
  color: #1e293b !important;
}

/* Light mode user dropdown */
.navbar-top .nav-link {
  color: #475569 !important;
}

.navbar-top .nav-link:hover {
  color: #1e293b !important;
}

/* Dark mode header override */
body.dark-mode .header,
body.dark-mode #navbar-main,
body.dark-mode .navbar-top {
  background-color: var(--bg-body) !important;
  background-image: none !important;
}

body.dark-mode .navbar-top .navbar-brand,
body.dark-mode .navbar-top .h4,
body.dark-mode .navbar-top a.h4 {
  color: #e2e8f0 !important;
}

body.dark-mode .navbar-top .btn {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}

body.dark-mode .navbar-top .btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}

body.dark-mode .navbar-top .nav-link {
  color: #94a3b8 !important;
}

body.dark-mode .navbar-top .nav-link:hover {
  color: #e2e8f0 !important;
}

/* Fix the title bar area specifically */
body.dark-mode .header h2,
body.dark-mode .header h1,
body.dark-mode .header h3,
body.dark-mode .header .h2,
body.dark-mode .header .h1 {
  color: var(--text-primary) !important;
}

/* Remove gradient backgrounds from header children */
body.dark-mode .header [class*="bg-gradient"],
body.dark-mode .header [class*="bg-primary"],
body.dark-mode .header [class*="bg-secondary"] {
  background: transparent !important;
  background-image: none !important;
}

/* Ensure html and body have no white background */
html,
html.dark-mode,
body.dark-mode {
  background-color: var(--bg-body) !important;
}

/* Fix the white line at very top of page */
body.dark-mode {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

body.dark-mode .main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Fix any potential white space at top */
body.dark-mode::before {
  display: none !important;
}

/* CRITICAL: Make ENTIRE right side ONE FLAT dark color */
body.dark-mode .main-content {
  background-color: var(--bg-body) !important;
}

/* Remove the pseudo-element - not needed */
body.dark-mode .main-content::before {
  display: none !important;
}

/* Make ALL header elements SAME as body - #0f172a */
body.dark-mode .header,
body.dark-mode .header.bg-gradient-primary,
body.dark-mode .header.bg-gradient-info,
body.dark-mode .header.bg-primary,
body.dark-mode .header[class*="bg-gradient"],
body.dark-mode .header[class*="bg-primary"] {
  background: var(--bg-body) !important;
  background-color: var(--bg-body) !important;
  background-image: none !important;
}

/* Make navbar-top SAME as body - #0f172a */
body.dark-mode #navbar-main,
body.dark-mode .navbar-top,
body.dark-mode .navbar-top.navbar-dark {
  background: var(--bg-body) !important;
  background-color: var(--bg-body) !important;
}

html.dark-mode #navbar-main,
html.dark-mode .navbar-top,
html.dark-mode .navbar-top.navbar-dark,
.dark-mode #navbar-main,
.dark-mode .navbar-top,
.dark-mode .navbar-top.navbar-dark {
  background: var(--bg-body) !important;
  background-color: var(--bg-body) !important;
  background-image: none !important;
}

html.dark-mode #navbar-main::before,
html.dark-mode #navbar-main::after,
.dark-mode #navbar-main::before,
.dark-mode #navbar-main::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

html.dark-mode #navbar-main > .container-fluid,
.dark-mode #navbar-main > .container-fluid {
  background: transparent !important;
  background-image: none !important;
}

/* Remove ALL borders that might cause lines */
body.dark-mode .header,
body.dark-mode #navbar-main,
body.dark-mode .navbar-top,
body.dark-mode .main-content {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Fix any padding/margin classes */
body.dark-mode .header.pb-8,
body.dark-mode .header.pb-7,
body.dark-mode .header.pb-6,
body.dark-mode .header.pt-5,
body.dark-mode .header.pt-md-8 {
  background: var(--bg-body) !important;
}

/* Remove the white/light line at very top */
body.dark-mode .main-content,
body.dark-mode .main-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Fix spacing between header and content in dark mode */
body.dark-mode .container-fluid.mt--7 {
  margin-top: 0 !important; /* Reset negative margin */
  padding-top: 80px !important; /* Add positive spacing */
}

body.dark-mode .header {
  padding-bottom: 0 !important; /* Remove excessive padding from header bottom */
  margin-bottom: 0 !important;
}

/* =========================
   Dark-mode cards – lighter surfaces with subtle highlight
   ========================= */
body.dark-mode .card,
body.dark-mode .card.shadow,
body.dark-mode .card.bg-secondary {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .card:hover {
  border-color: rgba(99, 102, 241, 0.6) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Fix stuck modal backdrop issue */
.modal-backdrop {
  display: none !important;
}
.modal-backdrop.show {
  display: block !important;
}
body.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

/* ===== Admin audit-fix additions (do not affect KDS/POS) ===== */

/* Map containers */
#map_location, #map_area {
    border-radius: var(--radius-md, 12px) !important;
    overflow: hidden;
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

/* Bottom spacing */
.main-content > .container-fluid {
    padding-bottom: 3rem !important;
}

/* Button group fix */
.btn-group > .btn {
    border-radius: 0 !important;
}
.btn-group > .btn:first-child {
    border-top-left-radius: var(--radius-pill, 999px) !important;
    border-bottom-left-radius: var(--radius-pill, 999px) !important;
}
.btn-group > .btn:last-child {
    border-top-right-radius: var(--radius-pill, 999px) !important;
    border-bottom-right-radius: var(--radius-pill, 999px) !important;
}

/* Blob dot fix - green circle with blink */
.nav-link .blob {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
}
.nav-link .blob.red,
.blob.red {
    background: #2dce89 !important;
    animation: blob-blink-green 1s ease-in-out infinite !important;
}
@keyframes blob-blink-green {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px 2px rgba(45, 206, 137, 0.5); }
    50% { opacity: 0.3; box-shadow: 0 0 2px 1px rgba(45, 206, 137, 0.2); }
}

/* Modal backdrop — hide when not active, show when .show */
.modal-backdrop:not(.show) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOODIS DASHBOARD FIXES — April 2026
   Responsive, dark mode, design system compliance, breakpoint fixes.
   All rules are additive. No existing selectors renamed or removed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. MISSING DESIGN TOKENS ── */
body.dark-mode {
  --gold: #c9a96e;
  --danger: #ef4444;
  --border-card: #334155;
}
:root {
  --gold: #c9a96e;
}

/* ── 1. CRITICAL: dashboardv2 negative margin on mobile ── */
@media (max-width: 767px) {
  .dashboardv2-wrapper {
    margin-top: 0 !important;
    padding-top: 1rem;
  }
}

/* ── 2. CRITICAL: dashboardv2 right panel padding overflow ── */
@media (max-width: 767px) {
  .dashboardv2-wrapper .col-md-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .dashboardv2-wrapper .search-input {
    height: 44px !important;
    font-size: 0.875rem !important;
  }
  .dashboardv2-wrapper .earnings-display .display-2 {
    font-size: 1.75rem !important;
  }
  .dashboardv2-wrapper .display-1 {
    font-size: 1.5rem !important;
  }
}

/* ── 3. CRITICAL: Stat cards — consistent heights + mobile spacing ── */
.card-stats .card-body {
  min-height: 80px;
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .header-body .col-xl-6.col-lg-6.mt-4,
  .header-body .col-xl-6.mt-4 {
    margin-top: 0.5rem !important;
  }
  .card-stats .card-body {
    min-height: auto;
    padding: 0.75rem !important;
  }
  .card-stats .h2,
  .card-stats .font-weight-bold {
    font-size: 1.25rem !important;
  }
  .card-stats .icon-shape {
    width: 36px !important;
    height: 36px !important;
  }
  .card-stats .icon-shape svg {
    width: 18px !important;
    height: 18px !important;
  }
}
/* Tablet: keep 2-per-row on tablet portrait */
@media (min-width: 576px) and (max-width: 991px) {
  .header-body .col-xl-6.col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ── 4. CRITICAL: Order filter panel overflow on mobile ── */
@media (max-width: 767px) {
  .orders-filters .input-daterange .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }
  .orders-filters .col-md-3,
  .orders-filters .col-md-5 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }
  .orders-filters .select2-container {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── 5. TABLET: Sidebar uses navbar-expand-lg (hamburger below 992px) ── */
/* Changed sidebar from navbar-expand-md to navbar-expand-lg in HTML.
   This means Bootstrap shows hamburger at <992px instead of <768px.
   We need to duplicate Argon's navbar-expand-md rules for navbar-expand-lg
   so the sidebar works correctly at >=992px (desktop). */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg {
    position: fixed;
    top: 0;
    bottom: 0;
    display: block;
    overflow-y: auto;
    width: 100%;
    max-width: 250px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .navbar-vertical.navbar-expand-lg.fixed-left {
    left: 0;
    border-right: 1px solid #e9ecef;
  }
  .navbar-vertical.navbar-expand-lg.fixed-left + .main-content {
    margin-left: 250px;
  }
  .navbar-vertical.navbar-expand-lg .navbar-collapse {
    display: block !important;
    overflow: auto;
  }
  .navbar-vertical.navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-vertical.navbar-expand-lg > [class*='container'] {
    flex-direction: column;
    min-height: 100%;
    padding-right: 0;
    padding-left: 0;
    align-items: stretch;
  }
  .navbar-vertical.navbar-expand-lg .navbar-nav {
    flex-direction: column;
    margin-right: -1.5rem;
    margin-left: -1.5rem;
  }
  .navbar-vertical.navbar-expand-lg .navbar-nav .nav-link {
    padding: .675rem 1.5rem;
  }
  /* Hide mobile-only elements on desktop */
  .navbar-vertical.navbar-expand-lg .nav.d-lg-none {
    display: none !important;
  }
  .navbar-vertical.navbar-expand-lg .navbar-collapse-header {
    display: none;
  }
}

/* Below 992px: sidebar is hamburger menu (mobile behavior) */
@media (max-width: 991.98px) {
  .navbar-vertical.navbar-expand-lg.fixed-left + .main-content,
  .main-content {
    margin-left: 0 !important;
  }
  /* Mobile user avatar visible */
  .navbar-vertical .nav.d-lg-none {
    display: flex !important;
  }
}

/* Topbar: also changed to expand-lg */
@media (min-width: 992px) {
  .navbar-top.navbar-expand-lg .navbar-nav.d-none.d-lg-flex {
    display: flex !important;
  }
}

/* ── 6. HIGH: Chart heights capped on mobile ── */
@media (max-width: 767px) {
  #orders-chart,
  .chart {
    height: 200px !important;
    max-height: 200px;
  }
  #orders-chart canvas,
  .chart canvas,
  .chart-canvas {
    max-height: 200px !important;
  }
}

/* ── 7. HIGH: .table-web hidden on mobile ── */
@media (max-width: 767px) {
  .table-web,
  th.table-web,
  td.table-web {
    display: none !important;
  }
}

/* ── 8. HIGH: Topbar user avatar visible on mobile ── */
@media (max-width: 767px) {
  .navbar-top .navbar-nav.align-items-center.d-none.d-md-flex {
    display: flex !important;
    gap: 4px;
  }
  .navbar-top .navbar-nav .nav-link .media-body {
    display: none !important;
  }
  .navbar-top .navbar-nav .avatar {
    width: 28px;
    height: 28px;
  }
  /* Hide non-essential topbar items on mobile */
  .navbar-top .navbar-nav .nav-link .nav-link-inner--text {
    display: none !important;
  }
}

/* ── 9. HIGH: Search results dropdown dark mode ── */
body.dark-mode .search-results {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card, #334155) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45) !important;
  border-radius: var(--radius-md) !important;
}
body.dark-mode .search-results .p-3 {
  border-color: var(--border-subtle) !important;
}
body.dark-mode .search-results .p-3:hover {
  background: rgba(152, 128, 255, 0.08) !important;
}
body.dark-mode .search-results h6,
body.dark-mode .search-results .mb-0 {
  color: var(--text-primary) !important;
}
body.dark-mode .search-results small,
body.dark-mode .search-results .text-muted {
  color: var(--text-muted) !important;
}
body.dark-mode .search-results a.text-decoration-none {
  color: inherit !important;
}

/* ── 10. HIGH: Stat card icon gradients — dark mode design system ── */
body.dark-mode .card-stats .icon-shape.bg-yellow,
body.dark-mode .icon-shape.bg-yellow {
  background: var(--warning) !important;
}
body.dark-mode .card-stats .icon-shape.bg-success,
body.dark-mode .icon-shape.bg-success {
  background: linear-gradient(87deg, #2dce89, #2dcecc) !important;
}
body.dark-mode .card-stats .icon-shape.bg-warning,
body.dark-mode .icon-shape.bg-warning {
  background: linear-gradient(87deg, #fb6340, #fbb140) !important;
}
body.dark-mode .card-stats .icon-shape.bg-danger,
body.dark-mode .icon-shape.bg-danger {
  background: linear-gradient(87deg, #f5365c, #f56036) !important;
}
body.dark-mode .card-stats .icon-shape.bg-info,
body.dark-mode .icon-shape.bg-info {
  background: var(--primary) !important;
}

/* ── 11. MEDIUM: Earnings display overflow ── */
.earnings-display .display-2 {
  word-break: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 991px) {
  .earnings-display .display-2 {
    font-size: 1.5rem !important;
  }
}

/* ── 12. MEDIUM: dashboardv2 left column border in dark mode ── */
body.dark-mode .dashboard-col-left {
  border-right-color: var(--border-subtle) !important;
  box-shadow: none !important;
}

/* ── 13. MEDIUM: Container margin-top reduction ── */
body.dark-mode .container-fluid[style*="margin-top: 80px"] {
  margin-top: 1.5rem !important;
}
@media (max-width: 767px) {
  .container-fluid[style*="margin-top: 80px"] {
    margin-top: 1rem !important;
  }
}

/* ── 14. MEDIUM: bg-gradient-default card — dark mode consistency ── */
body.dark-mode .card.bg-gradient-default {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card, #334155) !important;
}
body.dark-mode .card.bg-gradient-default .card-header {
  background: transparent !important;
  border-bottom-color: var(--border-subtle) !important;
}

/* ── 15. MEDIUM: Card border-radius consistency ── */
body.dark-mode .card {
  border-radius: var(--radius-md) !important;
}
body.dark-mode .card .card-header:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
body.dark-mode .card .card-footer:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* ── 16. MEDIUM: Subscription onboarding banner — dark mode adjustment ── */
body.dark-mode #sub-onboard-card {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border: 1px solid rgba(152, 128, 255, 0.3);
}
body.dark-mode #sub-onboard-card .btn-white {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(8px);
}
body.dark-mode #sub-onboard-card .btn-white:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* ── 17. GOLD color token — applied where design system specifies ── */
body.dark-mode .badge-gold {
  background: rgba(201, 169, 110, 0.15);
  color: var(--gold);
}
body.dark-mode .text-gold {
  color: var(--gold) !important;
}
body.dark-mode .plan-price,
body.dark-mode .price-display {
  color: var(--gold) !important;
}
/* PWA banner install button uses gold */
body.dark-mode .btn-install,
body.dark-mode [class*="pwa"] .btn-primary,
body.dark-mode #pwa-install-banner .btn {
  background: linear-gradient(135deg, #c9a96e, #e8c47a) !important;
  color: #1a1d2e !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(201, 169, 110, 0.35);
}

/* ── 18. Responsive general — prevent horizontal overflow ── */
html, body {
  overflow-x: hidden !important;
}
.main-content {
  overflow-x: hidden;
}
@media (max-width: 767px) {
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .row {
    margin-left: -6px;
    margin-right: -6px;
  }
  .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* ── 19. Tables responsive on all dashboard pages ── */
@media (max-width: 767px) {
  .table-responsive {
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
  }
  .table th,
  .table td {
    white-space: nowrap;
    font-size: 11px;
    padding: 0.5rem 0.65rem !important;
  }
}

/* ── 20. Guide card responsive ── */
@media (max-width: 767px) {
  .guide-card .card-body,
  [id^="guide-"] .card-body {
    padding: 0.75rem !important;
    font-size: 12px;
  }
  .guide-card ol li,
  [id^="guide-"] ol li {
    margin-bottom: 0.25rem;
  }
}

/* ── 21. Driver map responsive ── */
@media (max-width: 767px) {
  #map_location {
    height: 250px !important;
    min-height: 200px;
  }
}
@media (min-width: 768px) {
  #map_location {
    min-height: 400px;
  }
}

/* ── 22. Admin fee cards — compact on small screens ── */
@media (max-width: 575px) {
  .card-stats .card-title {
    font-size: 10px !important;
  }
}

/* ── 23. Chart dark mode — axis labels + grid visibility ── */
body.dark-mode .card.bg-gradient-default .text-uppercase.text-light {
  color: var(--text-muted) !important;
}
body.dark-mode .card .card-header .text-uppercase.text-muted {
  color: var(--text-muted) !important;
}

/* ── 24. Plans / pricing page — gold accent ── */
body.dark-mode .plan-badge-elite,
body.dark-mode .badge-elite {
  background: rgba(201, 169, 110, 0.15) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(201, 169, 110, 0.3);
}

/* ── 25. Sidebar — dark mode preserve existing design, just fix responsive ── */
@media (max-width: 767px) {
  .navbar-vertical.navbar-expand-md .navbar-collapse {
    max-height: 80vh;
    overflow-y: auto;
  }
  /* Ensure mobile sidebar doesn't push content */
  .navbar-vertical.navbar-expand-md {
    position: fixed !important;
    z-index: 1050;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END FOOODIS DASHBOARD FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   MENU ITEMS PAGE — Responsive Fixes (April 2026)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Menu manager two-column layout: stack on mobile ── */
@media (max-width: 991px) {
  .menu-manager-row > .col-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.5rem;
  }
  .menu-manager-row > .col-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── Mobile: Sidebar category list — horizontal scroll or compact ── */
@media (max-width: 767px) {
  .menu-manager-row > .col-4 .card-header {
    padding: 0.5rem 0.75rem !important;
  }
  .menu-manager-row > .col-4 .card-body {
    padding: 0.5rem !important;
    max-height: 180px;
    overflow-y: auto;
  }
  /* Nestable list compact */
  .menu-manager-row .dd-item,
  .menu-manager-row .dd3-item {
    font-size: 12px;
  }
  .menu-manager-row .dd3-content {
    padding: 6px 8px !important;
  }
  .menu-manager-row .dd-handle,
  .menu-manager-row .dd3-handle {
    width: 24px !important;
    height: auto !important;
  }
}

/* ── Menu header controls: wrap on mobile ── */
@media (max-width: 767px) {
  .menu-manager-row .col-8 .card-header .row {
    flex-wrap: wrap !important;
  }
  .menu-manager-row .col-8 .card-header .col-auto {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 0.5rem;
  }
  .menu-manager-row .col-8 .card-header .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* View mode switcher + language + Menu Actions — stack */
  .menu-manager-row .view-mode-switcher {
    margin-bottom: 0.5rem;
  }
  .menu-manager-row .dropdown {
    margin-top: 0.25rem;
  }
  /* Category heading smaller */
  .menu-manager-row .col-8 h3.mb-0 {
    font-size: 14px !important;
  }
}

/* ── Bulk price update section responsive ── */
@media (max-width: 767px) {
  .bulk-price-update,
  [class*="bulk-price"] {
    flex-wrap: wrap !important;
  }
  .bulk-price-update .form-control,
  .bulk-price-update input[type="text"],
  .bulk-price-update input[type="number"] {
    min-width: 80px;
    font-size: 12px;
  }
}

/* ── Category cards inside menu — full width items on mobile ── */
@media (max-width: 767px) {
  .category-items .col-lg-6,
  .category-items .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .menu-item-card .item-image-wrapper {
    min-height: 100px !important;
  }
  .menu-item-card .card-body {
    padding: 0.75rem !important;
  }
  .menu-item-card .item-title {
    font-size: 0.95rem !important;
  }
}

/* ── Add item button card — responsive ── */
@media (max-width: 767px) {
  .add-item-card {
    min-height: 80px !important;
  }
}

/* ── Category header buttons — wrap on narrow screens ── */
@media (max-width: 575px) {
  .category-header .btn-group,
  .category-header .d-flex {
    flex-wrap: wrap;
    gap: 4px;
  }
  .category-header .btn-sm {
    font-size: 10px !important;
    padding: 0.2rem 0.5rem !important;
  }
}

/* ── Global Bulk Price Update row ── */
@media (max-width: 767px) {
  h5[class*="GLOBAL"],
  .card-body h5 {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END MENU ITEMS PAGE FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE FIXES — Finances, Live Orders, Restaurant Edit, Daily Menu
   April 2026 batch 2
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Finances page: Fee info + Stripe connect cards ── */
@media (max-width: 767px) {
  /* Stack the two-column fee/stripe cards */
  .finances-row > .col-md-6,
  .finances-row > .col-lg-6,
  .row > .col-md-6.mb-4,
  .container-fluid .row > .col-md-6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* "Connect with Stripe Co..." button overflow */
  .btn[href*="stripe"],
  .btn-stripe,
  a[class*="btn"][href*="connect"] {
    white-space: normal !important;
    word-break: break-word;
    font-size: 11px !important;
    padding: 0.4rem 0.75rem !important;
  }
  /* Stat summary cards in finances */
  .card-stats .card-title {
    font-size: 10px !important;
    word-break: break-word;
  }
}

/* ── Live Orders page: New/Accepted/Done columns ── */
@media (max-width: 991px) {
  /* Stack the three live order columns */
  .live-orders-row > .col-md-4,
  .live-orders-row > .col-lg-4,
  .container-fluid > .row > .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }
}
@media (max-width: 767px) {
  /* Live order cards compact */
  .live-order-card,
  .order-card {
    padding: 0.5rem !important;
  }
  .live-order-card .card-body,
  .order-card .card-body {
    padding: 0.5rem !important;
  }
}

/* ── Restaurant Edit page: two-column form layout ── */
@media (max-width: 767px) {
  /* Restaurant edit form columns */
  .restaurant-form .col-md-6,
  .restaurant-form .col-md-4,
  .restaurant-form .col-lg-6,
  .restaurant-form .col-lg-4,
  form .col-md-6,
  form .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* intl-tel-input phone field — fix flag overlap */
  /* iti phone: handled globally below */
  /* Color pickers — ensure they're tappable */
  input[type="color"] {
    width: 48px !important;
    height: 36px !important;
    padding: 2px !important;
    border-radius: 8px;
  }
  /* Textarea / description fields */
  textarea.form-control {
    min-height: 80px;
  }
}

/* ── Daily Menu page: two-column layout (settings + days) ── */
@media (max-width: 991px) {
  .daily-menu-row > .col-md-4,
  .daily-menu-row > .col-lg-4,
  .daily-menu-row > .col-md-8,
  .daily-menu-row > .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  /* Day tabs — horizontal scroll */
  .nav-pills.daily-menu-tabs,
  .daily-menu-days .nav-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-pills.daily-menu-tabs::-webkit-scrollbar,
  .daily-menu-days .nav-pills::-webkit-scrollbar {
    display: none;
  }
  .nav-pills.daily-menu-tabs .nav-link,
  .daily-menu-days .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 12px;
  }
  /* All items / Items selected dual-list */
  .dual-list .col-md-5,
  .dual-list .col-md-2,
  .dual-list > div {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }
  /* Move buttons (>>) — horizontal instead of vertical */
  .dual-list .col-md-2 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    gap: 8px;
  }
  .dual-list .col-md-2 .btn {
    min-width: 40px;
  }
}



/* ── Global: prevent text overflow in cards ── */
.card h3,
.card h2,
.card-header h3,
.card-header h2 {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Topbar: stop impersonate button visible on mobile ── */
@media (max-width: 767px) {
  .active-pro,
  a[href*="stopImpersonate"],
  .nav-link.active.active-pro {
    display: flex !important;
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END BATCH 2 FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE + GAP FIXES — All Pages (April 2026 batch 3)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── GLOBAL: Reduce excessive header gradient gap ──
   The bg-gradient-primary header creates a tall empty area with mt--7 offset.
   On mobile this wastes ~120px of screen space. */
@media (max-width: 767px) {
  .header.bg-gradient-primary {
    padding-top: 2rem !important;
    padding-bottom: 4rem !important;
  }
  .container-fluid.mt--7 {
    margin-top: -3rem !important;
  }
  /* Also reduce default pt-md-8 */
  .header .pt-md-8,
  .header.pt-5 {
    padding-top: 1.5rem !important;
  }
}

/* ── QR Page: gap between guide card and QR generator ── */
@media (max-width: 767px) {
  .qr-page .card,
  [class*="qr"] .card {
    margin-bottom: 0.75rem !important;
  }
  /* QR style selector — horizontal scroll */
  .qr-styles,
  .qr-style-selector,
  [class*="qr-style"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .qr-styles::-webkit-scrollbar,
  .qr-style-selector::-webkit-scrollbar {
    display: none;
  }
  /* QR color pickers compact */
  .qr-settings input[type="color"],
  .qr-page input[type="color"] {
    width: 40px !important;
    height: 32px !important;
  }
}

/* ── Apps page: search bar + category pills + app cards ── */
@media (max-width: 767px) {
  /* Apps search */
  .apps-search .form-control,
  .apps-page .search-input,
  input[placeholder*="Search apps"] {
    height: 44px !important;
    font-size: 14px !important;
  }
  /* App category buttons — scroll horizontal */
  .apps-categories,
  .app-category-list,
  .plugins-list {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .apps-categories::-webkit-scrollbar,
  .plugins-list::-webkit-scrollbar {
    display: none;
  }
  .apps-categories .btn,
  .plugins-list .btn,
  .app-category-btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px !important;
    padding: 6px 14px !important;
  }
  /* App setting cards — full width */
  .app-settings .col-md-6,
  .app-settings .col-lg-4,
  .apps-grid .col-md-4,
  .apps-grid .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Apps page: General settings card below apps list ── */
.plugins-section .card,
.apps-page .card {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Restaurant Edit page: form two-column fix ── */
@media (max-width: 767px) {
  /* All form columns stack */
  .card-body .row > .col-md-6,
  .card-body .row > .col-md-4,
  .card-body .row > .col-lg-6,
  .card-body .row > .col-lg-4,
  .card-body .row > .col-xl-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Working hours table */
  .working-hours-table td,
  .working-hours-table th {
    font-size: 10px !important;
    padding: 4px 6px !important;
  }
  /* Map container */
  #map,
  .map-container,
  [id*="map"] {
    height: 200px !important;
    min-height: 180px;
  }
}

/* ── Daily Menu page: two-column stack + day tabs ── */
@media (max-width: 991px) {
  .card-body > .row > .col-4,
  .card-body > .row > .col-8,
  .card > .row > .col-4,
  .card > .row > .col-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── Finances page: two-column cards ── */
@media (max-width: 767px) {
  .finances-page .col-md-4,
  .finances-page .col-md-8,
  .card-body > .row > .col-md-4,
  .card-body > .row > .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── GLOBAL: Two-column fixed (col-4/col-8) layouts — add responsive ── */
@media (max-width: 767px) {
  .row > .col-4:not(.col-sm-4),
  .row > .col-8:not(.col-sm-8) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── GLOBAL: Cards spacing — reduce excessive margins ── */
@media (max-width: 767px) {
  .card {
    margin-bottom: 0.75rem !important;
  }
  .card .card-header {
    padding: 0.75rem 1rem !important;
  }
  .card .card-body {
    padding: 0.75rem 1rem !important;
  }
  /* Reduce double spacing from stacked rows */
  .row + .row {
    margin-top: 0 !important;
  }
  .mt-5 {
    margin-top: 1.5rem !important;
  }
  .mb-5 {
    margin-bottom: 1.5rem !important;
  }
  .py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* ── GLOBAL: Select2 full-width on mobile ── */
@media (max-width: 767px) {
  .select2-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── GLOBAL: Buttons wrap instead of overflow ── */
@media (max-width: 767px) {
  .btn-group {
    flex-wrap: wrap;
  }
  .card-header .btn-group {
    gap: 2px;
  }
  .btn-sm {
    font-size: 11px !important;
  }
}

/* ── GLOBAL: Fix bg-gradient-primary header heights ── */
.header.bg-gradient-primary.pb-8 {
  transition: padding 0.2s;
}
@media (max-width: 767px) {
  .header.bg-gradient-primary.pb-8 {
    padding-bottom: 5rem !important;
  }
}

/* ── Share page responsive ── */
@media (max-width: 767px) {
  .share-page .col-md-6,
  .share-menu .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Plan/subscription page responsive ── */
@media (max-width: 767px) {
  .plan-info .col-md-4,
  .plan-info .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ── Tables page responsive ── */
@media (max-width: 767px) {
  .tables-page .col-md-4,
  .tables-grid .col-md-4,
  .tables-grid .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ── Staff page responsive ── */
@media (max-width: 767px) {
  .staff-list .col-md-6,
  .staff-list .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Coupons page responsive ── */
@media (max-width: 767px) {
  .coupons-page .col-md-6,
  .coupon-form .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Delivery zones page responsive ── */
@media (max-width: 767px) {
  .delivery-zones .col-md-6,
  .delivery-form .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END BATCH 3 GLOBAL FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE — All Breakpoints, All Pages (batch 4 final)
   Mobile: <576px | Tablet Portrait: 576-767px | Tablet Landscape: 768-991px
   Laptop: 992-1199px | Desktop: 1200+
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── MOBILE PORTRAIT (<576px) ── */
@media (max-width: 575.98px) {
  /* ALL fixed columns stack to full-width */
  .row > .col-3:not(.col-sm-3),
  .row > .col-5:not(.col-sm-5),
  .row > .col-6:not(.col-sm-6):not(.collapse-brand):not(.collapse-close),
  .row > .col-7:not(.col-sm-7),
  .row > .col-9:not(.col-sm-9),
  .row > .col-10:not(.col-sm-10) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Menu PDF template selector: 2 per row */
  .template-option.col-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  /* Restaurant form edit: labels + inputs stack */
  .form-group label {
    font-size: 12px;
  }
  /* Compact all headings */
  h1, .h1 { font-size: 1.5rem !important; }
  h2, .h2 { font-size: 1.25rem !important; }
  h3, .h3 { font-size: 1rem !important; }
  .display-1 { font-size: 1.75rem !important; }
  .display-2 { font-size: 1.5rem !important; }
  .display-3 { font-size: 1.25rem !important; }
  /* Container padding tighter */
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ── MOBILE LANDSCAPE (576-767px) ── */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Fixed cols: keep 2-per-row for header cards */
  .row > .col-6:not(.collapse-brand):not(.collapse-close) {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* Template selector: 3 per row */
  .template-option.col-3 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}

/* ── TABLET PORTRAIT (768-991px) — form layouts ── */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Two-column form layouts: keep side-by-side but narrower */
  .card-body .row > .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ── Apps page: plugin categories + settings ── */
@media (max-width: 767px) {
  /* Plugin section accordion headers */
  .plugins-section .card-header {
    padding: 0.5rem 0.75rem !important;
  }
  .plugins-section .card-header h3,
  .plugins-section .card-header h5 {
    font-size: 13px !important;
  }
  /* Plugin list items */
  .plugins-section .list-group-item,
  .plugins-section .nav-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 12px;
  }
  /* Settings toggles and checkboxes */
  .custom-control {
    margin-bottom: 0.5rem;
  }
  .custom-control-label {
    font-size: 12px;
  }
}

/* ── Restaurant Edit page: all tabs content ── */
@media (max-width: 767px) {
  /* Working hours — shrink the time inputs */
  .working-hours input[type="time"],
  input[name*="hours"] {
    font-size: 11px !important;
    padding: 2px 4px !important;
    width: 90px !important;
  }
  /* Image upload areas */
  .fileinput .thumbnail,
  .fileinput-preview {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Restaurant edit nav pills */
  .restaurant-edit .nav-pills,
  .card .nav-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .restaurant-edit .nav-pills::-webkit-scrollbar,
  .card .nav-pills::-webkit-scrollbar {
    display: none;
  }
  .restaurant-edit .nav-link,
  .card .nav-pills .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* ── Daily Menu page ── */
@media (max-width: 767px) {
  /* Day pill tabs */
  .daily-menu .nav-pills .nav-link,
  [href*="daily-menu"] ~ .nav-pills .nav-link {
    padding: 6px 12px;
    font-size: 12px;
  }
  /* Color picker row */
  .daily-menu .form-group .row > div,
  .color-picker-row > div {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }
  /* Dual listbox */
  .bootstrap-duallistbox-container .box1,
  .bootstrap-duallistbox-container .box2 {
    width: 100% !important;
    float: none !important;
  }
  .bootstrap-duallistbox-container .btn-group {
    width: 100% !important;
    display: flex !important;
    justify-content: center;
    margin: 0.5rem 0;
  }
}

/* ── QR Builder page ── */
@media (max-width: 767px) {
  /* QR preview image */
  #qr-preview img,
  .qr-preview img,
  #qr-code img {
    max-width: 200px !important;
    margin: 0 auto;
    display: block;
  }
  /* QR settings form */
  .qr-settings .form-group,
  .qr-form .form-group {
    margin-bottom: 0.5rem;
  }
}

/* ── Finances page ── */
@media (max-width: 767px) {
  /* Fee info + Stripe connect — force full width */
  .card .row > .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.75rem;
  }
  /* Order table in finances */
  .finances .table-responsive {
    font-size: 10px;
  }
}

/* ── Live Orders ── */
@media (max-width: 991px) {
  /* Three-column layout → stack */
  .live-orders .col-4,
  #live-orders-container > .row > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── Share page ── */
@media (max-width: 767px) {
  .share-container .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* QR code download buttons */
  .share-container .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* ── Profile page ── */
@media (max-width: 767px) {
  .profile-page .col-xl-4,
  .profile-page .col-xl-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Plan/Subscription page ── */
@media (max-width: 767px) {
  .plan-page .col-md-3,
  .plan-page .col-lg-3,
  .subscription-cards .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.75rem;
  }
  .plan-page .plan-card {
    padding: 0.75rem !important;
  }
}

/* ── Coupons / Allergens / generic CRUD pages ── */
@media (max-width: 767px) {
  .crud-form .col-md-6,
  .crud-form .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Action buttons in table headers */
  .card-header .col-8,
  .card-header .col-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-bottom: 0.5rem;
  }
  .card-header .col-4 {
    text-align: right !important;
  }
}

/* ── Impersonate bar — always visible ── */
.active-pro .nav-link,
a.nav-link.active.active-pro {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: var(--radius-sm) !important;
  color: #f87171 !important;
}

/* ── Sidebar mobile overlay improvements ── */
@media (max-width: 767px) {
  /* When sidebar is open on mobile, add overlay */
  .navbar-vertical.navbar-expand-md .navbar-collapse.show,
  .navbar-vertical.navbar-expand-md .navbar-collapse.collapsing {
    background: var(--bg-sidebar) !important;
    padding: 0.5rem;
  }
  /* Navigation items compact */
  .navbar-vertical .nav-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 13px;
  }
  .navbar-vertical .navbar-heading {
    font-size: 10px !important;
    padding: 0.25rem 0.75rem !important;
  }
  /* Sidebar category labels */
  .sidebar-category-label,
  .navbar-heading {
    font-size: 10px;
    letter-spacing: 0.05em;
  }
}

/* ── Tablet landscape: sidebar collapsed, content wider ── */
@media (min-width: 992px) and (max-width: 1199px) {
  .container-fluid {
    max-width: 100%;
  }
  /* Ensure charts don't overflow */
  .chart-canvas {
    max-width: 100% !important;
  }
}

/* ── Landscape orientation (both phone and tablet) ── */
@media (orientation: landscape) and (max-height: 500px) {
  /* Phone landscape: very limited vertical space */
  .header.bg-gradient-primary {
    padding-top: 0.5rem !important;
    padding-bottom: 2rem !important;
  }
  .card-stats .card-body {
    min-height: auto !important;
    padding: 0.5rem !important;
  }
  /* Hide guide cards in landscape to save space */
  [id^="guide-"] {
    display: none;
  }
  /* Compact topbar */
  .navbar-top {
    padding: 4px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END BATCH 4 — COMPREHENSIVE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER + AVATAR FIX — Mobile & Tablet (batch 5)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mobile/Tablet header: logo | avatar | hamburger — all on one line ── */
@media (max-width: 991.98px) {
  /* Sidebar header layout */
  #sidenav-main .container-fluid {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 0.5rem 1rem !important;
  }
  /* Logo first */
  .navbar-vertical .navbar-brand {
    order: 1 !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
  }
  /* Avatar next to hamburger */
  .navbar-vertical .nav.d-lg-none {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0.5rem !important;
  }
  /* Hamburger last */
  .navbar-vertical .navbar-toggler {
    order: 3 !important;
  }
  /* Avatar dropdown styling */
  .navbar-vertical .nav.d-lg-none .avatar {
    cursor: pointer;
  }
  .navbar-vertical .nav.d-lg-none .avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }
  .navbar-vertical .nav.d-lg-none .dropdown-menu {
    background: var(--bg-card, #1e293b) !important;
    border: 1px solid var(--border-subtle, rgba(152,128,255,.22)) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,.3) !important;
  }
  .navbar-vertical .nav.d-lg-none .dropdown-item {
    color: var(--text-primary, #e2e8f0) !important;
    font-size: 13px !important;
  }
  .navbar-vertical .nav.d-lg-none .dropdown-item:hover {
    background: rgba(152,128,255,.1) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END BATCH 5
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Topbar: hide below 992px since all content uses d-lg-flex ── */
/* Sidebar is hamburger below 992px (navbar-expand-lg). Topbar items use
   d-none d-lg-flex so they're hidden. Hide the empty topbar bar itself. */
@media (max-width: 991.98px) {
  #navbar-main.navbar-top,
  #navbar-main {
    display: none !important;
  }
  .main-content {
    margin-left: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESERVATIONS PAGE — Responsive Fixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Top actions: Area/Date dropdowns + Action buttons ── */
@media (max-width: 767.98px) {
  /* Stack the top actions row */
  #reservation_panel .row > .col-4,
  #reservation_panel .row > .col-1,
  #reservation_panel .row > .col-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-bottom: 0.5rem;
  }
  /* Hide the empty col-1 spacer */
  #reservation_panel .row > .col-1 {
    display: none !important;
  }
  /* Area + Date dropdowns: inline */
  #reservation_panel .col-4 .dropdown {
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
  }
  /* Action buttons: wrap + full width */
  #reservation_panel .col-7 .btn {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.35rem !important;
    text-align: center !important;
    font-size: 12px !important;
  }
  /* Icon-only button (widget) smaller */
  #reservation_panel .col-7 .btn-icon:not(:has(.btn-inner--text)) {
    width: auto !important;
    display: inline-block !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Tablet: stack but give more room */
  #reservation_panel .row > .col-4,
  #reservation_panel .row > .col-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.5rem;
  }
  #reservation_panel .row > .col-1 {
    display: none !important;
  }
  /* Buttons inline on tablet */
  #reservation_panel .col-7 .btn {
    margin-bottom: 0.35rem !important;
    font-size: 13px !important;
  }
}

/* ── Reservations title + search ── */
@media (max-width: 767.98px) {
  /* Stack title and search */
  #reservation_panel .col-8,
  #reservation_panel .col-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  #reservation_panel .col-8 h1 {
    font-size: 1.25rem !important;
    margin-top: 1rem !important;
    margin-left: 0 !important;
  }
  #reservation_panel .col-4 {
    margin-top: 0.5rem !important;
  }
}

/* ── Status tabs (Upcoming, Overview, Seated, Pending) ── */
@media (max-width: 575.98px) {
  /* Stack tabs vertically on small phones */
  #reservation_panel .nav-pills.nav-fill {
    flex-direction: column !important;
  }
  #reservation_panel .nav-pills .nav-link {
    margin-bottom: 0.35rem !important;
    font-size: 13px !important;
    padding: 0.5rem 0.75rem !important;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  /* Tablet: keep tabs horizontal but smaller */
  #reservation_panel .nav-pills .nav-link {
    font-size: 12px !important;
    padding: 0.4rem 0.6rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END RESERVATIONS FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   RESERVATION TIMELINE PAGE — Responsive Fixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Timeline header: date + buttons ── */
@media (max-width: 767.98px) {
  .timeline-header .col-md-4,
  .timeline-header .col-md-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }
  .timeline-header .col-md-8 {
    margin-top: 0.75rem !important;
  }
  .timeline-header .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .timeline-header .btn-group .btn {
    flex: 1 1 auto;
    font-size: 11px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .timeline-header .col-md-4 {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }
  .timeline-header .col-md-8 {
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }
  .timeline-header .btn {
    font-size: 11px !important;
    padding: 0.3rem 0.5rem !important;
  }
}

/* ── Timeline visualization: horizontal scroll on mobile ── */
@media (max-width: 767.98px) {
  .timeline-container .card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #visualization {
    min-width: 600px;
  }
}

/* ── Reduce card gap between guide card and content ── */
.timeline-container {
  margin-top: 0 !important;
}
@media (max-width: 991.98px) {
  .timeline-header {
    margin-bottom: 0.75rem !important;
  }
  .timeline-container .card {
    margin-bottom: 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END TIMELINE FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   RESERVATION WIDGET + GLOBAL FORM FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global: col-md-6 two-column layouts stack below 992px ── 
   Since sidebar is now hamburger at <992px, the content area is full width.
   Bootstrap col-md-6 kicks in at >=768px which is too early for tablet. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .container-fluid > .row > .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.75rem;
  }
}

/* ── Global: Reduce header gap on mobile/tablet ── */
@media (max-width: 991.98px) {
  .header.pb-8 {
    padding-bottom: 4rem !important;
  }
  .header.pt-md-8 {
    padding-top: 1.5rem !important;
  }
  .container-fluid.mt--7 {
    margin-top: -2.5rem !important;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   END WIDGET + FORM FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Phone number (intl-tel-input) — layout fix ── */
.iti {
  width: 100% !important;
  display: block !important;
}
.iti input,
.iti input.form-control,
.iti input[type="tel"],
.iti input[type="text"] {
  width: 100% !important;
  /* Remove pill radius — the curved left edge pushes flag into text */
  border-radius: 8px !important;
}
/* Separated dial code: flag container needs a clear boundary */
.iti--separate-dial-code .iti__selected-flag {
  background: rgba(255,255,255,0.06) !important;
  border-right: 1px solid var(--border-subtle, rgba(152,128,255,.22)) !important;
  border-radius: 8px 0 0 8px !important;
  padding: 0 8px !important;
}
.iti--separate-dial-code .iti__selected-dial-code {
  margin-left: 6px !important;
  color: var(--text-muted, #94a3b8) !important;
  font-size: 13px !important;
}
/* Dark mode: flag container background */
body.dark-mode .iti--separate-dial-code .iti__selected-flag {
  background: rgba(255,255,255,0.08) !important;
}

/* ── intl-tel-input dropdown — dark mode ── */
body.dark-mode .iti__country-list {
  background: var(--bg-card, #1e293b) !important;
  border: 1px solid var(--border-subtle, rgba(152,128,255,.22)) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 25px rgba(0,0,0,.4) !important;
}
body.dark-mode .iti__country-list .iti__country {
  color: var(--text-primary, #e2e8f0) !important;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
body.dark-mode .iti__country-list .iti__country:hover,
body.dark-mode .iti__country-list .iti__country.iti__highlight {
  background: rgba(152,128,255,.15) !important;
}
body.dark-mode .iti__country-list .iti__country-name {
  color: var(--text-primary, #e2e8f0) !important;
}
body.dark-mode .iti__country-list .iti__dial-code {
  color: var(--text-muted, #94a3b8) !important;
}
body.dark-mode .iti__country-list .iti__divider {
  border-bottom-color: var(--border-subtle, rgba(152,128,255,.22)) !important;
}
/* Search box inside dropdown */
body.dark-mode .iti__country-list input,
body.dark-mode .iti__search-input {
  background: var(--bg-sidebar, #10131a) !important;
  color: var(--text-primary, #e2e8f0) !important;
  border-color: var(--border-subtle) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESTAURANT EDIT PAGE — Responsive Fixes for Tablets
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nav pills: ALWAYS horizontal scroll, never wrap — all screen sizes ── */
#res_menagment.nav-pills {
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  padding-bottom: 4px;
}
#res_menagment.nav-pills::-webkit-scrollbar {
  display: none;
}
#res_menagment .nav-item {
  flex-shrink: 0 !important;
}
#res_menagment .nav-link {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Restaurant images: prevent overlap ── */
@media (max-width: 991.98px) {
  /* Image upload containers: stack vertically */
  .fileinput,
  .fileinput-new,
  .fileinput-exists {
    width: 100% !important;
    max-width: 100% !important;
  }
  .fileinput .thumbnail,
  .fileinput-preview {
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden;
  }
  .fileinput .thumbnail img,
  .fileinput-preview img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
  /* Image grid: stack on tablet */
  .card-body .row > [class*="col-md-4"]:has(.fileinput),
  .card-body .row > [class*="col-md-6"]:has(.fileinput),
  .card-body .row > [class*="col-4"]:has(.fileinput) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem;
  }
}

/* ── Form columns inside restaurant edit ── */
@media (max-width: 991.98px) {
  /* Stack all form col-md-6 to full width */
  .tab-content .col-md-6,
  .tab-content .col-md-4,
  .tab-pane .col-md-6,
  .tab-pane .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ── Working hours table ── */
@media (max-width: 767.98px) {
  /* Compact the working hours table */
  .table-responsive table td,
  .table-responsive table th {
    font-size: 11px !important;
    padding: 4px 6px !important;
  }
  .table-responsive input[type="time"] {
    font-size: 11px !important;
    padding: 2px 4px !important;
    min-width: 75px;
  }
}

/* ── Location map ── */
@media (max-width: 991.98px) {
  #map,
  .map-container,
  [style*="height: 500px"] {
    height: 250px !important;
    min-height: 200px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END RESTAURANT EDIT FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Image upload thumbnails: prevent overflow from inline width styles ── */
.fileinput-preview.img-thumbnail,
.fileinput-preview {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden;
}
.fileinput-preview img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}
/* On mobile/tablet: image containers full width */
@media (max-width: 991.98px) {
  .fileinput-preview.img-thumbnail {
    max-width: 250px !important;
    margin: 0 auto;
  }
}

/* ── Image upload sections: proper spacing between image and button ── */
.fileinput {
  margin-bottom: 1.5rem;
}
.fileinput .fileinput-preview {
  margin-bottom: 0.75rem;
}
.fileinput .btn-file,
.fileinput .btn-outline-secondary {
  margin-top: 0.5rem;
}
/* Separate each image upload group clearly */
.form-group:has(.fileinput) {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle, rgba(152,128,255,.12));
}
.form-group:has(.fileinput):last-child {
  border-bottom: none;
}
/* Fallback for browsers without :has() support */
.fileinput-new,
.fileinput-exists {
  margin-bottom: 1rem;
}

/* ── Self-Order Dashboard: equal height chart/kiosk cards ── */
.card.shadow.w-100 {
  display: flex;
  flex-direction: column;
}
.card.shadow.w-100 .card-body {
  flex: 1;
}
/* Filter form: proper wrapping and select styling */
.card-header form.row .form-control-sm {
  border-radius: 8px !important;
}

/* ── Self-Order Dashboard: filter form fixes ── */
/* Select dropdowns: text visibility */
.card-body form select.form-control-sm,
.card-body form select.form-control {
  color: var(--text-primary, #e2e8f0) !important;
  line-height: 1.5 !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 0.5rem 2rem 0.5rem 1rem !important;
}
/* Date inputs: match height of selects */
.card-body form input[type="date"].form-control-sm {
  min-height: 38px !important;
  padding: 0.5rem 0.75rem !important;
  line-height: 1.5 !important;
  color: var(--text-primary, #e2e8f0) !important;
}
/* Clear button: center text, same height as Filter */
.card-body form .btn-outline-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
}
/* Filter button: same height */
.card-body form .btn-primary {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Icon shapes: visible in dark mode (global) ── */
body.dark-mode .icon-shape.bg-gradient-red { background: linear-gradient(87deg, #f5365c, #f56036) !important; }
body.dark-mode .icon-shape.bg-gradient-green { background: linear-gradient(87deg, #2dce89, #2dcecc) !important; }
body.dark-mode .icon-shape.bg-gradient-orange { background: linear-gradient(87deg, #fb6340, #fbb140) !important; }
body.dark-mode .icon-shape.bg-gradient-info { background: linear-gradient(87deg, #11cdef, #1171ef) !important; }

/* ═══════════════════════════════════════════
   Self-Order Dashboard — Stat Cards
   ═══════════════════════════════════════════ */
.so-cards-row {
  margin-bottom: 1rem;
}
.so-card {
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-card, #334155);
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  transition: border-color .2s, box-shadow .2s;
}
.so-card:hover {
  border-color: rgba(152,128,255,.35);
  box-shadow: 0 0 0 2px rgba(152,128,255,.15), 0 4px 24px rgba(0,0,0,.4);
}
/* Top row: label + icon badge */
.so-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.so-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #94a3b8);
}
.so-card-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
/* Big value */
.so-card-val {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.5rem;
}
/* Meta line (revenue / subtitle) */
.so-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 0;
}
.so-card-trend {
  font-weight: 600;
}
.so-card-trend--up { color: #2dce89; }
.so-card-trend--warn { color: #fb6340; }
.so-card-trend i { font-size: 0.65rem; margin-right: 3px; }
.so-card-meta-text { color: var(--text-muted, #94a3b8); }
/* Footer: label + value */
.so-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 1rem;
}
.so-card-foot-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
}
.so-card-foot-val {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
}
/* Progress bar */
.so-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  margin-top: 0.5rem;
  overflow: hidden;
}
.so-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s ease;
}
.so-bar--purple { background: #9880ff; }
.so-bar--green { background: #2dce89; }
.so-bar--red { background: #ef4444; }
.so-bar--blue { background: #6366f1; }

/* ═══════════════════════════════════════════
   Upsell page — responsive fixes
   ═══════════════════════════════════════════ */
/* Pairing rules: compact on tablet */
@media (max-width: 991.98px) {
  .pairing-rule .d-flex {
    flex-wrap: wrap !important;
    gap: 6px;
  }
  .pairing-rule select.form-control-sm {
    max-width: 100% !important;
    margin-top: 4px;
  }
  /* Manual picks grid */
  .card-body .col-lg-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 575.98px) {
  .card-body .col-lg-4,
  .card-body .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .upsell-chip {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
}

/* ── Header text: always visible above pulled-up cards ── */
.header .header-body {
  position: relative;
  z-index: 2;
}
.header .header-body h2 {
  font-size: 1.5rem;
}
.header .header-body p {
  max-width: 700px;
}
@media (max-width: 767.98px) {
  .header .header-body h2 {
    font-size: 1.25rem;
  }
  .header .header-body p {
    font-size: 12px !important;
  }
}


/* ── Point Rules card: permanent visible scrollbar (no auto-hide) ── */
#point-rules-card .card-footer {
  max-height: 450px;
  overflow-y: scroll !important;
}
/* Disable macOS overlay scrollbar — force classic always-visible scrollbar */
#point-rules-card .card-footer::-webkit-scrollbar {
  -webkit-appearance: none !important;
  width: 10px !important;
}
#point-rules-card .card-footer::-webkit-scrollbar-track {
  background: rgba(148,163,184,.12) !important;
  border-radius: 5px;
  margin: 4px 0;
}
#point-rules-card .card-footer::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.45) !important;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box !important;
  min-height: 50px;
}
#point-rules-card .card-footer::-webkit-scrollbar-thumb:hover {
  background: rgba(148,163,184,.65) !important;
  background-clip: padding-box !important;
}
/* Firefox */
@supports (scrollbar-color: auto) {
  #point-rules-card .card-footer {
    scrollbar-width: auto !important;
    scrollbar-color: rgba(148,163,184,.45) rgba(148,163,184,.12) !important;
  }
}

/* ── Loyalty Settings: scrollable right column ── */
#loyalty-scroll-area {
  scrollbar-width: auto;
  scrollbar-color: rgba(148,163,184,.4) rgba(148,163,184,.1);
}
#loyalty-scroll-area::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
}
#loyalty-scroll-area::-webkit-scrollbar-track {
  background: rgba(148,163,184,.1);
  border-radius: 3px;
}
#loyalty-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.4);
  border-radius: 3px;
}
/* Scroll hint for loyalty settings column */
#loyalty-settings-col {
  position: relative;
}
#loyalty-settings-col::after {
  content: '\f078  Scroll';
  font-family: 'Font Awesome 5 Free', 'Quicksand', sans-serif;
  font-weight: 900;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
  background: var(--bg-card, #1e293b);
  padding: 3px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle, rgba(152,128,255,.22));
  pointer-events: none;
  z-index: 2;
  opacity: 0.8;
}

/* ── Date input groups: fix double border issue ── */
.input-group .form-control {
  border-radius: 0 var(--radius-pill, 999px) var(--radius-pill, 999px) 0 !important;
}
.input-group .input-group-prepend .input-group-text,
.input-group .input-group-addon {
  border-radius: var(--radius-pill, 999px) 0 0 var(--radius-pill, 999px) !important;
  background: var(--bg-card, #1e293b) !important;
  border: 1px solid var(--border-subtle, rgba(152,128,255,.22)) !important;
  border-right: none !important;
  color: var(--text-muted, #94a3b8) !important;
}
.input-group {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
/* Remove the outer input-group border that creates double container */
.form-group .input-group {
  box-shadow: none !important;
}

/* ── Form groups containing input-groups: remove outer box ── */
.form-group:has(.input-group) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Fallback: target form-group with date/time inputs directly */
.form-group .input-group {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
/* The input-group wrapper from Argon has its own styling — kill it */
.input-group.focused,
.input-group:focus-within {
  box-shadow: none !important;
}
.input-group-prepend + .form-control,
.input-group .form-control {
  border-left: none !important;
}
.input-group-prepend .input-group-text {
  border-right: none !important;
}

/* ── Datepicker range wrapper: remove outer colored box ── */
.input-daterange.datepicker,
.input-daterange,
div.input-daterange.datepicker.row,
.card .input-daterange,
.card-body .input-daterange,
.bg-secondary .input-daterange,
body .input-daterange.datepicker,
body.dark-mode .input-daterange.datepicker {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── Alert boxes: dark mode compatible colors ── */
body.dark-mode .alert-info,
.alert-info {
  background: rgba(152, 128, 255, 0.1) !important;
  border: 1px solid rgba(152, 128, 255, 0.3) !important;
  color: var(--text-primary, #e2e8f0) !important;
  border-radius: var(--radius-md, 12px) !important;
}
.alert-info strong {
  color: var(--primary, #9880ff) !important;
}
body.dark-mode .alert-success,
.alert-success {
  background: rgba(199, 208, 55, 0.1) !important;
  border: 1px solid rgba(199, 208, 55, 0.3) !important;
  color: var(--text-primary, #e2e8f0) !important;
  border-radius: var(--radius-md, 12px) !important;
}
body.dark-mode .alert-warning,
.alert-warning {
  background: rgba(232, 242, 76, 0.1) !important;
  border: 1px solid rgba(232, 242, 76, 0.3) !important;
  color: var(--text-primary, #e2e8f0) !important;
  border-radius: var(--radius-md, 12px) !important;
}
body.dark-mode .alert-danger,
.alert-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: var(--text-primary, #e2e8f0) !important;
  border-radius: var(--radius-md, 12px) !important;
}


/* ═══════════════════════════════════════════════
   FOOODIS BREADCRUMB NAVIGATION
   ═══════════════════════════════════════════════ */
.fooodis-breadcrumb-wrapper {
  padding: 0 24px;
  margin-top: 8px;
  margin-bottom: 16px;
}
.fooodis-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(16, 19, 26, 0.65);
  border: 1px solid rgba(152, 128, 255, 0.13);
  border-radius: 999px;
  padding: 9px 22px;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fooodis-breadcrumb-home {
  display: flex;
  align-items: center;
  color: rgba(226, 232, 240, 0.7);
  font-size: 14px;
  transition: color 0.18s ease;
  text-decoration: none;
}
.fooodis-breadcrumb-home:hover {
  color: #9880ff;
  text-decoration: none;
}
.fooodis-breadcrumb-sep {
  color: rgba(148, 163, 184, 0.4);
  font-weight: 300;
  font-size: 14px;
  user-select: none;
}
.fooodis-breadcrumb-link {
  color: rgba(226, 232, 240, 0.7);
  text-decoration: none;
  transition: color 0.18s ease;
  white-space: nowrap;
}
.fooodis-breadcrumb-link:hover {
  color: #9880ff;
  text-decoration: none;
}
.fooodis-breadcrumb-current {
  color: rgba(226, 232, 240, 0.95);
  font-weight: 600;
  white-space: nowrap;
}

/* Responsive: hide breadcrumb on mobile */
@media (max-width: 767px) {
  .fooodis-breadcrumb-wrapper {
    padding: 0 16px;
    margin-top: 6px;
    margin-bottom: 12px;
  }
  .fooodis-breadcrumb {
    font-size: 12px;
    padding: 7px 16px;
    gap: 7px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BATCH 6 — FULL DASHBOARD RESPONSIVE UI/UX AUDIT FIXES
   April 2026 — Comprehensive pass across all breakpoints & pages
   Covers: global typography, badges, guide cards, topbar buttons,
           CRUD pages, missing module pages, ultra-wide constraints,
           card consistency, status badges, action dropdowns
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────
   6.1  GLOBAL TYPOGRAPHY — minimum readable sizes
   ─────────────────────────────────────────── */

/* Topbar btn-sm were rendering at 9.6px — enforce 12px minimum */
#navbar-main .btn-sm,
.navbar-top .btn-sm {
  font-size: 0.75rem !important;
  padding: 0.35rem 0.75rem !important;
  line-height: 1.4 !important;
}

/* Badge text was 8.58px — enforce 11px minimum globally */
.badge {
  font-size: 0.6875rem !important;
  padding: 0.3em 0.6em !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Long status text like ACCEPTED_BY_RESTAURANG — tooltip + truncate */
.badge[title] {
  cursor: help;
}

/* Ensure table cell text is readable */
.table td, .table th {
  font-size: 0.8125rem;
  vertical-align: middle;
}

/* ───────────────────────────────────────────
   6.2  GUIDE CARDS — reduce visual weight on all pages
   ─────────────────────────────────────────── */

/* Guide cards consume too much vertical space — compact them */
.guide-card,
.card[class*="guide"],
div[id*="guide_card"],
div[id*="guideCard"] {
  margin-bottom: 0.75rem !important;
}
.guide-card .card-body,
.card[class*="guide"] .card-body {
  padding: 0.75rem 1rem !important;
}
.guide-card .card-body p,
.card[class*="guide"] .card-body p {
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  margin-bottom: 0.25rem !important;
}

/* On mobile, allow guide cards to collapse further */
@media (max-width: 767.98px) {
  .guide-card .card-body,
  .card[class*="guide"] .card-body {
    padding: 0.5rem 0.75rem !important;
  }
  .guide-card .card-body p,
  .card[class*="guide"] .card-body p {
    font-size: 0.75rem !important;
  }
}

/* ───────────────────────────────────────────
   6.3  CARD BORDER-RADIUS CONSISTENCY
   ─────────────────────────────────────────── */

/* Enforce consistent 12px radius on all dashboard cards */
.main-content .card {
  border-radius: 12px !important;
  overflow: hidden;
}
.main-content .card .card-header {
  border-radius: 12px 12px 0 0 !important;
}
.main-content .card .card-header:only-child {
  border-radius: 12px !important;
}
.main-content .card .card-footer {
  border-radius: 0 0 12px 12px !important;
}
/* Table inside card keeps square bottom for scroll */
.main-content .card .table-responsive {
  border-radius: 0 !important;
}

/* ───────────────────────────────────────────
   6.4  CRUD / LISTING PAGES (general/index pattern)
        — Fix header wrapping, action button overflow
   ─────────────────────────────────────────── */

/* Card header: title + actions row */
.card-header .row {
  align-items: center;
}

/* Action buttons in card header — wrap gracefully */
.card-header .col-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

/* Tablet: give more room to actions */
@media (max-width: 991.98px) {
  .card-header > .row > .col-8 {
    flex: 0 0 55% !important;
    max-width: 55% !important;
  }
  .card-header > .row > .col-4 {
    flex: 0 0 45% !important;
    max-width: 45% !important;
  }
}

/* Mobile: stack title above actions */
@media (max-width: 575.98px) {
  .card-header > .row > .col-8,
  .card-header > .row > .col-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .card-header > .row > .col-4 {
    justify-content: flex-start !important;
    margin-top: 8px;
  }
  .card-header > .row > .col-4 .btn {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.6rem !important;
  }
}

/* Table action dropdowns: don't clip inside table-responsive */
.table-responsive {
  overflow-x: auto;
  overflow-y: visible !important;
}
.table-responsive .dropdown-menu {
  position: absolute !important;
  z-index: 1050 !important;
}

/* ───────────────────────────────────────────
   6.5  STATUS BADGES — readable on all screens
   ─────────────────────────────────────────── */

/* Order status badges — ensure contrast and size */
.badge-warning { color: #1a1a2e !important; }
.badge-success { color: #fff !important; }
.badge-danger  { color: #fff !important; }
.badge-info    { color: #fff !important; }
.badge-primary { color: #fff !important; }
.badge-default, .badge-secondary {
  background-color: var(--bg-card, #1e293b) !important;
  color: var(--text-primary, #e2e8f0) !important;
  border: 1px solid var(--border-subtle, rgba(148,163,184,.2)) !important;
}

/* ───────────────────────────────────────────
   6.6  MISSING MODULE PAGES — Clients, Contacts,
        Expenses, Drivers, Reviews, Banners, Cities, Visits
   ─────────────────────────────────────────── */

/* These all use the general/index CRUD pattern.
   Ensure their filter rows wrap on mobile. */
@media (max-width: 767.98px) {
  /* Filter row inside card header */
  .card-header .filter-row,
  .card-header form .row,
  .card-header .d-flex.flex-wrap {
    flex-direction: column !important;
    gap: 6px;
  }
  .card-header .filter-row .form-control,
  .card-header .filter-row select,
  .card-header form .col-auto {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .card-header .filter-row .btn,
  .card-header form .btn {
    width: 100%;
    margin-top: 4px;
  }
}

/* Clients page — contact info wrapping */
@media (max-width: 575.98px) {
  .table td .d-flex {
    flex-wrap: wrap;
    gap: 4px;
  }
  .table td .avatar {
    width: 28px !important;
    height: 28px !important;
  }
  .table td .avatar img {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ───────────────────────────────────────────
   6.7  DRIVER / MAP PAGES — responsive map container
   ─────────────────────────────────────────── */

@media (max-width: 767.98px) {
  #map, .map-container, [id*="map"] {
    height: 300px !important;
    min-height: 250px;
  }
  /* Driver list + map side by side → stack */
  .driver-list-map .row > [class*="col-lg"],
  .driver-list-map .row > [class*="col-md"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ───────────────────────────────────────────
   6.8  MODAL IMPROVEMENTS — dark-mode + responsive
   ─────────────────────────────────────────── */

/* Modal dark-mode styling — match card design system */
.modal-content {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
}

.modal-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-top-left-radius: var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
  padding: 1.25rem 1.5rem !important;
}

.modal-header .modal-title {
  color: var(--text-primary) !important;
  font-weight: 600;
}

.modal-header .close {
  color: var(--text-muted) !important;
  text-shadow: none !important;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal-header .close:hover {
  color: var(--text-primary) !important;
  opacity: 1;
  transform: rotate(90deg);
}

.modal-body {
  padding: 1.5rem !important;
  color: var(--text-secondary) !important;
}

.modal-body label {
  color: var(--text-muted) !important;
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
}

.modal-body .text-muted,
.modal-body small.text-muted {
  color: var(--text-muted) !important;
}

.modal-body hr {
  border-color: var(--border-subtle) !important;
}

.modal-body .form-check-label {
  color: var(--text-secondary) !important;
  text-transform: none;
  font-size: 0.875rem;
}

.modal-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-bottom-left-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
  padding: 1rem 1.5rem !important;
}

.modal-footer .btn-secondary {
  background-color: var(--bg-card-soft) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}

.modal-footer .btn-secondary:hover {
  background-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

/* Dark backdrop */
.modal-backdrop.show {
  opacity: 0.6 !important;
  background-color: #000 !important;
}

@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }
  .modal-body {
    padding: 1rem !important;
  }
  .modal-body .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px;
  }
  .modal-footer {
    padding: 0.75rem 1rem !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .modal-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ───────────────────────────────────────────
   6.9  SELECT2 — dark mode consistency
   ─────────────────────────────────────────── */

/* Select2 dropdown dark mode */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(152, 128, 255, 0.2) !important;
  color: #e2e8f0 !important;
}
.select2-dropdown {
  background-color: var(--bg-card, #1e293b) !important;
  border-color: var(--border-subtle, rgba(148,163,184,.2)) !important;
  border-radius: 8px !important;
}
.select2-container--default .select2-results__option {
  color: var(--text-primary, #e2e8f0) !important;
  padding: 8px 12px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: rgba(255,255,255,.06) !important;
  color: var(--text-primary, #e2e8f0) !important;
  border-color: var(--border-subtle, rgba(148,163,184,.2)) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
}

/* ───────────────────────────────────────────
   6.10  ULTRA-WIDE SCREENS (1920px+)
         — constrain content width, maintain readability
   ─────────────────────────────────────────── */

@media (min-width: 1920px) {
  .main-content .container-fluid {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 2560px) {
  .main-content .container-fluid {
    max-width: 1800px;
  }
}

/* ───────────────────────────────────────────
   6.11  PAGINATION — dark mode + mobile
   ─────────────────────────────────────────── */

.pagination .page-link {
  background-color: var(--bg-card, #1e293b) !important;
  color: var(--text-primary, #e2e8f0) !important;
  border-color: var(--border-subtle, rgba(148,163,184,.2)) !important;
  border-radius: 6px !important;
  margin: 0 2px;
  font-size: 0.8125rem;
}
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #9880ff 0%, #6366f1 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.pagination .page-link:hover {
  background-color: rgba(152,128,255,.15) !important;
  color: #9880ff !important;
}

@media (max-width: 575.98px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }
  .pagination .page-link {
    padding: 0.3rem 0.55rem !important;
    font-size: 0.75rem !important;
  }
}

/* ───────────────────────────────────────────
   6.12  EMPTY STATES — better visual on dark theme
   ─────────────────────────────────────────── */

.table td[colspan] {
  text-align: center;
  color: var(--text-muted, #94a3b8);
  padding: 2rem 1rem !important;
  font-size: 0.875rem;
}

/* ───────────────────────────────────────────
   6.13  TOPBAR SEARCH — dark mode fix
   ─────────────────────────────────────────── */

#navbar-main .form-control,
.navbar-top .navbar-search .form-control {
  background-color: rgba(255,255,255,.06) !important;
  border-color: var(--border-subtle, rgba(148,163,184,.2)) !important;
  color: var(--text-primary, #e2e8f0) !important;
  border-radius: 8px !important;
}
#navbar-main .form-control::placeholder {
  color: var(--text-muted, #94a3b8) !important;
}

/* ───────────────────────────────────────────
   6.14  FORM INPUTS — consistent dark mode styling
   ─────────────────────────────────────────── */

/* Ensure all form inputs in main content have dark styling */
.main-content .form-control:not(.flatpickr-input),
.main-content .custom-select {
  background-color: rgba(255,255,255,.06);
  border: 1px solid var(--border-subtle, rgba(148,163,184,.2));
  color: var(--text-primary, #e2e8f0);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.main-content .form-control:focus,
.main-content .custom-select:focus {
  border-color: #9880ff !important;
  box-shadow: 0 0 0 2px rgba(152,128,255,.18) !important;
  background-color: rgba(255,255,255,.08);
}
.main-content .form-control::placeholder {
  color: var(--text-muted, #94a3b8);
}
.main-content label {
  color: var(--text-primary, #e2e8f0);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* ───────────────────────────────────────────
   6.15  DROPDOWN MENUS — dark theme consistency
   ─────────────────────────────────────────── */

.main-content .dropdown-menu {
  background-color: var(--bg-card, #1e293b) !important;
  border: 1px solid var(--border-subtle, rgba(148,163,184,.2)) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 25px rgba(0,0,0,.35) !important;
  padding: 0.5rem 0 !important;
}
.main-content .dropdown-item {
  color: var(--text-primary, #e2e8f0) !important;
  font-size: 0.8125rem !important;
  padding: 0.5rem 1rem !important;
  transition: background 0.15s ease;
}
.main-content .dropdown-item:hover,
.main-content .dropdown-item:focus {
  background-color: rgba(152,128,255,.1) !important;
  color: #9880ff !important;
}
.main-content .dropdown-item i {
  width: 20px;
  text-align: center;
  margin-right: 6px;
}
.main-content .dropdown-divider {
  border-top-color: var(--border-subtle, rgba(148,163,184,.15)) !important;
}

/* ───────────────────────────────────────────
   6.16  TABLE IMPROVEMENTS — hover, striping, responsiveness
   ─────────────────────────────────────────── */

/* Subtle row hover for all dashboard tables */
.main-content .table tbody tr:hover {
  background-color: rgba(152,128,255,.04) !important;
}

/* Sticky table header on scroll */
.table-responsive .table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-card, #1e293b);
  z-index: 2;
  border-bottom: 2px solid var(--border-subtle, rgba(148,163,184,.2));
}

/* On mobile, hint that table scrolls horizontally */
@media (max-width: 767.98px) {
  .table-responsive {
    position: relative;
  }
  .table-responsive::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to left, rgba(29,32,41,0.6), transparent);
    pointer-events: none;
    z-index: 1;
    border-radius: 0 0 12px 0;
  }
  /* Make tables more compact on mobile */
  .table td, .table th {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.75rem !important;
  }
  .table .btn-sm {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.45rem !important;
  }
}

/* ───────────────────────────────────────────
   6.17  ALERT / NOTIFICATION BOXES — dark mode
   ─────────────────────────────────────────── */

.main-content .alert {
  border-radius: 10px !important;
  border: none !important;
  font-size: 0.8125rem;
}
.main-content .alert-info {
  background: rgba(99,102,241,.12) !important;
  color: #a5b4fc !important;
}
.main-content .alert-success {
  background: rgba(45,206,137,.12) !important;
  color: #6ee7b7 !important;
}
.main-content .alert-warning {
  background: rgba(232,242,76,.1) !important;
  color: #e8f24c !important;
}
.main-content .alert-danger {
  background: rgba(239,68,68,.12) !important;
  color: #fca5a5 !important;
}

/* ───────────────────────────────────────────
   6.18  TOOLTIP DARK THEME
   ─────────────────────────────────────────── */

.tooltip-inner {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  padding: 6px 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
}
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #0f172a !important;
}
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #0f172a !important;
}

/* ───────────────────────────────────────────
   6.19  PAGEBUILDER EDITOR — responsive within dashboard
   ─────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .pbe-wrapper {
    flex-direction: column;
  }
  .pbe-topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px !important;
  }
  .pbe-topbar-left {
    flex: 1 1 100%;
    min-width: 0;
  }
  .pbe-topbar-center {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
  }
  .pbe-topbar-right {
    flex-wrap: wrap;
    gap: 6px;
  }
  .pbe-left {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1050;
    width: 280px !important;
    box-shadow: 4px 0 16px rgba(0,0,0,.3);
  }
  .pbe-right {
    position: fixed !important;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1050;
    width: 280px !important;
    box-shadow: -4px 0 16px rgba(0,0,0,.3);
  }
}

@media (max-width: 575.98px) {
  .pbe-topbar-right .pb-btn {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
  }
  .pbe-title {
    font-size: 0.875rem !important;
  }
  .pbe-left, .pbe-right {
    width: 100% !important;
  }
}

/* ───────────────────────────────────────────
   6.20  SCROLLBAR — custom dark scrollbar for WebKit
   ─────────────────────────────────────────── */

.main-content ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.main-content ::-webkit-scrollbar-track {
  background: transparent;
}
.main-content ::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.25);
  border-radius: 999px;
}
.main-content ::-webkit-scrollbar-thumb:hover {
  background: rgba(148,163,184,.4);
}

/* ───────────────────────────────────────────
   6.21  REVIEWS PAGE — star ratings readable
   ─────────────────────────────────────────── */

.rating-stars i,
.fa-star {
  font-size: 0.875rem;
}
.rating-stars .fas.fa-star {
  color: #f59e0b;
}
.rating-stars .far.fa-star {
  color: rgba(148,163,184,.3);
}

/* ───────────────────────────────────────────
   6.22  BANNER / IMAGE CARDS — responsive images
   ─────────────────────────────────────────── */

.card img.img-fluid,
.card img[class*="banner"] {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}
@media (max-width: 575.98px) {
  .card img.img-fluid,
  .card img[class*="banner"] {
    border-radius: 6px;
  }
}

/* ───────────────────────────────────────────
   6.23  DESKTOP 1366px (LAPTOP) — tighten spacing
   ─────────────────────────────────────────── */

@media (min-width: 992px) and (max-width: 1399.98px) {
  .main-content .container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Slightly tighter card padding for laptop */
  .card-body {
    padding: 1rem !important;
  }
  .card-header {
    padding: 0.875rem 1rem !important;
  }
}

/* ───────────────────────────────────────────
   6.24  TABLET (768px–991px) — two-column grids
   ─────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Dashboard stat cards: 2 per row */
  .main-content .row > .col-xl-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  /* Form columns: stack 3-col into 2 */
  .main-content .row > .col-lg-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  /* Sidebar + content layouts */
  .main-content .row > .col-lg-8,
  .main-content .row > .col-lg-4.order-lg-first {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ───────────────────────────────────────────
   6.25  MOBILE (< 576px) — full stacking
   ─────────────────────────────────────────── */

@media (max-width: 575.98px) {
  /* All column variants stack fully */
  .main-content .row > [class*="col-md"],
  .main-content .row > [class*="col-lg"],
  .main-content .row > [class*="col-xl"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Reduce container padding */
  .main-content .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Card body tighter on phone */
  .main-content .card-body {
    padding: 0.75rem !important;
  }
  .main-content .card-header {
    padding: 0.6rem 0.75rem !important;
  }

  /* Button groups: wrap */
  .btn-group {
    flex-wrap: wrap;
  }

  /* Page title / h1-h5 sizing */
  .main-content h1, .main-content .h1 { font-size: 1.5rem !important; }
  .main-content h2, .main-content .h2 { font-size: 1.25rem !important; }
  .main-content h3, .main-content .h3 { font-size: 1.1rem !important; }
  .main-content h4, .main-content .h4 { font-size: 1rem !important; }
  .main-content h5, .main-content .h5 { font-size: 0.9rem !important; }
}

/* ───────────────────────────────────────────
   6.26  EXPENSES / FINANCES TABLES — number alignment
   ─────────────────────────────────────────── */

.table td.text-right,
.table th.text-right {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

/* Currency amounts */
.amount, .price, [class*="amount"], [class*="price"] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ───────────────────────────────────────────
   6.27  NAV PILLS / TABS — dark mode consistent
   ─────────────────────────────────────────── */

.main-content .nav-pills .nav-link {
  color: var(--text-muted, #94a3b8);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.main-content .nav-pills .nav-link:hover {
  color: var(--text-primary, #e2e8f0);
  background: rgba(152,128,255,.08);
}
.main-content .nav-pills .nav-link.active {
  background: linear-gradient(135deg, #9880ff 0%, #6366f1 100%) !important;
  color: #fff !important;
}

@media (max-width: 575.98px) {
  .main-content .nav-pills {
    flex-wrap: wrap;
    gap: 4px;
  }
  .main-content .nav-pills .nav-link {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.75rem !important;
  }
}

/* ───────────────────────────────────────────
   6.28  LOADING / SPINNER OVERLAY
   ─────────────────────────────────────────── */

.loading-overlay,
.spinner-overlay {
  background: rgba(29,32,41,.7) !important;
  backdrop-filter: blur(4px);
  border-radius: 12px;
}

/* ───────────────────────────────────────────
   6.29  PRINT STYLES — clean output
   ─────────────────────────────────────────── */

@media print {
  .sidebar, #sidenav-main, .navbar-top, #navbar-main,
  .fooodis-breadcrumb-wrapper, .guide-card, .btn,
  .dropdown-toggle, footer {
    display: none !important;
  }
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }
  body, .table td, .table th {
    color: #000 !important;
    font-size: 11pt !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END BATCH 6 — FULL DASHBOARD RESPONSIVE UI/UX AUDIT FIXES
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   BATCH 6b — POST-AUDIT REFINEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* 6b.1  btn-sm in main content was still 9.6px — enforce 12px globally */
.main-content .btn-sm {
  font-size: 0.75rem !important;
  padding: 0.35rem 0.75rem !important;
  line-height: 1.4 !important;
  border-radius: 6px;
}

/* 6b.2  Normalize all dashboard cards to 12px radius (some had 18px from argon) */
.main-content .card {
  border-radius: 12px !important;
}

/* 6b.3  Guide card btn-sm — ensure they're not too small */
.guide-card .btn-sm,
.card[class*="guide"] .btn-sm {
  font-size: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END BATCH 6b
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   BATCH 6c — SIDEBAR & GLOBAL BTN-SM FIX
   ═══════════════════════════════════════════════════════════════════════════ */

/* 6c.1  Global btn-sm minimum — catches sidebar/mobile-header buttons that
         are outside .main-content and #navbar-main */
.btn-sm {
  font-size: 0.75rem !important;
}

/* 6c.2  Sidebar-specific btn-sm (mobile restaurant switcher, language dropdown,
         collapse toggle) */
.sidenav .btn-sm,
.d-lg-none .btn-sm,
.navbar-collapse .btn-sm {
  font-size: 0.75rem !important;
  padding: 0.3rem 0.65rem !important;
  line-height: 1.4 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END BATCH 6c
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Audit fix (2026-06-13): sidebar category labels (e.g. PROCUREMENT) were
   flush to the left edge, unlike the indented nav items. Indent + space them
   to match the nav links. Scoped to the label class only. ── */
.navbar-vertical .sidebar-category .sidebar-category-label,
.navbar-vertical .sidebar-category-label {
  display: block;
  padding: 0.875rem 1.5rem 0.35rem;
  margin: 0;
}


/* ── Audit fix (2026-06-13): admin dashboard KPI stat cards redesign ──
   The old Argon `.card-stats` layout pushed the delta text beside the value,
   leaving the cards cramped and inconsistent. `.padstat` gives a clean, even
   layout: label + value stacked top-left, accent icon top-right, caption
   below. Scoped to `.padstat` so other cards are untouched. ── */
.padstat .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.1rem;
  padding: 1.35rem 1.4rem;
  min-height: 124px;
}
.padstat .ps-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.padstat .ps-text { min-width: 0; }
.padstat .ps-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  margin: 0 0 0.45rem;
  line-height: 1;
}
.padstat .ps-value {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary, #e2e8f0);
  white-space: nowrap;
}
.padstat .ps-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.padstat .ps-icon i { line-height: 1; }
/* Specificity (0,3,0) to beat `body.dark-mode .header *` (0,2,1) which the
   theme uses to strip background-image on everything inside .header. */
.padstat .ps-icon.ps-icon--users  { background-image: linear-gradient(135deg, #6366f1, #8b5cf6) !important; }
.padstat .ps-icon.ps-icon--paying { background-image: linear-gradient(135deg, #17a589, #2dce89) !important; }
.padstat .ps-icon.ps-icon--mrr    { background-image: linear-gradient(135deg, #2d9cdb, #56ccf2) !important; }
.padstat .ps-icon.ps-icon--arr    { background-image: linear-gradient(135deg, #c9a96e, #e8c47a) !important; color: #1a1d2e; }
.padstat .ps-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}
.padstat .ps-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  color: var(--success, #2dce89);
}
.padstat .ps-foot-label { color: var(--text-muted, #94a3b8); }
.padstat.card:hover { transform: translateY(-2px); transition: transform 0.15s ease, box-shadow 0.15s ease; }
@media (max-width: 575.98px) {
  .padstat .ps-value { font-size: 1.5rem; }
  .padstat .card-body { min-height: 110px; }
}