/* Sri Nrusimha Seva Vahini Design System */
/* Spiritual Theme: Orange & Red Gradient */

:root {
    /* Spiritual Orange-Red Theme */
    --background: 30 100% 98%;
    --foreground: 15 80% 15%;

    --card: 0 0% 100%;
    --card-foreground: 15 80% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 15 80% 15%;

    /* Primary: Deep Saffron Orange */
    --primary: 25 95% 53%;
    --primary-foreground: 0 0% 100%;

    /* Secondary: Warm Cream */
    --secondary: 35 100% 96%;
    --secondary-foreground: 15 80% 25%;

    /* Muted: Soft Sand */
    --muted: 30 50% 94%;
    --muted-foreground: 15 30% 45%;

    /* Accent: Deep Red */
    --accent: 0 84% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 30 40% 88%;
    --input: 30 40% 88%;
    --ring: 25 95% 53%;

    --radius: 0.75rem;

    /* Spiritual Gradient */
    --gradient-spiritual: linear-gradient(135deg, hsl(25, 95%, 53%) 0%, hsl(0, 84%, 50%) 100%);
    --gradient-warm: linear-gradient(180deg, hsl(30, 100%, 98%) 0%, hsl(35, 100%, 96%) 100%);

    /* Shadows */
    --shadow-spiritual: 0 4px 20px -4px hsla(25, 95%, 53%, 0.25);
    --shadow-card: 0 2px 12px -2px hsla(15, 80%, 15%, 0.08);

    --sidebar-background: 30 100% 98%;
    --sidebar-foreground: 15 80% 15%;
    --sidebar-primary: 25 95% 53%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 35 100% 96%;
    --sidebar-accent-foreground: 15 80% 25%;
    --sidebar-border: 30 40% 88%;
    --sidebar-ring: 25 95% 53%;
}

.dark {
    --background: 15 30% 8%;
    --foreground: 30 100% 96%;

    --card: 15 25% 12%;
    --card-foreground: 30 100% 96%;

    --popover: 15 25% 12%;
    --popover-foreground: 30 100% 96%;

    --primary: 25 95% 55%;
    --primary-foreground: 15 80% 10%;

    --secondary: 15 20% 18%;
    --secondary-foreground: 30 100% 96%;

    --muted: 15 20% 18%;
    --muted-foreground: 30 40% 65%;

    --accent: 0 75% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 70% 45%;
    --destructive-foreground: 0 0% 100%;

    --border: 15 20% 22%;
    --input: 15 20% 22%;
    --ring: 25 95% 55%;

    --sidebar-background: 15 25% 10%;
    --sidebar-foreground: 30 100% 96%;
    --sidebar-primary: 25 95% 55%;
    --sidebar-primary-foreground: 15 80% 10%;
    --sidebar-accent: 15 20% 18%;
    --sidebar-accent-foreground: 30 100% 96%;
    --sidebar-border: 15 20% 22%;
    --sidebar-ring: 25 95% 55%;
}

* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: "Inter", sans-serif;
}

/* Telugu Typography - Standardized sizing for consistency */
.font-telugu-heading {
    font-family: "Sree Krushnadevaraya", serif;
    font-weight: 400 !important;
    font-size: 1.15em;
}

.font-telugu-body {
    font-family: "Mallanna", sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.6;
}

/* Telugu Label - Form field labels (Strong/Bold) - Using Sree Krushnadevaraya */
.font-telugu-label {
    font-family: "Sree Krushnadevaraya", serif;
    font-weight: 400 !important;
    font-size: 1.1em;
    line-height: 1.5;
}

/* Telugu Summary Label - Compact but readable for summary screens */
.font-telugu-summary-label {
    font-family: "Sree Krushnadevaraya", serif;
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1.4;
}

/* Telugu Summary Value - Prominent display for summary screens */
.font-telugu-summary-value {
    font-family: "Mallanna", sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.4;
}

/* English Typography */
.font-english {
    font-family: "Inter", sans-serif;
}

