/* ============================================ */
/*           Global Styles                     */
/* ============================================ */

/* Override default body background color */
body {
  background-color: #FAFAFA !important;
}

/* ============================================ */
/*           Font Family Override              */
/* ============================================ */

/* Override default font families */
:root {
  --falcon-font-sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --falcon-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --falcon-font-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.font-sans-serif {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* ============================================ */
/*           Navbar Vertical Override          */
/* ============================================ */

/* Force navbar vertical background to white */
.navbar-vertical {
  background-color: #ffffff !important;
}

.navbar-vertical .navbar-collapse {
  background-color: #ffffff !important;
}

.navbar-glass {
  background-color: #FAFAFA !important;
}

/* ============================================ */
/*           Footer Styles                     */
/* ============================================ */

.app-footer {
  padding: 15px 0;
}

.app-footer small {
  font-size: 13px;
  color: #9CA3AF;
}

.app-footer-link {
  font-size: 13px !important;;
  color: #6B7280 !important;
  text-decoration: none !important;;
}

.app-footer-link:hover {
  color: #111827 !important;
}

.app-footer-dot {
  font-size: 13px;
  color: #D1D5DB;
}

/* ============================================ */
/*           Accountant Header Styles          */
/* ============================================ */

.accountant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #e8f4fc;
}

/* ============================================ */
/*           Client Header Styles              */
/* ============================================ */

.client-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #ffffff;
}

/* ============================================ */
/*           Accountant Sidebar Styles         */
/* ============================================ */

/* Sidebar Container - Soft Blue Design */
.accountant-sidebar {
  background-color: #DBEAFE !important;
  border-right: 1px solid #93C5FD;
  min-height: 100vh;
}

/* Logo Styling */
.accountant-sidebar .sidebar-logo {
  height: 32px;
  width: auto;
  display: block;
}

/* Navbar Brand */
.accountant-sidebar .navbar-brand {
  padding: 0;
  margin: 0;
}

/* Navigation Items */
.accountant-sidebar .nav-item {
  margin-bottom: 2px;
}

.accountant-sidebar .nav-link {
  color: #1e40af;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin: 0 12px;
}

.accountant-sidebar .nav-link:hover {
  background-color: #EFF6FF;
  color: #1e3a8a;
}

/* Active State - White with subtle shadow */
.accountant-sidebar .nav-link.active {
  background-color: #FFFFFF;
  color: #2563eb;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.accountant-sidebar .nav-link.active .nav-link-icon i,
.accountant-sidebar .nav-link.active .nav-link-icon .fas {
  color: #2563eb;
}

/* Navigation Icons */
.accountant-sidebar .nav-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.accountant-sidebar .nav-link-icon i,
.accountant-sidebar .nav-link-icon .fas {
  width: 22px;
  height: 22px;
  color: #1e40af;
}

.accountant-sidebar .nav-link:hover .nav-link-icon i,
.accountant-sidebar .nav-link:hover .nav-link-icon .fas {
  color: #1e3a8a;
}

/* Navigation Text */
.accountant-sidebar .nav-link-text {
  font-size: 15px;
  line-height: 22px;
}

/* Scrollbar Styling — make navbar-collapse the scroll container to override Falcon theme */
.accountant-sidebar.navbar-vertical .navbar-collapse {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 120px);
}

.accountant-sidebar.navbar-vertical .navbar-collapse .navbar-vertical-content {
  height: auto !important;
}

/* Falcon forces width: 100% on every direct child of .navbar-vertical-content,
   so the mx-3 divider overflowed by its own margin and triggered a horizontal
   scrollbar. width: auto keeps the inset without spilling past the container. */
.accountant-sidebar.navbar-vertical .navbar-collapse .navbar-vertical-content > hr {
  width: auto !important;
}

.accountant-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar {
  width: 6px;
}

.accountant-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar-track {
  background: transparent;
}

.accountant-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.accountant-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Navigation List */
.accountant-sidebar #navbarVerticalNav {
  padding-top: 8px;
}

/* Remove default Bootstrap navbar styles */
.accountant-sidebar.navbar-light .navbar-nav .nav-link {
  color: #1e40af;
}

.accountant-sidebar.navbar-light .navbar-nav .nav-link:hover,
.accountant-sidebar.navbar-light .navbar-nav .nav-link:focus {
  color: #1e3a8a;
}

/* -------------------------------------------- */
/*     Accountant Sidebar Responsive Styles     */
/* -------------------------------------------- */

/* Navbar Toggler (Mobile Menu Button) */
.accountant-sidebar .navbar-toggler {
  border: 1px solid #93C5FD;
  padding: 6px 10px;
  border-radius: 6px;
  display: none;
}

.accountant-sidebar .navbar-toggler:focus {
  box-shadow: none;
  border-color: #2563eb;
}

.accountant-sidebar .navbar-toggler-icon {
  width: 20px;
  height: 20px;
}

/* Tablet Devices (Below 1200px) */
@media (max-width: 1199.98px) {
  .accountant-sidebar .navbar-toggler {
    display: block;
  }

  .accountant-sidebar .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #DBEAFE;
    border-bottom: 1px solid #93C5FD;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .accountant-sidebar .navbar-collapse.show {
    display: block;
  }

  .accountant-sidebar .navbar-vertical-content {
    height: auto;
    max-height: calc(100vh - 120px);
  }

  .accountant-sidebar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: auto;
  }
}

/* Mobile Devices (Below 768px) */
@media (max-width: 767.98px) {
  .accountant-sidebar .sidebar-logo {
    height: 28px;
  }

  .accountant-sidebar .nav-link {
    font-size: 15px;
    padding: 12px 16px;
  }

  .accountant-sidebar .nav-link-text {
    font-size: 15px;
  }

  .accountant-sidebar .navbar-brand {
    padding: 8px 0;
  }

  .accountant-sidebar .navbar-vertical-content {
    max-height: calc(100vh - 100px);
  }
}

/* Small Mobile Devices (Below 576px) */
@media (max-width: 575.98px) {
  .accountant-sidebar .sidebar-logo {
    height: 24px;
  }

  .accountant-sidebar .nav-link {
    font-size: 14px;
    padding: 10px 12px;
    margin: 0 8px;
  }

  .accountant-sidebar .nav-link-icon i,
  .accountant-sidebar .nav-link-icon .fas {
    width: 18px;
    height: 18px;
  }
}

/* Desktop - Ensure sidebar is always visible */
@media (min-width: 1200px) {
  .accountant-sidebar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .accountant-sidebar .navbar-toggler {
    display: none;
  }
}

/* ============================================ */
/*           Client Sidebar Styles             */
/* ============================================ */

/* Sidebar Container */
.client-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #e5e7eb;
  min-height: 100vh;
}

