/* ==========================================================================
   VJ Mart WMS — PDA Theme
   ชุดดีไซน์กลางของแอป โหลดเป็นไฟล์สุดท้ายเพื่อทับสไตล์ของ
   Framework7 v1 / AdminLTE / Bootstrap ที่โหลดไว้ก่อนหน้า
   หมายเหตุ: ความสูง navbar คงไว้ที่ 44px ตามค่าเดิมของ Framework7
   เพราะ .navbar-through .page-content พึ่งค่านี้ในการเว้นระยะบน
   ========================================================================== */

:root {
    /* แบรนด์ */
    --wms-navy-900: #0b1f36;
    --wms-navy-800: #0f2a47;
    --wms-navy-700: #143658;
    --wms-blue-600: #1d4ed8;
    --wms-blue-500: #2563eb;
    --wms-blue-400: #3b82f6;
    --wms-blue-50: #eff6ff;

    /* สถานะ */
    --wms-ok: #15803d;
    --wms-ok-50: #f0fdf4;
    --wms-danger: #dc2626;
    --wms-danger-50: #fef2f2;
    --wms-warn: #b45309;
    --wms-amber: #f59e0b;

    /* พื้นผิว */
    --wms-bg: #eef2f7;
    --wms-surface: #ffffff;
    --wms-surface-2: #f8fafc;
    --wms-border: #e2e8f0;
    --wms-border-strong: #cbd5e1;

    /* ตัวอักษร */
    --wms-text: #0f172a;
    --wms-text-2: #475569;
    --wms-text-3: #8494a7;

    /* รูปทรง */
    --wms-r-sm: 8px;
    --wms-r: 12px;
    --wms-r-lg: 16px;

    --wms-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --wms-shadow-2: 0 2px 4px rgba(15, 23, 42, .04), 0 6px 16px rgba(15, 23, 42, .09);
    --wms-shadow-3: 0 10px 30px rgba(15, 23, 42, .16);

    /* ความสูงขั้นต่ำของพื้นที่กดบนเครื่อง PDA */
    --wms-tap: 46px;

    --wms-font: "Sarabun", "Noto Sans Thai", "IBM Plex Sans Thai", "Leelawadee UI",
        "Segoe UI", "Helvetica Neue", Tahoma, Arial, sans-serif;
    --wms-mono: "JetBrains Mono", "Cascadia Mono", "Consolas", "Menlo", monospace;
}

/* --------------------------------------------------------------------------
   1. พื้นฐาน
   -------------------------------------------------------------------------- */

