/* Kasikorn Bank CSS Variables */

:root {
    --k-primary: #00945E;
    --k-primary-dark: #007A4D;
    --k-primary-light: #E6F4EF;
    --k-secondary: #19764D;
    --k-accent: #00C875;
    --k-warning: #FF9900;
    --k-error: #DC3545;
    --k-success: #00B050;
    --k-warning-bg: #FFF8E5;
    --k-warning-text: #172B4D;
    --k-warning-border: #FFB800;
    
    /* Gray Scale */
    --k-gray-100: #F5F6F7;
    --k-gray-200: #EBEDF0;
    --k-gray-300: #DFE1E6;
    --k-gray-400: #B3B9C4;
    --k-gray-500: #8993A4;
    --k-gray-600: #6B778C;
    
    /* Text Colors */
    --k-text-primary: #172B4D;
    --k-text-secondary: #5E6C84;
    --k-text-disabled: #A5ADBA;
    --k-white: #FFFFFF;
    
    /* Shadows */
    --k-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --k-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --k-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    
    /* Border Radius */
    --k-radius-sm: 4px;
    --k-radius-md: 8px;
    --k-radius-lg: 12px;
    
    /* Spacing */
    --k-spacing-xs: 4px;
    --k-spacing-sm: 8px;
    --k-spacing-md: 16px;
    --k-spacing-lg: 24px;
    
    /* Typography */
    --k-font-family: 'DB Helvethaica X', -apple-system, BlinkMacSystemFont, sans-serif;
    --k-font-size-xs: 11px;
    --k-font-size-sm: 12px;
    --k-font-size-base: 13px;
    --k-font-size-lg: 14px;
    --k-font-size-xl: 16px;
}

.rg-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.rg-toast {
    background: var(--k-white);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-shadow-lg);
    width: 380px;
    max-width: calc(100vw - 40px);
    pointer-events: auto;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.rg-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.rg-toast-content {
    display: flex;
    padding: 16px;
    gap: 12px;
    align-items: flex-start;
}

.rg-toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.rg-toast-info .rg-toast-icon {
    background: var(--k-primary-light);
    color: var(--k-primary);
}

.rg-toast-message {
    flex-grow: 1;
    min-width: 0;
}

.rg-toast-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--k-text-primary);
    margin-bottom: 4px;
}

.rg-toast-description {
    font-size: 13px;
    color: var(--k-text-secondary);
}

.rg-toast-actions {
    padding: 0 16px 16px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.rg-toast-action-btn {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: var(--k-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rg-toast-close {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--k-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.rg-toast-close:hover {
    background: var(--k-gray-100);
    color: var(--k-text-primary);
}

.rg-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--k-primary-light);
}

.rg-toast-progress::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: var(--k-primary);
    animation: toast-progress 10s linear forwards;
}

@keyframes toast-progress {
    from { width: 100%; }
    to { width: 0%; }
}

@media (max-width: 576px) {
    .rg-toast-container {
        top: auto;
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

    .rg-toast {
        width: 100%;
    }
}

/* Base Modal Styles */
.rg-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: none; /* แทน opacity/visibility */
    align-items: center;
    justify-content: center;
    padding: var(--k-spacing-md);
}

.rg-modal.show {
    display: flex; /* แทน opacity/visibility */
}

.rg-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(23, 43, 77, 0.5);
    backdrop-filter: blur(4px);
}

.rg-modal-content {
    position: relative;
    background: var(--k-white);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-lg);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    margin: 0 auto;
    z-index: 1051;
    display: flex;
    flex-direction: column;
}

.show .rg-modal-content {
    transform: translateY(0);
    opacity: 1;
}

.rg-modal-header {
    padding: var(--k-spacing-lg);
    border-bottom: 1px solid var(--k-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--k-white);
    z-index: 2;
    border-top-left-radius: var(--k-radius-lg);
    border-top-right-radius: var(--k-radius-lg);
}