/* Logo Styling */
.sidebar-logo {
  height: 32px;
  width: auto;
  display: block;
}

/* Navbar Brand */
.client-sidebar .navbar-brand {
  padding: 0;
  margin: 0;
}

/* Navigation Items */
.client-sidebar .nav-item {
  margin-bottom: 2px;
}

.client-sidebar .nav-link {
  color: #6b7280;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin: 0 12px;
}

.client-sidebar .nav-link:hover {
  background-color: #f3f4f6;
  color: #374151;
}

/* Active State */
.client-sidebar .nav-link.active {
  background-color: #eff6ff;
  color: #2563eb;
  font-weight: 500;
}

.client-sidebar .nav-link.active .nav-link-icon i {
  color: #2563eb;
}

/* Navigation Icons */
.client-sidebar .nav-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.client-sidebar .nav-link-icon i {
  width: 22px;
  height: 22px;
  color: #6b7280;
}

.client-sidebar .nav-link:hover .nav-link-icon i {
  color: #374151;
}

/* Navigation Text */
.client-sidebar .nav-link-text {
  font-size: 15px;
  line-height: 22px;
}

/* Rows inside a product group (Bookkeeping and Payroll alike).
   The sidebar is capped at 12.625rem (202px), so a wide indent is expensive:
   a top-level row already spends 54px before its text (12px margin + 16px
   padding + 22px icon + 4px ps-1), and matching that on children left ~122px —
   not enough for "Chart of Accounts" at 15px, which wrapped to two lines.
   So the hierarchy is carried by a hairline rule down the left plus a smaller
   type size, and the rows claw back horizontal space instead of spending it. */
.client-sidebar .workspace-subnav {
  margin-left: 27px;
  border-left: 1px solid #e5e7eb;
}

/* The .small on these links never applied: .client-sidebar .nav-link (0,2,0)
   outranks .small (0,1,0), so children rendered at the same 15px as their
   parent. Honouring it is the single biggest width win and reinforces the
   nesting without costing any indent.
   Text lands at 27 + 1 + 6 + 8 + 4 = 46px, just inside the parent's 54px. */
.client-sidebar .workspace-subnav > .nav-item > .nav-link {
  font-size: 13.5px;
  padding: 8px 8px 8px 8px;
  margin: 0 8px 0 6px;
}

/* Section labels align with the rows they head (46px from the sidebar edge,
   less the 27px margin and 1px rule the label already inherits). */
.client-sidebar .workspace-subnav .workspace-nav-label {
  padding-left: 18px;
  padding-right: 12px;
}

/* Back to Client Selection Link */
.client-sidebar .nav-item:first-child .nav-link {
  color: #9ca3af;
  font-size: 13px;
  margin-bottom: 8px;
}

.client-sidebar .nav-item:first-child .nav-link:hover {
  background-color: transparent;
  color: #6b7280;
}

.client-sidebar .nav-item:first-child .nav-link-icon i {
  width: 16px;
  height: 16px;
}

/* The :first-child rules above date from when this sidebar opened with a small,
   muted "Back to Client Selection" row. That row is gone — the first item is now
   Dashboard, which was silently inheriting the muted colour, 13px type (which
   also shrinks the FontAwesome glyph, since it sizes off font-size) and an extra
   8px gap. In the icon-only rail that left the first icon visibly smaller and
   further from its neighbours than the rest. Restore the standard row treatment.
   Scoped by id so the portal sidebar, which shares .client-sidebar and has the
   same vestigial styling, is left alone. */
#workspace-sidebar .nav-item:first-child .nav-link {
  color: #6b7280;
  font-size: 15px;
  margin-bottom: 0;
}

/* Scrollbar Styling — make navbar-collapse the scroll container to override Falcon theme */
.client-sidebar.navbar-vertical .navbar-collapse {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 80px);
}

.client-sidebar.navbar-vertical .navbar-collapse .navbar-vertical-content {
  height: auto !important;
}

.client-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar {
  width: 6px;
}

.client-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar-track {
  background: transparent;
}

.client-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.client-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Navigation List */
.client-sidebar #navbarVerticalNav {
  padding-top: 8px;
}

/* Remove default Bootstrap navbar styles */
.client-sidebar.navbar-light .navbar-nav .nav-link {
  color: #6b7280;
}

.client-sidebar.navbar-light .navbar-nav .nav-link:hover,
.client-sidebar.navbar-light .navbar-nav .nav-link:focus {
  color: #374151;
}

/* ============================================ */
/*           Responsive Styles                 */
/* ============================================ */

/* Navbar Toggler (Mobile Menu Button) */
.client-sidebar .navbar-toggler {
  border: 1px solid #e5e7eb;
  padding: 6px 10px;
  border-radius: 6px;
  display: none;
}

.client-sidebar .navbar-toggler:focus {
  box-shadow: none;
  border-color: #2563eb;
}

.client-sidebar .navbar-toggler-icon {
  width: 20px;
  height: 20px;
}

/* Tablet Devices (Below 1200px) */
@media (max-width: 1199.98px) {
  .client-sidebar .navbar-toggler {
    display: block;
  }

  .client-sidebar .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .client-sidebar .navbar-collapse.show {
    display: block;
  }

  .client-sidebar .navbar-vertical-content {
    height: auto;
    max-height: calc(100vh - 120px);
  }

  .client-sidebar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: auto;
  }
}

/* Mobile Devices (Below 768px) */
@media (max-width: 767.98px) {
  .client-sidebar .sidebar-logo {
    height: 28px;
  }

  .client-sidebar .nav-link {
    font-size: 15px;
    padding: 12px 16px;
  }

  .client-sidebar .nav-link-text {
    font-size: 15px;
  }

  .client-sidebar .navbar-brand {
    padding: 8px 0;
  }

  .client-sidebar .navbar-vertical-content {
    max-height: calc(100vh - 100px);
  }
}

/* Small Mobile Devices (Below 576px) */
@media (max-width: 575.98px) {
  .client-sidebar .sidebar-logo {
    height: 24px;
  }

  .client-sidebar .nav-link {
    font-size: 14px;
    padding: 10px 12px;
    margin: 0 8px;
  }

  .client-sidebar .nav-link-icon i {
    width: 18px;
    height: 18px;
  }

  .client-sidebar .nav-item:first-child .nav-link {
    font-size: 12px;
  }

  .client-sidebar .nav-item:first-child .nav-link-icon i {
    width: 14px;
    height: 14px;
  }
}

/* Desktop - Ensure sidebar is always visible */
@media (min-width: 1200px) {
  .client-sidebar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .client-sidebar .navbar-toggler {
    display: none;
  }
}

/* ============================================ */
/*     Client Sidebar Collapse Behavior        */
/* ============================================ */

