/* ============================================================================
 * layout_c360.css — Design token + Topbar + Sidebar แบบ Crimson Horizon
 * ----------------------------------------------------------------------------
 * โหลดจาก header.php ทุกหน้า (ยกเว้น $header_layout = 'legacy') — ดู layout_c360_nav.php
 * 2026-10-09 สร้างใหม่
 * 2026-10-09 Sidebar เป็น flex: เมนูเลื่อนในตัว + ส่วนท้าย .c360-sidebar-foot (แจ้งปัญหาการใช้งานระบบ), ลบสไตล์ footer_bar
 * 2026-10-09 ไฮไลต์เมนูของหน้าปัจจุบัน (.is-current เมนูหลัก, .is-active เมนูย่อย)
 * 2026-10-09 หัวตาราง DataTables ทั้งระบบเป็นพื้น primary ตัวขาว (table.dataTable thead th)
 * 2026-10-09 เพิ่ม .c360-footer (Copyright ท้ายหน้า แทน footer_bar) + ติดล่างสุดของจอเมื่อเนื้อหาสั้น (position: sticky; top: 100vh)
 * 2026-10-15 สถานะกำลังโหลดของ DataTables ทั้งระบบ: ป้ายลอย spinner สี primary แทนจุดเด้งสีน้ำเงิน + แถบวิ่ง + shimmer ผ่านแถว
 * 2026-10-15 ภาพแทน no_image ทั้งระบบ: img ที่ยังไม่มี src แสดง images/no_image.svg (content), .is-no-image สำหรับรูปที่โหลดไม่ขึ้น
 * 2026-10-16 มุมโค้งตาราง DataTables ทั้งระบบ (--c360-radius-sm) ที่ช่องมุม + กรอบ .dt-scroll ของตาราง scrollX
 * 2026-10-16 ช่องค้นหา (ไอคอน + placeholder, ซ่อนป้าย) / select จำนวนแถว ของ DataTables ทั้งระบบ
 * 2026-10-19 Claude ทดลองโลโก้ concept A (Horizon) ใน .c360-brand-mark (.c360-brand-logo)
 * 2026-10-20 เปลี่ยนสี primary เป็นน้ำเงิน #466fbb + ไล่โทน hover/soft/ring, เทา/เส้น/ตัวอักษรอมน้ำเงิน, peach → น้ำเงินอ่อน (design.md 2.1)
 * 2026-10-20 Claude โลโก้เปลี่ยนเป็น concept C (Cornerstone) — .c360-brand-logo ใช้ images/logo/crm_mark_white.svg
 * 2026-10-21 Claude .c360-footer จัด Copyright ซ้าย / เลขเวอร์ชัน (.c360-footer-version) ขวา
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * หมวด: Design token
 * ------------------------------------------------------------------------- */
