/* ===== ธีมส้ม-ดำ-ขาว: กรอบเหลี่ยมทั้งหมด (ตัดความมน) ===== */
*, *::before, *::after { border-radius: 0 !important; }

/* ===== ปุ่มมาตรฐาน (ธีมส้ม, เหลี่ยม) ใช้ได้แม้ Tailwind ไม่โหลด ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
       padding:9px 16px; font-size:.875rem; font-weight:600; line-height:1.2;
       cursor:pointer; border:2px solid transparent; transition:all .15s; text-decoration:none; text-align:center; }
.btn-primary { background:#EE5A0E; color:#fff; }
.btn-primary:hover { background:#C24D08; }
.btn-outline { background:#fff; color:#A93E07; border-color:#EE5A0E; }
.btn-outline:hover { background:#FFF3EA; }
.btn-ghost { background:#fff; color:#44403C; border-color:#D6D3D1; }
.btn-ghost:hover { background:#F5F5F4; }
.btn-block { width:100%; }
.field-select { width:100%; padding:9px 12px; font-size:.875rem; font-weight:500;
       border:2px solid #D6D3D1; background:#fff; cursor:pointer; }
.field-select:focus { outline:none; border-color:#EE5A0E; }

.auth-card {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .role-btn.active {
        background: linear-gradient(135deg, #EE5A0E 0%, #C24D08 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(210,77,8, 0.3);
    }
        body { box-sizing: border-box; font-family: 'Kanit', sans-serif; }
        html, body, #app-wrapper { height: 100%; width: 100%; }
        #app-wrapper { overflow-y: auto; }
        
        .skill-card { transition: all 0.3s ease; cursor: pointer; }
        .skill-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
        .skill-card.selected { border-color: #EE5A0E !important; background-color: #FFF3EA; box-shadow: 0 0 0 3px #FFC79E, 0 4px 6px rgba(0, 0, 0, 0.05); }
        .fade-in { animation: fadeIn 0.5s ease-in; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; overflow-y: auto; }
        .modal.active { display: flex; align-items: center; justify-content: center; }
        .modal-content { background: white; border-radius: 16px; max-width: 900px; width: 90%; max-height: 90%; overflow-y: auto; position: relative; margin: 20px; }
        
        .quiz-modal-content { max-width: 700px; }
        
        .toast { position: fixed; bottom: 20px; right: 20px; padding: 16px 24px; border-radius: 8px; color: white; font-weight: 500; z-index: 2000; animation: slideIn 0.3s ease-out; }
        @keyframes slideIn { from { transform: translateX(400px); } to { transform: translateX(0); } }
        
        .progress-bar { transition: width 0.8s ease-out; }
        .nav-tab { cursor: pointer; transition: all 0.3s ease; }
        .nav-tab.active { border-bottom: 3px solid #EE5A0E; color: #EE5A0E; font-weight: 600; }
        
        .quiz-option { cursor: pointer; transition: background-color 0.2s; }
        .quiz-option:hover { background-color: #f3f4f6; }
        .quiz-option.selected { background-color: #FFE0C7; border-color: #EE5A0E; }

        /* Profile Specific Styles */
        .profile-pic {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 50%;
            border: 4px solid #EE5A0E;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            cursor: pointer;
        }
        /* Tooltip แสดงรายละเอียดเพิ่มเติมเมื่อเอาเมาส์ไปวาง */
        .info-card {
            position: relative;
            cursor: help;
            transition: all 0.2s ease;
        }
        .info-card:hover {
            background-color: #FFF3EA !important;
            border-left-color: #EE5A0E !important;
            transform: translateX(3px);
        }
        .info-tooltip {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            bottom: calc(100% + 10px);
            left: 0;
            right: 0;
            background-color: #1f2937;
            color: #ffffff;
            padding: 12px 14px;
            border-radius: 8px;
            font-size: 0.8rem;
            line-height: 1.6;
            box-shadow: 0 8px 20px rgba(0,0,0,0.25);
            transition: opacity 0.2s ease, visibility 0.2s ease;
            z-index: 50;
            pointer-events: none;
        }
        .info-tooltip::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 24px;
            border-width: 6px;
            border-style: solid;
            border-color: #1f2937 transparent transparent transparent;
        }
        .info-card:hover .info-tooltip {
            visibility: visible;
            opacity: 1;
        }
        .info-hint {
            font-size: 0.7rem;
            color: #EE5A0E;
            margin-top: 4px;
        }
        /* === โค้ดระบบ Auth สำหรับควบคุมการซ่อน/แสดง และการตกแต่งหน้าล็อกอิน === */
    .hidden-section { 
        display: none !important; 
    }
    .auth-card {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    }
    .role-btn.active {
        background: linear-gradient(135deg, #EE5A0E 0%, #C24D08 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(210,77,8, 0.3);
    }
/* ============================================================
   รองรับมือถือ (Responsive) — ทำงานเฉพาะจอกว้าง ≤ 640px เท่านั้น
   จอคอม/แท็บเล็ตแสดงผลเหมือนเดิมทุกอย่าง 100%
   ============================================================ */
@media (max-width: 640px) {
    /* กันเนื้อหาล้นแนวนอน (เลื่อนซ้าย-ขวา) */
    html, body, #app-wrapper { overflow-x: hidden !important; max-width: 100% !important; }

    /* ลดระยะขอบของการ์ด/กล่องให้พอดีจอเล็ก */
    .p-6 { padding: 1rem !important; }
    .p-8 { padding: 1.25rem !important; }

    /* กล่อง Modal ให้พอดีจอมือถือ */
    .modal-content { width: 94% !important; margin: 10px !important; max-height: 92% !important; }
    .quiz-modal-content { max-width: 94% !important; }

    /* ล้างความกว้างคงที่ที่ทำให้ล้นจอ (เฉพาะมือถือ) */
    [style*="min-width:340px"] { min-width: 0 !important; width: 100% !important; }
    [style*="min-width:260px"] { min-width: 0 !important; }
    [style*="min-width:240px"] { min-width: 0 !important; }
    [style*="min-width:150px"] { min-width: 0 !important; }
    .skill-level-select { min-width: 0 !important; width: 100% !important; }

    /* รูปประกาศงาน / รูปในการ์ด ให้เต็มความกว้าง ไม่ดันจอ */
    [style*="width:180px"] { width: 100% !important; height: auto !important; max-width: 100% !important; }

    /* คอลัมน์ปุ่ม (ฝั่งบริษัท) ให้เต็มความกว้างเรียงลงมา */
    [style*="width:190px"] { width: 100% !important; }

    /* แถวแนวนอนให้ตัดบรรทัดลงมาบนมือถือ */
    #job-listings-container > div > .flex,
    .flex.items-start,
    .flex.gap-6,
    .flex.gap-4 { flex-wrap: wrap !important; }

    /* กริด 2–4 คอลัมน์ → เหลือ 1 คอลัมน์บนมือถือ */
    [class*="grid-cols-2"],
    [class*="grid-cols-3"],
    [class*="grid-cols-4"] { grid-template-columns: 1fr !important; }

    /* ตารางให้เลื่อนแนวนอนได้ในตัว ไม่ดันทั้งหน้า */
    table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* แถบแท็บเมนูให้เลื่อนแนวนอนได้ถ้ายาวเกิน */
    .nav-tabs, nav .flex { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ปุ่มที่ยาวให้พอดีจอ */
    .btn { white-space: normal; }
}

/* จอเล็กมาก (≤ 380px) ลดขนาดตัวอักษรหัวข้อลงเล็กน้อย */
@media (max-width: 380px) {
    .text-2xl { font-size: 1.35rem !important; }
    .text-xl { font-size: 1.15rem !important; }
}