@media (min-width: 1200px) {
  /* Smooth content area transition when sidebar collapses/expands */
  .navbar-vertical.navbar-expand-xl.client-sidebar + .content {
    transition: margin-left 0.2s ease;
  }

  /* Scrollable nav content takes remaining space */
  .client-sidebar .navbar-vertical-content {
    flex: 1 1 auto;
    width: 100%;
  }

  /* --- COLLAPSED STATE (not hovering) --- */
  /* Override Falcon display:none on .navbar-collapse — keep nav visible for icon-only mode */
  .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl.client-sidebar .navbar-collapse {
    display: flex !important;
    margin-left: 0;
  }

  /* Right border on collapsed sidebar (box-shadow renders outside, unaffected by overflow) */
  .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.client-sidebar {
    box-shadow: 1px 0 0 0 #d1d5db;
  }

  /* Add gap between collapsed sidebar and content */
  .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.client-sidebar + .content {
    margin-left: 4rem;
  }

  /* Hide the brand/logo when collapsed but KEEP ITS BOX. display: none removed
     the block's height, so every nav row jumped up by it and the icons ended up
     level with the top header — the sidebar's rows must not move when toggling.
     visibility keeps the exact same height; overflow clips the 120px-wide logo
     so it can't force a scrollbar inside the 3.125rem rail. */
  .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl.client-sidebar .sidebar-brand {
    visibility: hidden;
    overflow: hidden;
  }

  /* Tighten inner padding for the narrow collapsed sidebar — horizontal only,
     so rows keep their vertical rhythm. */
  .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl.client-sidebar .navbar-vertical-content {
    padding-left: 0;
    padding-right: 0;
  }

  /* Center icons in collapsed nav-links. Vertical padding stays at the expanded
     12px so row heights — and therefore every row's y position — are unchanged.
     !important because Bootstrap's flex utilities are themselves !important:
     a justify-content-* class on a nav-link would otherwise win on cascade order
     no matter how specific this selector is, and silently left-align that row's
     icon in the rail. */
  .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl.client-sidebar .nav-link {
    justify-content: center !important;
    padding: 12px 0;
  }

  .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl.client-sidebar .nav-link > .d-flex {
    justify-content: center !important;
  }

  /* Icon-only mode shows top-level rows only. Nested group rows are text-only by
     design, and Falcon hides .nav-link-text when collapsed — so an open group
     would render as a column of blank rows. Falcon does the same for its own
     .nav.collapse.show; ours are plain div.collapse, hence this rule. */
  .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl.client-sidebar .navbar-nav .collapse.show {
    display: none !important;
  }

  /* Expanded state: extend header leftward to fill gap between sidebar and content */
  .navbar-vertical.navbar-expand-xl.client-sidebar + .content .navbar-top {
    margin-left: -3rem;
  }

  /* Collapsed state: header flush with sidebar edge (content starts at 3.125rem, no offset needed) */
  .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl.client-sidebar + .content .navbar-top {
    margin-left: 0;
    padding-left: 0;
  }

}

/* ============================================ */
/*     Header Sidebar Toggle Button            */
/* ============================================ */

/* Toggle button in the client header — QBO-style hamburger */
.header-sidebar-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 6px;
  color: #6b7280;
  background: transparent;
}


/* ============================================ */
/*         Global Card Styling Override        */
/* ============================================ */

/* Remove default card shadows and add border globally (overrides theme.css line 22858-22861) */
/* Border properties from Figma design */
.card {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 0.625rem !important;
}

/* ============================================ */
/*         Offcanvas Width Override            */
/* ============================================ */

/* Override default offcanvas width from theme.css */
.offcanvas,
.offcanvas-xxl,
.offcanvas-xl,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm {
  --falcon-offcanvas-width: 550px !important;
}

.offcanvas.offcanvas-start,
.offcanvas.offcanvas-end {
  width: 550px !important;
}

/* ============================================ */
/*         Flash Messages Styles               */
/* ============================================ */

/* Flash messages container */
#flash-messages {
  pointer-events: none;
}

/* Individual flash message alert */
#flash-messages .alert {
  pointer-events: auto;
  backdrop-filter: blur(8px);
  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide-in animation */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Hover effect for flash messages */
#flash-messages .alert:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Close button styling */
#flash-messages .btn-close {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#flash-messages .btn-close:hover {
  transform: scale(1.1);
  opacity: 1 !important;
}

/* Responsive adjustments for flash messages */
@media (max-width: 575.98px) {
  #flash-messages {
    max-width: calc(100vw - 2rem) !important;
    left: 1rem;
    right: 1rem;
  }

  #flash-messages .alert {
    font-size: 0.875rem;
  }

  #flash-messages h6 {
    font-size: 0.95rem;
  }

  #flash-messages p {
    font-size: 0.85rem !important;
  }
}

/* ============================================ */
/*         Split Button Dropdown Styles        */
/* ============================================ */

/* Split button group styling */
.btn-group .dropdown-toggle-split {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Dropdown menu styling */
.dropdown-menu {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  padding: 0.5rem;
  min-width: 10rem;
}

/* Dropdown items */
.dropdown-item {
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: all 0.15s ease-in-out;
}

.dropdown-item:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.dropdown-item:active {
  background-color: #e5e7eb;
  color: #111827;
}

/* Dropdown item with icons */
.dropdown-item i[data-lucide] {
  color: #6b7280;
}

.dropdown-item:hover i[data-lucide] {
  color: #374151;
}

.dropdown-item.text-danger:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

.dropdown-item.text-danger:hover i[data-lucide] {
  color: #dc2626;
}

.dropdown-item.text-danger i[data-lucide] {
  color: #ef4444;
}

/* Dropdown divider */
.dropdown-divider {
  margin: 0.5rem 0;
  border-color: rgba(0, 0, 0, 0.06);
}

/* Light button improvements */
.btn-light {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  color: #374151;
  font-weight: 500;
}

.btn-light:hover {
  background-color: #f9fafb;
  border-color: rgba(0, 0, 0, 0.15);
  color: #111827;
}

.btn-light:active,
.btn-light.active {
  background-color: #f3f4f6;
  border-color: rgba(0, 0, 0, 0.2);
  color: #111827;
}

/* Button group styling */
.btn-group .btn-light + .btn-light {
  margin-left: -1px;
}

/* ============================================ */
/*         Settings Card Hover Effects         */
/*  ============================================ */

/* Settings card hover effect */
#client-settings .card,
#company-settings .card {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

#client-settings .card:hover,
#company-settings .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

/* Settings card icon hover */
#client-settings .card:hover .bg-primary,
#client-settings .card:hover .bg-success,
#client-settings .card:hover .bg-info,
#client-settings .card:hover .bg-warning,
#client-settings .card:hover .bg-secondary,
#company-settings .card:hover .bg-primary {
  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
}