:root {
    --c360-primary: #466fbb;
    --c360-primary-hover: #385996;
    --c360-primary-soft: #e9eff9;
    --c360-primary-ring: rgba(70, 111, 187, 0.28);

    --c360-surface: #f7f9fd;
    --c360-card: #ffffff;
    --c360-border: #e3e7ef;
    --c360-border-strong: #d1d7e3;

    --c360-text: #1a2033;
    --c360-muted: #566075;
    --c360-faint: #8a92a5;

    --c360-peach: #dce6f7;
    --c360-peach-soft: #f0f4fc;
    --c360-peach-text: #2c4a85;

    --c360-success: #17734a;
    --c360-success-bg: #e3f4ea;
    --c360-warning: #a14f06;
    --c360-warning-bg: #fff1dc;
    --c360-danger: #b0201a;
    --c360-danger-bg: #fdeceb;
    --c360-info: #1c5aa0;
    --c360-info-bg: #e7f0fb;
    --c360-neutral: #4b5265;
    --c360-neutral-bg: #eef0f5;

    --c360-topbar-h: 60px;
    --c360-sidebar-w: 248px;
    --c360-sidebar-w-collapsed: 72px;
    --c360-radius: 14px;
    --c360-radius-sm: 10px;
    --c360-shadow: 0 1px 2px rgba(20, 26, 45, 0.06), 0 4px 14px rgba(20, 26, 45, 0.05);
    --c360-shadow-pop: 0 10px 30px rgba(20, 26, 45, 0.16);
    --c360-font: 'Plus Jakarta Sans', 'Prompt', 'Sarabun', sans-serif;
    --c360-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------------------------
 * หมวด: พื้นหลัง / ตัวอักษร
 * ------------------------------------------------------------------------- */
body.c360-body {
    font-family: var(--c360-font) !important;
    background: var(--c360-surface);
    color: var(--c360-text);
    padding-top: var(--c360-topbar-h);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

body.c360-body a:focus-visible,
body.c360-body button:focus-visible,
body.c360-body select:focus-visible {
    outline: 2px solid var(--c360-primary);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * หมวด: หัวตาราง DataTables ทั้งระบบ — พื้น primary ตัวขาว (design.md 5.9)
 * ทับสี th ใน css/table_style.css ให้ตรง token; รวมหัวตารางแยกของ scrollX (.dt-scroll-head)
 * ------------------------------------------------------------------------- */
body.c360-body table.dataTable > thead > tr > th,
body.c360-body table.dataTable > thead > tr > td,
body.c360-body div.dt-scroll-head table > thead > tr > th {
    background-color: var(--c360-primary);
    color: #ffffff;
}

/* ลูกศรเรียงของ DataTables 2 ใช้สีตามตัวอักษร (ขาว) — ปรับความจางให้อ่านได้บนพื้นแดง */
body.c360-body table.dataTable > thead > tr > th .dt-column-order {
    opacity: 0.85;
}

/* ---------------------------------------------------------------------------
 * หมวด: มุมโค้งตาราง DataTables ทั้งระบบ
 * โค้งที่ช่องมุมทั้ง 4 แทน overflow: hidden ที่ table — หัวตาราง th เป็น position: sticky
 * (css/table_style.css) ถ้าใส่ overflow: hidden หัวตารางจะไม่ค้างตอนเลื่อนหน้า
 * ตาราง scrollX: DataTables แยกหัว/เนื้อเป็น 2 ตาราง — โค้งที่กรอบ .dt-scroll แทน
 * ------------------------------------------------------------------------- */
body.c360-body table.dataTable {
    border-radius: var(--c360-radius-sm);
}

body.c360-body table.dataTable > thead > tr:first-child > th:first-child {
    border-top-left-radius: var(--c360-radius-sm);
}

body.c360-body table.dataTable > thead > tr:first-child > th:last-child {
    border-top-right-radius: var(--c360-radius-sm);
}

body.c360-body table.dataTable > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--c360-radius-sm);
}

body.c360-body table.dataTable > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--c360-radius-sm);
}

