/**
 * Garage Management System — Resend-inspired design system (design.md)
 * CSS-only visual layer. Load after all other stylesheets.
 */

/* Tokens defined in themes.css (light default, dark via html[data-theme="dark"]) */

/* ==========================================================================
   Global base
   ========================================================================== */
html,
body#app-layout {
  font-family: var(--pm-font) !important;
  background: var(--pm-bg) !important;
  color: var(--pm-text-1) !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body#app-layout .container.body,
body#app-layout .main_container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body#app-layout *,
body#app-layout *::before,
body#app-layout *::after {
  box-sizing: border-box;
}

body#app-layout h1,
body#app-layout h2,
body#app-layout h3,
body#app-layout h4,
body#app-layout h5,
body#app-layout h6 {
  color: var(--pm-text-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

body#app-layout a:not(.btn):not(.nav.side-menu > li > a):not(.dropdown-content a) {
  color: var(--pm-text-2);
}

body#app-layout a:not(.btn):hover {
  color: var(--pm-text-1);
}

/* SVG & icon sizing */
body#app-layout svg {
  max-width: 24px !important;
  max-height: 24px !important;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

body#app-layout .left_col .nav.side-menu a svg,
body#app-layout .left_col .nav.side-menu > li > a svg,
body#app-layout #sidebar-menu nav svg,
body#app-layout #sidebar-menu a svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

body#app-layout .dashboard-stat-icon svg,
body#app-layout .info-box .dashboard-stat-icon i {
  font-size: 20px !important;
}

body#app-layout button svg,
body#app-layout .btn svg,
body#app-layout a.btn svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
}

body#app-layout .left_col i.fa,
body#app-layout .left_col i[class*='fa-'] {
  font-size: 16px !important;
  width: 18px !important;
  text-align: center;
}

body#app-layout .dashboard-stat-icon,
body#app-layout [class*='icon']:not(svg):not(i.fa):not(.fa) {
  font-size: 16px !important;
}

/* Avatars */
body#app-layout .rounded.display-right,
body#app-layout .authpic img,
body#app-layout [class*='avatar'],
body#app-layout [class*='initials'] {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  border-radius: var(--pm-r-full) !important;
  object-fit: cover;
}

body#app-layout .page-title .authpic img,
body#app-layout .dropdown_profile img {
  width: 36px !important;
  height: 36px !important;
  border: 2px solid var(--pm-border);
}

/* ==========================================================================
   Layout — sidebar, main, topbar
   ========================================================================== */
body#app-layout.nav-md .col-md-3.left_col {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--pm-sidebar-w) !important;
  min-height: 100vh !important;
  height: 100vh !important;
  background: var(--pm-surface) !important;
  border-right: 1px solid var(--pm-border) !important;
  box-shadow: none !important;
  z-index: 1030 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  padding: 0 !important;
}

body#app-layout.nav-md .left_col,
body#app-layout.nav-md .left_col.scroll-view {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: visible !important;
  background: var(--pm-surface) !important;
}

body#app-layout.nav-md #sidebar-menu,
body#app-layout.nav-md .main_menu_side,
body#app-layout.nav-md .menu_section {
  flex: 1;
  overflow-x: visible !important;
  overflow-y: auto !important;
  background: var(--pm-surface) !important;
}

body#app-layout.nav-md .main_container .top_nav {
  position: relative;
  z-index: 1 !important;
  margin-left: var(--pm-sidebar-w) !important;
  margin-top: 0 !important;
  min-height: auto !important;
  height: auto !important;
  padding-top: 0 !important;
  clear: none !important;
  background: var(--pm-bg) !important;
  overflow: visible !important;
}

body#app-layout.nav-md .container.body .right_col {
  margin-left: 0 !important;
  padding: 0 32px 80px !important;
  background: var(--pm-bg) !important;
}

body#app-layout.nav-sm .col-md-3.left_col {
  width: 70px !important;
  background: var(--pm-surface) !important;
  border-right: 1px solid var(--pm-border) !important;
  z-index: 1030 !important;
  overflow: visible !important;
}

body#app-layout.nav-sm .main_container .top_nav {
  margin-left: 70px !important;
  z-index: 1 !important;
}

body#app-layout .page-title {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--pm-header-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pm-border);
  height: var(--pm-topbar-h);
  min-height: var(--pm-topbar-h);
  padding: 0 8px !important;
  margin: 0 -32px 24px;
  width: calc(100% + 64px);
  display: flex;
  align-items: center;
  overflow: visible !important;
}

body#app-layout .page-title .nav_menu,
body#app-layout .page-title nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  height: 100%;
  flex-wrap: nowrap;
  overflow: visible !important;
}

body#app-layout .nav.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Logo area */
body#app-layout .nav_title,
body#app-layout .navbar.nav_title {
  background: var(--pm-surface) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  box-shadow: none !important;
  height: var(--pm-topbar-h) !important;
  min-height: var(--pm-topbar-h);
  width: 100% !important;
  float: none !important;
  display: flex !important;
  align-items: center;
  padding: 0 24px !important;
  flex-shrink: 0;
}

body#app-layout .site_title,
body#app-layout .site_title.mb-0 {
  display: flex;
  align-items: center;
}

body#app-layout .profilepic {
  height: 32px !important;
  width: auto !important;
  max-width: 100%;
}

body#app-layout .menu_section {
  background: var(--pm-surface) !important;
  padding: 8px 0;
}

/* Sidebar nav */
body#app-layout .nav.side-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

body#app-layout .nav.side-menu > li {
  margin: 0 8px !important;
  background: transparent !important;
  position: relative;
  z-index: 1;
}

body#app-layout .nav.side-menu > li:hover,
body#app-layout .nav.side-menu > li:focus-within {
  z-index: 1100;
}

body#app-layout .nav.side-menu > li > a,
body#app-layout .nav.side-menu > li > .dropdown > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: var(--pm-r-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pm-text-2) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: background 150ms ease, color 150ms ease !important;
  white-space: nowrap;
}

body#app-layout .nav.side-menu > li > a i,
body#app-layout .nav.side-menu > li > a span,
body#app-layout .nav.side-menu > li > .dropdown > a i,
body#app-layout .nav.side-menu > li > .dropdown > a span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

body#app-layout .nav.side-menu > li > a:hover,
body#app-layout .nav.side-menu > li > .dropdown:hover > a {
  background: var(--pm-active-nav) !important;
  color: var(--pm-text-1) !important;
}

body#app-layout .nav.side-menu > li.active > a,
body#app-layout .nav.side-menu > li.current-page > a,
body#app-layout .nav.side-menu > li.active-sm > a {
  background: var(--pm-active-nav) !important;
  color: var(--pm-text-1) !important;
  -webkit-text-fill-color: var(--pm-text-1) !important;
  font-weight: 600 !important;
}

body#app-layout .nav.side-menu > li.active,
body#app-layout .nav.side-menu > li.current-page {
  background: transparent !important;
}

body#app-layout .nav.side-menu > li.active > .dropdown,
body#app-layout .nav.side-menu > li.current-page > .dropdown,
body#app-layout .nav.side-menu > li.active > .dropdown:hover,
body#app-layout .nav.side-menu > li.current-page > .dropdown:hover {
  background: var(--pm-active-nav) !important;
  width: auto !important;
}

body#app-layout .nav.side-menu > li.active > .dropdown > a,
body#app-layout .nav.side-menu > li.current-page > .dropdown > a,
body#app-layout .nav.side-menu > li.active > .dropdown > a i,
body#app-layout .nav.side-menu > li.active > .dropdown > a span,
body#app-layout .nav.side-menu > li.current-page > .dropdown > a i,
body#app-layout .nav.side-menu > li.current-page > .dropdown > a span {
  color: var(--pm-text-1) !important;
  -webkit-text-fill-color: var(--pm-text-1) !important;
  background: transparent !important;
}

body#app-layout .nav.side-menu > li > .dropdown {
  position: relative !important;
  display: block;
  width: 100%;
}

body#app-layout .left_col .dropdown,
body#app-layout #sidebar-menu .dropdown,
body#app-layout .nav.side-menu .dropdown {
  color: var(--pm-text-2) !important;
  position: relative !important;
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* ==========================================================================
   Sidebar submenus — single-column vertical list
   ========================================================================== */
:root {
  --pm-submenu-indent: 22px;
  --pm-submenu-gap: 4px;
  --pm-submenu-py: 7px;
  --pm-submenu-px: 14px;
  --pm-submenu-duration: 250ms;
}

/* Submenu panel — default hidden; vertical stack when visible */
body#app-layout .left_col .dropdown-content,
body#app-layout .nav.side-menu .dropdown-content {
  display: none;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: var(--pm-submenu-gap) !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  bottom: auto !important;
  min-width: 100% !important;
  width: auto !important;
  max-width: none !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  box-shadow: var(--pm-shadow-lg) !important;
  z-index: 9999 !important;
  padding: 6px 8px 6px var(--pm-submenu-indent) !important;
  inset: unset !important;
  height: auto;
  pointer-events: auto;
  box-sizing: border-box !important;
  grid-template-columns: none !important;
  columns: auto !important;
}

/* Collapsed sidebar: flyout panel to the right of narrow bar */
body#app-layout.nav-sm .left_col .dropdown-content,
body#app-layout.nav-sm .nav.side-menu .dropdown-content {
  left: 100% !important;
  right: auto !important;
  top: 0 !important;
  bottom: auto !important;
  min-width: 220px !important;
  width: 220px !important;
  margin-top: 0 !important;
  margin-left: 4px !important;
  margin-bottom: 0 !important;
}

@media (min-width: 992px) {
  /* nav-sm only: hover flyout (nav-md uses click accordion below) */
  body#app-layout.nav-sm .left_col .nav.side-menu > li > .dropdown:hover .dropdown-content,
  body#app-layout.nav-sm .left_col .nav.side-menu > li > .dropdown:focus-within .dropdown-content {
    display: flex !important;
  }
}

/* Submenu links — full-width vertical rows */
body#app-layout .nav.side-menu .dropdown-content a,
body#app-layout .left_col .nav.side-menu .dropdown-content a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
  padding: var(--pm-submenu-py) var(--pm-submenu-px) !important;
  padding-left: var(--pm-submenu-px) !important;
  margin: 0 !important;
  border-radius: var(--pm-r-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: break-word;
  color: var(--pm-text-2) !important;
  background: transparent !important;
  transition: background var(--pm-submenu-duration) ease, color var(--pm-submenu-duration) ease !important;
}

body#app-layout .nav.side-menu .dropdown-content a:hover,
body#app-layout .left_col .nav.side-menu .dropdown-content a:focus-visible {
  background: var(--pm-active-nav) !important;
  color: var(--pm-text-1) !important;
}

body#app-layout .nav.side-menu .dropdown-content a.active {
  background: var(--pm-active-nav) !important;
  color: var(--pm-text-1) !important;
  -webkit-text-fill-color: var(--pm-text-1) !important;
  font-weight: 600 !important;
}

/* Legacy child_menu lists (if present) */
body#app-layout ul.nav.child_menu {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: var(--pm-submenu-gap) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 2px 0 4px var(--pm-submenu-indent) !important;
  width: 100% !important;
  float: none !important;
}

body#app-layout ul.nav.child_menu li {
  display: block !important;
  width: 100% !important;
  float: none !important;
}

body#app-layout ul.nav.child_menu li a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: var(--pm-submenu-py) var(--pm-submenu-px) !important;
  padding-left: var(--pm-submenu-px) !important;
  border-radius: var(--pm-r-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pm-text-2) !important;
  text-align: left !important;
  transition: background var(--pm-submenu-duration) ease, color var(--pm-submenu-duration) ease !important;
}

body#app-layout ul.nav.child_menu li a:hover,
body#app-layout ul.nav.child_menu li.active > a,
body#app-layout ul.nav.child_menu li li a.active {
  background: var(--pm-active-nav) !important;
  color: var(--pm-text-1) !important;
  font-weight: 600 !important;
}

body#app-layout .main_menu,
body#app-layout .main_menu_side {
  background: var(--pm-surface) !important;
}

/* Sidebar background consistency (remove blue strip at bottom) */
body#app-layout.nav-md .col-md-3.left_col,
body#app-layout.nav-md .left_col,
body#app-layout.nav-md .left_col.scroll-view,
body#app-layout.nav-md #sidebar-menu,
body#app-layout.nav-md .main_menu_side,
body#app-layout.nav-md .menu_section {
  background: var(--pm-surface) !important;
}

/* Page title bar */
body#app-layout .titleup {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--pm-text-1) !important;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body#app-layout .addbotton,
body#app-layout .addbotton img {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  border-radius: var(--pm-r-full);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease;
}

body#app-layout .addbotton:hover {
  transform: scale(1.05);
}

body#app-layout .sidemenu_toggle,
body#app-layout #menu_toggle i {
  color: var(--pm-text-2) !important;
  font-size: 18px !important;
}

/* Header: title left, profile + quick-add on the right */
body#app-layout .page-title nav > .nav.toggle {
  flex: 0 1 auto;
  min-width: 0;
  order: 1;
  margin-right: auto;
}

/* Top-right profile + quick-add cluster */
body#app-layout .page-title nav > .header-profile-actions {
  order: 2;
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 20;
  float: none !important;
}

body#app-layout .page-title .header-profile-actions .ulprofile {
  float: none !important;
}

body#app-layout .page-title nav > .header-profile-actions > .dropdown {
  position: relative !important;
  flex: 0 0 auto;
}

body#app-layout .page-title nav > .header-profile-actions > .dropdown_profile.ulprofile {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  float: none !important;
}

body#app-layout .page-title .header-profile-actions .header-profile-dropdown {
  position: relative !important;
}

/* Block legacy global rules (custom.min.css + old sidebar CSS) on header controls */
body#app-layout .page-title .header-profile-actions .dropdown {
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  background: transparent !important;
  color: inherit !important;
  font-size: inherit !important;
}

body#app-layout .page-title .header-profile-actions .dropdown:hover {
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Header profile/+ menus: click only — block custom.min.css hover-open */
body#app-layout .page-title .header-profile-actions .dropdown > .dropdown-menu {
  display: none !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
}

body#app-layout .page-title .header-profile-actions .dropdown:hover > .dropdown-menu {
  display: none !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
}

body#app-layout .page-title .header-profile-actions .dropdown > .dropdown-menu.show,
body#app-layout .page-title .header-profile-actions .dropdown.show > .dropdown-menu,
body#app-layout .page-title .header-profile-actions .dropdown:hover > .dropdown-menu.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* custom.min.css: .dropdown > .dropdown-toggle:active { pointer-events: none; } */
body#app-layout .page-title .header-profile-actions .dropdown > .dropdown-toggle,
body#app-layout .page-title .header-profile-actions .dropdown > button[data-bs-toggle="dropdown"] {
  pointer-events: auto !important;
}

body#app-layout .header-profile-actions .header-plus-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: none !important;
}

body#app-layout .header-profile-actions .header-plus-toggle::after {
  display: none !important;
}

body#app-layout .header-profile-actions .header-profile-toggle::after,
body#app-layout .header-profile-actions .dropdown-toggle.authpic::after {
  display: none !important;
}

body#app-layout .header-profile-actions .header-profile-toggle,
body#app-layout .header-profile-actions .dropdown-toggle.authpic {
  display: inline-flex !important;
  align-items: center;
  padding: 0 !important;
  line-height: 1;
  box-shadow: none !important;
  pointer-events: auto !important;
}

/* Override legacy custom.min.css translate on profile menu */
body#app-layout .page-title ul.dropdown-menu.dropdown-usermenu,
body#app-layout .page-title ul.dropdown-menu.dropdown-usermenu.float-end,
body#app-layout ul.dropdown-menu.dropdown-usermenu.float-end,
body#app-layout .header-profile-actions ul.dropdown-menu.dropdown-usermenu {
  transform: none !important;
}

/* User menu — below profile avatar, right-aligned to trigger */
body#app-layout .page-title .header-profile-actions .header-profile-dropdown .dropdown-menu.dropdown-usermenu,
body#app-layout .page-title .header-profile-actions .header-profile-dropdown .dropdown-menu.dropdown-usermenu.show,
body#app-layout .page-title .header-profile-actions .header-profile-dropdown.show .dropdown-menu.dropdown-usermenu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: auto !important;
  right: 0 !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  min-width: 180px !important;
  width: max-content !important;
  max-width: min(260px, calc(100vw - 24px));
  float: none !important;
  z-index: 1100 !important;
}