/* ============================================ */
/*         Text Muted Override                 */
/* ============================================ */

/* Make .text-muted match .text-600 for consistency */
.text-muted {
  color: #748194 !important; /* Same as text-600 (--falcon-gray-600) */
}

/* ============================================ */
/*      Bank Account Card Hover Effects        */
/* ============================================ */

/* Bank Account Card Hover Effects - Only for bank account cards */
.bank-account-card {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.bank-account-card-link:hover .bank-account-card {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.bank-account-card-link:active .bank-account-card {
  transform: translateY(0);
}

/* ============================================ */
/*      Tax Agency Card Hover Effects           */
/* ============================================ */

/* Tax Agency Card Hover Effects - Same style as bank account cards */
.tax-agency-card {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.tax-agency-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

.tax-agency-card:active {
  transform: translateY(0);
}

/* ============================================ */
/*      Transaction Tabs Styling               */
/* ============================================ */

/* Container with rounded background */
.transaction-tabs-container {
  background-color: #e5e7eb;
  border-radius: 12px;
  padding: 6px;
  display: inline-flex;
}

/* Tab list styling */
.transaction-tabs {
  border: none !important;
  gap: 0;
  margin-bottom: 0;
}

.transaction-tabs .nav-item {
  margin: 0;
}

/* Tab button styling */
.transaction-tabs .nav-link {
  color: #374151;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

/* Active tab styling - White background for active tab only */
.transaction-tabs .nav-link.active {
  color: #1f2937 !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Hover state for inactive tabs */
.transaction-tabs .nav-link:not(.active):hover {
  color: #1f2937;
}

/* Badge styling for count */
.transaction-tabs .badge {
  background-color: #d1d5db !important;
  color: #374151 !important;
  font-weight: 500;
  padding: 2px 8px;
  font-size: 0.75rem;
}

/* ============================================ */
/*      Offcanvas Wide Width Utility           */
/* ============================================ */

/* Responsive wide offcanvas utility class */
.offcanvas-wide.offcanvas-start,
.offcanvas-wide.offcanvas-end {
  width: 100% !important;
}

@media (min-width: 576px) {
  .offcanvas-wide.offcanvas-start,
  .offcanvas-wide.offcanvas-end {
    width: 85% !important;
  }
}

@media (min-width: 768px) {
  .offcanvas-wide.offcanvas-start,
  .offcanvas-wide.offcanvas-end {
    width: 75% !important;
  }
}

@media (min-width: 992px) {
  .offcanvas-wide.offcanvas-start,
  .offcanvas-wide.offcanvas-end {
    width: 65% !important;
  }
}

@media (min-width: 1200px) {
  .offcanvas-wide.offcanvas-start,
  .offcanvas-wide.offcanvas-end {
    width: 60% !important;
  }
}

/* Extra-wide offcanvas for journal edit forms */
.offcanvas-extra-wide.offcanvas-start,
.offcanvas-extra-wide.offcanvas-end {
  width: 80vw !important;
  max-width: 80vw !important;
}

/* ============================================ */
/*           Customer Import Styles            */
/* ============================================ */

/* Step Indicator */
.import-step-indicator {
  padding: 20px 0;
}

.step-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.step-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #e0e0e0;
  top: 20px;
  z-index: 0;
}

.step-line-progress {
  position: absolute;
  height: 2px;
  background-color: #10B981;
  top: 20px;
  z-index: 0;
  transition: width 0.3s ease;
}

.step-item {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

.step-circle {
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #e0e0e0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step-circle.step-active {
  background-color: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.step-circle.step-completed {
  background-color: #10B981;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.step-circle.step-pending {
  background-color: #e0e0e0;
}

.step-circle i {
  color: white;
  width: 20px;
  height: 20px;
}

.step-number {
  font-weight: 600;
  font-size: 16px;
}

.step-circle.step-active .step-number,
.step-circle.step-completed .step-number {
  color: white;
}

.step-circle.step-pending .step-number {
  color: #6b7280;
}

.step-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #9ca3af;
  margin-top: 8px;
}

.step-label.active {
  color: #1f2937;
}

/* Editable Import Table */
.import-review-table tbody tr.row-invalid {
  background-color: #fef2f2;
  border-left: 3px solid #dc2626;
}

/* Running balance doesn't line up at this row — suspicious, not unimportable.
   Amber so it reads as "check this" rather than row-invalid's red "can't import this".
   A row that is both keeps the red treatment (row-invalid wins via the rule below). */
.import-review-table tbody tr.row-balance-break {
  background-color: #fffbeb;
  border-left: 3px solid #f59e0b;
}

.import-review-table tbody tr.row-invalid.row-balance-break {
  background-color: #fef2f2;
  border-left: 3px solid #dc2626;
}

.import-review-table tbody tr.row-excluded {
  opacity: 0.5;
  text-decoration: line-through;
}

.import-review-table .form-control.is-invalid,
.import-review-table .form-select.is-invalid {
  border-color: #dc2626;
}

.import-review-table .form-control.is-invalid:focus,
.import-review-table .form-select.is-invalid:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.import-review-table .form-check-input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.import-review-table .validation-error {
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 4px;
  display: block;
}

/* Add New Subtype Inline Form */
.add-subtype-inline-form {
  min-width: 280px;
  max-width: 320px;
}

/* Style the "Add New Subtype..." option in dropdown */
.add-new-subtype-option {
  font-style: italic;
  color: var(--phoenix-primary, #2563eb);
}

.import-review-actions {
  position: sticky;
  bottom: 0;
  background-color: white;
  border-top: 2px solid #e5e7eb;
  padding: 16px 24px;
  z-index: 10;
}

.bulk-action-bar-sticky {
  position: sticky;
  /* --actual-navbar-height is published by bulk_transaction_controller.js
     from the navbar's real rendered height (matches what
     sticky_table_header_controller measures). Falls back to the theme token
     and a hardcoded value if neither is available. */
  top: var(--actual-navbar-height, var(--falcon-top-nav-height, 4.3125rem));
  z-index: 1015;
}

/* While the bulk action card is visible, hide the cloned sticky table header
   (created by sticky_table_header_controller) so the card occupies that band
   alone. The two carry different purposes (column labels vs. actions) and
   only the action card is needed during a bulk-select interaction. */
body:has(.bulk-action-bar-sticky:not(.d-none)) .sticky-header-wrapper {
  display: none !important;
}

.import-filter-box {
  max-width: 300px;
}

.import-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 0.5rem;
  font-weight: 600;
  color: #166534;
}

.import-summary-badge i {
  width: 15px;
  height: 15px;
}

/* Balance status colors */
.bg-success-subtle {
  background-color: rgba(34, 197, 94, 0.1) !important;
}

.bg-danger-subtle {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

.text-success {
  color: #16a34a !important;
}

/* ============================================ */
/*         User Profile Dropdown Styles        */
/* ============================================ */

/* Dropdown Container */
.user-dropdown {
  width: 100%;
}

/* Dropdown Toggle Button */
.user-dropdown-toggle {
  padding: 12px 16px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  transition: background-color 0.2s ease;
}

.user-dropdown-toggle:hover {
  background-color: #f3f4f6;
}

.user-dropdown-toggle:focus {
  box-shadow: none;
  background-color: #f3f4f6;
}

.user-dropdown-toggle::after {
  display: none; /* Hide default Bootstrap caret */
}

/* User Avatar */
.user-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background-color: #2563EB;
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
}

/* Crisp image rendering for avatars and logos */
.user-avatar,
.avatar-img,
.logo-img {
  image-rendering: -webkit-optimize-contrast; /* Chrome/Safari */
  image-rendering: crisp-edges; /* Firefox/Edge */
}

/* User Name */
.user-name {
  color: #1f2937;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
}

/* User Role */
.user-role {
  font-size: 13px;
  line-height: 1.3;
}

/* Dropdown Chevron */
.user-dropdown-chevron {
  width: 18px;
  height: 18px;
  color: #6b7280;
  transition: transform 0.2s ease;
}

.user-dropdown-toggle[aria-expanded="true"] .user-dropdown-chevron {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.user-dropdown-menu {
  min-width: 200px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 8px;
}

.user-dropdown-menu .dropdown-item {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

.user-dropdown-menu .dropdown-item i {
  color: #6b7280;
}

.user-dropdown-menu .dropdown-item:hover {
  background-color: #f3f4f6;
}

.user-dropdown-menu .dropdown-item:hover i {
  color: #374151;
}

/* Logout Item Styling */
.user-dropdown-menu .dropdown-item.text-danger {
  color: #dc2626;
}

.user-dropdown-menu .dropdown-item.text-danger i {
  color: #dc2626;
}

.user-dropdown-menu .dropdown-item.text-danger:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

.user-dropdown-menu .dropdown-divider {
  margin: 6px 0;
  border-color: rgba(0, 0, 0, 0.06);
}

/* -------------------------------------------- */
/*     User Dropdown Responsive Styles          */
/* -------------------------------------------- */

/* Tablet Devices (Below 1200px) */
@media (max-width: 1199.98px) {
  .user-dropdown-toggle {
    padding: 10px 12px;
  }

  .user-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 14px;
  }

  .user-name {
    font-size: 14px;
  }

  .user-role {
    font-size: 12px;
  }

  .user-dropdown-chevron {
    width: 16px;
    height: 16px;
  }
}

/* Mobile Devices (Below 768px) */
@media (max-width: 767.98px) {
  .user-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 13px;
  }

  .user-name {
    font-size: 14px;
  }

  .user-role {
    font-size: 12px;
  }

  .user-dropdown-menu {
    min-width: 190px;
  }

  .user-dropdown-menu .dropdown-item {
    padding: 8px 14px;
    font-size: 13px;
  }

  .user-dropdown-menu .dropdown-item i {
    width: 16px !important;
    height: 16px !important;
  }
}

/* Small Mobile Devices (Below 576px) */
@media (max-width: 575.98px) {
  .user-dropdown-toggle {
    padding: 8px 10px;
  }

  .user-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 12px;
  }

  .user-name {
    font-size: 13px;
  }

  .user-role {
    font-size: 11px;
  }

  .user-dropdown-chevron {
    width: 14px;
    height: 14px;
  }

  .user-dropdown-menu {
    min-width: 180px;
  }

  .user-dropdown-menu .dropdown-item {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ============================================ */
/*       Select2 Grouped Dropdown Styles       */
/* ============================================ */

/* Group container - MUST have no padding to prevent overlap */
.select2-results__option[role="group"] {
  padding: 0 !important;
  margin: 0 !important;
}

/* Group headers - styled as section dividers */
.select2-results__group {
  padding: 10px 16px 8px 16px !important;
  margin: 0 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #5e6e82 !important;
  background-color: #f8f9fa !important;
  border-top: 1px solid #e3e6ea !important;
}

/* First group header should not have top border */
.select2-results__options > .select2-results__option[role="group"]:first-child .select2-results__group {
  border-top: none !important;
}

/* Nested options container */
.select2-results__options--nested {
  padding: 0 !important;
  margin: 0 !important;
}

/* Individual selectable options - consistent padding */
.select2-results__option--selectable {
  padding: 8px 16px !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Hover / keyboard-focused state.
   Selector matches the Bootstrap-5 theme's specificity (5 classes) so this
   wins the !important tiebreak. Earlier 2-class version was being overridden
   by the theme's #e9ecef grey, leaving the highlight nearly invisible. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options
  .select2-results__option.select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #cfe2ff !important;
  color: #0d4ea6 !important;
}

/* Selected state */
.select2-results__option--selected {
  background-color: #d4e8fc !important;
  color: #1a5dc8 !important;
}

/* Dropdown container - add some padding */
.select2-dropdown {
  border-radius: 8px !important;
  border: 1px solid #dde2e9 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  min-width: min(350px, 90vw) !important;
}

/* Ensure dropdown renders above Bootstrap offcanvas (1045) and modals (1055) */
.select2-container--open .select2-dropdown {
  z-index: 1056 !important;
}

/* Results container */
.select2-results__options {
  max-height: 350px !important;
}

/* Search box styling */
.select2-search--dropdown .select2-search__field {
  padding: 10px 14px !important;
  border: 1px solid #dde2e9 !important;
  border-radius: 6px !important;
  margin: 8px !important;
  width: calc(100% - 16px) !important;
}

/* Select2 Input Field Styling */
.select2-container--default .select2-selection--single {
  height: 42px !important;
  padding: 6px 12px !important;
  border: 1px solid #dde2e9 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.select2-container--default .select2-selection--single:hover {
  border-color: #b8c0cc !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px !important;
  padding-left: 0 !important;
  color: #212529 !important;
  font-size: 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6c757d !important;
}

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

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #6c757d transparent transparent transparent !important;
}

/* Journal line items: allow Select2 text to wrap for long account names */
#journal-line-items .select2-container .select2-selection--single {
  height: auto !important;
  min-height: 42px !important;
}

#journal-line-items .select2-container .select2-selection--single .select2-selection__rendered {
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-right: 24px !important;
}

#journal-line-items .select2-container .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
}

/* ============================================ */
/*    Select2 Account Type Display Styles      */
/* ============================================ */

/* Account option in dropdown - flexbox layout */
.select2-account-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
}

/* Account selection (selected item) - flexbox layout */
.select2-account-selection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 8px;
}