/* ตาราง scrollX: กรอบตัดมุมให้ทั้งหัวและเนื้อ (.dt-scroll-body เลื่อนในตัวเองอยู่แล้ว) */
body.c360-body div.dt-scroll {
    border-radius: var(--c360-radius-sm);
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * หมวด: ช่องค้นหา / จำนวนแถวของ DataTables ทั้งระบบ (div.dt-search, div.dt-length)
 * ช่องค้นหา: ไอคอนแว่นขยายในช่อง, ข้อความ language.search เป็น placeholder (js/crm_helpers.js init.dt)
 *            ป้าย label ซ่อนแบบอ่านได้ด้วย screen reader
 * จำนวนแถว: select มุมโค้ง + ลูกศรเอง, ข้อความ "แสดง … แถว" คงไว้
 * ------------------------------------------------------------------------- */
body.c360-body div.dt-container div.dt-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.c360-body div.dt-container div.dt-search input.dt-input,
body.c360-body div.dt-container div.dt-length select.dt-input {
    height: 36px;
    border: 1px solid var(--c360-border-strong);
    border-radius: var(--c360-radius-sm);
    background-color: var(--c360-card);
    color: var(--c360-text);
    font-family: var(--c360-font);
    font-size: 14px;
    transition: border-color 0.15s var(--c360-ease), box-shadow 0.15s var(--c360-ease);
}

body.c360-body div.dt-container div.dt-search input.dt-input {
    width: 260px;
    max-width: 100%;
    margin-left: 0;
    padding: 6px 12px 6px 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a90a2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
}

body.c360-body div.dt-container div.dt-search input.dt-input::placeholder {
    color: var(--c360-faint);
    opacity: 1;
}

body.c360-body div.dt-container div.dt-length {
    color: var(--c360-muted);
    font-size: 14px;
}

body.c360-body div.dt-container div.dt-length select.dt-input {
    margin: 0 6px;
    padding: 4px 30px 4px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23586074' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    cursor: pointer;
}

body.c360-body div.dt-container div.dt-search input.dt-input:hover,
body.c360-body div.dt-container div.dt-length select.dt-input:hover {
    border-color: var(--c360-faint);
}

body.c360-body div.dt-container div.dt-search input.dt-input:focus,
body.c360-body div.dt-container div.dt-length select.dt-input:focus {
    border-color: var(--c360-primary);
    box-shadow: 0 0 0 3px var(--c360-primary-ring);
    outline: none;
}

/* จอแคบ: ช่องค้นหาเต็มความกว้าง */
@media (max-width: 767px) {
    body.c360-body div.dt-container div.dt-search input.dt-input {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
 * หมวด: ภาพแทน no_image ทั้งระบบ (images/no_image.svg)
 * - ช่องรูปที่ยังไม่มี src (ยังไม่อัพโหลด) — ใช้ content แทนการแสดงผลโดยไม่แก้ src
 *   (JS บางหน้าตรวจ src ว่างเพื่อรู้ว่ายังไม่มีรูป)
 * - รูปที่โหลดไม่ขึ้น js/crm_helpers.js เปลี่ยน src เป็นภาพแทนและใส่ .is-no-image
 * - ไม่ต้องการภาพแทน: ใส่ data-no-fallback ที่ img
 * ------------------------------------------------------------------------- */
body.c360-body img:not([src]):not([data-no-fallback]),
body.c360-body img[src=""]:not([data-no-fallback]) {
    content: url("../images/no_image.svg");
    object-fit: contain;
}

body.c360-body img.is-no-image {
    object-fit: contain;
    background: var(--c360-surface);
}

/* ---------------------------------------------------------------------------
 * หมวด: สถานะกำลังโหลดของ DataTables ทั้งระบบ (div.dt-processing)
 * แทนจุดเด้งสีน้ำเงินของ DataTables 2 ด้วยป้ายลอยกลางตาราง: spinner วงแหวนสี primary + ข้อความ
 * ตารางยาว: ป้ายอยู่ไม่ต่ำกว่า 180px จากบนสุดของตาราง (ไม่หลุดจอเมื่อแสดง 100 แถว)
 * ระหว่างโหลด (.dt-is-loading ใส่ที่ wrapper โดย js/crm_helpers.js): แถบวิ่งใต้หัวตาราง + shimmer ไล่ผ่านแถว,
 * เซลล์เดิมจางลงและคลิกไม่ได้
 * ------------------------------------------------------------------------- */
body.c360-body div.dt-container div.dt-processing {
    top: 50%;
    top: min(50%, 180px);
    left: 50%;
    width: auto;
    margin: 0;
    padding: 10px 18px 10px 14px;
    transform: translate(-50%, -50%);
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    background: var(--c360-card);
    border: 1px solid var(--c360-border);
    border-radius: 999px;
    box-shadow: var(--c360-shadow-pop);
    color: var(--c360-muted);
    font-size: 13px;
    font-weight: 500;
    z-index: 20;
    animation: c360-dt-fade-in 0.18s var(--c360-ease);
}

/* DataTables สั่ง display:block ตอนแสดง — จัดเป็น flex ให้ spinner อยู่หน้าข้อความ */
body.c360-body div.dt-container div.dt-processing[style*="block"] {
    display: flex !important;
}

/* กล่องจุด 4 จุดเดิม (div สุดท้าย) => วงแหวนหมุน */
body.c360-body div.dt-container div.dt-processing > div:last-child {
    order: -1;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border-radius: 50%;
    border: 3px solid var(--c360-primary-soft);
    border-top-color: var(--c360-primary);
    animation: c360-dt-spin 0.75s linear infinite;
}

body.c360-body div.dt-container div.dt-processing > div:last-child > div {
    display: none;
}

/* แถวเดิมระหว่างโหลด: เซลล์จางลง + กันคลิกซ้ำ (จางที่ td ไม่ใช่ tbody เพื่อให้แถบวิ่ง/shimmer ด้านล่างสีเต็ม) */
body.c360-body div.dt-container table.dataTable > tbody > tr > td {
    transition: opacity 0.18s var(--c360-ease);
}

body.c360-body div.dt-container.dt-is-loading table.dataTable > tbody {
    position: relative;
    pointer-events: none;
}

body.c360-body div.dt-container.dt-is-loading table.dataTable > tbody > tr > td {
    opacity: 0.5;
}

/* แถบวิ่งสี primary ใต้หัวตาราง (ขอบบนของ tbody) */
body.c360-body div.dt-container.dt-is-loading table.dataTable > tbody::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background-color: var(--c360-primary-soft);
    background-image: linear-gradient(90deg, transparent 0%, var(--c360-primary) 50%, transparent 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: c360-dt-bar 1.1s var(--c360-ease) infinite;
}

/* แสงวาบไล่ผ่านแถว (shimmer) */
body.c360-body div.dt-container.dt-is-loading table.dataTable > tbody::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-image: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
    background-size: 35% 100%;
    background-repeat: no-repeat;
    animation: c360-dt-shimmer 1.4s ease-in-out infinite;
}

@keyframes c360-dt-bar {
    from {
        background-position: -60% 0;
    }
    to {
        background-position: 160% 0;
    }
}

@keyframes c360-dt-shimmer {
    from {
        background-position: -50% 0;
    }
    to {
        background-position: 150% 0;
    }
}

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

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

/* ---------------------------------------------------------------------------
 * หมวด: Topbar
 * ------------------------------------------------------------------------- */
.c360-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--c360-topbar-h);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--c360-card);
    border-bottom: 1px solid var(--c360-border);
}