body {
    font-family: var(--wms-font);
    color: var(--wms-text);
    background: var(--wms-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0;
}

.page,
.pages,
.view,
.views {
    background: var(--wms-bg);
}

.page-content {
    background: var(--wms-bg);
    padding-bottom: 32px;
}

/* จอกว้าง (เปิดบนเดสก์ท็อป) จำกัดความกว้างเนื้อหาให้อ่านสบาย */
@media (min-width: 900px) {
    .page-content > .list-block,
    .page-content > form.list-block,
    .page-content > .card,
    .page-content > .wms-section,
    .page-content > .wms-hero,
    .page-content > .wms-grid {
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --------------------------------------------------------------------------
   2. Navbar
   -------------------------------------------------------------------------- */

.navbar {
    background: linear-gradient(180deg, var(--wms-navy-800) 0%, var(--wms-navy-900) 100%);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 2px 10px rgba(11, 31, 54, .28);
}

/* ลบเส้นขีดบางของธีม iOS ออก */
.navbar:after,
.navbar-inner:after {
    display: none !important;
}

.navbar .center {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .2px;
}

.navbar .left,
.navbar .right {
    color: #fff;
}

.navbar a.link,
.navbar a.back,
.navbar .link {
    color: #dbeafe;
    font-weight: 500;
    min-height: 44px;
}

.navbar a.link:active,
.navbar .link:active {
    opacity: .55;
}

.navbar .icon-bars,
.navbar .icon-back {
    opacity: .95;
}

/* ไอคอนแฮมเบอร์เกอร์ของธีม iOS เป็นสีน้ำเงินเข้ม ต้องเปลี่ยนเป็นขาว */
.navbar .icon-bars {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.navbar .icon-back {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbeafe' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

.statusbar-overlay {
    background: var(--wms-navy-900);
}

/* --------------------------------------------------------------------------
   3. เมนูด้านข้าง (Panel)
   -------------------------------------------------------------------------- */

.panel {
    background: var(--wms-navy-900);
    color: #e2e8f0;
}

.panel .wms-panel-head {
    padding: 22px 20px 18px;
    background: linear-gradient(160deg, var(--wms-blue-600) 0%, var(--wms-navy-800) 100%);
}

.panel .wms-panel-brand {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .3px;
}

.panel .wms-panel-sub {
    margin-top: 3px;
    font-size: 12px;
    color: rgba(255, 255, 255, .72);
}

.panel .wms-panel-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.panel .wms-panel-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.panel .wms-panel-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.panel .wms-panel-wh {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

.panel .list-block {
    margin: 10px 0 0;
}

.panel .list-block ul {
    background: transparent;
}

.panel .list-block ul:before,
.panel .list-block ul:after,
.panel .item-inner:after,
.panel .item-content:after {
    display: none !important;
}

.panel .list-block li a.item-link {
    color: #e2e8f0;
}

.panel .item-content {
    padding-left: 14px;
    min-height: var(--wms-tap);
}

.panel .item-inner {
    padding-right: 14px;
    min-height: var(--wms-tap);
}

.panel .item-title {
    font-size: 15px;
    font-weight: 500;
}

.panel .item-media {
    min-width: 30px;
    color: #93c5fd;
}

.panel .item-media i.f7-icons {
    font-size: 21px;
    color: #93c5fd;
}

.panel .list-block li a.item-link:active {
    background: rgba(255, 255, 255, .08);
}

/* ซ่อนลูกศรของ item-link ในเมนู */
.panel .item-link .item-inner {
    background-image: none;
}

/* --------------------------------------------------------------------------
   4. หัวข้อส่วน
   -------------------------------------------------------------------------- */

.content-block-title {
    color: var(--wms-text-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin: 22px 16px 8px;
    line-height: 1.4;
}

/* หัวข้อว่างไม่ต้องกินพื้นที่ */
.content-block-title:empty {
    display: none;
}

.wms-section {
    margin: 18px 12px 0;
}

.wms-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 4px 8px;
}

.wms-section-head .wms-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--wms-text-2);
    letter-spacing: .4px;
    text-transform: uppercase;
}

.wms-section-head:before {
    content: "";
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--wms-blue-500);
    flex: 0 0 3px;
}

/* --------------------------------------------------------------------------
   5. ฟอร์ม
   -------------------------------------------------------------------------- */

.list-block {
    margin: 14px 12px;
}

.list-block.inset {
    margin: 14px 12px;
}

.list-block ul {
    background: var(--wms-surface);
    border-radius: var(--wms-r);
    border: 1px solid var(--wms-border);
    box-shadow: var(--wms-shadow-1);
    overflow: hidden;
}

/* ลบเส้นขีดบางของ Framework7 ทั้งหมด แล้ววาดเส้นแบ่งเอง */
.list-block ul:before,
.list-block ul:after,
.list-block .item-inner:after,
.list-block .item-content:after,
.list-block li:after {
    display: none !important;
}

.list-block li {
    border-bottom: 1px solid var(--wms-border);
}

.list-block li:last-child {
    border-bottom: 0;
}

.list-block .item-content {
    padding: 12px 14px;
    min-height: 0;
    align-items: flex-start;
    box-sizing: border-box;
}

/* Framework7 ตั้ง width:100% + -webkit-box-flex:1 (ไม่มี flex มาตรฐาน) ให้ item-inner
   เบราว์เซอร์ยุคใหม่จึงคิดขนาดฐานเป็น 100% ของ item-content แล้วยังบวกความกว้าง
   ของ item-media ที่อยู่ข้าง ๆ เข้าไปอีก ทำให้ช่องกรอกล้นออกนอกการ์ด
   ต้องเป็น flex:1 1 auto + width:auto + min-width:0 ถึงจะยืดพอดีพื้นที่ที่เหลือ
   และ overflow ต้องเป็น visible ไม่งั้นวงแหวนตอนโฟกัสจะโดนตัด */
.list-block .item-inner {
    display: block;
    padding: 0;
    min-height: 0;
    flex: 1 1 auto;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

/* ป้ายกำกับฟิลด์ */
.list-block .item-title.label,
.list-block .item-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--wms-text-2);
    letter-spacing: .4px;
    margin: 0 0 6px;
    width: auto;
    max-width: none;
    line-height: 1.4;
    display: block;
}

.list-block .item-title:empty {
    display: none;
}

/* ไอคอนนำหน้าฟิลด์ */
.list-block .item-media {
    align-self: flex-start;
    margin-right: 12px;
    margin-top: 2px;
    /* ห้ามยืดหรือหด ไม่งั้นจะไปเบียดความกว้างของช่องกรอก */
    flex: 0 0 38px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 38px;
    min-width: 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--wms-blue-50);
    color: var(--wms-blue-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-sizing: border-box;
}

.list-block .item-media i.f7-icons {
    font-size: 20px;
    color: var(--wms-blue-600);
}

.list-block .item-media i.icon {
    margin: 0;
}

/* ไอคอน f7 ที่ถูกทิ้งไว้ว่างในมาร์กอัปเดิมไม่ต้องแสดง */
.list-block .item-media i.f7-icons:empty,
.list-block .item-inner > i.icon.f7-icons:empty {
    display: none;
}

.list-block .item-media:empty {
    display: none;
}

/* Framework7 ออกแบบมาสำหรับเลย์เอาต์ "ป้ายกำกับอยู่ซ้าย ช่องกรอกอยู่ขวา" จึงใส่
   ระยะเหล่านี้ไว้ ซึ่ง specificity สูงกว่ากฎ margin ปกติของเรา และเมื่อรวมกับ
   item-input ที่กว้าง 100% จะดันช่องกรอกล้นออกนอกการ์ด ต้องล้างทั้งสองตัว */
.list-block .item-media + .item-inner {
    margin-left: 0;
}

.list-block .item-title.label + .item-input {
    margin-left: 0;
}

/* ช่องกรอก */
.list-block .item-input {
    width: 100%;
    padding: 0;
    margin: 0;
}

.list-block .item-input input[type="text"],
.list-block .item-input input[type="password"],
.list-block .item-input input[type="number"],
.list-block .item-input input[type="search"],
.list-block .item-input input[type="tel"],
.list-block .item-input select,
.list-block .item-input textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--wms-tap);
    min-height: var(--wms-tap);
    padding: 10px 14px;
    box-sizing: border-box;
    font-family: var(--wms-font);
    font-size: 16px;
    line-height: 1.35;
    color: var(--wms-text);
    background: var(--wms-surface-2);
    border: 1.5px solid var(--wms-border-strong);
    border-radius: var(--wms-r-sm);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.list-block .item-input input::placeholder,
.list-block .item-input textarea::placeholder {
    color: var(--wms-text-3);
    font-weight: 400;
}

.list-block .item-input input:focus,
.list-block .item-input select:focus,
.list-block .item-input textarea:focus {
    outline: none;
    background: var(--wms-surface);
    border-color: var(--wms-blue-500);
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, .16);
}

