/* ============================================================================
   OPLEX ADMIN - GLOBAL LAYOUT & ENHANCEMENTS SYSTEM
   Version: 4.0 FINAL
   ============================================================================ */

/* ========================================
   GLOBAL LAYOUT SYSTEM - 1200px MAX-WIDTH
   ======================================== */

/* Core layout containers - wszystkie główne elementy wyśrodkowane */
.tab-content .navigation-bar,
.tab-content .sub-tabs,
.tab-content .sub-tabs-secondary,
.tab-content .employees-grid,
.tab-content .weeks-container,
.tab-content #payrollHeroContainer,
.tab-content #payrollResults,
.tab-content #absencesList,
.tab-content .costs-warning-box,
.tab-content > .costs-source-card {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Integration panel już ma max-width */
.integration-panel {
  max-width: 1200px;
  margin: 0 auto;
}

/* Costs view - inline styled elements need !important */
#costsView > div[style*="background"] {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Analyzer views content */
#analyzerInPostView > .analyzer-upload-card,
#analyzerInPostView > #inpostSummary,
#analyzerInPostView > #inpostReport,
#analyzerInPostView > #inpostExport,
#analyzerAdsView > .analyzer-upload-card,
#analyzerAdsView > #adsExport,
#analyzerAdsView > #adsDashboard,
#analyzerAdsView > #adsFilters,
#analyzerAdsView > #adsTable,
#analyzerBillingView > .analyzer-upload-card,
#analyzerBillingView > #billingSummary,
#analyzerBillingView > #billingReport,
#analyzerBillingView > #billingExport {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Profitability views */
#profitabilityBusinessView > div:first-child,
#profitabilityOfferView > div:first-child {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Settings grid */
.settings-grid {
  max-width: 1200px;
  margin: 0 auto;
}

/* Notes grid */
/* Audit view */
#auditView > div {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   SMOOTH ANIMATIONS & TRANSITIONS
   ======================================== */

/* Fade-in animation dla wszystkich tab-content */
.tab-content {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Smooth transitions dla interaktywnych elementów */
.tile,
.employee-card,
.premium-card,
.week-card-payroll,
.integration-card,
.analyzer-upload-card,
.ads-dashboard,
.ads-export,
.ads-filters,
.ads-table,
.setting-card,
button:not(.no-transition) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover micro-interactions - subtle lift */
.tile:hover,
.employee-card:hover,
.premium-card:hover,
.integration-card:hover,
.setting-card:hover {
  transform: translateY(-4px);
}

/* Button hover states */
button:hover:not(:disabled):not(.no-hover) {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

/* ========================================
   LOADING STATES & SKELETONS
   ======================================== */

/* Skeleton loading animation */
.skeleton-card,
.skeleton-loading {
  background: linear-gradient(
    90deg,
    rgba(31, 41, 55, 0.8) 25%,
    rgba(55, 65, 81, 0.8) 50%,
    rgba(31, 41, 55, 0.8) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 12px;
  min-height: 100px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Loading state dla kart */
.card-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.card-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(59, 130, 246, 0.3);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ========================================
   ACCESSIBILITY & FOCUS STATES
   ======================================== */

/* Focus visible dla keyboard navigation */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove outline dla mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus dla buttons */
button:focus-visible,
.btn:focus-visible,
.sub-tab:focus-visible,
.btn-nav:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* ========================================
   SCROLL BEHAVIOR
   ======================================== */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(31, 41, 55, 0.3);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.5);
  border-radius: 5px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.7);
}

/* ========================================
   EMPTY STATES
   ======================================== */

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  animation: fadeInUp 0.5s ease;
}

.empty-state::before {
  content: '📭';
  display: block;
  font-size: 4rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* ========================================
   STAGGERED ANIMATIONS
   ======================================== */

/* Karty pojawiają się jedna po drugiej */
.employees-grid > .employee-card,
.tiles-admin > .tile {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.employees-grid > .employee-card:nth-child(1) { animation-delay: 0.05s; }
.employees-grid > .employee-card:nth-child(2) { animation-delay: 0.1s; }
.employees-grid > .employee-card:nth-child(3) { animation-delay: 0.15s; }
.employees-grid > .employee-card:nth-child(4) { animation-delay: 0.2s; }
.employees-grid > .employee-card:nth-child(5) { animation-delay: 0.25s; }
.employees-grid > .employee-card:nth-child(6) { animation-delay: 0.3s; }

.tiles-admin > .tile:nth-child(1) { animation-delay: 0.05s; }
.tiles-admin > .tile:nth-child(2) { animation-delay: 0.1s; }
.tiles-admin > .tile:nth-child(3) { animation-delay: 0.15s; }

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

/* Zapewnienie że na małych ekranach wszystko jest czytelne */
@media (max-width: 1240px) {
  .tab-content .navigation-bar,
  .tab-content .sub-tabs,
  .tab-content .sub-tabs-secondary,
  .tab-content .employees-grid,
  .tab-content .weeks-container,
  .integration-panel,
  .settings-grid {
    max-width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
  }
}

@media (max-width: 768px) {
  /* Disable stagger animations on mobile dla performance */
  .employees-grid > .employee-card,
  .tiles-admin > .tile {
    animation-delay: 0s !important;
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration dla animations */
.tile,
.employee-card,
.premium-card,
button {
  will-change: transform;
}

/* Reduce motion dla users z preferencją */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .tab-content {
    animation: none;
  }
}

/* ========================================
   FINAL POLISH
   ======================================== */

/* Zapewnienie że wszystko jest płynne */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent text selection podczas drag/click interactions */
.tile,
button {
  user-select: none;
  -webkit-user-select: none;
}

/* Allow text selection w content areas */
.tile-content p {
  user-select: text;
  -webkit-user-select: text;
}

/* ========================================
   COSTS WARNING BOX
   ======================================== */

.costs-warning-box {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  color: #78350f;
  border: 2px solid #fbbf24;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

/* ENTERPRISE PATCH — HARD EDGES */
*,
*::before,
*::after {
  border-radius: 0 !important;
}