/* =============================================
Z-INDEX SYSTEM — SINGLE SOURCE OF TRUTH
============================================= */
:root {
  --z-header: 1000;
  --z-tabs: 900;
  --z-table-head: 800;
  --z-dropdown: 1100;
  --z-modal: 2000;
  --z-modal-top: 2100;
  --z-toast: 3000;
  /* Dynamic sticky offsets — updated by JS on resize */
  --header-h: 76px;
  --tabs-h: 52px;
  --sticky-tab-top: 76px; /* = header height */
  --sticky-table-header-top: 128px; /* = header + cat-bar */
  --sticky-thead-top: 180px; /* = header + cat-bar + table-section-header */
}

body { 
  font-family: 'Outfit', 'Cairo', sans-serif; 
  background-color: #f8fafc; 
}

.glass-card {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

html.dark .glass-card-landing {
  background: rgba(30, 41, 59, 0.7) !important;
  border-color: rgba(51, 65, 85, 0.5) !important;
}

.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hover-lift:hover {
  transform: translateY(-4px) !important;
}

.glow-green { 
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.12), 0 8px 10px -6px rgba(16, 185, 129, 0.12) !important; 
}
.glow-green:hover { 
  box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.2), 0 10px 10px -5px rgba(16, 185, 129, 0.15) !important; 
}

.glow-red { 
  box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.12), 0 8px 10px -6px rgba(239, 68, 68, 0.12) !important; 
}
.glow-red:hover { 
  box-shadow: 0 20px 25px -5px rgba(239, 68, 68, 0.2), 0 10px 10px -5px rgba(239, 68, 68, 0.15) !important; 
}

.glow-blue { 
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15), 0 8px 10px -6px rgba(59, 130, 246, 0.15) !important; 
}
.glow-blue:hover { 
  box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.25), 0 10px 10px -5px rgba(59, 130, 246, 0.2) !important; 
}

.glow-amber { 
  box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.12), 0 8px 10px -6px rgba(245, 158, 11, 0.12) !important; 
}
.glow-amber:hover { 
  box-shadow: 0 20px 25px -5px rgba(245, 158, 11, 0.2), 0 10px 10px -5px rgba(245, 158, 11, 0.15) !important; 
}

.tab-btn.active { 
  background-color: #1e3a8a; 
  color: white; 
  border-color: #1e3a8a; 
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar { 
  width: 6px; 
  height: 6px; 
}
::-webkit-scrollbar-track { 
  background: #f1f1f1; 
  border-radius: 10px; 
}
::-webkit-scrollbar-thumb { 
  background: #cbd5e1; 
  border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { 
  background: #94a3b8; 
}

/* Animations */
.fade-in { 
  animation: fadeIn 0.2s ease-in-out; 
}
@keyframes fadeIn { 
  from { opacity: 0; transform: translateY(5px); } 
  to { opacity: 1; transform: translateY(0); } 
}

/* Inline Edit Input */
.inline-input {
  width: 100%;
  background-color: white;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.25rem 0.50rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  outline: none;
  transition: all 0.15s ease-in-out;
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.inline-input:focus {
  background-color: rgba(219, 234, 254, 0.3);
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#main-table-thead,
#main-table-thead tr,
#main-table-thead th {
  background-color: white !important;
}

html.dark #main-table-thead,
html.dark #main-table-thead tr,
html.dark #main-table-thead th {
  background-color: #1e293b !important;
}

/* Modes Styling */
.client-mode .hide-client { display: none !important; }
.client-mode .show-client { display: flex !important; }
.show-client { display: none !important; }
.employee-mode .strict-hide-employee { display: none !important; }
.employee-mode .show-employee { display: flex !important; }
.show-employee { display: none !important; } 
.hide-income-widgets .income-widget { display: none !important; }

/* Print Settings */
@media print {
  html, body, html.dark, html.dark body { 
    background-color: #ffffff !important; 
    background: #ffffff !important; 
    color: #0f172a !important; 
    -webkit-print-color-adjust: exact !important; 
    print-color-adjust: exact !important; 
  }
  body > *:not(#print-area) { display: none !important; }
  .no-print, .fixed.inset-0 { display: none !important; }
  .print-only { display: block !important; }
  @page { size: A4 portrait; margin: 1.2cm; }
  table { page-break-inside: auto; width: 100%; border-collapse: collapse; margin-bottom: 20px; }
  tr { page-break-inside: avoid; page-break-after: auto; }
  th, td { border: 1px solid #cbd5e1; padding: 6px; text-align: right; font-size: 11px; color: #0f172a !important; background-color: transparent; }
  th { background-color: #f1f5f9 !important; font-weight: bold; color: #1e293b !important; }
  h2 { font-size: 15px; border-bottom: 2px solid #1e3a8a; padding-bottom: 3px; margin-top: 15px; margin-bottom: 8px; }
  .print-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #1e3a8a; padding-bottom: 10px; margin-bottom: 15px; }
  .print-logo { max-width: 100px; max-height: 60px; }
}

/* Dynamic Ticker Slide Animation */
@keyframes ticker-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Ticker clock */
#ticker-clock { font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }

/* Dark Mode Styling Overrides */
html.dark body { background-color: #0f172a !important; color: #f1f5f9 !important; }
html.dark header { background-color: #020617 !important; border-bottom: 1px solid #1e293b; }
html.dark .bg-white { background-color: #1e293b !important; }
html.dark .border-slate-100, html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .text-slate-800 { color: #f1f5f9 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #cbd5e1 !important; }
html.dark .text-slate-400 { color: #475569 !important; }
html.dark .bg-slate-50 { background-color: #0f172a !important; }
html.dark .bg-slate-100 { background-color: #1e293b !important; }
html.dark .bg-slate-50\/30 { background-color: #0f172a !important; }
html.dark .bg-slate-50\/50 { background-color: #0f172a !important; }
html.dark .inline-input { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }
html.dark select, html.dark input, html.dark textarea { background-color: #0f172a !important; color: #f1f5f9 !important; border-color: #334155 !important; }
html.dark select option { background-color: #0f172a; color: #f1f5f9; }
html.dark .tab-btn:not(.active) { background-color: #1e293b !important; color: #94a3b8 !important; }
html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5) !important; }
html.dark #smart-ticker-bar { background-color: #020617 !important; border-top: 1px solid #1e293b; }
html.dark .text-slate-900 { color: #f8fafc !important; }
html.dark .bg-slate-900 { background-color: #020617 !important; }
html.dark .admin-modal > div { background-color: #1e293b !important; border: 1px solid #334155; }
html.dark .admin-modal input, html.dark .admin-modal select, html.dark .admin-modal textarea { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }

html.dark #categoryModal > div, 
html.dark #transactionModal > div, 
html.dark #settingsModal > div, 
html.dark #contractorModal > div, 
html.dark #contractorDetailsModal > div, 
html.dark #exportShareModal > div, 
html.dark #employeeExportModal > div, 
html.dark #importPromptModal > div {
  background-color: #1e293b !important;
  border: 1px solid #334155;
  color: #f1f5f9;
}

html.dark .bg-slate-200 { background-color: #334155 !important; color: #cbd5e1 !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }
html.dark .hover\:bg-slate-50:hover { background-color: #1e293b !important; }

/* SAAS LANDING GLOW & MOCKUP STYLES */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.08); }
}

.animate-float {
  animation: float-slow 6s ease-in-out infinite;
}
.animate-glow {
  animation: pulse-glow 8s ease-in-out infinite;
}

.glass-card {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.15);
  transform: translateY(-4px);
}

.text-gradient {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}