/* Quick-add (+) menu — below + icon, stays inside viewport */
body#app-layout .page-title .header-profile-actions .global_plus .dropdown-menu,
body#app-layout .page-title .header-profile-actions .global_plus .dropdown-menu.show,
body#app-layout .page-title .header-profile-actions .heder-dropdown-menu.action_dropdown {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  min-width: 220px !important;
  width: max-content !important;
  max-width: min(320px, calc(100vw - 24px));
  z-index: 1100 !important;
  inset: auto 0 auto auto !important;
}

body#app-layout .dropdown-usermenu,
body#app-layout .heder-dropdown-menu {
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  box-shadow: var(--pm-shadow-md) !important;
  padding: 8px !important;
}

body#app-layout .dropdown-usermenu .dropdown-item,
body#app-layout .heder-dropdown-menu .dropdown-item {
  font-size: 13px;
  border-radius: var(--pm-r-sm);
  padding: 8px 12px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
body#app-layout button:not(.dropdown-item),
body#app-layout input[type='submit']:not(.dropdown-item),
body#app-layout input[type='button']:not(.dropdown-item),
body#app-layout input[type='reset']:not(.dropdown-item),
body#app-layout .btn:not(.dropdown-item) {
  font-family: var(--pm-font) !important;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--pm-r-md) !important;
  min-height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 150ms ease;
  line-height: 1.2;
}

body#app-layout .btn-sm {
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

body#app-layout .btn-primary,
body#app-layout .btn-success {
  background: var(--pm-navy) !important;
  border-color: var(--pm-navy) !important;
  color: var(--pm-text-inv) !important;
  border-radius: var(--pm-r-full) !important;
}

body#app-layout .btn-primary:hover,
body#app-layout .btn-primary:focus,
body#app-layout .btn-success:hover,
body#app-layout .btn-success:focus,
body#app-layout .btn-success:active,
body#app-layout .btn-primary:active {
  background: var(--pm-navy-hover) !important;
  border-color: var(--pm-navy-hover) !important;
  color: var(--pm-text-inv) !important;
}

/* Force brand navy on all primary action variants (links + buttons) */
body#app-layout a.btn-primary,
body#app-layout a.btn-success,
body#app-layout button.btn-primary,
body#app-layout button.btn-success,
body#app-layout input.btn-primary,
body#app-layout input.btn-success,
body#app-layout .btn.btn-primary,
body#app-layout .btn.btn-success {
  background: var(--pm-navy) !important;
  border-color: var(--pm-navy) !important;
  color: var(--pm-text-inv) !important;
}

body#app-layout a.btn-primary:hover,
body#app-layout a.btn-success:hover,
body#app-layout button.btn-primary:hover,
body#app-layout button.btn-success:hover,
body#app-layout input.btn-primary:hover,
body#app-layout input.btn-success:hover,
body#app-layout .btn.btn-primary:hover,
body#app-layout .btn.btn-success:hover {
  background: var(--pm-navy-hover) !important;
  border-color: var(--pm-navy-hover) !important;
  color: var(--pm-text-inv) !important;
}

body#app-layout .btn-secondary,
body#app-layout .btn-default,
body#app-layout .btn-default1,
body#app-layout .btn-outline-secondary {
  background: transparent !important;
  color: var(--pm-text-2) !important;
  border: 1px solid var(--pm-border-strong) !important;
}

body#app-layout .btn-secondary:hover,
body#app-layout .btn-default:hover,
body#app-layout .btn-outline-secondary:hover {
  background: var(--pm-active-nav) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--pm-text-1) !important;
}

body#app-layout .btn-danger,
body#app-layout .btn-outline-danger {
  background: var(--pm-red-bg) !important;
  color: var(--pm-red) !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
  border-radius: var(--pm-r-full) !important;
}

body#app-layout .btn-danger:hover,
body#app-layout .btn-outline-danger:hover {
  background: var(--pm-red) !important;
  color: #FFFFFF !important;
  border-color: var(--pm-red) !important;
}

body#app-layout .btn-outline-primary {
  background: transparent !important;
  color: var(--pm-navy) !important;
  border: 1.5px solid var(--pm-border-strong) !important;
}

body#app-layout .btn-outline-primary:hover {
  background: var(--pm-navy-tint) !important;
  border-color: var(--pm-navy) !important;
}

body#app-layout .select_all,
body#app-layout button.btn.select_all {
  width: auto !important;
  max-width: max-content !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
}

body#app-layout .x_panel.table_up_div button.btn.select_all#select-all-btn,
body#app-layout .dataTables_wrapper .pm-dt-bulk-bar button.btn.select_all#select-all-btn {
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-text-1) !important;
}

body#app-layout .x_panel.table_up_div #delete-selected-btn.btn-danger,
body#app-layout .dataTables_wrapper .pm-dt-bulk-bar #delete-selected-btn.btn-danger,
body#app-layout .pm-dt-bulk-bar #delete-selected-btn.btn-danger {
  background: var(--bg-elevated-2) !important;
  border: 1px solid rgba(220, 38, 38, 0.28) !important;
  color: var(--pm-red) !important;
  width: auto !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
}

/* Form submit buttons — compact, not full-width; same brand color as primary */
body#app-layout form input[type='submit'],
body#app-layout form button[type='submit'].btn-success,
body#app-layout form button[type='submit'].btn-primary,
body#app-layout .gatepassAddForm input[type='submit'] {
  width: auto !important;
  min-width: 120px;
  max-width: 100%;
  min-height: 44px !important;
  padding: 0 24px !important;
  background: var(--pm-navy) !important;
  border-color: var(--pm-navy) !important;
  color: var(--pm-text-inv) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--pm-r-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
}

/* customer-submit-actions / pm-form-actions styled in pm-forms.css */

body#app-layout form input[type='submit']:hover,
body#app-layout form button[type='submit'].btn-primary:hover,
body#app-layout form button[type='submit'].btn-success:hover {
  background: var(--pm-navy-hover) !important;
  border-color: var(--pm-navy-hover) !important;
}

/* ==========================================================================
   Form fields
   ========================================================================== */
body#app-layout input[type='text']:not([type='checkbox']):not([type='radio']),
body#app-layout input[type='email'],
body#app-layout input[type='password'],
body#app-layout input[type='number'],
body#app-layout input[type='date'],
body#app-layout input[type='tel'],
body#app-layout input[type='search'],
body#app-layout input[type='url'],
body#app-layout select,
body#app-layout textarea,
body#app-layout .form-control {
  font-family: var(--pm-font) !important;
  font-size: 13px !important;
  color: var(--pm-text-1) !important;
  background: var(--pm-surface) !important;
  border: 1.5px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  min-height: 44px;
  padding: 0 14px;
  transition: border-color 200ms, box-shadow 200ms;
}

body#app-layout textarea,
body#app-layout textarea.form-control {
  min-height: 90px;
  padding: 12px 14px;
  height: auto;
}

body#app-layout input:focus,
body#app-layout select:focus,
body#app-layout textarea:focus,
body#app-layout .form-control:focus {
  border-color: var(--pm-input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--pm-input-focus-ring) !important;
  outline: none !important;
}

body#app-layout input::placeholder,
body#app-layout textarea::placeholder {
  color: var(--pm-text-3);
}

body#app-layout select,
body#app-layout select.form-control,
body#app-layout select.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
  appearance: none;
}

body#app-layout label,
body#app-layout .control-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--pm-text-1);
}

body#app-layout .form-group {
  margin-bottom: 24px;
}

/* Form panel padding owned by pm-forms.css */

/* Quotation modify / jobcard-style process forms */
body#app-layout .quotation-modify-panel .quotation-modify-form-wrap {
  padding: 28px 32px 32px !important;
}

body#app-layout .quotation-modify-panel .quotation-observation-toolbar {
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  background: var(--pm-bg) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  overflow: visible !important;
  position: relative;
  z-index: 5;
}

body#app-layout .quotation-modify-panel .panel-body.main_data {
  overflow: visible !important;
}

body#app-layout .quotation-modify-panel .quotation-observation-table-wrap,
body#app-layout .quotation-modify-panel .panel-body.main_data.table-responsive {
  padding: 0 16px 16px !important;
  overflow-x: auto !important;
  max-width: 100% !important;
}

body#app-layout .quotation-modify-panel .quotation-service-charges-section {
  padding: 16px 20px 10px !important;
  margin-top: 16px !important;
  background: var(--pm-bg) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
}

body#app-layout .quotation-modify-panel #observation_header_table th:last-child,
body#app-layout .quotation-modify-panel #observation_header_table td:last-child,
body#app-layout .quotation-modify-panel #service_charge_table th:last-child,
body#app-layout .quotation-modify-panel #service_charge_table td:last-child {
  min-width: 52px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

body#app-layout .quotation-modify-panel #observation_header_table,
body#app-layout .quotation-modify-panel #service_charge_table {
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

body#app-layout .quotation-modify-panel #observation_header_table thead th,
body#app-layout .quotation-modify-panel #observation_header_table tbody td,
body#app-layout .quotation-modify-panel #service_charge_table thead th,
body#app-layout .quotation-modify-panel #service_charge_table tbody td {
  border: 1px solid var(--pm-border) !important;
  box-shadow: none !important;
  position: static !important;
  top: auto !important;
}

body#app-layout .quotation-modify-panel .delete-sc-row,
body#app-layout .quotation-modify-panel .delete-obs-header {
  color: var(--pm-red) !important;
  font-size: 18px !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  line-height: 1;
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
  font-weight: 900 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

body#app-layout .quotation-modify-panel .delete-sc-row:hover,
body#app-layout .quotation-modify-panel .delete-obs-header:hover {
  color: #b91c1c !important;
}

body#app-layout .quotation-modify-panel .panel-body.main_data.table-responsive {
  padding: 12px 16px 16px !important;
  overflow-x: auto !important;
  max-width: 100% !important;
}

body#app-layout .quotation-modify-panel,
body#app-layout .quotation-modify-panel .quotation-modify-form-wrap {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body#app-layout form.addJobcardForm > .row,
body#app-layout form.addJobcardForm .row.row-mb-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 18px !important;
}

body#app-layout form.addJobcardForm .jobcard_heading {
  margin-left: 0 !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

body#app-layout form.addJobcardForm .form-group.text-right {
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--pm-border);
}

body#app-layout .x_content form .row {
  row-gap: 10px;
}

body#app-layout .x_content form .form-group:last-child {
  margin-bottom: 10px;
}

/* ==========================================================================
   Unified filter bar (pm-filter-bar component)
   ========================================================================== */
body#app-layout .pm-filter-bar-wrap {
  margin-bottom: 20px;
}

body#app-layout .pm-filter-bar {
  display: block !important;
  padding: 16px 20px !important;
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: var(--pm-shadow-sm) !important;
  margin-bottom: 0 !important;
  width: auto;
  max-width: 100%;
}

body#app-layout form.pm-filter-bar.upperform,
body#app-layout form.pm-filter-bar.form-horizontal {
  padding: 16px 20px !important;
}

body#app-layout .pm-filter-bar__controls {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 16px 20px !important;
  width: auto !important;
  max-width: 100% !important;
}

body#app-layout .pm-filter-bar__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 0 0 200px !important;
  width: 200px !important;
  min-width: 180px !important;
  max-width: 220px !important;
}

body#app-layout .pm-filter-bar__field--wide {
  flex: 0 0 220px !important;
  width: 220px !important;
  min-width: 200px !important;
  max-width: 280px !important;
}

body#app-layout .pm-filter-bar__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-text-2);
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
}

body#app-layout .pm-filter-bar__controls .form-control,
body#app-layout .pm-filter-bar__controls .form-select,
body#app-layout .pm-filter-bar__controls select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  background: var(--pm-surface) !important;
  color: var(--pm-text-1) !important;
  font-size: 14px !important;
  line-height: 1.4;
  box-shadow: none !important;
}

body#app-layout .pm-filter-bar__controls input[type="date"].form-control {
  padding-right: 10px !important;
}

body#app-layout .pm-filter-bar__field .input-group {
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
}

body#app-layout .pm-filter-bar__field .input-group .form-control {
  width: 1% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body#app-layout .pm-filter-bar__controls .select2-container {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body#app-layout .pm-filter-bar__controls .select2-container--default .select2-selection--single {
  min-height: 38px !important;
  height: 38px !important;
}

body#app-layout .pm-filter-bar__controls .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
}

body#app-layout .pm-filter-bar__controls .help-block,
body#app-layout .pm-filter-bar__controls .error-help-block {
  font-size: 12px;
  margin: 4px 0 0;
}

body#app-layout .pm-filter-bar__actions {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  align-self: flex-end !important;
}

body#app-layout .pm-filter-bar__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 20px !important;
  border-radius: var(--pm-r-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  box-shadow: none !important;
}

body#app-layout .pm-filter-bar__btn--primary,
body#app-layout .pm-filter-bar__btn.pm-filter-bar__btn--primary {
  background: var(--pm-orange) !important;
  border: 1px solid var(--pm-orange) !important;
  color: var(--pm-text-inv) !important;
  border-radius: var(--pm-r-full) !important;
}

body#app-layout .pm-filter-bar__btn--primary:hover,
body#app-layout .pm-filter-bar__btn--primary:focus,
body#app-layout .pm-filter-bar__btn.pm-filter-bar__btn--primary:hover,
body#app-layout .pm-filter-bar__btn.pm-filter-bar__btn--primary:focus {
  background: var(--pm-orange-hover) !important;
  border-color: var(--pm-orange-hover) !important;
  color: var(--pm-text-inv) !important;
}

body#app-layout .pm-filter-bar__btn--reset,
body#app-layout .pm-filter-bar__btn.pm-filter-bar__btn--reset {
  background: var(--pm-surface) !important;
  border: 1.5px solid var(--pm-border-strong) !important;
  color: var(--pm-navy) !important;
}

body#app-layout .pm-filter-bar__btn--reset:hover,
body#app-layout .pm-filter-bar__btn--reset:focus,
body#app-layout .pm-filter-bar__btn.pm-filter-bar__btn--reset:hover,
body#app-layout .pm-filter-bar__btn.pm-filter-bar__btn--reset:focus {
  background: var(--pm-navy-tint) !important;
  border-color: var(--pm-navy) !important;
  color: var(--pm-navy) !important;
}

body#app-layout .pm-filter-bar__btn--secondary {
  background: transparent !important;
  border: 1.5px solid var(--pm-border-strong) !important;
  color: var(--pm-navy) !important;
}

body#app-layout .pm-filter-bar__btn--secondary:hover,
body#app-layout .pm-filter-bar__btn--secondary:focus {
  background: var(--pm-navy-tint) !important;
  border-color: var(--pm-navy) !important;
  color: var(--pm-navy) !important;
}

body#app-layout .pm-filter-active-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--pm-filter-banner-bg);
  border: 1px solid var(--pm-filter-banner-border);
  border-radius: var(--pm-r-md);
  color: var(--pm-filter-banner-text);
  font-size: 13px;
}

body#app-layout .pm-filter-bar__footer {
  margin-top: 12px;
  width: 100%;
}

/* Generic compact filter rows (sales dashboard, legacy markup) */
body#app-layout .filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 16px 20px !important;
}

body#app-layout .filter-row .filter-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 0 0 200px !important;
  width: 200px !important;
  min-width: 180px !important;
  max-width: 220px !important;
}

body#app-layout .filter-row .filter-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pm-text-2);
  margin: 0;
}

body#app-layout .filter-row .form-control,
body#app-layout .filter-row select {
  width: 100% !important;
  min-height: 38px !important;
  height: 38px !important;
}

body#app-layout .filter-row .btn,
body#app-layout .filter-row .pm-filter-bar__btn {
  min-height: 38px !important;
  height: 38px !important;
  align-self: flex-end !important;
  flex: 0 0 auto !important;
}

@media (max-width: 991.98px) {
  body#app-layout .pm-filter-bar__controls {
    gap: 14px 16px !important;
  }

  body#app-layout .pm-filter-bar__field,
  body#app-layout .filter-row .filter-field {
    flex: 0 1 calc(50% - 16px) !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: none !important;
  }

  body#app-layout .pm-filter-bar__field--wide {
    flex: 1 1 100% !important;
    width: auto !important;
    max-width: none !important;
  }

  body#app-layout .pm-filter-bar__actions {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 767px) {
  body#app-layout .pm-filter-bar {
    padding: 14px 16px !important;
  }

  body#app-layout .pm-filter-bar__field,
  body#app-layout .pm-filter-bar__field--wide,
  body#app-layout .filter-row .filter-field {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body#app-layout .pm-filter-bar__actions {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
}

