.min-w-full th {
  padding: 10px 5px 10px 30px;
}

.min-w-full td {
  padding: 5px 5px 5px 30px;
}

/* Add margin-top to all Flux form inputs */
[data-flux-input],
[data-flux-select-native],
[data-flux-textarea],
input[data-flux-control],
select[data-flux-control],
textarea[data-flux-control] {
  margin-top: 10px !important;
  margin-bottom: 5px !important;
}

/* Add margin to all Flux buttons */
[data-flux-button],
button[data-flux-button] {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* Logo and header height */
flux-header,
[data-flux-header],
header[data-flux-header] {
  height: 90px !important;
  min-height: 90px !important;
  max-height: 90px !important;
}

.h-\[70px\] img,
img.h-\[70px\] {
  height: 70px !important;
  max-height: 70px !important;
}

/* FAQ page - remove padding on mobile */
@media (max-width: 767px) {
  .bg-white.dark\:bg-zinc-800.rounded-lg.shadow-sm.border.border-gray-200.dark\:border-zinc-700.p-6 {
    padding: 10px !important;
  }
  
  .bg-white.dark\:bg-zinc-800.rounded-lg.shadow-sm.border.border-gray-200.dark\:border-zinc-700.p-6 > p {
    padding-top: 1rem !important;
    text-indent: 1rem !important;
  }
}

/* Payment button - ensure proper colors in light mode */
.bg-teal-600 {
  background-color: rgb(13 148 136) !important;
}

.hover\:bg-teal-700:hover {
  background-color: rgb(15 118 110) !important;
}

.bg-teal-600.text-white,
.hover\:bg-teal-700.text-white {
  color: white !important;
}

/* Invoice amount column - prevent currency symbol from wrapping */
.min-w-full tbody td:nth-child(3) {
  white-space: nowrap !important;
}

/* Responsive invoice table for mobile viewports */
@media (max-width: 767px) {
  .min-w-full thead th {
    font-size: 0.65rem !important;
  }
  
  .min-w-full th,
  .min-w-full td {
    padding: 8px 4px !important;
    font-size: 0.75rem !important;
  }
  
  /* Make action button smaller */
  .min-w-full td:nth-child(4) a {
    padding: 4px 6px !important;
    font-size: 0.65rem !important;
  }
  
  .min-w-full td:nth-child(4) a svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
    margin-right: 2px !important;
  }
}

/* Invoice actions button - ensure proper colors in light mode */
.bg-blue-600 {
  background-color: rgb(37 99 235) !important;
}

.hover\:bg-blue-700:hover {
  background-color: rgb(29 78 216) !important;
}

/* Page header banner - ensure text is white in dark mode */
.dark .page-banner-text,
.dark .page-banner-subtitle,
.dark .page-banner-link {
  color: white !important;
}

.dark .page-banner-subtitle {
  opacity: 0.9;
}

.dark .page-banner-link {
  opacity: 0.9;
}

.dark .page-banner-link:hover {
  opacity: 1;
}

.page-banner-text.text-4xl {
  font-size:2rem;
}

/* ========================================
   CSS VARIABLES & THEME
   ======================================== */
:root {
  --background: 210 20% 98%;
  --foreground: 215 25% 17%;
  --card: 0 0% 100%;
  --card-foreground: 215 25% 17%;
  --popover: 0 0% 100%;
  --popover-foreground: 215 25% 17%;
  --primary: 174 72% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 15% 93%;
  --secondary-foreground: 215 25% 27%;
  --muted: 210 15% 93%;
  --muted-foreground: 215 15% 50%;
  --accent: 174 72% 95%;
  --accent-foreground: 174 72% 30%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success: 152 69% 40%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;
  --info: 217 91% 60%;
  --info-foreground: 0 0% 100%;
  --border: 214 20% 90%;
  --input: 214 20% 90%;
  --ring: 174 72% 40%;
  --radius: 0.75rem;
}

.dark {
  --background: 215 25% 12%;
  --foreground: 210 20% 98%;
  --card: 215 25% 15%;
  --card-foreground: 210 20% 98%;
  --popover: 215 25% 15%;
  --popover-foreground: 210 20% 98%;
  --primary: 174 72% 50%;
  --primary-foreground: 215 25% 12%;
  --secondary: 215 20% 20%;
  --secondary-foreground: 210 15% 85%;
  --muted: 215 20% 20%;
  --muted-foreground: 215 15% 60%;
  --accent: 174 72% 20%;
  --accent-foreground: 174 72% 70%;
  --border: 215 20% 22%;
  --input: 215 20% 22%;
}