.rg-modal-header h3 {
    margin: 0;
    color: var(--k-text-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.rg-modal-body {
    padding: var(--k-spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.rg-modal-footer {
    padding: var(--k-spacing-md) var(--k-spacing-lg);
    border-top: 1px solid var(--k-gray-200);
    display: flex;
    justify-content: flex-end;
    gap: var(--k-spacing-sm);
    position: sticky;
    bottom: 0;
    background: var(--k-white);
    z-index: 2;
    border-bottom-left-radius: var(--k-radius-lg);
    border-bottom-right-radius: var(--k-radius-lg);
}

/* Print Area Specific Styles */
#printArea {
    background: var(--k-white);
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-md);
    padding: var(--k-spacing-lg);
}

/* Print Preview Container */
.print-preview {
    background: white;
    padding: var(--k-spacing-md);
    border: 1px solid var(--k-gray-200);
    border-radius: var(--k-radius-md);
    margin-bottom: var(--k-spacing-md);
}

/* Slip Styles */
.slip-header {
    text-align: center;
    margin-bottom: var(--k-spacing-md);
    padding-bottom: var(--k-spacing-sm);
    border-bottom: 1px dashed var(--k-gray-300);
}

.slip-header h2 {
    margin: 0 0 var(--k-spacing-xs);
    font-size: var(--k-font-size-xl);
    color: var(--k-text-primary);
}

.slip-section {
    margin: var(--k-spacing-md) 0;
}

.slip-section h3 {
    font-size: var(--k-font-size-lg);
    color: var(--k-text-primary);
    margin: 0 0 var(--k-spacing-sm);
    padding-bottom: var(--k-spacing-xs);
    border-bottom: 1px solid var(--k-gray-200);
}

.slip-row {
    display: flex;
    justify-content: space-between;
    margin: var(--k-spacing-xs) 0;
    line-height: 1.5;
}

.slip-label {
    color: var(--k-text-secondary);
}

.slip-value {
    font-weight: 500;
    color: var(--k-text-primary);
}

.slip-divider {
    height: 1px;
    background: var(--k-gray-200);
    margin: var(--k-spacing-md) 0;
}

/* Modal Buttons */
.rg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--k-spacing-sm) var(--k-spacing-lg);
    border-radius: var(--k-radius-md);
    font-size: var(--k-font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: var(--k-spacing-sm);
    min-width: 100px;
}

.rg-btn-primary {
    background: var(--k-primary);
    color: var(--k-white);
    border: none;
}

.rg-btn-primary:hover {
    background: var(--k-primary-dark);
}

.rg-btn-secondary {
    background: var(--k-white);
    color: var(--k-text-primary);
    border: 1px solid var(--k-gray-300);
}

.rg-btn-secondary:hover {
    background: var(--k-gray-100);
}

/* QR Code Container */
.slip-qrcode {
    text-align: center;
    margin: var(--k-spacing-lg) 0;
}

.slip-qrcode img {
    max-width: 200px;
    height: auto;
}

/* Footer Section */
.slip-footer {
    text-align: center;
    margin-top: var(--k-spacing-lg);
    padding-top: var(--k-spacing-md);
    border-top: 1px dashed var(--k-gray-300);
    color: var(--k-text-secondary);
    font-size: var(--k-font-size-sm);
}

/* Scrollbar Styling */
.rg-modal-body::-webkit-scrollbar {
    width: 8px;
}

.rg-modal-body::-webkit-scrollbar-track {
    background: var(--k-gray-100);
    border-radius: 4px;
}

.rg-modal-body::-webkit-scrollbar-thumb {
    background: var(--k-gray-400);
    border-radius: 4px;
}

.rg-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--k-gray-500);
}

/* Prevent Background Scroll */
body.rg-modal-open {
    overflow: hidden;
    padding-right: 17px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .rg-modal-content {
        width: 95%;
        margin: var(--k-spacing-sm);
        max-height: 95vh;
    }

    .rg-modal-header,
    .rg-modal-body,
    .rg-modal-footer {
        padding: var(--k-spacing-md);
    }

    .rg-btn {
        padding: var(--k-spacing-sm) var(--k-spacing-md);
        min-width: 80px;
    }
}



/* Print Media Query */
@media print {
    .rg-modal {
        position: absolute;
        padding: 0;
    }

    .rg-modal-overlay {
        display: none;
    }

    .rg-modal-content {
        box-shadow: none;
        width: 100%;
        max-width: none;
    }

    .rg-modal-header,
    .rg-modal-footer {
        display: none;
    }

    .rg-modal-body {
        padding: 0;
    }

    #printArea {
        border: none;
        padding: 0;
    }
}

/* Filter Panel Styles */
.rg-filter-panel {
    background: var(--k-white);
    border-radius: var(--k-radius-md);
    padding: var(--k-spacing-lg);
    margin-bottom: var(--k-spacing-lg);
    box-shadow: var(--k-shadow-sm);
    border: 1px solid var(--k-gray-200);
}

.rg-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--k-spacing-md);
    margin-bottom: var(--k-spacing-lg);
}

.rg-filter-item {
    display: flex;
    flex-direction: column;
    gap: var(--k-spacing-xs);
}

.rg-filter-label {
    font-size: var(--k-font-size-sm);
    color: var(--k-text-secondary);
    font-weight: 500;
    margin-bottom: 2px;
}

.rg-filter-input {
    height: 40px;
    padding: var(--k-spacing-sm) var(--k-spacing-md);
    border: 1px solid var(--k-gray-300);
    border-radius: var(--k-radius-sm);
    font-size: var(--k-font-size-base);
    color: var(--k-text-primary);
    transition: all 0.2s ease;
    background-color: var(--k-white);
    width: 100%;
}

.rg-filter-input:hover {
    border-color: var(--k-gray-400);
}

.rg-filter-input:focus {
    border-color: var(--k-primary);
    box-shadow: 0 0 0 3px rgba(0, 148, 94, 0.1);
    outline: none;
}

/* Date Range Filter */
.rg-filter-date-range {
    display: flex;
    align-items: center;
    gap: var(--k-spacing-sm);
}

.rg-date-separator {
    color: var(--k-text-secondary);
    font-size: var(--k-font-size-sm);
    padding: 0 var(--k-spacing-xs);
}

/* Filter Actions */
.rg-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--k-spacing-md);
    padding-top: var(--k-spacing-md);
    border-top: 1px solid var(--k-gray-200);
}

/* Filter Summary */
.rg-filter-summary {
    color: var(--k-text-secondary);
    font-size: var(--k-font-size-sm);
    margin-top: var(--k-spacing-md);
    padding: var(--k-spacing-sm) var(--k-spacing-md);
    background: var(--k-gray-100);
    border-radius: var(--k-radius-sm);
    display: inline-flex;
    align-items: center;
}