/* Select2 */
body#app-layout .select2-container--default .select2-selection--single {
  height: 44px !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  display: flex !important;
  align-items: center !important;
}

body#app-layout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.25 !important;
  color: var(--pm-text-1) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 14px !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* ==========================================================================
   Panels & cards
   ========================================================================== */
body#app-layout .x_panel {
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: var(--pm-shadow-sm) !important;
  padding: 0 !important;
  margin-bottom: 20px;
  overflow: visible;
}

body#app-layout .x_title {
  border-bottom: 1px solid var(--pm-border) !important;
  padding: 16px 24px !important;
  margin-bottom: 0 !important;
}

body#app-layout .x_title h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pm-text-1) !important;
}

body#app-layout .x_content {
  padding: 24px !important;
  margin-bottom: 0 !important;
}

body#app-layout .panel,
body#app-layout .card {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-lg);
  box-shadow: var(--pm-shadow-sm);
}

body#app-layout .panel.info-box,
body#app-layout .info-box.panel-white {
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: var(--pm-shadow-sm) !important;
  transition: box-shadow 200ms, transform 200ms;
  overflow: hidden;
}

body#app-layout .info-box:hover {
  box-shadow: var(--pm-shadow-md) !important;
  transform: translateY(-1px);
}

body#app-layout .info-box .panel-body {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 24px !important;
}

body#app-layout .dashboard-stat-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  line-height: 48px !important;
  border-radius: var(--pm-r-md) !important;
  background: var(--pm-navy-tint) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body#app-layout .dashboard-stat-icon i {
  color: var(--pm-navy) !important;
  font-size: 20px !important;
}

body#app-layout .info-box-stats .counter,
body#app-layout .info-box-stats p.counter {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--pm-navy) !important;
  letter-spacing: -0.03em;
  line-height: 1 !important;
  margin: 0 !important;
}

body#app-layout .info-box-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--pm-text-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

body#app-layout .workflow-progress {
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-lg) !important;
}

/* ==========================================================================
   Dashboard (#dashboard) — layout & panels (CSS only)
   Wrapper: #dashboard.right_col | Panels: .dashboard_x_panel | Stats: .info-box
   ========================================================================== */

body#app-layout #dashboard {
  padding: 0 32px 48px !important;
}

body#app-layout #dashboard .page-title {
  margin-top: 0 !important;
}

/* The .x_panel.mb-0 wrapper is a layout container, not a card — neutralise it */
body#app-layout #dashboard .x_panel.mb-0 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   ADMIN dashboard layout — one 12-column grid drives the page.
   Scoped via :has(.boxes) so the Customer/Employee view (which
   has no .boxes) keeps its native Bootstrap column layout.
   ============================================================ */
@media (min-width: 992px) {
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    grid-auto-rows: minmax(0, auto);
    gap: 16px !important;
    align-items: stretch;
  }

  /* Flatten every layout wrapper so leaf panels/cards become grid items.
     Child combinators keep .x_title.row headers (deep inside panels) safe. */
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) > .row,
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) > .row > [class*='col-']:not(.d-none),
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) .boxes,
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) .boxes > .row,
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) .boxes > .row > [class*='col-'] {
    display: contents !important;
  }

  /* Keep the hidden Free Service column hidden (flatten must not reveal it) */
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) > .row > .d-none {
    display: none !important;
  }

  /* Rows 1 & 2 — six stat cards (3 across, two rows) */
  body#app-layout #dashboard .boxes a[href$='/employee/list'] { grid-column: 1 / span 3; grid-row: 1; }
  body#app-layout #dashboard .boxes a[href$='/customer/list'] { grid-column: 4 / span 3; grid-row: 1; }
  body#app-layout #dashboard .boxes a[href$='/supplier/list'] { grid-column: 7 / span 3; grid-row: 1; }
  body#app-layout #dashboard .boxes a[href$='/product/list']  { grid-column: 1 / span 3; grid-row: 2; }
  body#app-layout #dashboard .boxes a[href$='/vehicle/list']  { grid-column: 4 / span 3; grid-row: 2; }
  body#app-layout #dashboard .boxes a[href$='/service/list']  { grid-column: 7 / span 3; grid-row: 2; }

  /* Job Receipts KPI — right column, spanning both stat rows */
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) .dashboard_x_panel:has(.service-chart) {
    grid-column: 10 / span 3;
    grid-row: 1 / span 2;
  }

  /* Row 3 — Recently Joined | Upcoming Services | Calendar */
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) .dashboard_x_panel.recently-joined {
    grid-column: 1 / span 4;
    grid-row: 3;
  }
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) {
    grid-column: 5 / span 4;
    grid-row: 3;
  }
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) .dashboard_x_panel:has(#calendar) {
    grid-column: 9 / span 4;
    grid-row: 3;
  }

  /* Row 4 — Sales Report | Pickup & Delivery | Employees & Tasks */
  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) .dashboard-analytics-sales {
    grid-column: 1 / span 4;
    grid-row: 4;
    min-width: 0;
    align-self: start;
  }

  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) .dashboard-analytics-pickup {
    grid-column: 5 / span 4;
    grid-row: 4;
    min-width: 0;
    align-self: start;
  }

  body#app-layout #dashboard .x_panel.mb-0:has(.boxes) .dashboard-analytics-employees {
    grid-column: 9 / span 4;
    grid-row: 4;
    min-width: 0;
    align-self: start;
  }

}

/* Recent Invoices, Recent Quotations, Paid Service Details — removed from dashboard */
body#app-layout #dashboard .dashboard-cards:has(a[href$='/invoice/list']),
body#app-layout #dashboard .dashboard-cards:has(a[href$='/quotation/list']),
body#app-layout #dashboard .dashboard-cards:has(input[name='paid']) {
  display: none !important;
}

body#app-layout #dashboard .col-md-6:has(> .dashboard-cards:has(a[href$='/invoice/list'])),
body#app-layout #dashboard .col-md-6:has(> .dashboard-cards:has(a[href$='/quotation/list'])),
body#app-layout #dashboard .col-md-6:has(> .dashboard-cards:has(input[name='paid'])) {
  display: none !important;
}

/* Holiday List — removed from dashboard */
body#app-layout #dashboard .dashboard-cards:has(h2.overflow-visible),
body#app-layout #dashboard .col-md-6:has(> .dashboard-cards:has(h2.overflow-visible)) {
  display: none !important;
}

body#app-layout #dashboard .boxes a {
  display: block;
  height: 100%;
  text-decoration: none;
}

body#app-layout #dashboard .panel.info-box.panel-white {
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: var(--pm-shadow-sm) !important;
  margin: 0 !important;
  height: 100%;
  overflow: hidden;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

body#app-layout #dashboard .panel.info-box.panel-white:hover {
  box-shadow: var(--pm-shadow-md) !important;
  transform: translateY(-1px);
}

body#app-layout #dashboard .panel.info-box .panel-body.member {
  height: auto !important;
  min-height: 0 !important;
  padding: 20px !important;
  background: var(--pm-surface) !important;
  box-shadow: none !important;
}

body#app-layout #dashboard .info-box .panel-body.member {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  text-align: left !important;
}

body#app-layout #dashboard .panel.info-box .dashboard_background {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

body#app-layout #dashboard .panel.info-box .dashboard-stat-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

body#app-layout #dashboard .panel.info-box .dashboard-stat-icon i {
  font-size: 28px !important;
  color: var(--pm-text-1) !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  transform: none !important;
}

body#app-layout #dashboard .info-box .info-box-stats {
  margin-top: 0 !important;
  width: auto !important;
  flex: 1;
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  text-align: left !important;
}

body#app-layout #dashboard .info-box-stats p.counter {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--pm-text-1) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

body#app-layout #dashboard .info-box-stats .info-box-title,
body#app-layout #dashboard .info-box-stats span.info-box-title {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #9CA3AF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
  margin: 0 !important;
  margin-left: 0 !important;
  line-height: 1.3 !important;
}

body#app-layout #dashboard .info-box:hover .panel-body img,
body#app-layout #dashboard .info-box:hover .dashboard-stat-icon i {
  transform: none !important;
}

/* —— Job Receipts KPI panel (donut chart killed, number-only) —— */
body#app-layout #dashboard .dashboard_x_panel:has(.service-chart) {
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: var(--pm-shadow-sm) !important;
  overflow: hidden;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
}

body#app-layout #dashboard .dashboard_x_panel:has(.service-chart) .x_title,
body#app-layout #dashboard .dashboard_x_panel:has(.service-chart) .x_title.row {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--pm-border) !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

body#app-layout #dashboard .service-content {
  padding: 0 !important;
  flex: 1 1 auto;
  display: flex !important;
}

/* Hide the donut canvas and its fixed-size wrapper div entirely */
body#app-layout #dashboard #chartJSContainer {
  display: none !important;
}

body#app-layout #dashboard .service-chart > div:first-child {
  display: none !important;
}

body#app-layout #dashboard .service-chart {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  width: 100% !important;
  padding: 32px 20px !important;
  margin: 0 !important;
}

body#app-layout #dashboard .servicecount {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

body#app-layout #dashboard .servicecount h3,
body#app-layout #dashboard .service-chart h3 {
  font-size: 48px !important;
  font-weight: 700 !important;
  color: var(--pm-text-1) !important;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 !important;
}

body#app-layout #dashboard .servicecount h6,
body#app-layout #dashboard .service-chart h6 {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #9CA3AF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 8px 0 0 !important;
}

body#app-layout #dashboard .dashboard-cards {
  padding: 0 !important;
  height: auto !important;
}

/* —— Dashboard analytics row (Sales / Pickup / Employees) —— */
body#app-layout #dashboard .dashboard-analytics-card {
  min-width: 0;
  width: 100%;
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--pm-surface) !important;
  box-shadow: 0 1px 3px rgba(27, 43, 94, 0.06), 0 8px 24px rgba(27, 43, 94, 0.05) !important;
}

body#app-layout #dashboard .dashboard-analytics-sales {
  border-top: 3px solid var(--pm-border-strong) !important;
}

body#app-layout #dashboard .dashboard-analytics-pickup {
  border-top: 3px solid #3B82F6 !important;
}

body#app-layout #dashboard .dashboard-analytics-employees {
  border-top: 3px solid #10B981 !important;
}

body#app-layout #dashboard .dashboard-analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--pm-border);
  background: var(--bg-elevated-2);
}

body#app-layout #dashboard .dashboard-analytics-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body#app-layout #dashboard .dashboard-analytics-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

body#app-layout #dashboard .dashboard-analytics-icon.sales {
  background: rgba(27, 43, 94, 0.1);
  color: var(--pm-text-1);
}

body#app-layout #dashboard .dashboard-analytics-icon.pickup {
  background: rgba(59, 130, 246, 0.12);
  color: #2563EB;
}

body#app-layout #dashboard .dashboard-analytics-icon.employees {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

body#app-layout #dashboard .dashboard-analytics-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--pm-text-1);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#app-layout #dashboard .dashboard-analytics-link {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  background: #F3F4F6;
  text-decoration: none;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

body#app-layout #dashboard .dashboard-analytics-link:hover {
  color: var(--pm-text-1);
  background: var(--bg-elevated-2);
}

body#app-layout #dashboard .dashboard-analytics-body {
  padding: 14px 16px 16px;
}

body#app-layout #dashboard .dashboard-analytics-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

body#app-layout #dashboard .dashboard-period-toggle {
  display: inline-flex;
  background: #F3F4F6;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

body#app-layout #dashboard .dashboard-period-btn {
  border: none;
  background: transparent;
  color: var(--pm-text-2);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

body#app-layout #dashboard .dashboard-period-btn.active {
  background: var(--pm-surface) !important;
  color: var(--pm-text-1) !important;
  box-shadow: var(--pm-shadow-sm);
}

body#app-layout #dashboard .dashboard-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 8px;
  background: #F8FAFC;
  border: 1px solid #EEF2F7;
}

body#app-layout #dashboard .dashboard-metric-row:last-child {
  margin-bottom: 0;
}

body#app-layout #dashboard .dashboard-metric-row.total {
  border-left: 3px solid var(--pm-border-strong);
}

body#app-layout #dashboard .dashboard-metric-row.paid {
  border-left: 3px solid #10B981;
}

body#app-layout #dashboard .dashboard-metric-row.remaining {
  border-left: 3px solid #EF4444;
}

body#app-layout #dashboard .dashboard-metric-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

body#app-layout #dashboard .dashboard-metric-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--pm-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body#app-layout #dashboard .dashboard-metric-amount {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 18px;
  font-weight: 700;
  color: var(--pm-text-1);
  line-height: 1.2;
}

body#app-layout #dashboard .dashboard-metric-amount.is-success {
  color: #059669;
}

body#app-layout #dashboard .dashboard-metric-amount.is-danger {
  color: #DC2626;
}

body#app-layout #dashboard .dashboard-metric-currency {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  opacity: 0.75;
  flex-shrink: 0;
}

body#app-layout #dashboard .dashboard-metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--pm-surface);
  color: #9CA3AF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body#app-layout #dashboard .dashboard-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

body#app-layout #dashboard .dashboard-status-tile {
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid transparent;
}

body#app-layout #dashboard .dashboard-status-tile .tile-count {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

body#app-layout #dashboard .dashboard-status-tile .tile-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

body#app-layout #dashboard .dashboard-status-tile.assigned {
  background: #F3F4F6;
  color: #4B5563;
}

body#app-layout #dashboard .dashboard-status-tile.ongoing {
  background: #FEF3C7;
  color: #B45309;
}

body#app-layout #dashboard .dashboard-status-tile.completed {
  background: #D1FAE5;
  color: #047857;
}

body#app-layout #dashboard .dashboard-status-tile.cancelled {
  background: #FEE2E2;
  color: #B91C1C;
}

body#app-layout #dashboard .dashboard-feed-list,
body#app-layout #dashboard .dashboard-employee-list {
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

body#app-layout #dashboard .dashboard-feed-list::-webkit-scrollbar,
body#app-layout #dashboard .dashboard-employee-list::-webkit-scrollbar {
  width: 4px;
}

body#app-layout #dashboard .dashboard-feed-list::-webkit-scrollbar-thumb,
body#app-layout #dashboard .dashboard-employee-list::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 4px;
}

body#app-layout #dashboard .dashboard-feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: #F8FAFC;
  border: 1px solid #EEF2F7;
}

body#app-layout #dashboard .dashboard-feed-item:last-child {
  margin-bottom: 0;
}

body#app-layout #dashboard .dashboard-feed-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  background: rgba(59, 130, 246, 0.12);
  color: #2563EB;
}

body#app-layout #dashboard .dashboard-feed-badge.delivery {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

body#app-layout #dashboard .dashboard-feed-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body#app-layout #dashboard .dashboard-feed-title {
  font-size: 12px;
  font-weight: 600;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#app-layout #dashboard .dashboard-feed-sub {
  font-size: 11px;
  color: #9CA3AF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#app-layout #dashboard .dashboard-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: capitalize;
}

body#app-layout #dashboard .dashboard-badge.assigned {
  background: #E5E7EB;
  color: #4B5563;
}

body#app-layout #dashboard .dashboard-badge.progress {
  background: #FEF3C7;
  color: #B45309;
}

body#app-layout #dashboard .dashboard-badge.waiting {
  background: #EDE9FE;
  color: #6D28D9;
}

body#app-layout #dashboard .dashboard-feed-empty {
  text-align: center;
  color: #9CA3AF;
  font-size: 12px;
  padding: 20px 10px;
}

body#app-layout #dashboard .dashboard-employee-card {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #F0F2F7;
}

body#app-layout #dashboard .dashboard-employee-card:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

body#app-layout #dashboard .dashboard-employee-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

body#app-layout #dashboard .dashboard-employee-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pm-border);
  flex-shrink: 0;
}

body#app-layout #dashboard .dashboard-employee-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body#app-layout #dashboard .dashboard-employee-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--pm-text-1);
}

body#app-layout #dashboard .dashboard-employee-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

body#app-layout #dashboard .dashboard-mini-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #EEF2FF;
  color: #4338CA;
}

body#app-layout #dashboard .dashboard-mini-badge.pickup {
  background: #ECFDF5;
  color: #047857;
}

