@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.18);
    }
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar for list if needed */
::-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;
}

.custom-scrollbar::-webkit-scrollbar {
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #a7f3d0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

@media print {

    /* Page Setup */
    @page {
        size: A4 portrait;
        margin: 0.3cm;
    }

    /* Hide everything except monthly schedule */
    body>*:not(#app) {
        display: none !important;
    }

    #app>*:not(.px-5) {
        display: none !important;
    }

    /* Show only monthly schedule section */
    body,
    #app {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #monthly-schedule-container {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100%;
        margin: 0;
        padding: 0;
        background: white;
        opacity: 1 !important;
        transform: none !important;
        box-shadow: none;
        border: none;
        page-break-inside: avoid;
        font-size: 6.5pt;
    }

    .overflow-x-auto {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    /* Hide buttons */
    #print-monthly-btn,
    #toggle-monthly-btn,
    button {
        display: none !important;
    }

    /* Table Styling */
    table {
        width: 100% !important;
        border-collapse: collapse;
        font-size: 6.5pt;
        page-break-inside: avoid;
    }

    th,
    td {
        border: 1px solid #999;
        padding: 1px 2px;
        color: black !important;
        text-align: center;
        page-break-inside: avoid;
        line-height: 1.2;
    }

    thead {
        background-color: #eee !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        display: table-header-group;
    }

    tbody {
        display: table-row-group;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    /* Footer Styling */
    #print-footer {
        display: block !important;
        visibility: visible !important;
        position: relative;
        margin-top: 10px;
        width: 100%;
        text-align: center;
        background: white;
        padding: 3px;
        font-size: 6pt;
        color: #666;
    }

    body {
        background: white;
    }
}