/* style.css */

/* ฟอนต์พื้นฐานของระบบ */
body {
    font-family: 'Sarabun', sans-serif;
}

/* ซ่อน element ที่มีแอตทริบิวต์ v-cloak ไว้จนกว่า Vue จะโหลดเสร็จ */
/* ช่วยป้องกันไม่ให้ผู้ใช้เห็น {{ variable }} แวบขึ้นมาตอนหน้าเว็บกำลังโหลด */
[v-cloak] { 
    display: none; 
}

/* -----------------------------------------
   Sidebar Navigation Styles
----------------------------------------- */
.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-link:hover {
    background-color: #e5e7eb; /* tailwind: gray-200 */
}

.sidebar-link.active {
    background-color: #3b82f6; /* tailwind: blue-500 */
    color: white;
    font-weight: 600;
}

.sidebar-link.active svg {
    color: white;
}

/* -----------------------------------------
   Drag and Drop (SortableJS) Styles
----------------------------------------- */
.drag-handle {
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

.sortable-ghost {
    opacity: 0.4;
    background: #c8ebfb;
}

/* -----------------------------------------
   Chart Animation Styles
----------------------------------------- */
.chart-slice {
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

.chart-slice:hover {
    transform: scale(1.05);
}

/* -----------------------------------------
   Print Styles (สำหรับพิมพ์รายงาน)
----------------------------------------- */
@media print {
    body * {
        visibility: hidden;
    }
    #report-output, #report-output * {
        visibility: visible;
    }
    #report-output {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}