/* admin.css — ส่วนที่ Bootstrap ไม่มีให้ · ตั้งใจให้สั้น
   ⚠️ ห้าม @import จากเว็บนอก — CSP ตั้ง style-src 'self' ไว้ */

body { background: #f6f7f9; }

/* ── หน้าล็อกอิน / 2FA ───────────────────────────────────────── */
body.bare {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #1f2430;
}
body.bare main { width: 100%; max-width: 26rem; }

.auth-box {
    background: #fff;
    border-radius: .75rem;
    padding: 2rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
}

.totp-input { letter-spacing: .6em; font-variant-numeric: tabular-nums; }

/* ── ค่าลับที่แสดงเป็นจุด ─────────────────────────────────────
   เป็นข้อความคงที่ ไม่ใช่ค่าจริงที่ถูกซ่อนด้วย CSS — ค่าจริงไม่เคยถูก
   ส่งมาถึงเบราว์เซอร์เลย (ดูหัวไฟล์ shop_form.php) */
.secret-dots { font-family: monospace; letter-spacing: .2em; color: #6c757d; }

/* ── ตาราง audit ─────────────────────────────────────────────── */
.audit-detail {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem;
    color: #495057;
    word-break: break-all;
}

.card-header { font-weight: 600; background: #fff; }

/* ── มือถือ (เจ้าของ 2026-09-30: คอนโซลต้องใช้บนมือถือได้ทุกหน้า) ──────────
   ตรวจด้วย _shots/cca_mobile_ui.js ที่จอ 390px — หน้าห้ามเลื่อนซ้าย-ขวา */

/* เมนูที่กางจาก ☰ — ชื่อผู้ใช้ + ออกจากระบบ แยกเป็นแถวท้ายสุด */
@media (max-width: 1199.98px) {
    .navbar .cca-nav-user {
        justify-content: space-between;
        border-top: 1px solid rgba(255, 255, 255, .15);
        margin-top: .5rem;
        padding-top: .75rem;
        padding-bottom: .25rem;
    }
}

@media (max-width: 767.98px) {
    main.container { padding-top: 1rem !important; padding-bottom: 1rem !important; }

    /* หัวหน้า (ชื่อหน้า + ปุ่ม/ตัวกรอง) — แถวแรกใต้ main ทุกหน้าใช้ d-flex justify-content-between
       บนจอเล็กให้ขึ้นบรรทัดใหม่แทนการบีบ (หน้าค่าบริการ: ชื่อหน้าและปุ่มกรองเหลือคำละสองบรรทัด) */
    main > .d-flex.justify-content-between:first-child { flex-wrap: wrap; gap: .5rem; }
    main > .d-flex.justify-content-between:first-child > .btn-group { width: 100%; }
    main > .d-flex.justify-content-between:first-child > .btn-group > .btn { flex: 1 1 0; white-space: nowrap; padding-left: .25rem; padding-right: .25rem; }

    /* ตารางรายการ → การ์ดทีละแถว (ป้ายคอลัมน์มาจาก data-label ที่ admin.js เติมจาก <thead>)
       เดิมตารางเลื่อนซ้าย-ขวาในกรอบ ชื่อร้านถูกบีบเหลือคำละบรรทัด คอลัมน์ขวาถูกตัดหายนอกจอ */
    table.cca-stack thead { display: none; }
    table.cca-stack, table.cca-stack tbody, table.cca-stack tr, table.cca-stack td { display: block; width: 100%; }
    table.cca-stack tr {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .35rem .85rem;
    }
    /* ป้ายอยู่คอลัมน์ซ้ายคงที่ เนื้อหาไหลตามปกติ — ⚠️ ไม่ใช้ flex: ช่องที่มีหลายบรรทัด
       (โดเมน pos/portal) จะถูกเรียงข้างกันเป็นคอลัมน์แคบ ๆ แทนที่จะซ้อนลงมา */
    table.cca-stack td {
        position: relative;
        border: 0 !important;
        padding: .3rem 0 .3rem 7.25rem !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        min-height: 1.9rem;
    }
    table.cca-stack td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: .35rem;
        width: 6.5rem;
        color: #6c757d;
        font-size: .8125rem;
        font-weight: 600;
    }
    /* ช่องไม่มีหัวคอลัมน์ (ปุ่มจัดการ) / ช่องข้อความ "ไม่มีข้อมูล" — ไม่มีป้าย ใช้เต็มความกว้าง */
    table.cca-stack td[data-label=""], table.cca-stack td:not([data-label]) { padding-left: 0 !important; }
    table.cca-stack td[data-label=""] { text-align: right !important; }
    table.cca-stack td[data-label=""]::before, table.cca-stack td:not([data-label])::before { display: none; }

    /* iOS ซูมหน้าเองทุกครั้งที่แตะช่องที่ตัวอักษรเล็กกว่า 16px แล้วไม่ซูมกลับ */
    .form-control, .form-select, textarea, input[type="text"], input[type="number"],
    input[type="email"], input[type="password"], input[type="date"], input[type="search"] {
        font-size: 16px !important;
    }
}