/**
 * AstroVeda Global Theme & Subtle Mandala Background System
 * Incorporates ornamental golden sacred mandala watermark with radial veil
 */

:root {
    --astro-bg: #fff8f6;
    --astro-primary: #944a00;
    --astro-gold: #c9a227;
    --astro-maroon: #ba1a1a;
}

/* Subtle Ornamental Golden Mandala App Background */
body, .mandala-subtle-bg {
    background-color: var(--astro-bg) !important;
    background-image: 
        radial-gradient(circle at 50% 25%, rgba(255, 248, 246, 0.86) 0%, rgba(255, 248, 246, 0.96) 100%),
        url('../assets/mandala_golden_bg.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center 30px !important;
    background-size: 1100px auto !important;
    background-attachment: fixed !important;
}

@media (max-width: 767px) {
    body, .mandala-subtle-bg {
        background-image: none !important;
        background-color: var(--astro-bg) !important;
    }
}

/* Floating Golden Card Accents */
.gold-card-frame {
    border: 1px solid rgba(201, 162, 39, 0.35);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(62, 39, 35, 0.06);
}

/* Subtle Golden Mandala Watermark for Modals and Cards */
.card-mandala-watermark {
    position: relative;
    overflow: hidden;
}
.card-mandala-watermark::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background-image: url('../assets/mandala_golden_bg.svg');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   FULL-WIDTH PROPORTIONAL 3-COLUMN HEADER NAVIGATION
   Left: AstroVeda Logo | Center: Centered 1-Line Nav | Right: Action Suite
   ========================================================================== */
header,
header.glass-nav {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-left: clamp(16px, 3vw, 48px) !important;
    padding-right: clamp(16px, 3vw, 48px) !important;
}

header > div:first-child,
header .brand-logo-container {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

header nav,
header .header-center-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: clamp(12px, 1.8vw, 32px) !important;
    margin: 0 auto !important;
    flex: 1 1 auto !important;
}

header nav a,
header .header-center-nav a {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* ==========================================================================
   FLOATING MEDITATING VEDIC SAGE & CHAKRA AURA ANIMATIONS
   ========================================================================== */
@keyframes floatSage {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        filter: drop-shadow(0 20px 30px rgba(244, 132, 31, 0.25));
    }
    50% {
        transform: translateY(-16px) rotate(0.6deg);
        filter: drop-shadow(0 35px 45px rgba(201, 162, 39, 0.4));
    }
}

@keyframes pulseAura {
    0%, 100% {
        transform: scale(1);
        opacity: 0.55;
    }
    50% {
        transform: scale(1.12);
        opacity: 0.9;
    }
}

@keyframes spinMandalaSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes chakraGlowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
        filter: drop-shadow(0 0 6px currentColor);
    }
    50% {
        transform: scale(1.35);
        opacity: 1;
        filter: drop-shadow(0 0 14px currentColor);
    }
}

.animate-float-sage {
    animation: floatSage 6s ease-in-out infinite;
}

.animate-pulse-aura {
    animation: pulseAura 4s ease-in-out infinite;
}

.animate-spin-mandala {
    animation: spinMandalaSlow 40s linear infinite;
}

.animate-chakra-pulse {
    animation: chakraGlowPulse 2.5s ease-in-out infinite;
}


/* ---- Phase 7: per-script typography (Telugu/Malayalam/Odia need extra line-height) ---- */
:lang(te) body, html[lang="te"] { line-height: 1.75; }
:lang(ml) body, html[lang="ml"] { line-height: 1.75; }
:lang(or) body, html[lang="or"] { line-height: 1.7; }
:lang(bn) body, html[lang="bn"] { line-height: 1.7; }
html[lang="te"] .font-headline-lg, html[lang="ml"] .font-headline-lg { letter-spacing: 0; }


@media print {
  .print-break-before { break-before: page; }
  aside, #app-sidebar, header { display: none !important; }
  main { padding: 0 !important; }
}

/* ---- Chart Calculation Animations ---- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes kundliReveal {
    0%   { opacity: 0; transform: scale(0.93) translateY(6px); }
    60%  { opacity: 1; transform: scale(1.04) translateY(-1px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes heroGlow {
    0%   { box-shadow: 0 0 0 0px rgba(180,120,40,0); }
    40%  { box-shadow: 0 0 0 4px rgba(180,120,40,0.4), 0 8px 28px rgba(180,120,40,0.2); }
    100% { box-shadow: 0 0 0 0px rgba(180,120,40,0); }
}

.chart-reveal {
    animation: kundliReveal 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

.hero-card-glow {
    animation: heroGlow 1s ease forwards;
}

/* ==========================================================================
   Dark Orange Left Menubar & Navigation Shell Theme
   ========================================================================== */
#app-sidebar {
    background: linear-gradient(180deg, #7c2d12 0%, #6c2409 40%, #451403 100%) !important;
    border-right: 1px solid rgba(251, 146, 60, 0.25) !important;
    box-shadow: 4px 0 28px rgba(74, 21, 3, 0.35) !important;
    color: #ffffff !important;
}

