/* ============================================================
   Smart Form AI — Design System
   ============================================================ */

:root{
    /* Brand — soft periwinkle blue + violet-pink accent, matching the
       sidebar gradient and logo mark */
    --blue-600:#4a5fc9;   /* primary periwinkle-blue — buttons, links, icons */
    --blue-700:#3a4bb0;   /* darker blue — hover state */
    --blue-500:#7186d4;   /* lighter mid blue — gradients, secondary fills */
    --blue-100:#e3e6fb;   /* pale blue tint — focus rings */
    --blue-50:#f3f4fd;    /* near-white blue tint — icon backgrounds */

    --gold-600:#a6791f;   /* deep muted gold — readable on white (links, icons) */
    --gold-500:#c9a227;   /* mid gold — accents, borders */
    --gold-300:#e8cf7c;   /* light gold — subtle fills, active-state tint */

    /* Neutrals — warm paper tone instead of cool slate, ties to "document paper" */
    --ink-900:#171a24;
    --ink-700:#3a3f4f;
    --ink-500:#6b7080;
    --ink-400:#9a9fae;
    --ink-200:#e6e3d9;
    --ink-100:#f0eee5;
    --ink-50:#faf8f3;
    --white:#ffffff;

    /* Status */
    --green-600:#16a34a;
    --green-50:#f0fdf4;
    --red-600:#dc2626;
    --red-50:#fef2f2;
    --amber-600:#d97706;
    --amber-50:#fffbeb;

    /* Scale */
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-full:999px;

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:40px;
    --space-8:48px;

    --shadow-sm:0 1px 2px rgba(15,23,42,.06);
    --shadow-md:0 6px 20px rgba(15,23,42,.07);
    --shadow-lg:0 20px 45px rgba(15,23,42,.14);

    --sidebar-w:260px;
    --sidebar-w-collapsed:84px;
}

*{ box-sizing:border-box; }

html,body{
    margin:0;
    padding:0;
    font-family:"Kanit","Noto Sans Thai","Sarabun","Segoe UI",system-ui,-apple-system,sans-serif;
    background:var(--ink-50);
    color:var(--ink-900);
    -webkit-font-smoothing:antialiased;
}

a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; }

h1,h2,h3,h4{
    font-weight:600;
    letter-spacing:-.2px;
    line-height:1.3;
}

/* ---------------- Layout shell ---------------- */

.layout{
    display:flex;
    min-height:100vh;
}

.sidebar{
    width:var(--sidebar-w);
    flex:0 0 var(--sidebar-w);
    background: linear-gradient(165deg, #6377dc 0%, #7f8aee 52%, #a99cf3 100%);
    color:var(--white);
    display:flex;
    flex-direction:column;
    padding:var(--space-5) var(--space-4);
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    transition:width .28s cubic-bezier(.4,0,.2,1), flex-basis .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1);
    z-index:20;
}

.sidebar.collapsed{
    width:var(--sidebar-w-collapsed);
    flex-basis:var(--sidebar-w-collapsed);
    padding-left:var(--space-2);
    padding-right:var(--space-2);
}

.menu-text,
.logo-text{
    display:inline-block;
    max-width:200px;
    overflow:hidden;
    white-space:nowrap;
    opacity:1;
    transition:opacity .18s ease, max-width .25s ease, margin-left .25s ease;
}

.sidebar.collapsed .menu-text,
.sidebar.collapsed .logo-text{
    opacity:0;
    max-width:0;
    margin-left:0;
}

/* ระหว่างโหลดหน้า (คืนสถานะหุบ/กางจาก localStorage) ปิด transition
   ชั่วคราว ไม่ให้ไซด์บาร์เด้งอนิเมชันทุกครั้งที่เปลี่ยนหน้า */
.sidebar.no-anim,
.sidebar.no-anim .menu-text,
.sidebar.no-anim .logo-text{
    transition:none !important;
}

/* ---------- Tooltip ชื่อเมนู ----------
   ใช้ position:fixed + สร้าง element แยกออกมานอกไซด์บาร์ (ผ่าน JS ใน
   common.js) แทนวิธี ::after เดิม เพราะ .sidebar มี overflow:hidden
   (จำเป็นสำหรับตัดขอบมุมโค้งของการ์ดลอย) ซึ่งจะบังของทุกอย่างที่ล้น
   ออกไปนอกกรอบไซด์บาร์ รวมถึง tooltip แบบเดิมที่ยื่นออกไปด้วย */
.sf-tooltip{
    position:fixed;
    background:#111827;
    color:#fff;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    padding:8px 14px;
    border-radius:999px;
    box-shadow:0 10px 24px rgba(0,0,0,.3);
    opacity:0;
    pointer-events:none;
    transition:opacity .12s ease, transform .12s ease;
    transform:translateY(-50%) translateX(-4px);
    z-index:9999;
}

.sf-tooltip.show{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

.sidebar.collapsed .menu-item,
.sidebar.collapsed .logout-btn{
    justify-content:center;
}

.logo{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-2) var(--space-2) var(--space-6);
    font-weight:700;
    font-size:19px;
    letter-spacing:.2px;
}

.logo-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.logo-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