/* Select Input Styling */
.rg-filter-input[type="select"],
select.rg-filter-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B778C' viewBox='0 0 16 16'%3E%3Cpath d='M8 10.5l-4-4h8l-4 4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Date Input Styling */
.rg-filter-input[type="date"] {
    min-width: 140px;
}

.rg-filter-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 4px;
    margin-right: -4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.rg-filter-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Column Manager */
.rg-column-manager-btn {
    margin-bottom: var(--k-spacing-md);
    padding: var(--k-spacing-sm) var(--k-spacing-md);
    background-color: var(--k-white);
    border: 1px solid var(--k-gray-300);
    border-radius: var(--k-radius-sm);
    color: var(--k-text-primary);
    font-size: var(--k-font-size-base);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--k-spacing-sm);
}

.rg-column-manager-btn:hover {
    background-color: var(--k-gray-100);
    border-color: var(--k-gray-400);
}

.rg-column-manager-btn i {
    font-size: 14px;
    color: var(--k-text-secondary);
}

/* Responsive Adjustments for Filters */
@media (max-width: 768px) {
    .rg-filter-grid {
        grid-template-columns: 1fr;
    }

    .rg-filter-actions {
        flex-direction: column-reverse;
        gap: var(--k-spacing-sm);
    }

    .rg-filter-actions .rg-btn {
        width: 100%;
    }

    .rg-filter-date-range {
        flex-direction: column;
        align-items: stretch;
    }

    .rg-date-separator {
        text-align: center;
        padding: var(--k-spacing-xs) 0;
    }
}

/* Empty State */
.rg-empty-state {
    text-align: center;
    padding: var(--k-spacing-lg);
}

.rg-empty-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--k-spacing-md);
    color: var(--k-text-secondary);
}

.rg-empty-message i {
    font-size: 32px;
    color: var(--k-gray-400);
}

.rg-empty-message .rg-btn {
    margin-top: var(--k-spacing-sm);
}

/* Column Manager Modal */
.rg-column-manager-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: none;
}

.rg-column-manager-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    
}

/* Column Manager Modal Content */
.rg-column-manager-modal .rg-modal-content {
    background: var(--k-white);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-lg);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    margin: var(--k-spacing-md);
    display: flex;
    flex-direction: column;
}

/* Column Manager Header */
.rg-column-manager-modal .rg-modal-header {
    padding: var(--k-spacing-md) var(--k-spacing-lg);
    border-bottom: 1px solid var(--k-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rg-column-manager-modal .rg-modal-header h3 {
    margin: 0;
    font-size: var(--k-font-size-lg);
    font-weight: 600;
    color: var(--k-text-primary);
}

/* Column Options Container */
.rg-column-options {
    padding: var(--k-spacing-md) var(--k-spacing-lg);
    overflow-y: auto;
    max-height: 50vh;
}

/* Individual Column Option */
.rg-column-option {
    display: flex;
    align-items: center;
    padding: var(--k-spacing-sm) 0;
    cursor: pointer;
}

.rg-column-option:hover {
    background-color: var(--k-gray-100);
}

/* Checkbox Styling */
.rg-column-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: var(--k-spacing-md);
    cursor: pointer;
    position: relative;
    border: 2px solid var(--k-gray-400);
    border-radius: 4px;
    background-color: var(--k-white);
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.2s ease;
}

.rg-column-option input[type="checkbox"]:checked {
    background-color: var(--k-primary);
    border-color: var(--k-primary);
}

.rg-column-option input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.rg-column-option input[type="checkbox"]:hover {
    border-color: var(--k-primary);
}

/* Column Label */
.rg-column-option span {
    font-size: var(--k-font-size-base);
    color: var(--k-text-primary);
}

/* Modal Footer */
.rg-column-manager-modal .rg-modal-footer {
    padding: var(--k-spacing-md) var(--k-spacing-lg);
    border-top: 1px solid var(--k-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--k-white);
}

/* Footer Buttons Container */
.rg-column-actions {
    display: flex;
    gap: var(--k-spacing-sm);
}

/* Selection Helper Buttons */
.rg-select-all,
.rg-deselect-all {
    padding: var(--k-spacing-xs) var(--k-spacing-sm);
    font-size: var(--k-font-size-sm);
    color: var(--k-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.rg-select-all:hover,
.rg-deselect-all:hover {
    color: var(--k-primary);
}

/* Save Button */
.rg-save-columns {
    padding: var(--k-spacing-sm) var(--k-spacing-lg);
    background-color: var(--k-primary);
    color: var(--k-white);
    border: none;
    border-radius: var(--k-radius-sm);
    font-size: var(--k-font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.rg-save-columns:hover {
    background-color: var(--k-primary-dark);
}

/* Scrollbar Styling for Column Options */
.rg-column-options::-webkit-scrollbar {
    width: 6px;
}

.rg-column-options::-webkit-scrollbar-track {
    background: var(--k-gray-100);
    border-radius: 3px;
}

.rg-column-options::-webkit-scrollbar-thumb {
    background: var(--k-gray-400);
    border-radius: 3px;
}

.rg-column-options::-webkit-scrollbar-thumb:hover {
    background: var(--k-gray-500);
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .rg-column-manager-modal .rg-modal-content {
        width: 95%;
        margin: var(--k-spacing-sm);
    }

    .rg-column-manager-modal .rg-modal-footer {
        flex-direction: column;
        gap: var(--k-spacing-md);
    }

    .rg-column-actions {
        width: 100%;
        justify-content: center;
    }

    .rg-save-columns {
        width: 100%;
    }
}


/* Hidden Columns */
.rg-table th.column-hidden,
.rg-table td.column-hidden {
    display: none !important;
}



/* Pagination Container */
.rg-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--k-spacing-lg);
    background: var(--k-white);
    border-top: 1px solid var(--k-gray-200);
    gap: var(--k-spacing-xs);
    margin-top: var(--k-spacing-lg);
}

/* Pagination Links */
.rg-pagination-link {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--k-spacing-sm);
    border: 1px solid var(--k-gray-300);
    border-radius: var(--k-radius-sm);
    color: var(--k-text-primary);
    font-weight: 500;
    font-size: var(--k-font-size-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--k-spacing-xs);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    background: var(--k-white);
    user-select: none;
}

/* Prev/Next Buttons */
.rg-pagination-link[data-page="prev"],
.rg-pagination-link[data-page="next"] {
    padding: 0 var(--k-spacing-md);
    min-width: 100px;
}

/* Hover State */
.rg-pagination-link:hover:not(.rg-pagination-current):not(.rg-pagination-disabled) {
    border-color: var(--k-primary);
    color: var(--k-primary);
    background: var(--k-primary-light);
}

/* Active/Current Page */
.rg-pagination-current {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--k-spacing-sm);
    background: var(--k-primary);
    color: var(--k-white);
    border-radius: var(--k-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border: 1px solid var(--k-primary);
}

/* Ellipsis */
.rg-pagination-ellipsis {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--k-text-secondary);
    user-select: none;
}

/* Disabled State */
.rg-pagination-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icon Styling */
.rg-pagination-link i {
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .rg-pagination {
        padding: var(--k-spacing-md);
        flex-wrap: wrap;
        gap: var(--k-spacing-sm);
    }

    /* Hide page numbers on mobile, show only prev/next and current */
    .rg-pagination-link:not([data-page="prev"]):not([data-page="next"]):not(.rg-pagination-current) {
        display: none;
    }

    .rg-pagination-ellipsis {
        display: none;
    }

    /* Make prev/next buttons smaller on mobile */
    .rg-pagination-link[data-page="prev"],
    .rg-pagination-link[data-page="next"] {
        min-width: 80px;
        font-size: var(--k-font-size-sm);
    }
}

/* Loading State */
.rg-pagination.loading .rg-pagination-link {
    pointer-events: none;
    opacity: 0.7;
}

/* Focus State */
.rg-pagination-link:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--k-primary-light);
}

