/* ============================================================
   Surin × Priyanshi Wedding Portal
   Royal Udaipur theme — deep purple, gold, jali pattern
   Mobile-first, no frameworks
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────── */
:root {
    --purple-900: #1A1547;
    --purple-800: #26215C;
    --purple-700: #332C75;
    --purple-600: #4B3FA8;
    --purple-500: #534AB7;
    --purple-100: #EDEAFB;
    --purple-50:  #F6F4FE;

    --gold-500:   #FAC775;
    --gold-600:   #E5B05A;
    --gold-700:   #B8893E;
    --gold-100:   #FFF4E0;

    --rose:       #993556;
    --green:      #1D9E75;
    --teal:       #085041;
    --red:        #D6334B;
    --amber:      #E8A23C;

    /* Sage — Ananta gardens accent */
    --sage-700:   #4F6B47;
    --sage-600:   #6B8E5A;
    --sage-500:   #8AAB76;
    --sage-100:   #E4EEDC;
    --sage-50:    #F2F7EC;

    --ink:        #1A1A2E;
    --ink-soft:   #4A4A6B;
    --ink-mute:   #8B8BA8;
    --line:       #E3E0F0;
    --line-soft:  #F0EEF8;
    --bg:         #F7F5FB;
    --white:      #FFFFFF;

    --radius-sm:  8px;
    --radius:     12px;
    --radius-lg:  18px;
    --radius-xl:  24px;

    --shadow-sm:  0 1px 2px rgba(26,21,71,.06);
    --shadow:     0 4px 14px rgba(26,21,71,.08);
    --shadow-lg:  0 10px 30px rgba(26,21,71,.12);

    --sidebar-w:  260px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
html { scroll-behavior: smooth; }
body.no-scroll {
    overflow: hidden;
    /* preserve scroll position on iOS when drawer/modal closes */
    position: fixed;
    inset: 0;
    width: 100%;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* ── Jali lattice background pattern (original diamond style) ── */
.jali-bg {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(250,199,117,.08) 0, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(83,74,183,.08) 0, transparent 50%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23FAC775' stroke-width='.7' opacity='.35'><path d='M40 0L60 20 40 40 20 20z'/><path d='M40 40L60 60 40 80 20 60z'/><circle cx='40' cy='40' r='6'/><circle cx='0' cy='40' r='6'/><circle cx='80' cy='40' r='6'/><circle cx='40' cy='0' r='6'/><circle cx='40' cy='80' r='6'/></g></svg>");
    background-size: auto, auto, 80px 80px;
}

/* ============================================================
   SIDEBAR (desktop) → drawer (mobile)
   ============================================================ */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    height: 100dvh; /* avoid jump under iOS URL bar */
    background: linear-gradient(180deg, var(--purple-800) 0%, var(--purple-900) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
    overflow: hidden;
}
.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='none' stroke='%23FAC775' stroke-width='.5' opacity='.08'><path d='M30 0L45 15 30 30 15 15z'/><path d='M30 30L45 45 30 60 15 45z'/><circle cx='30' cy='30' r='4'/></g></svg>");
    pointer-events: none;
}
.sidebar.open { transform: translateX(0); }

.sidebar-brand {
    padding: 22px 20px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(250,199,117,.18);
    position: relative;
}
.brand-ornament {
    font-size: 22px;
    color: var(--gold-500);
    text-shadow: 0 0 12px rgba(250,199,117,.5);
}
.brand-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
}
.brand-sub {
    font-size: 11px;
    color: var(--gold-500);
    margin-top: 2px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.sidebar-nav {
    flex: 1;
    padding: 14px 10px;
    overflow-y: auto;
    position: relative;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius);
    color: rgba(255,255,255,.78);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
    transition: all .15s ease;
    position: relative;
}
.nav-item i { font-size: 19px; }
.nav-item:hover {
    background: rgba(250,199,117,.08);
    color: #fff;
}
.nav-item.active {
    background: linear-gradient(90deg, rgba(250,199,117,.18), rgba(250,199,117,.04));
    color: var(--gold-500);
    box-shadow: inset 3px 0 0 var(--gold-500);
}
.nav-item.active i { color: var(--gold-500); }

.badge-red {
    margin-left: auto;
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.sidebar-user {
    padding: 14px 16px;
    border-top: 1px solid rgba(250,199,117,.18);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,.18);
    position: relative;
}
.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--purple-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    border: 2px solid var(--gold-500);
    flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-role {
    font-size: 11px;
    color: var(--gold-500);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.logout-btn {
    color: rgba(255,255,255,.6);
    font-size: 18px;
    padding: 6px;
    border-radius: 6px;
    transition: all .15s;
}
.logout-btn:hover { color: var(--gold-500); background: rgba(250,199,117,.1); }

/* ── Sidebar overlay (mobile) ────────────────────────────── */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,21,71,.55);
    backdrop-filter: blur(2px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.sidebar-overlay.show { opacity: 1; pointer-events: auto; }

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main-wrapper {
    min-height: 100vh;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

.topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}
.menu-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-800);
    font-size: 22px;
    transition: background .15s;
}
.menu-btn:hover { background: var(--purple-50); }

