/* ============================================================
   Time Optic — สไตล์กลางของทั้งระบบ
   ============================================================
   ไฟล์นี้โหลด "ก่อน" <style> ของแต่ละหน้าเสมอ
   => หน้าไหนอยากได้ค่าต่างจากนี้ ให้ประกาศทับใน <style> ของหน้านั้นได้เลย

   ค่าตัวแปรทั้งหมดดึงมาจากค่าที่ใช้จริงในโค้ดเดิม (ค่าที่พบบ่อยที่สุด)
   ไม่ได้ตั้งขึ้นใหม่ จึงไม่เปลี่ยนหน้าตาของหน้าที่ใช้ค่ามาตรฐานอยู่แล้ว
   ============================================================ */

:root {
    /* พื้นหลัง / พื้นผิว */
    --primary-bg : #f4f7fe;
    --card-bg    : #ffffff;
    --bg-body    : #f8fafc;

    /* ตัวอักษร */
    --text-main  : #1e293b;
    --text-muted : #64748b;

    /* เส้นขอบ */
    --border-light : #e2e8f0;
    --border-color : #e2e8f0;

    /* สีหลัก */
    --primary      : #3b82f6;
    --primary-dark : #2563eb;

    /* สีสถานะ */
    --success : #10b981;
    --warning : #f59e0b;
    --danger  : #ef4444;
    --info    : #2980b9;

    /* สีสถานะ (อ่อน) */
    --success-light : #eafaf1;
    --warning-light : #fef9e7;
    --danger-light  : #fef2f2;
    --info-light    : #ebf5fb;
    --purple-light  : #ede9fe;

    /* จานสี */
    --blue       : #3b82f6;
    --green      : #10b981;
    --red        : #ef4444;
    --orange     : #f59e0b;
    --purple     : #8b5cf6;
    --teal       : #14b8a6;
    --pos-accent : #f59e0b;

    /* Sidebar */
    --sidebar-bg        : #0f172a;
    --sidebar-hover     : rgba(255, 255, 255, 0.05);
    --sidebar-active-bg : rgba(59, 130, 246, 0.15);
}

/* ------------------------------------------------------------
   ฐานร่วม — border-box เฉพาะ "ส่วนของตาราง"
   จำเป็นสำหรับโหมดการ์ดบนมือถือ: หน้า orders.php ขาดไปหน้าเดียว
   ทำให้ padding+border บวกทับ width:100% จนการ์ดล้นขอบขวา 34px
   คอลัมน์ขวาถูกตัดหาย

   ตั้งใจไม่ประกาศเป็น global (*, *::before, *::after)
   เพราะวัดแล้วพบว่าจะทำให้กล่องเนื้อหาของ 5 หน้าแคบลง 60-80px
   (register / import_excel / sales-index / sales-login / pos)
   เนื่องจาก max-width ของกล่องเหล่านั้นออกแบบบน content-box ไว้แต่แรก
   ------------------------------------------------------------ */
table, thead, tbody, tfoot, tr, th, td { box-sizing: border-box; }


/* ============================================================
   ตาราง → การ์ด บนมือถือ  (แพตเทิร์นกลาง)
   ============================================================
   วิธีใช้:
     1) ใส่ class="tbl-cards" ที่ "กล่องครอบตาราง"
     2) ใส่ data-label="หัวคอลัมน์" ที่ <td> ทุกช่อง
     3) ช่องที่ไม่อยากให้ขึ้นในการ์ด ใส่ class="tc-hide"
     4) ช่องปุ่มจัดการ ใส่ class="tc-actions" (จะกลายเป็นแถบท้ายการ์ด)

   บทเรียนที่ฝังไว้ในกฎด้านล่าง (เคยพลาดมาแล้วทั้งคู่):
     - minmax(0,1fr) ไม่ใช่ 1fr  -> ค่ายาวจะดัน track จนล้นขอบ
     - .tc-actions ต้อง width:auto -> ถ้าคง width:100% ไว้คู่กับ margin ติดลบ
       เบราว์เซอร์จะถือว่ากำหนดเกิน (over-constrained) แล้วทิ้ง margin ฝั่งขวา
       ทำให้แถบสั้นข้างเดียว
   ============================================================ */
