/* ============================================================
   UI REVAMP — Animations, Hover Effects, Breadcrumbs, Themes
   Phoenix Aftersales Platform
   ============================================================ */

/* ----- CSS Custom Properties for Theme Enhancement ----- */
:root {
  /* Animation tokens */
  --animate-duration: 0.5s;
  --animate-stagger: 0.08s;
  --hover-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Glassmorphism & Surface tokens */
  --surface-blur: 0px;
  --surface-opacity: 1;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);
  --card-border-color: rgba(0, 0, 0, 0.08);

  /* Breadcrumb tokens */
  --breadcrumb-bg: rgba(248, 249, 252, 0.85);
  --breadcrumb-text: #6b7280;
  --breadcrumb-active: var(--bs-primary, #3874ff);
  --breadcrumb-separator: #6b7280;
  --breadcrumb-hover: #1f2937;
  --breadcrumb-border: rgba(0, 0, 0, 0.06);

  /* Accent glow */
  --btn-glow: rgba(56, 116, 255, 0.3);
  --row-highlight: rgba(56, 116, 255, 0.06);
  --sidebar-hover-bg: rgba(56, 116, 255, 0.06);
}

[data-bs-theme="dark"] {
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --card-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  --card-border-color: rgba(255, 255, 255, 0.08);
  --surface-blur: 12px;
  --surface-opacity: 0.92;

  --breadcrumb-bg: rgba(30, 33, 42, 0.85);
  --breadcrumb-text: #9ca3af;
  --breadcrumb-active: #60a5fa;
  --breadcrumb-separator: #4b5563;
  --breadcrumb-hover: #f3f4f6;
  --breadcrumb-border: rgba(255, 255, 255, 0.06);

  --btn-glow: rgba(96, 165, 250, 0.35);
  --row-highlight: rgba(96, 165, 250, 0.08);
  --sidebar-hover-bg: rgba(96, 165, 250, 0.08);
}


/* ===========================================================
   1. SMOOTH THEME TRANSITION
   =========================================================== */

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    fill 0.35s ease,
    stroke 0.35s ease !important;
}


/* ===========================================================
   2. PAGE ENTRANCE ANIMATIONS
   =========================================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Main content area entrance removed to avoid modal z-index stacking context issues */
.content.page-animate {
  animation: fadeInUp var(--animate-duration) ease-out backwards;
}

/* Staggered card entrance */
.content.page-animate > div > .card,
.content.page-animate > .card,
.content.page-animate > div > div > .card {
  animation: fadeInUp 0.45s ease-out both;
}

.content.page-animate > div > .card:nth-child(1),
.content.page-animate > .card:nth-child(1),
.content.page-animate > div > div > .card:nth-child(1) {
  animation-delay: 0.05s;
}

.content.page-animate > div > .card:nth-child(2),
.content.page-animate > .card:nth-child(2),
.content.page-animate > div > div > .card:nth-child(2) {
  animation-delay: 0.12s;
}

.content.page-animate > div > .card:nth-child(3),
.content.page-animate > .card:nth-child(3),
.content.page-animate > div > div > .card:nth-child(3) {
  animation-delay: 0.19s;
}

.content.page-animate > div > .card:nth-child(4),
.content.page-animate > .card:nth-child(4),
.content.page-animate > div > div > .card:nth-child(4) {
  animation-delay: 0.26s;
}

.content.page-animate > div > .card:nth-child(n+5),
.content.page-animate > .card:nth-child(n+5),
.content.page-animate > div > div > .card:nth-child(n+5) {
  animation-delay: 0.32s;
}

/* Row stagger animation for tables */
@keyframes tableRowIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.content.page-animate table tbody tr {
  animation: tableRowIn 0.3s ease-out both;
}

.content.page-animate table tbody tr:nth-child(1) { animation-delay: 0.1s; }
.content.page-animate table tbody tr:nth-child(2) { animation-delay: 0.14s; }
.content.page-animate table tbody tr:nth-child(3) { animation-delay: 0.18s; }
.content.page-animate table tbody tr:nth-child(4) { animation-delay: 0.22s; }
.content.page-animate table tbody tr:nth-child(5) { animation-delay: 0.26s; }
.content.page-animate table tbody tr:nth-child(n+6) { animation-delay: 0.3s; }


/* ===========================================================
   3. CARD HOVER EFFECTS
   =========================================================== */

.card {
  transition:
    transform var(--hover-transition),
    box-shadow var(--hover-transition),
    border-color var(--hover-transition);
}

/* Only elevate standalone cards (not nested or modal cards) */
.content > div > .card:hover,
.content > .card:hover,
.content > div > div > .card:hover,
.content > div > .row > div > .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

/* Dark mode glassmorphism for cards */
[data-bs-theme="dark"] .card {
  backdrop-filter: blur(var(--surface-blur));
  -webkit-backdrop-filter: blur(var(--surface-blur));
  border-color: var(--card-border-color);
}


/* ===========================================================
   4. TABLE ROW HOVER EFFECTS
   =========================================================== */

.table:not(.table-bordered) tbody tr {
  transition:
    background-color var(--hover-transition),
    box-shadow var(--hover-transition),
    border-left-color var(--hover-transition);
}

