@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* =============================================================================
   PREMIUM — "Elevated Purple" design layer  (Batch 1: tokens + global elevation)
   โหลดหลัง style.css → override Tailwind utility ที่ทุกหน้าใช้อยู่ ยกระดับทั้งระบบ
   โดยไม่ต้องแก้ markup รายหน้า. แก้เฉพาะไฟล์นี้ (เพิ่มได้เรื่อยๆ) ปลอดภัยต่อ co-dev.
   ============================================================================= */

:root {
    /* brand */
    --brand-1: #7C3AED;          /* violet-600  */
    --brand-2: #4F46E5;          /* indigo-600  */
    --brand-1-rgb: 124, 58, 237;
    --brand-2-rgb: 79, 70, 229;
    --brand-grad: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
    --brand-grad-soft: linear-gradient(135deg, rgba(124,58,237,.10), rgba(79,70,229,.10));

    /* surfaces */
    --surface: #FFFFFF;
    --app-bg-1: #FBFAFF;
    --app-bg-2: #F3F2FB;
    --hairline: rgba(17, 24, 39, 0.07);

    /* elevation — เงานุ่มหลายชั้น โทน brand (ชัดขึ้นให้เห็นมิติจริง) */
    --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --shadow-md: 0 2px 6px -1px rgba(16,24,40,.08), 0 14px 28px -10px rgba(var(--brand-1-rgb),.22);
    --shadow-lg: 0 10px 20px -6px rgba(16,24,40,.12), 0 32px 60px -18px rgba(var(--brand-2-rgb),.32);
    --shadow-pop: 0 16px 34px -10px rgba(var(--brand-1-rgb),.42);

    /* shape */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --ring: 0 0 0 3px rgba(var(--brand-1-rgb), .22);

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---- typography & rendering ------------------------------------------------ */
body, button, input, select, textarea {
    font-family: 'IBM Plex Sans Thai', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3 { letter-spacing: -0.01em; }

/* ---- app background — subtle tint ให้การ์ดขาวเด่นขึ้น ---------------------- */
body.bg-gray-50 {
    background:
        radial-gradient(1000px 540px at 100% -8%, rgba(var(--brand-1-rgb), .16), transparent 60%),
        radial-gradient(900px 560px at -6% 6%, rgba(var(--brand-2-rgb), .13), transparent 58%),
        linear-gradient(180deg, #F4F2FF, #ECEAFB) !important;
    background-attachment: fixed !important;
}

/* ---- global elevation: ยก shadow/มุมโค้ง utility ที่ทุกหน้าใช้ ------------- */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow,
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl,
.shadow-2xl { box-shadow: var(--shadow-lg) !important; }
.rounded-xl { border-radius: var(--radius) !important; }
.rounded-2xl { border-radius: var(--radius-lg) !important; }

/* การ์ดสีขาว: ขอบบาง + พื้นโปร่งเล็กน้อย ให้คมแบบพรีเมียม + ยกตัวตอน hover */
.bg-white.rounded-xl,
.bg-white.rounded-2xl {
    border: 1px solid rgba(var(--brand-2-rgb), .10);
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(2px);
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.bg-white.rounded-xl.shadow-md:hover,
.bg-white.rounded-xl.shadow-lg:hover,
.bg-white.rounded-2xl.shadow-md:hover,
.bg-white.rounded-2xl.shadow-lg:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) !important; }

/* หัวข้อหน้า (h1) — ใหญ่ คม โทนเข้ม + เส้น accent ม่วงนำหน้า */
.p-8 > .mb-8 > h1,
h1.text-3xl { position: relative; padding-left: 16px; color: #1E1B4B; }
.p-8 > .mb-8 > h1::before,
h1.text-3xl::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 5px; border-radius: 6px; background: var(--brand-grad);
}

/* ---- top nav — gradient พรีเมียม + sticky blur ----------------------------- */
nav.bg-gradient-to-r.from-purple-600.to-blue-600 {
    background: var(--brand-grad) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 24px -10px rgba(var(--brand-2-rgb), .55) !important;
    backdrop-filter: saturate(140%);
}

/* ---- sidebar (markup มาจาก SideMenu.js ของ chat อื่น — style ผ่าน CSS ล้วน) */
#sidebar {
    background: rgba(255,255,255,.85) !important;
    backdrop-filter: blur(10px) saturate(140%);
    border-right: 1px solid var(--hairline);
    box-shadow: var(--shadow-md) !important;
}
.menu-item, .side-group { position: relative; font-weight: 500; }
.menu-item:hover, .side-group:hover { transform: translateX(2px); }

/* nested sidemenu (2-3 ชั้น) — chevron + collapse ลื่น (grid-rows trick) */
.side-chevron { transition: transform .2s var(--ease); }
.side-chevron.rotate-90 { transform: rotate(90deg); }
.side-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--ease); }
.side-sub > ul { overflow: hidden; min-height: 0; }
.side-sub.open { grid-template-rows: 1fr; }

