/* assets/app.css — โทนสี ตัวแปร และคอมโพเนนต์กลางของทั้งระบบ
   ย้ายออกมาจาก includes/header.php เพื่อให้ shell สาธารณะ (public-header.php) ใช้ชุดเดียวกัน */

:root{--bg:#f5f7fa;--card:#fff;--topbar:#fff;--border:#edf0f4;--text:#1e293b;--muted:#475569;--hint:#94a3b8;--hover:#f8fafd;--sb1:#0c1222;--sb2:#131c31;--pri:#6366f1;--pri2:#4f46e5;--glow:rgba(99,102,241,.25);--pri-light:#eef2ff;--sb-w:260px;--sb-cw:68px}
*{font-family:'Google Sans Text','Google Sans',sans-serif;box-sizing:border-box}
html{font-size:16px}
body{background:var(--bg);color:var(--text)}
h1,h2,h3,.font-display{font-family:'Google Sans',sans-serif}
.material-symbols-outlined{font-size:22px;vertical-align:middle;line-height:1}
.icon-sm{font-size:20px}.icon-xs{font-size:18px}

/* ── Sidebar ── */
.sidebar{background:linear-gradient(180deg,var(--sb1),var(--sb2));width:var(--sb-w);transition:width .25s cubic-bezier(.4,0,.2,1)}
.sidebar.collapsed{width:var(--sb-cw)}
.sidebar.collapsed .sb-text,.sidebar.collapsed .sb-badge,.sidebar.collapsed .sb-arrow,.sidebar.collapsed .sb-user-info{display:none}
.sidebar.collapsed .sidebar-link{justify-content:center;padding:10px 0}
.sidebar.collapsed .sidebar-link .dot{width:10px;height:10px}
.sidebar.collapsed .acc-body{display:none!important}
.sidebar.collapsed .acc-head{justify-content:center;padding:10px 0}
.sidebar.collapsed .sb-logo-text{display:none}
.sidebar.collapsed .sb-user{justify-content:center}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:10px;font-size:16px;color:#94a3b8;transition:all .15s;font-weight:500;text-decoration:none;white-space:nowrap;overflow:hidden}
.sidebar-link:hover{color:#e2e8f0;background:rgba(255,255,255,.05)}
.sidebar-link.active{color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 4px 15px var(--glow)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}

/* ── Accordion ── */
.acc-head{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:10px;font-size:16px;font-weight:700;color:#475569;cursor:pointer;transition:all .15s;user-select:none;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;margin-top:4px}
.acc-head:hover{color:#e2e8f0;background:rgba(255,255,255,.05)}
.acc-head .sb-arrow{margin-left:auto;transition:transform .2s;font-size:18px;color:#475569;flex-shrink:0}
.acc-head.open .sb-arrow{transform:rotate(180deg)}
.acc-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s ease,opacity .2s ease}
.acc-body.open{max-height:900px;opacity:1}

/* ── Cards ── */
.card-m{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.03);transition:all .2s}
.card-m:hover{box-shadow:0 8px 25px rgba(0,0,0,.06)}
.stat-pill{border-radius:14px;padding:22px 26px;color:#fff;position:relative;overflow:hidden}
.stat-pill::before{content:'';position:absolute;top:-40%;right:-20%;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08)}
.stat-pill::after{content:'';position:absolute;bottom:-30%;left:-10%;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.05)}

/* ── Table ── */
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 14px;border-bottom:2px solid var(--border);text-align:left}
.tbl td{padding:10px 14px;border-bottom:1px solid #f4f6f8;font-size:14px;color:var(--text)}
.tbl tr:hover td{background:var(--hover)}

/* ── Pills ── */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:6px}
.pill-blue{background:#eff6ff;color:#2563eb}.pill-green{background:#ecfdf5;color:#059669}
.pill-amber{background:#fffbeb;color:#d97706}.pill-red{background:#fef2f2;color:#dc2626}
.pill-gray{background:#f1f5f9;color:#64748b}.pill-purple{background:#faf5ff;color:#7c3aed}.pill-cyan{background:#ecfeff;color:#0891b2}

/* ── Alerts ── */
.alert{border-radius:12px;padding:14px 18px;font-size:15px;display:flex;align-items:flex-start;gap:10px;margin-bottom:20px}
.alert-success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.alert-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.alert-warning{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}

/* ── Buttons ── */
.btn-m{display:inline-flex;align-items:center;gap:7px;font-size:16px;font-weight:600;padding:10px 20px;border-radius:10px;transition:all .2s;border:none;cursor:pointer;text-decoration:none}
.btn-m.primary{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 2px 10px var(--glow)}
.btn-m.primary:hover{box-shadow:0 6px 20px var(--glow);transform:translateY(-1px)}
.btn-m.ghost{background:transparent;color:var(--muted)}.btn-m.ghost:hover{background:var(--hover);color:var(--text)}
.btn-m.outline{background:var(--card);color:var(--text);border:1.5px solid var(--border)}
.btn-m.outline:hover{border-color:var(--pri);color:var(--pri)}
.btn-m.danger{background:#ef4444;color:#fff}.btn-m.danger:hover{background:#dc2626}

/* ── Inputs ── */
.inp{padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:16px;background:var(--card);outline:none;transition:all .2s;width:100%;color:var(--text)}
.inp:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.inp::placeholder{color:#94a3b8}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
textarea.inp{resize:vertical;min-height:80px}
.label{display:block;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}

/* ── Upload progress (คู่กับ assets/upload-progress.js) ── */
.up-wrap{margin-top:16px}
.up-card{border:1.5px solid var(--border);background:var(--card);border-radius:14px;padding:16px 18px}
.up-card.is-done{border-color:#a7f3d0;background:#f0fdf9}
.up-card.is-error{border-color:#fecaca;background:#fff5f5}
.up-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.up-icon{color:var(--pri);font-size:26px;flex-shrink:0}
.up-card.is-processing .up-icon{animation:upSpin 1.6s linear infinite}
.up-card.is-done .up-icon{color:#059669}
.up-card.is-error .up-icon{color:#dc2626}
.up-titles{flex:1;min-width:0}
.up-phase{font-family:'Google Sans',sans-serif;font-weight:700;font-size:16px;color:var(--text)}
.up-file{font-size:13px;color:var(--hint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-pct{font-family:'Google Sans',sans-serif;font-weight:700;font-size:22px;color:var(--pri);font-variant-numeric:tabular-nums;flex-shrink:0}
.up-card.is-done .up-pct{color:#059669}
.up-card.is-error .up-pct{display:none}
.up-track{height:10px;border-radius:99px;background:#e8edf5;overflow:hidden}
.up-fill{height:100%;border-radius:99px;width:0;background:linear-gradient(135deg,var(--pri),var(--pri2));transition:width .2s ease}
.up-card.is-processing .up-fill{background-image:linear-gradient(115deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%);background-size:28px 28px;animation:upStripes .9s linear infinite}
.up-card.is-done .up-fill{background:linear-gradient(135deg,#10b981,#059669)}
.up-card.is-error .up-fill{background:linear-gradient(135deg,#ef4444,#dc2626)}
.up-meta{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:10px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.up-cancel{margin-top:12px;font-size:13px;font-weight:600;color:var(--muted);background:transparent;border:1.5px solid var(--border);border-radius:8px;padding:5px 12px;cursor:pointer;transition:all .2s}
.up-cancel:hover{border-color:#ef4444;color:#dc2626}
.up-cancel.hidden{display:none}
.btn-m:disabled,.btn-m.is-busy{opacity:.6;cursor:progress;transform:none!important;box-shadow:none}
@keyframes upStripes{to{background-position:28px 0}}
@keyframes upSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.up-card.is-processing .up-fill,.up-card.is-processing .up-icon{animation:none}}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.anim{animation:fadeUp .35s ease both}.d1{animation-delay:.04s}.d2{animation-delay:.08s}.d3{animation-delay:.12s}.d4{animation-delay:.16s}.d5{animation-delay:.2s}
.sidebar::-webkit-scrollbar{width:3px}.sidebar::-webkit-scrollbar-thumb{background:#1e293b;border-radius:3px}

/* ── Layout ── */
.main-wrap{margin-left:var(--sb-w);transition:margin-left .25s cubic-bezier(.4,0,.2,1);min-height:100vh;display:flex;flex-direction:column}
.main-wrap.sb-collapsed{margin-left:var(--sb-cw)}
@media(max-width:1023px){.main-wrap{margin-left:0!important}.sidebar{position:fixed;z-index:50;transform:translateX(-100%)}.sidebar.mobile-open{transform:translateX(0)}}

/* ── Hero slider ── */
.slide{transition:opacity .7s ease}
.slider-dots button{width:8px;height:8px;border-radius:9999px;background:rgba(255,255,255,.45);transition:all .3s}
.slider-dots button.active{background:#fff;width:26px}

/* ── Category tiles ── */
.cat-tile .cat-arrow{transition:all .2s;opacity:.35}
.cat-tile:hover .cat-arrow{transform:translateX(3px);opacity:1;color:var(--pri)}
.cat-tile:hover{border-color:var(--pri)}
.doc-row{cursor:pointer}
.thumb-box{background:linear-gradient(135deg,#eef2ff,#e0e7ff);display:flex;align-items:center;justify-content:center;overflow:hidden}

/* ── Featured "gold" card: thick shimmering metallic-gold border ── */
.gold-card{position:relative;border:4px solid transparent;border-radius:16px;
    background:linear-gradient(var(--card),var(--card)) padding-box,
        linear-gradient(120deg,#8a6d1a,#fcf6ba,#d4af37,#fff8d6,#bf953f,#fcf6ba,#8a6d1a) border-box;
    background-size:100% 100%,250% 100%;
    box-shadow:0 6px 22px rgba(191,149,63,.32);
    animation:goldShimmer 4.5s linear infinite;
    transition:transform .2s ease,box-shadow .2s ease}
.gold-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(191,149,63,.5)}
@keyframes goldShimmer{to{background-position:0 0,-250% 0}}
.gold-card::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:3;
    background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.6) 50%,transparent 56%);
    background-size:220% 100%;background-repeat:no-repeat;
    animation:goldGlint 4.5s ease-in-out infinite}
@keyframes goldGlint{0%{background-position:175% 0}20%,100%{background-position:-75% 0}}
@media(prefers-reduced-motion:reduce){.gold-card,.gold-card::after{animation:none}}