body#app-layout #dashboard .dashboard-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body#app-layout #dashboard .dashboard-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid #F3F4F6;
}

body#app-layout #dashboard .dashboard-task-row:first-child {
  border-top: none;
  padding-top: 0;
}

body#app-layout #dashboard .dashboard-task-type {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

body#app-layout #dashboard .dashboard-task-type.job {
  background: #EEF2FF;
  color: #4338CA;
}

body#app-layout #dashboard .dashboard-task-type.pickup {
  background: #ECFDF5;
  color: #047857;
}

body#app-layout #dashboard .dashboard-task-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  color: var(--pm-text-1);
}

body#app-layout #dashboard .dashboard-task-text a {
  font-weight: 600;
  color: var(--pm-text-1);
  text-decoration: none;
}

body#app-layout #dashboard .dashboard-task-text a:hover {
  text-decoration: underline;
}

body#app-layout #dashboard .dashboard-task-text small {
  font-size: 11px;
  color: #9CA3AF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#app-layout #dashboard .recently-joined {
  height: auto !important;
  max-height: none !important;
}

body#app-layout #dashboard .service-content {
  padding-bottom: 0 !important;
}

/* —— All dashboard panels —— */
body#app-layout #dashboard .dashboard_x_panel {
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: var(--pm-shadow-sm) !important;
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

body#app-layout #dashboard .dashboard_x_panel .x_title,
body#app-layout #dashboard .dashboard_x_panel .x_title.row {
  margin: 0 !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--pm-border) !important;
  background: var(--pm-surface) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 8px;
}

body#app-layout #dashboard .dashboard_x_panel .x_title h2,
body#app-layout #dashboard .dashboard_x_panel .x_title .h5,
body#app-layout #dashboard .dashboard_x_panel .x_title p.h5,
body#app-layout #dashboard .dashboard_x_panel .x_title p.fw-500,
body#app-layout #dashboard .dashboard_x_panel .x_title .overflow-visible.h5,
body#app-layout #dashboard .dashboard_x_panel .x_title .fw-500 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pm-text-1) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}

body#app-layout #dashboard .dashboard_x_panel .x_content {
  padding: 0 !important;
  margin: 0 !important;
}

body#app-layout #dashboard .share-icon,
body#app-layout #dashboard .dashboard_x_panel .x_title img[src*='view.png'],
body#app-layout #dashboard .x_panel .btn.btn-default1 img {
  width: 14px !important;
  height: 14px !important;
}

body#app-layout #dashboard .x_panel .btn.btn-default1,
body#app-layout #dashboard .btn-default1 {
  background: transparent !important;
  border: none !important;
  padding: 2px !important;
  box-shadow: none !important;
  opacity: 0.45;
  line-height: 1;
  transition: opacity 150ms ease;
}

body#app-layout #dashboard .x_panel .btn.btn-default1:hover,
body#app-layout #dashboard .dashboard_x_panel .x_title a:hover,
body#app-layout #dashboard .dashboard_x_panel .x_title a:hover img {
  opacity: 1;
}

body#app-layout #dashboard .card-body {
  padding: 0 !important;
}

/* —— Recently joined customers —— */
body#app-layout #dashboard .recently-joined .top_profiles,
body#app-layout #dashboard .dashboard-cards .top_profiles {
  max-height: 320px;
  overflow-y: auto;
  padding: 0 !important;
  margin: 0 !important;
}

body#app-layout #dashboard .recently-joined .x_content,
body#app-layout #dashboard .top_profiles .x_content {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--pm-border);
}

body#app-layout #dashboard .recently-joined .x_content:last-child,
body#app-layout #dashboard .top_profiles > .x_content:last-child {
  border-bottom: none;
}

body#app-layout #dashboard .recently-joined .x_content:hover,
body#app-layout #dashboard .top_profiles .x_content:hover {
  background: var(--pm-navy-tint);
}

body#app-layout #dashboard .userpic img,
body#app-layout #dashboard .recently-joined img.rounded {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  margin-right: 0 !important;
  border-radius: var(--pm-r-full) !important;
  object-fit: cover;
}

body#app-layout #dashboard .recently-joined .title,
body#app-layout #dashboard .recently-joined .title strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pm-text-1) !important;
  text-decoration: none;
}

body#app-layout #dashboard .recently-joined p {
  font-size: 12px !important;
  color: var(--pm-text-3) !important;
  margin: 2px 0 0 !important;
}

/* —— Mini calendar (FullCalendar) — compact date-picker style —— */
body#app-layout #dashboard #calendar {
  font-size: 12px !important;
  padding: 0 0 12px;
}

body#app-layout #dashboard .fc .fc-header-toolbar,
body#app-layout #dashboard .fc-header-toolbar {
  padding: 12px 16px !important;
  margin: 0 !important;
  gap: 6px;
  flex-wrap: wrap;
}

body#app-layout #dashboard .fc .fc-toolbar-title,
body#app-layout #dashboard .fc-toolbar-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pm-text-1) !important;
  text-transform: none !important;
}

body#app-layout #dashboard .fc .fc-button,
body#app-layout #dashboard .fc .fc-button-primary,
body#app-layout #dashboard .fc-button {
  background: transparent !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-text-1) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 8px !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
  text-transform: capitalize !important;
}

body#app-layout #dashboard .fc .fc-button:hover,
body#app-layout #dashboard .fc-button:hover {
  background: var(--pm-active-nav) !important;
}

body#app-layout #dashboard .fc .fc-button-active,
body#app-layout #dashboard .fc-button-group .fc-button-active,
body#app-layout #dashboard .fc-button:not(:disabled).fc-button-active {
  background: var(--pm-orange) !important;
  color: var(--pm-text-inv) !important;
  border-color: var(--pm-orange) !important;
}

body#app-layout #dashboard .fc .fc-button-group {
  border-radius: 6px;
  overflow: hidden;
}

body#app-layout #dashboard .fc-scrollgrid {
  border: none !important;
}

body#app-layout #dashboard .fc-scrollgrid td,
body#app-layout #dashboard .fc-scrollgrid th {
  border-color: #F0F0F0 !important;
}

body#app-layout #dashboard .fc-col-header-cell,
body#app-layout #dashboard .fc .fc-col-header-cell {
  background: var(--bg-elevated-2) !important;
}

body#app-layout #dashboard .fc .fc-col-header-cell-cushion,
body#app-layout #dashboard .fc-col-header-cell-cushion {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #9CA3AF !important;
  text-transform: uppercase !important;
  padding: 6px 0 !important;
}

body#app-layout #dashboard .fc .fc-daygrid-day,
body#app-layout #dashboard .fc-daygrid-day {
  min-height: 36px !important;
  max-height: 36px !important;
  height: 36px !important;
  overflow: hidden !important;
}

body#app-layout #dashboard .fc-daygrid-day:hover {
  overflow: visible !important;
  background: #f6f8fc !important;
}

body#app-layout #dashboard .fc .fc-daygrid-day-frame,
body#app-layout #dashboard .fc-daygrid-day-frame {
  min-height: 36px !important;
  padding: 4px !important;
}

body#app-layout #dashboard .fc .fc-daygrid-day-number,
body#app-layout #dashboard .fc-daygrid-day-number {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--pm-text-2) !important;
  padding: 0 !important;
  line-height: 1;
}

body#app-layout #dashboard td.fc-daygrid-day.fc-day-today,
body#app-layout #dashboard .fc .fc-day-today {
  background: var(--pm-active-nav) !important;
}

body#app-layout #dashboard .fc .fc-day-today .fc-daygrid-day-number,
body#app-layout #dashboard .fc-day-today .fc-daygrid-day-number {
  color: #ffffff !important;
  font-weight: 700 !important;
  background: var(--pm-orange);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 auto;
}

body#app-layout #dashboard .fc-event,
body#app-layout #dashboard .fc-daygrid-event {
  background: var(--bg-base) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 3px !important;
  padding: 1px 4px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

body#app-layout #dashboard .fc-event-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body#app-layout #dashboard .service-indic {
  width: 8px !important;
  height: 8px !important;
  border-radius: var(--pm-r-full) !important;
  margin-right: 6px !important;
}

body#app-layout #dashboard .service-indic.service-open-indic {
  background: var(--pm-orange) !important;
}

body#app-layout #dashboard .service-indic.service-complete-indic {
  background: var(--pm-green) !important;
}

body#app-layout #dashboard .dashboard_x_panel .x_title .text-end {
  font-size: 12px !important;
  color: var(--pm-text-2) !important;
}

/* —— Invoice / quotation / service list rows —— */
body#app-layout #dashboard article.media.event {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body#app-layout #dashboard .dashboard-cards .x_content {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--pm-border);
}

body#app-layout #dashboard .dashboard-cards .x_content > article.media.event {
  flex: 1;
  min-width: 0;
}

body#app-layout #dashboard .dashboard-cards .x_content > a:not(.date) {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

body#app-layout #dashboard .dashboard-cards .top_profiles .x_content:last-child,
body#app-layout #dashboard .dashboard-cards > .x_content:last-child {
  border-bottom: none;
}

body#app-layout #dashboard .dashboard-cards .x_content:hover {
  background: var(--pm-navy-tint);
}

body#app-layout #dashboard .media.event > a.date,
body#app-layout #dashboard a.date.float-start,
body#app-layout #dashboard a.date[class*='date-color'] {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
  background: var(--bg-base) !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  flex-shrink: 0;
  text-decoration: none !important;
  padding: 4px !important;
}

body#app-layout #dashboard .media .date .month {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  opacity: 0.65;
  margin: 0 !important;
  line-height: 1 !important;
}

body#app-layout #dashboard .media .date .day {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

body#app-layout #dashboard .media-body {
  flex: 1;
  min-width: 0;
  padding: 12px 20px 12px 0 !important;
}

body#app-layout #dashboard .media.event .media-body {
  padding: 12px 20px !important;
}

body#app-layout #dashboard .jobdetails {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pm-text-1) !important;
  display: block;
}

body#app-layout #dashboard .jobdetails i {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--pm-text-3) !important;
  font-style: normal;
}

body#app-layout #dashboard .media-body .text-muted {
  font-size: 12px !important;
  color: var(--pm-text-3) !important;
}

body#app-layout #dashboard .media-body .text-warning,
body#app-layout #dashboard .media-body span.text-warning {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--pm-yellow-bg) !important;
  color: var(--pm-yellow) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: var(--pm-r-full) !important;
  text-decoration: none !important;
  margin-top: 4px;
}

body#app-layout #dashboard .media-body .text-success {
  background: var(--pm-green-bg) !important;
  color: var(--pm-green) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: var(--pm-r-full) !important;
  display: inline-flex !important;
  text-decoration: none !important;
}

body#app-layout #dashboard .media-body .text-danger {
  background: var(--pm-red-bg) !important;
  color: var(--pm-red) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: var(--pm-r-full) !important;
  display: inline-flex !important;
  text-decoration: none !important;
}

body#app-layout #dashboard .media-body img.rounded-circle {
  width: 28px !important;
  height: 28px !important;
  margin-right: 6px !important;
  vertical-align: middle;
}

/* —— Recent Job Receipts panel —— */
body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .x_title.row {
  border-left: 3px solid var(--pm-orange) !important;
  padding-left: 17px !important;
  background: linear-gradient(90deg, var(--pm-orange-tint) 0%, var(--pm-surface) 48%) !important;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .top_profiles {
  flex: 1 1 auto;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px 10px !important;
  margin: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--pm-border-strong) transparent;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .top_profiles::-webkit-scrollbar {
  width: 5px;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .top_profiles::-webkit-scrollbar-thumb {
  background: var(--pm-border-strong);
  border-radius: var(--pm-r-full);
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .x_content {
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: var(--pm-r-md) !important;
  background: var(--pm-bg) !important;
  transition: background 150ms ease, box-shadow 150ms ease;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .x_content:last-child {
  margin-bottom: 0 !important;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .x_content:hover {
  background: var(--pm-navy-tint) !important;
  box-shadow: var(--pm-shadow-sm);
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) article.media.event {
  gap: 14px !important;
  padding: 12px 14px !important;
  align-items: center !important;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .media.event > a.date,
body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) a.date[class*='date-color'] {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  background: linear-gradient(145deg, var(--pm-navy) 0%, var(--pm-navy-hover) 100%) !important;
  box-shadow: 0 2px 6px rgba(27, 43, 94, 0.2);
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .x_content > a:not(.date) {
  display: flex !important;
  flex: 1 !important;
  min-width: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .media-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 !important;
  min-width: 0;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .jobdetails {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--pm-navy) !important;
  letter-spacing: -0.02em;
  line-height: 1.3 !important;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .jobdetails i {
  display: inline-block !important;
  margin: 4px 0 0 !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  color: var(--pm-text-2) !important;
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-full) !important;
  letter-spacing: 0;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .media-body > span:not(.jobdetails) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--pm-text-2) !important;
  line-height: 1.3;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .media-body img.rounded-circle {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
  border: 2px solid var(--pm-surface) !important;
  box-shadow: 0 0 0 1px var(--pm-border);
  object-fit: cover;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .media-body a.text-primary {
  margin-left: auto !important;
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity 150ms ease;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .media-body a.text-primary:hover {
  opacity: 0.7;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .media-body a.text-primary i {
  font-size: 14px !important;
  color: var(--pm-text-3) !important;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) p[style*='text-align: center'],
body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) p.text-center {
  padding: 32px 20px !important;
  margin: 0 !important;
  color: var(--pm-text-3) !important;
  font-size: 13px !important;
  background: var(--pm-bg);
  border-radius: var(--pm-r-md);
  margin: 8px !important;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) p[style*='text-align: center'] a,
body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) p.text-center a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px;
  padding: 10px 16px !important;
  background: var(--pm-orange-tint) !important;
  border-radius: var(--pm-r-md) !important;
  font-weight: 600 !important;
  transition: background 150ms ease;
}

body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) p[style*='text-align: center'] a:hover,
body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) p.text-center a:hover {
  background: #FFE8D6 !important;
}

/* —— Holiday list —— */
body#app-layout #dashboard .bessuhours {
  padding: 12px 20px;
  border-bottom: 1px solid var(--pm-border);
}

body#app-layout #dashboard .bessuhours:last-child {
  border-bottom: none;
}

body#app-layout #dashboard .bessuhours:hover {
  background: var(--pm-navy-tint);
}

body#app-layout #dashboard .bessuhoursday b {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pm-navy) !important;
}

body#app-layout #dashboard .bessuhours .dayhours {
  font-size: 13px !important;
  color: var(--pm-text-2) !important;
}

/* —— Empty states & add links —— */
body#app-layout #dashboard p.text-center,
body#app-layout #dashboard p.text-center.text-muted,
body#app-layout #dashboard .text-center.text-muted {
  padding: 40px 20px !important;
  text-align: center !important;
  color: var(--pm-text-3) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

body#app-layout #dashboard p.text-center a,
body#app-layout #dashboard p[style*='text-align: center'] a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--pm-orange) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body#app-layout #dashboard p.text-center a img[src*='plus'],
body#app-layout #dashboard p.text-center img[src*='plus Button'] {
  width: 18px !important;
  height: 18px !important;
}

/* —— Dashboard responsive —— */
@media (max-width: 575px) {
  body#app-layout #dashboard .info-box .panel-body.member {
    flex-direction: column !important;
    text-align: center !important;
  }

  body#app-layout #dashboard .info-box .info-box-stats {
    text-align: center !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   DataTables & tables
   ========================================================================== */
body#app-layout .dataTables_wrapper,
body#app-layout div.dt-container {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

body#app-layout .x_panel.table_up_div .dataTables_wrapper,
body#app-layout .x_panel.table_up_div div.dt-container,
body#app-layout .x_panel.table_up_div {
  width: 100% !important;
  max-width: 100% !important;
  border: none;
  box-shadow: none;
  background: transparent;
}

body#app-layout .x_panel.table_up_div table.jambo_table {
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-lg);
  overflow: visible;
  box-shadow: var(--pm-shadow-sm);
  background: var(--pm-surface);
}

/* scrollX tables: stretch to full panel width (fixes empty space on the right) */
body#app-layout .dataTables_wrapper .dataTables_scroll {
  width: 100% !important;
  clear: both;
}

body#app-layout .dataTables_wrapper .dataTables_scrollHead,
body#app-layout .dataTables_wrapper .dataTables_scrollBody {
  width: 100% !important;
}