@media (max-width: 768px) {

    .tbl-cards { overflow-x: hidden; padding: 0 15px; }

    .tbl-cards table, .tbl-cards thead, .tbl-cards tbody, .tbl-cards tfoot,
    .tbl-cards th, .tbl-cards td, .tbl-cards tr {
        display: block; width: 100%; box-sizing: border-box;
    }

    /* ซ่อนหัวตาราง — ชื่อคอลัมน์ย้ายไปอยู่ใน data-label ของแต่ละช่องแทน */
    .tbl-cards thead tr { position: absolute; top: -9999px; left: -9999px; }

    .tbl-cards table { min-width: 0; white-space: normal; }

    /* 1 แถว = 1 การ์ด */
    .tbl-cards tbody tr {
        background: var(--card-bg);
        border: 1px solid var(--border-light);
        border-radius: 14px;
        margin: 0 0 14px;            /* ห้ามใส่ margin ซ้าย-ขวา: ไม่ถูกนับใน width:100% */
        padding: 6px 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
    }
    .tbl-cards tbody tr:hover { background: var(--card-bg); }

    /* label ซ้าย — ค่าขวา */
    .tbl-cards tbody td {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 12px; row-gap: 3px;
        align-items: baseline; justify-items: end;
        text-align: right; padding: 11px 0;
        border-bottom: 1px dashed var(--border-light);
    }
    .tbl-cards tbody tr td:last-child { border-bottom: 0; }

    .tbl-cards tbody td::before {
        content: attr(data-label);
        grid-column: 1; justify-self: start;
        font-size: 12px; font-weight: 600;
        color: var(--text-muted); white-space: nowrap;
    }
    .tbl-cards tbody td > * {
        grid-column: 2; min-width: 0; max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* ช่องที่ไม่ต้องแสดงในมุมมองการ์ด (เช่น เลขลำดับ) */
    .tbl-cards .tc-hide { display: none !important; }

    /* แถบปุ่มจัดการท้ายการ์ด */
    .tbl-cards tbody td.tc-actions {
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center; gap: 10px;
        width: auto;                  /* ดูหมายเหตุด้านบน — จำเป็น */
        border-bottom: 0;
        margin: 8px -16px -6px;
        padding: 13px 16px;
        background: #f8fafc;
        border-top: 1px solid var(--border-light);
        border-radius: 0 0 14px 14px;
    }
    .tbl-cards tbody td.tc-actions::before { display: none; }
    .tbl-cards tbody td.tc-actions > * { margin: 0 !important; }

    /* กล่องปุ่มบางหน้าห่ออีกชั้น (เช่น .action-buttons) — ให้กระจายเหมือนกัน */
    .tbl-cards tbody td.tc-actions > div {
        display: flex; flex-wrap: wrap; justify-content: center;
        align-items: center; gap: 10px; width: 100%;
    }
    /* form ที่ห่อปุ่มไว้ (ใช้ส่ง POST) ไม่ควรมีผลต่อการจัดวาง
       display:contents ทำให้ปุ่มข้างในกลายเป็นสมาชิกของ flex แถวนี้โดยตรง
       -> ปุ่มในฟอร์มกับปุ่มนอกฟอร์มเรียงระดับเดียวกัน ขนาดเท่ากัน
       (เดิมสั่ง form{width:100%} ทำให้ปุ่มไอคอนในฟอร์มยืดเป็น 268px จนล้น) */
    .tbl-cards tbody td.tc-actions > form { display: contents; }

    /* ปุ่มในแถบจัดการ — จัดสไตล์จากตำแหน่ง ไม่ต้องเติมคลาสในแท็กปุ่ม
       (เคยลองเติมคลาสด้วยสคริปต์แล้วไปตัดกลาง <?= ?> จนโค้ดพัง) */
    .tbl-cards tbody td.tc-actions button,
    .tbl-cards tbody td.tc-actions a {
        /* ต้องใช้ !important เพราะหลายหน้าเขียน style="width:36px;height:36px"
           ไว้ในแท็กปุ่มโดยตรง ซึ่ง inline style ชนะ CSS ไฟล์เสมอ
           44px คือขนาดต่ำสุดที่นิ้วแตะได้แม่นบนมือถือ */
        height: 44px !important; min-width: 44px !important; width: auto !important;
        margin: 0 !important;
        display: inline-flex; align-items: center; justify-content: center;
        gap: 6px; white-space: nowrap;   /* กันข้อความไทยแตกเป็นแนวตั้ง */
    }
    /* ปุ่มเดี่ยวที่มีข้อความ (เช่น "ลูกค้ารับแว่น") ให้กินเต็มแถว */
    .tbl-cards tbody td.tc-actions > button:only-child,
    .tbl-cards tbody td.tc-actions > form:only-child > button { flex: 1 1 100%; }

    /* แถวว่าง "ไม่พบข้อมูล" — ไม่ต้องแปลงเป็นการ์ด */
    .tbl-cards tbody td[colspan] {
        display: block; text-align: center; border-bottom: 0;
    }
    .tbl-cards tbody td[colspan]::before { display: none; }
}


/* ============================================================
   Sidebar กลาง (ย้ายมาจาก admin/_sidebar.php)
   ปลอดภัยที่จะอยู่ในไฟล์กลาง เพราะทุกคลาสขึ้นต้นด้วย app-
   ซึ่งมีเฉพาะใน markup ของ _sidebar.php หน้าที่ไม่ได้ include
   จึงไม่มี element ไหนตรงกับกฎเหล่านี้เลย
   ============================================================ */
/* ===== Time Optic Admin Sidebar (shared) ===== */
:root { --app-sb-w: 260px; }

/* Mobile top bar */
.app-topnav {
    display: none; position: sticky; top: 0; z-index: 1100;
    background: #0f172a; padding: 0 16px; height: 56px;
    align-items: center; justify-content: space-between;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.app-topnav .app-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; font-weight: 700; }
.app-topnav .app-brand .app-tico {
    width: 34px; height: 34px; background: linear-gradient(135deg,#6366f1,#3b82f6);
    border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff;
}
.app-topnav .app-tnact { display: flex; align-items: center; gap: 6px; }
.app-tnbtn {
    width: 38px; height: 38px; border-radius: 10px; border: none; cursor: pointer; font-size: 17px;
    display: flex; align-items: center; justify-content: center; transition: all .2s;
    background: rgba(255,255,255,.1); color: #fff; text-decoration: none;
}
.app-tnbtn:hover { background: rgba(255,255,255,.2); }
.app-tnbtn.app-logout { background: rgba(239,68,68,.15); color: #f87171; }
.app-tnbtn.app-logout:hover { background: #ef4444; color: #fff; }

/* Overlay */
.app-overlay {
    display: none; position: fixed; inset: 0; background: rgba(15,23,42,.6);
    backdrop-filter: blur(3px); z-index: 1099; opacity: 0; transition: opacity .3s;
}
.app-overlay.show { display: block; opacity: 1; }

/* Sidebar */
.app-side {
    width: var(--app-sb-w); background: #0f172a; color: #fff;
    position: fixed; top: 0; left: 0; height: 100vh;
    display: flex; flex-direction: column; z-index: 1100;
    transition: transform .3s cubic-bezier(.4,0,.2,1); box-shadow: 4px 0 24px rgba(0,0,0,.18); overflow: hidden;
}
.app-side .app-sbrand {
    padding: 22px 18px 20px; display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.app-side .app-slogo {
    width: 42px; height: 42px; flex-shrink: 0; background: linear-gradient(135deg,#6366f1,#3b82f6);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff; box-shadow: 0 4px 10px rgba(99,102,241,.45);
}
.app-side .app-sname h3 { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0; }
.app-side .app-sname p  { color: #94a3b8; font-size: 11px; font-weight: 300; margin: 2px 0 0; }

.app-side .app-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.app-side .app-nav::-webkit-scrollbar { width: 3px; }
.app-side .app-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }
.app-side .app-navsec {
    padding: 14px 18px 5px; font-size: 10px; font-weight: 700; color: #475569;
    text-transform: uppercase; letter-spacing: 1.5px;
}
.app-side .app-nav a {
    display: flex; align-items: center; gap: 10px; color: #94a3b8;
    padding: 10px 18px; font-size: 14px; font-weight: 400; text-decoration: none;
    border-left: 3px solid transparent; transition: all .18s ease; white-space: nowrap;
}
.app-side .app-nav a i { font-size: 15px; width: 20px; flex-shrink: 0; opacity: .75; text-align: center; }
.app-side .app-nav a:hover  { background: rgba(255,255,255,.06); color: #e2e8f0; border-left-color: #475569; }
.app-side .app-nav a:hover i { opacity: 1; }
.app-side .app-nav a.active  { background: rgba(99,102,241,.18); color: #a5b4fc; border-left-color: #6366f1; font-weight: 600; }
.app-side .app-nav a.active i { opacity: 1; color: #818cf8; }

.app-side .app-sfoot { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
.app-side .app-out {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(239,68,68,.1); color: #f87171 !important; padding: 10px; border-radius: 10px;
    font-weight: 500; font-size: 13.5px; border: 1px solid rgba(239,68,68,.2); transition: all .25s; text-decoration: none;
}
.app-side .app-out:hover { background: #ef4444; color: #fff !important; border-color: #ef4444; }

/* Mobile behaviour */
@media (max-width: 992px) {
    .app-topnav { display: flex; }
    .app-side { transform: translateX(-100%); }
    .app-side.show { transform: translateX(0); }
}