/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Layout ฝั่ง Admin — แถบเมนูใช้สไตล์ HUD เดียวกับฝั่งลูกค้าเป๊ะๆ (WebCustomer.UI/MainLayout.razor.css)
   ตามที่ผู้ใช้ขอ "ทำให้เหมือนกับของฝั่งลูกค้า ต่างแค่ชื่อปุ่มเมนู และรองรับมือถือแบบเดียวกัน"
   — Fixed + เบลอพื้นหลัง + หดตัวตอน Scroll + ธีมสว่าง/มืดตาม Token --cn-* (ประกาศใน brand.css ของ Admin
   ค่าเดียวกับฝั่งลูกค้า) ยกเลิกการตัดสินใจเดิมใน §41 ที่ให้ Topbar เป็นสีเข้มคงที่แบบ VS Code แล้ว */

.admin-shell[b-e82zstug8h] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--admin-shell-bg);
    /* สีตัวอักษรทั้งระบบสืบทอดจากจุดเดียวตรงนี้ (ชนะ body color ของ Bootstrap ที่เป็นสีเข้มคงที่)
       — หัวใจของธีมมืดทั้งระบบใน §46: เนื้อหาทุกหน้าได้สีตัวอักษรที่ถูกต้องตามธีมอัตโนมัติ */
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ===== Header (สไตล์ HUD — เหมือน .cn-hud-header ฝั่งลูกค้า) ===== */
.admin-topbar[b-e82zstug8h] {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background-color: color-mix(in srgb, var(--cn-bg) 82%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cn-border);
    transition: all 0.25s ease;
}

.admin-topbar.scrolled[b-e82zstug8h] {
    background-color: color-mix(in srgb, var(--cn-bg) 95%, transparent);
    box-shadow: var(--cn-shadow);
}

.topbar-inner[b-e82zstug8h] {
    /* ความกว้างแถบเมนู: จัดกึ่งกลางแบบมีระยะขอบสวยงามเหมือนฝั่งลูกค้า (ไม่ชิดขอบจอ) แต่ขยายเพดาน
       เป็น 1400px เพราะฝั่ง Admin มีของมากกว่า (เมนู 5 ปุ่ม + User Box + อีเมล) — 1200px เดิมทำให้
       เบียดกันจนเมนูตัวสุดท้ายโดนตัด / เต็มจอก็ดูโล่งแข็งเกินไป (ผู้ใช้ทดสอบแล้วทั้งสองแบบ)
       padding ใช้ clamp ยืดหยุ่นตามขนาดจอ: มือถือ 1.25rem → จอใหญ่ 2rem รองรับทุกอุปกรณ์ */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 2rem);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: height 0.25s ease;
}

.admin-topbar.scrolled .topbar-inner[b-e82zstug8h] {
    height: 54px;
}

/* ===== Brand (โลโก้ + ชื่อร้าน 2 บรรทัด) =====
   min-width: 0 สำคัญมาก: ยอมให้ฝั่งข้อความหดได้ (ตัดด้วย ellipsis) แทนที่จะดันของอื่นตกขอบจอ
   — บั๊กที่เจอตอนทดสอบจริง 320px: แบรนด์บรรทัดเดียว nowrap + flex-shrink:0 ดัน Hamburger หายไปนอกจอ */
.brand[b-e82zstug8h] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    min-width: 0;
}

/* โลโก้สลับตามธีม — ระบบเดียว รวมไว้ที่ไฟล์นี้ทั้งหมด (ขนาด + การซ่อน/แสดง) ตามบทเรียน §42
   ที่เคยเจอสองระบบชนกันจนโลโก้หายทั้งคู่ (brand.css ให้แค่ Animation ออร่าเรืองแสงอย่างเดียว) */
.brand-logo-light[b-e82zstug8h], .brand-logo-dark[b-e82zstug8h] {
    width: 45px; height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #fff; /* กันขอบใส */
}

.brand-logo-dark[b-e82zstug8h] { display: none; }

[data-theme="dark"] .brand-logo-light[b-e82zstug8h] { display: none; }
[data-theme="dark"] .brand-logo-dark[b-e82zstug8h] {
    display: inline-block;
    background-color: var(--cn-bg);
}

/* ชื่อร้านบรรทัดบน / Tagline บรรทัดล่าง (ทั้ง TH และ EN) — ตามที่ผู้ใช้ขอ
   แต่ละบรรทัด nowrap + ellipsis: จอแคบมากแค่ไหนก็ไม่ดัน Layout พัง แค่ตัดข้อความให้สั้นลงแทน */