body#app-layout .dataTables_wrapper .dataTables_scrollHeadInner,
body#app-layout .dataTables_wrapper .dataTables_scrollHeadInner table.dataTable,
body#app-layout .dataTables_wrapper .dataTables_scrollBody table.dataTable {
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box;
}

body#app-layout .dataTables_wrapper .dataTables_scrollBody {
  overflow-x: auto !important;
}

body#app-layout .right_col .row,
body#app-layout .right_col .x_panel,
body#app-layout .right_col .x_content {
  max-width: 100%;
}

body#app-layout .table-responsive {
  width: 100% !important;
  max-width: 100% !important;
}

/* Global table layout spacing */
body#app-layout .x_content:has(.dataTables_wrapper),
body#app-layout .x_content:has(.table-responsive),
body#app-layout .x_content:has(table.jambo_table) {
  padding: 18px 20px !important;
}

body#app-layout .x_content .table-responsive {
  padding-bottom: 6px;
}

body#app-layout table.jambo_table th,
body#app-layout table.jambo_table td,
body#app-layout table.dataTable th,
body#app-layout table.dataTable td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* ==========================================================================
   Table action column — three-dot menus
   ========================================================================== */
body#app-layout table td .dropdown_toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  z-index: 1;
}

body#app-layout table tr.pm-table-dropdown-open {
  position: relative;
  z-index: 10 !important;
}

body#app-layout table tr.pm-table-dropdown-open td {
  overflow: visible !important;
}

body#app-layout table td .dropdown-toggle[src*='dots'],
body#app-layout table td img.dropdown-toggle[src*='dots.png'],
body#app-layout table td img[src*='dots.png'].dropdown-toggle {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain;
  cursor: pointer;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body#app-layout table td .dropdown-menu.action_dropdown,
body#app-layout table td .heder-dropdown-menu.action_dropdown {
  z-index: 1080 !important;
  min-width: 168px !important;
  max-width: 280px;
  max-height: min(70vh, 360px);
  overflow-y: auto;
  padding: 6px !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  box-shadow: var(--pm-shadow-lg) !important;
}

body#app-layout table td .action_dropdown > li {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

/* Normalize <button> and <a> rows — global button styles were making buttons bold/taller */
body#app-layout table td .action_dropdown .dropdown-item,
body#app-layout table td .action_dropdown button.dropdown-item,
body#app-layout table td .action_dropdown a.dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: var(--pm-r-sm) !important;
  background: transparent !important;
  color: var(--pm-text-1) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  white-space: nowrap;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

body#app-layout table td .action_dropdown .dropdown-item:hover,
body#app-layout table td .action_dropdown .dropdown-item:focus,
body#app-layout table td .action_dropdown .dropdown-item:active,
body#app-layout table td .action_dropdown .dropdown-item.show {
  background: var(--pm-navy-tint) !important;
  color: var(--pm-navy) !important;
}

body#app-layout table td .action_dropdown .dropdown-item.deletedatas {
  color: #FD726A !important;
}

body#app-layout table td .action_dropdown .dropdown-item.deletedatas:hover,
body#app-layout table td .action_dropdown .dropdown-item.deletedatas:focus {
  color: #FD726A !important;
  background: #FEF2F2 !important;
}

body#app-layout table td .action_dropdown .dropdown-item img {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  flex-shrink: 0;
  object-fit: contain;
}

/* Bootstrap me-* on icons was doubling spacing next to flex gap */
body#app-layout table td .action_dropdown .dropdown-item [class*='me-'],
body#app-layout table td .action_dropdown .dropdown-item [class*='ms-'] {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body#app-layout table td .action_dropdown .dropdown-item.btn {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ==========================================================================
   Table action column — inline icon + text buttons
   ========================================================================== */
body#app-layout .pm-table-scroll table.dataTable,
body#app-layout .pm-table-scroll table.jambo_table,
body#app-layout .dt-container .pm-table-scroll table.dataTable {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}

body#app-layout table td .table-inline-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  gap: 4px;
  min-width: max-content;
  max-width: none;
}

body#app-layout table td .table-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #4b5563 !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  cursor: pointer;
  box-shadow: none;
}

body#app-layout table td .table-action-btn img {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  margin: 0 !important;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  opacity: 0.88;
  transition: opacity 0.18s ease;
}

body#app-layout table td .table-action-btn span {
  color: inherit !important;
  font-size: 11px;
  font-weight: 500;
}

/* Icon-only pills for core row actions */
body#app-layout table td .table-action-btn.table-action-view span,
body#app-layout table td .table-action-btn.table-action-edit span,
body#app-layout table td .table-action-btn.table-action-delete span,
body#app-layout table td .table-action-btn.table-action-whatsapp span {
  display: none;
}

body#app-layout table td .table-action-btn.table-action-view,
body#app-layout table td .table-action-btn.table-action-edit,
body#app-layout table td .table-action-btn.table-action-delete,
body#app-layout table td .table-action-btn.table-action-whatsapp {
  padding-inline: 6px;
  min-width: 24px;
  justify-content: center;
}

body#app-layout table td .table-action-btn.table-action-view {
  color: #3b5998 !important;
  background: rgba(59, 89, 152, 0.06);
  border-color: rgba(59, 89, 152, 0.12);
}

body#app-layout table td .table-action-btn.table-action-view:hover,
body#app-layout table td .table-action-btn.table-action-view:focus {
  background: rgba(59, 89, 152, 0.1) !important;
  border-color: rgba(59, 89, 152, 0.22) !important;
  color: #1e3a8a !important;
  transform: translateY(-1px);
}

body#app-layout table td .table-action-btn.table-action-edit {
  color: #047857 !important;
  background: rgba(4, 120, 87, 0.06);
  border-color: rgba(4, 120, 87, 0.12);
}

body#app-layout table td .table-action-btn.table-action-edit:hover,
body#app-layout table td .table-action-btn.table-action-edit:focus {
  background: rgba(4, 120, 87, 0.1) !important;
  border-color: rgba(4, 120, 87, 0.22) !important;
  color: #065f46 !important;
  transform: translateY(-1px);
}

body#app-layout table td .table-action-btn.table-action-delete {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.12);
}

body#app-layout table td .table-action-btn.table-action-delete:hover,
body#app-layout table td .table-action-btn.table-action-delete:focus {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.22) !important;
  color: #b91c1c !important;
  transform: translateY(-1px);
}

body#app-layout table td .table-action-btn.table-action-pay {
  color: #b45309 !important;
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.18);
}

body#app-layout table td .table-action-btn.table-action-pay:hover,
body#app-layout table td .table-action-btn.table-action-pay:focus {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
  color: #92400e !important;
  transform: translateY(-1px);
}

body#app-layout table td .table-action-btn.table-action-payment {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.14);
}

body#app-layout table td .table-action-btn.table-action-payment:hover,
body#app-layout table td .table-action-btn.table-action-payment:focus {
  background: rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.24) !important;
  color: #5b21b6 !important;
  transform: translateY(-1px);
}

body#app-layout table td .table-action-btn.table-action-whatsapp {
  color: #15803d !important;
  background: rgba(21, 128, 61, 0.06);
  border-color: rgba(21, 128, 61, 0.14);
}

body#app-layout table td .table-action-btn.table-action-whatsapp:hover,
body#app-layout table td .table-action-btn.table-action-whatsapp:focus {
  background: rgba(21, 128, 61, 0.1) !important;
  border-color: rgba(21, 128, 61, 0.24) !important;
  color: #166534 !important;
  transform: translateY(-1px);
}

body#app-layout table td .table-action-btn.table-action-quote,
body#app-layout table td .table-action-btn.table-action-checklist,
body#app-layout table td .table-action-btn.table-action-default {
  color: #475569 !important;
  background: rgba(71, 85, 105, 0.06);
  border-color: rgba(71, 85, 105, 0.12);
}

body#app-layout table td .table-action-btn.table-action-quote:hover,
body#app-layout table td .table-action-btn.table-action-checklist:hover,
body#app-layout table td .table-action-btn.table-action-default:hover,
body#app-layout table td .table-action-btn.table-action-quote:focus,
body#app-layout table td .table-action-btn.table-action-checklist:focus,
body#app-layout table td .table-action-btn.table-action-default:focus {
  background: rgba(71, 85, 105, 0.1) !important;
  border-color: rgba(71, 85, 105, 0.2) !important;
  color: #1e293b !important;
  transform: translateY(-1px);
}

body#app-layout table td .table-inline-action-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

body#app-layout table td .table-action-btn:hover img,
body#app-layout table td .table-action-btn:focus img {
  opacity: 1;
}

body#app-layout table td:has(.table-inline-actions) {
  white-space: normal;
  vertical-align: middle !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

body#app-layout table.jambo_table tbody td,
body#app-layout table.dataTable tbody td {
  vertical-align: middle !important;
}

body#app-layout table.jambo_table tbody td .table-inline-actions {
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  body#app-layout table td .table-inline-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  body#app-layout table td .table-action-btn {
    width: auto;
    min-width: 88px;
    justify-content: flex-start;
  }
}

body#app-layout .dataTables_wrapper .top,
body#app-layout .dataTables_wrapper .dt-layout-row:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 12px;
  padding: var(--pm-dg-inset-y, 24px) var(--pm-dg-inset-x, 28px) calc(var(--pm-dg-inset-y, 24px) - 4px) !important;
  background: var(--pm-surface) !important;
  border-bottom: 1px solid var(--pm-border) !important;
}

/* Legacy DataTables (vehicle/list, customer/list, etc.) — no .top/.bottom wrappers */
body#app-layout .dataTables_wrapper:not(.pm-dt-toolbar-ready) > .dataTables_length {
  float: left !important;
  width: auto !important;
  max-width: none !important;
  padding: var(--pm-dg-inset-y, 24px) 12px calc(var(--pm-dg-inset-y, 24px) - 4px) var(--pm-dg-inset-x, 28px) !important;
  margin: 0 !important;
}

body#app-layout .dataTables_wrapper:not(.pm-dt-toolbar-ready) > .dataTables_filter {
  float: right !important;
  width: auto !important;
  max-width: none !important;
  padding: var(--pm-dg-inset-y, 24px) var(--pm-dg-inset-x, 28px) calc(var(--pm-dg-inset-y, 24px) - 4px) 12px !important;
  margin: 0 !important;
  text-align: right !important;
}

body#app-layout .dataTables_wrapper > .dataTables_scroll,
body#app-layout .dataTables_wrapper > .dataTables_scrollHead,
body#app-layout .dataTables_wrapper > .dataTables_scrollBody,
body#app-layout .dataTables_wrapper > table.dataTable {
  clear: both;
}

body#app-layout .dataTables_wrapper:not(.pm-dt-toolbar-ready) > .dataTables_info {
  float: left !important;
  width: auto !important;
  max-width: none !important;
  padding: 12px 12px 14px var(--pm-dg-inset-x, 28px) !important;
  margin: 0 !important;
  clear: left;
}

body#app-layout .dataTables_wrapper:not(.pm-dt-toolbar-ready) > .dataTables_paginate {
  float: right !important;
  width: auto !important;
  max-width: none !important;
  padding: 12px var(--pm-dg-inset-x, 28px) 14px 12px !important;
  margin: 0 !important;
  text-align: right !important;
}

body#app-layout .dataTables_wrapper::after {
  content: '';
  display: block;
  clear: both;
}

/* DataTables v2 */
body#app-layout .dt-container .dt-length,
body#app-layout .dt-container .dt-search {
  padding: 14px 24px 10px !important;
}

body#app-layout .dt-container .dt-info,
body#app-layout .dt-container .dt-paging {
  padding: 12px 24px 14px !important;
}

body#app-layout .dataTables_length label,
body#app-layout .dataTables_filter label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--pm-text-2) !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

body#app-layout .dataTables_filter input,
body#app-layout .dataTables_length select,
body#app-layout div.dt-container .dt-search input,
body#app-layout div.dt-container .dt-length select {
  width: auto !important;
  min-height: 36px !important;
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
}

body#app-layout .dataTables_wrapper:not(.pm-dt-toolbar-ready) .dataTables_filter input,
body#app-layout .dataTables_wrapper:not(.pm-dt-toolbar-ready) div.dt-container .dt-search input {
  height: auto !important;
}

body#app-layout .dataTables_filter input,
body#app-layout div.dt-container .dt-search input {
  width: 220px !important;
}

body#app-layout table,
body#app-layout table.jambo_table,
body#app-layout table.table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 0 !important;
}

body#app-layout table.dataTable {
  width: 100% !important;
  max-width: 100% !important;
}

body#app-layout table thead {
  background: var(--pm-bg) !important;
}

body#app-layout table thead th {
  padding: 11px 16px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--pm-text-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none !important;
  background: var(--pm-bg) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  box-shadow: inset 0 -1px 0 var(--pm-border) !important;
  vertical-align: middle !important;
}

/* Typo alias — remove once all blades use jambo_table */
body#app-layout table.jumbo_table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
}

body#app-layout table.jumbo_table thead,
body#app-layout table.jumbo_table tbody td,
body#app-layout table.jumbo_table thead th {
  /* inherit jambo_table rules via shared selectors below */
}

body#app-layout table.jambo_table,
body#app-layout table.jumbo_table {
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-lg);
  overflow: visible;
  box-shadow: var(--pm-shadow-sm);
  background: var(--pm-surface);
}

/* Neutralize legacy own.css fixed td width on list tables */
body#app-layout table.table.jambo_table tbody td,
body#app-layout table.table.jumbo_table tbody td,
body#app-layout table.dataTable.jambo_table tbody td,
body#app-layout table.dataTable tbody td {
  width: auto !important;
  min-width: 0;
  max-width: none;
}

body#app-layout table tbody tr {
  border-bottom: 1px solid var(--pm-border);
  transition: background 150ms ease;
}

body#app-layout table tbody tr:hover {
  background: var(--pm-navy-tint) !important;
}

body#app-layout table tbody tr:last-child {
  border-bottom: none;
}

body#app-layout table tbody td {
  padding: 14px 16px !important;
  font-size: 13px !important;
  color: var(--pm-text-1) !important;
  vertical-align: middle !important;
  border-top: none !important;
}

body#app-layout table.jambo_table thead {
  background: var(--pm-bg) !important;
}

body#app-layout .dataTables_wrapper .bottom,
body#app-layout .dataTables_wrapper .dt-layout-row:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 24px 14px !important;
  border-top: 1px solid var(--pm-border) !important;
  background: var(--pm-surface) !important;
}

body#app-layout .dataTables_info {
  font-size: 12px !important;
  color: var(--pm-text-3) !important;
  padding: 0 !important;
}

/* Bulk actions — buttons live inside .pm-bulk-actions-row (one horizontal row) */
body#app-layout .pm-bulk-actions-row,
body#app-layout .dataTables_wrapper .pm-bulk-actions-row,
body#app-layout .x_panel.table_up_div > .pm-bulk-actions-row,
body#app-layout .x_panel.table_up_div > .dataTables_wrapper ~ .pm-bulk-actions-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px var(--pm-dg-inset-x, 28px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: var(--pm-surface) !important;
  border-top: 1px solid var(--pm-border) !important;
}

body#app-layout .pm-bulk-actions-row #select-all-btn,
body#app-layout .pm-bulk-actions-row #delete-selected-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: var(--pm-r-full) !important;
  white-space: nowrap !important;
}

body#app-layout .pm-bulk-actions-row #select-all-btn.select_all {
  gap: 8px !important;
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-text-1) !important;
}

body#app-layout .pm-bulk-actions-row #delete-selected-btn.btn-danger {
  gap: 6px !important;
  background: var(--bg-elevated-2) !important;
  border: 1px solid rgba(220, 38, 38, 0.28) !important;
  color: var(--pm-red) !important;
}

/* Legacy buttons hidden once new bulk toolbar is active on the panel */
body#app-layout .x_panel.pm-bulk-toolbar-ready .pm-bulk-actions-row,
body#app-layout .x_panel.pm-bulk-toolbar-ready .dataTables_wrapper ~ #select-all-btn,
body#app-layout .x_panel.pm-bulk-toolbar-ready .dataTables_wrapper ~ #delete-selected-btn {
  display: none !important;
}

body#app-layout .dataTables_wrapper.pm-dt-toolbar-ready > .dataTables_length,
body#app-layout .dataTables_wrapper.pm-dt-toolbar-ready > .dataTables_filter,
body#app-layout .dataTables_wrapper.pm-dt-toolbar-ready > .dataTables_info,
body#app-layout .dataTables_wrapper.pm-dt-toolbar-ready > .dataTables_paginate {
  display: none !important;
}