/* ช่องอ่านอย่างเดียว */
.list-block .item-input input[readonly],
.list-block .item-input input.read-only,
.list-block .item-input select[disabled] {
    background: #eef2f7;
    color: var(--wms-text-2);
    border-color: var(--wms-border);
    border-style: dashed;
}

/* ลูกศรของ select */
.list-block .item-input select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    cursor: pointer;
}

/* ช่องสแกนบาร์โค้ด/ตัวเลข อ่านง่ายด้วยฟอนต์ความกว้างคงที่ */
.list-block .item-input input[type="number"],
.list-block .item-input input#barcode,
.list-block .item-input input#serial_number,
.list-block .item-input input#locations,
.list-block .item-input input#location_t,
.list-block .item-input input#location_f,
.list-block .item-input input#locations_edit,
.list-block .item-input input#product_id,
.list-block .item-input input#docnumber,
.list-block .item-input input#order_doc_scan,
.list-block .item-input input#Barcode_new,
.list-block .item-input input#product_id_new {
    font-family: var(--wms-mono);
    font-weight: 600;
    letter-spacing: .5px;
}

/* ซ่อนปุ่มเพิ่ม/ลดของ input number ให้ช่องกว้างเต็ม (สแกนเนอร์ไม่ได้ใช้) */
.list-block .item-input input[type="number"]::-webkit-outer-spin-button,
.list-block .item-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.list-block .item-input input[type="number"] {
    -moz-appearance: textfield;
}

