/* ═══════════════════════════════════════════════════════════════════════════
   STATUS PILL → สถานะแบบกะทัดรัด (ไอคอน + ข้อความสี) ทั้งระบบ
   ═══════════════════════════════════════════════════════════════════════════
   ผู้ใช้ตัดสินใจ 2026-09-29: เลิกใช้ pill (พื้นสี + กรอบ + padding) เพราะเปลืองเนื้อที่และไม่สวย ทุกสี
   ไม่ใช่แค่ --success - เหลือแค่ไอคอนนำหน้า + ข้อความสีตามสถานะ

   .status-pill ถูกนิยามซ้ำใน admin-core.css / admin-finance.css / admin-tables.css และใน <style> ของ
   หลายสิบหน้า (บางหน้ามี modifier ของตัวเอง เช่น .status-pill.pending, .sp-active, --invoiced) ไฟล์นี้จึง
   ครอบทับทุกที่จากจุดเดียว: selector นำหน้าด้วย "html body" ให้ specificity สูงกว่ากฎเดิมทุกตัว และ
   !important เฉพาะคุณสมบัติกล่อง (พื้น/กรอบ/padding/เงา) ที่ต้องหายไปแน่ๆ - ไม่ใส่ !important ที่ display
   เพราะจะทับ .d-none/.d-md-* ของ Bootstrap
   โหลดใน layouts/admin และ layouts/property (ทั้งคู่มี bootstrap-icons ที่ใช้เป็นไอคอน)

   ใช้ใหม่: <span class="status-pill status-pill--success">ชำระแล้ว</span> เหมือนเดิม ไม่ต้องแก้ markup
   ═══════════════════════════════════════════════════════════════════════════ */

html body .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
}

/* ค่าเริ่มต้น (modifier ของแต่ละหน้าที่ไม่มีไอคอนประจำ): จุดสีเดียวกับข้อความ */
html body .status-pill::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 1;
    flex-shrink: 0;
}

/* pill ที่มีไอคอน <i> ของตัวเองอยู่แล้ว - ไม่เติมจุด/ไอคอนซ้ำ */
html body .status-pill:has(> i)::before {
    display: none;
}

html body .status-pill > i {
    font-size: 0.95em;
    line-height: 1;
}

/* ── ไอคอนประจำสถานะมาตรฐาน (bootstrap-icons) ── */
html body .status-pill--success::before,
html body .status-pill--invoiced::before,
html body .status-pill--warning::before,
html body .status-pill--warning-alt::before,
html body .status-pill--pending::before,
html body .status-pill--info::before,
html body .status-pill--danger::before {
    font-family: 'bootstrap-icons';
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    line-height: 1;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none !important;
    -webkit-font-smoothing: antialiased;
}

html body .status-pill--success::before,
html body .status-pill--invoiced::before { content: '\f633'; }      /* check-lg */
html body .status-pill--warning::before,
html body .status-pill--warning-alt::before,
html body .status-pill--pending::before { content: '\f291'; }       /* clock-fill */
html body .status-pill--info::before { content: '\f41f'; }          /* hourglass-split */
html body .status-pill--danger::before { content: '\f332'; }        /* exclamation-circle-fill */

/* ── สีข้อความ ── */
html body .status-pill--success { color: #15803d; }
html body .status-pill--invoiced { color: #035432; }
html body .status-pill--primary { color: #035432; }
html body .status-pill--warning,
html body .status-pill--pending { color: #b45309; }
html body .status-pill--warning-alt { color: #c2410c; }
html body .status-pill--info { color: #0369a1; }
html body .status-pill--danger { color: #b91c1c; }
html body .status-pill--secondary { color: #64748b; }
html body .status-pill--dark { color: #334155; }
html body .status-pill--indigo { color: #4338ca; }
html body .status-pill--purple { color: #6d28d9; }
html body .status-pill--custom { color: var(--pill-fg, #475569); }

/* สีจากฐานข้อมูล (สถานะทรัพย์ ฯลฯ ใส่ style="color:..." หรือ --custom) อาจอ่อนเกินไปเมื่อไม่มีพื้น (เช่น เหลือง
   #ffc107 ของ "จอง") - ให้ไอคอน/จุดเป็นสีสถานะ แต่ตัวหนังสือเป็นเทาเข้มอ่านออกเสมอ (-webkit-text-fill-color เปลี่ยน
   เฉพาะสีตัวอักษร ไม่เปลี่ยน currentColor ที่ไอคอนและจุดใช้) */
html body .status-pill--custom,
html body .status-pill[style*="color"] {
    -webkit-text-fill-color: #334155;
}

html body .status-pill--custom > i,
html body .status-pill[style*="color"] > i {
    -webkit-text-fill-color: currentColor;
}

/* modifier เฉพาะหน้าที่เดิมใช้เทาอ่อนบนพื้นเทา - ไม่มีพื้นแล้วต้องเข้มขึ้นให้อ่านออก */
html body .status-pill.inactive,
html body .status-pill.sp-inactive,
html body .status-pill.draft {
    color: #64748b;
}

/* บนแถบหัวสีเขียว (.page-header) - ข้อความ/ไอคอนสีขาว อ่านออกบนพื้นเขียว */
html body .page-header .status-pill,
html body .page-header .status-pill > i {
    color: rgba(255, 255, 255, 0.95);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95);
}