#app-sidebar > div:first-child {
    background: rgba(108, 36, 9, 0.95) !important;
    border-bottom: 1px solid rgba(251, 146, 60, 0.25) !important;
}

#app-sidebar .sidebar-brand-title,
#app-sidebar span.font-headline.text-white,
#app-sidebar a[href="#dashboard"] span.font-headline {
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: 0.025em !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

#app-sidebar [data-i18n^="nav.sidebar_"] {
    color: #fcd34d !important; /* amber-300 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
}

#app-sidebar a[data-route-link] {
    color: rgba(255, 247, 237, 0.88) !important;
    border-radius: 0.75rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#app-sidebar a[data-route-link]:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    transform: translateX(3px);
}

#app-sidebar a[data-route-link] .material-symbols-outlined {
    color: #fcd34d !important;
    transition: transform 0.2s ease, color 0.2s ease;
}

#app-sidebar a[data-route-link]:hover .material-symbols-outlined {
    color: #ffffff !important;
    transform: scale(1.15);
}

#app-sidebar a[data-route-link].active,
#app-sidebar a[data-route-link].bg-primary\/10,
#app-sidebar a[data-route-link].font-bold {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    border-left: 3.5px solid #fbbf24 !important;
}

#app-sidebar a[data-route-link].active .material-symbols-outlined,
#app-sidebar a[data-route-link].bg-primary\/10 .material-symbols-outlined,
#app-sidebar a[data-route-link].font-bold .material-symbols-outlined {
    color: #fef08a !important;
}

#app-sidebar .custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}
#app-sidebar .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(69, 20, 3, 0.3);
}
#app-sidebar .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(251, 146, 60, 0.35);
    border-radius: 4px;
}
#app-sidebar .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(251, 146, 60, 0.6);
}

/* Sunrise Gradient Button with Shimmer & Glow
   (definition recovered from assets/astroveda_theme.css, which is not linked) */
.sunrise-gradient, .astro-btn-primary {
    background: linear-gradient(135deg, #f4841f 0%, #d97706 50%, #f59e0b 100%);
    box-shadow: 0 6px 20px rgba(244, 132, 31, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.sunrise-gradient::after, .astro-btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: rotate(30deg);
    transition: transform 0.6s ease;
}

.sunrise-gradient:hover::after, .astro-btn-primary:hover::after {
    transform: translateX(100%) rotate(30deg);
}

.sunrise-gradient:hover, .astro-btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 28px rgba(244, 132, 31, 0.45), 0 0 15px rgba(254, 240, 138, 0.4);
    transform: translateY(-1.5px);
}

/* ==========================================================================
   MOBILE-NATIVE APP EXPERIENCE & PWA OPTIMIZATIONS
   ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Standalone PWA Notch & Safe Area Handling */
@media all and (display-mode: standalone) {
    #mobile-header-bar {
        padding-top: max(14px, env(safe-area-inset-top)) !important;
        height: auto !important;
    }
    #app-viewport {
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
}

/* Native horizontal scrollable chip containers */
.mobile-chip-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 2px;
}
.mobile-chip-rail::-webkit-scrollbar {
    display: none;
}

/* Haptic active state for mobile touch cards */
.touch-press {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
}
.touch-press:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* Prevent unwanted callouts and selections on interactive mobile elements */
button, a, .dock-tab, .no-select {
    -webkit-touch-callout: none;
    user-select: none;
}

/* ==========================================================================
   PROPER APPLICATION ARCHITECTURE: Pinned Intact Side Menu on All Pages
   ========================================================================== */

/* DESKTOP (>= 768px): The side menu is constant, intact, and pinned on the left */
@media (min-width: 768px) {
    #app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 18rem !important;
        height: 100vh !important;
        transform: translateX(0) !important;
        z-index: 40 !important;
        display: flex !important;
    }
    #mobile-header-bar {
        display: none !important;
    }
    #mobile-bottom-dock {
        display: none !important;
    }
    #sidebar-backdrop {
        display: none !important;
    }
    #pwa-install-banner {
        display: none !important;
    }
    #app-main-content {
        margin-left: 18rem !important;
        padding-bottom: 0 !important;
    }
    #app-viewport {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    footer.w-full {
        display: block;
    }
}

/* MOBILE (< 768px): Off-canvas slide drawer + top mobile header + bottom dock */
@media (max-width: 767px) {
    #app-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 18rem !important;
        height: 100% !important;
        z-index: 50 !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    /* Sidebar open state — driven by JS toggling class */
    #app-sidebar.sidebar-open {
        transform: translateX(0) !important;
    }
    #sidebar-backdrop.backdrop-active,
    #sidebar-backdrop:not(.hidden) {
        display: block !important;
        opacity: 1;
    }
    #mobile-header-bar {
        display: flex !important;
    }
    #app-main-content {
        margin-left: 0 !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #app-viewport {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 1rem !important;
        padding-bottom: 0.5rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    /* Hide desktop footer on mobile — dock replaces it */
    footer.w-full {
        display: none !important;
    }
    .desktop-only-decor {
        display: none !important;
    }
    /* Prevent horizontal scroll on all views */
    .grid {
        max-width: 100% !important;
    }
    /* Tighten card padding on mobile */
    .gold-card, [class*="rounded-[28px]"], [class*="rounded-[32px]"] {
        padding: 1rem !important;
    }
}