.topbar-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--purple-800);
    flex: 1;
    letter-spacing: .2px;
}
.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.countdown-pill {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: var(--purple-900);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(250,199,117,.35);
}
.countdown-pill i { font-size: 14px; }
.notif-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--purple-700);
    cursor: pointer;
    position: relative;
    transition: background .15s;
}
.notif-btn:hover { background: var(--purple-50); }
.notif-dot {
    position: absolute;
    top: 8px; right: 8px;
    width: 9px; height: 9px;
    background: var(--red);
    border-radius: 50%;
    border: 2px solid #fff;
}

/* Alert banner */
.alert-banner {
    margin: 14px 16px 0;
    padding: 12px 14px;
    background: linear-gradient(90deg, #FFF4E0, #FFE9C4);
    border-left: 4px solid var(--amber);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #6B4A1A;
    box-shadow: var(--shadow-sm);
}
.alert-banner i { font-size: 20px; color: var(--amber); flex-shrink: 0; }
.alert-banner span { flex: 1; }
.alert-banner strong { color: #5A3A0E; }
.alert-banner button {
    padding: 4px;
    color: #6B4A1A;
    border-radius: 6px;
    flex-shrink: 0;
}
.alert-banner button:hover { background: rgba(0,0,0,.08); }

.page-content {
    padding: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ============================================================
   CARDS & PANELS
   ============================================================ */
.card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line-soft);
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
}
.card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-800);
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-title i { color: var(--gold-600); font-size: 18px; }
.card-link {
    font-size: 12px;
    color: var(--purple-600);
    font-weight: 600;
}
.card-link:hover { color: var(--gold-700); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
/* On mobile, surface Upcoming payments first and push Recent activity to the bottom */
@media (max-width: 767px) {
    .dashboard-grid .card-payments { order: 1; }
    .dashboard-grid .card-activity { order: 2; }
}

/* Hero panel — readiness ring + countdown */
.hero-panel {
    background: linear-gradient(135deg, var(--purple-800) 0%, var(--purple-600) 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 22px 22px 70px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
}
/* Original diamond jali backdrop */
.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23FAC775' stroke-width='.8' opacity='.12'><path d='M60 10L100 50 60 90 20 50z'/><circle cx='60' cy='50' r='15'/><path d='M60 50L80 70 60 90 40 70z'/></g></svg>");
    background-size: 180px;
    pointer-events: none;
}
/* Ananta Resort silhouette — Aravalli hills + arched pavilion + palms */
.hero-panel::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 130' preserveAspectRatio='xMidYEnd slice'><g fill='%23FAC775'><path fill='%238AAB76' opacity='.16' d='M0 88 Q120 62 230 80 Q340 98 460 72 Q580 50 700 78 Q780 92 800 72 L800 130 L0 130 Z'/><path fill='%236B8E5A' opacity='.22' d='M0 108 Q160 88 310 102 Q450 114 600 92 Q720 84 800 104 L800 130 L0 130 Z'/><g opacity='.24'><rect x='320' y='70' width='180' height='45'/><path d='M335 115 L335 92 Q335 82 352 82 Q369 82 369 92 L369 115 Z' fill='%2326215C' opacity='.5'/><path d='M380 115 L380 92 Q380 82 397 82 Q414 82 414 92 L414 115 Z' fill='%2326215C' opacity='.5'/><path d='M425 115 L425 92 Q425 82 442 82 Q459 82 459 92 L459 115 Z' fill='%2326215C' opacity='.5'/><path d='M470 115 L470 92 Q470 82 480 82 Q490 82 490 92 L490 115 Z' fill='%2326215C' opacity='.5'/><ellipse cx='410' cy='66' rx='38' ry='15'/><line x1='410' y1='46' x2='410' y2='54' stroke='%23FAC775' stroke-width='1.8'/><circle cx='410' cy='44' r='3'/><rect x='325' y='58' width='12' height='12'/><ellipse cx='331' cy='56' rx='10' ry='5'/><rect x='483' y='58' width='12' height='12'/><ellipse cx='489' cy='56' rx='10' ry='5'/></g><g opacity='.30'><path d='M150 115 L150 80' stroke='%23FAC775' stroke-width='2.2' fill='none'/><path d='M150 80 Q128 64 118 73' stroke='%23FAC775' stroke-width='1.4' fill='none'/><path d='M150 80 Q140 58 134 68' stroke='%23FAC775' stroke-width='1.4' fill='none'/><path d='M150 80 Q155 56 163 67' stroke='%23FAC775' stroke-width='1.4' fill='none'/><path d='M150 80 Q170 64 182 72' stroke='%23FAC775' stroke-width='1.4' fill='none'/><path d='M150 80 Q165 58 178 60' stroke='%23FAC775' stroke-width='1.4' fill='none'/><path d='M150 80 Q132 58 120 60' stroke='%23FAC775' stroke-width='1.4' fill='none'/><circle cx='148' cy='83' r='2'/><circle cx='153' cy='84' r='2'/></g><g opacity='.30'><path d='M650 115 L650 78' stroke='%23FAC775' stroke-width='2.2' fill='none'/><path d='M650 78 Q628 62 618 71' stroke='%23FAC775' stroke-width='1.4' fill='none'/><path d='M650 78 Q640 56 634 66' stroke='%23FAC775' stroke-width='1.4' fill='none'/><path d='M650 78 Q655 54 663 65' stroke='%23FAC775' stroke-width='1.4' fill='none'/><path d='M650 78 Q670 62 682 70' stroke='%23FAC775' stroke-width='1.4' fill='none'/><path d='M650 78 Q665 56 678 58' stroke='%23FAC775' stroke-width='1.4' fill='none'/><path d='M650 78 Q632 56 620 58' stroke='%23FAC775' stroke-width='1.4' fill='none'/><circle cx='648' cy='81' r='2'/><circle cx='653' cy='82' r='2'/></g><rect x='0' y='120' width='800' height='2' opacity='.20'/></g></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}
.hero-content { position: relative; z-index: 1; flex: 1; min-width: 220px; }
.hero-greeting {
    font-size: 13px;
    color: var(--gold-500);
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 600;
    margin-bottom: 6px;
}
.hero-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: .3px;
}
.hero-sub {
    font-size: 13px;
    color: rgba(255,255,255,.78);
    margin-bottom: 14px;
}
.hero-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.hero-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--gold-500);
    margin-bottom: 4px;
}
.hero-stat-val {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

/* Readiness ring */
.readiness-ring {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    z-index: 1;
}
.readiness-ring svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}
.readiness-ring circle {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}
.ring-track { stroke: rgba(255,255,255,.15); }
.ring-fill {
    stroke: var(--gold-500);
    transition: stroke-dashoffset 1s ease;
    filter: drop-shadow(0 0 6px rgba(250,199,117,.5));
}
.ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.ring-pct {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}
.ring-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--gold-500);
    margin-top: 4px;
}

