@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --vna-navy: #006885;
    --vna-gold: #C3820B;
    --vna-gold-light: #d4a04a;
    --bg-gray: #F4F7F6;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-gray);
    color: #1e293b;
    overflow: hidden;
    font-size: 16px;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--vna-gold); border-radius: 10px; }

.active-tab {
    background-color: var(--vna-gold) !important;
    color: var(--vna-navy) !important;
    font-weight: 600;
}

/* Timeline Grid (horizontal — daily timeline) */
.timeline-grid {
    display: grid;
    grid-template-columns: repeat(16, minmax(100px, 1fr));
    position: relative;
}
.hour-marker {
    border-left: 1px solid #e2e8f0;
    height: 100%;
    padding-left: 8px;
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 700;
    padding-top: 8px;
}

/* Calendar Header (flexbox) and Grid (1fr) — always aligned */
.calendar-header {
    display: flex;
}
.calendar-header > div {
    flex: 1;
    text-align: center;
}

/* Calendar Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(80px, 1fr));
}
.calendar-grid > div {
    box-sizing: border-box;
}
.day-cell {
    min-height: 100px;
    transition: all 0.2s ease;
}

/* Mobile: fit grid, no scroll */
@media (max-width: 768px) {
    .calendar-grid {
        grid-template-columns: repeat(7, 1fr);
    }
    .calendar-grid-wrapper {
        overflow-x: visible;
    }
    .day-cell {
        min-height: 60px;
        padding: 2px;
    }

    /* Mobile nav — gradient accent */
    aside,
    .sidebar-gradient {
        background: linear-gradient(180deg, #004d66 0%, #006885 40%, #007799 100%) !important;
    }

    /* Card containers — softer shadows */
    .shadow-sm {
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
    }

    /* Rounded cards — softer edges */
    .rounded-lg,
    .rounded-xl {
        border-radius: 14px !important;
    }

    /* Section backgrounds — gradient instead of solid white */
    section.bg-white {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    }

    /* Timeline events — gradient on approved */
    .bg-green-50 {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    }
    .bg-yellow-50 {
        background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%) !important;
    }
    .bg-red-50 {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
    }
    .bg-blue-50 {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    }

    /* Header gradient */
    header,
    .bg-\[\#006885\] {
        background: linear-gradient(135deg, #004d66 0%, #006885 50%, #008899 100%) !important;
    }

    /* Active tab — gold gradient */
    .active-tab {
        background: linear-gradient(135deg, #C3820B 0%, #d4a04a 50%, #c3820b 100%) !important;
        box-shadow: 0 2px 8px rgba(195,130,11,0.3) !important;
    }

    /* FAB — gold gradient + shadow */
    #mobile-fab button,
    .fab-button {
        background: linear-gradient(135deg, #006885 0%, #007799 100%) !important;
        box-shadow: 0 4px 16px rgba(0,104,133,0.35) !important;
    }

    /* Button primary — navy gradient */
    .bg-\[\#006885\]:not(:hover) {
        background: linear-gradient(135deg, #004d66 0%, #006885 100%) !important;
    }
    .bg-\[\#006885\]:hover {
        background: linear-gradient(135deg, #006885 0%, #007799 100%) !important;
    }

    /* Bottom nav bar — gradient */
    #mobile-bottom-nav {
        background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(248,250,252,0.97) 100%) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.06) !important;
        border-top: 1px solid rgba(195,130,11,0.15) !important;
    }

    /* History cards — gradient hover state */
    .history-card {
        border: 1px solid rgba(195,130,11,0.1) !important;
    }
    .history-card:hover {
        border-color: rgba(195,130,11,0.3) !important;
        box-shadow: 0 4px 16px rgba(195,130,11,0.12) !important;
    }

    /* Status badges — gradient fills */
    .text-green-700.bg-green-100 {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
        color: #15803d !important;
    }
    .text-yellow-700.bg-yellow-100 {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
        color: #a16207 !important;
    }
    .text-red-700.bg-red-100 {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
        color: #b91c1c !important;
    }
    .text-blue-700.bg-blue-100 {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
        color: #1d4ed8 !important;
    }

    /* Form inputs — gold focus glow */
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="tel"]:focus,
    input[type="date"]:focus,
    input[type="number"]:focus,
    textarea:focus {
        border-color: var(--vna-gold) !important;
        box-shadow: 0 0 0 3px rgba(195,130,11,0.2), 0 0 12px rgba(195,130,11,0.1) !important;
    }
}

/* Animations */
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== COMPREHENSIVE ANIMATIONS ===== */

/* Page/tab transition */
.tab-panel {
    animation: tabSlideIn 0.25s ease-out;
}
@keyframes tabSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Staggered card entrance */
.stagger-item {
    opacity: 0;
    animation: staggerFadeIn 0.3s ease-out forwards;
}
@keyframes staggerFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modal backdrop fade */
.modal-backdrop {
    animation: backdropFade 0.2s ease-out;
}
@keyframes backdropFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal card scale-in */
.modal-card {
    animation: modalScaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalScaleIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Modal slide-up (bottom sheet mobile) */
.modal-slide-up {
    animation: modalSlideUp 0.3s ease-out;
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modal fade-out (close) */
.modal-backdrop-out {
    animation: backdropFadeOut 0.15s ease-in;
}
@keyframes backdropFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.modal-card-out {
    animation: modalScaleOut 0.15s ease-in forwards;
}
@keyframes modalScaleOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.95) translateY(10px); }
}