nav{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.menu-item{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding:12px 14px;
    border-radius:var(--radius-sm);
    font-size:15px;
    font-weight:400;
    color:rgba(255,255,255,.82);
    border-left:3px solid transparent;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
    white-space:nowrap;
}

.menu-item .icon{
    font-size:18px;
    width:22px;
    text-align:center;
    flex:0 0 22px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.menu-item .icon svg{
    width:19px;
    height:19px;
    color:currentColor;
}

.logout-btn .icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    flex:0 0 22px;
}

.logout-btn .icon svg{
    width:19px;
    height:19px;
    color:currentColor;
}

.menu-item:hover{
    background:rgba(255,255,255,.10);
    color:var(--white);
}

.menu-item.active{
    background:rgba(103,232,249,.16);
    border-left-color:#22d3ee;
    color:#a5f3fc;
    font-weight:600;
}

.sidebar-bottom{
    margin-top:auto;
    padding-top:var(--space-5);
}

.logout-btn{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    width:100%;
    padding:12px 14px;
    border:none;
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.12);
    color:var(--white);
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:background .15s ease;
}

.logout-btn:hover{ background:rgba(255,255,255,.22); }

/* ---------------- Main column ---------------- */

.main{
    flex:1;
    min-width:0;
    padding:var(--space-6) var(--space-7) var(--space-8);
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
}

.main.full{ width:100%; }

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    margin-bottom:var(--space-2);
}

.topbar .left{
    display:flex;
    align-items:center;
    gap:var(--space-4);
    flex:1;
}

.toggle{
    font-size:20px;
    cursor:pointer;
    color:var(--ink-500);
    padding:6px;
    border-radius:var(--radius-sm);
    transition:background .15s ease;
}

.toggle:hover{ background:var(--ink-100); }

.search{
    width:100%;
    max-width:360px;
    padding:11px 16px;
    border-radius:var(--radius-full);
    border:1px solid var(--ink-200);
    background:var(--white);
    font-size:14px;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}

.search:focus{
    border-color:var(--blue-600);
    box-shadow:0 0 0 3px var(--blue-100);
}

.topbar .icon-btn{
    font-size:20px;
    color:var(--ink-500);
    cursor:pointer;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--white);
    box-shadow:var(--shadow-sm);
}

.topbar .icon-btn svg{ width:19px; height:19px; }

.topbar .icon-btn:hover{ color:var(--blue-600); }

/* ---------------- Breadcrumb ---------------- */

.breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    font-size:13px;
    color:var(--ink-400);
    margin-top:-6px;
}

.breadcrumb a{
    color:var(--blue-600);
    font-weight:500;
    transition:opacity .15s ease;
}

.breadcrumb a:hover{ opacity:.7; text-decoration:underline; }

.breadcrumb .current{
    color:var(--ink-700);
    font-weight:500;
}

.breadcrumb .sep{
    color:var(--ink-300, #cbd5e1);
}

.user{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--blue-600);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.user svg{ width:19px; height:19px; }

/* ---------------- Cards / primitives ---------------- */

.card{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:var(--space-6);
    box-shadow:var(--shadow-md);
}

.page-header{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:var(--space-6);
    box-shadow:var(--shadow-md);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    flex-wrap:wrap;
}

.page-header h2{
    margin:0 0 6px;
    font-size:28px;
    color:var(--ink-900);
}

.page-header p{
    margin:0;
    color:var(--ink-500);
    font-size:15px;
}

.page-header .header-icon{
    width:56px;
    height:56px;
    border-radius:var(--radius-md);
    background:var(--blue-50);
    color:var(--blue-600);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    flex:0 0 56px;
}

.page-header .header-icon svg{ width:26px; height:26px; }

.welcome-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-5);
    flex-wrap:wrap;
    background:linear-gradient(120deg,#6377dc,#a99cf3 85%);
    color:var(--white);
}

.welcome-card h2{ margin:0 0 8px; font-size:26px; }
.welcome-card p{ margin:0; opacity:.85; font-size:15px; }
.welcome-card .btn{ background:var(--gold-500); color:#2a2110; }
.welcome-card .btn:hover{ background:var(--gold-300); }

.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-5);
}

.stat-card h4{
    margin:0 0 var(--space-2);
    font-size:14px;
    font-weight:500;
    color:var(--ink-500);
}

.stat-card h2{
    margin:0 0 4px;
    font-size:32px;
    color:var(--ink-900);
}

.stat-card span{
    font-size:13px;
    color:var(--ink-400);
}

.card h3{
    margin:0;
    font-size:18px;
    color:var(--ink-900);
}

.sidebar{
    position:sticky;
    overflow:hidden;
}

/* เอฟเฟกต์เส้นแสง — ใช้รูป SVG ชิ้นเดียว (ไม่ซ้อน gradient หลายเลเยอร์
   แบบที่เคยพังมาก่อน) ปลอดภัยกว่ามาก เพราะเป็น background-image ธรรมดา
   วางไว้ล่างกึ่งกลางไซด์บาร์ ไม่ขึ้นกับความสูงของไซด์บาร์เลย */
