/* Shared styles for all pages - rename this file to css/shared-styles.css */

/* Custom medical and warm color definitions for Tailwind v4 */
:root {
    --medical-50: #f0f9ff;
    --medical-100: #e0f2fe;
    --medical-200: #bae6fd;
    --medical-300: #7dd3fc;
    --medical-400: #38bdf8;
    --medical-500: #0ea5e9;
    --medical-600: #0284c7;
    --medical-700: #0369a1;
    --medical-800: #075985;
    --medical-900: #0c4a6e;

    --warm-50: #fefce8;
    --warm-100: #fef9c3;
    --warm-200: #fef08a;
    --warm-300: #fde047;
    --warm-400: #facc15;
    --warm-500: #eab308;
    --warm-600: #ca8a04;
    --warm-700: #a16207;
    --warm-800: #854d0e;
    --warm-900: #713f12;
}

/* Medical color utility classes */
.bg-medical-50 {
    background-color: var(--medical-50);
}

.bg-medical-100 {
    background-color: var(--medical-100);
}

.bg-medical-200 {
    background-color: var(--medical-200);
}

.bg-medical-300 {
    background-color: var(--medical-300);
}

.bg-medical-400 {
    background-color: var(--medical-400);
}

.bg-medical-500 {
    background-color: var(--medical-500);
}

.bg-medical-600 {
    background-color: var(--medical-600);
}

.bg-medical-700 {
    background-color: var(--medical-700);
}

.bg-medical-800 {
    background-color: var(--medical-800);
}

.bg-medical-900 {
    background-color: var(--medical-900);
}

.text-medical-50 {
    color: var(--medical-50);
}

.text-medical-100 {
    color: var(--medical-100);
}

.text-medical-200 {
    color: var(--medical-200);
}

.text-medical-300 {
    color: var(--medical-300);
}

.text-medical-400 {
    color: var(--medical-400);
}

.text-medical-500 {
    color: var(--medical-500);
}

.text-medical-600 {
    color: var(--medical-600);
}

.text-medical-700 {
    color: var(--medical-700);
}

.text-medical-800 {
    color: var(--medical-800);
}

.text-medical-900 {
    color: var(--medical-900);
}

.border-medical-500 {
    border-color: var(--medical-500);
}

.focus\:ring-medical-500:focus {
    --tw-ring-color: rgb(14 165 233 / 0.5);
}

.focus\:border-medical-500:focus {
    border-color: var(--medical-500);
}

.hover\:bg-medical-600:hover {
    background-color: var(--medical-600);
}

.hover\:bg-medical-700:hover {
    background-color: var(--medical-700);
}

.hover\:text-medical-600:hover {
    color: var(--medical-600);
}

.hover\:text-medical-700:hover {
    color: var(--medical-700);
}

/* Warm color utility classes */
.bg-warm-50 {
    background-color: var(--warm-50);
}

.bg-warm-100 {
    background-color: var(--warm-100);
}

.bg-warm-200 {
    background-color: var(--warm-200);
}

.bg-warm-300 {
    background-color: var(--warm-300);
}

.bg-warm-400 {
    background-color: var(--warm-400);
}

.bg-warm-500 {
    background-color: var(--warm-500);
}

.bg-warm-600 {
    background-color: var(--warm-600);
}

.bg-warm-700 {
    background-color: var(--warm-700);
}

.bg-warm-800 {
    background-color: var(--warm-800);
}

.bg-warm-900 {
    background-color: var(--warm-900);
}

.text-warm-50 {
    color: var(--warm-50);
}

.text-warm-100 {
    color: var(--warm-100);
}

.text-warm-200 {
    color: var(--warm-200);
}

.text-warm-300 {
    color: var(--warm-300);
}

.text-warm-400 {
    color: var(--warm-400);
}

.text-warm-500 {
    color: var(--warm-500);
}

.text-warm-600 {
    color: var(--warm-600);
}

.text-warm-700 {
    color: var(--warm-700);
}

.text-warm-800 {
    color: var(--warm-800);
}

.text-warm-900 {
    color: var(--warm-900);
}

/* Common page styles */
body {
    overflow-x: hidden;
}

/* Mobile menu animation for all pages */
@media (max-width: 768px) {
    .mobile-menu {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    .mobile-menu.show {
        transform: translateX(0);
    }
}

/* Hero gradient for landing pages */
.hero-gradient {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 50%, #075985 100%);
}

/* Section divider for landing pages */
.section-divider {
    background: linear-gradient(90deg, transparent, #e0f2fe, transparent);
}

/* Mobile hide utility */
@media(max-width: 640px) {
    .mobile-hide {
        display: none;
    }
}

/* Message bubble styling (for messages page) */
.message-sent {
    margin-left: auto;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
    border-radius: 1rem 1rem 0.25rem 1rem;
}

.message-received {
    margin-right: auto;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 1rem 1rem 1rem 0.25rem;
}

.message-bubble {
    max-width: 70%;
    word-wrap: break-word;
}

/* Smooth scrolling */
.smooth-scroll {
    scroll-behavior: smooth;
}

/* Auto-resize textarea */
.auto-resize {
    field-sizing: content;
}

/* Animation utilities */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Focus improvements */
.focus-visible:focus-visible {
    outline: 2px solid var(--medical-500);
    outline-offset: 2px;
}

/* Button improvements */
.btn-medical {
    background-color: var(--medical-600);
    color: white;
    transition: background-color 0.15s ease-in-out;
}

.btn-medical:hover {
    background-color: var(--medical-700);
}

.btn-medical:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Card improvements */
.card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.card-hover:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    transition: all 0.15s ease-in-out;
}