/* ==========================================================================
   Custom OneUI overrides for Woke Up Town backoffice
   Loaded AFTER OneUI main.css. Keep this small + theme-agnostic.
   ========================================================================== */

@import url("/vendor/cdn/fonts/sarabun.css");

/* --- Sarabun font site-wide (OneUI ships Inter; we want Thai-friendly Sarabun) --- */
:root { --bs-body-font-family: "Sarabun", "Inter", system-ui, sans-serif; }

body,
.fs-base, .fs-sm, .fs-lg, .content, .block, .nav-main, .btn,
h1, h2, h3, h4, h5, h6, p, span, a, label, input, select, textarea, button, td, th, div {
    font-family: "Sarabun", "Inter", system-ui, sans-serif;
}

/* NOTE: do NOT add a font-family override for icon elements (<i class="si">,
   <i class="fa">). OneUI already sets their icon font on the element itself and
   our text rules above only target div/span/a/etc., never <i>, so icons are
   safe. (A `revert` exception here would wipe OneUI's own icon font → tofu boxes.) */

/* --- Consistent page padding for the ~50 legacy pages that render content
       directly in #main-container without an OneUI .content wrapper.
       Pages that DO use .content get their own padding, so neutralise the
       extra horizontal padding there to avoid doubling. --- */
#main-container > :not(.content):not(.bg-image) {
    padding-left: .25rem;
    padding-right: .25rem;
}
#main-container { padding-top: .25rem; padding-bottom: .5rem; }
#main-container > .content:first-child { padding-top: 0; }

/* Full-width content with minimal edge gap (maximise the working area on every page) */
#page-container .content { max-width: 100% !important; padding-left: .25rem !important; padding-right: .25rem !important; }

/* Table inside an OneUI block: let it fill the whole card — no wasted block padding.
   Use a descendant match because DataTables wraps the <table> in .dataTables_wrapper,
   which would break a direct-child (> .table) selector. */
.block-content:has(.table),
.block-content:has(.table-responsive),
.block-content:has(.dataTables_wrapper) { padding-top: 0; padding-left: 0; padding-right: 0; }

/* Avoid a horizontal page scrollbar: DataTables layout rows + the footer use
   Bootstrap .row negative margins that our tight content padding can't absorb. */
.dataTables_wrapper .row { margin-left: 0; margin-right: 0; }
/* zero the Bootstrap column gutter that wraps the DataTable (.row > .col-sm-12)
   so the table sits flush — no left/right gap around table content */
.dataTables_wrapper .row > * { padding-left: 0; padding-right: 0; }
#page-footer .row { margin-left: 0; margin-right: 0; }
/* The OneUI .content area uses near-zero horizontal padding (full-width), so a Bootstrap .row's
   default -12px negative gutter would bleed past the page edge and cause a horizontal scrollbar
   (seen on form pages and stat-card rows). Neutralize the row's negative margin app-wide inside
   .content — columns keep their own padding so inter-column gutters are preserved; only the far
   outer edge is inset by half a gutter instead of bleeding out. */
#page-container .content .row { margin-left: 0; margin-right: 0; }
/* DataTables adds a 6px top/bottom margin to the table — remove the top gap so
   the table sits flush under the controls (no wasted whitespace). Use #main-container
   to out-specify DataTables' own `table.dataTable{margin-top:6px!important}` (its CSS
   loads later in the body, so a plain class rule here would lose on source order). */
#main-container table.dataTable { margin-top: 0 !important; }

/* แถวควบคุมด้านล่าง (length / info / pagination) ให้อยู่ "ระนาบเดียวกัน":
   DataTables BS5 ใส่ padding-top/margin ต่างกันให้แต่ละกล่อง -> เมื่อจัดเป็น flex
   align-items-center จะไม่ตรงแนว. ล้าง margin/padding ให้เป็น 0 เพื่อให้ center ตรงกัน */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { margin: 0 !important; padding: 0 !important; }
.dataTables_wrapper .dataTables_length label { margin-bottom: 0 !important; }
.dataTables_wrapper .dataTables_paginate .pagination { margin: 0 !important; }

/* Tables from legacy pages: tidy spacing under OneUI */
#main-container table.table { background-color: #fff; }

/* ==========================================================================
   Unified DATA TABLE component — one consistent OneUI design for every table
   in the app (display only; never changes the data). Applies the OneUI
   "table-vcenter + hover" look + a soft, modern header and comfortable rows.
   ========================================================================== */
#main-container .table {
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .045);
    vertical-align: middle;
    margin-bottom: 0;
    color: #3b4453;
}
/* soft, modern header */
#main-container .table > thead > tr > th,
#main-container .table > thead th {
    background-color: #f7f8fa;
    color: #5c6b7a;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .01em;
    text-transform: none;
    border-bottom: 1px solid #e6e9ee;
    white-space: nowrap;
    vertical-align: middle;
}
#main-container .table.table-light > thead th,
#main-container .table > thead.table-light th { background-color: #f7f8fa; }
/* comfortable, readable rows */
#main-container .table > tbody > tr > td { padding-top: .62rem; padding-bottom: .62rem; }
#main-container .table > tbody > tr { transition: background-color .12s ease; }
#main-container .table:not(.table-borderless) > tbody > tr > td { border-color: #eef1f4; }
/* hover feedback even when the markup forgot table-hover */
#main-container .table:not(.table-borderless) > tbody > tr:hover { background-color: rgba(var(--bs-primary-rgb), .045); }
/* totals / footer rows stand out gently */
#main-container .table > tfoot th,
#main-container .table > tfoot td { background-color: #f7f8fa; border-top: 2px solid #e6e9ee; font-weight: 700; }
/* "Checkable Table": highlight a row whose checkbox/radio is selected */
#main-container .table > tbody > tr:has(.form-check-input:checked) { background-color: rgba(var(--bs-primary-rgb), .08); }