.sidebar::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("../assets/sidebar-glow.svg");
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:70% auto;
    opacity:.9;
    pointer-events:none;
}

/* ให้เมนูและปุ่มอยู่เหนือพื้นหลัง */
.sidebar > *{
    position:relative;
    z-index:2;
}
/* ---------------- Buttons ---------------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 22px;
    border:none;
    border-radius:var(--radius-sm);
    background:var(--blue-600);
    color:var(--white);
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease, transform .1s ease;
}

.btn:hover{ background:var(--blue-700); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn-outline{
    background:var(--white);
    color:var(--blue-600);
    border:1.5px solid var(--blue-600);
}
.btn-outline:hover{ background:var(--blue-50); }

.btn-ghost{
    background:var(--ink-100);
    color:var(--ink-700);
}
.btn-ghost:hover{ background:var(--ink-200); }

.btn-danger{
    background:var(--red-600);
    color:var(--white);
}
.btn-danger:hover{ background:#b91c1c; }

/* ---------------- Table ---------------- */

table{
    width:100%;
    border-collapse:collapse;
}

thead th{
    text-align:left;
    padding:14px 16px;
    font-size:13px;
    font-weight:600;
    color:var(--ink-500);
    text-transform:uppercase;
    letter-spacing:.4px;
    border-bottom:1px solid var(--ink-100);
}

tbody td{
    padding:16px;
    font-size:15px;
    color:var(--ink-700);
    border-bottom:1px solid var(--ink-100);
}

tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--ink-50); }

.row-actions{
    display:flex;
    gap:14px;
    font-size:16px;
}

.row-actions span{
    cursor:pointer;
    opacity:.75;
    transition:opacity .15s ease, transform .15s ease;
}

.row-actions span:hover{ opacity:1; transform:translateY(-1px); }

.badge{
    display:inline-flex;
    align-items:center;
    padding:5px 12px;
    border-radius:var(--radius-full);
    font-size:12px;
    font-weight:600;
}

.badge.green{ background:var(--green-50); color:var(--green-600); }
.badge.red{ background:var(--red-50); color:var(--red-600); }
.badge.amber{ background:var(--amber-50); color:var(--amber-600); }

.empty-state{
    text-align:center;
    padding:70px 20px;
    color:var(--ink-400);
}

.empty-state .icon{ font-size:48px; margin-bottom:14px; }
.empty-state h3{ margin:0 0 8px; color:var(--ink-700); font-size:18px; }
.empty-state p{ margin:0; font-size:14px; }

/* ---------------- Modal ---------------- */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:var(--space-4);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
}

.modal-overlay.show{
    opacity:1;
    pointer-events:auto;
}

.modal-box{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:var(--space-6);
    width:100%;
    max-width:360px;
    text-align:center;
    box-shadow:var(--shadow-lg);
    transform:translateY(12px) scale(.97);
    transition:transform .18s ease;
}

.modal-overlay.show .modal-box{
    transform:translateY(0) scale(1);
}

.modal-icon{
    width:64px;
    height:64px;
    margin:0 auto var(--space-4);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:var(--white);
}

.modal-icon.danger{ background:var(--red-600); }
.modal-icon.info{ background:var(--blue-600); }

.modal-box h3{
    margin:0 0 8px;
    font-size:19px;
    color:var(--ink-900);
}

.modal-box p{
    margin:0 0 var(--space-5);
    font-size:14px;
    color:var(--ink-500);
    line-height:1.6;
}

.modal-actions{
    display:flex;
    gap:12px;
}

.modal-actions .btn{ flex:1; padding:11px; }

/* ---------------- Toast ---------------- */

.toast-stack{
    position:fixed;
    top:24px;
    right:24px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:200;
}

.toast{
    background:var(--ink-900);
    color:var(--white);
    padding:14px 20px;
    border-radius:var(--radius-sm);
    font-size:14px;
    box-shadow:var(--shadow-lg);
    display:flex;
    align-items:center;
    gap:10px;
    min-width:220px;
    animation:toast-in .2s ease;
}

.toast.success{ background:var(--green-600); }
.toast.error{ background:var(--red-600); }

@keyframes toast-in{
    from{ opacity:0; transform:translateY(-8px); }
    to{ opacity:1; transform:translateY(0); }
}

/* ---------------- Responsive ---------------- */

@media(max-width:1100px){
    .grid{ grid-template-columns:repeat(2,1fr); }
    .main{ padding:var(--space-5); }
}

