/**
 * Staffing Analysis Dashboard - Main Stylesheet
 * Modern Blue Theme with Tailwind CSS Integration
 */

@import url('https://rsms.me/inter/inter.css');

* {
  @apply box-border;
}

html {
  @apply scroll-smooth;
}

body {
  @apply font-sans bg-neutral-50 text-neutral-900;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1 {
  @apply text-4xl font-bold text-neutral-900 mb-2;
}

h2 {
  @apply text-3xl font-bold text-neutral-900 mb-2;
}

h3 {
  @apply text-2xl font-bold text-neutral-800 mb-1;
}

h4 {
  @apply text-xl font-semibold text-neutral-800;
}

h5 {
  @apply text-lg font-semibold text-neutral-700;
}

h6 {
  @apply text-base font-semibold text-neutral-700;
}

/* Paragraphs and text */
p {
  @apply text-base text-neutral-600 leading-relaxed;
}

a {
  @apply text-primary-600 hover:text-primary-700 underline transition-colors;
}

/* Primary Button */
.btn-primary {
  @apply px-4 py-2 bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 active:bg-primary-800 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 cursor-pointer;
}

.btn-primary:disabled {
  @apply bg-neutral-400 cursor-not-allowed;
}

/* Secondary Button */
.btn-secondary {
  @apply px-4 py-2 bg-neutral-200 text-neutral-900 font-medium rounded-lg hover:bg-neutral-300 active:bg-neutral-400 transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 cursor-pointer;
}

.btn-secondary:disabled {
  @apply bg-neutral-300 text-neutral-500 cursor-not-allowed;
}

/* Small Button */
.btn-sm {
  @apply px-3 py-1 text-sm;
}

/* Large Button */
.btn-lg {
  @apply px-6 py-3 text-lg;
}

/* Danger Button */
.btn-danger {
  @apply px-4 py-2 bg-danger text-white font-medium rounded-lg hover:bg-red-600 active:bg-red-700 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 cursor-pointer;
}

/* Card Component */
.card {
  @apply bg-white rounded-xl shadow-md p-6 border border-neutral-200 hover:shadow-lg transition-shadow;
}

.card-sm {
  @apply bg-white rounded-lg shadow-sm p-4 border border-neutral-100;
}

.card-header {
  @apply border-b border-neutral-200 pb-4 mb-4;
}

.card-footer {
  @apply border-t border-neutral-200 pt-4 mt-4;
}

/* Input Fields */
input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'],
select,
textarea {
  @apply w-full px-4 py-2 border border-neutral-300 rounded-lg font-sans text-base focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all;
}

input::placeholder,
textarea::placeholder {
  @apply text-neutral-400;
}

input:disabled,
select:disabled,
textarea:disabled {
  @apply bg-neutral-50 text-neutral-500 cursor-not-allowed;
}

/* Form Groups */
.form-group {
  @apply mb-4;
}

.form-group label {
  @apply block text-sm font-medium text-neutral-700 mb-2;
}

.form-group .help-text {
  @apply text-xs text-neutral-500 mt-1;
}

.form-group.error input,
.form-group.error select,
.form-group.error textarea {
  @apply border-danger focus:ring-red-500;
}

.form-group.error .error-message {
  @apply text-sm text-danger mt-1;
}

/* Tables */
table {
  @apply w-full border-collapse;
}

thead {
  @apply bg-neutral-100 border-b-2 border-neutral-300;
}

th {
  @apply px-4 py-3 text-left text-sm font-semibold text-neutral-900;
}

tbody tr {
  @apply border-b border-neutral-200 hover:bg-neutral-50 transition-colors;
}

td {
  @apply px-4 py-3 text-sm text-neutral-600;
}

tbody tr:last-child {
  @apply border-b-0;
}

/* Editable Table Cells */
td.editable {
  @apply p-0;
}

td.editable input {
  @apply w-full px-4 py-3 border-0 rounded-0 focus:ring-primary-500 focus:bg-primary-50;
}

td.calculated {
  @apply bg-neutral-50 font-medium text-neutral-800;
}

/* Navigation */
nav {
  @apply bg-white border-b border-neutral-200 shadow-sm;
}

.nav-link {
  @apply px-4 py-2 text-neutral-600 hover:text-primary-600 font-medium transition-colors;
}

.nav-link.active {
  @apply text-primary-600 border-b-2 border-primary-600;
}

/* Sidebar */
.sidebar {
  @apply bg-white border-r border-neutral-200 w-64 fixed top-0 left-0 h-screen overflow-y-auto;
}

.sidebar-item {
  @apply px-6 py-3 text-neutral-600 hover:bg-neutral-50 border-l-4 border-transparent cursor-pointer transition-colors;
}

.sidebar-item.active {
  @apply bg-primary-50 text-primary-600 border-l-primary-600;
}

/* Main Content */
main {
  @apply flex-1 overflow-auto;
}

.container {
  @apply max-w-7xl mx-auto px-4 py-6;
}

/* Grid Layout */
.grid-2 {
  @apply grid grid-cols-2 gap-6;
}

.grid-3 {
  @apply grid grid-cols-3 gap-6;
}

.grid-4 {
  @apply grid grid-cols-4 gap-6;
}

/* Responsive Grid */
@media (max-width: 1200px) {
  .grid-4 {
    @apply grid-cols-3;
  }
}

@media (max-width: 768px) {
  .grid-4,
  .grid-3 {
    @apply grid-cols-2;
  }
  .grid-2 {
    @apply grid-cols-1;
  }
  .sidebar {
    @apply hidden;
  }
}

/* KPI Cards */
.kpi-card {
  @apply card text-center;
}

.kpi-value {
  @apply text-3xl font-bold text-primary-600 my-2;
}

.kpi-label {
  @apply text-sm text-neutral-500 font-medium uppercase;
}

.kpi-change {
  @apply text-sm font-semibold mt-2;
}

.kpi-change.positive {
  @apply text-success;
}

.kpi-change.negative {
  @apply text-danger;
}

/* Badge */
.badge {
  @apply inline-block px-3 py-1 text-xs font-semibold rounded-full;
}

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

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

.badge-warning {
  @apply bg-warning bg-opacity-20 text-warning;
}

.badge-danger {
  @apply bg-danger bg-opacity-20 text-danger;
}

.badge-info {
  @apply bg-info bg-opacity-20 text-info;
}

/* Alert */
.alert {
  @apply px-4 py-3 rounded-lg mb-4 border;
}

.alert-info {
  @apply bg-blue-50 border-blue-200 text-blue-800;
}

.alert-success {
  @apply bg-green-50 border-green-200 text-green-800;
}

.alert-warning {
  @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.alert-danger {
  @apply bg-red-50 border-red-200 text-red-800;
}

/* Loading Spinner */
.spinner {
  @apply inline-block animate-spin h-5 w-5 border-4 border-neutral-300 border-t-primary-600 rounded-full;
}

/* Utility Classes */
.text-center {
  @apply text-center;
}

.text-right {
  @apply text-right;
}

.font-bold {
  @apply font-bold;
}

.font-semibold {
  @apply font-semibold;
}

.uppercase {
  @apply uppercase;
}

.flex-center {
  @apply flex items-center justify-center;
}

.flex-between {
  @apply flex items-center justify-between;
}

.gap-4 {
  @apply gap-4;
}

.gap-6 {
  @apply gap-6;
}

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

.mb-4 {
  @apply mb-4;
}

.px-4 {
  @apply px-4;
}

.py-4 {
  @apply py-4;
}

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

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

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

.animate-slideUp {
  animation: slideUp 0.3s ease-out;
}

/* Print Styles */
@media print {
  @page {
    margin: 1cm;
  }

  body {
    @apply bg-white;
  }

  .no-print {
    @apply hidden;
  }
}