/* RTL Support */
[dir="rtl"] .rg-pagination {
    flex-direction: row-reverse;
}

[dir="rtl"] .rg-pagination-link i {
    transform: scaleX(-1);
}

/* Hover Animation */
.rg-pagination-link:not(.rg-pagination-current):not(.rg-pagination-disabled):active {
    transform: scale(0.95);
}

/* Page Size Selector */
.rg-page-size-selector {
    display: flex;
    align-items: center;
    gap: var(--k-spacing-sm);
    margin-right: auto;
}

.rg-page-size-selector label {
    font-size: var(--k-font-size-sm);
    color: var(--k-text-secondary);
}

.rg-page-size-selector select {
    height: 32px;
    padding: 0 var(--k-spacing-md) 0 var(--k-spacing-sm);
    border: 1px solid var(--k-gray-300);
    border-radius: var(--k-radius-sm);
    font-size: var(--k-font-size-sm);
    color: var(--k-text-primary);
    background-color: var(--k-white);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B778C' viewBox='0 0 16 16'%3E%3Cpath d='M8 10.5l-4-4h8l-4 4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.rg-page-size-selector select:hover {
    border-color: var(--k-gray-400);
}

.rg-page-size-selector select:focus {
    border-color: var(--k-primary);
    box-shadow: 0 0 0 2px var(--k-primary-light);
    outline: none;
}

/* Total Records Counter */
.rg-pagination-info {
    font-size: var(--k-font-size-sm);
    color: var(--k-text-secondary);
    margin-left: auto;
}

@media (max-width: 992px) {
    .rg-page-size-selector,
    .rg-pagination-info {
        display: none;
    }
}


.so-number-link {
    color: var(--k-accent); /* Using accent color for emphasis */
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.so-number-link:hover {
    background-color: rgba(232, 62, 140, 0.1);
    color: var(--k-primary-dark);
}

/* สำหรับ Modal */
.so-addon-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    
}

.so-addon-modal-content {
    background-color: #fff;
    margin: 5vh auto;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    
}


/* เพิ่ม CSS นี้ไปยังไฟล์ CSS ของคุณ หรือใส่ใน <style> tag ในส่วนหัวของหน้าเว็บ */
.search-highlight {
    background-color: rgba(255, 235, 59, 0.3);
    animation: highlightPulse 2s ease-out;
    animation-iteration-count: 1;
}

/* Using single highlight animation */
@keyframes highlightPulse {
    0%, 100% { background-color: rgba(255, 235, 59, 0.7); }
    50% { background-color: rgba(255, 235, 59, 0.3); }
}

.search-highlight .display-value {
    font-weight: bold;
    color: var(--k-error);
}

/* CSS สำหรับข้อความสรุปการค้นหาเอกสาร */
.document-search-summary {
    margin: 10px 0 15px;
    padding: 8px 12px;
    background-color: var(--k-primary-light);
    border-left: 4px solid var(--k-primary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.document-search-summary i.fas.fa-search {
    margin-right: 8px;
    color: var(--k-primary);
}

.document-search-summary strong {
    color: var(--k-primary-dark);
    margin: 0 3px;
}

.doc-search-note {
    margin-left: 8px;
    font-style: italic;
    color: var(--k-text-secondary);
    font-size: 13px;
}

.clear-doc-search {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--k-text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 3px;
}

.clear-doc-search:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #d32f2f;
}

/* ปรับแต่งรายละเอียดเอกสาร */
.rg-doc-details {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px;
    margin-top: 8px;
    background-color: #fafafa;
}

.rg-subtable {
    width: 100%;
    border-collapse: collapse;
}

.rg-subtable th,
.rg-subtable td {
    padding: 6px 8px;
    border: 1px solid #e0e0e0;
}

.rg-subtable th {
    background-color: #f5f5f5;
    font-weight: bold;
    text-align: left;
}

.rg-subtable td.doc-number {
    font-weight: 500;
}

.rg-subtable .button-group {
    display: flex;
    gap: 5px;
    justify-content: center;
}

/* เพิ่ม CSS นี้ไปยังไฟล์ CSS ของคุณ หรือใน <style> tag ในหน้าเว็บ */
.search-highlight {
    background-color: rgba(255, 235, 59, 0.2);
    animation: highlightPulse 1.5s ease-in-out infinite;
}

/* Duplicate animation removed - using highlightPulse instead */

/* Search highlight styles moved to above definition */

/* ข้อความสรุปการค้นหา */
.document-search-summary {
    margin: 10px 0;
    padding: 10px;
    background-color: #f5f5f5;
    border-left: 4px solid #2196f3;
    border-radius: 4px;
}

.document-search-summary strong {
    color: var(--k-primary-dark);
}

/* สไตล์สำหรับตารางเอกสาร */
.rg-document-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.rg-document-table th,
.rg-document-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.rg-document-table th {
    background-color: #1a4e8e;
    color: white;
    font-weight: 500;
}

.rg-document-table tr:hover {
    background-color: #f8f9fa;
}

/* สไตล์สำหรับข้อความเมื่อไม่พบข้อมูล */
.rg-empty {
    padding: 30px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

.rg-error {
    padding: 15px;
    text-align: center;
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin: 10px 0;
}

/* สไตล์สำหรับ loading */
.rg-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.rg-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #1a4e8e;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ปุ่มดาวน์โหลดในตาราง */

.download-btn {
    display: inline-block;
    padding: 6px 12px;
    background-color: #01873d;
    color: white !important;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
}

.download-btn:hover {
    background-color: #015928;
    color: white !important;
    text-decoration: none;
}

.download-btn i {
    margin-right: 5px;
}

/* ปุ่มดาวน์โหลดเมื่อไม่มีเอกสาร */
.download-btn-disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: default;
    opacity: 0.7;
}

.download-btn-disabled:hover {
    background-color: #cccccc !important;
}


.doc-download-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
}

.document-count {
    font-size: 12px;
    color: #555;
    margin-top: 4px;
}

.download-btn-disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: default;
    opacity: 0.7;
}

