/**
 * oneui-shared.css
 * ----------------------------------------------------------------
 * Design-system กลางของระบบสวัสดิการ KN Connect ใช้ร่วมกันทุกหน้า
 * แทนที่ <style> ที่แต่ละหน้า copy/paste แยกกัน (ซึ่งค่อยๆ เพี้ยนไปคนละทาง)
 *
 * หมายเหตุ: ไฟล์นี้เป็น CSS ธรรมดา (ไม่ใช้ Tailwind theme() function)
 * เพราะ Tailwind Play CDN ไม่ประมวลผล theme() ในไฟล์ .css ภายนอก
 * ค่าสีด้านล่างต้องตรงกับ tailwind.config ใน oneui-shared.js เสมอ
 *
 * วิธีใช้: <link rel="stylesheet" href="oneui-shared.css"> ใน <head>
 * ก่อนปิด </head>, วางหลัง Tailwind CDN script ก็ได้ (ไม่ผูกกับ theme())
 */

/* ===== Base ===== */
body {
    background-color: #f8fafc;
    color: #1e293b;
    -webkit-tap-highlight-color: transparent;
}

.viewing-area {
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    transition: all 0.3s ease;
}

.v-hidden { display: none !important; }

/* ตัวเลขในตารางเรียงแนวเดียวกัน (เลขความกว้างเท่ากันทุกหลัก) */
table { font-variant-numeric: tabular-nums; }

/* ===== Card ===== */
.oneui-card {
    background-color: #ffffff;
    border-radius: 2rem;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08);
    border: 1px solid #f1f5f9;
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.oneui-card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.oneui-card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15); }

/* ===== Inputs ===== */
.custom-input {
    background-color: #f8fafc;
    border: 2px solid transparent;
    border-radius: 1rem;
    padding: 0.75rem 1.25rem;
    width: 100%;
    transition: all 0.3s;
    outline: none;
    color: #1e293b;
    font-size: 0.95rem;
}
.custom-input:focus {
    background-color: #ffffff;
    border-color: #d1fae5;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}
.custom-input[readonly],
.custom-input:disabled {
    background-color: #eef1f4;
    color: #64748b;
    cursor: not-allowed;
}

.tw-input-group { display: flex; align-items: stretch; border-radius: 1rem; overflow: hidden; border: 2px solid transparent; transition: all 0.3s; background-color: #f8fafc; }
.tw-input-group:focus-within { background-color: #ffffff; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1); border-color: #d1fae5; }
.tw-input-group-text { padding: 0.75rem 1rem; background-color: rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: center; font-weight: bold; }
.tw-input-group input { flex: 1; border: none; background: transparent; padding: 0.75rem 1rem; outline: none; font-size: 0.95rem; }

/* Inline field validation (แทน alert รวมเดียวสำหรับหลายช่อง) */
.field-invalid { border-color: #f87171 !important; background-color: #fef2f2 !important; }
.field-error-text { color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem; display: flex; align-items: center; gap: 4px; }
.field-error-text::before { content: "\26A0"; font-size: 0.7rem; }

/* ===== Status badges (ผูกกับความหมาย ไม่ผูกกับ string ภาษาไทยใน selector) ===== */
.status-badge { padding: 4px 12px; border-radius: 9999px; font-weight: 700; font-size: 0.75rem; white-space: nowrap; display: inline-block; }
.status-badge-success    { background-color: #d1fae5; color: #047857; }
.status-badge-warning    { background-color: #ffedd5; color: #c2410c; }
.status-badge-info       { background-color: #dbeafe; color: #1d4ed8; }
.status-badge-info-alt   { background-color: #e0f2fe; color: #0369a1; }
.status-badge-danger     { background-color: #ffe4e6; color: #be123c; }
.status-badge-danger-alt { background-color: #fee2e2; color: #b91c1c; }
.status-badge-purple     { background-color: #f3e8ff; color: #7e22ce; }
.status-badge-teal       { background-color: #ccfbf1; color: #0f766e; }
.status-badge-neutral    { background-color: #f1f5f9; color: #475569; }

/* ===== Touch targets ===== */
/* ปุ่มไอคอน: การันตี tap target ~44px ตามคำแนะนำ WCAG โดยไม่ต้องขยายไอคอนเอง */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    border-radius: 9999px;
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn-sm { min-width: 40px; min-height: 40px; }

/* ปุ่ม action ที่โผล่ตอน hover: บนทัชสกรีนไม่มี hover จึงต้องโชว์เสมอ
   ซ่อนได้เฉพาะอุปกรณ์ที่มีเมาส์จริง (hover: hover) */
.touch-reveal { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .touch-reveal { opacity: 0; transition: opacity 0.15s ease; }
    .group:hover .touch-reveal { opacity: 1; }
}

/* ===== Scroll affordance สำหรับตารางที่เลื่อนแนวนอน ===== */
.scroll-hint { position: relative; }
.scroll-hint::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
    background: linear-gradient(to left, rgba(248,250,252,0.95), rgba(248,250,252,0));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.scroll-hint.scroll-hint-end::after { opacity: 0; }
.dark .scroll-hint::after { background: linear-gradient(to left, rgba(15,23,42,0.95), rgba(15,23,42,0)); }

/* ===== Autocomplete (แทน <input list> ที่ iOS Safari แสดงผลไม่ดี) ===== */
.kn-autocomplete { position: relative; }
.kn-autocomplete-list {
    position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
    max-height: 240px; overflow-y: auto;
    background: #ffffff; border: 1px solid #f1f5f9; border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); padding: 0.375rem;
}
.kn-autocomplete-item { padding: 0.625rem 0.875rem; border-radius: 0.75rem; cursor: pointer; font-size: 0.9rem; }
.kn-autocomplete-item:hover, .kn-autocomplete-item.active { background: #d1fae5; }
.kn-autocomplete-empty { padding: 0.75rem; text-align: center; color: #64748b; font-size: 0.85rem; }

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== SweetAlert2 oneui theme ===== */
.swal-oneui-popup { border-radius: 2rem !important; padding: 1.5rem !important; box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; }
.swal-oneui-title { font-family: 'Sarabun', sans-serif !important; font-weight: 700 !important; }
.swal-oneui-confirm { border-radius: 999px !important; font-weight: 600 !important; font-family: 'Sarabun', sans-serif !important; }
.swal-oneui-cancel { border-radius: 999px !important; font-weight: 600 !important; font-family: 'Sarabun', sans-serif !important; }

/* ===== Print ===== */
/* แก้บั๊ก: .print-active (ใช้คู่กับ Tailwind .hidden) ไม่เคยถูก override ตอนพิมพ์ */
@media print {
    .print-active { display: block !important; }
    .no-print { display: none !important; }
}