/* ========================================
   DASHBOARD CARDS & CONTAINERS
   ======================================== */
.dashboard-card {
  background: hsl(var(--card));
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  border: 1px solid hsl(var(--border));
  transition: all 0.2s ease;
}

.dashboard-card:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  transform: translateY(-2px);
}

.stat-card {
  background: hsl(var(--card));
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  border: 1px solid hsl(var(--border));
}

.table-container {
  background: hsl(var(--card));
  border-radius: var(--radius);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  border: 1px solid hsl(var(--border));
  overflow: hidden;
}

.page-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

@media (min-width: 640px) {
  .page-container {
    padding: 2rem 1.5rem;
  }
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.section-subtitle {
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 0.5rem 1rem;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  padding: 0.5rem 1rem;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.btn-ghost {
  background-color: transparent;
  color: hsl(var(--foreground));
  padding: 0.5rem 1rem;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 500;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.btn-ghost:hover {
  background-color: hsl(var(--secondary));
}

/* ========================================
   BADGES
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-success {
  background-color: hsl(var(--success) / 0.1);
  color: hsl(var(--success));
}

.badge-warning {
  background-color: hsl(var(--warning) / 0.1);
  color: hsl(var(--warning));
}

.badge-info {
  background-color: hsl(var(--info) / 0.1);
  color: hsl(var(--info));
}

.badge-primary {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.badge-danger,
.badge-destructive {
  background-color: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
}

/* ========================================
   INPUTS
   ======================================== */
.input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
}

.input:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}

/* ========================================
   ANIMATIONS
   ======================================== */
.animate-fade-up {
  animation: fadeUp 0.5s ease-out forwards;
}

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

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* ========================================
   LEGACY STYLES (keeping for compatibility)
   ======================================== */

.icon-sm {
  width: 1rem !important;
  height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex-shrink: 0 !important;
}

.icon-md {
  width: 1.25rem !important;
  height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  flex-shrink: 0 !important;
}

.icon-lg {
  width: 6rem !important;
  height: 6rem !important;
  max-width: 6rem !important;
  max-height: 6rem !important;
  flex-shrink: 0 !important;
}

svg {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Search and Per Page Row Layout */
@media (min-width: 768px) {
  .search-per-page-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  
  .search-container {
    flex: 1;
    max-width: 300px;
  }
  
  .per-page-container {
    width: 12rem;
    margin-left: auto;
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .search-per-page-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .search-container,
  .per-page-container {
    width: 100%;
  }
}

/* Per page select width adjustment */
.per-page-container > div {
  max-width: calc(12rem - 30px);
  margin-left: auto;
}

/* Empty state container padding - only when showing empty state */
.table-container .text-center.py-12 {
  padding: 20px;
}

/* Responsive table and cards for my-lines */
@media (max-width: 890px) {
  .responsive-table {
    display: none;
  }
  .responsive-cards {
    display: block !important;
  }
}

@media (min-width: 891px) {
  .responsive-table {
    display: block;
  }
  .responsive-cards {
    display: none !important;
  }
}

/* Accordion styles for Q&A page */
.accordion-button {
  padding: 1.25rem 2rem !important;
}

.accordion-content {
  padding: 1.5rem 2rem !important;
}

.accordion-button:hover {
  background-color: rgb(244 244 245) !important;
}

.dark .accordion-button:hover {
  background-color: rgb(63 63 70) !important;
}

.accordion-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.accordion-icon.rotate {
  transform: rotate(180deg) !important;
}

.accordion-panel {
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 0;
}

.accordion-panel.open {
  max-height: 500px;
}

/* Conditional field animations for forms */
.conditional-field {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
}

.conditional-field.show {
  max-height: 300px;
  opacity: 1;
}

/* Dashboard specific styles */
.dashboard-card-padding {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}





/* Page Header Banners - Light Mode Gradients */
.page-banner-blue {
  height: 180px;
  background: linear-gradient(to bottom right, rgb(96, 165, 250), rgb(59, 130, 246), rgb(79, 70, 229));
}

.page-banner-purple {
  height: 180px;
  background: linear-gradient(to bottom right, rgb(192, 132, 252), rgb(168, 85, 247), rgb(236, 72, 153));
}

.page-banner-green {
  height: 180px;
  background: linear-gradient(to bottom right, rgb(52, 211, 153), rgb(34, 197, 94), rgb(20, 184, 166));
}

.page-banner-orange {
  height: 180px;
  background: linear-gradient(to bottom right, rgb(251, 146, 60), rgb(249, 115, 22), rgb(239, 68, 68));
}

.page-banner-red {
  height: 180px;
  background: linear-gradient(to bottom right, rgb(248, 113, 113), rgb(244, 63, 94), rgb(236, 72, 153));
}

/* Page Header Banners - Dark Mode Gradients */
.dark .page-banner-blue {
  background: linear-gradient(to bottom right, rgb(29, 78, 216), rgb(30, 64, 175), rgb(49, 46, 129)) !important;
}

.dark .page-banner-purple {
  background: linear-gradient(to bottom right, rgb(126, 34, 206), rgb(107, 33, 168), rgb(157, 23, 77)) !important;
}

.dark .page-banner-green {
  background: linear-gradient(to bottom right, rgb(4, 120, 87), rgb(22, 101, 52), rgb(19, 78, 74)) !important;
}

.dark .page-banner-orange {
  background: linear-gradient(to bottom right, rgb(194, 65, 12), rgb(154, 52, 18), rgb(153, 27, 27)) !important;
}

.dark .page-banner-red {
  background: linear-gradient(to bottom right, rgb(185, 28, 28), rgb(159, 18, 57), rgb(157, 23, 77)) !important;
}

/* Decorative patterns for banners */
.banner-pattern-1 {
  background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), 
                    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.banner-pattern-2 {
  background-image: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%), 
                    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.banner-pattern-3 {
  background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.15) 0%, transparent 50%), 
                    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.banner-pattern-4 {
  background-image: radial-gradient(circle at 15% 40%, rgba(255, 255, 255, 0.15) 0%, transparent 50%), 
                    radial-gradient(circle at 85% 60%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.banner-pattern-5 {
  background-image: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%), 
                    radial-gradient(circle at 65% 65%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

/* ========================================
   NAVIGATION MENU HOVER
   ======================================== */
/* Light blue hover for navbar items - targeting the actual rendered elements */
nav[data-flux-navbar] a[data-flux-navbar-items]:hover {
  background-color: #ebf2fe !important;
}

/* Light blue hover for navlist items in sidebar */
nav[data-flux-navlist] a[data-flux-navlist-item]:hover {
  background-color: #ebf2fe !important;
}

/* ========================================
   SIDEBAR Z-INDEX
   ======================================== */
/* Ensure sidebar appears above dropdowns and other page elements on mobile */
[data-flux-sidebar] {
  z-index: 9999 !important;
}

/* ========================================
   BACKEND PADDING
   ======================================== */
/* Backend pages padding */
.backend-layout [data-flux-main] {
  padding: 40px !important;
}

/* Frontend pages - no padding */
.frontend-layout [data-flux-main] {
  padding: 0 !important;
}

/* ========================================
   PAGINATION CURSOR POINTER
   ======================================== */
/* Pagination links cursor pointer */
nav[role="navigation"] button,
nav[role="navigation"] a {
  cursor: pointer !important;
}

/* Disabled pagination elements keep default cursor */
nav[role="navigation"] span[aria-disabled="true"],
nav[role="navigation"] .cursor-default {
  cursor: default !important;
}

/* ========================================
   PER PAGE SELECT HOVER
   ======================================== */
/* Custom per page select options hover effect */
.custom-select-option:hover {
  background-color: #ebf2fe !important;
  color: rgb(63 63 70) !important;
}

.dark .custom-select-option:hover {
  background-color: #1e3a5f !important;
  color: rgb(228 228 231) !important;
}

/* ========================================
   TINYMCE CONTENT STYLING
   ======================================== */
/* TinyMCE rendered content */
.trix-content h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.trix-content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.trix-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.trix-content p {
  margin-bottom: 0.75rem;
}

.trix-content ul,
.trix-content ol {
  margin-left: 1.5rem;
  margin-bottom: 0.75rem;
}

.trix-content li {
  margin-bottom: 0.25rem;
}

.trix-content a {
  color: hsl(var(--primary));
  text-decoration: underline;
}

.trix-content strong {
  font-weight: 600;
}

.trix-content em {
  font-style: italic;
}

.trix-content blockquote {
  border-left: 4px solid hsl(var(--border));
  padding-left: 1rem;
  margin-left: 0;
  font-style: italic;
  color: hsl(var(--muted-foreground));
}

.trix-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  border: 1px solid hsl(var(--border));
}

.trix-content table th,
.trix-content table td {
  border: 1px solid hsl(var(--border));
  padding: 0.5rem;
  text-align: left;
}

.trix-content table th {
  background-color: hsl(var(--secondary));
  font-weight: 600;
}

.trix-content table tr:nth-child(even) {
  background-color: hsl(var(--secondary) / 0.3);
}

.trix-content img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: calc(var(--radius) - 2px);
}