html, body { font-family: 'Sarabun', 'Segoe UI', Roboto, sans-serif; margin: 0; }

#blazor-error-ui {
    color-scheme: light;
    background: #ffd7d7;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .8rem 1.2rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---- Auth pages (static, no MudBlazor interactivity) ---- */
.auth-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2e7d32, #1b5e20); padding: 1rem;
}
.auth-card {
    background: #fff; border-radius: 14px; padding: 2rem; width: 100%; max-width: 380px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.auth-title { margin: 0; font-size: 1.6rem; color: #1b5e20; text-align: center; }
.auth-sub { margin: .25rem 0 1.5rem; text-align: center; color: #666; }
.auth-card label { display: block; font-size: .85rem; margin: .75rem 0 .25rem; color: #444; }
.auth-card input, .auth-input {
    width: 100%; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid #ccc;
    border-radius: 8px; font-size: 1rem;
}
.auth-btn {
    width: 100%; margin-top: 1.2rem; padding: .7rem; border: 0; border-radius: 8px;
    background: #2e7d32; color: #fff; font-size: 1rem; cursor: pointer;
}
.auth-btn:hover { background: #1b5e20; }
.auth-error {
    background: #ffebee; color: #c62828; padding: .6rem .8rem; border-radius: 8px;
    font-size: .9rem; margin-bottom: .5rem;
}
/* checkbox "แสดงรหัสผ่าน" — ต้องไม่กินความกว้างเต็มแถวตามกฎ .auth-card input */
.auth-check { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .85rem; color: #444; }
.auth-check input[type="checkbox"] { width: auto; }
.auth-foot { text-align: center; margin-top: 1.2rem; font-size: .9rem; }
.auth-foot a { color: #2e7d32; }
.validation-message { color: #c62828; font-size: .8rem; }

/* h1 ที่ซ้อนใน MudText (ใช้เพื่อ FocusOnNavigate) ต้องรับขนาดจาก MudText ไม่ใช่ default ของ browser */
.mud-typography h1 { font-size: inherit; font-weight: inherit; margin: 0; display: inline; }

/* ---- Responsive: มือถือ ---- */
/* ชื่อแอปใน AppBar ไม่ให้ตัดบรรทัด */
.mud-appbar .app-title { white-space: nowrap; }
@media (max-width: 600px) {
    .hide-xs { display: none !important; }
}
/* ช่องกรอกที่วางคู่กันใน dialog -> ยืดเต็มและ wrap ลงบรรทัดใหม่บนจอแคบ */
.mud-dialog-content .d-flex.gap-2 { flex-wrap: wrap; }
.mud-dialog-content .d-flex.gap-2 > * { flex: 1 1 150px; min-width: 150px; }

/* ---- ลดความรก/แน่นของฟอร์ม ---- */
/* label ของช่องกรอก: ทำให้จางลง (เทา) เพื่อแยกออกจากค่าที่กรอก (ดำ) ชัดเจน
   สถานะ focus (เขียว) และ error (แดง) ยังคุมด้วยกฎเฉพาะของ MudBlazor เอง */
.mud-input-label { color: #9e9e9e; font-weight: 400; }

/* เพิ่มระยะห่างระหว่างช่องกรอกที่เรียงกันในกล่อง dialog เพื่อไม่ให้อัดกันเป็นพืด */
.mud-dialog-content .mud-input-control { margin-bottom: .5rem; }
.mud-dialog-content .d-flex.gap-2 .mud-input-control { margin-bottom: 0; }

/* หัวหน้า (ชื่อหน้า + ปุ่มเพิ่ม) ให้ห่อบรรทัดบนจอเล็ก ไม่ให้ปุ่มหลุดขอบ */
@media (max-width: 600px) {
    .d-flex.justify-space-between { flex-wrap: wrap; gap: .5rem; }
    .mud-table-container { overflow-x: auto; }
}