/* Account name - left aligned, takes available space */
.select2-account-name {
  flex: 1;
  min-width: 120px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Account type badge - right aligned, allowed to shrink */
.select2-account-type {
  flex-shrink: 1;
  max-width: 160px;
  font-size: 11px;
  font-weight: 500;
  color: #6c757d;
  background-color: #f1f3f5;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Account type in dropdown options */
.select2-results__option .select2-account-type {
  font-size: 11px;
  background-color: #e9ecef;
}

/* Hide account type on highlighted option for better visibility */
.select2-results__option--highlighted .select2-account-type {
  background-color: #d1e7fd;
  color: #1a5dc8;
}

/* Hide account type on selected option */
.select2-results__option--selected .select2-account-type {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Responsive: Hide account type on smaller screens */
@media (max-width: 575.98px) {
  .select2-account-type {
    display: none !important;
  }
}

/* Responsive: Reduce font size on tablets */
@media (max-width: 767.98px) and (min-width: 576px) {
  .select2-account-type {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* ============================================ */
/*   Select2 Quick-Add "Add New" Option        */
/* ============================================ */

/* Styled option inside dropdown — primary blue */
.select2-add-new-option {
  color: #2563EB;
  font-weight: 600;
  padding: 2px 0;
}

.select2-add-new-icon {
  font-weight: 700;
  margin-right: 2px;
}

/* Hover state inherits the standard Select2 highlight, but keep text blue.
   Specificity matched to the theme so the color wins on the new bluish
   highlight background. */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options
  .select2-results__option--highlighted .select2-add-new-option {
  color: #0a3d82;
}

/* ============================================ */
/*           Widget Loading State              */
/* ============================================ */

/* Applied when widget content is loading via Turbo Frame */
.widget-loading {
  position: relative;
  pointer-events: none;
}

/* Shimmer animation overlay */
.widget-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 100%
  );
  background-size: 200% 100%;
  animation: widget-shimmer 1.5s infinite;
  border-radius: inherit;
  z-index: 1;
}

@keyframes widget-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ============================================ */
/*           Quick Reports Widget              */
/* ============================================ */

/* Quick report card - clickable report links */
.quick-report-card {
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  padding: 1.25rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: var(--bs-body-bg);
  color: inherit;
  height: 100%;
}

.quick-report-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--bs-primary);
  transform: translateY(-2px);
}

.quick-report-card:active {
  transform: translateY(0);
}

/* Loading skeleton variant */
.quick-report-card-skeleton {
  background: var(--bs-body-bg);
}

/* ============================================ */
/*     General Ledger Report Styles (QBO)      */
/* ============================================ */

/* Resizable report columns (column-resize Stimulus controller) */
table.resizable-columns th {
  position: relative; /* anchor for the absolutely-positioned drag handle */
  border-right: 1px solid #9ca3af; /* column separators mark each draggable edge */
}

table.resizable-columns th:last-child {
  border-right: 0;
}

/* Generous, invisible hit area straddling the column's right edge. */
.col-resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 2;
  touch-action: none;
}