/* Wedding week strip */
.week-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 10px;
}
.week-day {
    background: var(--purple-50);
    border: 1px solid var(--purple-100);
    border-radius: var(--radius);
    padding: 10px 6px;
    text-align: center;
    transition: all .15s;
    cursor: pointer;
}
.week-day:hover {
    border-color: var(--gold-500);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.week-day.is-today {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    border-color: var(--gold-700);
}
.week-day.is-today .wd-date,
.week-day.is-today .wd-name {
    color: var(--purple-900);
}
.wd-date {
    font-size: 18px;
    font-weight: 700;
    color: var(--purple-800);
    line-height: 1;
}
.wd-month {
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 2px 0 6px;
}
.wd-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--purple-700);
    line-height: 1.3;
}
.wd-name small {
    display: block;
    font-size: 9px;
    color: var(--sage-700);
    font-weight: 500;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.week-day.is-today .wd-name small { color: var(--purple-900); }

/* Activity feed */
.activity-list { display: flex; flex-direction: column; gap: 12px; }
.activity-item {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--line);
}
.activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.activity-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}
.activity-body { flex: 1; min-width: 0; }
.activity-text {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.45;
}
.activity-text b { color: var(--purple-800); }
.activity-time {
    font-size: 11px;
    color: var(--ink-mute);
    margin-top: 2px;
}

/* Upcoming payments list */
.payment-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
}
.payment-row:last-child { border-bottom: 0; }
.pay-date {
    width: 48px;
    flex-shrink: 0;
    text-align: center;
    background: var(--purple-50);
    border-radius: var(--radius-sm);
    padding: 6px 4px;
}
.pay-date-day {
    font-size: 17px;
    font-weight: 700;
    color: var(--purple-800);
    line-height: 1;
}
.pay-date-mon {
    font-size: 9px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 2px;
}
.pay-body { flex: 1; min-width: 0; }
.pay-vendor {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pay-label {
    font-size: 11px;
    color: var(--ink-mute);
    margin-top: 2px;
}
.pay-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--rose);
    white-space: nowrap;
}
.pay-amount.is-overdue { color: var(--red); }

/* ============================================================
   VENDORS
   ============================================================ */