.download-btn-disabled:hover {
    background-color: #cccccc !important;
}

.so-document-link {
    margin-left: 8px;
    color: #01873d; /* สีเขียวกสิกรไทย */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 3px;
    transition: all 0.2s;
}

.so-document-link:hover {
    background-color: rgba(1, 135, 61, 0.1);
    color: #015928;
}

.so-document-link i {
    font-size: 14px;
}

.so-document-link:hover i {
    transform: translateY(-2px);
}

.so-document-link i {
    transition: transform 0.2s;
}


/* ส่วนของอัพเดตวันกำหนดส่ง และบันทึกเพิ่มเติม */


.date-info-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.create-date, .delivery-date {
    font-size: 12px;
    color: #333;
}

.btn-update-date {
    background: none;
    border: 1px solid #01873d;
    color: #01873d;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.btn-update-date:hover {
    background-color: #01873d;
    color: white;
}

.btn-update-date i {
    font-size: 10px;
}

/* สไตล์สำหรับฟอร์ม */
.form-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-weight: 500;
    color: #333;
    font-size: 13px;
}

.form-control {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-control:focus {
    border-color: #01873d;
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 135, 61, 0.1);
}

.form-info {
    margin-top: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #01873d;
}

.info-item {
    margin-bottom: 5px;
}

