/**
 * JananiSuraksha — Custom CSS
 * AI-Powered Maternal Health Risk Intelligence
 * Powered by dmj.one
 */

/* ========================================
   Risk Level Indicators
   ======================================== */

.risk-critical {
    animation: pulse-critical 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-critical {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.risk-high {
    border-left: 4px solid #F97316;
}

.risk-medium {
    border-left: 4px solid #EAB308;
}

.risk-low {
    border-left: 4px solid #22C55E;
}

/* ========================================
   Fade-in Animation for Results
   ======================================== */

.fade-in {
    animation: fadeInUp 0.4s ease-out forwards;
}

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

/* Alpine.js cloak - hide elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* ========================================
   Custom Scrollbar
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}

/* ========================================
   Range Slider Styling
   ======================================== */

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FF9933;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FF9933;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.15);
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.3);
}

input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.3);
}

/* ========================================
   Form Focus States (enhanced accessibility)
   ======================================== */

input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.25);
}

/* ========================================
   Table Styling
   ======================================== */

table tbody tr {
    transition: background-color 0.15s ease;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    /* HIDE: all interactive elements, nav, footer, form, voice, buttons */
    header,
    footer,
    nav,
    #toast-container,
    button,
    form,
    fieldset,
    .no-print,
    [x-show*="showGuide"],
    details,
    input,
    select,
    label,
    [role="alert"] {
        display: none !important;
    }

    /* SHOW: only the results panel */
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 10pt;
        line-height: 1.4;
    }

    main {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Print report header */
    main::before {
        content: "JananiSuraksha (जननी सुरक्षा) — Maternal Health Risk Assessment Report";
        display: block;
        font-size: 16pt;
        font-weight: bold;
        text-align: center;
        border-bottom: 3px solid #FF9933;
        padding-bottom: 8pt;
        margin-bottom: 12pt;
        color: #000080;
    }

    main::after {
        content: "Clinical Decision Support Tool — All assessments require human clinical review per India's Telemedicine Practice Guidelines 2020. Risk scores calibrated from NFHS-5, WHO, Cochrane, Lancet, ACOG.";
        display: block;
        font-size: 7pt;
        color: #666;
        border-top: 1px solid #ccc;
        padding-top: 8pt;
        margin-top: 16pt;
        text-align: center;
    }

    /* Risk level card — keep colors */
    .risk-critical { animation: none !important; }

    /* Cards: clean borders for print */
    [class*="rounded"] {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        border-radius: 4px !important;
    }

    /* Don't break cards across pages */
    [class*="rounded"] {
        page-break-inside: avoid;
    }

    /* Show the Print Report button text but hide the button itself */
    button:has(> span:contains("Print")) {
        display: none !important;
    }

    /* Keep colored text readable */
    .text-green-600, .text-green-700 { color: #166534 !important; }
    .text-red-600, .text-red-700 { color: #991b1b !important; }
    .text-yellow-600 { color: #854d0e !important; }
    .text-orange-600 { color: #9a3412 !important; }

    /* Background colors for risk badges */
    .bg-red-50 { background: #fef2f2 !important; }
    .bg-green-50 { background: #f0fdf4 !important; }
    .bg-yellow-50 { background: #fefce8 !important; }
    .bg-blue-50 { background: #eff6ff !important; }

    @page {
        margin: 1.5cm;
        @bottom-center {
            content: "JananiSuraksha — jananisuraksha.dmj.one";
            font-size: 8pt;
            color: #999;
        }
    }

    /* Hide link URLs in print (too noisy) */
    a::after { content: none !important; }
}

/* ========================================
   Accessibility
   ======================================== */

/* High contrast focus indicator */
*:focus-visible {
    outline: 2px solid #FF9933;
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .risk-critical {
        animation: none !important;
        border: 2px solid #DC2626;
    }
}

/* ========================================
   Tricolor Stripe (used in header/footer)
   ======================================== */

.tricolor-stripe {
    display: flex;
    height: 4px;
}

.tricolor-stripe > div:nth-child(1) {
    flex: 1;
    background-color: #FF9933;
}

.tricolor-stripe > div:nth-child(2) {
    flex: 1;
    background-color: #FFFFFF;
}

.tricolor-stripe > div:nth-child(3) {
    flex: 1;
    background-color: #138808;
}