/* Toast entrance */
.toast-enter {
    animation: toastSlideIn 0.3s ease-out;
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Toast exit */
.toast-exit {
    animation: toastSlideOut 0.2s ease-in forwards;
}
@keyframes toastSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}

/* Nav item active pulse */
.nav-item-active {
    animation: navPulse 0.3s ease-out;
}
@keyframes navPulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Button press feedback */
.btn-press {
    transition: transform 0.1s ease;
}
.btn-press:active {
    transform: scale(0.97);
}

/* Shimmer loading */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.animate-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Sidebar accordion item hover */
.accordion-item {
    transition: background 0.15s, transform 0.15s ease;
}
.accordion-item:hover {
    background: rgba(255,255,255,0.05);
    transform: translateX(2px);
}

/* Dashboard card entrance */
@keyframes cardPopIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.card-pop-in {
    opacity: 0;
    animation: cardPopIn 0.3s ease-out forwards;
}

/* Calendar cell hover highlight */
.day-cell {
    transition: background-color 0.15s ease;
}
.day-cell:hover {
    background-color: rgba(197, 160, 89, 0.08);
}

/* Room selector transition */
.room-selector {
    transition: background 0.15s ease, border-color 0.15s ease;
}
.room-selector:hover {
    border-color: rgba(255,255,255,0.4);
}

/* Smooth tab panel transitions */
#weekly-tab, #calendar-tab, #dashboard-tab, #history-tab, #admin-tab, #myaccount-tab {
    transition: opacity 0.2s ease;
}

/* Contact list item hover */
.contact-item {
    transition: background 0.15s ease, transform 0.15s ease;
}
.contact-item:hover {
    background: #f9fafb;
    transform: translateX(2px);
}

/* History filter pill hover */
#history-tab select:hover,
#history-tab input[type="date"]:hover {
    background: #f0f0f0;
    transition: background 0.15s ease;
}

/* Sort dropdown transition */
#sort-dropdown {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#sort-dropdown:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Login Background */
.hero-overlay {
    background: linear-gradient(rgba(0,104,133,0.8), rgba(0,104,133,0.6)),
        url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=1920');
    background-size: cover;
    background-position: center;
}
.bg-pattern {
    background-color: #f8fafc;
    background-image: radial-gradient(#C3820B 0.5px, transparent 0.5px),
        radial-gradient(#C3820B 0.5px, #f8fafc 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    opacity: 0.05;
}

aside { transition: all 0.3s ease; }
table { border-collapse: separate; border-spacing: 0; }
.timeline-row { height: 80px; }

/* No scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Loading / Pulse */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

@keyframes conflictBlink { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,38,38,0.7); } 50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(220,38,38,0); } }
.animate-conflict-blink { animation: conflictBlink 1.5s ease-in-out infinite; }