/* --------------------------------------------------------------------------
   6. ปุ่ม
   -------------------------------------------------------------------------- */

.button,
a.button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--wms-tap);
    min-height: var(--wms-tap);
    line-height: 1.2;
    padding: 0 18px;
    box-sizing: border-box;
    font-family: var(--wms-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: var(--wms-r-sm);
    border: 1.5px solid var(--wms-border-strong);
    background: var(--wms-surface);
    color: var(--wms-text);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease;
}

.button:active,
a.button:active {
    transform: translateY(1px);
}

/* ปุ่มหลัก */
.button.active,
a.button.active {
    background: linear-gradient(180deg, var(--wms-blue-500) 0%, var(--wms-blue-600) 100%);
    border-color: var(--wms-blue-600);
    color: #fff;
    box-shadow: 0 1px 2px rgba(29, 78, 216, .28), 0 4px 12px rgba(29, 78, 216, .22);
}

.button.active:active,
a.button.active:active {
    background: var(--wms-blue-600);
}

/* ปุ่มอันตราย (ยกเลิก) */
.button.bg-red,
a.button.bg-red {
    background: linear-gradient(180deg, #ef4444 0%, var(--wms-danger) 100%);
    border-color: var(--wms-danger);
    color: #fff;
    box-shadow: 0 1px 2px rgba(220, 38, 38, .28), 0 4px 12px rgba(220, 38, 38, .2);
}

/* ปุ่มยืนยัน (สีเขียว) */
.button.wms-ok,
a.button.wms-ok {
    background: linear-gradient(180deg, #22a355 0%, var(--wms-ok) 100%);
    border-color: var(--wms-ok);
    color: #fff;
    box-shadow: 0 1px 2px rgba(21, 128, 61, .28), 0 4px 12px rgba(21, 128, 61, .2);
}

/* แถวปุ่มคู่ */
.list-block .item-input .row,
.wms-btn-row {
    display: flex;
    gap: 10px;
    margin: 0;
    width: 100%;
}

.list-block .item-input .row > .col-50,
.wms-btn-row > * {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------
   7. การ์ด และตารางข้อมูล
   -------------------------------------------------------------------------- */

.card {
    margin: 16px 12px;
    background: var(--wms-surface);
    border: 1px solid var(--wms-border);
    border-radius: var(--wms-r);
    box-shadow: var(--wms-shadow-1);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 0;
    padding: 12px 14px;
    background: var(--wms-surface-2);
    border-bottom: 1px solid var(--wms-border);
}

.card-header:after {
    display: none !important;
}

.card-header .content-block-title,
.card-header .data-table-title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--wms-text);
    letter-spacing: .2px;
    text-transform: none;
}

.card-header .data-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.card-header .data-table-actions .button {
    height: 38px;
    min-height: 38px;
    font-size: 14px;
    padding: 0 16px;
}

.card-content {
    padding: 0;
    max-height: 62vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.card-content:after {
    display: none !important;
}

/* ตาราง */
.card table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: var(--wms-surface);
}

.card table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 11px 12px;
    background: var(--wms-navy-800);
    color: #e8eef6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.card table thead th:last-child {
    border-right: 0;
}

.card table thead th.numeric-cell,
.card table thead th.actions-cell {
    text-align: right;
}

.card table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--wms-border);
    color: var(--wms-text);
    vertical-align: middle;
    white-space: nowrap;
    background: transparent;
}

.card table tbody tr:nth-child(even) td {
    background: #fafbfd;
}

.card table tbody tr:hover td {
    background: var(--wms-blue-50);
}

.card table tbody tr:last-child td {
    border-bottom: 0;
}

.card table tbody td.numeric-cell,
.card table tbody td.actions-cell {
    text-align: right;
    font-family: var(--wms-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* คอลัมน์รหัส/บาร์โค้ด อ่านง่ายขึ้น */
.card table tbody td.label-cell:nth-child(-n+4) {
    font-family: var(--wms-mono);
    font-size: 12.5px;
    letter-spacing: .3px;
}

.card table tbody td img {
    max-width: 64px;
    height: auto;
    border-radius: var(--wms-r-sm);
    border: 1px solid var(--wms-border);
    display: block;
}

/* ปุ่มไอคอนในตาราง */
.card table td a.link.icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--wms-r-sm);
    background: var(--wms-blue-50);
    color: var(--wms-blue-600);
    margin: 0 2px;
}