/* สไตล์สำหรับ alert */
.rg-alert {
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rg-alert-error {
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.rg-alert i {
    font-size: 16px;
}


.admin-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-item {
    font-size: 12px;
    line-height: 1.4;
}

.sales-badge {
    display: inline-flex;
    align-items: center;
    background-color: #e6f7ff; /* พื้นหลังสีฟ้าอ่อน */
    border-left: 3px solid #1890ff; /* ขอบซ้ายสีฟ้า */
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    max-width: fit-content;
}

.sales-badge i {
    color: #1890ff;
    margin-right: 6px;
    font-size: 14px;
}

.sales-label {
    font-weight: normal;
    margin-right: 4px;
}

.sales-name {
    font-weight: bold;
    color: #1890ff;
}

/* เพิ่มต่อจาก CSS ที่มีอยู่ใน generate_so_additional_content */
.sales-info-highlight {
    border-left: 4px solid #1890ff !important;
    position: relative;
    background: linear-gradient(to right, #e6f7ff, #f7fafc) !important;
    padding-left: 18px !important;
}

.sales-icon-container {
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    background: #1890ff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sales-icon-container i {
    color: white;
    font-size: 12px;
}

.sales-info-content {
    display: flex;
    flex-direction: column;
}

.sales-info-content label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
}

.sales-value {
    font-size: 14px;
    font-weight: 600;
    color: #1890ff;
}


/* เพิ่มโค้ดนี้เข้าไปในไฟล์ CSS ของคุณ */
.ui-datepicker {
    z-index: 10000 !important; /* กำหนด z-index ให้สูงพอที่จะไม่ถูกทับโดย elements อื่น */
}

#rg-soat-delivery-date {
    cursor: pointer !important;
    position: relative !important;
    z-index: 100 !important;
}

.rg-soat-delivery-input-group {
    position: relative !important;
}



/* สถานที่จัดส่ง*/


.form-divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 20px 0;
}

textarea#delivery-address {
    resize: vertical;
    min-height: 100px;
    font-size: 14px;
    line-height: 1.5;
    padding: 10px;
    margin-bottom: 10px;
}

.address-update-btn {
    background-color: #01873d !important;
    color: white !important;
    padding: 6px 15px;
    border-radius: 4px;
    font-size: 13px;
    margin-top: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
}

.address-update-btn:hover {
    background-color: #015928 !important;
}

.form-group {
    margin-bottom: 15px;
}

/* ===== ปรับปรุงตารางหลัก ===== */

/* Container สำหรับตาราง - เต็มความกว้าง */
.rg-table-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: var(--k-white);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-shadow-sm);
    overflow: hidden;
}

/* Wrapper สำหรับ scroll */
.rg-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* ตารางหลัก - responsive และสวยงาม */
.rg-table {
    width: 100%;
    min-width: 1200px; /* กำหนด min-width ให้พอดีกับเนื้อหา */
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--k-font-family);
    font-size: var(--k-font-size-base);
    background: var(--k-white);
}

/* Header ของตาราง */
.rg-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--k-primary);
}

.rg-table thead th {
    background: var(--k-primary);
    color: var(--k-white);
    font-weight: 600;
    font-size: var(--k-font-size-base);
    padding: 14px 12px;
    text-align: left;
    border-bottom: 2px solid var(--k-primary-dark);
    white-space: nowrap;
    position: relative;
}

.rg-table thead th:first-child {
    padding-left: 20px;
    border-top-left-radius: var(--k-radius-md);
}

.rg-table thead th:last-child {
    padding-right: 20px;
    border-top-right-radius: var(--k-radius-md);
}

/* Body ของตาราง */
.rg-table tbody tr {
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--k-gray-200);
}

.rg-table tbody tr:hover {
    background-color: var(--k-primary-light);
}

.rg-table tbody tr:last-child {
    border-bottom: none;
}

.rg-table tbody td {
    padding: 12px;
    color: var(--k-text-primary);
    vertical-align: middle;
    font-size: var(--k-font-size-base);
}

.rg-table tbody td:first-child {
    padding-left: 20px;
}

.rg-table tbody td:last-child {
    padding-right: 20px;
}

/* ตาราง Details ภายใน */
.rg-doc-details {
    padding: 15px 20px;
    background: var(--k-gray-100);
    border-top: 1px solid var(--k-gray-300);
    border-bottom: 1px solid var(--k-gray-300);
    margin: 10px 0;
    border-radius: var(--k-radius-sm);
}

.rg-subtable {
    width: 100%;
    border-collapse: collapse;
    background: var(--k-white);
    border-radius: var(--k-radius-sm);
    overflow: hidden;
    box-shadow: var(--k-shadow-sm);
}

.rg-subtable thead {
    background: var(--k-gray-200);
}

.rg-subtable thead th {
    padding: 10px 12px;
    font-size: var(--k-font-size-sm);
    font-weight: 600;
    color: var(--k-text-primary);
    text-align: left;
    border-bottom: 1px solid var(--k-gray-300);
}

.rg-subtable tbody td {
    padding: 10px 12px;
    font-size: var(--k-font-size-sm);
    border-bottom: 1px solid var(--k-gray-200);
}

.rg-subtable tbody tr:last-child td {
    border-bottom: none;
}

.rg-subtable tbody tr:hover {
    background-color: var(--k-gray-100);
}

/* ปุ่มแสดง/ซ่อนรายละเอียด - ปรับให้สวยงาม */
.rg-doc-details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--k-white);
    border: 1px solid var(--k-primary);
    color: var(--k-primary);
    border-radius: var(--k-radius-sm);
    font-size: var(--k-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 5px;
}

.rg-doc-details-toggle:hover {
    background: var(--k-primary);
    color: var(--k-white);
    transform: translateY(-1px);
    box-shadow: var(--k-shadow-sm);
}

.rg-doc-details-toggle i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

/* จำนวนเอกสาร */
.doc-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--k-primary);
    color: var(--k-white);
    border-radius: 12px;
    font-size: var(--k-font-size-xs);
    font-weight: 600;
    margin-right: 8px;
}