/* ===== WEEKLY SCHEDULE TABLE ===== */
#weekly-tab {
    -webkit-overflow-scrolling: touch;
}
#weekly-tab table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
#weekly-tab th {
    background-color: var(--vna-navy);
    color: white;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 0.85rem 0.75rem;
    border-right: 1px solid rgba(255,255,255,0.1);
    position: sticky;
    top: 0;
    z-index: 10;
}
#weekly-tab th:last-child { border-right: none; }
#weekly-tab td {
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    padding: 0.65rem 0.75rem;
    font-size: 0.875rem;
    vertical-align: middle;
}
#weekly-tab td:last-child { border-right: none; }
.row-monday-bg { background-color: #eff6ff; }
.week-nav-btn {
    padding: 0.4rem 1rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--vna-navy);
    transition: background 0.15s;
}
.week-nav-btn:hover { background: #f1f5f9; }

/* Room selector */
.room-selector {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Override for modal context where Tailwind classes handle styling */
#booking-modal .room-selector {
    background: transparent;
    border: none;
    color: #006885;
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
}
#booking-modal .room-selector option {
    background: white;
    color: #006885;
}
.room-selector option { background: var(--vna-navy); }
.room-selector:focus {
    border-color: var(--vna-gold);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.35), 0 0 12px rgba(197, 160, 89, 0.25);
}

/* Mobile Bottom Nav - Hide on Scroll */
#mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transition: transform 0.3s ease;
}
#mobile-bottom-nav.hide-nav {
    transform: translateY(100%);
}

/* Suggestions Dropdown */
.suggestions-list {
    position: absolute;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
}
#booking-sidebar .suggestions-list,
#booking-modal .suggestions-list {
    margin-top: 0.25rem;
}
#booking-modal .relative {
    position: relative;
}
#booking-modal #participants-wrapper {
    border-radius: 0.5rem;
}

/* Booking Modal - Mobile scroll fix */
@media (max-width: 639px) {
    #booking-modal form::-webkit-scrollbar { width: 4px; }
    #booking-modal form::-webkit-scrollbar-thumb { background: var(--vna-gold); border-radius: 4px; }
}

/* ===== PRINT STYLES (A4 landscape for weekly calendar) ===== */
@media print {
    @page {
        size: landscape;
        margin: 2mm 3mm;
    }

    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    body, #app {
        overflow: visible !important;
        height: auto !important;
        background: white !important;
    }

    /* Main content area — override overflow: hidden so weekly tab renders */
    main {
        display: block !important;
        flex: none !important;
        overflow: visible !important;
        height: auto !important;
        background: white !important;
        min-height: auto !important;
    }

    /* Content wrapper inside main — override overflow: hidden */
    main > div.flex-1,
    main > .flex-1,
    main > div[style*="flex-1"],
    #weekly-view-container,
    body main > div:last-child {
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
    }

    /* Fallback: all parents with overflow: hidden */
    main > div,
    main > div > div {
        overflow: visible !important;
        height: auto !important;
    }

    /* Hide everything except weekly tab */
    #auth-view,
    aside,
    header,
    nav,
    footer,
    .mobile-nav-item,
    #mobile-bottom-nav,
    #mobile-fab,
    #mobile-header,
    [id*="mobile"],
    #loading-mask,
    #toast,
    #detail-modal,
    #room-modal,
    #booking-modal,
    #delete-reason-modal,
    .md\:hidden,
    .btn-print,
    .print-hide,
    #calendar-nav,
    #calendar-nav ~ div,
    #room-selector-container,
    #booking-modal button,
    [id*="nav"] > button,
    #weekly-nav {
        display: none !important;
    }

    /* Force .hidden to show in print, but only inside weekly tab */
    #weekly-tab .hidden {
        display: inline-block !important;
    }

    /* Hide mobile-only elements in print */
    #weekly-tab .mobile-participant-toggle,
    #weekly-tab [id^="parts-"].absolute {
        display: none !important;
    }

    /* Show only weekly tab — use highest specificity to override Tailwind */
    body #weekly-tab,
    #weekly-tab {
        display: block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        background: white !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    #weekly-tab > div {
        /* outer wrapper */
        max-width: 100% !important;
        overflow: visible !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove Tailwind space-y-6 margin */
    #weekly-tab > div > * + * {
        margin-top: 0 !important;
    }

    /* Print title */
    .print-title {
        display: block !important;
        text-align: center;
        font-size: 14pt;
        font-weight: 700;
        color: #006885 !important;
        margin: 0 0 6px 0;
        padding: 0 0 6px 0;
        border-bottom: 2px solid #C3820B;
    }

    /* Print date banner */
    .print-date-display {
        display: block !important;
        text-align: center;
        font-size: 11pt;
        font-weight: 600;
        color: #006885 !important;
        margin: 0 0 12px 0;
        padding: 6px 12px;
        background: linear-gradient(135deg, rgba(197, 160, 89, 0.12), rgba(197, 160, 89, 0.05));
        border: 1px solid rgba(197, 160, 89, 0.4);
        border-radius: 6px;
        letter-spacing: 0.02em;
    }

    /* Show hidden elements inside weekly tab for print — high specificity to beat Tailwind CDN */
    body #weekly-tab td .hidden,
    body #weekly-tab td .print-visible {
        display: inline-block !important;
    }

    /* Show overflow containers so table renders */
    #weekly-tab > div > :nth-child(4) {
        overflow: visible !important;
    }

    #weekly-tab > div > :nth-child(4) .overflow-x-auto {
        overflow: visible !important;
    }

    /* Compact table for A4 */
    #weekly-tab table {
        font-size: 6.5pt !important;
        width: 100% !important;
        min-width: auto !important;
    }

    #weekly-tab th {
        padding: 2px 3px !important;
        font-size: 6.5pt !important;
        white-space: nowrap !important;
    }

    #weekly-tab td {
        padding: 2px 3px !important;
        font-size: 6.5pt !important;
    }

    /* Remove shadow from print wrapper */
    #weekly-tab > div {
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    #weekly-tab .shadow-sm,
    #weekly-tab .overflow-hidden {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    /* Hide empty-state colspan fallback */
    td[colspan] {
        font-size: 6pt !important;
    }
}