.c360-burger {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--c360-radius-sm);
    background: transparent;
    color: var(--c360-text);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s var(--c360-ease);
}

.c360-burger:hover {
    background: var(--c360-neutral-bg);
}

.c360-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--c360-text);
    text-decoration: none;
}

.c360-brand:hover,
.c360-brand:focus {
    color: var(--c360-text);
    text-decoration: none;
}

.c360-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--c360-primary);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 13px;
    gap: 6px;
}

/* โลโก้ Cornerstone (กรอบ C โอบสี่เหลี่ยม) สีขาวหน้าคำว่า CRM — images/logo/crm_mark_white.svg */
.c360-brand-logo {
    display: block;
    width: 18px;
    height: 18px;
}

.c360-brand-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c360-topbar-spacer {
    flex: 1 1 auto;
}

/* ---- เมนูโปรไฟล์ ---- */
.c360-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    padding: 4px 10px 4px 4px;
    color: var(--c360-text);
    transition: background 0.15s var(--c360-ease), border-color 0.15s var(--c360-ease);
}

.c360-profile-btn:hover,
.c360-profile.open .c360-profile-btn {
    background: var(--c360-neutral-bg);
    border-color: var(--c360-border);
}

.c360-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c360-primary-soft);
    color: var(--c360-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.c360-profile-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
}

.c360-profile-name {
    font-weight: 600;
    font-size: 13px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c360-profile-role {
    font-size: 11px;
    color: var(--c360-muted);
}

.c360-profile-caret {
    color: var(--c360-muted);
}

.c360-profile-menu {
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--c360-border);
    border-radius: var(--c360-radius-sm);
    box-shadow: var(--c360-shadow-pop);
    margin-top: 8px;
}

.c360-profile-menu > li > a {
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--c360-text);
    font-weight: 500;
}

.c360-profile-menu > li > a:hover,
.c360-profile-menu > li > a:focus {
    background: var(--c360-neutral-bg);
    color: var(--c360-text);
}

.c360-profile-menu > li > a.c360-logout {
    color: var(--c360-danger);
}

.c360-profile-menu > li > a.c360-logout:hover,
.c360-profile-menu > li > a.c360-logout:focus {
    background: var(--c360-danger-bg);
    color: var(--c360-danger);
}

.c360-profile-menu-head {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--c360-border);
    margin-bottom: 6px;
}

.c360-profile-menu-name {
    font-weight: 600;
}

.c360-profile-menu-branch {
    font-size: 12px;
    color: var(--c360-muted);
}

/* ---------------------------------------------------------------------------
 * หมวด: Sidebar
 * ------------------------------------------------------------------------- */
.c360-sidebar {
    position: fixed;
    top: var(--c360-topbar-h);
    left: 0;
    bottom: 0;
    width: var(--c360-sidebar-w);
    z-index: 1020;
    background: var(--c360-card);
    border-right: 1px solid var(--c360-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.22s var(--c360-ease), transform 0.22s var(--c360-ease);
}

/* เมนูเลื่อนในตัวเอง ส่วนท้าย (.c360-sidebar-foot) ติดอยู่ล่างสุดเสมอ */
.c360-sidebar-inner {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 10px 24px;
}

/* ---- ส่วนท้าย Sidebar: แจ้งปัญหาการใช้งานระบบ ---- */
.c360-sidebar-foot {
    flex: 0 0 auto;
    padding: 10px;
    border-top: 1px solid var(--c360-border);
}

.c360-side-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--c360-radius-sm);
    color: var(--c360-muted);
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    transition: background 0.15s var(--c360-ease), color 0.15s var(--c360-ease);
}

.c360-side-link:hover,
.c360-side-link:focus {
    background: var(--c360-primary-soft);
    color: var(--c360-primary);
    text-decoration: none;
}

.c360-side-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--c360-neutral-bg);
    color: var(--c360-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background 0.15s var(--c360-ease), color 0.15s var(--c360-ease);
}

.c360-side-link:hover .c360-side-icon,
.c360-side-link:focus .c360-side-icon {
    background: var(--c360-primary);
    color: #ffffff;
}

.c360-side-text {
    overflow: hidden;
    text-overflow: ellipsis;
}
.c360-side-menu {
    margin: 0;
}

