/*
 * hub_ui.css — Template กลางฝั่งหน้าบ้าน (member-facing)
 * รวบรวม design token + component ที่ใช้ซ้ำในหน้าที่ทำมาแล้ว
 * (privilege/Privilege_redeem_detail.php, event/Event_history_detail.php, profile/history/Index.php)
 * เพื่อให้หน้าใหม่เรียกใช้ต่อได้ และค่อย ๆ ทำให้ทุกหน้าไปในทิศทางเดียวกัน
 *
 * กฎเหล็ก: ทุก selector ในไฟล์นี้ต้องขึ้นต้นด้วย .hub- เท่านั้น (รวม nested/descendant
 * selector ก็ต้องมี .hub- อยู่ในนั้น) เพราะไฟล์นี้ถูกโหลดพร้อมกับ CSS เดิมของหน้าอื่น ๆ
 * ห้ามเขียน selector กว้าง เช่น .card, body, a เพราะจะกระทบทุกหน้าในไซต์
 *
 * ห้าม hardcode สีธีม/มุมปุ่ม ใช้ var(--theme-color-primary) และ var(--border-radius-button)
 * เสมอ (มี fallback ให้ เผื่อ tenant ไหนไม่ได้ประกาศตัวแปรไว้)
 */

/* ─────────────────────────────────────────────────────────
   Design tokens (สี/ระยะห่างมาตรฐาน อ้างอิงจาก 3 หน้าที่ทำไปแล้ว)
   ไม่ใช้ :root เปล่า ๆ เพราะจะกลายเป็น global — ผูกไว้ใต้ .hub-scope แทน
   ใช้ได้โดยห่อ wrapper ของหน้าด้วย class .hub-scope (ดูตัวอย่างการใช้งานด้านล่าง)
   ───────────────────────────────────────────────────────── */
.hub-scope {
    --hub-text-main: #1e293b;
    --hub-text-sub: #64748b;
    --hub-text-faint: #94a3b8;
    --hub-border: #eef0f3;
    --hub-border-2: #f1f5f9;
    --hub-point-earn: #16a34a;
    --hub-point-burn: #dc2626;
    /* ขนาดตัวอักษรมาตรฐาน (ผู้ใช้ส่วนมากเป็นผู้สูงอายุ อ่านตัวเล็กยาก)
       ใช้เป็น token ให้หน้าใหม่เรียกใช้ต่อ ไม่ไปแก้ค่าเดิมของ selector .hub- ที่มีอยู่แล้ว
       เพื่อไม่ให้หน้าที่ใช้อยู่ (privilege redeem detail / event history detail / profile history) เพี้ยน */
    --hub-font-size-title: 19px;   /* ชื่อกิจกรรม/รายการ */
    --hub-font-size-body: 15px;    /* รายละเอียด เช่น วันที่ */
    --hub-font-size-icon: 14px;    /* ไอคอนประกอบข้อความรายละเอียด */
    --hub-text-sub-strong: #475569; /* แทน #94a3b8 เดิมที่คอนทราสต์ต่ำไป สำหรับผู้สูงอายุ */
}

/* ─────────────────────────────────────────────────────────
   Wrapper กลางหน้า — max-width 560px, จัดกลาง
   ───────────────────────────────────────────────────────── */
.hub-wrap { max-width:560px; margin:0 auto; }

/* ─────────────────────────────────────────────────────────
   การ์ดขาวมาตรฐาน (อ้างอิง .prd-card / .ehd-card)
   ───────────────────────────────────────────────────────── */
.hub-card {
    background:#fff; border:1px solid #eef0f3; border-radius:18px;
    box-shadow:0 2px 16px rgba(0,0,0,.05); overflow:hidden;
}
.hub-card-body { padding:20px 18px; }
@media (max-width:400px) { .hub-card-body { padding:16px 14px; } }

/* ─────────────────────────────────────────────────────────
   Topbar ปุ่มย้อนกลับ (มือถือ/แท็บเล็ต <992px) — อ้างอิง .ehd-topbar / .ehd-back
   วิธีใช้: ครอบหน้าด้วย .hub-page แล้วสลับ breadcrumb <-> topbar ที่จุดเดียว
   .hub-page .breadcrumb { display:none } ใน media query <=991.98px ของหน้านั้น ๆ
   ───────────────────────────────────────────────────────── */