/* Unified table card container */
body#app-layout .x_panel.table_up_div,
body#app-layout .x_panel:has(.dataTables_wrapper),
body#app-layout .x_panel:has(table.dataTable),
body#app-layout .x_panel:has(table.jambo_table) {
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: var(--pm-shadow-sm) !important;
  overflow: hidden;
}

body#app-layout .x_panel:has(.dataTables_wrapper) .dataTables_wrapper {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Pagination */
body#app-layout .dataTables_paginate,
body#app-layout ul.pagination {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}

body#app-layout .dataTables_paginate .paginate_button,
body#app-layout .dt-paging-button,
body#app-layout ul.pagination .page-link {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: var(--pm-r-md) !important;
  border: 1px solid var(--pm-border) !important;
  background: var(--pm-surface) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pm-text-2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 2px !important;
  line-height: 1 !important;
}

body#app-layout .dataTables_paginate .paginate_button:hover,
body#app-layout .dt-paging-button:hover,
body#app-layout ul.pagination .page-link:hover {
  background: var(--pm-navy-tint) !important;
  border-color: var(--pm-navy) !important;
  color: var(--pm-navy) !important;
}

body#app-layout .dataTables_paginate .paginate_button.current,
body#app-layout .dataTables_paginate .paginate_button.current:hover,
body#app-layout ul.pagination .page-item.active .page-link {
  background: var(--pm-navy) !important;
  border-color: var(--pm-navy) !important;
  color: var(--pm-text-inv) !important;
}

body#app-layout .dataTables_paginate .paginate_button.disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
}

body#app-layout .dt-paging-button:hover,
body#app-layout .dt-paging .dt-paging-button.current:hover {
  background: var(--pm-navy) !important;
  border-color: var(--pm-navy) !important;
  color: var(--pm-text-inv) !important;
}

/* Processing overlay — replaces per-page inline overrides */
body#app-layout .dataTables_processing {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  min-width: 160px;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: var(--pm-r-md) !important;
  background: var(--pm-surface) !important;
  box-shadow: var(--pm-shadow-lg) !important;
  color: var(--pm-navy) !important;
  font-size: 13px !important;
  z-index: 1090 !important;
}

/* ==========================================================================
   Status badges
   ========================================================================== */
/* Pill badges only — never match table column classes like jobcard-status-col */
body#app-layout .badge,
body#app-layout .task-status,
body#app-layout .pickup-status,
body#app-layout [class*='badge-']:not(th):not(td):not(tr):not(table),
body#app-layout [class*='status-']:not(th):not(td):not(tr):not(table) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 10px !important;
  border-radius: var(--pm-r-full) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  line-height: 1.6 !important;
  text-decoration: none !important;
}

body#app-layout .task-status.assigned,
body#app-layout .task-status.pending,
body#app-layout .pickup-status.assigned,
body#app-layout .badge.bg-secondary,
body#app-layout .badge-secondary {
  background: var(--pm-bg) !important;
  color: var(--pm-text-2) !important;
  border: 1px solid var(--pm-border) !important;
}

body#app-layout .task-status.in_progress,
body#app-layout .task-status.progress,
body#app-layout .pickup-status.progress,
body#app-layout .badge-warning,
body#app-layout .badge.bg-warning,
body#app-layout [class*='pending'],
body#app-layout [class*='progress'] {
  background: var(--pm-yellow-bg) !important;
  color: var(--pm-yellow) !important;
}

body#app-layout .task-status.completed,
body#app-layout .pickup-status.completed,
body#app-layout .badge-success,
body#app-layout .badge.bg-success,
body#app-layout .bg-success {
  background: var(--pm-green-bg) !important;
  color: var(--pm-green) !important;
}

body#app-layout .task-status.cancelled,
body#app-layout .pickup-status.cancelled,
body#app-layout .badge-danger,
body#app-layout .badge.bg-danger {
  background: var(--pm-red-bg) !important;
  color: var(--pm-red) !important;
}

body#app-layout [class*='pickup'] {
  background: var(--pm-blue-bg) !important;
  color: var(--pm-blue) !important;
}

body#app-layout [class*='delivery'] {
  background: var(--pm-navy-tint) !important;
  color: var(--pm-navy) !important;
}

body#app-layout a.badge,
body#app-layout a[class*='status-'] {
  text-decoration: none !important;
  color: inherit !important;
}

/* Number plate styling — exclude Font Awesome icons in table cells */
body#app-layout p.title i,
body#app-layout [class*='plate']:not([class*='fa']),
body#app-layout [class*='number_plate']:not([class*='fa']) {
  font-family: 'Courier New', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  font-style: normal !important;
  color: var(--pm-navy) !important;
  background: var(--pm-navy-tint);
  padding: 2px 8px;
  border-radius: var(--pm-r-sm);
  border: 1px solid var(--pm-border);
}

/* Restore Font Awesome icons inside tables (delete, info, etc.) */
body#app-layout table td i[class*='fa'],
body#app-layout table td i.fa,
body#app-layout table td i.fas,
body#app-layout table td i.fa-solid,
body#app-layout table td i.far,
body#app-layout table td i.fab {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
  font-weight: 900;
  font-style: normal !important;
  letter-spacing: normal !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   Modals
   ========================================================================== */
body#app-layout {
  --bs-backdrop-zindex: 10040;
  --bs-modal-zindex: 10050;
}

body#app-layout .modal-backdrop {
  background-color: rgba(17, 24, 39, 0.5) !important;
  opacity: 1 !important;
  z-index: 10040 !important;
}

body#app-layout .modal-backdrop.show {
  opacity: 1 !important;
}

/* Faster open/close — avoid backdrop-filter (very slow on scroll/repaint) */
body#app-layout .modal.fade .modal-dialog {
  transition: transform 0.12s ease-out !important;
}

body#app-layout .modal.fade {
  transition: opacity 0.12s linear !important;
}

body#app-layout .modal-backdrop.fade {
  transition: opacity 0.12s linear !important;
}

@media (prefers-reduced-motion: reduce) {
  body#app-layout .modal.fade,
  body#app-layout .modal.fade .modal-dialog,
  body#app-layout .modal-backdrop.fade {
    transition: none !important;
  }
}

/* Above sidebar (9999), header menus (1100), select2 (1051) */
body#app-layout .modal {
  z-index: 10050 !important;
}

body#app-layout.modal-open .modal-backdrop {
  z-index: 10040 !important;
}

body#app-layout.modal-open .modal {
  z-index: 10050 !important;
}

/* Scroll/interaction handled in the global modal scrolling block below */

body#app-layout .modal.show .select2-container--open,
body#app-layout .modal.show .select2-dropdown {
  z-index: 10060 !important;
}

body#app-layout .modal.show {
  filter: none !important;
}

body#app-layout.modal-open .pm-sidebar-overlay {
  display: none !important;
  pointer-events: none !important;
}

body#app-layout.modal-open #responsive-modal-observation .modal-dialog {
  max-width: min(960px, calc(100vw - 2rem));
  margin: 1.75rem auto;
}

body#app-layout.modal-open #responsive-modal-observation .modal-content {
  width: 100% !important;
  max-width: 100% !important;
}

body#app-layout.modal-open #myModal1 .modal-dialog,
body#app-layout.modal-open #myModal-job .modal-dialog,
body#app-layout.modal-open #myModal-gate .modal-dialog,
body#app-layout.modal-open #myModal .modal-dialog,
body#app-layout.modal-open #myModal-payment .modal-dialog,
body#app-layout.modal-open #coupaon_data .modal-dialog {
  max-width: min(960px, calc(100vw - 2rem));
  margin: 1.75rem auto;
}

body#app-layout.modal-open [id^="responsive-modal"] .modal-dialog {
  max-width: min(560px, calc(100vw - 2rem));
  margin: 1.75rem auto;
}

body#app-layout.modal-open #myModal1 .modal-content,
body#app-layout.modal-open #myModal-job .modal-content,
body#app-layout.modal-open #myModal-gate .modal-content,
body#app-layout.modal-open #myModal .modal-content,
body#app-layout.modal-open #myModal-payment .modal-content,
body#app-layout.modal-open #coupaon_data .modal-content {
  width: 100% !important;
  max-width: 100% !important;
}

body#app-layout.modal-open [id^="responsive-modal"] .modal-content {
  width: 100% !important;
  max-width: 100% !important;
}

/* SweetAlert confirm/success — must sit above Bootstrap modals (10050) */
.swal-overlay,
.swal-overlay--show-modal {
  z-index: 10100 !important;
}

.swal-modal {
  z-index: 10101 !important;
}

/* Legacy sweet-alert v1 (used on a few pages) */
.sweet-alert,
.sweet-overlay {
  z-index: 10100 !important;
}

body#app-layout .modal-content,
body#app-layout .modal_data {
  border-radius: var(--pm-r-xl) !important;
  border: 1px solid var(--pm-border) !important;
  box-shadow: var(--pm-shadow-lg) !important;
}

body#app-layout .modal-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--pm-border) !important;
  background: var(--pm-surface) !important;
}

body#app-layout .modal-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--pm-navy) !important;
}

body#app-layout .btn-close {
  opacity: 0.65 !important;
}

body#app-layout .btn-close:hover,
body#app-layout .btn-close:focus {
  background-color: var(--pm-red-bg) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

body#app-layout .modal-content h3,
body#app-layout .modal-content .bg-primary,
body#app-layout [class*='invoice'] th.bg-dark,
body#app-layout table th[style*='background'] {
  background: var(--pm-navy) !important;
  color: var(--pm-text-inv) !important;
}

/* ==========================================================================
   Tabs, alerts, misc
   ========================================================================== */
body#app-layout .nav-tabs {
  border-bottom: 1px solid var(--pm-border);
  gap: 4px;
}

body#app-layout .nav-tabs .nav-link {
  border: none !important;
  border-radius: var(--pm-r-md) var(--pm-r-md) 0 0 !important;
  color: var(--pm-text-2) !important;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 16px;
}

body#app-layout .nav-tabs .nav-link.active {
  color: var(--pm-orange) !important;
  background: var(--pm-orange-tint) !important;
  border-bottom: 2px solid var(--pm-orange) !important;
}

body#app-layout .alert-success {
  background: var(--pm-green-bg) !important;
  border-color: var(--pm-green) !important;
  color: var(--pm-green) !important;
}

body#app-layout .alert-danger {
  background: var(--pm-red-bg) !important;
  border-color: var(--pm-red) !important;
  color: var(--pm-red) !important;
}

body#app-layout .alert-warning {
  background: var(--pm-yellow-bg) !important;
  border-color: var(--pm-yellow) !important;
  color: var(--pm-yellow) !important;
}

body#app-layout .link-text {
  color: var(--pm-navy) !important;
}

body#app-layout #footerforid,
body#app-layout .footerforallpage {
  background: var(--pm-surface) !important;
  border-top: 1px solid var(--pm-border);
  color: var(--pm-text-3);
  font-size: 12px;
}

/* Empty state */
body#app-layout .right_col img[src*='No-Data'],
body#app-layout p img[src*='No-Data'] {
  max-width: 160px !important;
  opacity: 0.5;
  margin: 32px auto;
  display: block;
}

/* Branch / profile hero areas */
body#app-layout .branch-header,
body#app-layout [class*='branch-profile'],
body#app-layout .guardian_div .x_title {
  border-radius: var(--pm-r-xl);
}

/* Floating CTA */
body#app-layout .floating-book-service {
  background: var(--pm-orange) !important;
  border-radius: var(--pm-r-full) !important;
  box-shadow: var(--pm-shadow-md) !important;
}

body#app-layout .floating-book-service:hover {
  background: var(--pm-orange-hover) !important;
}

/* DataTables processing */
body#app-layout div.dataTables_processing {
  color: var(--pm-navy) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  background: var(--pm-surface) !important;
  box-shadow: var(--pm-shadow-md) !important;
}

/* Mobile/tablet layout — see mobile-responsive.css (pm-sidebar-open drawer) */

@media print {
  body#app-layout .left_col,
  body#app-layout .page-title {
    display: none !important;
  }

  body#app-layout .main_container .top_nav {
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   Login page (auth/login)
   ========================================================================== */
html:has(body#login-page) {
  height: 100%;
}

body#login-page,
body#login-page.school-login-page {
  font-family: var(--pm-font) !important;
  background: var(--pm-bg) !important;
  color: var(--pm-text-1) !important;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  -webkit-font-smoothing: antialiased;
}

body#login-page *,
body#login-page *::before,
body#login-page *::after {
  box-sizing: border-box;
}

/* Decorative PNG backgrounds (removed from markup; hide if cached HTML) */
body#login-page .img-all-background-box-bck-main-cont,
body#login-page .img-one-right-side-min-sch,
body#login-page .img-second-right-side-min-sch,
body#login-page .head_logo,
body#login-page img.img-first-bck-contn-sch,
body#login-page img.img-second-bck-contn-sch,
body#login-page img.img-first-bck-contn-sch-round {
  display: none !important;
}

/* —— Full-height two-column split —— */
body#login-page .background-main-div-plugin-login {
  position: relative !important;
  top: 0 !important;
  width: 100%;
  min-height: 100vh;
  margin: 0 !important;
  display: flex;
}

body#login-page .background-main-div-plugin-login .container {
  position: relative !important;
  top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
}

body#login-page .col-sm-7.col-sm-offset-3.col-md-7.col-md-offset-2.main.content-start {
  margin-top: 0 !important;
}

body#login-page .main-div-school-container {
  position: relative !important;
  top: 0 !important;
  float: none !important;
  width: 100% !important;
  max-width: 100%;
  min-height: 100vh;
  margin: 0 !important;
  background: var(--pm-surface) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
}

/* LEFT brand panel — full-bleed garage photo with readable text overlay */
body#login-page .header-bnner-login-page-mc {
  flex: 0 0 40%;
  max-width: 40%;
  background-color: var(--pm-login-brand-bg) !important;
  background-image:
    linear-gradient(180deg, rgba(17, 24, 39, 0.35) 0%, rgba(17, 24, 39, 0.5) 42%, rgba(17, 24, 39, 0.78) 100%),
    url('../admin/login-page.jpg');
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 48px;
  min-height: 100vh;
}

body#login-page .header-bnner-login-page-mc::before,
body#login-page .header-bnner-login-page-mc::after {
  display: none !important;
}

body#login-page .heade-content-login-page {
  background: transparent !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: center;
  position: relative;
  z-index: 1;
  width: 100%;
}

body#login-page .header-title-trusted-plugin {
  font-size: 30px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: #ffffff !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
}

body#login-page .double_shadow_to_text_plugin_trusted {
  text-shadow: none !important;
  color: #ffffff !important;
}

body#login-page .heade-content-login-page::after {
  content: 'Manage your garage smarter.';
  display: block;
  font-family: var(--pm-font);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  margin-top: 8px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

body#login-page .login-left-visual,
body#login-page .header-bnner-login-page-mc .login-left-visual,
body#login-page .header-bnner-login-page-mc .image-container {
  display: none !important;
}
body#login-page .main-div-school-container > .row {
  flex: 1 1 60%;
  min-height: 100vh;
  background: var(--pm-surface);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 40px;
}

body#login-page .sidebar.col-sm-5,
body#login-page .sidebar.col-md-5 {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  text-align: center;
  flex: 0 0 auto;
  max-width: 100%;
}

body#login-page .header-bnner-login-page-mc .login-left-visual {
  display: none !important;
}

body#login-page .header-bnner-login-page-mc .image-container,
body#login-page .header-bnner-login-page-mc .image-container img {
  display: none !important;
}

/* Hide duplicate sidebar logo on the right form column */
body#login-page .main-div-school-container > .row .sidebar .image-container {
  display: none !important;
}

body#login-page .sidebar:not(:has(.bookService)) {
  display: none !important;
}

body#login-page a.bookService {
  background: var(--pm-login-btn) !important;
  color: var(--pm-text-inv) !important;
  border-radius: var(--pm-r-md) !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600;
  text-decoration: none !important;
  display: inline-block;
  margin-top: 24px;
  transition: background 150ms ease;
}

body#login-page a.bookService:hover {
  background: var(--pm-login-btn-hover) !important;
  color: var(--pm-text-inv) !important;
}

body#login-page .content-start,
body#login-page .col-sm-7.main.content-start {
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100%;
  flex: 1 1 auto;
  max-width: 100%;
  float: none !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
}

