/* ESMQD Custom Stylesheet - Academic Year 2569 */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Sarabun', 'Kanit', sans-serif;
    background-color: #f8fafc; /* Slate 50 */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Kanit', sans-serif;
}

/* Glassmorphism utility */
.glass-panel {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

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

/* Signature Pad container */
.signature-container {
    position: relative;
    width: 100%;
    height: 180px;
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    background-color: #fff;
    touch-action: none;
    overflow: hidden;
}

.signature-container canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

/* Presentation Slides Styling */
.slide-container {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.slide {
    display: none;
}

.slide.active {
    display: flex;
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

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

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

/* Print Overrides */
@media print {
    .no-print {
        display: none !important;
    }
    body {
        background-color: #fff !important;
        font-size: 12pt;
    }
    .print-card {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 2rem !important;
    }
    .page-break {
        page-break-before: always;
    }
}

/* Global page break class for PDF exports */
.page-break {
    page-break-after: always;
    break-after: page;
}

/* Presentation mode specific */
.presentation-fullscreen {
    background: radial-gradient(circle at top right, #0f172a, #020617);
    color: #f8fafc;
}

/* Fix Thai Font Rendering / Character overlapping in html2canvas, html2pdf and print */
.pdf-exporting *,
.print-page,
.print-page *,
#dashboard-print-area,
#dashboard-print-area *,
#school-print-area,
#school-print-area *,
#consolidated-print-area,
#consolidated-print-area *,
#committee-print-area,
#committee-print-area *,
.slide-container,
.slide-container *,
.slide,
.slide * {
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: 1.45 !important;
}

/* Globally override letter-spacing on Thai elements since letter-spacing splits combining vowels/tonemarks */
html[lang="th"] [class*="tracking-"] {
    letter-spacing: normal !important;
}

/* --- ESMQD Mobile & PWA Custom Utilities --- */

/* Safe area padding bottom for modern bezel-less smartphones (iOS & Android home indicators) */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Animations for installation prompts */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#pwa-install-container {
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Touch devices optimization */
@media (max-width: 768px) {
    /* Touch targets - prevent small elements that are hard to tap */
    .btn, button, select, input[type="text"], input[type="password"], input[type="number"], input[type="checkbox"] {
        min-height: 42px;
    }
    
    /* Custom horizontal scroll container for tables on touch screens */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    /* Make sure canvas charts do not stretch out of bounding containers */
    canvas {
        max-width: 100% !important;
    }
}