.card table td a.link.icon-only:active {
    background: #dbeafe;
}

.card table td a.link.icon-only i.f7-icons {
    font-size: 19px;
}

.card table td input[type="checkbox"],
.card table td input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--wms-blue-500);
}

.card table td input[type="text"],
.card table td input[type="number"] {
    height: 36px;
    min-width: 70px;
    padding: 6px 8px;
    box-sizing: border-box;
    font-family: var(--wms-mono);
    font-size: 14px;
    border: 1.5px solid var(--wms-border-strong);
    border-radius: 6px;
    background: var(--wms-surface);
}

/* แถวสรุปยอดรวมท้ายตาราง (ฝั่ง model ใส่ class wms-total มาให้) */
.card table tbody tr.wms-total td {
    font-weight: 700;
    background: #e8eef6;
    border-top: 2px solid var(--wms-border-strong);
    color: var(--wms-text);
}

.lasupdate {
    color: var(--wms-ok) !important;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   8. หน้าแรก (แดชบอร์ด)
   -------------------------------------------------------------------------- */

.wms-hero {
    margin: 14px 12px 0;
    padding: 18px 20px;
    border-radius: var(--wms-r-lg);
    background: linear-gradient(135deg, var(--wms-blue-600) 0%, var(--wms-navy-800) 62%, var(--wms-navy-900) 100%);
    color: #fff;
    box-shadow: var(--wms-shadow-2);
    position: relative;
    overflow: hidden;
}

.wms-hero:after {
    content: "";
    position: absolute;
    right: -50px;
    top: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.wms-hero-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}

.wms-hero-title {
    margin-top: 4px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .2px;
}

.wms-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}

.wms-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
}

.wms-chip b {
    font-weight: 700;
}

/* ตารางเมนู */
.wms-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 12px 0;
}

@media (max-width: 560px) {
    .wms-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1000px) {
    .wms-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.wms-tile {
    --tile: var(--wms-blue-600);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--wms-r-lg);
    background: var(--wms-surface);
    border: 1px solid var(--wms-border);
    box-shadow: var(--wms-shadow-1);
    color: var(--wms-text);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform .1s ease, box-shadow .18s ease;
}

/* แถบสีประจำเมนูด้านซ้าย */
.wms-tile:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--tile);
}

.wms-tile:active {
    transform: translateY(1px);
    box-shadow: var(--wms-shadow-2);
}

.wms-tile-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wms-tile-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--tile) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--tile) 22%, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wms-tile-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.wms-tile-body {
    flex: 1 1 auto;
    min-width: 0;
}

.wms-tile-en {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--wms-text);
    line-height: 1.25;
    letter-spacing: .2px;
}

.wms-tile-th {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--wms-text-2);
    line-height: 1.35;
}

.wms-tile-go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px dashed var(--wms-border);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tile);
    letter-spacing: .3px;
}

.wms-tile-go .wms-arrow {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tile) 14%, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}