.c360-side-menu > li {
    float: none;
    margin-bottom: 2px;
}

.c360-side-menu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px !important;
    border-radius: var(--c360-radius-sm);
    color: var(--c360-text);
    font-weight: 500;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c360-side-menu > li > a::before {
    content: attr(data-initial);
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--c360-neutral-bg);
    color: var(--c360-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    transition: background 0.15s var(--c360-ease), color 0.15s var(--c360-ease);
}

/* ---- ไอคอนเมนูหลักจาก mainmenu.menu_icon (load_menu.php, Phase 99) — แทนกล่องอักษรย่อ ---- */
.c360-side-menu > li > a.has-icon::before {
    display: none;
}

.c360-menu-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--c360-neutral-bg);
    color: var(--c360-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background 0.15s var(--c360-ease), color 0.15s var(--c360-ease);
}

.c360-menu-icon svg {
    width: 18px;
    height: 18px;
}

.c360-side-menu > li > a:hover .c360-menu-icon,
.c360-side-menu > li.open > a .c360-menu-icon,
.c360-side-menu > li.is-current > a .c360-menu-icon {
    background: var(--c360-primary);
    color: #ffffff;
}

.c360-side-menu > li > a:hover,
.c360-side-menu > li > a:focus,
.c360-side-menu > li.open > a,
.c360-side-menu > li.open > a:hover,
.c360-side-menu > li.open > a:focus {
    background: var(--c360-primary-soft);
    color: var(--c360-primary);
}

.c360-side-menu > li > a:hover::before,
.c360-side-menu > li.open > a::before {
    background: var(--c360-primary);
    color: #ffffff;
}

.c360-side-menu .caret {
    margin-left: auto;
    transition: transform 0.15s var(--c360-ease);
}

.c360-side-menu > li.open > a .caret {
    transform: rotate(180deg);
}

/* ---- เมนูย่อยจาก load_menu.php (เดิมเป็น dropdown ลอย) ให้แสดงต่อท้ายแบบ accordion ---- */
.c360-side-menu .dropdown-menu {
    position: static;
    float: none;
    display: none;
    min-width: 0;
    margin: 2px 0 6px;
    padding: 2px 0 2px 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.c360-side-menu .open > .dropdown-menu {
    display: block;
}

.c360-side-menu .dropdown-menu > li > a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--c360-muted);
    font-size: 13px;
    white-space: normal;
}

.c360-side-menu .dropdown-menu > li > a:hover,
.c360-side-menu .dropdown-menu > li > a:focus {
    background: var(--c360-primary-soft);
    color: var(--c360-primary);
}

.c360-side-menu .dropdown-menu.inside {
    padding-left: 12px;
}

/* ---- เมนูของหน้าปัจจุบัน (js/layout_c360.js markActiveMenu) ---- */
/* เมนูหลัก: ตัวอักษร primary + กล่องอักษรย่อพื้น primary (เห็นได้แม้ Sidebar ถูกย่อ) */
.c360-side-menu > li.is-current > a {
    color: var(--c360-primary);
    font-weight: 600;
}

.c360-side-menu > li.is-current > a::before {
    background: var(--c360-primary);
    color: #ffffff;
}

/* เมนูย่อย: พื้น primary-soft + แถบซ้าย primary + ตัวหนา */
.c360-side-menu .dropdown-menu > li.is-active > a,
.c360-side-menu .dropdown-menu > li.is-active > a:hover,
.c360-side-menu .dropdown-menu > li.is-active > a:focus {
    background: var(--c360-primary-soft);
    color: var(--c360-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--c360-primary);
}

/* หัวข้อของเมนูย่อยซ้อนที่มีหน้าปัจจุบันอยู่ข้างใน */
.c360-side-menu .dropdown-menu > li.is-current > a {
    color: var(--c360-primary);
    font-weight: 600;
}

/* ---- Sidebar ถูกย่อ (จอใหญ่): เหลือเฉพาะไอคอนอักษรย่อ ---- */
body.c360-collapsed .c360-sidebar {
    width: var(--c360-sidebar-w-collapsed);
}

body.c360-collapsed .c360-side-menu > li > a {
    font-size: 0;
    justify-content: center;
    gap: 0;
}

body.c360-collapsed .c360-side-menu > li > a::before {
    font-size: 13px;
}

body.c360-collapsed .c360-side-menu .caret,
body.c360-collapsed .c360-side-menu .dropdown-menu {
    display: none !important;
}

body.c360-collapsed .c360-side-link {
    justify-content: center;
    gap: 0;
}

body.c360-collapsed .c360-side-text {
    display: none;
}