/* Legacy per-page cyan gradient buttons -> consistent OneUI primary */
.btn-gradient { background: var(--bs-primary) !important; background-image: none !important; color: #fff !important; border: none !important; }
.btn-gradient:hover, .btn-gradient:focus { filter: brightness(.94); color: #fff !important; }

/* ==========================================================================
   Soft / light BADGES — modern look, themed colours. Covers Bootstrap-5
   solid badges (.bg-*), legacy BS4 (.badge-*) and CORK soft (.badge-soft-*).
   ========================================================================== */
.badge { font-weight: 600; }
.badge.bg-primary,   .badge-primary,   .badge-soft-primary   { background-color: rgba(var(--bs-primary-rgb), .14)   !important; color: var(--bs-primary) !important; }
.badge.bg-secondary, .badge-secondary, .badge-soft-secondary { background-color: rgba(var(--bs-secondary-rgb), .15) !important; color: #5b6776 !important; }
.badge.bg-success,   .badge-success,   .badge-soft-success   { background-color: rgba(var(--bs-success-rgb), .15)   !important; color: #1f7a44 !important; }
.badge.bg-danger,    .badge-danger,    .badge-soft-danger    { background-color: rgba(var(--bs-danger-rgb), .12)    !important; color: var(--bs-danger) !important; }
.badge.bg-warning,   .badge-warning,   .badge-soft-warning   { background-color: rgba(var(--bs-warning-rgb), .18)   !important; color: #9a6b00 !important; }
.badge.bg-info,      .badge-info,      .badge-soft-info      { background-color: rgba(var(--bs-info-rgb), .15)      !important; color: #0b7385 !important; }
.badge.bg-dark,      .badge-dark,      .badge-soft-dark      { background-color: rgba(var(--bs-dark-rgb), .12)      !important; color: #343a40 !important; }
.badge.bg-light,     .badge-light                            { background-color: #eef1f4 !important; color: #5b6776 !important; }
/* legacy BS4 badges had no shape in BS5 — give them the pill look */
.badge-primary, .badge-secondary, .badge-success, .badge-danger,
.badge-warning, .badge-info, .badge-dark, .badge-light,
.badge-soft-primary, .badge-soft-secondary, .badge-soft-success,
.badge-soft-danger, .badge-soft-warning, .badge-soft-info {
    display: inline-block; padding: .35em .65em; font-size: .75em;
    line-height: 1; border-radius: .375rem; white-space: nowrap;
}

/* --- Unified SweetAlert2 look (component: oneui/wut-alert.js) ---
   Themes EVERY SweetAlert2 dialog in the app (legacy direct Swal.fire calls
   included) so they share one consistent UI. --- */
.swal2-popup { font-family: "Sarabun", "Inter", system-ui, sans-serif; border-radius: .75rem; }
.swal2-title { font-weight: 700; }
.swal2-html-container { font-size: 1rem; }
.swal2-actions { gap: .35rem; }
/* For dialogs that still use SweetAlert's own button styling, pull colours from
   the active OneUI/Bootstrap theme so they match the rest of the app. */
.swal2-styled.swal2-confirm { background-color: var(--bs-primary) !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel  { background-color: var(--bs-secondary) !important; box-shadow: none !important; }
.swal2-styled.swal2-deny    { background-color: var(--bs-danger) !important; box-shadow: none !important; }
.swal2-styled:focus { box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .4) !important; }
.swal2-toast { font-family: "Sarabun", "Inter", system-ui, sans-serif; }


/* === Shared table-page components (ย้ายมาจาก style ซ้ำๆ รายหน้า — เฟส 5 UI sweep) === */

/* เมนูจัดการแบบ hover (kebab) — แสดงเมนูเมื่อ hover ที่ปุ่ม และยังคลิกเปิดได้ปกติ
   เปิดด้วย CSS hover จะไม่ผ่าน Popper ของ Bootstrap จึง pin ตำแหน่งชิดขวาลงล่างเอง */
@media (min-width: 992px) {
    .row-actions:hover > .dropdown-menu {
        display: block;
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
    }
}
.row-actions .dropdown-menu { margin-top: .15rem; }

/* รายการสินค้าในเซลล์ตาราง (จำนวน + ชื่อสินค้า) */
.product-item-list .product-item { display: flex; align-items: center; margin-bottom: 4px; }
.product-item-list .product-item:last-child { margin-bottom: 0; }
.product-item-list .qty-badge { min-width: 28px; font-size: .8em; font-weight: 600; }
.product-item-list .product-name { line-height: 1.3; text-align: left; white-space: normal; }

/* เซลล์ลูกค้า & ที่อยู่ — ห้ามตัดคำ ขึ้นบรรทัดใหม่แทน */
.address-column { line-height: 1.45; text-align: left; vertical-align: middle; font-size: .9rem; }
.address-column > div { white-space: normal; word-break: break-word; }
.address-column .addr-line { font-size: .9rem; }
/* แถบยืนยันแบบลอยติดล่างจอ (sticky action bar) — ใช้กับทุกหน้าที่มี checkbox เลือกรายการ + ปุ่มยืนยัน */
.pending-action-bar {
    position: sticky; bottom: 0; z-index: 30;
    background: #fff; border-top: 1px solid #e0e6ed;
    margin: 1rem -.25rem 0; padding: .7rem 1rem;
    box-shadow: 0 -2px 10px rgba(16,30,54,.08);
}