.table:not(.table-bordered) tbody tr:hover {
  background-color: var(--row-highlight) !important;
  border-left-color: var(--bs-primary, #3874ff);
  box-shadow: inset 0 0 0 0 transparent, 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Status badges inside table rows animate on row hover */
.table tbody tr:hover .badge {
  transform: scale(1.05);
}


/* ===========================================================
   5. BUTTON HOVER EFFECTS
   =========================================================== */

.btn {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover {
  box-shadow: 0 4px 14px var(--btn-glow);
}

/* Subtle button pulse animation for CTAs */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--btn-glow); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

.btn-primary.btn-pulse {
  animation: subtlePulse 2s infinite;
}


/* ===========================================================
   6. NAVIGATION & SIDEBAR HOVER EFFECTS
   =========================================================== */

/* Sidebar nav items */
.navbar-vertical .nav-link {
  transition:
    background-color var(--hover-transition),
    color var(--hover-transition),
    padding-left var(--hover-transition);
  position: relative;
}

.navbar-vertical .nav-link:hover {
  background-color: var(--sidebar-hover-bg);
}

/* Icon wiggle on sidebar hover */
@keyframes iconWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.navbar-vertical .nav-link:hover .nav-link-icon {
  animation: iconWiggle 0.4s ease-in-out;
}

/* Active sidebar item accent bar */
.navbar-vertical .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--bs-primary, #3874ff);
  animation: slideInLeft 0.3s ease-out;
}

/* In expanded mode, top-level single menu items have 0.75rem padding-left like parent menus */
html:not(.navbar-vertical-collapsed) .navbar-vertical .navbar-vertical-content .navbar-nav > .nav-item > .nav-item-wrapper > a.nav-link:not(.dropdown-indicator),
html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xxl .navbar-vertical-content .navbar-nav > .nav-item > .nav-item-wrapper > a.nav-link:not(.dropdown-indicator) {
  padding-left: 0.75rem !important;
  margin-left: 0 !important;
}

/* Nav link text underline slide */
.nav-links .nav-link,
.navbar-nav .nav-link {
  position: relative;
}

.nav-links .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--bs-primary, #3874ff);
  transition: width 0.3s ease, left 0.3s ease;
  border-radius: 1px;
}

.nav-links .nav-link:hover::after,
.nav-links .nav-link.active::after {
  width: 100%;
  left: 0;
}


/* ===========================================================
   7. BADGE HOVER EFFECTS
   =========================================================== */

