/* ============================================ */
/*           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;
}

/* 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;
}

/* 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 brand/logo area when collapsed */
  .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl.client-sidebar .sidebar-brand {
    display: none !important;
  }

  /* Tighten inner padding for narrow collapsed sidebar */
  .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl.client-sidebar .navbar-vertical-content {
    padding: 0;
  }

  /* Center icons in collapsed nav-links */
  .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl.client-sidebar .nav-link {
    justify-content: center;
    padding: 10px 0;
  }

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

  /* 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;
}

.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;
}