/* CoSurf Brand Colors */
:root {
    --cosurf-purple: #5B2C6F;
    --cosurf-purple-dark: #4A2359;
    --cosurf-purple-light: #6D3A82;
    --cosurf-teal: #5DBAAA;
    --cosurf-teal-dark: #4A9689;
    --cosurf-teal-light: #73CAB8;
    --cosurf-pink: #E91E63;
    --cosurf-pink-dark: #C2185B;
    --cosurf-pink-light: #F06292;

    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
}

/* Global Styles - Only apply to non-admin pages */
body:not(.admin-page) * {
    box-sizing: border-box;
}

body:not(.admin-page) {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body:not(.admin-page) .app-container {
    min-height: 100vh;
    background-color: var(--gray-50);
}

/* Modern Navigation - Override default styles - Only for non-admin pages */
body:not(.admin-page) nav.bg-white {
    background-color: white;
    border-bottom: 1px solid var(--gray-200);
}

body:not(.admin-page) nav a {
    transition: all 0.2s ease;
}

body:not(.admin-page) nav a:hover {
    color: var(--cosurf-purple) !important;
}

body:not(.admin-page) nav a.border-indigo-500 {
    border-color: var(--cosurf-teal) !important;
    color: var(--cosurf-purple) !important;
}

/* Buttons with CoSurf Branding - Only for non-admin pages */
body:not(.admin-page) .bg-indigo-600 {
    background-color: var(--cosurf-purple) !important;
}

body:not(.admin-page) .bg-indigo-600:hover,
body:not(.admin-page) .hover\:bg-indigo-700:hover {
    background-color: var(--cosurf-purple-dark) !important;
}

body:not(.admin-page) .text-indigo-600 {
    color: var(--cosurf-purple) !important;
}

body:not(.admin-page) .text-indigo-600:hover,
body:not(.admin-page) .hover\:text-indigo-900:hover {
    color: var(--cosurf-purple-dark) !important;
}

body:not(.admin-page) .border-indigo-600 {
    border-color: var(--cosurf-purple) !important;
}

body:not(.admin-page) .bg-indigo-50 {
    background-color: rgba(93, 186, 170, 0.1) !important;
}

body:not(.admin-page) .hover\:bg-indigo-50:hover {
    background-color: rgba(93, 186, 170, 0.15) !important;
}

.ring-indigo-600 {
    --tw-ring-color: var(--cosurf-teal) !important;
}

.focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--cosurf-teal);
    outline: none;
    box-shadow: 0 0 0 3px rgba(93, 186, 170, 0.3);
}

.focus\:border-indigo-500:focus {
    border-color: var(--cosurf-teal) !important;
}

/* Cards and Containers */
.shadow, .shadow-sm, .shadow-lg {
    box-shadow: 0 1px 3px 0 rgba(91, 44, 111, 0.1), 0 1px 2px 0 rgba(91, 44, 111, 0.06);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(91, 44, 111, 0.1), 0 4px 6px -2px rgba(91, 44, 111, 0.05);
}

/* Form Controls */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--cosurf-teal);
    box-shadow: 0 0 0 3px rgba(93, 186, 170, 0.2);
}

/* Gradient Header for Login/Register */
.gradient-header {
    background: linear-gradient(135deg, var(--cosurf-purple) 0%, var(--cosurf-teal) 100%);
}

/* Stat Cards */
.stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(91, 44, 111, 0.15);
}

/* Loading Spinner with Brand Colors */
.spinner {
    border-color: var(--gray-200);
    border-top-color: var(--cosurf-teal);
}

/* Success/Info colors aligned with brand */
.bg-green-100 {
    background-color: rgba(93, 186, 170, 0.2) !important;
}

.text-green-800 {
    color: var(--cosurf-purple) !important;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Mobile Responsive */
@media (max-width: 640px) {
    nav .hidden {
        display: none;
    }
}