/* active leaf — gradient + แถบ accent ขาว */
.menu-item.side-active {
    background: var(--brand-grad) !important;
    color: #fff !important;
    box-shadow: var(--shadow-pop) !important;
}
.menu-item.side-active i { color: #fff !important; }
.menu-item.side-active::before {
    content: ""; position: absolute; left: -2px; top: 20%; bottom: 20%;
    width: 4px; border-radius: 4px; background: #fff;
}

/* ---- ปุ่ม — transition + hover ยก + active กด ------------------------------ */
button, a.inline-block, label[for] {
    transition: transform .15s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease), background-color .2s var(--ease);
}
button:active { transform: translateY(1px); }

/* primary gradient buttons (ม่วง→น้ำเงิน) ทุกหน้าใช้รูปแบบนี้ */
.bg-gradient-to-r.from-purple-600.to-blue-600:not(nav):not(.menu-item) {
    background: var(--brand-grad) !important;
}
.bg-gradient-to-r.from-purple-600:hover,
.bg-gradient-to-r.from-pink-500:hover {
    filter: saturate(115%) brightness(1.03);
    box-shadow: var(--shadow-pop) !important;
    transform: translateY(-1px);
}

/* ---- inputs / select — focus ring พรีเมียม -------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--brand-1) !important;
    box-shadow: var(--ring) !important;
}
input, select, textarea { transition: border-color .15s var(--ease), box-shadow .2s var(--ease); }

/* ---- tables — header refinement + row hover ------------------------------- */
table thead tr.bg-gray-50,
table thead tr { background: linear-gradient(180deg, #FbFAFF, #F4F3FB) !important; }
table thead th { letter-spacing: .04em; }
table tbody tr { transition: background-color .15s var(--ease); }
table tbody tr:hover { background: var(--brand-grad-soft) !important; }

/* ---- modal (style.css มี .modal-content อยู่แล้ว — ยกระดับ) --------------- */
.modal-overlay { backdrop-filter: blur(4px); background: rgba(17,24,39,.45) !important; }
.modal-content {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--hairline);
    animation: premiumPop .28s var(--ease) !important;
}
@keyframes premiumPop {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- badges / pills — โค้งเต็ม + เงาบาง ----------------------------------- */
.rounded-full.bg-green-100,
.rounded-full.bg-red-100,
.rounded-full.bg-yellow-100,
.rounded-full.bg-blue-100,
.rounded-full.bg-purple-100 { box-shadow: var(--shadow-sm); font-weight: 600; }

/* ---- spinner / scrollbar — โทน brand -------------------------------------- */
.spinner { border-top-color: var(--brand-1) !important; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--brand-1-rgb),.45), rgba(var(--brand-2-rgb),.45)) !important;
    border-radius: 8px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(var(--brand-1-rgb),.7), rgba(var(--brand-2-rgb),.7)) !important;
}

/* ---- avatar ring บน topbar ------------------------------------------------ */
#tmAvatar1 { box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.18); }

/* ---- entrance: เนื้อหาหลัก fade ขึ้นเบาๆ ทุกครั้งที่เปลี่ยนหน้า ----------- */
#mainContent > * { animation: premiumFade .35s var(--ease); }
@keyframes premiumFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after { animation: none !important; transition: none !important; }
}

/* =============================================================================
   Batch 2 — component polish (CSS-only, cascade ผ่าน class ที่หน้าใช้อยู่)
   ============================================================================= */

/* KPI gradient stat cards (Dashboard) — แสง shine มุมบน + ความลึก */
.rounded-xl.bg-gradient-to-br { position: relative; overflow: hidden; }
.rounded-xl.bg-gradient-to-br::after {
    content: ""; position: absolute; top: -45%; right: -8%;
    width: 55%; height: 150%; transform: rotate(20deg); pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,255,255,.20), transparent 70%);
}
/* ตัวเลข KPI ใหญ่ — กระชับ tracking */
.rounded-xl.bg-gradient-to-br h3 { letter-spacing: -0.02em; }

/* การ์ดทางลัด (bg-white + hover:border) — ยกตัวตอน hover */
.bg-white.rounded-xl.hover\:shadow-xl:hover { transform: translateY(-3px); }

/* แถวรายการล่าสุด (bg-gray-50 rounded-lg) — hover เป็นโทน brand */
.bg-gray-50.rounded-lg { transition: background-color .15s var(--ease), transform .15s var(--ease); }
.bg-gray-50.rounded-lg:hover { background: var(--brand-grad-soft) !important; transform: translateX(2px); }

/* ปุ่ม secondary (border) — hover โทน brand บางๆ */
.border.border-gray-300:hover,
.border-2.border-gray-300:hover { border-color: rgba(var(--brand-1-rgb), .45) !important; }

/* ลิงก์ "ดูทั้งหมด" / action link — underline เลื่อนเข้า */
a.font-semibold[onclick] { transition: color .15s var(--ease); }

/* empty-state helper (ใช้ในแบตช์ถัดไปได้) */
.premium-empty { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:2.5rem 1rem; color:#9CA3AF; }
.premium-empty i { font-size:2.25rem; color:rgba(var(--brand-1-rgb), .35); }

/* skeleton shimmer (ใช้ใส่ class="skeleton" บน placeholder) */
.skeleton { position:relative; overflow:hidden; background:#EEF0F6; border-radius:8px; }
.skeleton::after {
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    transform: translateX(-100%); animation: skeletonSweep 1.3s infinite;
}
@keyframes skeletonSweep { to { transform: translateX(100%); } }