.badge {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.badge:hover {
  transform: scale(1.08);
}


/* ===========================================================
   8. FORM INPUT & SELECT NAIVE UI STYLE REVAMP
   =========================================================== */

:root {
  --n-bezier: cubic-bezier(.4, 0, .2, 1);
  --n-border-color-default: var(--phoenix-border-color, rgb(226, 230, 233));
  --n-border-hover: var(--bs-primary, #3874ff);
  --n-border-focus: var(--bs-primary, #3874ff);
  --n-box-shadow-focus: 0 0 0 3px rgba(var(--bs-primary-rgb, 56, 116, 255), 0.2);
  --n-border-hover-error: var(--bs-danger, #ed2000);
  --n-border-focus-error: var(--bs-danger, #ed2000);
  --n-box-shadow-focus-error: 0 0 0 3px rgba(var(--bs-danger-rgb, 237, 32, 0), 0.2);
  --n-border-hover-warning: var(--bs-warning, #e5780b);
  --n-border-focus-warning: var(--bs-warning, #e5780b);
  --n-box-shadow-focus-warning: 0 0 0 3px rgba(var(--bs-warning-rgb, 229, 120, 11), 0.2);
}

[data-bs-theme="dark"] {
  --n-border-color-default: var(--phoenix-border-color, rgba(255, 255, 255, 0.15));
}

/* Base Form Input / Select / Textarea Styling */
.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
.form-control-lg,
.form-select-lg,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  border-color: var(--n-border-color-default) !important;
  border-radius: 8px !important;
  transition:
    border-color 0.25s var(--n-bezier),
    box-shadow 0.25s var(--n-bezier),
    background-color 0.25s var(--n-bezier) !important;
}

/* Hover State - Animated emerald/mint border change */
.form-control:not(:disabled):not([readonly]):hover,
.form-select:not(:disabled):hover,
input[type="text"]:not(:disabled):not([readonly]):hover,
input[type="email"]:not(:disabled):not([readonly]):hover,
input[type="password"]:not(:disabled):not([readonly]):hover,
input[type="number"]:not(:disabled):not([readonly]):hover,
input[type="search"]:not(:disabled):not([readonly]):hover,
input[type="tel"]:not(:disabled):not([readonly]):hover,
input[type="url"]:not(:disabled):not([readonly]):hover,
textarea:not(:disabled):not([readonly]):hover,
select:not(:disabled):hover {
  border-color: var(--n-border-hover) !important;
}

/* Focus & Active State - Emerald border + Soft glowing 3px shadow */
.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--n-border-focus) !important;
  box-shadow: var(--n-box-shadow-focus) !important;
  outline: none !important;
}

/* Error States */
.form-control.is-invalid:not(:disabled),
.form-select.is-invalid:not(:disabled),
.form-control.error:not(:disabled),
.form-select.error:not(:disabled) {
  border-color: var(--n-border-hover-error) !important;
}

.form-control.is-invalid:not(:disabled):hover,
.form-select.is-invalid:not(:disabled):hover,
.form-control.error:not(:disabled):hover,
.form-select.error:not(:disabled):hover {
  border-color: var(--n-border-hover-error) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.form-control.error:focus,
.form-select.error:focus {
  border-color: var(--n-border-focus-error) !important;
  box-shadow: var(--n-box-shadow-focus-error) !important;
}

/* Warning States */
.form-control.is-warning:not(:disabled),
.form-select.is-warning:not(:disabled),
.form-control.warning:not(:disabled),
.form-select.warning:not(:disabled) {
  border-color: var(--n-border-hover-warning) !important;
}

.form-control.is-warning:not(:disabled):hover,
.form-select.is-warning:not(:disabled):hover,
.form-control.warning:not(:disabled):hover,
.form-select.warning:not(:disabled):hover {
  border-color: var(--n-border-hover-warning) !important;
}

.form-control.is-warning:focus,
.form-select.is-warning:focus,
.form-control.warning:focus,
.form-select.warning:focus {
  border-color: var(--n-border-focus-warning) !important;
  box-shadow: var(--n-box-shadow-focus-warning) !important;
}

/* Disabled State */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly],
input:disabled,
textarea:disabled,
select:disabled {
  border-color: var(--n-border-color-default) !important;
  opacity: 0.75;
  cursor: not-allowed;
}

/* Input Group Corner & Border Seamless Alignment */
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-text:not(:first-child),
.input-group > .btn:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .visually-hidden + .form-control,
.input-group > .visually-hidden + .form-select,
.input-group > .visually-hidden + .input-group-text,
.input-group > .visually-hidden + .btn {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-text:not(:last-child),
.input-group > .btn:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .form-control:last-child,
.input-group > .form-select:last-child,
.input-group > .input-group-text:last-child,
.input-group > .btn:last-child {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

.input-group-text {
  border-color: var(--n-border-color-default) !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-text:not(:first-child),
.input-group > .btn:not(:first-child) {
  margin-left: -1px;
}

.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .btn:focus {
  z-index: 5 !important;
}


/* ===========================================================
   9. BREADCRUMB STYLES
   =========================================================== */

.app-breadcrumb {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem 0.6rem 1.5rem;
  animation: fadeIn 0.4s ease-out both;
  font-size: 0.835rem;
}

.app-breadcrumb-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.15rem;
}

.app-breadcrumb-item {
  display: flex;
  align-items: center;
  animation: slideInLeft 0.3s ease-out both;
}

.app-breadcrumb-item:nth-child(1) { animation-delay: 0.05s; }
.app-breadcrumb-item:nth-child(2) { animation-delay: 0.1s; }
.app-breadcrumb-item:nth-child(3) { animation-delay: 0.15s; }
.app-breadcrumb-item:nth-child(4) { animation-delay: 0.2s; }

.app-breadcrumb-item a {
  color: var(--breadcrumb-text);
  text-decoration: none;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  transition: color 0.2s ease, background-color 0.2s ease;
  font-weight: 500;
  display: inline-block;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.app-breadcrumb-item a:hover {
  color: var(--breadcrumb-hover);
  background-color: rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] .app-breadcrumb-item a:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.app-breadcrumb-item.active span {
  color: var(--breadcrumb-active);
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  display: inline-block;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Home icon */
.app-breadcrumb-home {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

.app-breadcrumb-home i {
  transition: transform 0.2s ease;
}

.app-breadcrumb-home:hover i {
  transform: scale(1.15);
}

/* Chevron separator */
.app-breadcrumb-separator {
  color: var(--breadcrumb-separator);
  margin: 0 0.15rem;
  font-size: 0.7rem;
  opacity: 0.7;
}


/* ===========================================================
   10. SPINNER / LOADING ANIMATION ENHANCEMENT
   =========================================================== */

@keyframes spinnerGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb, 56, 116, 255), 0.3); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

.spinner-border {
  animation: spinner-border 0.65s linear infinite, spinnerGlow 1.5s ease-in-out infinite;
}


/* ===========================================================
   11. MODAL ENTRANCE ANIMATION
   =========================================================== */

.modal.show .modal-dialog {
  animation: scaleIn 0.3s ease-out;
}


/* ===========================================================
   12. DROPDOWN ANIMATION
   =========================================================== */

.dropdown-menu {
  animation: none;
}

.dropdown-menu.show {
  animation: fadeIn 0.15s ease-out;
}


/* ===========================================================
   13. ALERT ANIMATION
   =========================================================== */

.alert {
  animation: fadeInUp 0.35s ease-out;
}


/* ===========================================================
   15. TOOLTIP ANIMATION
   =========================================================== */

.tooltip {
  animation: fadeIn 0.15s ease-out;
}


/* ===========================================================
   16. EMPTY STATE ANIMATION
   =========================================================== */

@keyframes floatIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.text-center .fa-3x,
.text-center .fa-2x {
  animation: floatIdle 3s ease-in-out infinite;
}


/* ===========================================================
   17. PAGINATION HOVER
   =========================================================== */

.pagination .page-link {
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.pagination .page-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pagination .page-item.active .page-link {
  box-shadow: 0 2px 8px var(--btn-glow);
}


/* ===========================================================
   18. SEARCH BOX ENHANCEMENT
   =========================================================== */

.search-box .search-input {
  transition:
    width 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.search-box .search-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 56, 116, 255), 0.12);
}


/* ===========================================================
   19. CARD HEADER ENHANCEMENTS
   =========================================================== */

.card-header {
  transition: background-color var(--hover-transition);
}

.card-header h4,
.card-header h5 {
  position: relative;
}


/* ===========================================================
   20. RESPONSIVE ADJUSTMENTS
   =========================================================== */

/* Reduce animation intensity on mobile for performance */
@media (max-width: 768px) {
  .content.page-animate {
    animation-duration: 0.3s;
  }

  .content.page-animate > div > .card,
  .content.page-animate > .card,
  .content.page-animate > div > div > .card {
    animation-duration: 0.25s;
  }

  .content.page-animate table tbody tr {
    animation: none;
  }

  .app-breadcrumb {
    font-size: 0.78rem;
    padding: 0.45rem 0.75rem;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   SIDEBAR CUSTOMIZATIONS
   ============================================================ */
/* Sidebar Tree Line for sub-menus */
.navbar-vertical .parent-wrapper > .nav {
  position: relative;
  margin-left: 1.5rem;
  padding-left: 0;
  padding-bottom: 0.5rem;
}

/* Vertical line */
.navbar-vertical .parent-wrapper > .nav::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0.5rem;
  left: 0;
  width: 2px;
  background-color: var(--phoenix-border-color);
  border-radius: 2px;
  opacity: 0.6;
}

/* Horizontal line for each item */
.navbar-vertical .parent-wrapper > .nav > .nav-item {
  position: relative;
}

.navbar-vertical .parent-wrapper > .nav > .nav-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 2px;
  background-color: var(--phoenix-border-color);
  border-radius: 2px;
  transform: translateY(-50%);
  opacity: 0.6;
}

.navbar-vertical .parent-wrapper > .nav > .nav-item > .nav-link {
  padding-left: 0px !important;
  margin-left: 12px;
}

/* Active Submenu Item styling */
.navbar-vertical .parent-wrapper > .nav > .nav-item > .nav-link.active {
  background-color: color-mix(in srgb, var(--bs-primary) 12%, transparent) !important;
  border-radius: 0.5rem;
}

.navbar-vertical .parent-wrapper > .nav > .nav-item > .nav-link.active,
.navbar-vertical .parent-wrapper > .nav > .nav-item > .nav-link.active .nav-link-text {
  color: var(--bs-primary) !important;
  font-weight: 600 !important;
}

/* Color parent item when child is active */
.navbar-vertical .nav-item-wrapper:has(.nav-link.active) > a.nav-link,
.navbar-vertical .nav-item-wrapper:has(.nav-link.active) > a.nav-link .nav-link-text,
.navbar-vertical .nav-item-wrapper:has(.nav-link.active) > a.nav-link .nav-link-icon,
.navbar-vertical .nav-item-wrapper:has(.nav-link.active) > a.nav-link .dropdown-arrow {
  color: var(--bs-primary) !important;
}
.navbar-vertical .nav-item-wrapper:has(.nav-link.active) > a.nav-link .nav-link-text {
  font-weight: 600 !important;
}

/* Remove Phoenix's default active indicator (the black line on the left) */
.navbar-vertical .parent-wrapper > .nav > .nav-item > .nav-link.active::before,
.navbar-vertical .parent-wrapper > .nav > .nav-item > .nav-link.active::after {
  display: none !important;
}

/* Custom Sticky Header (Breadcrumb + Actions) */
.custom-page-header {
  top: 0rem; /* Phoenix default content padding top is usually 1.25rem, this pushes it to edge */
  z-index: 1020;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: color-mix(in srgb, var(--phoenix-body-bg, #ffffff) 80%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.2s ease;
  height: 64px;
}

/* On mobile, adjust margins */
@media (max-width: 991px) {
  .custom-page-header {
    /* Kept empty or small adjustments if necessary */
  }

  /* Fix sidebar covered by 80px sticky header on mobile */
  .navbar-vertical {
    top: 80px !important;
  }
}

@media (max-width: 768px) {
  #breadcrumb-app {
    display: none !important;
  }
}

/* Fix .content margin after removing navbar-top and keep sidebar fixed */
@media (min-width: 992px) {
  /* Custom sidebar width for expanded mode (300px) */
  html:not(.navbar-vertical-collapsed) {
    --phoenix-navbar-vertical-width: 300px !important;
  }
  html:not(.navbar-vertical-collapsed) .navbar-vertical,
  html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-lg,
  html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xl,
  html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xxl {
    width: 300px !important;
  }
  html:not(.navbar-vertical-collapsed) .navbar-vertical ~ .content {
    margin-left: 300px !important;
  }
  html:not(.navbar-vertical-collapsed) .navbar-vertical .navbar-vertical-footer {
    width: 300px !important;
  }

  html.navbar-vertical-collapsed .navbar-vertical ~ .content {
    margin-left: 4.125rem !important;
  }
  html.navbar-vertical-collapsed .navbar-vertical,
  html:not(.navbar-vertical-collapsed) .navbar-vertical {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 1020 !important;
  }

  /* Enable vertical scrolling in BOTH collapsed and expanded modes */
  html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content,
  html:not(.navbar-vertical-collapsed) .navbar-vertical .navbar-vertical-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 64px) !important;
    height: calc(100vh - 64px) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(150, 160, 175, 0.35) transparent !important;
  }

  /* Custom ultra-thin sleek scrollbar for sidebar (3px width) */
  .navbar-vertical .navbar-vertical-content::-webkit-scrollbar {
    width: 3px !important;
    height: 3px !important;
  }
  .navbar-vertical .navbar-vertical-content::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .navbar-vertical .navbar-vertical-content::-webkit-scrollbar-thumb {
    background-color: rgba(150, 160, 175, 0.35) !important;
    border-radius: 4px !important;
  }
  .navbar-vertical .navbar-vertical-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(150, 160, 175, 0.6) !important;
  }

  /* 1. In collapsed mode, use position: fixed left: 3.5rem ONLY for top-level hover popouts (direct children of navbar-nav > nav-item > nav-item-wrapper) */
  html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav > .nav-item > .nav-item-wrapper:hover > .parent-wrapper,
  html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav > .nav-item > .nav-item-wrapper:hover > .parent-wrapper.label-1,
  html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav > .nav-item > .nav-item-wrapper:hover > .nav-link-text-wrapper {
    position: fixed !important;
    left: 3.5rem !important;
    z-index: 1050 !important;
  }
  html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav > .nav-item > .nav-item-wrapper:hover > .parent-wrapper .nav.collapse,
  html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav > .nav-item > .nav-item-wrapper:hover > .parent-wrapper.label-1 > .parent,
  html.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .navbar-nav > .nav-item > .nav-item-wrapper:hover > .nav-link-text-wrapper .nav-link-text {
    margin-left: 0 !important;
  }

  /* 2. Ensure any nav-item-wrapper inside a popout card is position: relative so its nested flyout aligns relative to it */
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .nav-item-wrapper {
    position: relative !important;
  }

  /* 3. Hide nested parent-wrapper menus (Level 2, Level 3) by default in collapsed mode, and keep div wrapper transparent without borders/shadows */
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .parent-wrapper,
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper.label-1 .parent-wrapper.label-2,
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper.label-2 .parent-wrapper.label-3 {
    display: none !important;
    position: absolute !important;
    left: 100% !important;
    top: -0.5rem !important;
    margin-left: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: 1060 !important;
  }

  /* 4. When a menu item inside a popout card is hovered, open its nested flyout menu to the right */
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .nav-item-wrapper:hover > .parent-wrapper,
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper.label-1 .nav-item-wrapper:hover > .parent-wrapper.label-2,
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper.label-2 .nav-item-wrapper:hover > .parent-wrapper.label-3 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 5. Style the single inner ul.collapse card so exactly ONE card border/shadow is rendered */
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .parent-wrapper .nav.collapse,
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .parent-wrapper ul.nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 10px !important;
    padding: 0.5rem 0 !important;
    background: var(--phoenix-body-bg, #ffffff) !important;
    border: 1px solid var(--phoenix-border-color) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    min-width: 11rem !important;
    width: max-content !important;
  }

  /* 6. Add the little triangle arrow pointing back to the hovered parent item on the single card */
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .nav-item-wrapper:hover > .parent-wrapper .nav.collapse::before {
    content: "" !important;
    position: absolute !important;
    left: -6px !important;
    top: 1rem !important;
    width: 10px !important;
    height: 10px !important;
    background: var(--phoenix-body-bg, #ffffff) !important;
    border-left: 1px solid var(--phoenix-border-color) !important;
    border-bottom: 1px solid var(--phoenix-border-color) !important;
    transform: rotate(45deg) !important;
    z-index: 1 !important;
  }

  /* 7. Clean up links inside flyout cards so they look like neat dropdown menu items without accordion tick lines */
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .parent-wrapper .nav-link {
    border-left: none !important;
    padding: 0.45rem 1.25rem !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0.25rem !important;
  }

  /* 8. Remove accordion tick marks / border lines from parent items inside collapsed hover menus */
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .nav-item .nav-link::before,
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .nav-item .nav-link::after,
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .nav-link-text-wrapper::before,
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .nav-link-text-wrapper::after {
    display: none !important;
    content: none !important;
  }
  html.navbar-vertical-collapsed .navbar-vertical .parent-wrapper .nav-item .nav-link {
    border-left: none !important;
  }
}

.last-border-none:last-child {
  border-right: none !important;
}

.custom-navbar-pill {
  min-height: 40px;
}

/* Logo styling */
.sidebar-custom-header {
  height: 64px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  background: transparent;
}

.sidebar-custom-header .logo-text-span {
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  color: var(--bs-primary);
  font-weight: 800;
}

.sidebar-custom-header .navbar-vertical-toggle-btn {
  color: var(--phoenix-body-color);
  transition: color 0.2s;
  background: transparent;
  border: none;
}

.sidebar-custom-header .navbar-vertical-toggle-btn:hover {
  color: var(--bs-primary);
}

/* Hide custom header text when collapsed */
html.navbar-vertical-collapsed .sidebar-custom-header .logo-text-span,
html.navbar-vertical-collapsed .sidebar-custom-header .navbar-vertical-toggle-btn {
  display: none !important;
}

html.navbar-vertical-collapsed .sidebar-custom-header {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===========================================================
   9. NAVBAR LANGUAGE & THEME TOGGLES
   =========================================================== */
.navbar-dropdown-hover {
    position: relative;
}
.custom-dropdown-card-bg {
    background-color: var(--bs-card-bg, var(--phoenix-card-bg, #fff)) !important;
}
.navbar-dropdown-hover::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
    background: transparent;
    z-index: 1000;
}
.navbar-dropdown-hover:hover .dropdown-menu {
    display: block;
    position: absolute !important;
    top: 100%;
    right: 0;
    left: auto;
    margin-top: 0.5rem;
}
.navbar-dropdown-hover .dropdown-menu {
    position: absolute !important;
    transition: opacity 0.2s ease-in-out;
}
.theme-control-toggle-light, .theme-control-toggle-dark {
    background: transparent !important;
    box-shadow: none !important;
}
.theme-control-toggle-light:hover, .theme-control-toggle-dark:hover {
    background: transparent !important;
}

/* ===========================================================
   34. TABLE ROW BACKGROUND CONSISTENCY (NO ZEBRA STRIPING)
   =========================================================== */
.table:not(.table-striped) {
  --bs-table-striped-bg: transparent !important;
  --bs-table-accent-bg: transparent !important;
}
.table:not(.table-striped) tbody tr:nth-of-type(even) > td,
.table:not(.table-striped) tbody tr:nth-of-type(odd) > td,
.table:not(.table-striped) tbody tr:nth-of-type(even) > th,
.table:not(.table-striped) tbody tr:nth-of-type(odd) > th {
  background-color: transparent !important;
  --bs-table-accent-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  box-shadow: none !important;
}
.table tbody tr:hover > td,
.table tbody tr:hover > th {
  --bs-table-accent-bg: var(--bs-table-hover-bg) !important;
}

/* ===========================================================
   35. TABLE HEADER STYLING (ONE-LINE, DISTINCT BG COLOR)
   =========================================================== */
.table:not(.table-bordered) thead th {
  white-space: nowrap !important;
  background-color: #f8f9fa !important;
  color: var(--bs-body-color) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
}
[data-bs-theme="dark"] .table:not(.table-bordered) thead th {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

/* Active column header background highlight */
.table thead th.active-sort-th {
  background-color: #ebedf0 !important;
}
[data-bs-theme="dark"] .table thead th.active-sort-th {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Hover state on sortable headers */
.table thead th.cursor-pointer:hover {
  background-color: #eff2f6 !important;
}
[data-bs-theme="dark"] .table thead th.cursor-pointer:hover {
  background-color: rgba(255, 255, 255, 0.09) !important;
}

/* Clean icon sizing in headers */
.table thead th i.bi {
  font-size: 0.85em !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
}

/* Active column body cells background highlight */
.table tbody td.active-sort-td,
.table tbody th.active-sort-td,
.table tbody tr:nth-of-type(even) > td.active-sort-td,
.table tbody tr:nth-of-type(odd) > td.active-sort-td,
.table tbody tr:nth-of-type(even) > th.active-sort-td,
.table tbody tr:nth-of-type(odd) > th.active-sort-td {
  background-color: #f6f8fa !important;
}
[data-bs-theme="dark"] .table tbody td.active-sort-td,
[data-bs-theme="dark"] .table tbody th.active-sort-td,
[data-bs-theme="dark"] .table tbody tr:nth-of-type(even) > td.active-sort-td,
[data-bs-theme="dark"] .table tbody tr:nth-of-type(odd) > td.active-sort-td,
[data-bs-theme="dark"] .table tbody tr:nth-of-type(even) > th.active-sort-td,
[data-bs-theme="dark"] .table tbody tr:nth-of-type(odd) > th.active-sort-td {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ===========================================================
   36. OUTER TABLE BORDER WRAPPER (MODERN ANT DESIGN STYLE)
   =========================================================== */
.table:not(.table-bordered) {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--phoenix-table-border-color, var(--bs-border-color)) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

.table:not(.table-bordered) tbody tr:last-child td,
.table:not(.table-bordered) tbody tr:last-child th {
  border-bottom: none !important;
}

.table:not(.table-bordered) thead tr:first-child th {
  border-top: none !important;
}

.table:not(.table-bordered) th:first-child,
.table:not(.table-bordered) td:first-child {
  border-left: none !important;
}

.table:not(.table-bordered) th:last-child,
.table:not(.table-bordered) td:last-child {
  border-right: none !important;
}

/* ===========================================================
   37. FIX TABLE-BORDERED CELL BORDERS & WRAP
   =========================================================== */
.table-bordered {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid var(--phoenix-table-border-color, var(--bs-border-color)) !important;
}
.table-bordered tbody tr {
  border-left: none !important;
}
.table-bordered > :not(caption) > * > *,
.table-bordered th,
.table-bordered td {
  border: 1px solid var(--phoenix-table-border-color, var(--bs-border-color)) !important;
}
.table-bordered thead th {
  white-space: normal !important;
  background-color: #f8f9fa !important;
  color: var(--bs-body-color) !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
}
[data-bs-theme="dark"] .table-bordered thead th {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--bs-body-color) !important;
}

/* ===========================================================
   38. REPAIR ORDERS PAGE — Full Visual Overhaul
   =========================================================== */

/* ----- RO Design Tokens ----- */
:root {
  --ro-header-bg: rgba(255, 255, 255, 0.85);
  --ro-header-border: rgba(0, 0, 0, 0.06);
  --ro-header-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
  --ro-chip-bg: rgba(0, 0, 0, 0.04);
  --ro-chip-text: #4b5563;
  --ro-chip-icon: #9ca3af;
  --ro-section-bg: var(--phoenix-body-bg, #ffffff);
  --ro-section-border: var(--phoenix-border-color, rgba(0, 0, 0, 0.08));
  --ro-section-header-bg: rgba(0, 0, 0, 0.015);
  --ro-accent-customer: #3b82f6;
  --ro-accent-warranty: #10b981;
  --ro-accent-internal: #f59e0b;
  --ro-accent-declined: #9ca3af;
  --ro-accent-extended: #8b5cf6;
  --ro-summary-bg: rgba(0, 0, 0, 0.015);
  --ro-footer-bg: rgba(255, 255, 255, 0.92);
  --ro-footer-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04), 0 -4px 12px rgba(0, 0, 0, 0.03);
  --ro-info-card-bg: rgba(0, 0, 0, 0.015);
  --ro-info-card-border: rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] {
  --ro-header-bg: rgba(25, 28, 36, 0.88);
  --ro-header-border: rgba(255, 255, 255, 0.06);
  --ro-header-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.12);
  --ro-chip-bg: rgba(255, 255, 255, 0.06);
  --ro-chip-text: #9ca3af;
  --ro-chip-icon: #6b7280;
  --ro-section-header-bg: rgba(255, 255, 255, 0.02);
  --ro-summary-bg: rgba(255, 255, 255, 0.02);
  --ro-footer-bg: rgba(25, 28, 36, 0.92);
  --ro-footer-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15), 0 -4px 12px rgba(0, 0, 0, 0.12);
  --ro-info-card-bg: rgba(255, 255, 255, 0.03);
  --ro-info-card-border: rgba(255, 255, 255, 0.06);
}


/* ----- RO Sticky Header ----- */
.ro-header {
  background: var(--ro-header-bg) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--ro-header-border) !important;
  padding: 1rem 1.5rem !important;
  border-top-left-radius: var(--bs-card-inner-border-radius, calc(0.5rem - 1px)) !important;
  border-top-right-radius: var(--bs-card-inner-border-radius, calc(0.5rem - 1px)) !important;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.ro-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ro-header-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ro-header-title h4 {
  margin-bottom: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ----- RO Status Pill ----- */
.ro-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: all var(--hover-transition);
}

.ro-status-pill.status-estimate {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}
.ro-status-pill.status-in-progress,
.ro-status-pill.status-work-in-progress {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}
.ro-status-pill.status-completed {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}
.ro-status-pill.status-void {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.ro-status-pill.status-invoiced,
.ro-status-pill.status-payment-received {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}


/* ----- RO Metadata Chips ----- */
.ro-metadata-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.ro-metadata-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--ro-chip-bg);
  color: var(--ro-chip-text);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--hover-transition);
}

.ro-metadata-chip:hover {
  background: rgba(0, 0, 0, 0.07);
}

[data-bs-theme="dark"] .ro-metadata-chip:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ro-metadata-chip i,
.ro-metadata-chip .chip-icon {
  color: var(--ro-chip-icon);
  font-size: 0.7rem;
}

.ro-metadata-chip .chip-label {
  color: var(--ro-chip-icon);
}

.ro-metadata-chip .chip-value {
  color: var(--bs-body-color);
  font-weight: 600;
}


/* ----- RO Action Buttons ----- */
.ro-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ro-actions .btn {
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.4rem 0.85rem;
  transition: all var(--hover-transition);
}

.ro-actions .btn-primary {
  box-shadow: 0 1px 3px rgba(var(--phoenix-primary-rgb, 56, 116, 255), 0.25);
}

.ro-actions .btn-primary:hover {
  box-shadow: 0 4px 12px rgba(var(--phoenix-primary-rgb, 56, 116, 255), 0.35);
  transform: translateY(-1px);
}


/* ----- RO Status Bar (view mode) ----- */
.ro-status-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ro-header-border);
}

.ro-status-bar .form-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--ro-chip-text);
  margin-bottom: 0.35rem;
}


/* ----- RO Section Cards (Chargers, Invoices, Parts Orders) ----- */
.ro-section-card {
  border: 1px solid var(--ro-section-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
  margin: 1rem 1.5rem;
  transition: box-shadow 0.3s ease;
}

.ro-section-card:hover {
  box-shadow: var(--card-shadow-hover);
}

.ro-section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  background: var(--ro-section-header-bg);
  border-bottom: 1px solid var(--ro-section-border);
}

.ro-section-card-header h5 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ro-section-card-header .badge {
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-weight: 600;
}

.ro-section-card .table {
  margin-bottom: 0;
  border-width: 0px !important;
}

.ro-section-card .table thead th {
  background: transparent !important;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--ro-chip-text);
  border-bottom: 1px solid var(--ro-section-border);
  padding: 0.65rem 1rem;
}