/* Print title (hidden on screen) */
.print-title,
.print-date-display {
    display: none;
}

/* Print button */
.btn-print {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #006885;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-print:hover {
    background: #001844;
    box-shadow: 0 4px 12px rgba(0, 32, 91, 0.3);
}

.btn-print i {
    font-size: 14px;
}

/* ===== AVATAR CROP MODAL — fullscreen ===== */
#avatar-crop-area {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 60%, #0f0f1a 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}
#avatar-crop-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(195,130,11,0.06) 0%, transparent 70%);
    pointer-events: none;
}
#avatar-crop-area img {
    max-width: 100%;
    max-height: calc(100dvh - 60px);
    display: block;
    margin: 0 auto;
}
#avatar-crop-modal .cropper-view-box,
#avatar-crop-modal .cropper-face {
    outline: 2px dashed #C3820B !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 0 30px rgba(195,130,11,0.15) !important;
}
#avatar-crop-modal .cropper-face {
    background-color: rgba(255, 255, 255, 0.06) !important;
}
#avatar-crop-modal .cropper-line {
    background-color: #C3820B !important;
    opacity: 0.85 !important;
}
#avatar-crop-modal .cropper-point {
    background-color: #C3820B !important;
}

/* ===== MOBILE CROP MODAL — beauty + pinch-zoom ===== */
@media (max-width: 768px) {
    #avatar-crop-area {
        background: linear-gradient(160deg, #0a0a14 0%, #121228 25%, #1a1a3e 50%, #121228 75%, #0a0a14 100%);
        /* Enable proper touch handling for pinch-zoom */
        touch-action: manipulation !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    #avatar-crop-area img {
        /* Prevent browser from hijacking pinch gesture */
        touch-action: none !important;
        -webkit-user-drag: none !important;
    }
    #avatar-crop-area::before {
        background:
            radial-gradient(ellipse at 30% 30%, rgba(195,130,11,0.08) 0%, transparent 50%),
            radial-gradient(ellipse at 70% 70%, rgba(0,104,133,0.1) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, rgba(195,130,11,0.04) 0%, transparent 70%);
    }
    #avatar-crop-modal .cropper-view-box {
        outline: 2.5px dashed rgba(195,130,11,0.9) !important;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 40px rgba(195,130,11,0.2), inset 0 0 20px rgba(195,130,11,0.05) !important;
        border-radius: 8px !important;
    }
    #avatar-crop-modal .cropper-face {
        background-color: rgba(255, 255, 255, 0.04) !important;
    }
    #avatar-crop-modal .cropper-line {
        background-color: rgba(195,130,11,0.85) !important;
        opacity: 0.9 !important;
    }
    #avatar-crop-modal .cropper-point {
        background-color: #C3820B !important;
        width: 18px !important;
        height: 18px !important;
    }
    #avatar-crop-modal .cropper-view-box::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(195,130,11,0.1);
        pointer-events: none;
    }
}