/* สีประจำแต่ละเมนู */
.wms-tile--receive { --tile: #d97706; }
.wms-tile--satisfaction { --tile: #059669; }
.wms-tile--stock { --tile: #0891b2; }
.wms-tile--count { --tile: #64748b; }
.wms-tile--transfer { --tile: #2563eb; }
.wms-tile--rtransfer { --tile: #c026d3; }
.wms-tile--pick { --tile: #dc2626; }
.wms-tile--car { --tile: #9f1239; }

/* เผื่อเบราว์เซอร์ที่ยังไม่รองรับ color-mix */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .wms-tile-icon {
        background: var(--wms-surface-2);
        border-color: var(--wms-border);
    }
    .wms-tile-go .wms-arrow {
        background: var(--wms-surface-2);
    }
}

/* --------------------------------------------------------------------------
   9. หน้าเข้าสู่ระบบ
   -------------------------------------------------------------------------- */

/* หน้านี้ไม่ใช้ .list-block ของ Framework7 เลย เพราะ F7 มีกฎ
   ".login-screen-content .list-block ul { background: none }" ที่ specificity
   สูงกว่า ทำให้การ์ดกลายเป็นโปร่งใสและตัวหนังสือจมไปกับพื้นหลังเข้ม
   จึงใช้คลาส wms-auth-* ของเราเองทั้งหมด

   หมายเหตุ: ไม่ใช้ flex + justify-content:center เพราะ .page-content เป็นตัว
   เลื่อนหน้าจอเอง ถ้าเนื้อหาสูงกว่าจอ การจัดกึ่งกลางจะทำให้ส่วนบนถูกตัด */
.login-screen-content {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(37, 99, 235, .28) 0%, rgba(37, 99, 235, 0) 60%),
        linear-gradient(165deg, var(--wms-navy-800) 0%, var(--wms-navy-900) 55%, #071523 100%);
    padding: 26px 16px 40px;
    box-sizing: border-box;
}

@media (min-height: 700px) {
    .login-screen-content {
        padding-top: 58px;
    }
}

.wms-auth {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.wms-auth-card {
    background: var(--wms-surface);
    border-radius: 20px;
    padding: 26px 22px 24px;
    box-shadow: 0 20px 50px rgba(3, 12, 24, .55), 0 2px 6px rgba(3, 12, 24, .35);
    box-sizing: border-box;
}

/* โลโก้ */
.wms-auth-logo {
    text-align: center;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--wms-border);
}

.wms-auth-logo img {
    display: inline-block;
    width: 100%;
    max-width: 230px;
    height: auto;
}

.wms-auth-head {
    text-align: center;
    margin-bottom: 22px;
}

.wms-auth-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--wms-navy-900);
    letter-spacing: .2px;
    line-height: 1.3;
}

.wms-auth-sub {
    margin-top: 5px;
    font-size: 13px;
    color: var(--wms-text-2);
}

/* ฟิลด์ */
.wms-field {
    margin-bottom: 16px;
}

.wms-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wms-text-2);
    letter-spacing: .4px;
}

.wms-control {
    position: relative;
}

.wms-control-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--wms-blue-500);
    pointer-events: none;
    z-index: 1;
}

.wms-control input,
.wms-control select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 50px;
    padding: 12px 14px 12px 44px;
    box-sizing: border-box;
    font-family: var(--wms-font);
    font-size: 16px;
    line-height: 1.35;
    color: var(--wms-text);
    background: var(--wms-surface-2);
    border: 1.5px solid var(--wms-border-strong);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.wms-control input::placeholder {
    color: var(--wms-text-3);
    font-weight: 400;
}

.wms-control input:focus,
.wms-control select:focus {
    outline: none;
    background: var(--wms-surface);
    border-color: var(--wms-blue-500);
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, .16);
}

/* เบราว์เซอร์เติมรหัสผ่านอัตโนมัติจะใส่พื้นหลังเหลือง ต้องทับให้เข้าธีม */
.wms-control input:-webkit-autofill,
.wms-control input:-webkit-autofill:hover,
.wms-control input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--wms-text);
    -webkit-box-shadow: 0 0 0 1000px var(--wms-surface-2) inset;
    caret-color: var(--wms-text);
}

.wms-control--select select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 18px 18px;
    cursor: pointer;
}

/* ปุ่มเข้าสู่ระบบ */
.wms-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin-top: 22px;
    box-sizing: border-box;
    font-family: var(--wms-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    text-decoration: none;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--wms-blue-500) 0%, var(--wms-blue-600) 100%);
    box-shadow: 0 2px 4px rgba(29, 78, 216, .3), 0 8px 20px rgba(29, 78, 216, .28);
    transition: transform .08s ease, box-shadow .15s ease;
}

.wms-auth-btn:active {
    transform: translateY(1px);
    background: var(--wms-blue-600);
    box-shadow: 0 1px 2px rgba(29, 78, 216, .3);
}