@media(max-width:860px){
    /* จอแคบ/ครึ่งจอ: ไซด์บาร์เป็นลิ้นชักซ่อนไว้ กดปุ่มเมนูถึงเลื่อนออกมา
       ไม่ใช้สถานะ "หุบ/กาง" ของจอใหญ่ที่จำไว้ใน localStorage */
    .layout{ padding:10px; gap:0; }
    .sidebar,
    .sidebar.collapsed{
        position:fixed;
        left:12px;
        top:12px;
        height:calc(100vh - 24px);
        width:var(--sidebar-w);
        flex-basis:var(--sidebar-w);
        padding:var(--space-5) var(--space-4);
        transform:translateX(calc(-100% - 28px));
        box-shadow:var(--shadow-lg);
        z-index:60;
        transition:transform .28s cubic-bezier(.4,0,.2,1);
    }
    .sidebar.mobile-open,
    .sidebar.collapsed.mobile-open{ transform:translateX(0); }
    .sidebar.collapsed .menu-text,
    .sidebar.collapsed .logo-text{ opacity:1; max-width:200px; display:inline-block; }
    .sidebar.collapsed .menu-item,
    .sidebar.collapsed .logout-btn{ justify-content:flex-start; }
    .sidebar-backdrop{
        position:fixed; inset:0; background:rgba(15,23,42,.45);
        opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:50;
    }
    .sidebar-backdrop.show{ opacity:1; pointer-events:auto; }
    .main, .main.full{ width:100%; }
    .grid{ grid-template-columns:1fr; }
    .search{ max-width:none; }
}

@media(max-width:560px){
    .main{ padding:var(--space-4); gap:var(--space-4); }
    .card, .page-header{ padding:var(--space-4); }
    .welcome-card{ flex-direction:column; align-items:flex-start; }
}



/* ============================================================
   ไซด์บาร์ลอยเป็นการ์ดมุมโค้ง — เวอร์ชันสุดท้าย เรียบง่าย ไม่มี
   เอฟเฟกต์เส้นแสงหลายชั้นที่เสี่ยงพัง (เอาออกแล้วตามที่ตกลงกัน)
   ============================================================ */

.layout{
    background:var(--ink-50);
    padding:16px;
    gap:16px;
}

.sidebar{
    border-radius:28px;
    height:calc(100vh - 32px);
    top:16px;
    box-shadow:0 20px 50px rgba(74,99,224,.28);
}

/* ---------- Dashboard grids (ใช้คลาสแทน inline เพื่อให้ responsive ได้) ---------- */
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-main3{ grid-template-columns:1.1fr 1fr 1fr; align-items:stretch; }
.quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:1100px){
    .grid-4{ grid-template-columns:repeat(2,1fr); }
    .grid-main3{ grid-template-columns:1fr 1fr; }
    .quick-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:860px){
    .grid-4, .grid-main3{ grid-template-columns:1fr; }
}
@media(max-width:560px){
    .grid-4{ grid-template-columns:1fr 1fr; }
    .quick-grid{ grid-template-columns:1fr 1fr; }
}


/* ============================================================
   ความสมูทของการเปลี่ยนหน้า + ฉากต้อนรับหลังล็อกอิน
   ============================================================ */

/* ทุกหน้า: เนื้อหาหลักเฟดขึ้นเบาๆ */
.main{ animation:sf-main-in .35s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes sf-main-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ล็อกอินเสร็จ: ไซด์บาร์ไถลเข้า เมนูทยอยขึ้น การ์ดไล่ขึ้นมาทีละใบ */
.sf-welcome .main{ animation:none; }
.sf-welcome .sidebar{ animation:sf-side-in .6s cubic-bezier(.2,.8,.2,1) .2s backwards; }
@keyframes sf-side-in{ from{ opacity:0; transform:translateX(-46px); } to{ opacity:1; transform:none; } }
.sf-welcome .sidebar nav .menu-item{ animation:sf-menu-in .5s ease backwards; }
.sf-welcome .sidebar nav .menu-item:nth-child(1){ animation-delay:0.33s; }
.sf-welcome .sidebar nav .menu-item:nth-child(2){ animation-delay:0.37s; }
.sf-welcome .sidebar nav .menu-item:nth-child(3){ animation-delay:0.41s; }
.sf-welcome .sidebar nav .menu-item:nth-child(4){ animation-delay:0.45s; }
.sf-welcome .sidebar nav .menu-item:nth-child(5){ animation-delay:0.48s; }
.sf-welcome .sidebar nav .menu-item:nth-child(6){ animation-delay:0.52s; }
.sf-welcome .sidebar nav .menu-item:nth-child(7){ animation-delay:0.56s; }
@keyframes sf-menu-in{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:none; } }
.sf-welcome .main > *{ animation:sf-card-in .65s cubic-bezier(.2,.8,.2,1) backwards; }
.sf-welcome .main > *:nth-child(1){ animation-delay:0.30s; }
.sf-welcome .main > *:nth-child(2){ animation-delay:0.37s; }
.sf-welcome .main > *:nth-child(3){ animation-delay:0.44s; }
.sf-welcome .main > *:nth-child(4){ animation-delay:0.51s; }
.sf-welcome .main > *:nth-child(5){ animation-delay:0.57s; }
.sf-welcome .main > *:nth-child(n+6){ animation-delay:0.64s; }
@keyframes sf-card-in{ from{ opacity:0; transform:translateY(22px) scale(.985); } to{ opacity:1; transform:none; } }
.sf-welcome .grid > *{ animation:sf-card-in .6s cubic-bezier(.2,.8,.2,1) backwards; }
.sf-welcome .grid > *:nth-child(1){ animation-delay:0.55s; }
.sf-welcome .grid > *:nth-child(2){ animation-delay:0.61s; }
.sf-welcome .grid > *:nth-child(3){ animation-delay:0.66s; }
.sf-welcome .grid > *:nth-child(4){ animation-delay:0.72s; }