/* ===== MOBILE CROP MODAL BUTTONS ===== */
@media (max-width: 768px) {
    #avatar-crop-modal {
        animation: cropModalFadeIn 0.25s ease-out;
    }
    @keyframes cropModalFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    #avatar-crop-modal > div > div:first-child {
        background: rgba(255,255,255,0.92) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 -2px 20px rgba(0,0,0,0.08) !important;
        padding: 12px 16px !important;
    }
    #avatar-crop-cancel {
        min-height: 44px !important;
        min-width: 44px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        background: rgba(0,0,0,0.04) !important;
    }
    #avatar-crop-save {
        min-height: 44px !important;
        min-width: 80px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #006885 0%, #007799 100%) !important;
        box-shadow: 0 2px 12px rgba(0,104,133,0.25) !important;
    }
    #avatar-crop-save:active {
        transform: scale(0.97) !important;
    }
    /* Crop modal backdrop — smoother */
    #avatar-crop-modal {
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
}

/* ===== MOBILE GLASSMORPHISM EFFECTS ===== */
@media (max-width: 768px) {
    .glass-mobile {
        background: rgba(255,255,255,0.85) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }
}

/* ===== HISTORY PAGE — BENTO GRID ===== */

/* History card hover */
.history-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Expand animation */
.history-details {
    transition: max-height 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}
.history-details.expanded {
    max-height: 600px;
    opacity: 1;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Participant avatar stacking */
.avatar-stack {
    display: flex;
}
.avatar-stack .avatar-circle {
    margin-left: -8px;
    border: 2px solid white;
}
.avatar-stack .avatar-circle:first-child {
    margin-left: 0;
}

/* History filter pill bar */
#history-tab select,
#history-tab input[type="date"] {
    background: transparent;
    padding: 4px 8px;
    border-radius: 8px;
}
#history-tab select:hover,
#history-tab input[type="date"]:hover {
    background: #f9fafb;
}

/* Sort dropdown */
#sort-dropdown {
    transform: translateY(0);
}

/* ===== VERTICAL TIMELINE ===== */

.timeline-container {
    position: relative;
    margin-left: 10px;
    padding-left: 12px;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e5e7eb;
}

.timeline-event {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 0;
    font-size: 11px;
}

.timeline-event::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
}