.ro-section-card .table tbody td {
  padding: 0.65rem 1rem;
  font-size: 0.8125rem;
  vertical-align: middle;
}

.ro-section-card .table tbody tr {
  transition: background var(--hover-transition);
}

.ro-section-card .table tbody tr:hover {
  background: var(--row-highlight) !important;
}

.ro-section-card .table tfoot td,
.ro-section-card .table tfoot th {
  font-weight: 700;
  background: var(--ro-section-header-bg);
}


/* ----- RO Info Cards (Basic Info tab — Vehicle / Service sections) ----- */
.ro-info-card {
  background: var(--ro-info-card-bg);
  border: 1px solid var(--ro-info-card-border);
  border-radius: 12px;
  padding: 1.5rem;
  height: 100%;
}

.ro-info-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ro-info-card-border);
}

.ro-info-card-title i {
  font-size: 1.1rem;
  color: var(--bs-primary, #3874ff);
  opacity: 0.8;
}


/* ----- RO Line Item Rows (accent stripe by pay type) ----- */
.ro-line-item-row {
  border-left: 3px solid transparent;
  transition: all var(--hover-transition);
}

.ro-line-item-row:hover {
  background: var(--row-highlight) !important;
}

.ro-line-item-row.pay-customer {
  border-left-color: var(--ro-accent-customer);
}
.ro-line-item-row.pay-warranty {
  border-left-color: var(--ro-accent-warranty);
}
.ro-line-item-row.pay-internal {
  border-left-color: var(--ro-accent-internal);
}
.ro-line-item-row.pay-declined {
  border-left-color: var(--ro-accent-declined);
}
.ro-line-item-row.pay-extended-warranty {
  border-left-color: var(--ro-accent-extended);
}


/* ----- RO Summary Card ----- */
.ro-summary-card {
  background: var(--ro-summary-bg);
  border-radius: 10px;
  padding: 1rem;
  margin-top: 0.5rem;
}

.ro-summary-card .table {
  margin-bottom: 0;
}

.ro-summary-card .table th,
.ro-summary-card .table td {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
}

.ro-summary-card .table .grand-total-row {
  background: rgba(var(--phoenix-primary-rgb, 56, 116, 255), 0.06);
  font-weight: 700;
}

.ro-summary-card .table .grand-total-row th,
.ro-summary-card .table .grand-total-row td {
  color: var(--bs-primary, #3874ff);
}


/* ----- RO Sticky Footer ----- */
.ro-sticky-footer {
  background: var(--ro-footer-bg) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--ro-footer-shadow);
  border-top: 1px solid var(--ro-header-border) !important;
  padding: 0.625rem 1.5rem !important;
  transition: box-shadow 0.3s ease;
}

.ro-sticky-footer .btn {
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.375rem 1rem;
  transition: all var(--hover-transition);
}

.ro-sticky-footer .btn:hover {
  transform: translateY(-1px);
}


/* ----- RO Line Items Table (clean borderless style) ----- */
.ro-line-items-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.ro-line-items-table thead th {
  background: transparent !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
  color: var(--ro-chip-text) !important;
  border-bottom: 2px solid var(--ro-section-border) !important;
  border-top: none !important;
  padding: 0.65rem 0.75rem !important;
  white-space: nowrap !important;
}

.ro-line-items-table tbody td {
  padding: 0.65rem 0.75rem !important;
  font-size: 0.8125rem;
  vertical-align: middle !important;
  border-color: var(--ro-section-border) !important;
}

/* Concern/Cause/Correction info rows */
.ro-line-items-table .info-sub-row td {
  font-size: 0.78rem;
  color: var(--ro-chip-text);
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  background: var(--ro-info-card-bg);
}

.ro-line-items-table .info-sub-row td:first-child {
  font-weight: 600;
  color: var(--bs-body-color);
}

/* Expanded slide row */
.ro-line-items-table .slide-row td {
  background: var(--phoenix-card-bg, var(--phoenix-body-bg)) !important;
}

/* Group separator between line items */
.ro-line-items-table tbody + tbody {
  border-top: 3px solid var(--ro-section-border) !important;
}


/* ----- RO Expand/Collapse Animation ----- */
.ro-expand-enter-active,
.ro-expand-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.ro-expand-enter-from,
.ro-expand-leave-to {
  max-height: 0;
  opacity: 0;
}

.ro-expand-enter-to,
.ro-expand-leave-from {
  max-height: 2000px;
  opacity: 1;
}


/* ----- RO Tab Styling Enhancements ----- */
.ro-tabs-container {
  padding: 0.75rem 1.5rem !important;
  border-bottom: 1px solid var(--ro-section-border);
  background: var(--phoenix-card-bg);
}

.ro-tabs-container .nav-phoenix-pills .nav-link {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all var(--hover-transition);
}

.ro-tabs-container .nav-phoenix-pills .nav-link:not(.active):hover {
  background: var(--ro-chip-bg);
}

.ro-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: 0.4rem;
  background: rgba(var(--phoenix-primary-rgb, 56, 116, 255), 0.1);
  color: var(--bs-primary, #3874ff);
}

.nav-link.active .ro-tab-badge {
  background: rgba(var(--phoenix-primary-rgb, 56, 116, 255), 0.15);
}