.wms-auth-foot {
    margin-top: 20px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    color: rgba(255, 255, 255, .52);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. Popup / Modal / Preloader
   -------------------------------------------------------------------------- */

.popup {
    background: var(--wms-bg);
}

.popup .navbar {
    background: linear-gradient(180deg, var(--wms-navy-800) 0%, var(--wms-navy-900) 100%);
}

.popup .page-content {
    background: var(--wms-bg);
}

.modal {
    border-radius: var(--wms-r);
    box-shadow: var(--wms-shadow-3);
}

.modal-title {
    font-weight: 700;
    color: var(--wms-text);
}

.modal-text {
    color: var(--wms-text-2);
}

.modal-button {
    color: var(--wms-blue-600);
    font-weight: 600;
    height: 48px;
    line-height: 48px;
}

.preloader-indicator-modal {
    border-radius: var(--wms-r);
    background: rgba(15, 23, 42, .86);
}

.content-block {
    color: var(--wms-text);
}

/* --------------------------------------------------------------------------
   11. หน้าความพึงพอใจ
   -------------------------------------------------------------------------- */

.wms-rate-card {
    margin: 16px 12px;
    padding: 22px 16px 18px;
    background: var(--wms-surface);
    border: 1px solid var(--wms-border);
    border-radius: var(--wms-r);
    box-shadow: var(--wms-shadow-1);
    text-align: center;
}

.wms-rate-card .wms-rate-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--wms-text);
    margin-bottom: 4px;
}

.wms-rate-card .wms-rate-hint {
    font-size: 13px;
    color: var(--wms-text-2);
    margin-bottom: 18px;
}

#rate7 {
    display: inline-block;
}

.comment_satisfaction {
    width: auto;
    margin-top: 16px;
}

.comment_satisfaction input#Satisfaction {
    width: 110px !important;
    height: 96px !important;
    font-size: 68px !important;
    font-weight: 700;
    text-align: center;
    color: var(--wms-blue-600);
    background: var(--wms-blue-50);
    border: 1px solid #bfdbfe !important;
    border-radius: var(--wms-r);
    font-family: var(--wms-font);
}

/* --------------------------------------------------------------------------
   12. ตารางแบบการ์ดบนจอแคบ (PDA)
   ใช้ data-collapsible-title ที่ฝั่ง model ส่งมาเป็นป้ายกำกับของแต่ละช่อง
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {

    .card-content {
        max-height: none;
    }

    .card table,
    .card table tbody,
    .card table tr,
    .card table td {
        display: block;
        width: auto;
    }

    .card table thead {
        display: none;
    }

    .card table tbody tr {
        margin: 10px;
        padding: 4px 0;
        border: 1px solid var(--wms-border);
        border-radius: var(--wms-r-sm);
        background: var(--wms-surface);
        box-shadow: var(--wms-shadow-1);
        overflow: hidden;
    }

    .card table tbody tr:nth-child(even) td,
    .card table tbody tr:hover td {
        background: transparent;
    }

    /* แถวสรุปยอดในโหมดการ์ด */
    .card table tbody tr.wms-total {
        background: #e8eef6;
        border-color: var(--wms-border-strong);
    }

    .card table tbody tr.wms-total td {
        background: transparent;
        border-top: 0;
    }

    /* ช่องว่างที่มาจากแถวสรุปไม่ต้องแสดง */
    .card table tbody td:empty {
        display: none;
    }

    .card table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 12px;
        border-bottom: 1px solid var(--wms-border);
        white-space: normal;
        text-align: right;
        word-break: break-word;
    }

    .card table tbody td:last-child {
        border-bottom: 0;
    }

    .card table tbody td[data-collapsible-title]:before {
        content: attr(data-collapsible-title);
        flex: 0 0 auto;
        max-width: 45%;
        font-family: var(--wms-font);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: var(--wms-text-3);
        text-align: left;
    }

    /* ช่องที่ป้ายกำกับว่าง ให้แสดงค่าเต็มบรรทัด */
    .card table tbody td[data-collapsible-title=""]:before {
        content: none;
    }

    .card table tbody td img {
        margin-left: auto;
        max-width: 84px;
    }
}

/* --------------------------------------------------------------------------
   13. อื่น ๆ
   -------------------------------------------------------------------------- */

.blink_me {
    animation: blinker 1s linear infinite;
}

/* ลบระยะห่างที่เกิดจาก <br> ต่อท้ายตารางในมาร์กอัปเดิม */
.card-content > br {
    display: none;
}

/* AdminLTE / Bootstrap ตั้ง margin ให้ table ไว้ ต้องล้างออก */
.card table {
    margin: 0;
}