/* ---------------------------------------------------------------------------
 * หมวด: พื้นที่เนื้อหา + footer ของระบบเดิม
 * เว้นที่ Sidebar ที่ body เพื่อให้ทุกหน้าเดิม (ไม่มี wrapper) ใช้ได้ทันที
 * ------------------------------------------------------------------------- */
body.c360-body {
    padding-left: var(--c360-sidebar-w);
    transition: padding-left 0.22s var(--c360-ease);
}

body.c360-body.c360-collapsed {
    padding-left: var(--c360-sidebar-w-collapsed);
}

/* หน้าเดิมใช้ .container ความกว้างคงที่ — ให้ยืดตามพื้นที่ที่เหลือหลังหัก Sidebar */
body.c360-body .container {
    width: auto;
    max-width: 1170px;
}

/* ---- Footer ท้ายหน้า: Copyright (footer.php) — ลิงก์แจ้งปัญหาอยู่ใน .c360-sidebar-foot ----
 * อยู่ใน flow ปกติต่อจากเนื้อหา; หน้าที่มีแถบ fixed ล่างจอ (เช่น .c360-actionbar) ต้องเว้นที่ด้วย padding-bottom ของ .c360-footer
 * (ไม่ใช่ main = footer ถูกบัง, ไม่ใช่ body = body สูงคงที่ 100%) — ดู body.c360-has-actionbar .c360-footer ใน css/customer_360.css */
/* ติดล่างสุดของจอเมื่อเนื้อหาสั้น (sticky footer): body สูงคงที่ 100% (css/header.css) footer จึงถูกดันลงได้ไกลสุดแค่ขอบล่าง body
 * — เนื้อหายาวกว่าจอ footer อยู่ต่อท้ายเนื้อหาตามปกติ; แทน #wrap { min-height: 100% } ของหน้าแบบเดิมที่หน้า layout ใหม่ไม่มี */
/* หน้าแบบเดิมใช้ #wrap { min-height: 100%; margin-bottom: -10px } ดัน footer ลงล่าง (css/header.css) ซึ่งรวมกับ padding-top ของ topbar
 * ทำให้หน้าสูงเกินจอเสมอ — layout นี้ให้ .c360-footer ติดล่างเองจึงปลดออก */
body.c360-body #wrap {
    min-height: 0;
    margin-bottom: 0;
}

.c360-footer {
    position: sticky;
    top: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--c360-border);
    color: var(--c360-faint);
    font-size: 12px;
}

/* เลขเวอร์ชันจากไฟล์ VERSION (inc/app_version.php) — ชิดขวาของ footer, หน้า legacy ต่อท้ายลิงก์แจ้งปัญหาฝั่งขวา */
.c360-footer-version {
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.c360-footer .c360-footer-version {
    margin-left: auto;
}

.c360-backdrop {
    display: none;
}

/* ---------------------------------------------------------------------------
 * หมวด: จอเล็ก (Tablet / Mobile) — Sidebar เลื่อนทับเนื้อหา
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .c360-sidebar,
    body.c360-collapsed .c360-sidebar {
        width: var(--c360-sidebar-w);
        transform: translateX(-100%);
        box-shadow: none;
    }

    body.c360-sidebar-open .c360-sidebar {
        transform: translateX(0);
        box-shadow: var(--c360-shadow-pop);
    }

    body.c360-collapsed .c360-side-menu > li > a {
        font-size: 13.5px;
        justify-content: flex-start;
        gap: 12px;
    }

    body.c360-collapsed .c360-side-menu .caret {
        display: inline-block !important;
    }

    body.c360-collapsed .c360-side-link {
        justify-content: flex-start;
        gap: 12px;
    }

    body.c360-collapsed .c360-side-text {
        display: inline;
    }
    body.c360-collapsed .c360-side-menu .open > .dropdown-menu {
        display: block !important;
    }

    body.c360-body,
    body.c360-body.c360-collapsed {
        padding-left: 0;
    }

    body.c360-sidebar-open .c360-backdrop {
        display: block;
        position: fixed;
        top: var(--c360-topbar-h);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1010;
        background: rgba(20, 26, 45, 0.38);
    }
}

@media (max-width: 575px) {
    .c360-brand-name,
    .c360-profile-text,
    .c360-profile-caret {
        display: none;
    }

    .c360-profile-btn {
        padding: 4px;
    }
}

/* ---------------------------------------------------------------------------
 * หมวด: แถบเมนูด้านล่าง (Bottom nav) — มือถือ / iPad เท่านั้น (Phase 100)
 * #c360_bnav วนเมนูหลักทุกตัว (ไอคอน + ชื่อ) — แตะแล้วเปิดแผง #c360_fmenu ของเมนูย่อยหลายชั้นเหนือแถบ
 * สร้างใน js/layout_c360.js (buildBottomNav) แสดงเมื่อ body.c360-touch — คอมพิวเตอร์ไม่เห็นแม้ย่อหน้าต่างเล็ก
 * ------------------------------------------------------------------------- */
:root {
    --c360-bnav-h: 62px;
    --c360-bnav-space: calc(var(--c360-bnav-h) + env(safe-area-inset-bottom, 0px));
}

.c360-bnav,
.c360-fmenu,
.c360-fmenu-backdrop {
    display: none;
}

/* เว้นที่ท้ายหน้าให้แถบล่าง (เนื้อหา / footer ไม่ถูกบัง) */
body.c360-touch.c360-body {
    padding-bottom: var(--c360-bnav-space);
}

/* Sidebar (พับเหลือไอคอนใน applyTouchMode) จบเหนือแถบเมนู — ลิงก์แจ้งปัญหาท้าย Sidebar ไม่ถูกบัง
 * ยกเว้นตอนเปิด Sidebar แบบเลื่อนทับ (จอเล็ก) ซึ่งแถบเมนูซ่อนอยู่ */
body.c360-touch:not(.c360-sidebar-open) .c360-sidebar {
    bottom: var(--c360-bnav-space);
}

/* หน้าที่มีแถบปุ่มล่างจอ (.c360-actionbar ของ customer_360) — ยกขึ้นเหนือแถบเมนู */
body.c360-touch .c360-actionbar {
    bottom: var(--c360-bnav-space);
}

body.c360-touch .c360-bnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    display: block;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--c360-border);
    background: var(--c360-card);
    box-shadow: 0 -4px 16px rgba(20, 26, 45, 0.06);
    font-family: var(--c360-font);
}

