/* Universal Box Sizing Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Reset Margin/Padding */
html, body {
    margin: 0;
    padding: 0;
}

/* ================================
   Global Floating Alert Component
   ================================ */
.floating-alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #333;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    border-left: 6px solid #5c67f2;
    animation: slideDown 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.5s ease;
}

.alert-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.alert-icon-wrap {
    background: #f0f1ff;
    color: #5c67f2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.alert-text {
    display: flex;
    flex-direction: column;
}

.alert-text strong {
    font-size: 15px;
    color: #333;
    margin-bottom: 2px;
}

.alert-text span {
    font-size: 13px;
    color: #666;
}

.alert-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #5c67f2;
    width: 100%;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    animation: progressAnim 4s linear forwards;
}

@keyframes slideDown {
    from { top: -100px; opacity: 0; }
    to { top: 20px; opacity: 1; }
}

@keyframes progressAnim {
    from { width: 100%; }
    to { width: 0%; }
}

/* Shake effect (can be reused globally) */
.shake {
    animation: shakeAnim 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shakeAnim {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* ================================
   Global Form & Layout Components
   ================================ */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

.col {
    flex: 1;
    min-width: 200px;
}

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

.input-group label {
    display: block;
    font-size: 11px;
    color: #888;
    margin-bottom: 6px;
    text-transform: uppercase;
    font-weight: 600;
}

.input-group input,
.input-group select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    background-color: #fff;
    box-sizing: border-box;
    outline: none;
    font-family: inherit;
}

input[readonly],
select:disabled {
    background-color: #f9f9f9 !important;
    color: #666 !important;
    border-color: #eee !important;
    cursor: not-allowed;
    opacity: 1;
    -webkit-text-fill-color: #666;
}

.input-group-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    font-size: 14px;
}

.editor-footer {
    padding: 15px 20px;
    background: #f9f9f9;
    display: flex;
    gap: 10px;
    border-top: 1px solid #eee;
}

.btn-cancel {
    background: #eee;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    flex: 1;
}

.btn-save {
    background: #2d3436;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    flex: 2;
    transition: 0.2s;
}

.btn-save:hover {
    background: #000;
}

.editor-tabs {
    display: flex;
    padding: 0 10px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.tab-btn {
    background: none;
    border: none;
    padding: 12px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    position: relative;
}

.tab-btn.active {
    color: #5c67f2;
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #5c67f2;
}

textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background-color: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
    color: #333;
}

textarea:focus {
    border-color: #5c67f2;
    box-shadow: 0 0 0 3px rgba(92, 103, 242, 0.1);
}

.textarea-sm {
    padding: 8px;
    font-size: 13px;
    min-height: 60px;
}

textarea::placeholder {
    color: #ccc;
    font-style: italic;
}


/* Unified toggle switch (Instant Confirmation, Limit, Activate) */
.ui-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    vertical-align: middle;
}
.ui-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.ui-switch .ui-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 22px;
    transition: 0.2s;
}
.ui-switch .ui-switch-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ui-switch input:checked + .ui-switch-slider { background: #243b55; }
.ui-switch input:checked + .ui-switch-slider::before { transform: translateX(18px); }
.ui-switch input:disabled + .ui-switch-slider { opacity: 0.5; cursor: not-allowed; }

/* 1. เมื่อติ๊กเปิด (Checked) และใช้งานปกติ */
.ui-switch input:checked + .ui-switch-slider {
    background-color: #243b55; /* สีม่วง/น้ำเงินหลักของเรา */
}

/* 2. เมื่อติ๊กเปิด (Checked) แต่โดน Disable (โหมด View) */
.ui-switch input:checked:disabled + .ui-switch-slider {
    background-color: #5c67f2 !important; /* บังคับให้เป็นสีเดิม */
    opacity: 0.6; /* จางลงนิดนึงเพื่อให้ดูออกว่ากดไม่ได้ แต่ยังเห็นว่าเป็นสีน้ำเงิน */
}

/* 3. เมื่อปิด (Unchecked) และโดน Disable */
.ui-switch input:disabled + .ui-switch-slider {
    background-color: #e2e8f0; /* สีเทาอ่อนปกติ */
    cursor: not-allowed;
}

button, 
.btn-dark, 
.btn-cancel, 
.booking-list-subnav-link, 
.booking-date-range-btn, 
.booking-toolbar-icon-btn, 
.booking-action-link, 
.booking-status-toggle,
.trip-preset-item,
.booking-column-settings-item,
.booking-detail-tool-btn:not(:disabled),
.booking-detail-btn-primary {
    cursor: pointer !important;
}

/* สำหรับแถวในตารางที่กดได้ */
.custom-data-table tbody tr {
    cursor: pointer;
}

button:disabled,
.booking-detail-tool-btn:disabled,
[aria-disabled="true"] {
    cursor: not-allowed !important;
}