/* Drag affordance: a full-height bar over the column edge, transparent at rest
   (the header border already marks the boundary) and brand blue on hover /
   while dragging. */
.col-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: transparent;
  border-radius: 1px;
  transform: translateX(-50%);
  transition: background-color 0.12s ease;
}

.col-resize-handle:hover::after {
  background-color: #2563eb;
  top: 0;
  height: 100%;
}

/* Keep the grabbed separator highlighted for the whole drag. */
body.col-resizing .col-resize-handle:hover::after {
  background-color: #2563eb;
}

/* Last column: keep its handle flush inside the edge so it can't overhang the
   table and trigger spurious horizontal scroll. */
table.resizable-columns th:last-child .col-resize-handle {
  right: 0;
}

body.col-resizing {
  cursor: col-resize;
  user-select: none;
}

/* GL/Ledger Description cell: default capped look; a resized (pinned) column
   width overrides the cap and lets the full text wrap into view. */
.gl-description-cell {
  white-space: normal;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Report Table Base - Clean QuickBooks style */
.gl-report-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8125rem;
  color: #393939;
}

.gl-report-table th {
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #393939;
  border-bottom: 1px solid #d4d4d4;
  background: transparent;
  text-align: left;
  white-space: nowrap;
}

.gl-report-table td {
  padding: 0.5rem 1rem;
  vertical-align: middle;
  border: none;
  font-weight: 400;
  white-space: nowrap;
}

/* Account Header Row (clickable to expand/collapse) */
.gl-account-header {
  cursor: pointer;
  background-color: #f8f9fa;
}

.gl-account-header:hover {
  background-color: #f0f1f2;
}

.gl-account-header td {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 600;
  color: #393939;
}

/* Expand/Collapse Arrow */
.gl-account-header .expand-arrow {
  display: inline-block;
  width: 16px;
  font-size: 10px;
  color: #393939;
  margin-right: 4px;
}

/* Beginning Balance Row */
.gl-beginning-balance td {
  color: #6c757d;
}

.gl-beginning-balance td:first-child {
  padding-left: 1.75rem;
}

/* Transaction Rows */
.gl-transaction-row td:first-child {
  padding-left: 1.75rem;
}

.gl-transaction-row:hover td {
  background-color: #fafafa;
}

/* Account Total Row */
.gl-account-total td {
  font-weight: 600;
}

.gl-account-total td:first-child {
  padding-left: 1.75rem;
}

/* Hide rows when collapsed */
.gl-collapsible-row[style*="display: none"] {
  display: none !important;
}

/* ============================================ */
/*   Collapsible Section (Tax Reports etc.)    */
/* ============================================ */

.cs-section-header {
  cursor: pointer;
}

.cs-section-header:hover {
  filter: brightness(0.96);
}

.cs-section-header .cs-expand-arrow {
  display: inline-block;
  width: 16px;
  font-size: 10px;
  color: #393939;
  margin-right: 4px;
}

.cs-collapsible-row[style*="display: none"] {
  display: none !important;
}

/* ============================================ */
/*       Trial Balance Clickable Amounts       */
/* ============================================ */

/* Hover effect for clickable debit/credit amounts */
.trial-balance-amount-link:hover {
  text-decoration: underline !important;
  color: var(--bs-primary) !important;
}

/* ============================================ */
/*     Tax Filing Line Item Drilldown Links    */
/* ============================================ */

/* Hover effect for clickable tax filing amounts */
.drilldown-link {
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.drilldown-link:hover {
  text-decoration: underline !important;
  color: var(--bs-primary) !important;
}

/* ============================================ */
/*     Sticky Horizontal Scrollbar             */
/* ============================================ */
.sticky-scrollbar-wrapper {
  position: fixed;
  bottom: 0;
  z-index: 1015;
  overflow-x: auto;
  overflow-y: hidden;
  display: none;
  border-top: 1px solid #dee2e6;
  background: #f8f9fa;
}

/* Force visible scrollbar (macOS overlay scrollbars can be invisible) */
.sticky-scrollbar-wrapper::-webkit-scrollbar {
  height: 12px;
}

.sticky-scrollbar-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

.sticky-scrollbar-wrapper::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  border-radius: 6px;
}