.split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.toolbar .search {
    flex: 1;
    min-width: 180px;
    position: relative;
}
.toolbar .search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-mute);
    font-size: 16px;
}
.input, .search input, select {
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 14px;
    transition: all .15s;
}
.search input { padding-left: 36px; }
.input:focus, .search input:focus, select:focus {
    outline: 0;
    border-color: var(--purple-500);
    box-shadow: 0 0 0 3px rgba(83,74,183,.12);
}

.vendor-list { display: flex; flex-direction: column; gap: 8px; }
.vendor-card {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 14px;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 12px;
}
.vendor-card:hover {
    border-color: var(--purple-500);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
.vendor-card.is-active {
    border-color: var(--gold-500);
    background: var(--gold-100);
    box-shadow: 0 0 0 3px rgba(250,199,117,.2);
}
.vendor-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: var(--purple-50);
    color: var(--purple-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.vendor-body { flex: 1; min-width: 0; }
.vendor-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vendor-cat {
    font-size: 11px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 2px;
}
.vendor-meta {
    text-align: right;
    flex-shrink: 0;
}
.vendor-amt {
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-800);
}

/* Vendor detail panel */
.detail-panel { background: #fff; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--line-soft); }
.detail-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-soft);
}
.detail-head .vendor-icon { width: 52px; height: 52px; font-size: 24px; background: linear-gradient(135deg, var(--purple-500), var(--purple-700)); color: #fff; }
.detail-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--purple-800);
}
.detail-sub {
    font-size: 12px;
    color: var(--ink-mute);
    margin-top: 3px;
}
.detail-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.contact-chip {
    background: var(--purple-50);
    color: var(--purple-700);
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}
.contact-chip:hover { background: var(--gold-100); color: var(--gold-700); }
.contact-chip i { font-size: 14px; }

.detail-section { margin-top: 18px; }
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 700;
    color: var(--purple-800);
}

/* Installments timeline */
.timeline { position: relative; padding-left: 24px; }
.timeline::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--purple-100), var(--gold-500), var(--purple-100));
}
.timeline-item {
    position: relative;
    padding: 12px 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 18px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--purple-500);
    z-index: 1;
}
.timeline-item.is-paid::before { background: var(--green); border-color: var(--green); }
.timeline-item.is-overdue::before { background: var(--red); border-color: var(--red); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(214,51,75,.5); } 50% { box-shadow: 0 0 0 6px rgba(214,51,75,0); } }
.tl-body { flex: 1; }
.tl-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.tl-date {
    font-size: 11px;
    color: var(--ink-mute);
    margin-top: 2px;
}
.tl-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--purple-800);
    white-space: nowrap;
}
.tl-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

/* Status pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.pill-pending  { background: #FFF0DA; color: #B8893E; }
.pill-paid     { background: #DFF6EB; color: #0E7D58; }
.pill-overdue  { background: #FBE2E6; color: #B0263A; }
.pill-negotiating { background: #EDEAFB; color: #4B3FA8; }
.pill-confirmed   { background: #DFF6EB; color: #0E7D58; }
.pill-cancelled   { background: #F0EEF8; color: #8B8BA8; }
.pill-high { background: #FBE2E6; color: #B0263A; }
.pill-medium { background: #FFF0DA; color: #B8893E; }
.pill-low { background: #EDEAFB; color: #4B3FA8; }
.pill-done { background: #DFF6EB; color: #0E7D58; }
.pill-in_progress { background: #E0EEFF; color: #1A5BA8; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    transition: all .15s;
    cursor: pointer;
    white-space: nowrap;
    border: 0;
}
.btn-primary {
    background: linear-gradient(135deg, var(--purple-600), var(--purple-800));
    color: #fff;
    box-shadow: 0 2px 8px rgba(83,74,183,.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(83,74,183,.4); }
.btn-gold {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: var(--purple-900);
    box-shadow: 0 2px 8px rgba(250,199,117,.4);
}
.btn-gold:hover { transform: translateY(-1px); }
.btn-ghost {
    background: var(--purple-50);
    color: var(--purple-700);
}
.btn-ghost:hover { background: var(--purple-100); }
.btn-danger {
    background: #FBE2E6;
    color: var(--red);
}
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Empty state */
.empty {
    text-align: center;
    padding: 36px 20px;
    color: var(--ink-mute);
}
.empty i { font-size: 42px; color: var(--purple-100); display: block; margin-bottom: 10px; }
.empty p { font-size: 13px; }

/* ============================================================
   TASKS BOARD
   ============================================================ */
