/* Global and Typography Styling */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

body { 
    font-family: 'Inter', 'Hind Siliguri', sans-serif; 
    transition: all 0.3s ease;
}

::-webkit-scrollbar { 
    width: 6px; 
    height: 6px; 
}
::-webkit-scrollbar-track { 
    background: rgba(0,0,0,0.02); 
}
::-webkit-scrollbar-thumb { 
    background: rgba(0,0,0,0.15); 
    border-radius: 4px; 
}

/* A4 Page Layout & Print Configurations */
@page {
    size: A4;
    margin: 0;
}
/* @media print {
    body * { 
        visibility: hidden; 
    }
    #prescriptionPrintArea, #prescriptionPrintArea * { 
        visibility: visible; 
    }
    #prescriptionPrintArea { 
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 210mm; 
        height: 297mm; /* Exact A4 height */
/*        box-sizing: border-box;
        padding: 15mm 20mm 15mm 20mm !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        background: white !important;
        color: black !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    .no-print { 
        display: none !important; 
    }
    .print-break-avoid { 
        page-break-inside: avoid; 
    }
} */

@media print {
    /* Hide all direct body children during print.
       beforeprint moves #prescriptionPrintArea to be a direct body child,
       so only it remains visible here. */
    body > * {
        display: none !important;
    }

    /* Show the prescription pad (now a direct body child thanks to beforeprint) */
    #prescriptionPrintArea {
        display: flex !important;
        flex-direction: column !important;
        width: 210mm !important;
        /* A4 height with box-sizing:border-box so padding is included.
           This is critical - without a defined height, flex-1 and mt-auto
           have nothing to push against and the layout collapses. */
        height: 297mm !important;
        padding: 12mm 18mm !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: white !important;
        color: black !important;
    }
}

/* ── Prescription Modal ── */
#prescriptionModal {
    animation: fadeIn 0.18s ease-out;
}
#prescriptionModal .slide-up-modal {
    animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Prevent page scroll when modal is open */
body.modal-open {
    overflow: hidden;
}
/* Custom scrollbar for modal body */
#prescriptionModalBody::-webkit-scrollbar {
    width: 8px;
}
#prescriptionModalBody::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
}
#prescriptionModalBody::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}
#prescriptionModalBody::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.28);
}




/* Gradient Palette Configurations */
.theme-clinical { 
    --brand: #0f766e; 
    --brand-hover: #115e59; 
    --bg-gradient: linear-gradient(135deg, #0f172a, #0d9488); 
}
.theme-space { 
    --brand: #6366f1; 
    --brand-hover: #4f46e5; 
    --bg-gradient: linear-gradient(135deg, #020617, #312e81); 
}
.theme-herbal { 
    --brand: #059669; 
    --brand-hover: #047857; 
    --bg-gradient: linear-gradient(135deg, #064e3b, #022c22); 
}
.theme-nordic { 
    --brand: #8b5cf6; 
    --brand-hover: #7c3aed; 
    --bg-gradient: linear-gradient(135deg, #18181b, #3f1651); 
}

/* Smooth UI Animations */
.fade-in { 
    animation: fadeIn 0.25s ease-out; 
}
.slide-up { 
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
}
@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}
@keyframes slideUp { 
    from { transform: translateY(12px); opacity: 0; } 
    to { transform: translateY(0); opacity: 1; } 
}

/* Dark Mode Utility Classes */
.dark-mode { 
    background-color: #0f172a !important; 
    color: #f1f5f9 !important; 
}
.dark-mode .dark-bg { 
    background-color: #1e293b !important; 
    color: #f1f5f9 !important; 
}
.dark-mode .dark-bg-light { 
    background-color: #334155 !important; 
}
.dark-mode .dark-border { 
    border-color: #334155 !important; 
}
.dark-mode .dark-input { 
    background-color: #0f172a !important; 
    border-color: #475569 !important; 
    color: #ffffff !important; 
}
.dark-mode .dark-text { 
    color: #f8fafc !important; 
}