/* =============================================================================
   ARS Mess Management System — Theme & Motion
   =============================================================================
   Palette (from the supplied swatch):
     #FFBE91 peach · #FFDDB0 sand · #FFFCE1 cream · #CFEBFF sky
   Seal gold: #C9922F.  Deeper tones derived for text/contrast.

   Loaded LAST so it re-skins the legacy South-Indian variables without touching
   the hundreds of existing `var(--curry-leaf...)` call sites.

   Five motion families, all hand-tuned CSS/SVG (no Framer Motion):
     1. Animating vector paths   -> login gold rings + header underline draw
     2. Loop effects             -> orbit spin, halo pulse, seal float, sheen
     3. Animating text           -> .ar-letter staggered spring cascade
     4. Appear effects           -> .ar-appear / tab & card entrance
     5. Hover & press effects     -> lift on hover, depress on :active
   ============================================================================= */

:root {
    /* ---- New palette ---- */
    --peach: #FFBE91;
    --sand: #FFDDB0;
    --cream: #FFFCE1;
    --sky: #CFEBFF;
    --gold: #C9922F;

    --terracotta: #B85E2B;       /* primary action, white text ~4.6:1 */
    --terracotta-deep: #97491F;
    --sky-deep: #3D82B8;
    --ink: #3E3527;
    --ink-soft: #6B5F4C;
    --line: #EFE1C8;

    /* ---- Remap legacy vars so existing markup re-skins instantly ---- */
    --turmeric: #F2A365;
    --turmeric-light: #FFDDB0;
    --turmeric-dark: #C9922F;

    --curry-leaf: #D98A4E;
    --curry-leaf-light: #FFCBA3;
    --curry-leaf-dark: #B85E2B;

    --tamarind: #A9633A;
    --tamarind-light: #C88A5D;
    --tamarind-dark: #7A4526;

    --chili: #E06A4E;
    --chili-light: #F1927B;

    --cream-dark: #FBEFD3;
    --charcoal: #3E3527;
    --charcoal-light: #6B5F4C;
    --slate: #8A7C64;

    --success: #4F9E6A;
    --warning: #E0932E;
    --error: #D9573D;
    --info: #3D82B8;

    /* Springy easing shared across families */
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =============================================================================
   BASE
   ============================================================================= */
body {
    color: var(--ink);
    background:
        radial-gradient(1200px 480px at 15% -8%, rgba(255,190,145,0.35), transparent 60%),
        radial-gradient(1000px 460px at 95% 4%, rgba(207,235,255,0.40), transparent 62%),
        linear-gradient(180deg, #FFFDF2 0%, #FFF7E9 320px, #FFFCEF 100%);
    background-repeat: no-repeat;
}

/* =============================================================================
   HEADER — light pastel, ink text
   ============================================================================= */
.app-header {
    background: linear-gradient(120deg, var(--peach) 0%, var(--sand) 42%, var(--cream) 100%);
    color: var(--ink);
    padding: 40px 0 34px;
    box-shadow: 0 10px 30px -18px rgba(184, 94, 43, 0.55);
}
/* Slow diagonal sheen — loop effect (family 2) */
.app-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    background-size: 250% 100%;
    animation: ar-sheen 9s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.app-title {
    font-size: 2.7rem;
    letter-spacing: 0.4px;
    color: var(--terracotta-deep);
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.app-subtitle { color: var(--ink-soft); font-weight: 400; }
.tamil-title { color: var(--terracotta); opacity: 0.9; }

/* Header underline — vector path draw (family 1), injected by ars_ui.js */
.ar-underline {
    display: block;
    margin: 10px auto 0;
    width: 260px;
    height: 14px;
    overflow: visible;
}
.ar-underline path {
    fill: none;
    stroke: var(--terracotta);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ar-draw 1.1s var(--ease-out) 0.5s forwards;
}

/* =============================================================================
   NAV TABS — modern pill bar with animated underline + press
   ============================================================================= */
.nav-tabs {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    max-width: 760px;
    box-shadow: 0 18px 40px -22px rgba(184, 94, 43, 0.6),
                inset 0 0 0 1px rgba(255,255,255,0.6);
}
.nav-tab {
    position: relative;
    color: var(--ink-soft);
    transition: color var(--transition-fast),
                background var(--transition-fast),
                transform var(--transition-fast);
}
.nav-tab::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 6px;
    width: 0; height: 3px;
    border-radius: 3px;
    background: var(--terracotta);
    transform: translateX(-50%);
    transition: width var(--transition-normal) var(--ease-out);
}
.nav-tab:hover { background: rgba(255, 221, 176, 0.55); color: var(--ink); transform: translateY(-1px); }
.nav-tab:hover::after { width: 40%; }
.nav-tab:active { transform: translateY(0) scale(0.97); }
.nav-tab.active {
    background: #fff;
    color: var(--terracotta-deep);
    box-shadow: 0 6px 16px -8px rgba(184, 94, 43, 0.6);
}
.nav-tab.active::after { width: 55%; }

/* =============================================================================
   BUTTONS — hover lift + press depress (family 5)
   ============================================================================= */
.btn, .btn-primary, .btn-secondary,
.btn-inventory, .btn-inventory-primary, .btn-inventory-secondary,
.btn-inventory-success, .btn-inventory-warning, .btn-inventory-danger {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                filter var(--transition-fast), background var(--transition-fast);
    will-change: transform;
}
.btn:hover, .btn-primary:hover,
.btn-inventory:hover, .btn-inventory-primary:hover, .btn-inventory-secondary:hover,
.btn-inventory-success:hover, .btn-inventory-warning:hover, .btn-inventory-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -12px rgba(62, 53, 39, 0.55);
    filter: saturate(1.05);
}
.btn:active, .btn-primary:active, .btn-secondary:active,
.btn-inventory:active, .btn-inventory-primary:active, .btn-inventory-secondary:active,
.btn-inventory-success:active, .btn-inventory-warning:active, .btn-inventory-danger:active {
    transform: translateY(0) scale(0.972);
    box-shadow: 0 4px 10px -8px rgba(62, 53, 39, 0.5);
}
/* Primary action colour */
.btn-primary, .btn-inventory-primary {
    background: linear-gradient(135deg, var(--terracotta) 0%, #C9762F 100%) !important;
    color: #fff !important;
    border: none !important;
}
.btn-primary:hover, .btn-inventory-primary:hover {
    background: linear-gradient(135deg, #C9762F 0%, var(--terracotta) 100%) !important;
}

/* =============================================================================
   CARDS / SECTIONS — hover lift + entrance (families 4 & 5)
   ============================================================================= */
.form-section, .fin-panel, .summary-card, .recipe-preview,
.servings-slider-container {
    transition: transform var(--transition-normal) var(--ease-out),
                box-shadow var(--transition-normal) var(--ease-out);
}
.summary-card:hover, .fin-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -18px rgba(62, 53, 39, 0.5);
}

/* Appear-on-show: children of the active tab rise + fade + settle.
   Because inactive tabs are display:none, re-showing a tab restarts these. */
.tab-content.active .form-section,
.tab-content.active .servings-slider-container,
.tab-content.active > .inventory-container,
.tab-content.active #scaledResult:not(.hidden) {
    animation: ar-appear-up 0.55s var(--ease-out) both;
}
.tab-content.active .form-section:nth-of-type(2) { animation-delay: 0.06s; }
.tab-content.active .form-section:nth-of-type(3) { animation-delay: 0.12s; }
.tab-content.active .form-section:nth-of-type(4) { animation-delay: 0.18s; }

/* Summary cards + finance panels stagger in */
.inventory-summary-cards .summary-card { animation: ar-appear-up 0.5s var(--ease-out) both; }
.inventory-summary-cards .summary-card:nth-child(2) { animation-delay: 0.07s; }
.inventory-summary-cards .summary-card:nth-child(3) { animation-delay: 0.14s; }
.inventory-summary-cards .summary-card:nth-child(4) { animation-delay: 0.21s; }
.inventory-summary-cards .summary-card:nth-child(5) { animation-delay: 0.28s; }
.fin-grid .fin-panel { animation: ar-appear-up 0.5s var(--ease-out) both; }
.fin-grid .fin-panel:nth-child(2) { animation-delay: 0.06s; }
.fin-grid .fin-panel:nth-child(3) { animation-delay: 0.12s; }
.fin-grid .fin-panel:nth-child(4) { animation-delay: 0.18s; }
.fin-grid .fin-panel:nth-child(5) { animation-delay: 0.24s; }
.fin-grid .fin-panel:nth-child(6) { animation-delay: 0.30s; }

/* Table rows appear (subtle) */
.inventory-table tbody tr { animation: ar-fade-in 0.4s ease both; }

/* User chip */
.user-chip { animation: ar-appear-up 0.5s var(--ease-out) 0.3s both; }
.user-chip-btn { transition: transform var(--transition-fast), background var(--transition-fast); }
.user-chip-btn:hover { transform: translateY(-1px); }
.user-chip-btn:active { transform: scale(0.95); }

/* Section accent icon tint */
.section-icon { background: linear-gradient(135deg, var(--peach), var(--sand)) !important; }

/* =============================================================================
   OVERRIDE HARDCODED (non-variable) COLOURS FROM LEGACY STYLESHEETS
   ============================================================================= */
/* Table headers were dark green -> warm ink/terracotta */
.inventory-table thead,
.menu-grid-table thead {
    background: linear-gradient(135deg, #5C4326 0%, #7A4526 100%) !important;
}
/* "View" table action was indigo -> sky-deep */
.btn-table-view {
    background: linear-gradient(135deg, #5AA0D4 0%, var(--sky-deep) 100%) !important;
}
.btn-table-view:hover {
    background: linear-gradient(135deg, var(--sky-deep) 0%, #316f9e 100%) !important;
}
/* "Seed products" was purple -> gold */
.btn-seed-products {
    background: linear-gradient(135deg, var(--gold) 0%, #a9791f 100%) !important;
}
.btn-seed-products:hover {
    background: linear-gradient(135deg, #a9791f 0%, var(--gold) 100%) !important;
}
/* Menu grid: today highlight + finance day-total row in palette tones */
.menu-today { background: #FFF3DC !important; }
.menu-dish { background: #FFF0DD !important; border-left-color: var(--terracotta) !important; }
.menu-dish-norecipe { background: #FFF7E0 !important; border-left-color: var(--warning) !important; }
.fin-trend-bar { background: var(--terracotta) !important; }

/* Recipe-search autocomplete (menu_items_styles.css) greens -> terracotta/gold */
.recipe-search-input:focus { border-color: var(--terracotta) !important;
    box-shadow: 0 0 0 4px rgba(184,94,43,0.14) !important; }
.autocomplete-tamil,
.autocomplete-category-group h4,
.autocomplete-category:hover,
.recipe-info-title,
.recipe-info-tamil { color: var(--terracotta-deep) !important; }
.autocomplete-category-group h4 { border-color: var(--terracotta) !important; }
#recipeNotes:not(:placeholder-shown) { border-color: var(--terracotta) !important; }

/* =============================================================================
   TEXT CASCADE (family 3) — letters rise, un-blur, straighten on a spring
   ============================================================================= */
.ar-letter {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    transform: translateY(0.5em) rotateX(-55deg) skewY(4deg);
    filter: blur(7px);
    animation: ar-letter-in 0.62s var(--spring) forwards;
    animation-delay: calc(var(--i) * 0.045s);
}
[data-cascade] { perspective: 700px; }
.ars-login-title .ar-letter { animation-delay: calc(1.55s + var(--i) * 0.05s); }

@keyframes ar-letter-in {
    0%   { opacity: 0; transform: translateY(0.5em) rotateX(-55deg) skewY(4deg); filter: blur(7px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) rotateX(0) skewY(0); filter: blur(0); }
}

/* =============================================================================
   SHARED KEYFRAMES (families 1, 2, 4)
   ============================================================================= */
@keyframes ar-appear-up {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ar-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ar-draw { to { stroke-dashoffset: 0; } }
@keyframes ar-draw-reverse { from { stroke-dashoffset: -1000; } to { stroke-dashoffset: 0; } }
@keyframes ar-sheen { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
@keyframes ar-spin { to { transform: rotate(360deg); } }
@keyframes ar-spin-rev { to { transform: rotate(-360deg); } }
@keyframes ar-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ar-halo {
    0%,100% { transform: scale(0.92); opacity: 0.35; }
    50%     { transform: scale(1.06); opacity: 0.7; }
}

/* =============================================================================
   LOGIN — authentic seal, gold rings draw -> orbit, halo, float, title cascade
   ============================================================================= */
.ars-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(900px 600px at 20% 15%, rgba(255,190,145,0.55), transparent 60%),
        radial-gradient(800px 620px at 85% 85%, rgba(207,235,255,0.6), transparent 60%),
        linear-gradient(160deg, #FFF3E2 0%, #FDE7D2 55%, #E9F3FD 100%);
}
.ars-login-card {
    width: 100%;
    max-width: 420px;
    padding: 34px 34px 30px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    box-shadow: 0 40px 80px -30px rgba(122, 69, 38, 0.55),
                inset 0 1px 0 rgba(255,255,255,0.8);
    text-align: center;
    animation: ar-appear-up 0.7s var(--ease-out) both;
}

/* Seal + rings stage */
.ars-seal-wrap {
    position: relative;
    width: 210px;
    height: 210px;
    margin: 6px auto 18px;
}
.ars-halo {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,146,47,0.45) 0%, rgba(201,146,47,0) 68%);
    opacity: 0;
    animation: ar-halo 3.4s ease-in-out 1.4s infinite;
    z-index: 0;
}
.ars-rings {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    z-index: 2;
    overflow: visible;
}
.ars-ring {
    fill: none;
    stroke: var(--gold);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
.ars-ring-a { animation: ar-draw 1.3s var(--ease-out) 0.2s forwards; filter: drop-shadow(0 0 3px rgba(201,146,47,0.35)); }
.ars-ring-b { stroke-width: 2.5; stroke-dashoffset: -1000; animation: ar-draw-reverse 1.3s var(--ease-out) 0.35s forwards; opacity: 0.85; }
.ars-orbit {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 5 17;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: ar-orbit-appear 0.6s ease 1.55s forwards, ar-spin 14s linear 1.55s infinite;
}
@keyframes ar-orbit-appear { to { opacity: 0.85; } }

.ars-seal {
    position: absolute;
    inset: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    object-fit: contain;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    transform: translateY(14px) scale(0.9);
    animation: ar-seal-in 0.9s var(--ease-out) 1.0s forwards,
               ar-float 5s ease-in-out 2.0s infinite;
}
@keyframes ar-seal-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Fallback if logo.png is absent */
.ars-seal-fallback {
    position: absolute;
    inset: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #fff, var(--cream));
    color: var(--terracotta-deep);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    box-shadow: inset 0 0 0 2px rgba(201,146,47,0.4);
    opacity: 0;
    animation: ar-seal-in 0.9s var(--ease-out) 1.0s forwards,
               ar-float 5s ease-in-out 2.0s infinite;
}

.ars-login-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--terracotta-deep);
    margin: 4px 0 2px;
    perspective: 700px;
}
.ars-login-sub {
    color: var(--ink-soft);
    font-size: 0.82rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 22px;
    opacity: 0;
    animation: ar-fade-in 0.7s ease 2.2s forwards;
}
.ars-login-form {
    opacity: 0;
    animation: ar-appear-up 0.6s var(--ease-out) 2.35s both;
}
.ars-field { text-align: left; margin-bottom: 14px; }
.ars-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 5px;
}
.ars-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font-size: 0.95rem;
    background: rgba(255,255,255,0.85);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ars-field input:focus {
    outline: none;
    border-color: var(--terracotta);
    box-shadow: 0 0 0 4px rgba(184, 94, 43, 0.14);
}
.ars-login-btn {
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--terracotta) 0%, #C9762F 100%);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 12px 24px -12px rgba(184, 94, 43, 0.8);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.ars-login-btn:hover { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 16px 30px -12px rgba(184, 94, 43, 0.85); }
.ars-login-btn:active { transform: translateY(0) scale(0.975); }
.ars-login-error {
    color: var(--error);
    font-size: 0.85rem;
    margin: 8px 0 4px;
    min-height: 1em;
}
.ars-login-hint {
    margin-top: 16px;
    font-size: 0.72rem;
    color: var(--slate);
}

/* =============================================================================
   REDUCED MOTION — respect the OS setting
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .ar-letter, .ars-seal, .ars-seal-fallback, .ars-login-sub, .ars-login-form,
    .ars-ring-a, .ars-ring-b { opacity: 1 !important; transform: none !important; filter: none !important; }
    .ars-ring { stroke-dashoffset: 0 !important; }
    .ars-orbit { opacity: 0.85 !important; }
}