.timeline-event.type-created::before { background: #22c55e; }
.timeline-event.type-approved::before { background: #3b82f6; }
.timeline-event.type-rejected::before { background: #ef4444; }
.timeline-event.type-cancelled::before { background: #f59e0b; }
.timeline-event.type-meeting-changed::before { background: #8b5cf6; }
.timeline-event.type-add-participant::before { background: #06b6d4; }
.timeline-event.type-remove-participant::before { background: #6b7280; }
.timeline-event.type-invite::before { background: #ec4899; }

.timeline-event .timeline-time {
    color: #9ca3af;
    font-size: 10px;
    white-space: nowrap;
    margin-left: auto;
}

/* Contacts Directory */
#contacts-list .contact-info-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease-in-out;
}

#contacts-list .contact-info-panel.expanded {
    max-height: 200px;
}

/* ===== Sidebar Accordion ===== */
.accordion-group > .accordion-header {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background 0.15s;
}
.accordion-group > .accordion-header:hover {
    background: rgba(255,255,255,0.05);
}
.accordion-icon {
    transform: rotate(180deg);
}
.accordion-icon.collapsed {
    transform: rotate(-90deg);
}
.accordion-body {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 1;
}
.accordion-body.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.accordion-item {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}
.accordion-item:hover {
    background: rgba(255,255,255,0.05);
}
.accordion-item.active-tab {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    font-weight: 600;
    border-left: 3px solid #E8A0BF;
    padding-left: 10px;
}
.accordion-item.active-tab i {
    color: #E8A0BF !important;
}

/* ===== FORM FOCUS GLOW EFFECTS ===== */

/* Text inputs & textareas - white bg forms */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

/* Light background forms (login, register, booking modal, history) */
input:focus,
textarea:focus,
select:focus:not(.room-selector):not(.no-glow) {
    border-color: var(--vna-gold);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.25), 0 0 16px rgba(197, 160, 89, 0.15);
    outline: none;
    background-color: #fffef8;
}

/* Dark background forms (login hero overlay) */
.hero-overlay input:focus,
.hero-overlay textarea:focus,
.hero-overlay select:focus {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: var(--vna-gold);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.4), 0 0 20px rgba(197, 160, 89, 0.3);
}

/* ===== DASHBOARD ONGOING MEETING PULSING GLOW ===== */

@keyframes cardOngoingPulse {
    0%, 100% {
        border-color: #e5e7eb;
        box-shadow: 0 0 0 0 rgba(197, 160, 89, 0);
    }
    50% {
        border-color: var(--vna-gold);
        box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.3), 0 0 20px rgba(197, 160, 89, 0.2);
    }
}

.card-ongoing {
    border: 2px solid transparent;
    animation: cardOngoingPulse 2s ease-in-out infinite;
}

/* ========================================
   NEW ANIMATIONS
   ======================================== */

/* --- Tab/Panel Transitions --- */

@keyframes panelSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes panelSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}
.tab-panel-entrance {
    animation: panelSlideIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: transform, opacity;
}

/* --- Card Staggered Entrance --- */

@keyframes staggerCardIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.stagger-card {
    opacity: 0;
    animation: staggerCardIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: transform, opacity;
}

/* --- Button Glow --- */

.btn-glow {
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.btn-glow:hover {
    box-shadow: 0 0 20px 3px rgba(197, 160, 89, 0.3);
    transform: translateY(-1px);
}
.btn-glow:active {
    transform: translateY(0) scale(0.98);
}

/* --- Button Ripple --- */

.btn-ripple {
    position: relative;
    overflow: hidden;
}
.btn-ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    pointer-events: none;
}
.btn-ripple.ripple-active::after {
    transform: scale(2.5);
    opacity: 1;
    transition: 0s;
}

/* --- Notification Badge Bounce --- */

@keyframes badgeBounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    50%  { transform: scale(0.9); }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.badge-animate {
    animation: badgeBounce 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Card Light Sweep --- */

.card-sweep {
    position: relative;
    overflow: hidden;
}
.card-sweep::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.card-sweep:hover::before {
    transform: translateX(200%);
}

/* --- Accordion Smooth Expand --- */

@keyframes contentSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.accordion-content {
    transition: max-height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.25s ease;
    overflow: hidden;
}
.accordion-content.opening {
    animation: contentSlideIn 0.3s ease forwards;
}

/* --- Ambient Pulse for Ongoing Bookings --- */

@keyframes softGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(197, 160, 89, 0.15); }
    50%      { box-shadow: 0 0 14px rgba(197, 160, 89, 0.35); }
}
.ongoing-glow {
    animation: softGlow 3s ease-in-out infinite;
}

/* --- Auth Page Entrance --- */

@keyframes authSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-entrance {
    animation: authSlideUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* --- Modal backdrop subtle shimmer --- */

@keyframes backdropShimmer {
    0%   { background-color: rgba(0, 0, 0, 0.5); }
    50%  { background-color: rgba(0, 0, 0, 0.55); }
    100% { background-color: rgba(0, 0, 0, 0.5); }
}
.modal-backdrop-animate {
    animation: backdropShimmer 1.5s ease-in-out infinite;
}

/* --- FAB bounce on hover --- */

@keyframes fabFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.fab-button {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fab-button:hover {
    animation: fabFloat 1.5s ease-in-out infinite;
    box-shadow: 0 8px 25px rgba(0, 32, 91, 0.3);
}

/* --- Skeleton loading pulse --- */

@keyframes skeletonPulse {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* --- Subtle blink for pending status --- */

@keyframes subtleBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
.status-pending-blink {
    animation: subtleBlink 2s ease-in-out infinite;
}

/* Lotus icon mirror — second petal below original */
.lotus-icon-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 0;
}
/* Keep image aspect ratio inside square container */
.icon-aspect {
    object-fit: contain;
}
.lotus-icon-mirror {
    transform: scaleY(-1);
    opacity: 0.3;
    filter: blur(0.5px);
}
/* Icon sizes — width only, height auto via object-fit: contain */
.lotus-img {
    width: 3rem; /* 48px, matches w-12 */
}
.lotus-img-mobile {
    width: 2rem; /* 32px, matches w-8 */
}