/* Spiritual Gradient Text */
.text-gradient-spiritual {
    background: var(--gradient-spiritual);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Spiritual Background Gradient */
.bg-gradient-spiritual {
    background: var(--gradient-spiritual);
}

/* Warm Background */
.bg-gradient-warm {
    background: var(--gradient-warm);
}

/* Card Shadow */
.shadow-spiritual {
    box-shadow: var(--shadow-spiritual);
}

.shadow-card {
    box-shadow: var(--shadow-card);
}

/* Telugu Transliteration Suggestion Box */
.telugu-suggestion-box {
    position: absolute;
    z-index: 9999;
    background: #ffffff;
    border: 1px solid hsl(30, 40%, 88%);
    border-radius: 0.75rem;
    box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.15), 0 2px 8px -2px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    font-family: "Mallanna", sans-serif;
    animation: telugu-fade-in 0.15s ease-out;
}

@keyframes telugu-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.telugu-suggestion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: linear-gradient(135deg, hsl(25, 95%, 53%) 0%, hsl(0, 84%, 50%) 100%);
    color: #fff;
    font-size: 0.75rem;
}

.telugu-suggestion-hint {
    font-family: "Sree Krushnadevaraya", serif;
    font-size: 0.85rem;
    opacity: 0.95;
}

.telugu-suggestion-typed {
    font-family: "Inter", sans-serif;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.telugu-suggestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    border-bottom: 1px solid hsl(30, 40%, 95%);
}

.telugu-suggestion-item:last-child {
    border-bottom: none;
}

.telugu-suggestion-item:hover,
.telugu-suggestion-active {
    background-color: hsl(35, 100%, 96%);
}

.telugu-suggestion-active {
    background-color: hsl(25, 100%, 95%) !important;
    border-left: 3px solid hsl(25, 95%, 53%);
    padding-left: 11px;
}

.telugu-suggestion-text {
    font-family: "Mallanna", sans-serif;
    font-size: 1.15rem;
    color: hsl(15, 80%, 15%);
    line-height: 1.4;
}

.telugu-suggestion-active .telugu-suggestion-text {
    color: hsl(25, 95%, 40%);
    font-weight: 500;
}

.telugu-suggestion-number {
    font-family: "Inter", sans-serif;
    font-size: 0.65rem;
    color: hsl(15, 30%, 65%);
    background: hsl(30, 40%, 94%);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Transliteration-enabled input indicator */
input[data-telugu-translit="true"]:focus,
textarea[data-telugu-translit="true"]:focus {
    border-color: hsl(25, 95%, 53%) !important;
    box-shadow: 0 0 0 2px hsla(25, 95%, 53%, 0.15) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .telugu-suggestion-box {
        border-radius: 0.625rem;
        left: 8px !important;
        right: 8px !important;
        max-width: calc(100vw - 16px) !important;
        min-width: auto !important;
    }

    .telugu-suggestion-header {
        padding: 8px 12px;
    }

    .telugu-suggestion-item {
        padding: 12px 14px;
        min-height: 44px;
    }

    .telugu-suggestion-text {
        font-size: 1.25rem;
    }

    .telugu-suggestion-number {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    .telugu-suggestion-active {
        background-color: hsl(25, 100%, 93%) !important;
    }
}

/* Touch-device active state feedback */
@media (hover: none) and (pointer: coarse) {
    .telugu-suggestion-item:active {
        background-color: hsl(25, 100%, 90%) !important;
        transform: scale(0.98);
        transition: transform 0.05s ease;
    }
}

/* Print Styles */
@media print {
    body {
        background: white !important;
        font-size: 12pt;
    }

    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    .shadow-card,
    .shadow-spiritual {
        box-shadow: none !important;
    }

    .bg-gradient-spiritual {
        background: #ea580c !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Compact print layout */
    .space-y-3>*+* {
        margin-top: 8px !important;
    }

    /* Ensure Telugu fonts print clearly */
    .font-telugu-summary-label {
        font-size: 10pt !important;
        font-weight: 600 !important;
    }

    .font-telugu-summary-value {
        font-size: 12pt !important;
    }
}