/* Sidebar เลื่อนทับอยู่ — ซ่อนแถบล่าง */
body.c360-touch.c360-sidebar-open .c360-bnav {
    display: none;
}

/* ปุ่มเมนูหลัก: ยืดเต็มแถบ (ปุ่มละไม่เกิน 160px อยู่กลางแถบ) */
.c360-bnav-list {
    display: flex;
    height: var(--c360-bnav-h);
    margin: 0;
    padding: 0 4px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.c360-bnav-list::-webkit-scrollbar {
    display: none;
}

/* แสดง 4 เมนูหลัก (BNAV_MENU_IDS ใน js/layout_c360.js) แบ่งความกว้างเท่ากัน — จอแคบมากจนไม่พอ 64px/ปุ่ม จึงเลื่อนแนวนอน */
.c360-bnav-item {
    flex: 1 0 64px;
    max-width: 160px;
    margin: 0 auto;
}

.c360-bnav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    padding: 6px 2px 5px;
    border: 0;
    background: transparent;
    color: var(--c360-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

.c360-bnav-btn:focus {
    outline: none;
}

.c360-bnav-btn:focus-visible {
    outline: 2px solid var(--c360-primary-ring);
    outline-offset: -4px;
    border-radius: var(--c360-radius-sm);
}

.c360-bnav-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c360-bnav-btn .c360-fmenu-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 28px;
    border-radius: 14px;
    background: transparent;
    font-size: 14px;
}

.c360-bnav-btn .c360-fmenu-icon svg {
    width: 20px;
    height: 20px;
}

/* เมนูของหน้าปัจจุบัน / เมนูที่เปิดแผงอยู่ */
.c360-bnav-item.is-current .c360-bnav-btn,
.c360-bnav-item.is-open .c360-bnav-btn {
    color: var(--c360-primary);
    font-weight: 600;
}

.c360-bnav-item.is-current .c360-fmenu-icon {
    background: var(--c360-primary-soft);
    color: var(--c360-primary);
}

.c360-bnav-item.is-open .c360-fmenu-icon {
    background: var(--c360-primary);
    color: #ffffff;
}

/* ---- แผงเมนูย่อย (เหนือแถบล่าง) ---- */
body.c360-touch.c360-fmenu-open {
    overflow: hidden;
}

body.c360-touch.c360-fmenu-open .c360-fmenu-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--c360-bnav-space);
    z-index: 1035;
    background: rgba(20, 26, 45, 0.38);
}

/* มือถือ = เต็มความกว้างติดแถบล่าง, iPad = กล่องกว้าง 440px กลางจอ */
body.c360-touch.c360-fmenu-open .c360-fmenu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--c360-bnav-space);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    max-height: calc(80vh - var(--c360-bnav-space));
    border-radius: 20px 20px 0 0;
    background: var(--c360-card);
    box-shadow: var(--c360-shadow-pop);
    font-family: var(--c360-font);
    animation: c360-fmenu-in 0.2s var(--c360-ease);
}

