/* REWE Personalmanagement App - Redesign CSS - Updated */

/* TailwindCSS Direktiven */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Inline Edit Styles */
.inline-edit-field {
    @apply transition-all duration-200;
}

.inline-edit-field:hover {
    @apply bg-gray-50 rounded;
}

.inline-edit-field.editing {
    @apply bg-blue-50 border border-blue-200 rounded;
}

.inline-edit-buttons {
    @apply opacity-0 transition-opacity duration-200;
}

.group:hover .inline-edit-buttons {
    @apply opacity-100;
}

/* Feedback Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.feedback-slide-in {
    animation: slideInRight 0.3s ease-out;
}

/* Module-specific CSS imports */
@import './salary.css';
@import './absence.css';

/* CSS Custom Properties für REWE Corporate Design */
:root {
  --rewe-red: #E30613;
  --rewe-orange: #FFCC00;
  --rewe-dark-gray: #333333;
  --rewe-medium-gray: #666666;
  --rewe-light-gray: #F5F5F5;
  --rewe-white: #FFFFFF;

  --rewe-success: #28a745;
  --rewe-warning: #ffc107;
  --rewe-danger: #dc3545;
  --rewe-info: #4a90e2;

  --status-created: #6c757d;
  --status-signed: #fd7e14;
  --status-delivered: #28a745;

  /* Light Mode Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6b7280;
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
}

/* Dark Mode Colors */
:root.dark {
  --bg-primary: #1f2937;
  --bg-secondary: #111827;
  --bg-tertiary: #374151;
  --text-primary: #f9fafb;
  --text-secondary: #e5e7eb;
  --text-tertiary: #9ca3af;
  --border-primary: #374151;
  --border-secondary: #4b5563;
}

/* Reset and Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  margin: 0;
  line-height: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rewe-dark-gray);
  background-color: var(--rewe-light-gray);
}

/* Custom Component Classes */
@layer components {
  .btn-rewe {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-rewe shadow-rewe;
    @apply bg-rewe-red text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rewe-red;
    @apply transition-all duration-rewe;
  }

  .btn-rewe-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-rewe shadow-rewe;
    @apply bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rewe-red;
    @apply transition-all duration-rewe;
  }

  .card-rewe {
    @apply bg-white rounded-rewe shadow-rewe border border-gray-200;
  }

  .input-rewe {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-rewe shadow-sm;
    @apply focus:outline-none focus:ring-rewe-red focus:border-rewe-red;
    @apply transition-all duration-rewe;
  }

  .badge-status {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-created {
    @apply bg-gray-100 text-gray-800;
  }

  .badge-signed {
    @apply bg-orange-100 text-orange-800;
  }

  .badge-delivered {
    @apply bg-green-100 text-green-800;
  }

  .dark-mode-transition {
    @apply transition-colors duration-300 ease-in-out;
  }
}

/* Custom Utility Classes */
@layer utilities {
  .text-rewe-red {
    color: var(--rewe-red);
  }

  .bg-rewe-red {
    background-color: var(--rewe-red);
  }

  .border-rewe-red {
    border-color: var(--rewe-red);
  }

  .text-rewe-orange {
    color: var(--rewe-orange);
  }

  .bg-rewe-orange {
    background-color: var(--rewe-orange);
  }

  .shadow-rewe-focus {
    box-shadow: var(--rewe-focus);
  }
}

/* Dark Mode Specific Styles */
.dark-mode-icon-moon {
  display: block;
}

.dark-mode-icon-sun {
  display: none;
}

:root.dark .dark-mode-icon-moon {
  display: none;
}

:root.dark .dark-mode-icon-sun {
  display: block;
}

/* Responsive Design Helpers */
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}

@media (min-width: 769px) {
  .desktop-hidden {
    display: none;
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-break-before {
    page-break-before: always;
  }
  
  .print-break-after {
    page-break-after: always;
  }
}

/* Animation Classes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.animate-slide-in {
  animation: slideIn 0.3s ease-in-out;
}

/* Focus Styles for Accessibility */
.focus-visible:focus {
  outline: 2px solid var(--rewe-red);
  outline-offset: 2px;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}