.sticky-scrollbar-wrapper::-webkit-scrollbar-thumb:hover {
  background: #909090;
}

/* ============================================ */
/*     Print: Hide Sticky Elements              */
/* ============================================ */
@media print {
  .sticky-header-wrapper,
  .sticky-scrollbar-wrapper {
    display: none !important;
  }
}

/* ============================================ */
/*     Collapsible report sections              */
/* ============================================ */

/* Clickable section/subgroup headers in P&L and Balance Sheet reports. */
.cs-section-header {
  cursor: pointer;
}

.cs-expand-arrow {
  display: inline-block;
  width: 0.9em;
  font-size: 0.7em;
  color: #748194;
  user-select: none;
}

/* QuickBooks-style collapsed totals: a collapsed header shows its running total
   on the right; the standalone "Total …" row hides on collapse via the JS
   recompute (its data-section-ids includes the header's own id). Expanded
   headers show the column label ("Amount") instead. */
.cs-collapsed-total {
  display: none;
}

.cs-section-header[aria-expanded="false"] .cs-collapsed-total {
  display: inline;
}

.cs-section-header[aria-expanded="false"] .cs-expanded-label {
  display: none;
}

/* ============================================ */
/*     Global Search                            */
/* ============================================ */

/* ---- Search Trigger Button in Header ---- */
.global-search-trigger {
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  min-width: 220px;
  height: 36px;
}

.global-search-trigger:hover {
  border-color: #94a3b8;
  background: #e2e8f0;
  color: #475569;
}

.global-search-trigger:focus-visible {
  outline: 2px solid var(--falcon-primary, #2c7be5);
  outline-offset: 1px;
}

/* ---- Transparent Backdrop ---- */
.global-search-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1060;
  background: transparent;
}

/* ---- Search Panel (centered) ---- */
.global-search-panel {
  position: relative;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.18), 0 4px 16px -4px rgba(0, 0, 0, 0.1);
}

/* ---- Result Items ---- */
.global-search-item {
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.global-search-item:hover,
.global-search-item.active {
  background-color: #f1f5f9 !important;
}

/* Hide remove button until hover */
.global-search-item .global-search-remove {
  opacity: 0;
  transition: opacity 0.1s ease;
}

.global-search-item:hover .global-search-remove {
  opacity: 1;
}

/* ---- Search Input ---- */
[data-global-search-target="input"]:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .global-search-trigger {
    min-width: auto;
    padding: 7px 10px;
  }
}

@media (max-width: 576px) {
  .global-search-panel {
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 0 !important;
  }
}

/* ============================================ */
/*           Spin Animation (Export Toast)      */
/* ============================================ */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-animation {
  animation: spin 1.2s linear infinite;
}

/* ============================================ */
/*           Pay Grid Excel-Style Table         */
/* ============================================ */

.pg-table-wrap {
  border: 1px solid #d0d7de !important;
  border-radius: 4px !important;
  overflow-x: auto !important;
}

/* Frozen (sticky) columns */
.pg-table th.pg-sticky,
.pg-table td.pg-sticky {
  position: sticky !important;
  z-index: 2 !important;
}

.pg-table th.pg-sticky {
  background: #f1f4f8 !important;
  z-index: 3 !important;
  white-space: nowrap !important;
}

.pg-table tbody tr:nth-child(even) td.pg-sticky {
  background: #f3f5f7 !important;
}

.pg-table tbody tr:nth-child(odd) td.pg-sticky {
  background: #f6f8fa !important;
}

/* Shadow on the last frozen column to signal scrollable content to the right */
.pg-table .pg-sticky-last {
  box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.08) !important;
}

/* Drag handles. .pg-* is the pay-grid column-preferences offcanvas; the
   unprefixed .drag-handle / .drag-ghost are the generic pair, used by the
   Journal Voucher line-item rows and available to any future sortable list. */
.pg-drag-handle,
.drag-handle {
  cursor: grab;
  user-select: none;
  color: #9ca3af;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
}

.pg-drag-handle:active,
.drag-handle:active {
  cursor: grabbing;
}

.pg-drag-ghost,
.drag-ghost {
  opacity: 0.5;
  background: #e8f0fe !important;
}

/* The floating row Sortable drags in fallback mode (forceFallback) — see
   journal_form_controller.
   Sortable positions the clone with position:fixed plus an inline width,
   height and per-frame transform. A <tr> is display:table-row, which ignores
   all of those, so the clone renders collapsed and the drag looks broken.
   Promoting it to display:table gives it a box that honours them, and
   will-change keeps the transform on the compositor instead of forcing a
   table relayout each frame. */
tr.drag-fallback {
  display: table;
  table-layout: fixed;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0.97;
  will-change: transform;
  pointer-events: none;
}

/* The clone has no <thead>, so it cannot inherit the column widths that
   table-layout:fixed derives from the header. Mirror them onto the cells of
   both the live rows and the clone so the dragged row stays aligned with the
   table underneath. Keep in sync with the <th> widths in journals/_form. */
#journal-line-items > tr > td:nth-child(1),
tr.drag-fallback > td:nth-child(1) { width: 3%; }
#journal-line-items > tr > td:nth-child(2),
tr.drag-fallback > td:nth-child(2) { width: 3%; }
#journal-line-items > tr > td:nth-child(3),
tr.drag-fallback > td:nth-child(3) { width: 27%; }
#journal-line-items > tr > td:nth-child(4),
tr.drag-fallback > td:nth-child(4) { width: 9%; }
#journal-line-items > tr > td:nth-child(5),
tr.drag-fallback > td:nth-child(5) { width: 9%; }
#journal-line-items > tr > td:nth-child(6),
tr.drag-fallback > td:nth-child(6) { width: 12%; }
#journal-line-items > tr > td:nth-child(7),
tr.drag-fallback > td:nth-child(7) { width: 15%; }
#journal-line-items > tr > td:nth-child(8),
tr.drag-fallback > td:nth-child(8) { width: 17%; }
#journal-line-items > tr > td:nth-child(9),
tr.drag-fallback > td:nth-child(9) { width: 5%; }

.pg-table {
  border-collapse: collapse !important;
  width: 100% !important;
  font-size: 13px !important;
  margin: 0 !important;
}

.pg-table th {
  background: #f1f4f8 !important;
  border: 1px solid #d0d7de !important;
  padding: 7px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: #5a6474 !important;
  vertical-align: middle !important;
}

