/* Custom styles for My Hotels */

:root {
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

    /* Theme 1: Arctic Blue (Default) */
    --bg-arctic-start: #f0f9ff;
    --bg-arctic-end: #e0f2fe;

    /* Theme 2: Platinum Silver */
    --bg-platinum-start: #f8fafc;
    --bg-platinum-end: #e2e8f0;

    /* Theme 3: Midnight Executive */
    --bg-midnight-start: #0f172a;
    --bg-midnight-end: #1e293b;
}

/* Theme Classes */
body.theme-arctic main {
    background: linear-gradient(135deg, var(--bg-arctic-start) 0%, var(--bg-arctic-end) 100%);
}

body.theme-platinum main {
    background: linear-gradient(135deg, var(--bg-platinum-start) 0%, var(--bg-platinum-end) 100%);
    color: #334155;
    /* Slate-700 for better contrast on silver */
}

/* Adjust texts for platinum if needed */
body.theme-platinum .text-slate-500 {
    color: #64748b;
}

body.theme-midnight main {
    background: radial-gradient(circle at center, var(--bg-midnight-end) 0%, var(--bg-midnight-start) 100%);
    color: #f1f5f9;
}

/* Midnight Theme Overrides */
body.theme-midnight h1,
body.theme-midnight h2,
body.theme-midnight h3,
body.theme-midnight p,
body.theme-midnight td {
    color: white !important;
}

body.theme-midnight .text-slate-500 {
    color: #94a3b8 !important;
}

body.theme-midnight .text-slate-600 {
    color: #cbd5e1 !important;
}

body.theme-midnight .text-slate-900 {
    color: #ffffff !important;
}

body.theme-midnight .bg-white {
    background-color: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.theme-midnight .glass-card {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.theme-midnight table thead {
    background-color: rgba(15, 23, 42, 0.8) !important;
}

html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar - Sleek & Minimal */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Glassmorphism Utilities */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
}

/* Enhanced Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-entrance {
    opacity: 0;
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered Delay Utilities */
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

/* Button Effects */
.btn-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Print Styles */
@media print {
    @page {
        margin: 0;
    }

    body {
        padding: 0;
        margin: 0;
        background: white;
    }

    /* Hide everything by default */
    aside,
    header,
    #dashboard-content,
    .modal,
    .toast {
        display: none !important;
    }

    /* Show only print container */
    #print-container {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: white;
    }

    /* Paper Sizes */
    .page-A4 {
        width: 210mm;
        min-height: 297mm;
        padding: 20mm;
        margin: 0 auto;
    }

    .page-A5 {
        width: 148mm;
        min-height: 210mm;
        padding: 15mm;
        margin: 0 auto;
    }

    /* Print Utilities */
    .print-header {
        width: 100%;
        margin-bottom: 20px;
    }

    .print-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .print-content {
        font-family: 'Times New Roman', serif;
        color: #000;
    }

    .print-title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
        text-transform: uppercase;
        border-bottom: 2px solid #000;
        padding-bottom: 10px;
    }

    .print-row {
        display: flex;
        margin-bottom: 10px;
        border-bottom: 1px dotted #ccc;
        padding-bottom: 5px;
    }

    .print-label {
        font-weight: bold;
        width: 140px;
    }

    .print-value {
        flex: 1;
    }

    .print-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .print-section {
        margin-bottom: 20px;
    }

    .print-section-title {
        font-weight: bold;
        border-bottom: 1px solid #000;
        margin-bottom: 10px;
        font-size: 14px;
        text-transform: uppercase;
    }

    .print-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    .print-table th,
    .print-table td {
        border: 1px solid #000;
        padding: 5px;
        text-align: left;
        font-size: 12px;
    }

    .print-signature {
        margin-top: 50px;
        display: flex;
        justify-content: space-between;
        page-break-inside: avoid;
    }

    .sig-box {
        text-align: center;
        border-top: 1px solid #000;
        width: 200px;
        padding-top: 5px;
    }

    /* --- Bookings Print Mode --- */
    body.print-bookings-mode {
        background: white !important;
        color: black !important;
    }

    body.print-bookings-mode aside,
    body.print-bookings-mode header,
    body.print-bookings-mode .modal,
    body.print-bookings-mode .toast,
    body.print-bookings-mode #dashboard-content > .panel:not(#booking-panel) {
        display: none !important;
    }

    body.print-bookings-mode #dashboard-content,
    body.print-bookings-mode main {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: white !important;
    }

    body.print-bookings-mode #booking-panel {
        display: block !important;
        padding: 20px !important;
    }

    /* Hide the buttons inside the booking panel (like New Reservation & Print) */
    body.print-bookings-mode #booking-panel .flex.justify-end {
        display: none !important;
    }

    /* Hide the Actions column in the table */
    body.print-bookings-mode #bookings-table-body td:last-child,
    body.print-bookings-mode #booking-panel th:last-child {
        display: none !important;
    }

    body.print-bookings-mode .glass-card {
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }

    body.print-bookings-mode table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    body.print-bookings-mode th,
    body.print-bookings-mode td {
        border: 1px solid #ddd !important;
        padding: 8px !important;
        color: black !important;
    }

    /* --- Individual Booking Slip Print Mode --- */
    html.print-slip-mode {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.print-slip-mode {
        background: white !important;
        color: black !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        position: relative !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* Hide the main dashboard shell explicitly */
    body.print-slip-mode > div.flex.h-screen,
    body.print-slip-mode .modal,
    body.print-slip-mode .toast,
    body.print-slip-mode aside,
    body.print-slip-mode header {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* Ensure the booking slip is visible and unconstrained */
    body.print-slip-mode #print-booking-slip,
    body.print-slip-mode #print-booking-slip * {
        visibility: visible !important;
    }

    body.print-slip-mode #print-booking-slip {
        display: block !important;
        position: absolute !important; /* Force to top left to ignore any flex layout */
        top: 0 !important;
        left: 0 !important;
        z-index: 9999 !important; /* Force it to the top layer */
        opacity: 1 !important; /* Force opacity */
        page-break-inside: avoid !important;
        page-break-before: avoid !important;
        margin: 0 !important; /* Remove auto margin to avoid centering pushdowns */
        padding: 20px !important;
        width: 100vw !important; /* Force full width */
        height: auto !important;
        min-height: 100% !important;
        background: white !important;
    }
}