/* ===== Empty Document State ===== */

/* Container สำหรับ empty state */
.doc-empty-state {
    padding: var(--k-spacing-lg);
    text-align: center;
    background: var(--k-gray-100);
    border-radius: var(--k-radius-sm);
    margin-top: var(--k-spacing-sm);
    border: 1px dashed var(--k-gray-300);
    transition: all 0.2s ease;
}

.doc-empty-state:hover {
    background: var(--k-gray-200);
    border-color: var(--k-gray-400);
}

/* ข้อความ empty state */
.doc-empty-state p {
    color: var(--k-text-secondary);
    font-size: var(--k-font-size-sm);
    margin: 0 0 var(--k-spacing-md) 0;
    font-style: italic;
    font-weight: 500;
}

/* Container สำหรับปุ่มเพิ่มรายการ */
.doc-empty-state .k-add-row-action {
    margin-top: var(--k-spacing-sm);
}

/* ปุ่มเพิ่มรายการใน empty state */
.doc-empty-state .k-add-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--k-spacing-xs);
    padding: var(--k-spacing-sm) var(--k-spacing-lg);
    background: var(--k-primary);
    color: var(--k-white);
    border: none;
    border-radius: var(--k-radius-sm);
    font-size: var(--k-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: var(--k-shadow-sm);
}

.doc-empty-state .k-add-btn:hover {
    background: var(--k-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--k-shadow-md);
    color: var(--k-white);
}

.doc-empty-state .k-add-btn:active {
    transform: translateY(0);
    box-shadow: var(--k-shadow-sm);
}

.doc-empty-state .k-add-btn i {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.doc-empty-state .k-add-btn:hover i {
    transform: scale(1.1);
}

/* Animation สำหรับ empty state */
@keyframes empty-state-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.doc-empty-state {
    animation: empty-state-fade-in 0.3s ease-out;
}

/* Responsive สำหรับ empty state */
@media (max-width: 768px) {
    .doc-empty-state {
        padding: var(--k-spacing-md);
    }

    .doc-empty-state p {
        font-size: 12px;
    }

    .doc-empty-state .k-add-btn {
        padding: var(--k-spacing-xs) var(--k-spacing-md);
        font-size: 12px;
    }
}

/* Scrollbar สำหรับตาราง */
.rg-table-wrapper::-webkit-scrollbar {
    height: 10px;
}

.rg-table-wrapper::-webkit-scrollbar-track {
    background: var(--k-gray-100);
    border-radius: 5px;
}

.rg-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--k-gray-400);
    border-radius: 5px;
}

.rg-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--k-gray-500);
}

/* Responsive Design */
@media (max-width: 1400px) {
    .rg-table {
        min-width: 1100px;
    }
}

@media (max-width: 1200px) {
    .rg-table {
        min-width: 1000px;
    }

    .rg-table thead th,
    .rg-table tbody td {
        padding: 10px 8px;
    }
}

@media (max-width: 992px) {
    .rg-table {
        min-width: 900px;
        font-size: var(--k-font-size-sm);
    }

    .rg-table thead th:first-child,
    .rg-table tbody td:first-child {
        padding-left: 12px;
    }

    .rg-table thead th:last-child,
    .rg-table tbody td:last-child {
        padding-right: 12px;
    }
}

@media (max-width: 768px) {
    .rg-table-container {
        margin: 0 -10px;
        border-radius: 0;
    }

    .rg-table {
        min-width: 800px;
    }
}

/* ===== Skeleton Loading Styles ===== */

/* Skeleton Animation */
@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Skeleton Row */
.rg-skeleton-row {
    background: var(--k-white);
    border-bottom: 1px solid var(--k-gray-200);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.rg-skeleton-row td {
    padding: 12px;
}

/* Skeleton Element Base */
.rg-skeleton {
    background: linear-gradient(
        90deg,
        var(--k-gray-200) 0%,
        var(--k-gray-100) 20%,
        var(--k-gray-200) 40%,
        var(--k-gray-200) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--k-radius-sm);
    display: inline-block;
    position: relative;
    overflow: hidden;
}

/* Skeleton Text Variants */
.rg-skeleton-text {
    height: 14px;
    width: 100%;
    margin: 4px 0;
}

.rg-skeleton-text.short {
    width: 60%;
}

.rg-skeleton-text.medium {
    width: 80%;
}

.rg-skeleton-text.long {
    width: 100%;
}

.rg-skeleton-text.tiny {
    width: 40%;
    height: 12px;
}

/* Skeleton Badge/Chip */
.rg-skeleton-badge {
    height: 24px;
    width: 80px;
    border-radius: 12px;
}

/* Skeleton Button */
.rg-skeleton-button {
    height: 32px;
    width: 100px;
    border-radius: var(--k-radius-sm);
}

.rg-skeleton-button.small {
    height: 28px;
    width: 80px;
}

.rg-skeleton-button.large {
    height: 36px;
    width: 120px;
}

/* Skeleton Icon */
.rg-skeleton-icon {
    height: 20px;
    width: 20px;
    border-radius: 50%;
}

/* Skeleton Circle (for avatars, etc.) */
.rg-skeleton-circle {
    border-radius: 50%;
}

.rg-skeleton-circle.small {
    height: 24px;
    width: 24px;
}

.rg-skeleton-circle.medium {
    height: 40px;
    width: 40px;
}

.rg-skeleton-circle.large {
    height: 60px;
    width: 60px;
}

/* Skeleton Block */
.rg-skeleton-block {
    height: 100px;
    width: 100%;
}

.rg-skeleton-block.small {
    height: 60px;
}

.rg-skeleton-block.large {
    height: 150px;
}

/* Skeleton Container for Multiple Elements */
.rg-skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rg-skeleton-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Skeleton Table Specific Styles */
.rg-skeleton-cell {
    padding: 8px 0;
}

.rg-skeleton-header {
    height: 16px;
    width: 90%;
}

/* Multiple Lines Skeleton */
.rg-skeleton-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Skeleton with Shimmer Effect */
.rg-skeleton-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: skeleton-shimmer 2s infinite;
}

