/*
 * Planning Annualise - Clean Design
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #f8f9fa; color: #1a1a1a; line-height: 1.6; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
.animate-fade-in { animation: fadeIn 0.4s ease-out; }
.animate-slide-in { animation: slideIn 0.5s ease-out; }
.animate-stagger > * { animation: fadeIn 0.4s ease-out backwards; }
.animate-stagger > *:nth-child(1) { animation-delay: 0ms; }
.animate-stagger > *:nth-child(2) { animation-delay: 80ms; }
.animate-stagger > *:nth-child(3) { animation-delay: 160ms; }
.animate-stagger > *:nth-child(4) { animation-delay: 240ms; }
.animate-stagger > *:nth-child(5) { animation-delay: 320ms; }
.animate-stagger > *:nth-child(6) { animation-delay: 400ms; }

.nav-clean { background: white; border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03); }
.nav-link-clean { color: #6b7280; font-weight: 500; font-size: 0.9375rem; padding: 0.625rem 1rem; border-radius: 0.375rem; transition: all 0.15s ease; text-decoration: none; display: inline-flex; align-items: center; }
.nav-link-clean:hover { background: #f3f4f6; color: #1a1a1a; }
.nav-link-clean.active { background: #f3f4f6; color: #1a1a1a; font-weight: 600; }

.card-clean { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.5rem; transition: all 0.2s ease; }
.card-clean:hover { border-color: #d1d5db; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.card-clean-no-hover { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.5rem; }
.stat-card-clean { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.5rem; transition: all 0.2s ease; }
.stat-card-clean:hover { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.05); }

.btn-primary-clean { background: #2563eb; color: white; font-weight: 600; font-size: 0.9375rem; padding: 0.625rem 1.25rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.btn-primary-clean:hover { background: #1d4ed8; }
.btn-secondary-clean { background: white; color: #374151; font-weight: 600; font-size: 0.9375rem; padding: 0.625rem 1.25rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.btn-secondary-clean:hover { background: #f9fafb; border-color: #d1d5db; }
.btn-success-clean { background: #059669; color: white; font-weight: 600; font-size: 0.9375rem; padding: 0.625rem 1.25rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.btn-success-clean:hover { background: #047857; }
.btn-danger-clean { background: #dc2626; color: white; font-weight: 600; font-size: 0.9375rem; padding: 0.625rem 1.25rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.btn-danger-clean:hover { background: #b91c1c; }
.btn-warning-clean { background: #d97706; color: white; font-weight: 600; font-size: 0.9375rem; padding: 0.625rem 1.25rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.btn-warning-clean:hover { background: #b45309; }

.badge-clean { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; line-height: 1; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-gray { background: #f3f4f6; color: #374151; }
.badge-orange { background: #ffedd5; color: #9a3412; }
.badge-purple { background: #ede9fe; color: #5b21b6; }

.calendar-clean { background: white; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; }
.calendar-header-clean { background: #f9fafb; color: #374151; padding: 0.875rem; text-align: center; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #e5e7eb; }
.calendar-day-clean { min-height: 80px; padding: 0.5rem; border: 1px solid #e5e7eb; transition: all 0.15s ease; background: white; cursor: pointer; position: relative; }
.calendar-day-clean:hover { background: #f9fafb; }
.calendar-day-clean.today { background: #eff6ff; border-color: #2563eb; }
.calendar-day-clean.other-month { opacity: 0.4; background: #f9fafb; }
.calendar-day-clean.holiday { background: #fef2f2; }
.calendar-day-clean.leave { background: #fefce8; }

.calendar-day { min-height: 80px; padding: 0.5rem; border: 1px solid #e5e7eb; transition: all 0.15s ease; background: white; cursor: pointer; position: relative; }
.calendar-day:hover { background: #f0f4ff; }
.calendar-day-empty { background: #f9fafb; cursor: default; }
.calendar-day-today { background: #eff6ff; border-color: #3b82f6; }
.calendar-day-holiday { background: #fef2f2; border-color: #fca5a5; }
.calendar-day-weekend { background: #f9fafb; }
.calendar-day-has-shifts { border-left: 3px solid #3b82f6; }
.calendar-day-number { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; }
.tooltip-calendar { pointer-events: none; }

.input-clean { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.9375rem; transition: all 0.15s ease; background: white; }
.input-clean:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.label-clean { display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.375rem; }

.table-clean { width: 100%; border-collapse: collapse; }
.table-clean th { background: #f9fafb; padding: 0.75rem 1rem; text-align: left; font-size: 0.8125rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #e5e7eb; }
.table-clean td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; font-size: 0.9375rem; }
.table-clean tr:hover td { background: #f9fafb; }

.tooltip-clean { position: absolute; z-index: 50; background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); font-size: 0.8125rem; min-width: 200px; }

.divider-clean { height: 1px; background: #e5e7eb; margin: 1.5rem 0; }
.text-muted { color: #6b7280; }
.text-primary { color: #2563eb; }

.template-grid { display: grid; grid-template-columns: 80px repeat(7, 1fr); gap: 2px; }
.template-grid-header { background: #f3f4f6; padding: 0.5rem; text-align: center; font-weight: 600; font-size: 0.8125rem; border-radius: 0.25rem; }
.template-grid-cell { min-height: 60px; padding: 0.25rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.25rem; }
.template-slot-tag { background: #dbeafe; color: #1e40af; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; margin-bottom: 0.125rem; display: block; }

@media (max-width: 768px) { .template-grid { grid-template-columns: 1fr; } }