.task-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.task-column {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 14px;
    border: 1px solid var(--line-soft);
}
.task-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--line-soft);
}
.task-column[data-status="pending"] .task-column-head { border-color: var(--amber); }
.task-column[data-status="in_progress"] .task-column-head { border-color: var(--purple-500); }
.task-column[data-status="done"] .task-column-head { border-color: var(--green); }
.task-col-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--purple-800);
    display: flex;
    align-items: center;
    gap: 6px;
}
.task-col-count {
    background: var(--purple-50);
    color: var(--purple-700);
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
}
.task-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.task-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    transition: all .15s;
    cursor: grab;
}
.task-card:hover {
    border-color: var(--purple-500);
    box-shadow: var(--shadow);
}
.task-card.is-overdue {
    border-left: 4px solid var(--red);
    background: #FFF5F6;
}
.task-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
.task-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.task-due {
    font-size: 11px;
    color: var(--ink-mute);
    display: flex;
    align-items: center;
    gap: 4px;
}
.task-due.is-overdue { color: var(--red); font-weight: 600; }
.task-assignee {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================================
   SCHEDULE
   ============================================================ */
.schedule-day {
    background: #fff;
    border-radius: var(--radius-lg);
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line-soft);
}
.sd-head {
    background: linear-gradient(135deg, var(--purple-800), var(--purple-600));
    color: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.sd-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='none' stroke='%23FAC775' stroke-width='.6' opacity='.15'><path d='M30 0L45 15 30 30 15 15z'/><path d='M30 30L45 45 30 60 15 45z'/></g></svg>");
    pointer-events: none;
}
.sd-date-box {
    background: rgba(250,199,117,.18);
    border: 1px solid var(--gold-500);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    text-align: center;
    flex-shrink: 0;
    position: relative;
}
.sd-date-day { font-size: 22px; font-weight: 700; color: var(--gold-500); line-height: 1; }
.sd-date-mon { font-size: 10px; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.sd-title { flex: 1; position: relative; }
.sd-title h3 { font-size: 16px; font-weight: 700; }
.sd-title p { font-size: 12px; color: var(--gold-500); margin-top: 2px; }
.sd-events { padding: 12px 18px; }
.sd-event {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
}
.sd-event:last-child { border-bottom: 0; }
.sd-time {
    width: 80px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--purple-700);
}
.sd-event-body { flex: 1; }
.sd-event-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.sd-event-venue {
    font-size: 12px;
    color: var(--sage-700);
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--sage-50);
    padding: 3px 9px;
    border-radius: 99px;
    font-weight: 500;
}
.sd-event-venue i { color: var(--sage-600); }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.team-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line-soft);
    transition: all .15s;
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.team-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    border: 3px solid var(--gold-500);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.team-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.team-role { font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }
.team-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}
.ts-val { font-size: 16px; font-weight: 700; color: var(--purple-800); }
.ts-lbl { font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }

/* ============================================================
   DOCUMENTS
   ============================================================ */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.doc-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line-soft);
    transition: all .15s;
    position: relative;
}
.doc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold-500); }
.doc-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 10px;
    border-radius: var(--radius);
    background: var(--purple-50);
    color: var(--purple-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}
.doc-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-meta { font-size: 10px; color: var(--ink-mute); margin-top: 3px; }
.doc-del {
    position: absolute;
    top: 6px; right: 6px;
    width: 24px; height: 24px;
    border-radius: 6px;
    color: var(--red);
    background: rgba(255,255,255,.9);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.doc-card:hover .doc-del { display: flex; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26,21,71,.6);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-backdrop.show { display: flex; }
.modal {
    background: #fff;
    border-radius: var(--radius-xl);
    max-width: 540px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modalIn .25s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.modal-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--purple-800), var(--purple-600));
    color: #fff;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.8);
    font-size: 20px;
    transition: background .15s;
}
.modal-close:hover { background: rgba(255,255,255,.15); color: #fff; }
.modal-body { padding: 22px; }
.modal-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Form rows */
.form-row { margin-bottom: 14px; }
.form-row label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--purple-800);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
}
.form-row textarea {
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 14px;
    min-height: 80px;
    resize: vertical;
}
.form-row textarea:focus { outline: 0; border-color: var(--purple-500); box-shadow: 0 0 0 3px rgba(83,74,183,.12); }
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ============================================================
   FAB (mobile)
   ============================================================ */