@keyframes skeleton-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Loading State for Table */
.rg-table.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Skeleton Fade In/Out */
.rg-skeleton-wrapper {
    animation: skeleton-fade-in 0.3s ease-in;
}

@keyframes skeleton-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Responsive Skeleton */
@media (max-width: 768px) {
    .rg-skeleton-text {
        height: 12px;
    }

    .rg-skeleton-button {
        height: 28px;
        width: 80px;
    }

    .rg-skeleton-badge {
        height: 20px;
        width: 60px;
    }
}

/* ===== Loading Overlay (สำรอง - กรณีต้องการใช้แบบเดิม) ===== */

.rg-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.rg-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--k-gray-200);
    border-top: 4px solid var(--k-primary);
    border-radius: 50%;
    animation: rg-spin 1s linear infinite;
}

@keyframes rg-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.rg-loading-text {
    margin-top: 15px;
    color: var(--k-text-secondary);
    font-size: var(--k-font-size-base);
    font-weight: 500;
}

/* ===== Smooth Transitions ===== */

/* Fade in effect สำหรับข้อมูลที่โหลดเสร็จ */
#rg-table-body tr {
    animation: table-row-fade-in 0.3s ease-in;
}

@keyframes table-row-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation สำหรับแถวที่โหลดเข้ามา */
#rg-table-body tr:nth-child(1) { animation-delay: 0.05s; }
#rg-table-body tr:nth-child(2) { animation-delay: 0.1s; }
#rg-table-body tr:nth-child(3) { animation-delay: 0.15s; }
#rg-table-body tr:nth-child(4) { animation-delay: 0.2s; }
#rg-table-body tr:nth-child(5) { animation-delay: 0.25s; }
#rg-table-body tr:nth-child(6) { animation-delay: 0.3s; }
#rg-table-body tr:nth-child(7) { animation-delay: 0.35s; }
#rg-table-body tr:nth-child(8) { animation-delay: 0.4s; }
#rg-table-body tr:nth-child(9) { animation-delay: 0.45s; }
#rg-table-body tr:nth-child(10) { animation-delay: 0.5s; }

/* ===========================
   AJAX Update Highlight Animations
   =========================== */

/* Keyframe สำหรับ highlight แถวใหม่ */
@keyframes highlight-success {
    0% {
        background-color: rgba(72, 187, 120, 0.3);
        transform: scale(1);
    }
    50% {
        background-color: rgba(72, 187, 120, 0.2);
        transform: scale(1.01);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

/* Keyframe สำหรับ highlight cell ที่อัพเดต */
@keyframes cell-highlight {
    0% {
        background-color: rgba(56, 178, 172, 0.4);
        color: var(--k-gray-900);
    }
    100% {
        background-color: transparent;
        color: inherit;
    }
}

/* Keyframe สำหรับ badge pulse */
@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(4, 120, 87, 0);
    }
}

/* Class สำหรับ highlight แถวที่เพิ่มใหม่ */
.rg-row-highlight-success {
    animation: highlight-success 2s ease-out;
}

/* Class สำหรับ highlight เซลล์ที่อัพเดต */
.rg-cell-highlight {
    animation: cell-highlight 1.5s ease-out;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Class สำหรับ badge pulse effect */
.rg-badge-pulse {
    animation: badge-pulse 1s ease-out;
}

/* เพิ่ม transition ให้กับตารางเอกสารย่อย */
.rg-doc-details table {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.rg-doc-details table.updating {
    opacity: 0.6;
    transform: scale(0.98);
}

/* Fade effect สำหรับการอัพเดต */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rg-doc-details tbody tr {
    animation: fade-in-up 0.3s ease-out;
}

/* Stagger animation สำหรับแถวในตารางย่อย */
.rg-doc-details tbody tr:nth-child(1) { animation-delay: 0s; }
.rg-doc-details tbody tr:nth-child(2) { animation-delay: 0.05s; }
.rg-doc-details tbody tr:nth-child(3) { animation-delay: 0.1s; }
.rg-doc-details tbody tr:nth-child(4) { animation-delay: 0.15s; }
.rg-doc-details tbody tr:nth-child(5) { animation-delay: 0.2s; }

/* ปิด animation ถ้าผู้ใช้ต้องการ reduce motion */
@media (prefers-reduced-motion: reduce) {
    #rg-table-body tr,
    .rg-skeleton-wrapper,
    .rg-skeleton,
    .rg-row-highlight-success,
    .rg-cell-highlight,
    .rg-badge-pulse,
    .rg-doc-details tbody tr {
        animation: none !important;
    }
}