/* css/style.css - สไตล์หลักและการจัดวางทั่วไป */

/* Category Colors */
.cat-orange { background-color: #FFC000; font-weight: bold; text-align: center; border: 1px solid #000; }
.cat-blue { background-color: #00B0F0; font-weight: bold; text-align: center; border: 1px solid #000; }
.cat-green { background-color: #92D050; font-weight: bold; text-align: center; border: 1px solid #000; }
.cat-red { background-color: #C00000; font-weight: bold; text-align: center; color: white; border: 1px solid #000; }
.cat-grey { background-color: #D9D9D9; font-weight: bold; text-align: center; border: 1px solid #000; }
.cat-yellow { background-color: #FFFF00; font-weight: bold; text-align: center; border: 1px solid #000; }

/* Row Backgrounds */
.row-bg-green { background-color: #92D050; }
.row-bg-yellow { background-color: #FFFF99; }

/* Excel Sheet Table */
.excel-sheet { width: 100%; border-collapse: collapse; font-family: 'Tahoma', sans-serif; font-size: 13px; }
.excel-sheet th, .excel-sheet td { border: 1px solid #000; padding: 4px 8px; vertical-align: middle; }

/* Inputs */
.input-cell { width: 100%; border: none; background: transparent; font-family: 'Tahoma'; font-size: 13px; }

/* Utility Colors (เพิ่ม !important เพื่อแก้ปัญหาสีหาย) */
.bg-gray { background-color: #BFBFBF !important; font-weight: bold; }
.bg-yellow { background-color: #FFFF99 !important; }
.bg-green-header { background-color: #92D050 !important; font-weight: bold; text-align: center; }

/* Preview Table (A4) */
.preview-table { width: 100%; border-collapse: collapse; font-family: 'Tahoma', sans-serif; font-size: 11px; }
.preview-table th { border: 1px solid #000; padding: 3px; text-align: center; font-weight: bold; height: 35px; vertical-align: middle; }
.preview-table td { border: 1px solid #000; padding: 4px; vertical-align: middle; }
.preview-table .footer-label { background-color: #FFF5EE; text-align: right; font-weight: bold; padding-right: 8px; }
.preview-table .footer-value { text-align: right; font-weight: bold; padding-right: 8px; }
.baht-text-bar { background-color: #D9D9D9; text-align: center; font-weight: bold; border-top: 1px solid #000; padding: 5px; }

.booking-remarks-row td {
    border: none;
    padding: 0;
    background: transparent;
}

.booking-note {
    margin: 8px 12px;
    padding: 12px 16px;
    border: 1px dashed #007bff;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 123, 255, 0.08), rgba(255, 255, 255, 0.3));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    font-size: 12px;
    color: #002d72;
    line-height: 1.4;
}

.booking-note p {
    position: relative;
    margin: 6px 0;
    padding-left: 20px;
}

.booking-note p::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
    color: #007bff;
    font-weight: bold;
}

/* Responsive Navigation - Phase 3
   Mobile: Scrollable tabs with hamburger menu option
   PC: Full horizontal tabs
   ========================================================================== */

/* Base: Mobile-first (horizontal scrollable tabs) */
.tabs {
    display: flex;
    background: var(--color-bg-gray);
    padding: var(--space-sm);
    gap: var(--space-xs);
    border-bottom: 1px solid var(--color-border-default);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    background: var(--color-bg-gray);
    border: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-weight: bold;
    font-size: var(--font-sm);
    white-space: nowrap;
    flex-shrink: 0;
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
}

.tab-btn.active {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-bg-white);
    color: var(--color-text-blue);
}

.tab-content {
    display: none;
    padding: var(--space-md);
    background: var(--color-bg-white);
}

.tab-content.active {
    display: block;
}

/* Document Actions - Mobile */
.document-actions {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.document-actions button {
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-sm);
    font-weight: bold;
    cursor: pointer;
    background: var(--color-accent-purple);
    color: var(--color-text-white);
    box-shadow: var(--shadow-sm);
    min-height: var(--touch-min);
    white-space: nowrap;
}

.document-actions button:hover {
    opacity: 0.85;
}

/* PC Overrides: Full tabs */
@media (min-width: 1024px) {
    .tabs {
        padding: var(--space-sm) var(--space-lg);
        gap: var(--space-sm);
        overflow-x: visible;
        flex-wrap: wrap;
    }
    
    .tab-btn {
        padding: var(--space-sm) var(--space-xl);
        font-size: var(--font-base);
    }
    
    .document-actions button {
        padding: var(--space-xs) var(--space-md);
        font-size: var(--font-base);
    }
}

/* Print: Hide navigation */
@media print {
    .tabs,
    .document-actions {
        display: none !important;
    }
}

/* Hide export/share buttons during PDF capture */
body.pdf-export .document-actions {
    display: none !important;
}

/* Status Select Styling */
.status-select {
    border: 1px solid #ccc;
    padding: 1px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 12px;
    width: 100%;
    cursor: pointer;
    text-align: center;
}

/* Status Colors */
.status-waiting { background-color: #f0ad4e; color: #fff; }      /* รอสรุป */
.status-sent { background-color: #5bc0de; color: #fff; }         /* ส่งแล้ว */
.status-deposit-wait { background-color: #d9534f; color: #fff; } /* รอมัดจำ */
.status-deposit-done { background-color: #5cb85c; color: #fff; } /* มัดจำแล้ว */
.status-tax-wait { background-color: #0275d8; color: #fff; }     /* รอใบหัก */
.status-cancel { background-color: #999; color: #fff; }          /* ยกเลิก */

/* Print Styles */
@media print { .no-print { display: none; } }

/* Thai font settings for PDF export - works with both html2canvas and Puppeteer */
body.pdf-export * {
    font-family: "Tahoma", "Arial Unicode MS", sans-serif !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
}

/* A4 page sizing for PDF export */
body.pdf-export .a4-page {
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 auto !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

/* Desktop buttons class for columns that should only show on desktop */
.desktop-buttons { display: table-cell; }

/* Mobile hamburger class for mobile-only menu */
.desktop-visible {
    display: none;
}

/* PC/Desktop: Show desktop columns, hide mobile columns */
@media (min-width: 1024px) {
    .desktop-visible {
        display: table-cell;
    }
    .mobile-visible {
        display: none;
    }
}

/* Mobile: Show mobile columns, hide desktop columns */
@media (max-width: 1023px) {
    .mobile-visible {
        display: table-cell;
    }
    .desktop-visible {
        display: none;
    }
}

/* Customer column adjustments */
.customer-cell { 
    white-space: normal; 
    min-width: 150px;
}

/* Mobile Responsive Base (Common) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px; padding-bottom: 50px; }
.mobile-tabs { flex-wrap: wrap; gap: 5px; padding: 5px; }
.mobile-tab-btn { padding: 8px 12px; font-size: 14px; min-width: 80px; }
.mobile-preview { transform: scale(0.8); transform-origin: top left; width: 125%; margin-left: -12.5%; }
.mobile-title { font-size: 18px !important; }
.no-print button { font-size: 12px; padding: 4px 8px; }

/* ==========================================================================
   Dashboard Table - Column Styles
   ========================================================================== */

/* Header cells centered */
.dashboard-table th {
    text-align: center;
    vertical-align: middle;
}

/* Dashboard table cells - auto width based on content */
.dashboard-table td,
.dashboard-table th {
    width: auto;
    white-space: nowrap;
}

/* ID column - small font */
.dashboard-table .col-id {
    font-size: 10px;
    text-align: center;
}

/* Event date column */
.dashboard-table .col-event-date {
    text-align: center;
}

/* Customer column - flexible width, takes remaining space */
.dashboard-table .col-customer {
    width: 100%;
    min-width: 150px;
    white-space: normal;
    text-align: left;
}

/* Total column */
.dashboard-table .col-total {
    text-align: right;
}

/* Status column - small font */
.dashboard-table .col-status {
    font-size: 10px;
    text-align: center;
}

/* Action columns (edit/delete) */
.dashboard-table .col-action {
    text-align: center;
    width: auto;
}