/*
 * File: style.css
 * Description: Custom styles for the Purchase Order System
 */

/* =================================
   1. Global Styles & Fonts
   ================================= */

/* --- Import Google Fonts (Noto Sans Thai) --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;700&display=swap');

/* --- Global Styles & Typography --- */
body {
    font-family: 'Noto Sans Thai', sans-serif;
    background-color: #f8f9fa; /* สีพื้นหลังเทาอ่อนๆ */
}


/* =================================
   2. Dynamic Form Styles (Create/Edit Order)
   ================================= */

/* --- Autocomplete Styles --- */
.autocomplete-wrapper {
    position: relative; /* กำหนดให้เป็นจุดอ้างอิง */
}

.autocomplete-suggestions {
    position: absolute;     /* ทำให้ "ลอย" ออกมาจากตำแหน่งปกติ */
    top: 100%;            /* กำหนดให้อยู่ใต้ input field */
    left: 0;
    width: 100%;          /* ทำให้ความกว้างเท่ากับ input field */
    background: #fff;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    z-index: 1050;        /* กำหนดให้อยู่ชั้นบนสุดเสมอ */
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #e9ecef;
}

/* --- Item List Container with Scrollbar --- */
.item-list-container {
    max-height: 400px; /* กำหนดความสูงสูงสุดของกล่อง */
    overflow-y: auto;  /* ให้มี Scrollbar แนวตั้งเมื่อรายการเกินความสูง */
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    border-radius: 0.25rem;
}


/* =================================
   3. View Order Page Styles
   ================================= */

#printableArea .form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#printableArea .company-details {
    flex-grow: 1;
    text-align: center;
}
#printableArea .form-footer {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}
#printableArea .signature-box {
    width: 30%;
}
#printableArea .signature-box .line {
    border-bottom: 1px dotted #333;
    height: 60px;
    margin-bottom: 0.5rem;
}


/* =================================
   4. Responsive Styles for Mobile
   ================================= */
@media (max-width: 767.98px) {
    
    /* --- Responsive for view_order.php Buttons --- */
    .d-flex.flex-column.flex-md-row {
        align-items: stretch !important;
    }
    .d-flex.flex-column.flex-md-row .btn {
        width: 100%;
    }
    .d-flex.flex-column.flex-md-row h1 {
        text-align: center;
        margin-bottom: 1rem !important;
    }

    /* --- Responsive for view_order.php Item Table --- */
    /* ซ่อนหัวตารางแบบดั้งเดิมบนมือถือ */
    #printableArea .table thead {
        display: none;
    }

    #printableArea .table,
    #printableArea .table tbody,
    #printableArea .table tr,
    #printableArea .table td {
        display: block;
        width: 100%;
    }

    #printableArea .table tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        overflow: hidden;
    }

    #printableArea .table td {
        text-align: right;
        position: relative;
        padding-left: 50%;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }
    
    #printableArea .table td:first-child {
        background-color: #f8f9fa;
        font-weight: bold;
        text-align: left;
        padding-left: 0.75rem;
    }
    
    #printableArea .table td:first-child::before {
        content: none;
    }

    #printableArea .table td:last-child {
        border-bottom: none;
    }

    /* สร้างหัวข้อขึ้นมาใหม่จาก data-label */
    #printableArea .table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #343a40;
    }

    /* จัด Layout ส่วนท้ายให้เรียงต่อกัน */
    #printableArea .form-body .row .col-md-6,
    #printableArea .form-body .row .col-md-7,
    #printableArea .form-body .row .col-5 {
        width: 100%;
    }

    #printableArea .form-footer {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    /* --- Mobile Action Bar for view_order.php --- */
    main.container {
        padding-bottom: 100px;
    }
    .mobile-action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.75rem;
        background-color: #ffffff;
        border-top: 1px solid #dee2e6;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1030;
    }
}