@tailwind base;
@tailwind components;
@tailwind utilities;
/* Calendar styles */
/* Calendar container */
.calendar-container {
  @apply bg-white rounded-lg shadow-sm p-4 mb-6; }

/* Calendar grid */
.calendar-grid {
  @apply grid grid-cols-7 gap-2; }

/* Calendar day header */
.calendar-day-header {
  @apply text-center text-sm font-medium text-gray-600 py-2; }

/* Calendar day cell */
.calendar-day {
  @apply bg-white rounded-lg border border-gray-200 p-2 min-h-[120px] relative transition-all duration-200 hover:shadow-md; }

.calendar-day.today {
  @apply border-primary-400 bg-primary-50 border-2; }

.calendar-day.weekend {
  @apply bg-gray-50; }

/* Day header with date and day name */
.day-header {
  @apply flex justify-between items-center mb-2 border-b border-gray-100 pb-1; }

.day-name {
  @apply text-xs font-semibold text-gray-700; }

.day-date {
  @apply text-xs text-gray-500; }

/* Day content */
.day-content {
  @apply space-y-2; }

/* Day total hours */
.day-total-hours {
  @apply text-sm font-medium text-gray-800 bg-blue-50 rounded-md p-1 text-center; }

/* Project hours in day */
.day-project-hours {
  @apply flex justify-between items-center text-xs p-1 rounded-md bg-gray-50; }

.project-name {
  @apply font-medium text-gray-700 truncate flex-1; }

.project-hours {
  @apply text-gray-600 whitespace-nowrap; }

/* No entries message */
.no-entries {
  @apply text-xs text-gray-400 italic text-center mt-2; }

/* Project filter */
.project-filter {
  @apply mb-4 overflow-x-auto pb-2; }

.project-filter-item {
  @apply px-3 py-1 rounded-md text-sm text-gray-600 bg-gray-100 transition-all duration-200; }

.project-filter-item:hover {
  @apply bg-gray-200; }

.project-filter-item.active {
  @apply bg-blue-100 text-blue-700 font-medium; }

/* Metrics panel */
.metrics-panel {
  @apply bg-white rounded-lg shadow-sm p-4 mb-6; }

.metrics-header {
  @apply border-b border-gray-100 pb-3 mb-3; }

.metrics-content {
  @apply space-y-4; }

.metric-card {
  @apply bg-blue-50 rounded-lg p-3 text-center; }

.metric-label {
  @apply text-sm text-gray-600 mb-1; }

.metric-value {
  @apply text-xl font-bold text-blue-700; }

.metric-section {
  @apply mt-4; }

.project-hours-list {
  @apply space-y-2 mt-2; }

.project-hours-item {
  @apply flex justify-between items-center p-2 rounded-md bg-gray-50 border border-gray-100; }

/* Weekly view header */
.calendar-header {
  @apply mb-4; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .calendar-grid {
    @apply grid-cols-1; }
  .calendar-day {
    @apply mb-2; }
  .day-header {
    @apply justify-center; }
  .day-name {
    @apply mr-2; } }

/* Add some animations */
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.calendar-container {
  animation: fadeIn 0.3s ease-in-out; }

/* Hover effects */
.calendar-day:hover {
  @apply border-blue-300; }

.day-project-hours:hover {
  @apply bg-blue-50; }

/* Time entries list */
.time-entries-list {
  @apply space-y-2 overflow-y-auto max-h-[200px]; }

/* Time entry */
.time-entry {
  @apply rounded-md p-2 text-white shadow-sm relative; }

.time-entry-hours {
  @apply text-sm font-medium; }

.time-entry-project {
  @apply text-xs font-medium; }

.time-entry-task {
  @apply text-xs opacity-90; }

/* Project tabs */
.project-tabs {
  @apply bg-white rounded-lg shadow-sm p-2 mb-4; }

.project-tab {
  @apply px-4 py-2 text-sm font-medium text-gray-600 rounded-md cursor-pointer whitespace-nowrap; }

.project-tab.active {
  @apply bg-primary-100 text-primary-700; }

/* Calendar navigation buttons */
.calendar-nav-btn {
  @apply px-3 py-1 text-sm font-medium text-gray-600 bg-white rounded-md border border-gray-200 hover:bg-gray-50; }

/* Loading state */
.calendar-loading::after {
  content: "";
  @apply fixed inset-0 bg-black bg-opacity-20 flex items-center justify-center z-50; }

/* Responsive adjustments */
@media (max-width: 640px) {
  .calendar-grid {
    @apply grid-cols-1; }
  .calendar-day-header {
    @apply hidden; }
  .calendar-day {
    @apply mb-4; }
  .day-date {
    @apply text-sm font-medium; } }
/* PDF Styles */
body {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #333;
}

.invoice-header {
  margin-bottom: 30px;
}

.invoice-header h1 {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 10px;
}

.company-details, .client-details {
  margin-bottom: 20px;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.invoice-table th {
  background-color: #f8f9fa;
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid #dee2e6;
}

.invoice-table td {
  padding: 10px;
  border-bottom: 1px solid #dee2e6;
}

.amount {
  text-align: right;
}

.total-section {
  margin-top: 20px;
  text-align: right;
}

.total-section .total-row {
  margin: 5px 0;
}

.total-section .total-label {
  font-weight: bold;
  margin-right: 20px;
}

.footer {
  margin-top: 40px;
  text-align: center;
  font-size: 10px;
  color: #666;
  border-top: 1px solid #dee2e6;
  padding-top: 20px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is suggested that you include your application-specific styles in a separate file instead of
 * adding them here directly.
 *


 */