/* MPC Employee Engagement Survey - Main Styles */

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

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base Styles */
@layer base {
    html {
        font-family: 'Roboto', system-ui, sans-serif;
        scroll-behavior: smooth;
    }

    body {
        @apply bg-gray-50 text-gray-800 antialiased;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-semibold text-secondary-900;
    }
}

/* Component Styles */
@layer components {
    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-primary {
        @apply btn bg-primary-400 text-white hover:bg-primary-500 focus:ring-primary-400;
    }

    .btn-secondary {
        @apply btn bg-secondary-900 text-white hover:bg-secondary-800 focus:ring-secondary-900;
    }

    .btn-outline {
        @apply btn border-2 border-primary-400 text-primary-500 bg-transparent hover:bg-primary-50 focus:ring-primary-400;
    }

    .btn-ghost {
        @apply btn text-gray-600 hover:bg-gray-100 focus:ring-gray-400;
    }

    .btn-danger {
        @apply btn bg-danger text-white hover:bg-red-600 focus:ring-red-500;
    }

    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }

    .btn-lg {
        @apply px-6 py-3 text-base;
    }

    /* Cards */
    .card {
        @apply bg-white rounded-card shadow-card;
    }

    .card-header {
        @apply px-6 py-4 border-b border-gray-100;
    }

    .card-body {
        @apply px-6 py-4;
    }

    .card-footer {
        @apply px-6 py-4 border-t border-gray-100 bg-gray-50 rounded-b-card;
    }

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

    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
    }

    .form-input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-400 focus:border-primary-400 transition-colors;
    }

    .form-select {
        @apply form-input bg-white;
    }

    .form-textarea {
        @apply form-input resize-none;
    }

    .form-checkbox {
        @apply h-4 w-4 text-primary-400 border-gray-300 rounded focus:ring-primary-400;
    }

    .form-radio {
        @apply h-4 w-4 text-primary-400 border-gray-300 focus:ring-primary-400;
    }

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

    .form-help {
        @apply text-gray-500 text-sm mt-1;
    }

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

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

    .badge-secondary {
        @apply badge bg-secondary-100 text-secondary-700;
    }

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

    .badge-warning {
        @apply badge bg-yellow-100 text-yellow-700;
    }

    .badge-danger {
        @apply badge bg-red-100 text-red-700;
    }

    .badge-info {
        @apply badge bg-blue-100 text-blue-700;
    }

    /* Stat Cards */
    .stat-card {
        @apply card p-6 text-center;
    }

    .stat-value {
        @apply text-3xl font-bold text-secondary-900;
    }

    .stat-label {
        @apply text-sm text-gray-500 mt-1;
    }

    .stat-sublabel {
        @apply text-xs text-gray-400 mt-0.5;
    }

    /* Score Bars */
    .score-bar {
        @apply h-4 rounded-full bg-gray-200 overflow-hidden;
    }

    .score-bar-fill {
        @apply h-full rounded-full transition-all duration-500;
    }

    .score-excellent {
        @apply bg-score-excellent;
    }

    .score-good {
        @apply bg-score-good;
    }

    .score-moderate {
        @apply bg-score-moderate;
    }

    .score-attention {
        @apply bg-score-attention;
    }

    .score-critical {
        @apply bg-score-critical;
    }

    /* Progress Bar */
    .progress {
        @apply h-2 rounded-full bg-gray-200 overflow-hidden;
    }

    .progress-bar {
        @apply h-full rounded-full bg-primary-400 transition-all duration-300;
    }

    /* Table */
    .table {
        @apply min-w-full divide-y divide-gray-200;
    }

    .table thead {
        @apply bg-gray-50;
    }

    .table th {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
    }

    .table td {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-700;
    }

    .table tbody tr {
        @apply hover:bg-gray-50 transition-colors;
    }

    /* Alert */
    .alert {
        @apply p-4 rounded-md mb-4;
    }

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

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

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

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

    /* Navigation */
    .nav-link {
        @apply flex items-center px-4 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-colors;
    }

    .nav-link.active {
        @apply bg-primary-50 text-primary-600;
    }

    .nav-link-icon {
        @apply w-5 h-5 mr-3;
    }

    /* Sidebar */
    .sidebar {
        @apply fixed inset-y-0 left-0 w-64 bg-white shadow-lg z-30;
    }

    .sidebar-header {
        @apply flex items-center justify-center h-16 px-4 border-b border-gray-100;
    }

    .sidebar-nav {
        @apply flex-1 px-4 py-6 space-y-1 overflow-y-auto;
    }

    /* Dropdown */
    .dropdown {
        @apply relative inline-block;
    }

    .dropdown-menu {
        @apply absolute right-0 mt-2 w-48 bg-white rounded-md shadow-dropdown py-1 z-50 hidden;
    }

    .dropdown-menu.show {
        @apply block;
    }

    .dropdown-item {
        @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100;
    }

    /* Modal */
    .modal-backdrop {
        @apply fixed inset-0 bg-black bg-opacity-50 z-40;
    }

    .modal {
        @apply fixed inset-0 z-50 flex items-center justify-center p-4;
    }

    .modal-content {
        @apply bg-white rounded-lg shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto;
    }

    .modal-header {
        @apply px-6 py-4 border-b border-gray-100;
    }

    .modal-body {
        @apply px-6 py-4;
    }

    .modal-footer {
        @apply px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-end space-x-2;
    }

    /* Heatmap Cell */
    .heatmap-cell {
        @apply flex items-center justify-center p-2 text-sm font-medium rounded text-white min-w-[60px];
    }

    /* Engagement Gauge */
    .engagement-gauge {
        @apply relative w-32 h-32 mx-auto;
    }

    .engagement-gauge-circle {
        @apply w-full h-full rounded-full border-8 border-gray-200;
    }

    .engagement-gauge-value {
        @apply absolute inset-0 flex flex-col items-center justify-center;
    }

    /* Likert Scale */
    .likert-scale {
        @apply flex flex-col space-y-3;
    }

    .likert-option {
        @apply flex items-center p-4 rounded-lg border-2 border-gray-200 cursor-pointer transition-all hover:border-primary-300 hover:bg-primary-50;
    }

    .likert-option.selected {
        @apply border-primary-400 bg-primary-50;
    }

    .likert-option input[type="radio"] {
        @apply hidden;
    }

    .likert-option .likert-radio {
        @apply w-5 h-5 rounded-full border-2 border-gray-300 mr-3 flex items-center justify-center;
    }

    .likert-option.selected .likert-radio {
        @apply border-primary-400;
    }

    .likert-option.selected .likert-radio::after {
        content: '';
        @apply w-3 h-3 rounded-full bg-primary-400;
    }

    /* Survey Progress */
    .survey-progress {
        @apply fixed top-0 left-0 right-0 h-1 bg-gray-200 z-50;
    }

    .survey-progress-bar {
        @apply h-full bg-primary-400 transition-all duration-300;
    }
}

/* Utility Classes */
@layer utilities {
    .text-balance {
        text-wrap: balance;
    }

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

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

    .animate-slide-down {
        animation: slideDown 0.3s ease-out;
    }

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

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

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

    /* Hide scrollbar but keep functionality */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* Score color utilities */
    .bg-score-dynamic {
        background-color: var(--score-color, #a6cf45);
    }

    .text-score-dynamic {
        color: var(--score-color, #a6cf45);
    }
}