body#login-page .col-sm-offset-3,
body#login-page .col-md-offset-2 {
  margin-left: auto !important;
}

body#login-page .content-form-login-page-school-plugin {
  width: 100%;
  max-width: 380px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Injected "Welcome back" heading + subtitle above the form */
body#login-page .content-form-login-page-school-plugin::before {
  content: 'Welcome back';
  display: block;
  font-family: var(--pm-font);
  font-size: 24px;
  font-weight: 700;
  color: var(--pm-text-1);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

body#login-page form.form-horizontal::before {
  content: 'Sign in to your account';
  display: block;
  font-family: var(--pm-font);
  font-size: 14px;
  color: var(--pm-text-2);
  margin-bottom: 32px;
}

/* Login tabs */
body#login-page .login-tabs {
  display: flex;
  margin-bottom: 28px;
  border-radius: var(--pm-r-md);
  background: var(--pm-bg);
  border: 1px solid var(--pm-border);
  overflow: hidden;
  padding: 4px;
  gap: 4px;
}

body#login-page .tab-button {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--pm-r-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-text-2);
  transition: all 150ms ease;
  font-family: var(--pm-font) !important;
}

body#login-page .tab-button.active {
  background: var(--pm-surface) !important;
  color: var(--pm-navy) !important;
  border-bottom: none !important;
  box-shadow: var(--pm-shadow-sm);
}

body#login-page .tab-content {
  display: none;
}

body#login-page .tab-content.active {
  display: block;
}

/* Form fields */
body#login-page .content-form-login-page-school-plugin .login-demo,
body#login-page .content-form-login-page-school-plugin .login-password,
body#login-page .content-form-login-page-school-plugin .login-remember {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 20px !important;
  position: relative;
}

body#login-page .content-form-login-page-school-plugin label {
  position: static !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pm-text-1) !important;
  margin-bottom: 6px !important;
  transform: none !important;
}

body#login-page .content-form-login-page-school-plugin .input,
body#login-page #mobile_no,
body#login-page #otp {
  width: 100% !important;
  height: 46px !important;
  padding: 0 16px !important;
  border: 1.5px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  background: var(--pm-surface) !important;
  font-size: 14px !important;
  color: var(--pm-text-1) !important;
  font-family: var(--pm-font) !important;
  outline: none;
  transition: border-color 200ms, box-shadow 200ms;
}

body#login-page .content-form-login-page-school-plugin .input:focus,
body#login-page #mobile_no:focus,
body#login-page #otp:focus {
  border-color: var(--pm-navy) !important;
  box-shadow: 0 0 0 3px rgba(27, 43, 94, 0.08) !important;
}

body#login-page .login-password .input {
  padding-right: 40px !important;
}

body#login-page .password-toggle {
  color: var(--pm-text-3);
  right: 12px;
}

body#login-page .password-toggle:hover {
  color: var(--pm-navy);
}

body#login-page .login-remember label {
  font-size: 13px !important;
  color: var(--pm-text-2) !important;
  font-weight: 400 !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

body#login-page .login-remember input[type='checkbox'] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--pm-text-1);
  cursor: pointer;
  margin: 0 !important;
}

body#login-page .forgot_pwd_scl {
  color: var(--pm-login-btn) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-left: 0 !important;
  display: inline-block;
  margin-bottom: 20px;
  text-decoration: none !important;
}

body#login-page .forgot_pwd_scl:hover {
  color: var(--pm-login-btn-hover) !important;
  text-decoration: underline !important;
}

body#login-page .login-submit {
  margin-top: 8px;
  text-align: center;
}

body#login-page .content-form-login-page-school-plugin form {
  width: 100%;
}

body#login-page .login-submit input.button-primary,
body#login-page .login-submit input[type='submit'] {
  width: 100% !important;
  height: 48px !important;
  padding: 0 24px !important;
  margin-top: 8px;
  border-radius: var(--pm-r-md) !important;
  background: var(--pm-login-btn) !important;
  border: none !important;
  color: var(--pm-text-inv) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 150ms ease;
  font-family: var(--pm-font) !important;
}

body#login-page .login-submit input.button-primary:hover {
  background: var(--pm-login-btn-hover) !important;
}

body#login-page .otpButton,
body#login-page .back-button {
  font-family: var(--pm-font) !important;
  font-size: 13px !important;
  font-weight: 600;
  border-radius: var(--pm-r-md) !important;
  padding: 10px 20px !important;
  cursor: pointer;
  border: none;
}

body#login-page .otpButton {
  background: var(--pm-login-btn) !important;
  color: var(--pm-text-inv) !important;
}

body#login-page .otpButton:hover {
  background: var(--pm-login-btn-hover) !important;
}

body#login-page .back-button {
  background: transparent !important;
  color: var(--pm-navy) !important;
  border: 1.5px solid var(--pm-border-strong) !important;
}

body#login-page .countdown-timer {
  background: var(--pm-yellow-bg) !important;
  color: var(--pm-yellow) !important;
  border-radius: var(--pm-r-md);
  font-size: 12px;
}

body#login-page .success-message {
  background: var(--pm-green-bg) !important;
  color: var(--pm-green) !important;
  border: 1px solid var(--pm-green) !important;
  border-radius: var(--pm-r-md);
}

body#login-page .resend-link {
  color: var(--pm-navy) !important;
}

body#login-page .resend-link:hover {
  color: var(--pm-login-btn) !important;
}

body#login-page .help-block strong,
body#login-page .error-message {
  color: var(--pm-red) !important;
  font-size: 12px;
}

body#login-page a:hover {
  color: var(--pm-login-btn);
}

@media (max-width: 991px) {
  body#login-page .main-div-school-container {
    flex-direction: column !important;
    min-height: 100vh;
  }

  body#login-page .header-bnner-login-page-mc {
    flex: 0 0 auto;
    max-width: 100%;
    min-height: 280px;
    padding: 40px 24px;
  }

  body#login-page .main-div-school-container > .row {
    flex: 1 1 auto;
    min-height: auto;
    padding: 40px 24px;
  }
}

@media (max-width: 767px) {
  body#login-page .header-bnner-login-page-mc {
    padding: 32px 20px;
  }

  body#login-page .header-bnner-login-page-mc::before,
  body#login-page .header-bnner-login-page-mc::after {
    display: none;
  }

  body#login-page .main-div-school-container > .row {
    padding: 32px 20px;
  }

  body#login-page .header-title-trusted-plugin {
    font-size: 24px !important;
  }

  body#login-page .heade-content-login-page::after {
    font-size: 14px;
  }
}

/* ==========================================================================
   Requested UI consistency overrides (June 2026)
   ========================================================================== */

/* ----- Login page tweaks ----- */
body#login-page .header-bnner-login-page-mc {
  background-color: var(--pm-login-brand-bg) !important;
  background-image:
    linear-gradient(180deg, rgba(17, 24, 39, 0.35) 0%, rgba(17, 24, 39, 0.5) 42%, rgba(17, 24, 39, 0.78) 100%),
    url('../admin/login-page.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

body#login-page .login-options-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  margin: 10px 0 20px !important;
  flex-wrap: wrap;
}

body#login-page .login-options-row .login-remember {
  margin: 0 !important;
}

body#login-page .login-options-row .forgot_pwd_scl {
  display: inline-flex !important;
  margin: 0 !important;
  align-items: center;
  white-space: nowrap;
}

body#login-page .password-toggle {
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0.8;
}

body#login-page .password-toggle:hover {
  opacity: 1;
}

/* ----- Dashboard panel header alignment ----- */
body#app-layout #dashboard .dashboard_x_panel .x_title.row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 8px;
}

body#app-layout #dashboard .dashboard_x_panel .x_title.row > [class*='col-'] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body#app-layout #dashboard .dashboard_x_panel .x_title .text-end {
  white-space: nowrap;
  margin-left: auto;
}

/* KPI cards: icon + number alignment with label below */
body#app-layout #dashboard .panel.info-box .panel-body.member {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center !important;
  gap: 12px !important;
}

body#app-layout #dashboard .info-box .info-box-stats {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 3px !important;
  min-height: 40px;
}

body#app-layout #dashboard .info-box-stats p.counter {
  align-self: center;
  margin: 0 !important;
  line-height: 1 !important;
}

body#app-layout #dashboard .info-box-stats .info-box-title,
body#app-layout #dashboard .info-box-stats span.info-box-title {
  margin-top: 0 !important;
  align-self: start;
}

/* Blade has <br> after counter; remove its layout impact */
body#app-layout #dashboard .info-box-stats br {
  display: none !important;
}

/* Keep icon visual center consistent across png/fa cards */
body#app-layout #dashboard .panel.info-box .dashboard_background,
body#app-layout #dashboard .panel.info-box .dashboard-stat-icon {
  align-self: center !important;
}

/* Recent Job Receipts: remove orange accent/gradient */
body#app-layout #dashboard .dashboard-cards:has(form[action='jobcard/list']):not(:has(input[name='paid'])) .x_title.row {
  border-left: none !important;
  padding-left: 20px !important;
  background: var(--pm-surface) !important;
}

/* Calendar spacing/hover polish */
body#app-layout #dashboard .dashboard_x_panel:has(#calendar) .x_title.row {
  grid-template-columns: minmax(0, 1fr) auto;
}

body#app-layout #dashboard .fc .fc-daygrid-day-frame {
  border-radius: 6px;
}

body#app-layout #dashboard .fc .fc-day-today .fc-daygrid-day-frame {
  background: rgba(255,255,255,0.06) !important;
}

/* Calendar day hover — plus icon only */
body#app-layout #dashboard .fc-daygrid-day-frame {
  position: relative;
}

body#app-layout #dashboard .fc-daygrid-day .pm-calendar-book-btn {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 5;
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  border: none;
  border-radius: var(--pm-r-full);
  background: var(--pm-navy) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--pm-shadow-sm);
  transition: background 150ms ease, transform 150ms ease;
}

body#app-layout #dashboard .fc-daygrid-day .pm-calendar-book-btn.is-visible {
  display: inline-flex !important;
}

body#app-layout #dashboard .fc-daygrid-day .pm-calendar-book-btn:hover {
  background: var(--pm-orange) !important;
  transform: scale(1.05);
}

body#app-layout #dashboard .fc-daygrid-day .pm-calendar-book-btn {
  font-family: var(--pm-font), system-ui, sans-serif;
}

/* ----- Sidebar dropdown accordion (click to expand/collapse) ----- */
@media (min-width: 992px) {
  body#app-layout.nav-md .left_col .mCustomScrollBox,
  body#app-layout.nav-md .left_col .mCSB_container,
  body#app-layout.nav-md .left_col .mCSB_container_wrapper {
    background: var(--pm-surface) !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body#app-layout.nav-md .nav.side-menu {
    padding-bottom: 0 !important;
  }

  body#app-layout.nav-md .nav.side-menu > li {
    margin: 0 8px !important;
  }

  body#app-layout.nav-md .nav.side-menu > li > .dropdown {
    padding: 0 !important;
  }

  body#app-layout.nav-md .nav.side-menu > li > .dropdown > a {
    cursor: pointer;
  }

  body#app-layout.nav-md .nav.side-menu > li > .dropdown > .dropdown-content {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: var(--pm-submenu-gap) !important;
    max-height: 0;
    padding: 0 0 0 var(--pm-submenu-indent) !important;
    overflow: hidden !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: transparent !important;
    transition:
      max-height var(--pm-submenu-duration) ease,
      opacity 200ms ease,
      padding var(--pm-submenu-duration) ease;
  }

  body#app-layout.nav-md .nav.side-menu > li > .dropdown.pm-open > .dropdown-content {
    max-height: 560px;
    margin-top: 2px !important;
    padding-top: 2px !important;
    padding-bottom: 4px !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow-y: auto !important;
  }

  body#app-layout.nav-md .nav.side-menu > li > .dropdown > .dropdown-content a {
    padding-left: var(--pm-submenu-px) !important;
  }

  body#app-layout.nav-md .nav.side-menu > li > .dropdown > a .dropdown-right-icon {
    transition: transform 220ms ease;
  }

  body#app-layout.nav-md .nav.side-menu > li > .dropdown.pm-open > a .dropdown-right-icon {
    transform: rotate(90deg);
  }
}

/* Sidebar interaction styles → public/css/pm-sidebar.css */
/* ----- DataTables spacing (all list pages) ----- */
body#app-layout .x_panel .dataTables_wrapper .top,
body#app-layout .x_panel .dataTables_wrapper .dt-layout-row:first-child,
body#app-layout .x_panel .dataTables_wrapper .bottom,
body#app-layout .x_panel .dataTables_wrapper .dt-layout-row:last-child {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* No-data icon bigger */
body#app-layout .right_col img[src*='No-Data'],
body#app-layout p img[src*='No-Data'] {
  max-width: 240px !important;
}

/* Report pages: GO + VIEW CHART same line, Total below */
body#app-layout .right_col.servi .upperform .text-lg-end {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  justify-content: flex-end;
}

body#app-layout .right_col.servi .upperform .text-end.mt-3 {
  margin-top: 10px !important;
  text-align: right !important;
}

/* Service add page: form spacing */
body#app-layout .right_col:has(#ServiceAdd-Form) .x_panel.AddSeviceDescription .x_content {
  padding: 26px 30px 34px !important;
}

body#app-layout .right_col:has(#ServiceAdd-Form) #ServiceAdd-Form {
  padding: 14px 16px 24px !important;
}

@media (max-width: 991px) {
  body#app-layout .right_col:has(#ServiceAdd-Form) .x_panel.AddSeviceDescription .x_content {
    padding: 18px 16px 22px !important;
  }

  body#app-layout .right_col:has(#ServiceAdd-Form) #ServiceAdd-Form {
    padding: 10px 8px 16px !important;
  }

  body#app-layout .x_content form.form-horizontal,
  body#app-layout .x_content form.upperform,
  body#app-layout .x_content form.form-label-left {
    padding: 8px 6px 4px !important;
  }

  body#app-layout .x_content:has(.dataTables_wrapper),
  body#app-layout .x_content:has(.table-responsive),
  body#app-layout .x_content:has(table.jambo_table) {
    padding: 14px 12px !important;
  }

  body#app-layout .dataTables_wrapper > .dataTables_length {
    padding: 12px 8px 8px 14px !important;
  }

  body#app-layout .dataTables_wrapper > .dataTables_filter {
    padding: 12px 14px 8px 8px !important;
  }

  body#app-layout .dataTables_wrapper > .dataTables_info {
    padding: 10px 8px 12px 14px !important;
  }

  body#app-layout .dataTables_wrapper > .dataTables_paginate {
    padding: 10px 14px 12px 8px !important;
  }

  body#app-layout .dataTables_wrapper .top,
  body#app-layout .dataTables_wrapper .bottom,
  body#app-layout .dataTables_wrapper .dt-layout-row:first-child,
  body#app-layout .dataTables_wrapper .dt-layout-row:last-child {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body#app-layout .x_panel:has(.dataTables_wrapper) #select-all-btn,
  body#app-layout .x_panel:has(.dataTables_wrapper) #delete-selected-btn,
  body#app-layout .x_panel:has(table.dataTable) #select-all-btn,
  body#app-layout .x_panel:has(table.dataTable) #delete-selected-btn,
  body#app-layout .x_panel:has(.dataTables_wrapper) .select_all {
    margin: 0 !important;
  }
}

/* Customer/Vehicle view header polish */
body#app-layout .view_page_header_bg .user-name,
body#app-layout .view_page_header_bg .nav_text.h5 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

body#app-layout .view_page_header_bg .nav_text.mt-2 .d-lg-inline {
  display: inline-flex !important;
  align-items: center;
  margin-right: 18px;
  gap: 6px;
}

body#app-layout .view_page_header_bg .heading_view {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 12px !important;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  width: fit-content !important;
  max-width: 100%;
}

/* Action buttons/icons alignment in tables */
body#app-layout table td:last-child {
  white-space: nowrap;
}

body#app-layout table td:last-child .btn,
body#app-layout table td:last-child a.btn,
body#app-layout table td:last-child form {
  display: inline-flex !important;
  align-items: center;
  margin: 0 4px 0 0 !important;
  vertical-align: middle;
}

/* Generic overflow guardrails */
body#app-layout .x_panel,
body#app-layout .x_content,
body#app-layout .right_col [class*='col-'] {
  min-width: 0;
}