.fab {
    position: fixed;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    right: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: var(--purple-900);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 6px 20px rgba(250,199,117,.5);
    z-index: 80;
    cursor: pointer;
    transition: transform .2s;
}
.fab:hover { transform: scale(1.08); }
.fab.is-open { transform: rotate(45deg); }
.fab-menu {
    position: fixed;
    bottom: calc(158px + env(safe-area-inset-bottom, 0px));
    right: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all .2s;
}
.fab-menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.fab-item {
    background: #fff;
    color: var(--purple-800);
    padding: 10px 16px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow);
    white-space: nowrap;
}
.fab-item:hover { background: var(--gold-100); color: var(--gold-700); }

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    display: flex;
    z-index: 70;
    box-shadow: 0 -4px 14px rgba(26,21,71,.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bn-item {
    flex: 1;
    padding: 10px 4px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--ink-mute);
    transition: color .15s;
    text-align: center;
}
.bn-item i { font-size: 20px; }
.bn-item span { font-size: 10px; font-weight: 600; }
.bn-item.active { color: var(--purple-700); }
.bn-item.active i { color: var(--gold-600); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-700) 50%, var(--rose) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.login-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23FAC775' stroke-width='.8' opacity='.18'><path d='M50 0L80 30 50 60 20 30z'/><path d='M50 40L80 70 50 100 20 70z'/><circle cx='50' cy='30' r='8'/><circle cx='50' cy='70' r='8'/></g></svg>");
    background-size: 140px;
    pointer-events: none;
}
/* Ananta Resort silhouette across the very bottom of the login screen */
.login-bg::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 150px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 140' preserveAspectRatio='xMidYEnd slice'><g fill='%23FAC775'><path fill='%238AAB76' opacity='.20' d='M0 90 Q120 60 230 80 Q340 100 460 70 Q580 48 700 78 Q780 92 800 70 L800 140 L0 140 Z'/><path fill='%236B8E5A' opacity='.26' d='M0 115 Q160 92 310 108 Q450 120 600 96 Q720 86 800 108 L800 140 L0 140 Z'/><g opacity='.28'><rect x='305' y='70' width='200' height='55'/><path d='M322 125 L322 96 Q322 84 340 84 Q358 84 358 96 L358 125 Z' fill='%2326215C' opacity='.55'/><path d='M370 125 L370 96 Q370 84 388 84 Q406 84 406 96 L406 125 Z' fill='%2326215C' opacity='.55'/><path d='M418 125 L418 96 Q418 84 436 84 Q454 84 454 96 L454 125 Z' fill='%2326215C' opacity='.55'/><path d='M466 125 L466 96 Q466 84 484 84 Q502 84 502 96 L502 125 Z' fill='%2326215C' opacity='.55'/><ellipse cx='405' cy='64' rx='44' ry='17'/><line x1='405' y1='40' x2='405' y2='50' stroke='%23FAC775' stroke-width='2'/><circle cx='405' cy='38' r='3.5'/><rect x='310' y='55' width='14' height='15'/><ellipse cx='317' cy='52' rx='12' ry='6'/><circle cx='317' cy='46' r='2'/><rect x='486' y='55' width='14' height='15'/><ellipse cx='493' cy='52' rx='12' ry='6'/><circle cx='493' cy='46' r='2'/></g><g opacity='.32'><path d='M140 125 L140 82' stroke='%23FAC775' stroke-width='2.6' fill='none'/><line x1='135' y1='95' x2='145' y2='95' stroke='%23FAC775' stroke-width='1'/><line x1='135' y1='108' x2='145' y2='108' stroke='%23FAC775' stroke-width='1'/><path d='M140 82 Q116 64 105 75' stroke='%23FAC775' stroke-width='1.6' fill='none'/><path d='M140 82 Q128 58 122 70' stroke='%23FAC775' stroke-width='1.6' fill='none'/><path d='M140 82 Q146 54 155 68' stroke='%23FAC775' stroke-width='1.6' fill='none'/><path d='M140 82 Q164 64 175 73' stroke='%23FAC775' stroke-width='1.6' fill='none'/><path d='M140 82 Q158 56 172 58' stroke='%23FAC775' stroke-width='1.6' fill='none'/><path d='M140 82 Q122 56 108 58' stroke='%23FAC775' stroke-width='1.6' fill='none'/><circle cx='138' cy='86' r='2.2'/><circle cx='144' cy='87' r='2'/></g><g opacity='.32'><path d='M660 125 L660 80' stroke='%23FAC775' stroke-width='2.6' fill='none'/><line x1='655' y1='95' x2='665' y2='95' stroke='%23FAC775' stroke-width='1'/><line x1='655' y1='108' x2='665' y2='108' stroke='%23FAC775' stroke-width='1'/><path d='M660 80 Q636 62 625 73' stroke='%23FAC775' stroke-width='1.6' fill='none'/><path d='M660 80 Q648 56 642 68' stroke='%23FAC775' stroke-width='1.6' fill='none'/><path d='M660 80 Q666 52 675 66' stroke='%23FAC775' stroke-width='1.6' fill='none'/><path d='M660 80 Q684 62 695 71' stroke='%23FAC775' stroke-width='1.6' fill='none'/><path d='M660 80 Q678 54 692 56' stroke='%23FAC775' stroke-width='1.6' fill='none'/><path d='M660 80 Q642 54 628 56' stroke='%23FAC775' stroke-width='1.6' fill='none'/><circle cx='658' cy='84' r='2.2'/><circle cx='664' cy='85' r='2'/></g><rect x='0' y='130' width='800' height='3' opacity='.22'/></g></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}
/* Make login card sit above silhouette */
.login-card { z-index: 2 !important; }
.login-card {
    background: #fff;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 420px;
    padding: 36px 28px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    position: relative;
    z-index: 1;
    border: 2px solid var(--gold-500);
}
.login-ornament {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-900);
    font-size: 22px;
    box-shadow: 0 4px 14px rgba(250,199,117,.5);
}
.login-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--purple-800);
    margin: 14px 0 4px;
    letter-spacing: .3px;
}
.login-sub {
    text-align: center;
    font-size: 12px;
    color: var(--gold-700);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
}
.login-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: var(--ink-mute);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.login-divider::before, .login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
.login-divider span { padding: 0 12px; }
.login-error {
    background: #FBE2E6;
    color: var(--red);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 14px;
    border-left: 3px solid var(--red);
}
.login-foot {
    text-align: center;
    margin-top: 22px;
    font-size: 12px;
    color: var(--ink-mute);
}
.login-foot strong { color: var(--purple-700); }