.hub-topbar {
    display:none; align-items:center; gap:10px;
    padding:12px 16px; background:#fff;
    border-bottom:1px solid #f1f5f9;
    position:sticky; top:0; z-index:60;
    box-shadow:0 1px 6px rgba(0,0,0,.06);
}
@media (max-width:991.98px) { .hub-topbar { display:flex; } }
.hub-back {
    width:36px; height:36px; border-radius:50%; border:1.5px solid #e2e8f0;
    background:#fff; display:flex; align-items:center; justify-content:center;
    color:#64748b; font-size:15px; cursor:pointer; text-decoration:none; flex-shrink:0;
}
.hub-back:hover { background:#f1f5f9; text-decoration:none; }
.hub-topbar-title {
    font-size:16px; font-weight:700; color:#1e293b; flex:1;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ─────────────────────────────────────────────────────────
   แถว label / value (อ้างอิง .prd-row / .ehd-row)
   ───────────────────────────────────────────────────────── */
.hub-row {
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
    gap:6px 10px; padding:9px 0; border-bottom:1px solid #f1f5f9; font-size:15px;
}
.hub-row:last-child { border-bottom:none; }
.hub-row-lb { flex:0 0 auto; max-width:50%; color:#64748b; font-weight:600; }
.hub-row-val { flex:1 1 auto; min-width:120px; text-align:right; font-weight:600; color:#1e293b; word-break:break-word; }

/* ─────────────────────────────────────────────────────────
   หัวข้อหน้า/การ์ด — ห้ามใช้ .card-title เดิม (fix height 47px + ตัดข้อความ)
   ───────────────────────────────────────────────────────── */
.hub-title {
    font-size:20px; font-weight:700; color:#1e293b; line-height:1.35;
    margin:0 0 6px; word-break:break-word;
}
@media (max-width:575.98px) { .hub-title { font-size:18px; } }

/* ─────────────────────────────────────────────────────────
   สีคะแนนได้รับ/ใช้ไป — สื่อความหมายบวก/ลบตายตัว ไม่ผูกกับสีธีม
   ───────────────────────────────────────────────────────── */
.hub-point-earn { color:var(--hub-point-earn, #16a34a) !important; }
.hub-point-burn { color:var(--hub-point-burn, #dc2626) !important; }

/* ─────────────────────────────────────────────────────────
   ปุ่มหลัก / ปุ่มขอบ (ธีมสี/มุมต้องอิง tenant เสมอ)
   ───────────────────────────────────────────────────────── */
.hub-btn-primary {
    border:none; background:var(--theme-color-primary); color:#fff;
    border-radius:var(--border-radius-button, 10px); padding:13px 30px;
    font-size:16px; font-weight:700; cursor:pointer; width:100%;
}
.hub-btn-outline {
    border:1.5px solid var(--theme-color-primary); background:#fff; color:var(--theme-color-primary);
    border-radius:var(--border-radius-button, 10px); padding:8px 20px;
    font-size:14px; font-weight:600; cursor:pointer;
}

/* ─────────────────────────────────────────────────────────
   การ์ดรายการแนวนอน (อ้างอิง .ph-item ของ profile/history)
   ───────────────────────────────────────────────────────── */
.hub-item {
    display:flex; align-items:flex-start; gap:14px;
    background:#fff; padding:14px 16px; border-bottom:1px solid #eef0f3;
}
@media (max-width:400px) { .hub-item { padding:14px 12px; gap:12px; } }
.hub-item:last-child { border-bottom:none; }
.hub-item-name { font-size:16px; color:#1e293b; font-weight:700; line-height:1.4; word-break:break-word; }
.hub-item-date { font-size:13px; color:#64748b; margin-top:4px; display:flex; align-items:center; gap:5px; }

/* ─────────────────────────────────────────────────────────
   ชื่อการ์ด grid ตัด 2 บรรทัดเสมอ (กันการ์ดสูงไม่เท่ากัน)
   ───────────────────────────────────────────────────────── */
.hub-clamp-2 {
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; word-break:break-word;
}

/* ─────────────────────────────────────────────────────────
   ป้ายชื่อระดับสมาชิก (tier label) — อ่านง่าย ไม่ยัดใน badge เล็ก
   ───────────────────────────────────────────────────────── */
.hub-tier-label {
    display:inline-flex; align-items:center; gap:7px;
    font-size:16px; font-weight:700; color:#fff;
    background:var(--theme-color-primary); border:none;
    border-radius:999px; padding:7px 18px;
    margin-bottom:10px;
}

/* ============================================================
   Slider ปลดล็อกสำหรับพนักงาน (.block-btn-emp + input.pullee)
   ------------------------------------------------------------
   markup มาจาก controller (getFormPrivilegeShow / getFormPrivilegeCode)
   แล้วถูกยัดเข้า modal ของหน้าไหนก็ได้ ดังนั้น CSS ต้องอยู่ส่วนกลาง
   เดิมเขียนซ้ำไว้ในไฟล์ view แต่ละหน้า ทำให้หน้าใหม่ที่ลืมก๊อปมา
   slider กลายเป็น input range ดิบของเบราว์เซอร์ (เล็กจิ๋ว)
   ไม่ได้ตั้งชื่อขึ้นต้น .hub- เพราะต้อง match markup เดิมที่แก้ไม่ได้
   ============================================================ */
.block-btn-emp {
    position: relative; background: #f0f0f0; border-radius: 50px;
    padding: 5px; height: 60px; display: flex; align-items: center;
    overflow: hidden; border: 1px solid #ddd;
}
input[type=range].pullee {
    -webkit-appearance: none; appearance: none;
    position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
    width: calc(100% - 10px); height: 50px;
    background: transparent; outline: none; margin: 0; padding: 0;
    border: none; z-index: 2; cursor: pointer;
}
input[type=range].pullee::-webkit-slider-runnable-track { height: 50px; background: transparent; border: none; }
input[type=range].pullee::-moz-range-track { height: 50px; background: transparent; border: none; }
input[type=range].pullee::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    height: 50px; width: 50px; border-radius: 50%; border: none;
    background: var(--theme-color-primary); box-shadow: 0 2px 5px rgba(0,0,0,.2); cursor: grab;
}
input[type=range].pullee::-moz-range-thumb {
    height: 50px; width: 50px; border-radius: 50%; border: none;
    background: var(--theme-color-primary); box-shadow: 0 2px 5px rgba(0,0,0,.2); cursor: grab;
}
input[type=range].pullee::-webkit-slider-thumb:active { cursor: grabbing; }
input[type=range].pullee::-moz-range-thumb:active { cursor: grabbing; }
.block-btn-emp label {
    width: 100%; text-align: center; color: #888; font-size: 14px;
    z-index: 1; user-select: none; margin-bottom: 0;
}