@keyframes c360-fmenu-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.c360-fmenu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px 10px 20px;
    border-bottom: 1px solid var(--c360-border);
}

.c360-fmenu-title {
    color: var(--c360-text);
    font-size: 16px;
    font-weight: 700;
}

.c360-fmenu-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--c360-radius-sm);
    background: transparent;
    color: var(--c360-muted);
    font-size: 18px;
}

.c360-fmenu-close:active {
    background: var(--c360-neutral-bg);
}

.c360-fmenu-close:focus {
    outline: none;
}

.c360-fmenu-close:focus-visible {
    outline: 2px solid var(--c360-primary-ring);
    outline-offset: 2px;
}

.c360-fmenu-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 10px;
}

.c360-fmenu-list,
.c360-fmenu-sub {
    margin: 0;
    padding: 0;
    list-style: none;
}

.c360-fmenu-item {
    margin-bottom: 2px;
}

/* ลิงก์ / หัวข้อทุกชั้น — สูงอย่างน้อย 44px ให้กดด้วยนิ้วได้ */
.c360-fmenu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--c360-radius-sm);
    background: transparent;
    color: var(--c360-text);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
}

.c360-fmenu-link:hover,
.c360-fmenu-link:focus {
    color: var(--c360-text);
    text-decoration: none;
}

.c360-fmenu-link:focus {
    outline: none;
}

.c360-fmenu-link:focus-visible {
    outline: 2px solid var(--c360-primary-ring);
    outline-offset: -2px;
}

.c360-fmenu-link:active {
    background: var(--c360-primary-soft);
}

.c360-fmenu-text {
    flex: 1 1 auto;
    min-width: 0;
}

.c360-fmenu-caret {
    flex: 0 0 auto;
    color: var(--c360-faint);
    font-size: 12px;
    transition: transform 0.15s var(--c360-ease);
}

/* กล่องไอคอน (ใช้ในปุ่มแถบล่าง) */
.c360-fmenu-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--c360-neutral-bg);
    color: var(--c360-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
}

.c360-fmenu-icon svg {
    width: 19px;
    height: 19px;
}

/* หัวข้อที่เปิดอยู่ / มีหน้าปัจจุบันอยู่ข้างใน */
.c360-fmenu-item.is-open > .c360-fmenu-link,
.c360-fmenu-item.is-current > .c360-fmenu-link {
    color: var(--c360-primary);
    font-weight: 600;
}

.c360-fmenu-item.is-open > .c360-fmenu-link .c360-fmenu-caret {
    transform: rotate(180deg);
}

/* เมนูย่อยซ้อน: ซ่อนจนกว่าจะเปิดหัวข้อ, เยื้อง + เส้นนำสายตาด้านซ้าย */
.c360-fmenu-sub {
    display: none;
    margin: 2px 0 6px 14px;
    padding-left: 10px;
    border-left: 2px solid var(--c360-border);
}

.c360-fmenu-item.is-open > .c360-fmenu-sub {
    display: block;
}

.c360-fmenu-sub .c360-fmenu-link {
    font-size: 14px;
}

/* หน้าปัจจุบัน */
.c360-fmenu-item.is-active > .c360-fmenu-link {
    background: var(--c360-primary-soft);
    color: var(--c360-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--c360-primary);
}

/* iPad / แท็บเล็ต: แผงกว้างไม่เกิน 440px กลางจอ ลอยเหนือแถบล่าง */
@media (min-width: 600px) {
    body.c360-touch.c360-fmenu-open .c360-fmenu {
        left: 50%;
        right: auto;
        bottom: calc(var(--c360-bnav-space) + 12px);
        width: 440px;
        max-height: calc(78vh - var(--c360-bnav-space));
        border-radius: 20px;
        transform: translateX(-50%);
        animation-name: c360-fmenu-in-center;
    }

    @keyframes c360-fmenu-in-center {
        from {
            opacity: 0;
            transform: translate(-50%, 24px);
        }
        to {
            opacity: 1;
            transform: translate(-50%, 0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .c360-sidebar,
    body.c360-body {
        transition: none !important;
    }

    body.c360-touch.c360-fmenu-open .c360-fmenu {
        animation: none !important;
        transition: none !important;
    }

    /* ตัวบอกกำลังโหลดของ DataTables ไม่ปิด animation — เป็นการเคลื่อนไหวที่จำเป็น (เครื่อง Windows ที่ปิด Animation effects จะเห็นวงแหวนหยุดนิ่งเหมือนค้าง) */
}