/* ============================================================
   TOAST
   ============================================================ */
.toast-wrap {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    background: var(--purple-800);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: toastIn .25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.toast.is-success { background: var(--green); }
.toast.is-error { background: var(--red); }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}

/* ============================================================
   VENUE BADGE — Ananta Resort & Spa callout
   ============================================================ */
.venue-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 14px 18px 14px 22px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(250,199,117,.18) 0%, rgba(138,171,118,.12) 45%, rgba(83,74,183,.08) 100%),
        #fff;
    border: 1px solid rgba(138,171,118,.30);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    color: var(--ink);
}
.venue-badge::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold-500) 0%, var(--sage-500) 60%, var(--sage-700) 100%);
}
.venue-badge::before {
    /* Faint hills + palm motif on the right edge */
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 80' preserveAspectRatio='xMaxYEnd slice'><g fill='%23FAC775' opacity='.16'><path d='M0 50 Q40 30 80 45 Q120 60 160 40 Q200 25 240 45 Q280 55 320 35 L320 80 L0 80 Z'/><g opacity='.7'><path d='M270 75 L270 50' stroke='%23B8893E' stroke-width='1.3' fill='none'/><path d='M270 50 Q258 40 252 46' stroke='%23B8893E' stroke-width='1' fill='none'/><path d='M270 50 Q262 36 258 44' stroke='%23B8893E' stroke-width='1' fill='none'/><path d='M270 50 Q273 34 280 44' stroke='%23B8893E' stroke-width='1' fill='none'/><path d='M270 50 Q282 40 290 46' stroke='%23B8893E' stroke-width='1' fill='none'/></g></g></svg>");
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
    pointer-events: none;
}
.venue-badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--sage-500);
}
.vb-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: var(--purple-900);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(250,199,117,.4);
    position: relative;
    z-index: 1;
}
.vb-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.vb-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--purple-800);
    letter-spacing: .2px;
}
.vb-sub {
    font-size: 12px;
    color: var(--sage-700);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-top: 2px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}
.vb-sub::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sage-500);
    box-shadow: 0 0 0 3px rgba(138,171,118,.18);
}
.vb-cta {
    color: var(--purple-700);
    font-size: 18px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.venue-badge:hover .vb-cta { color: var(--gold-700); transform: translateX(2px); transition: all .15s; }

@media (max-width: 480px) {
    .venue-badge { padding: 12px 14px; gap: 10px; }
    .vb-icon { width: 38px; height: 38px; font-size: 18px; }
    .vb-title { font-size: 14px; }
    .vb-sub { font-size: 10px; }
}

/* ============================================================
   AT-A-GLANCE STRIP (dashboard quick stats)
   ============================================================ */
.glance-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.glance-tile {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.glance-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.glance-tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent, var(--purple-500));
    opacity: .85;
}
.glance-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius);
    background: var(--accent-soft, var(--purple-50));
    color: var(--accent, var(--purple-700));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.glance-body { flex: 1; min-width: 0; }