/* ==========================================================================
   NATIVE BOTTOM DOCK — Tab Active States
   ========================================================================== */
.dock-tab {
    transition: color 0.2s ease, transform 0.15s ease;
}
.dock-tab:active {
    transform: scale(0.9);
}
.dock-tab.dock-active {
    color: #fbbf24 !important; /* amber-400 */
}
.dock-tab.dock-active .dock-icon {
    font-variation-settings: 'FILL' 1 !important;
}
.dock-tab.dock-active .dock-active-bar {
    display: block !important;
}

/* ==========================================================================
   Auth / Login Page Exemption — Hide all chrome
   ========================================================================== */
body.auth-mode #app-sidebar,
body.auth-mode #mobile-header-bar,
body.auth-mode #mobile-bottom-dock,
body.auth-mode #sidebar-backdrop,
body.auth-mode #pwa-install-banner {
    display: none !important;
}
body.auth-mode #app-main-content {
    margin-left: 0 !important;
    padding-bottom: 0 !important;
}
body.auth-mode footer.w-full {
    display: none !important;
}

/* ==========================================================================
   GLOBAL OVERFLOW PROTECTION & RESPONSIVE HELPERS
   ========================================================================== */
#app-main-content, #app-viewport, main {
    overflow-x: hidden;
}

/* Horizontal-scroll tables */
.table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Ensure images never overflow on mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Mobile-safe grid collapse utility */
@media (max-width: 480px) {
    .mobile-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* ============================================================
   NATIVE APP FEEL — Mobile Typography & Spacing System
   Target: iOS/Android native proportions on screens < 768px
   ============================================================ */

@media (max-width: 767px) {

    /* --- Typography Scale (matches iOS Human Interface Guidelines) --- */
    h1, .font-headline-lg, [class*="text-3xl"], [class*="text-4xl"] {
        font-size: 1.25rem !important;   /* 20px */
        line-height: 1.5rem !important;  /* 24px */
        letter-spacing: -0.01em !important;
    }
    h2, [class*="text-2xl"] {
        font-size: 1.0625rem !important;  /* 17px */
        line-height: 1.375rem !important; /* 22px */
    }
    h3, [class*="text-xl"] {
        font-size: 0.9375rem !important;  /* 15px */
        line-height: 1.25rem !important;
    }
    p, span, li, td, th {
        font-size: 0.8125rem !important;  /* 13px */
        line-height: 1.25rem !important;
    }
    .text-xs {
        font-size: 0.75rem !important;   /* 12px */
    }
    .text-sm {
        font-size: 0.8125rem !important; /* 13px */
    }

    /* --- Card/Section Spacing --- */
    /* Remove heavy card padding */
    [class*="p-6"], [class*="p-8"] {
        padding: 0.75rem !important;     /* 12px */
    }
    [class*="p-5"] {
        padding: 0.625rem !important;    /* 10px */
    }
    [class*="p-4"] {
        padding: 0.5rem !important;      /* 8px */
    }

    /* Remove heavy section gaps */
    [class*="mb-12"], [class*="mb-10"] {
        margin-bottom: 1rem !important;  /* 16px */
    }
    [class*="mb-8"] {
        margin-bottom: 0.75rem !important; /* 12px */
    }
    [class*="mb-6"] {
        margin-bottom: 0.5rem !important;  /* 8px */
    }
    [class*="gap-6"] {
        gap: 0.5rem !important;           /* 8px */
    }
    [class*="gap-4"] {
        gap: 0.5rem !important;
    }

    /* --- Border Radius (Native-style: 12px max) --- */
    [class*="rounded-[32px]"],
    [class*="rounded-[28px]"],
    [class*="rounded-[24px]"] {
        border-radius: 12px !important;
    }
    [class*="rounded-3xl"] {
        border-radius: 10px !important;
    }
    [class*="rounded-2xl"] {
        border-radius: 8px !important;
    }

    /* --- Remove heavy card borders on mobile (native apps have none) --- */
    .gold-card,
    .kundli-card,
    [class*="border border-primary"],
    [class*="border border-outline-variant"] {
        border: none !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    }

    /* --- Section labels: smaller, tighter --- */
    [class*="font-bold text-primary uppercase tracking-wider"] {
        font-size: 0.625rem !important;  /* 10px */
        letter-spacing: 0.08em !important;
        margin-bottom: 4px !important;
    }

    /* --- Buttons: full-width on mobile where appropriate --- */
    .astro-btn-primary,
    .sunrise-gradient {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        border-radius: 10px !important;
    }

    /* --- Breadcrumb nav: hide on mobile (apps don't have them) --- */
    nav.flex.items-center.gap-2.mb-6.text-on-surface-variant {
        display: none !important;
    }

    /* --- Grid: force 2-col max on mobile --- */
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* --- Horizontal flex → vertical stack on mobile --- */
    .lg\:flex-row {
        flex-direction: column !important;
    }
    .md\:flex-row {
        flex-direction: column !important;
    }
}