/* Back arrow spacing in page headers */
body#app-layout .back-arrow {
  margin-right: 14px !important;
  vertical-align: middle;
}

body#app-layout a:has(> .back-arrow) + .titleup,
body#app-layout a:has(> img.back-arrow) .titleup,
body#app-layout .titleup:has(> img.back-arrow) {
  margin-left: 0 !important;
}

/* Hide legacy circled plus icons in list page titles */
body#app-layout .page-title .addbotton {
  display: none !important;
}

/* Formal "Add [Entity]" button in table toolbar */
body#app-layout .pm-add-entity-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 20px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: var(--pm-r-full) !important;
  background: var(--pm-orange) !important;
  color: var(--pm-text-inv) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 150ms ease;
  flex-shrink: 0;
}

body#app-layout .pm-add-entity-btn:hover,
body#app-layout .pm-add-entity-btn:focus,
body#app-layout .pm-add-entity-btn:active {
  background: var(--pm-orange-hover) !important;
  border-color: var(--pm-orange-hover) !important;
  color: var(--pm-text-inv) !important;
  text-decoration: none !important;
}

body#app-layout .dataTables_filter.pm-dt-filter-with-add {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

body#app-layout .dataTables_filter.pm-dt-filter-with-add label {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  gap: 8px;
}

/* Unified table toolbar row (top) — spacing owned by pm-datagrid.css */
body#app-layout .pm-dt-toolbar {
  display: grid !important;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

body#app-layout .pm-dt-toolbar-left,
body#app-layout .pm-dt-toolbar-right {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pm-dg-toolbar-gap, 16px);
}

body#app-layout .pm-dt-toolbar-left {
  justify-content: flex-start;
}

body#app-layout .pm-dt-toolbar-right {
  justify-content: flex-end;
  gap: var(--pm-dg-actions-gap, 16px);
  align-items: center !important;
}

body#app-layout .pm-dt-toolbar .dataTables_length,
body#app-layout .pm-dt-toolbar .dataTables_filter,
body#app-layout .pm-dt-toolbar .dt-length,
body#app-layout .pm-dt-toolbar .dt-search {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body#app-layout .pm-dt-toolbar .dataTables_filter,
body#app-layout .pm-dt-toolbar .dt-search {
  text-align: right !important;
}

body#app-layout .pm-dt-toolbar .dataTables_length label,
body#app-layout .pm-dt-toolbar .dataTables_filter label,
body#app-layout .pm-dt-toolbar .dt-length label,
body#app-layout .pm-dt-toolbar .dt-search label {
  margin: 0 !important;
}

body#app-layout .pm-dt-toolbar .pm-add-entity-btn {
  margin-left: 0 !important;
}

/* Unified table footer row (bottom) */
body#app-layout .pm-dt-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 12px var(--pm-dg-inset-x, 28px) 14px !important;
  background: var(--bg-elevated-2) !important;
  border-top: 1px solid var(--pm-border) !important;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

body#app-layout .pm-dt-footer-left,
body#app-layout .pm-dt-footer-center,
body#app-layout .pm-dt-footer-right {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

body#app-layout .pm-dt-footer-left {
  flex: 0 0 auto;
  justify-content: flex-start;
}

body#app-layout .pm-dt-footer-center {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
}

body#app-layout .pm-dt-footer-right {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: auto;
}

body#app-layout .pm-dt-footer .dataTables_info,
body#app-layout .pm-dt-footer .dt-info {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body#app-layout .pm-dt-footer .dataTables_paginate,
body#app-layout .pm-dt-footer .dt-paging {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: right !important;
}

body#app-layout .pm-dt-footer #select-all-btn.select_all {
  margin: 0 !important;
  min-height: 38px;
  padding: 0 14px !important;
}

body#app-layout #delete-selected-btn.pm-dt-delete-selected {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 32px !important;
  height: 32px !important;
  width: auto !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  padding: 0 12px !important;
  border-radius: var(--pm-r-full) !important;
  background: var(--bg-elevated-2) !important;
  border: 1px solid rgba(220, 38, 38, 0.28) !important;
  color: var(--pm-red) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  box-shadow: none !important;
}

body#app-layout #delete-selected-btn.pm-dt-delete-selected.is-visible {
  display: inline-flex !important;
}

body#app-layout #delete-selected-btn.pm-dt-delete-selected:disabled,
body#app-layout #delete-selected-btn.pm-dt-delete-selected.is-disabled {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

body#app-layout #delete-selected-btn.pm-dt-delete-selected:hover:not(:disabled):not(.is-disabled) {
  background: var(--pm-red-bg) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  color: var(--pm-red) !important;
}

body#app-layout #delete-selected-btn.pm-dt-delete-selected .pm-dt-delete-label {
  line-height: 1.2;
}

body#app-layout .pm-dt-toolbar #select-all-btn.select_all {
  display: none !important;
}

@media (max-width: 767px) {
  body#app-layout .pm-dt-toolbar-right,
  body#app-layout .pm-dt-footer-center,
  body#app-layout .pm-dt-footer-right {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  body#app-layout .pm-dt-toolbar .dataTables_filter input {
    width: 100% !important;
    min-width: 0;
  }
}

/* Pages without DataTables: padded toolbar strip for standalone add buttons */
body#app-layout .x_panel > .pm-add-entity-btn:not([data-pm-placed]),
body#app-layout .table_up_div > .pm-add-entity-btn:not([data-pm-placed]) {
  float: none !important;
  display: inline-flex !important;
  margin: var(--pm-dg-inset-y, 24px) var(--pm-dg-inset-x, 28px) 0 auto !important;
}

/* List page empty state (no table data) */
body#app-layout .pm-list-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 64px;
  margin: 0 auto;
  max-width: 480px;
}

body#app-layout .pm-list-empty-state__image {
  width: 300px;
  max-width: 100%;
  height: auto;
  margin-bottom: 8px;
}

body#app-layout .pm-list-empty-state__heading {
  margin: 20px 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--pm-text-1);
  line-height: 1.3;
}

body#app-layout .pm-list-empty-state__description {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--pm-text-2);
  max-width: 360px;
}

body#app-layout .pm-list-empty-state__button.pm-add-entity-btn {
  margin: 0 !important;
  min-width: 160px;
}

/* LOCAL PATCH: observation tables === */
/* Jobcard / quotation editable observation + service charge tables
   Global table { max-width:100% + table-layout:fixed } collapses these grids. */
body#app-layout .panel-body.main_data.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
  max-width: 100% !important;
}

body#app-layout #observation_header_table,
body#app-layout #service_charge_table {
  table-layout: auto !important;
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}

body#app-layout #observation_header_table thead th,
body#app-layout #service_charge_table thead th {
  white-space: nowrap !important;
  letter-spacing: 0.02em;
  word-break: normal !important;
}

body#app-layout #observation_header_table tbody td,
body#app-layout #service_charge_table tbody td {
  width: auto !important;
  min-width: 70px !important;
  max-width: none !important;
  overflow: visible !important;
}

body#app-layout #observation_header_table th:nth-child(1),
body#app-layout #observation_header_table td:nth-child(1) { min-width: 110px !important; }
body#app-layout #observation_header_table th:nth-child(2),
body#app-layout #observation_header_table td:nth-child(2) { min-width: 140px !important; }
body#app-layout #observation_header_table th:nth-child(3),
body#app-layout #observation_header_table td:nth-child(3) { min-width: 180px !important; }
body#app-layout #observation_header_table th:nth-child(4),
body#app-layout #observation_header_table td:nth-child(4) { min-width: 90px !important; }
body#app-layout #observation_header_table th:nth-child(5),
body#app-layout #observation_header_table td:nth-child(5) { min-width: 70px !important; }
body#app-layout #observation_header_table th:nth-child(6),
body#app-layout #observation_header_table td:nth-child(6) { min-width: 100px !important; }
body#app-layout #observation_header_table th:nth-child(7),
body#app-layout #observation_header_table td:nth-child(7) { min-width: 160px !important; }
body#app-layout #observation_header_table th:nth-child(8),
body#app-layout #observation_header_table td:nth-child(8) { min-width: 100px !important; }
body#app-layout #observation_header_table th:nth-child(9),
body#app-layout #observation_header_table td:nth-child(9) { min-width: 100px !important; }
body#app-layout #observation_header_table th:nth-child(10),
body#app-layout #observation_header_table td:nth-child(10) { min-width: 140px !important; }
body#app-layout #observation_header_table th:nth-child(11),
body#app-layout #observation_header_table td:nth-child(11) { min-width: 70px !important; }

body#app-layout #service_charge_table th:nth-child(1),
body#app-layout #service_charge_table td:nth-child(1) { min-width: 160px !important; }
body#app-layout #service_charge_table th:nth-child(2),
body#app-layout #service_charge_table td:nth-child(2) { min-width: 120px !important; }
body#app-layout #service_charge_table th:nth-child(3),
body#app-layout #service_charge_table td:nth-child(3) { min-width: 70px !important; }
body#app-layout #service_charge_table th:nth-child(4),
body#app-layout #service_charge_table td:nth-child(4) { min-width: 100px !important; }
body#app-layout #service_charge_table th:nth-child(5),
body#app-layout #service_charge_table td:nth-child(5) { min-width: 160px !important; }
body#app-layout #service_charge_table th:nth-child(6),
body#app-layout #service_charge_table td:nth-child(6) { min-width: 100px !important; }
body#app-layout #service_charge_table th:nth-child(7),
body#app-layout #service_charge_table td:nth-child(7) { min-width: 70px !important; }

body#app-layout #observation_header_table .form-control,
body#app-layout #observation_header_table .select2-container,
body#app-layout #service_charge_table .form-control,
body#app-layout #service_charge_table .select2-container {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body#app-layout #observation_header_table textarea.form-control {
  min-height: 64px !important;
  height: auto !important;
  white-space: normal !important;
}

/* ==========================================================================
   Modal scrolling (global) — long modals must scroll to show full content
   Strategy: scroll the .modal shell (Bootstrap default). Do NOT clip
   .modal-content with overflow:hidden + max-height — AJAX modals wrap
   header/body in extra divs, so inner .modal-body never gets a height
   constraint and content is cut off with no scrollbar.
   ========================================================================== */

/* Shell is the scroll container */
body#app-layout.modal-open .modal,
body#app-layout.modal-open .modal.show,
body#app-layout .modal.show {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  pointer-events: auto !important;
}

body#app-layout.modal-open .modal .modal-dialog,
body#app-layout.modal-open .modal .modal-content,
body#app-layout.modal-open .modal .modal-body,
body#app-layout.modal-open .modal .modal_data,
body#app-layout.modal-open .modal .modal-body-data,
body#app-layout.modal-open .modal .modal-data,
body#app-layout.modal-open .modal .used_coupn_modal_data {
  pointer-events: auto !important;
}

body#app-layout .modal.show .select2-container--open,
body#app-layout .modal.show .select2-dropdown {
  z-index: 10060 !important;
}

body#app-layout .modal.show {
  filter: none !important;
}

/* Dialog grows with content; shell scrolls */
body#app-layout .modal-dialog {
  max-height: none !important;
  height: auto !important;
  margin: 1.75rem auto !important;
  display: block !important;
  pointer-events: none; /* Bootstrap: clicks pass through gutters */
}

body#app-layout .modal-dialog .modal-content,
body#app-layout .modal-content {
  pointer-events: auto !important;
  width: 100%;
  max-height: none !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
}

/* Shared chrome (also declared earlier — keep overflow visible) */
body#app-layout .modal-content,
body#app-layout .modal_data,
body#app-layout .modal-body-data,
body#app-layout .modal-data,
body#app-layout .used_coupn_modal_data {
  border-radius: var(--pm-r-xl) !important;
  border: 1px solid var(--pm-border) !important;
  box-shadow: var(--pm-shadow-lg) !important;
  max-height: none !important;
  overflow: visible !important;
}

body#app-layout .modal-header,
body#app-layout .modal-footer {
  flex-shrink: 0;
}

body#app-layout .modal-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--pm-border) !important;
  background: var(--pm-surface) !important;
}

body#app-layout .modal-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--pm-navy) !important;
}

body#app-layout .modal-body {
  padding: 24px !important;
  max-height: none !important;
  overflow: visible !important;
}

/*
  Bootstrap's modal-dialog-scrollable also clips when AJAX replaces the
  whole .modal-content. Force the same shell-scroll behavior everywhere.
*/
body#app-layout .modal-dialog.modal-dialog-scrollable {
  max-height: none !important;
  height: auto !important;
  display: block !important;
  margin: 1.75rem auto !important;
}

body#app-layout .modal-dialog.modal-dialog-scrollable .modal-content,
body#app-layout .modal-dialog.modal-dialog-scrollable .modal-body {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  display: block !important;
}

/* AJAX shells that dump HTML into .modal-content (quotation, product, sales, etc.)
   — never clip; parent .modal scrolls */
body#app-layout .modal-content.modal-body-data,
body#app-layout .modal-content.modal_data,
body#app-layout .modal-content.modal-data,
body#app-layout .modal-content.used_coupn_modal_data {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  display: block !important;
}

/* Create Invoice modal — Zoho-style stacked 2-col form */
body#app-layout #myModal1 .modal-body .x_content,
body#app-layout #myModal1 .modal-body-data .x_content,
body#app-layout #myModal1 form.pm-invoice-modal-form,
body#app-layout #myModal1 form.upperform {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  padding: 4px 4px 8px !important;
  margin: 0 !important;
}

body#app-layout #myModal1 .pm-invoice-modal-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--pm-border, #e8eaf0) !important;
  float: none !important;
}

body#app-layout #myModal1 .pm-invoice-modal-section h4 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--pm-navy, #1B2B5E) !important;
}

body#app-layout #myModal1 #form_fields {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
}

body#app-layout #myModal1 #form_fields > .row,
body#app-layout #myModal1 #form_fields > .row.row-mb-0,
body#app-layout #myModal1 #form_fields > .row.mt-3 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  row-gap: 18px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  float: none !important;
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}

body#app-layout #myModal1 #form_fields > .row > input[type='hidden'] {
  display: none !important;
}

body#app-layout #myModal1 #form_fields > .row > .row[class*='col-'],
body#app-layout #myModal1 #form_fields > .row > [class*='col-md-6'],
body#app-layout #myModal1 .modal-body .row.col-md-6,
body#app-layout #myModal1 .modal-body .row.col-lg-6,
body#app-layout #myModal1 .modal-body .row.col-sm-6,
body#app-layout #myModal1 .modal-body .row.col-xs-6 {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-self: start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}

body#app-layout #myModal1 #form_fields > .row > .row[class*='col-']:empty {
  display: none !important;
}

body#app-layout #myModal1 #form_fields label.control-label,
body#app-layout #myModal1 .modal-body label.control-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  float: none !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--pm-text-1, #111827) !important;
  position: static !important;
}

body#app-layout #myModal1 #form_fields > .row > .row[class*='col-'] > [class*='col-'],
body#app-layout #myModal1 #form_fields > .row > .row[class*='col-'] > .date,
body#app-layout #myModal1 #form_fields > .row > .row[class*='col-'] > .select-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  min-width: 0 !important;
}

body#app-layout #myModal1 .modal-body .form-control,
body#app-layout #myModal1 .modal-body .form-select,
body#app-layout #myModal1 .modal-body select,
body#app-layout #myModal1 .modal-body textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body#app-layout #myModal1 .modal-body .select-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  position: relative;
}

body#app-layout #myModal1 .modal-body .select-wrapper .arrow-icon {
  display: none !important;
}

body#app-layout #myModal1 .modal-body textarea.form-control {
  min-height: 72px !important;
  height: auto !important;
  resize: vertical;
}

body#app-layout #myModal1 .pm-invoice-modal-actions {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid var(--pm-border, #e8eaf0);
}

body#app-layout #myModal1 .pm-invoice-modal-actions .btn {
  min-width: 140px;
  min-height: 44px;
  margin: 0 !important;
}

@media (max-width: 767.98px) {
  body#app-layout .modal-dialog {
    margin: 0.75rem auto !important;
    max-width: calc(100vw - 1rem) !important;
  }

  body#app-layout .modal-body {
    padding: 16px !important;
  }

  body#app-layout #myModal1 #form_fields > .row,
  body#app-layout #myModal1 #form_fields > .row.row-mb-0,
  body#app-layout #myModal1 #form_fields > .row.mt-3 {
    grid-template-columns: 1fr !important;
  }
}