.brand-text[b-e82zstug8h] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.25;
}

.brand-name[b-e82zstug8h] {
    color: var(--cn-yellow-deep);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-tagline[b-e82zstug8h] {
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cn-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Nav กลาง (Desktop) — ลิงก์จริงอยู่ใน NavMenu.razor(.css) =====
   ไม่ใส่ flex:1 เพื่อให้ Nav กว้างเท่าเนื้อหาแล้วถูกจัดกลางด้วย space-between ของ .topbar-inner
   (Layout สามกลุ่ม แบรนด์|เมนู|ปุ่ม แบบเดียวกับฝั่งลูกค้าเป๊ะ) min-width:0 ให้เมนูเลื่อนแนวนอนได้ถ้าล้น */
.topbar-nav[b-e82zstug8h] {
    display: none;
    min-width: 0;
}

/* ===== ปุ่มฝั่งขวา (Desktop) ===== */
.topbar-actions[b-e82zstug8h] {
    display: none;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ปุ่มระบบ (ภาษา/ธีม) — สไตล์เดียวกับ .cn-hud-btn ฝั่งลูกค้าเป๊ะ */
.admin-hud-btn[b-e82zstug8h] {
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    background-color: var(--cn-bg-alt);
    border: 1px solid var(--cn-border);
    color: var(--cn-fg-muted);
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    letter-spacing: 0.03em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: all 0.15s;
}

.admin-hud-btn:hover[b-e82zstug8h] {
    color: var(--cn-yellow-deep);
    border-color: var(--cn-yellow-deep);
}

.admin-lang-btn .lang-sep[b-e82zstug8h] { color: var(--cn-fg-muted); margin: 0 0.2rem; opacity: 0.5; }
.admin-lang-btn .lang-th[b-e82zstug8h], .admin-lang-btn .lang-en[b-e82zstug8h] { color: var(--cn-fg-muted); opacity: 0.5; transition: all 0.15s; }
.admin-lang-btn .lang-th.active[b-e82zstug8h], .admin-lang-btn .lang-en.active[b-e82zstug8h] { color: var(--cn-fg); opacity: 1; font-weight: 800; }

/* ===== User Box (ของเฉพาะฝั่ง Admin — ตำแหน่ง/เส้นคั่นแบบเดียวกับ .cn-hud-account ฝั่งลูกค้า) ===== */
.user-box[b-e82zstug8h] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.4rem;
    padding-left: 0.7rem;
    border-left: 1px solid var(--cn-border);
    color: var(--cn-fg);
    font-size: 0.9rem;
}

.user-box-text[b-e82zstug8h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.35;
    text-decoration: none;
    color: inherit;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.user-box-text:hover[b-e82zstug8h] { background-color: var(--cn-bg-alt); }

/* เน้นปุ่มดูข้อมูลบัญชีตอนกำลังเปิดหน้า /my-account อยู่ (Active State แบบเดียวกับปุ่มเมนู
   — ตามที่ผู้ใช้ขอ "เพิ่มเน้นปุ่มดูข้อมูลตอนดูหน้านี้") */
.user-box-text.is-active[b-e82zstug8h] { background-color: var(--cn-bg-alt); }
.user-box-text.is-active .user-name[b-e82zstug8h] { color: var(--cn-yellow-deep); font-weight: 700; }

/* อีเมลยาวๆ ตัดด้วย ellipsis กันเบียดพื้นที่เมนู (ชื่อเต็มยังดูได้จาก title/หน้า /my-account) */
.user-name[b-e82zstug8h] {
    font-size: 0.85rem;
    color: var(--cn-fg);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge ตำแหน่งของผู้ใช้ปัจจุบัน — รู้ทันทีว่ากำลัง Login ด้วยสิทธิ์ระดับไหน (ดู PROGRESS.md §36.4) */
.user-role-badge[b-e82zstug8h] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cn-yellow-deep);
}

/* ปุ่ม Icon (Logout) — สไตล์เดียวกับ .cn-hud-icon-btn ฝั่งลูกค้าเป๊ะ */
.admin-icon-btn[b-e82zstug8h] {
    width: 34px; height: 34px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid var(--cn-border);
    background-color: var(--cn-card); color: var(--cn-fg);
    text-decoration: none; font-size: 0.9rem;
    transition: all 0.15s;
}

.admin-icon-btn:hover[b-e82zstug8h] { border-color: var(--cn-fg-muted); }
.admin-icon-danger:hover[b-e82zstug8h] { background-color: #E05252; border-color: #E05252; color: #fff; }

/* ===== Hamburger (Mobile) — Animation กากบาทตอนเปิด แบบเดียวกับฝั่งลูกค้า ===== */
.admin-hamburger[b-e82zstug8h] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 34px; height: 34px;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.admin-hamburger span[b-e82zstug8h] {
    display: block;
    width: 22px; height: 2px;
    border-radius: 2px;
    background-color: var(--cn-fg);
    transition: transform 0.25s, opacity 0.25s;
}

.admin-hamburger.is-open span:nth-child(1)[b-e82zstug8h] { transform: translateY(7px) rotate(45deg); background-color: var(--cn-yellow-deep); }
.admin-hamburger.is-open span:nth-child(2)[b-e82zstug8h] { opacity: 0; }
.admin-hamburger.is-open span:nth-child(3)[b-e82zstug8h] { transform: translateY(-7px) rotate(-45deg); background-color: var(--cn-yellow-deep); }

/* ===== Mobile Slide-down Panel — แบบเดียวกับ .cn-hud-mobile-panel ฝั่งลูกค้า ===== */
.admin-mobile-panel[b-e82zstug8h] {
    position: fixed;
    top: 64px; left: 0; right: 0;
    z-index: 90;
    background-color: var(--cn-bg);
    border-bottom: 1px solid var(--cn-border);
    box-shadow: var(--cn-shadow);
    padding: 0.5rem 1rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transform: translateY(-120%);
    transition: transform 0.3s ease;
}

.admin-mobile-panel.is-open[b-e82zstug8h] {
    transform: translateY(0);
}

.admin-mobile-link[b-e82zstug8h] {
    display: flex; align-items: center; gap: 0.75rem;
    color: var(--cn-fg) !important;
    text-decoration: none !important;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--cn-border);
    font-size: 0.9rem;
    border-left: 3px solid transparent;
    transition: border-color 0.15s, background-color 0.15s, padding-left 0.15s;
}

/* Active State คำนวณจาก IsActive() ใน @code แบบเดียวกับฝั่งลูกค้า (Class "is-active" ตรงกันทั้งสองฝั่ง) */
.admin-mobile-link.is-active[b-e82zstug8h] {
    color: var(--cn-yellow-deep) !important;
    font-weight: 700;
    border-left-color: var(--cn-yellow);
    background-color: var(--cn-bg-alt);
    padding-left: 0.75rem;
}

.admin-mobile-toggles[b-e82zstug8h] {
    display: flex; gap: 0.5rem;
    margin-top: 0.75rem;
}

.admin-mobile-toggles .admin-hud-btn[b-e82zstug8h] {
    flex: 1;
    justify-content: center;
}

.admin-mobile-user[b-e82zstug8h] {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--cn-border);
}

.admin-mobile-user .user-box-text[b-e82zstug8h] { align-items: flex-start; }
.admin-mobile-logout[b-e82zstug8h] { color: #E05252; text-decoration: none; font-weight: 700; font-size: 0.85rem; }

/* ===== Desktop breakpoint =====
   ฝั่งลูกค้าใช้ 900px แต่ฝั่ง Admin มีทั้ง Nav 5 ปุ่ม + User Box + Badge ตำแหน่ง ตัวหนังสือภาษาอังกฤษ
   บางคำยาวกว่าไทยตอน Render จริง (เช่น "Staff Management") เลยขยับ Breakpoint กว้างขึ้นเป็น 960px
   กันของชนกัน/ล้นจอ (เหตุผลเดิมจาก §41-42) — โครงสร้าง/พฤติกรรมเหมือนฝั่งลูกค้าทุกอย่าง */
@media (min-width: 961px) {
    .topbar-nav[b-e82zstug8h] { display: flex; }
    .topbar-actions[b-e82zstug8h] { display: flex; }
    .admin-hamburger[b-e82zstug8h] { display: none; }
    .admin-mobile-panel[b-e82zstug8h] { display: none; }
}

/* ===== เนื้อหาหลัก ===== */
.admin-main[b-e82zstug8h] {
    flex: 1;
    padding-top: 64px; /* กันเนื้อหาโดน Header แบบ Fixed บัง (แบบเดียวกับ .site-main ฝั่งลูกค้า) */
}

.admin-content[b-e82zstug8h] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

#blazor-error-ui[b-e82zstug8h] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-e82zstug8h] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .admin-shell[b-e82zstug8h],
    .admin-topbar[b-e82zstug8h],
    .topbar-inner[b-e82zstug8h],
    .admin-mobile-panel[b-e82zstug8h],
    .admin-hamburger span[b-e82zstug8h] {
        transition: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* แถบเมนู Admin — สไตล์เดียวกับ .cn-hud-nav ของฝั่งลูกค้าเป๊ะๆ (จุดกลมเล็กหน้าเมนู + Active กระพริบ)
   ลิงก์เป็น <a> ธรรมดาใน NavMenu.razor (ไม่ใช่ NavLink) ทำให้ CSS Isolation จับได้ตรงๆ ไม่ต้องใช้ ::deep
   ⚠️ คง !important ที่ color/text-decoration ไว้ เพราะฝั่ง Admin โหลด Bootstrap ด้วย (บทเรียน §41-42) */
.admin-nav[b-i6x6qed9je] {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    /* รองรับเมนูที่อาจเพิ่มขึ้นในอนาคต: ไม่ตัดขึ้นบรรทัดใหม่ (กัน Header สูงเบิ้ลแบบที่เจอตอนทดสอบ EN)
       ถ้าเมนูยาวเกินพื้นที่ → เลื่อนแนวนอนได้แทน (ซ่อน Scrollbar ให้เนียนตา) ส่วนจอแคบ <961px
       MainLayout ซ่อน Nav นี้แล้วพับทุกลิงก์ลง Hamburger Panel ให้อยู่แล้ว */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}

.admin-nav[b-i6x6qed9je]::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */

.admin-nav a[b-i6x6qed9je] {
    position: relative;
    flex-shrink: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cn-fg-muted) !important;
    text-decoration: none !important;
    padding: 0.5rem 1rem 0.5rem 1.35rem;
    border-radius: 8px;
    transition: all 0.15s;
    white-space: nowrap;
}

/* จุดกลมเล็กหน้าเมนู — ภาษาภาพเดียวกับฝั่งลูกค้า (โผล่ตอน Hover / ค้างไว้ตอน Active) */
.admin-nav a[b-i6x6qed9je]::before {
    content: '';
    position: absolute;
    left: 0.5rem; top: 50%;
    transform: translateY(-50%) scale(0);
    width: 5px; height: 5px;
    border-radius: 50%;
    background-color: var(--cn-yellow);
    transition: transform 0.15s;
}

.admin-nav a:hover[b-i6x6qed9je] {
    color: var(--cn-fg) !important;
    background-color: var(--cn-bg-alt);
}

.admin-nav a:hover[b-i6x6qed9je]::before {
    transform: translateY(-50%) scale(1);
}

/* Active State: หน้าที่กำลังเปิดอยู่ — จุดค้างไว้ตลอด (ไม่ต้อง Hover) + กระพริบเบาๆ แบบเดียวกับจุดข้างโลโก้ */
.admin-nav a.is-active[b-i6x6qed9je] {
    color: var(--cn-yellow-deep) !important;
    background-color: var(--cn-bg-alt);
}

.admin-nav a.is-active[b-i6x6qed9je]::before {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 6px var(--cn-yellow);
    animation: cnAdminPulseGlow-b-i6x6qed9je 2s ease-in-out infinite;
}

/* Hover ปุ่มที่ Active อยู่แล้ว ให้ตอบสนองเด่นกว่าปุ่มอื่นนิดหน่อย เหมือนยืนยันซ้ำว่า "อยู่ตรงนี้แหละ" */
.admin-nav a.is-active:hover[b-i6x6qed9je]::before {
    transform: translateY(-50%) scale(1.4);
    animation-play-state: paused;
}

@keyframes cnAdminPulseGlow-b-i6x6qed9je {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--cn-yellow); }
    50% { opacity: 0.6; box-shadow: 0 0 14px var(--cn-yellow); }
}

/* คนที่ตั้งค่าเครื่องไม่ให้มี Animation (เช่นเวียนหัวง่าย) จะไม่เจอจุดกระพริบ เห็นแค่จุดนิ่งๆ แทน */
@media (prefers-reduced-motion: reduce) {
    .admin-nav a[b-i6x6qed9je] { transition: none; }
    .admin-nav a.is-active[b-i6x6qed9je]::before { animation: none; }
}