.pg-table td {
  border: 1px solid #d0d7de !important;
  padding: 5px 12px !important;
  vertical-align: middle !important;
}

/* Employee info cells (number, name, dept, rate) */
.pg-table .pg-td-info {
  background: #f6f8fa !important;
  white-space: nowrap !important;
}

.pg-table tbody tr:nth-child(even) .pg-td-info {
  background: #edf0f4 !important;
}

/* Editable input cells */
.pg-table .pg-td-input {
  padding: 0 !important;
  background: white !important;
}

.pg-table tbody tr:nth-child(even) .pg-td-input {
  background: #fdfeff !important;
}

/* Bare number input inside input cell */
.pg-table .pg-input {
  border: none !important;
  width: 100% !important;
  padding: 6px 10px !important;
  text-align: right !important;
  background: transparent !important;
  font-size: 13px !important;
  font-family: inherit !important;
  display: block !important;
  outline: none !important;
  -moz-appearance: textfield !important;
  box-shadow: none !important;
}

.pg-table .pg-input::-webkit-outer-spin-button,
.pg-table .pg-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.pg-table .pg-input:focus {
  background: #eff6ff !important;
  outline: 2px solid #3b82f6 !important;
  outline-offset: -2px !important;
}

/* Empty cell — employee not assigned to this earning */
.pg-table .pg-td-empty {
  padding: 5px 12px !important;
  background: #f9fafb !important;
  text-align: center !important;
  color: #d1d5db !important;
}

/* Read-only value cells (view mode) */
.pg-table .pg-td-value {
  text-align: right !important;
  background: white !important;
}

.pg-table tbody tr:nth-child(even) .pg-td-value {
  background: #fafbfc !important;
}


/* ============================================ */
/*           Admin Header Styles               */
/* ============================================ */

.admin-header {
  margin-left: -3rem;
  padding: 16px 24px;
  background-color: #ffffff !important;
}

/* ============================================ */
/*           Admin Sidebar Styles              */
/* ============================================ */

/* Sidebar Container - Neutral slate surface with red admin accent */
.admin-sidebar {
  background-color: #F8FAFC !important;
  border-right: 1px solid #E2E8F0;
  min-height: 100vh;
}

.admin-sidebar .navbar-brand {
  padding: 0;
  margin: 0;
}

.admin-sidebar-section-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  margin: 0 12px;
  padding: 4px 16px 0;
}

.admin-sidebar .nav-item {
  margin-bottom: 2px;
}

.admin-sidebar .nav-link {
  color: #334155;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin: 0 12px;
}

.admin-sidebar .nav-link:hover {
  background-color: #F1F5F9;
  color: #0F172A;
}

/* Active State - White card with subtle shadow, red accent */
.admin-sidebar .nav-link.active {
  background-color: #FFFFFF;
  color: #d4183d;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.admin-sidebar .nav-link.active .nav-link-icon i {
  color: #d4183d;
}

.admin-sidebar .nav-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.admin-sidebar .nav-link-icon i {
  width: 18px;
  height: 18px;
  color: #64748B;
}

.admin-sidebar .nav-link:hover .nav-link-icon i {
  color: #0F172A;
}

.admin-sidebar .nav-link-text {
  font-size: 15px;
  line-height: 22px;
}

/* Scrollbar - make navbar-collapse the scroll container (Falcon override) */
.admin-sidebar.navbar-vertical .navbar-collapse {
  background-color: #F8FAFC !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 120px);
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #d1d5db transparent;
}

.admin-sidebar.navbar-vertical .navbar-collapse .navbar-vertical-content {
  height: auto !important;
}

/* Thin scrollbar matching the accountant sidebar — without this the default
   fat gray bar renders as a gap band between the sidebar and the content. */
.admin-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar {
  width: 6px;
}

.admin-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar-track {
  background: transparent;
}

.admin-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.admin-sidebar.navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ============================================ */
/*           Admin Danger Zone                 */
/* ============================================ */

.admin-danger-zone {
  border: 1px solid rgba(212, 24, 61, 0.35) !important;
}

.admin-danger-zone .card-header {
  background-color: rgba(212, 24, 61, 0.06) !important;
  border-bottom: 1px solid rgba(212, 24, 61, 0.2) !important;
}

.admin-danger-zone-row + .admin-danger-zone-row {
  border-top: 1px solid rgba(212, 24, 61, 0.15);
}

/* ============================================ */
/*           Confirm Dialog (Turbo confirm)    */
/* ============================================ */

.confirm-dialog-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.5);
  z-index: 1070;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.confirm-dialog-backdrop.show {
  opacity: 1;
}

.confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 1071;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.confirm-dialog-card {
  background: #ffffff;
  border-radius: 0.625rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.2);
  width: 100%;
  max-width: 440px;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.confirm-dialog.show .confirm-dialog-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Backdrop receives outside-clicks; only the card itself is interactive */
.confirm-dialog {
  pointer-events: none;
}

.confirm-dialog-card {
  pointer-events: auto;
}

/* First section label sits directly under the brand block */
.admin-sidebar .nav-item:first-child .admin-sidebar-section-label {
  margin-top: 0;
}

/* ============================================ */
/*           Admin Error Log                   */
/* ============================================ */

/* Hero card on the error detail page — severity-colored left edge */
.admin-error-hero {
  border-left: 4px solid #6c757d !important;
}

.admin-error-hero-error {
  border-left-color: #d4183d !important;
}

.admin-error-hero-warning {
  border-left-color: #f5803e !important;
}

.admin-error-hero-info {
  border-left-color: #27bcfd !important;
}

/* Unhandled rows on the error index get a red edge so they read first */
.admin-error-row-unhandled td:first-child {
  box-shadow: inset 3px 0 0 #d4183d;
}

/* ============================================ */
/*           Plan picker cards                 */
/* ============================================ */

/*
 * Selected-state for the Payroll tier cards on add_product, which use
 * Bootstrap's `.btn-check` (a visually-hidden radio styled through the
 * following label). The two wizard pickers are one <form> per card and get the
 * same look from server-rendered `border-primary bg-primary-subtle` classes —
 * this rule is what lets the radio-based picker match them without a Stimulus
 * controller just to move a border.
 *
 * Not using `.btn-outline-primary`, whose checked state fills the button with
 * solid primary and turns the text white: the cards carry `.text-600` price
 * and capacity lines that would drop to unreadable contrast against it.
 */
.btn-check:checked + .btn.plan-card,
.btn-check:active + .btn.plan-card {
  border-color: var(--falcon-primary) !important;
  background-color: var(--falcon-primary-bg-subtle, #e6effc);
}

/* Keyboard parity: `.btn-check` hides the input, so the focus ring has to be
   drawn on the label or the picker is untraversable without a mouse. */
.btn-check:focus-visible + .btn.plan-card {
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}