.glance-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--purple-800);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.glance-num small {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-mute);
    margin-left: 2px;
}
.glance-label {
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    margin-top: 4px;
}
.glance-bar {
    margin-top: 8px;
    width: 100%;
    height: 4px;
    background: var(--line-soft);
    border-radius: 99px;
    overflow: hidden;
}
.glance-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent, var(--purple-500)), var(--accent-2, var(--purple-700)));
    border-radius: 99px;
    transition: width .8s ease;
}
.glance-tile.accent-vendor   { --accent: var(--purple-600); --accent-2: var(--purple-800); --accent-soft: var(--purple-50); }
.glance-tile.accent-task     { --accent: var(--gold-600);   --accent-2: var(--gold-700);  --accent-soft: var(--gold-100); }
.glance-tile.accent-overdue  { --accent: var(--red);        --accent-2: #8E1A2E;          --accent-soft: #FBE2E6; }
.glance-tile.accent-budget   { --accent: var(--rose);       --accent-2: #6C2540;          --accent-soft: #F7DBE5; }
.glance-tile.is-zero .glance-num,
.glance-tile.is-zero .glance-icon { color: var(--ink-mute); }
.glance-tile.is-zero { --accent: var(--ink-mute); --accent-2: var(--ink-mute); --accent-soft: var(--line-soft); }

@media (min-width: 640px)  { .glance-strip { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   ROYAL ORNAMENTS — dividers, flourishes, accents
   ============================================================ */
.ornament-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--gold-600);
    font-size: 16px;
}
.ornament-divider::before,
.ornament-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.ornament-divider span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gold-500) 0%, var(--gold-600) 100%);
    color: var(--purple-900);
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(250,199,117,.4);
}

/* Gold corner ornaments on important cards */
.card-royal {
    position: relative;
    border: 1px solid rgba(250,199,117,.25);
}
.card-royal::before,
.card-royal::after {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><g fill='none' stroke='%23E5B05A' stroke-width='1.2'><path d='M2 8 L2 2 L8 2'/><circle cx='4' cy='4' r='1.2' fill='%23E5B05A'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .7;
}
.card-royal::before { top: 6px; left: 6px; }
.card-royal::after  { bottom: 6px; right: 6px; transform: rotate(180deg); }

/* Make hero title feel more regal */
.hero-title {
    text-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.hero-greeting::after {
    content: " ✦";
    color: var(--gold-500);
    margin-left: 4px;
}

/* Gold gradient underline on section/card titles */
.card-title::after,
.section-title::after {
    content: "";
    display: inline-block;
    width: 24px; height: 2px;
    margin-left: 10px;
    background: linear-gradient(90deg, var(--gold-500), transparent);
    vertical-align: middle;
    border-radius: 2px;
}

/* Login card ornamental top strip */
.login-card {
    background:
        linear-gradient(180deg, rgba(250,199,117,.08) 0, rgba(255,255,255,0) 80px),
        #fff;
}
.login-card::before {
    content: "";
    position: absolute;
    top: 14px; left: 14px; right: 14px;
    height: 2px;
    background:
        radial-gradient(circle, var(--gold-500) 0, transparent 60%) center / 8px 100% repeat-x,
        linear-gradient(90deg, transparent, var(--gold-500), transparent);
    opacity: .5;
}

/* Schedule day — taller, more dramatic header gradient */
.sd-head {
    padding: 18px 18px;
}
.schedule-day {
    border: 1px solid rgba(250,199,117,.20);
}

/* Subtle shimmer on countdown pill */
.countdown-pill {
    background-image:
        linear-gradient(135deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%),
        linear-gradient(135deg, var(--gold-500), var(--gold-600));
    background-size: 200% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    transition: background-position .8s ease;
}
.countdown-pill:hover { background-position: -100% 0, 0 0; }

/* ============================================================
   RESPONSIVE — desktop overrides
   ============================================================ */
@media (min-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1.4fr 1fr;
    }
    .dashboard-grid .full { grid-column: 1 / -1; }
    .split-layout {
        grid-template-columns: 360px 1fr;
    }
    .task-board {
        grid-template-columns: repeat(3, 1fr);
    }
    .week-strip {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1024px) {
    body { font-size: 15px; }
    .sidebar {
        transform: translateX(0);
        box-shadow: none;
    }
    .main-wrapper {
        margin-left: var(--sidebar-w);
        padding-bottom: 0;
    }
    .menu-btn { display: none; }
    .sidebar-overlay { display: none !important; }
    .bottom-nav { display: none; }
    .fab { display: none; }
    .fab-menu { display: none; }
    .page-content { padding: 24px 32px; }
    .topbar { padding: 14px 32px; }
    .alert-banner { margin: 16px 32px 0; }
    .hero-title { font-size: 28px; }
}

@media (max-width: 480px) {
    .hero-panel { padding: 18px; flex-direction: column; align-items: flex-start; }
    .readiness-ring { width: 110px; height: 110px; align-self: center; }
    .ring-pct { font-size: 26px; }
    .hero-title { font-size: 20px; }
    .hero-stat-val { font-size: 18px; }
    .topbar-title { font-size: 15px; }
    .countdown-pill { padding: 6px 11px; font-size: 11px; }
    .modal-body { padding: 16px; }
    .form-grid { grid-template-columns: 1fr; }
}