@media (prefers-reduced-motion: reduce){
    .main, .sf-welcome .main, .sf-welcome .main > *, .sf-welcome .grid > *, .sf-welcome .sidebar,
    .sf-welcome .sidebar nav .menu-item{ animation:none !important; }
    .sf-veil, .sf-veil *{ animation:none !important; transition-duration:.01s !important; }
}

/* ---------- ม่านต้อนรับหลังล็อกอิน (ใช้ร่วมกันระหว่างหน้า login กับหน้าแดชบอร์ด) ---------- */
.sf-veil{
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(155deg,#6377dc 0%,#7f8aee 52%,#a99cf3 100%);
    color:#fff; text-align:center;
    clip-path:circle(150% at var(--ox,50%) var(--oy,50%));
    transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
    will-change:clip-path, opacity;
}
.sf-veil.grow{ clip-path:circle(0 at var(--ox,50%) var(--oy,50%)); }
.sf-veil.grow.show{ clip-path:circle(150% at var(--ox,50%) var(--oy,50%)); transition:clip-path .6s cubic-bezier(.65,.05,.25,1); }
.sf-veil.hide{ opacity:0; transform:scale(1.04); visibility:hidden; pointer-events:none; }
.sf-veil::before, .sf-veil::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; }
.sf-veil::before{ width:520px; height:520px; left:-160px; top:-190px; background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%); }
.sf-veil::after{ width:460px; height:460px; right:-140px; bottom:-170px; background:radial-gradient(circle,rgba(255,226,170,.38),transparent 70%); }
.sf-veil-box{ position:relative; display:flex; flex-direction:column; align-items:center; padding:0 24px; }
.sf-veil-box img{
    width:132px; height:132px; object-fit:contain; margin-bottom:12px;
    filter:drop-shadow(0 16px 28px rgba(35,45,140,.40));
    animation:sf-veil-pop .8s cubic-bezier(.3,1.5,.5,1) .15s both, sf-veil-float 3.6s ease-in-out .95s infinite;
}
.sf-veil-title{ font-size:26px; font-weight:700; letter-spacing:.3px; text-shadow:0 3px 14px rgba(25,35,120,.3); animation:sf-veil-rise .6s ease .4s both; }
.sf-veil-sub{ margin-top:6px; font-size:14px; color:rgba(255,255,255,.88); animation:sf-veil-rise .6s ease .55s both; }
.sf-veil-bar{ width:170px; height:4px; border-radius:99px; background:rgba(255,255,255,.28); margin-top:22px; overflow:hidden; animation:sf-veil-rise .6s ease .65s both; }
.sf-veil-bar i{ display:block; height:100%; width:45%; border-radius:99px; background:#fff; animation:sf-veil-load 1.1s ease-in-out infinite; }
@keyframes sf-veil-pop{ from{ opacity:0; transform:scale(.5) rotate(-8deg); } to{ opacity:1; transform:none; } }
@keyframes sf-veil-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes sf-veil-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes sf-veil-load{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(260%); } }


/* ============================================================
   โทนละมุนเดียวกับหน้าล็อกอิน + ลูกเล่นปุ่ม/การโต้ตอบทั้งระบบ
   ============================================================ */
