/* =============================================================================
   แท็บแนวนอนทุกแบบ กว้าง 100% แบ่งเท่ากัน (round 4c ข้อ 4 — Track #2)
   ต้นแบบ: console.thevirus theme.css หัวข้อ "แท็บ sub-navigation ด้านบน"

   ครอบทุกที่ที่ Filament วาด <nav class="fi-tabs">:
   - Tabs ในฟอร์ม/หน้า (Filament\Schemas\Components\Tabs → .fi-sc-tabs > .fi-tabs)
   - แท็บของตาราง (ListRecords::getTabs() — Filament ใช้ Tabs ตัวเดียวกัน key "resourceTabs")
   - sub-navigation ด้านบน (SubNavigationPosition::Top → .fi-page-sub-navigation-tabs)
   - แท็บที่วาดเองด้วย <x-filament::tabs> (เช่น /admin/product-attributes)
   แท็บแนวตั้ง (.fi-vertical) ไม่แตะ

   :not(.fi-invisible) — Tabs ของ schema วัดความกว้างแท็บด้วย JS (ซ่อนแท็บที่ล้นไว้ในเมนู "เพิ่มเติม")
   ตอนวัด nav มี class fi-invisible → ให้วัดจากความกว้างจริงของข้อความ ไม่ใช่ความกว้างที่ยืดแล้ว
   (ถ้ายืดตอนวัด ผลรวมเท่ากับความกว้างกล่องพอดี + ปัดเศษ → แท็บสุดท้ายถูกพับเข้าเมนูทั้งที่พอ)
   ============================================================================= */

.fi-tabs:not(.fi-vertical):not(.fi-invisible) {
    width: 100%;
}

/* ทุกช่องแบ่งพื้นที่เท่ากัน (4 แท็บ = 25/25/25/25) — ลูกตรงอาจเป็นปุ่มแท็บ หรือ dropdown ของกลุ่ม sub-navigation */
.fi-tabs:not(.fi-vertical):not(.fi-invisible) > * {
    flex: 1 1 0;
}

.fi-tabs:not(.fi-vertical):not(.fi-invisible) .fi-tabs-item,
.fi-tabs:not(.fi-vertical):not(.fi-invisible) > .fi-dropdown > .fi-dropdown-trigger {
    width: 100%;
    justify-content: center;
}

/* จอแคบ: ข้อความแท็บขึ้นบรรทัดใหม่ได้ ช่องยังเท่ากัน · แต่ละช่องกว้างอย่างน้อย 4.5rem ให้อ่านออก
   (4 แท็บที่จอ 390 ยังพอดี) — แท็บมากกว่านั้นเลื่อนแนวนอนในแถบเอง ไม่ล้นจอ
   (.fi-tabs ของ Filament เป็น overflow-x: auto + max-width: 100% อยู่แล้ว) */
@media (max-width: 639px) {
    .fi-tabs:not(.fi-vertical):not(.fi-invisible) > * {
        min-width: 4.5rem;
    }

    .fi-tabs:not(.fi-vertical):not(.fi-invisible) .fi-tabs-item {
        padding-inline: 0.5rem;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    .fi-tabs:not(.fi-vertical):not(.fi-invisible) .fi-tabs-item-label {
        overflow-wrap: anywhere;
    }
}