:root{
    --soft-grad:linear-gradient(135deg,#6377dc 0%,#7f8aee 52%,#a99cf3 100%);
    --soft-glow:rgba(111,125,230,.38);
    --focus-ring:0 0 0 4px rgba(127,138,238,.28);
    --spring:cubic-bezier(.2,.8,.2,1);
}

/* ---- ไซด์บาร์ ---- */
.sidebar{
    background:linear-gradient(165deg,#6377dc 0%,#7f8aee 52%,#a99cf3 100%);
    box-shadow:0 26px 56px -10px rgba(111,125,230,.50), 0 6px 16px rgba(111,125,230,.18);
}
.menu-item{
    position:relative; overflow:hidden;
    transition:background .22s ease, color .22s ease, border-color .22s ease, transform .25s var(--spring), padding .25s var(--spring);
}
.menu-item:hover{ background:rgba(255,255,255,.17); color:#fff; transform:translateX(5px); }
.menu-item:active{ transform:translateX(2px) scale(.97); }
.menu-item .icon{ transition:transform .3s var(--spring); }
.menu-item:hover .icon{ transform:scale(1.18) rotate(-6deg); }
.menu-item.active{
    background:rgba(255,255,255,.26);
    border-left-color:#fff3c8;
    color:#fff;
    box-shadow:0 8px 18px rgba(60,70,170,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.menu-item.active:hover{ transform:translateX(3px); }
.sidebar.collapsed .menu-item:hover{ transform:none; }

.logout-btn{
    position:relative; overflow:hidden;
    background:rgba(255,255,255,.18);
    transition:background .22s ease, transform .25s var(--spring), box-shadow .25s ease;
}
.logout-btn:hover{ background:rgba(255,255,255,.30); transform:translateY(-2px); box-shadow:0 10px 20px rgba(50,60,160,.25); }
.logout-btn:active{ transform:scale(.96); }
.logout-btn .icon{ transition:transform .3s var(--spring); }
.logout-btn:hover .icon{ transform:translateX(4px); }
.sf-tooltip{ background:#4a56b8; }

/* ---- แถบบน ---- */
.toggle{ transition:background .2s ease, transform .25s var(--spring), color .2s; }
.toggle:hover{ background:#eef0fd; color:#4a5fc9; transform:scale(1.1); }
.toggle:active{ transform:scale(.92); }

.topbar .icon-btn{
    position:relative; overflow:hidden;
    transition:transform .25s var(--spring), box-shadow .25s ease, color .2s ease, background .2s ease;
}
.topbar .icon-btn:hover{ color:#4a5fc9; background:#f1f3ff; transform:translateY(-2px); box-shadow:0 10px 20px rgba(99,119,220,.28); }
.topbar .icon-btn:hover svg{ animation:sf-ring .7s ease; transform-origin:50% 10%; }
.topbar .icon-btn:active{ transform:scale(.92); }
@keyframes sf-ring{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(16deg); } 40%{ transform:rotate(-13deg); } 60%{ transform:rotate(8deg); } 80%{ transform:rotate(-5deg); } }

.user{
    background:var(--soft-grad);
    transition:transform .25s var(--spring), box-shadow .25s ease;
}
.user:hover{ transform:translateY(-2px) scale(1.07); box-shadow:0 0 0 4px rgba(127,138,238,.25), 0 12px 22px rgba(99,119,220,.35); }
.user:active{ transform:scale(.94); }

/* ---- ปุ่มหลัก ---- */
.btn{
    position:relative; overflow:hidden; isolation:isolate;
    background:var(--soft-grad);
    box-shadow:0 10px 20px -4px rgba(99,119,220,.45), 0 2px 5px rgba(99,119,220,.18);
    transition:transform .25s var(--spring), box-shadow .3s ease, filter .25s ease, background .25s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ background:var(--soft-grad); filter:brightness(1.06) saturate(1.05); transform:translateY(-3px); box-shadow:0 18px 30px -6px rgba(99,119,220,.55), 0 4px 10px rgba(99,119,220,.22); }
.btn:active{ transform:translateY(0) scale(.96); box-shadow:0 4px 10px rgba(99,119,220,.3); filter:brightness(.98); }
.btn:disabled{ transform:none; filter:none; box-shadow:none; }
.btn-outline{ background:#fff; color:#4a5fc9; border:1.5px solid #8c97ee; box-shadow:none; }
.btn-outline:hover{ background:#f3f4ff; border-color:#6377dc; filter:none; box-shadow:0 12px 22px -6px rgba(99,119,220,.35); }
.btn-ghost{ background:#f1f2fb; color:#3a3f4f; box-shadow:none; }
.btn-ghost:hover{ background:#e6e8fa; filter:none; box-shadow:0 10px 20px -6px rgba(99,119,220,.25); }
.btn-danger{ background:linear-gradient(135deg,#ef4444,#f87171); box-shadow:0 10px 20px -4px rgba(220,38,38,.35); }
.btn-danger:hover{ background:linear-gradient(135deg,#ef4444,#f87171); box-shadow:0 18px 30px -6px rgba(220,38,38,.45); }

/* ปุ่มอื่นๆ ที่กระจายอยู่ตามหน้า */
.btn-ai, .fix-btn, .change-btn, .password-btn, .check-fix-btn, .print-icon-btn{
    position:relative; overflow:hidden;
    transition:transform .25s var(--spring), box-shadow .3s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
}
.btn-ai:hover, .fix-btn:hover, .change-btn:hover, .password-btn:hover, .check-fix-btn:hover, .print-icon-btn:hover{
    transform:translateY(-2px); box-shadow:0 12px 22px -6px rgba(99,119,220,.38);
}
.btn-ai:active, .fix-btn:active, .change-btn:active, .password-btn:active, .check-fix-btn:active, .print-icon-btn:active{
    transform:scale(.95); box-shadow:none;
}
.btn-ai svg{ transition:transform .35s var(--spring); }
.btn-ai:hover svg{ transform:rotate(-12deg) scale(1.2); }

/* การ์ดสร้างเอกสารด่วนบนแดชบอร์ด */
.quick-grid a{ transition:transform .25s var(--spring), box-shadow .3s ease, border-color .2s ease, background .2s ease !important; }
.quick-grid a:hover{ transform:translateY(-4px); background:#f6f7ff !important; border-color:#b9c3f5 !important; box-shadow:0 16px 28px -8px rgba(99,119,220,.35); }
.quick-grid a:active{ transform:scale(.97); }
.quick-grid a span{ transition:transform .3s var(--spring); }
.quick-grid a:hover span:first-child{ transform:scale(1.2) rotate(-8deg); }

/* ลิงก์ในเนื้อหา + ช่องกรอก */
.main a:not(.btn):not(.menu-item):not([class*="btn"]){ transition:color .2s ease; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea{
    transition:border-color .22s ease, box-shadow .25s ease, background .2s ease;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, select:focus, textarea:focus{
    outline:none; border-color:#7f8aee !important; box-shadow:var(--focus-ring) !important;
}
:focus-visible{ outline:2px solid #7f8aee; outline-offset:2px; }
button:focus-visible, a:focus-visible{ box-shadow:var(--focus-ring); }

/* แถวในตาราง */
tbody tr{ transition:background .2s ease; }
tbody tr:hover{ background:#f6f7ff; }

/* ริปเปิลตอนกด (สร้างโดย common.js) */
.sf-ripple{
    position:absolute; border-radius:50%; pointer-events:none; z-index:0;
    background:currentColor; opacity:.28; transform:scale(0);
    animation:sf-ripple .6s ease-out forwards;
}
@keyframes sf-ripple{ to{ transform:scale(1); opacity:0; } }

@media (prefers-reduced-motion: reduce){
    .menu-item, .btn, .btn-ai, .logout-btn, .topbar .icon-btn, .user, .quick-grid a{ transition-duration:.01s !important; }
    .sf-ripple{ display:none; }
}


/* ============================================================
   หน้าต่างยืนยัน (ออกจากระบบ / ลบ) — โทนละมุน + อนิเมชันเด้ง
   ============================================================ */
.modal-overlay{
    background:rgba(70,80,170,.30);
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    transition:opacity .28s ease;
}
.modal-box{
    max-width:390px; padding:36px 32px 28px; border-radius:26px;
    box-shadow:0 44px 90px -22px rgba(74,95,201,.55), 0 0 0 1px rgba(99,119,220,.12);
    transform:translateY(30px) scale(.88);
    transition:transform .5s cubic-bezier(.3,1.4,.5,1);
    position:relative; overflow:hidden;
}
.modal-box::before{
    content:""; position:absolute; width:260px; height:260px; border-radius:50%; right:-90px; top:-120px; pointer-events:none;
    background:radial-gradient(circle,rgba(169,156,243,.30),transparent 70%);
}
.modal-box > *{ position:relative; }
.modal-overlay.show .modal-box h3{ animation:sf-rise .5s ease .12s backwards; }
.modal-overlay.show .modal-box p{ animation:sf-rise .5s ease .2s backwards; }
.modal-overlay.show .modal-actions{ animation:sf-rise .5s ease .28s backwards; }
@keyframes sf-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.modal-icon{
    width:76px; height:76px; position:relative;
    box-shadow:0 16px 30px -8px rgba(99,119,220,.55);
}
.modal-overlay.show .modal-icon{ animation:sf-icon-pop .65s cubic-bezier(.3,1.6,.5,1) .08s backwards; }
@keyframes sf-icon-pop{ from{ transform:scale(.3) rotate(-25deg); opacity:0; } to{ transform:none; opacity:1; } }
.modal-icon.info{ background:linear-gradient(135deg,#6377dc,#7f8aee 55%,#a99cf3); }
.modal-icon.danger{ background:linear-gradient(135deg,#f87171,#fb7185); box-shadow:0 16px 30px -8px rgba(244,63,94,.5); }
.modal-icon::after{
    content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid currentColor; opacity:0;
    color:rgba(127,138,238,.7); animation:sf-ping 2.2s ease-out .5s infinite;
}
.modal-icon.danger::after{ color:rgba(248,113,113,.7); }
@keyframes sf-ping{ 0%{ transform:scale(.85); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }
.sf-door-arrow{ animation:sf-door-go 1.6s ease-in-out .7s infinite; }
@keyframes sf-door-go{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }

.modal-box h3{ font-size:20px; color:#2f3a8f; }
.modal-actions{ gap:12px; margin-top:4px; }
.modal-actions .btn{ padding:12px; border-radius:14px; }

@media (prefers-reduced-motion: reduce){
    .modal-box, .modal-icon, .modal-box h3, .modal-box p, .modal-actions, .modal-icon::after, .sf-door-arrow{ animation:none !important; transition-duration:.01s !important; }
}

/* ม่านที่ "รับช่วงต่อ" จากหน้าก่อนหน้า: แสดงเนื้อหาครบทันที ไม่เล่นอนิเมชันเข้าซ้ำ (กันภาพกะพริบ) */
.sf-veil.static .sf-veil-box img,
.sf-veil.static .sf-veil-title,
.sf-veil.static .sf-veil-sub,
.sf-veil.static .sf-veil-bar{ animation:none !important; opacity:1; transform:none; }

.modal-box{ max-width:420px; }

/* ---- โลโก้ในไซด์บาร์ให้ใหญ่ขึ้น ---- */
:root{ --sidebar-w:272px; }
.logo{ gap:10px; padding-left:4px; padding-right:4px; }
.logo-icon{
    width:66px; height:66px; flex:0 0 66px;
    transition:transform .35s var(--spring);
}
.logo-icon img{ filter:drop-shadow(0 8px 14px rgba(35,45,140,.38)); }
.logo:hover .logo-icon{ transform:scale(1.07) rotate(-4deg); }
.sidebar.collapsed .logo{ padding-left:0; padding-right:0; justify-content:center; }
.sidebar.collapsed .logo-icon{ width:54px; height:54px; flex:0 0 54px; }
@media(max-width:860px){
    .sidebar .logo-icon, .sidebar.collapsed .logo-icon{ width:66px; height:66px; flex:0 0 66px; }
}


/* ============================================================
   มือถือ: ไม่ให้ต้องเลื่อนซ้าย-ขวา
   ============================================================ */
.main > *, .grid > *, .grid-4 > *, .grid-main3 > *, .quick-grid > *, .card{ min-width:0; }
.card{ overflow-wrap:anywhere; }

@media(max-width:340px){
    .grid-4, .quick-grid{ grid-template-columns:1fr; }
}

/* ตารางประวัติ → แสดงเป็นการ์ดต่อเอกสาร (จอ <= 700px) */
@media(max-width:1000px){
    .card table:not(.stat-table), .card table:not(.stat-table) thead, .card table:not(.stat-table) tbody, .card table:not(.stat-table) tr, .card table:not(.stat-table) td{ display:block; width:100%; }
    .card table:not(.stat-table) thead{ display:none; }
    .card table:not(.stat-table) tbody tr{
        position:relative;
        padding:14px 14px 10px; margin-bottom:12px;
        border:1px solid var(--ink-100); border-radius:16px;
        background:#fff; box-shadow:0 6px 16px -10px rgba(74,95,201,.25);
    }
    .card table:not(.stat-table) tbody tr:hover{ background:#fff; }
    .card table:not(.stat-table) tbody td{
        display:flex; justify-content:space-between; align-items:center; gap:12px;
        padding:7px 0; border-bottom:1px dashed var(--ink-100); font-size:14px; text-align:right;
    }
    .card table:not(.stat-table) tbody td::before{
        content:attr(data-label); flex:0 0 auto;
        font-size:12px; font-weight:600; color:var(--ink-500); text-align:left;
    }
    .card table:not(.stat-table) tbody td.td-title{
        display:block; text-align:left; font-weight:600; color:var(--ink-900);
        font-size:15px; padding:0 0 8px;
    }
    .card table:not(.stat-table) tbody td.td-title::before{ display:none; }
    .card table:not(.stat-table) tbody td:last-child{ border-bottom:none; padding-bottom:2px; }
    .card table:not(.stat-table) tbody td[colspan]{ display:block; text-align:center; border:none; }
    .card table:not(.stat-table) tbody td[colspan]::before{ display:none; }
    .card table:not(.stat-table) tbody tr:has(td[colspan]){ border:none; box-shadow:none; padding:0; background:transparent; }
    .row-actions{ gap:18px; font-size:18px; }
}

/* ตารางประวัติบนเว็บ (จอกว้าง): สถานะ/วันที่/ปุ่มจัดการไม่ขึ้นบรรทัดใหม่ ชื่อกับประเภทยืดหยุ่นแทน */
@media(min-width:1001px){
    .card table:not(.stat-table) td, .card table:not(.stat-table) th{ overflow-wrap:normal; word-break:normal; }
    .card table:not(.stat-table) td:nth-child(3), .card table:not(.stat-table) td:nth-child(4), .card table:not(.stat-table) td:nth-child(5),
    .card table:not(.stat-table) th:nth-child(3), .card table:not(.stat-table) th:nth-child(4), .card table:not(.stat-table) th:nth-child(5){ white-space:nowrap; }
    .card table:not(.stat-table) td:nth-child(1){ min-width:160px; }
    .card table:not(.stat-table) td:nth-child(2), .card table:not(.stat-table) th:nth-child(2){ min-width:130px; }
    .card table:not(.stat-table) .badge{ white-space:nowrap; }
}

/* มือถือ: ปุ่มท้ายฟอร์ม/ผลลัพธ์เต็มความกว้างเท่ากัน */
@media(max-width:560px){
    #composeAllBtn, #checkFormBtn, #generateBtn{ display:flex; width:100%; justify-content:center; margin-left:0; margin-right:0; }
    .doc-actions > .btn, .doc-actions > .btn-outline, .doc-actions > .btn-ghost{ flex:1 1 calc(50% - 14px); justify-content:center; text-align:center; }
    #docPreview{ padding:8px 4px; }
}

/* ===== iOS Safari: ช่องวันที่ล้นขอบ + ตัวอักษรในเอกสารถูกขยายไม่เท่ากัน ===== */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.doc-shell, .doc-shell *{ -webkit-text-size-adjust:none; text-size-adjust:none; }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"]{
    -webkit-appearance:none; appearance:none;
    display:block; width:100%; max-width:100%; min-width:0; box-sizing:border-box;
    text-align:left; margin-left:0; margin-right:0;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value{ text-align:left; min-height:1.3em; }
input[type="date"]::-webkit-calendar-picker-indicator{ margin-left:auto; }


/* ---------- เปลี่ยนหน้าแบบเฟดต่อเนื่อง + ไซด์บาร์อยู่นิ่งไม่กะพริบ ---------- */
@media (prefers-reduced-motion:no-preference){
    @view-transition{ navigation:auto; }
    .sidebar{ view-transition-name:sf-sidebar; }
    ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.25s; animation-timing-function:ease; }
    ::view-transition-group(sf-sidebar){ animation-duration:0s; }
}