:root { --bs-body-font-family: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif; }
body, .btn, .form-control, .form-select, .tooltip, .popover { font-family: var(--bs-body-font-family); }
body { background: #f5f6f8; font-size: .925rem; }
.card { border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.card-header { background: #fff; font-weight: 600; }
.table td, .table th { vertical-align: middle; }
.table-sm td, .table-sm th { padding: .35rem .5rem; }
pre.json { background: #1e1e1e; color: #d4d4d4; padding: .75rem; border-radius: .375rem; max-height: 480px; overflow: auto; font-size: .8rem; white-space: pre-wrap; word-break: break-word; }
.stat { font-size: 1.6rem; font-weight: 600; line-height: 1; }
.stat-label { font-size: .8rem; color: #6c757d; }
.text-mono { font-family: SFMono-Regular, Consolas, monospace; }
.nowrap { white-space: nowrap; }
.health { border-left: 4px solid #198754; }
.health.bad { border-left-color: #dc3545; }
.health.warn { border-left-color: #ffc107; }
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 .9rem 1.4rem; border-left: 2px solid #e3e5e8; margin-left: .4rem; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -.42rem; top: .25rem; width: .75rem; height: .75rem; border-radius: 50%; background: #adb5bd; border: 2px solid #fff; }
.timeline li.k-action::before { background: #6f42c1; }
.timeline li.k-status::before { background: #0d6efd; }
.timeline li.k-note::before { background: #198754; }
.hint { border-left: 4px solid #6f42c1; background: #f6f0ff; }
.masked { color: #6c757d; letter-spacing: .02em; }
.overdue { color: #dc3545; font-weight: 600; }
.navbar-nav .nav-link { white-space: nowrap; }
dl.params { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .1rem .75rem; margin: 0; font-size: .85rem; }
dl.params dt { font-weight: 500; color: #6c757d; white-space: nowrap; }
dl.params dd { margin: 0; word-break: break-word; }
/* แจ้งเตือนสด (assets/realtime.js) */
.rt-toast { width: 340px; border-left: 4px solid #7c3aed !important; animation: rt-in .45s cubic-bezier(.2,.8,.2,1); }
.rt-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #7c3aed; box-shadow: 0 0 0 0 rgba(124,58,237,.6); animation: rt-pulse 1.6s ease-out infinite; }
.rt-status { font-weight: 500; }
.rt-status.rt-live i { animation: rt-blink 2s ease-in-out infinite; }
tr.rt-new > td { animation: rt-row 3.5s ease-out; }
tr.rt-flash > td { animation: rt-row 1.8s ease-out; }
.rt-badge-new { font-size: .62rem; vertical-align: middle; animation: rt-blink 1.4s ease-in-out 5; }
.rt-pop { animation: rt-pop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes rt-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes rt-pulse { 80%, 100% { box-shadow: 0 0 0 .55rem rgba(124,58,237,0); } }
@keyframes rt-blink { 50% { opacity: .35; } }
@keyframes rt-row { 0%, 30% { background: rgba(124,58,237,.16); } 100% { background: transparent; } }
@keyframes rt-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rt-toast, .rt-dot, tr.rt-new > td, tr.rt-flash > td, .rt-pop, .rt-badge-new, .rt-status i { animation: none !important; } }
/* เมนูผู้ใช้บนแถบเมนู */
.user-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .2rem .65rem .2rem .25rem; border-radius: 999px; color: #fff;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.user-chip:hover, .user-chip:focus-visible, .user-chip.show { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }
.user-chip::after { opacity: .7; }
.user-chip .who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.user-chip .nm { font-weight: 600; font-size: .85rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .rl { font-size: .7rem; opacity: .7; }
.avatar { width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff;
    background: linear-gradient(135deg, #7c3aed, #db2777); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.avatar.lg { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; box-shadow: none; }
.user-dd { min-width: 15rem; border: 0; border-radius: .85rem; padding-top: .35rem; }
/* หน้าอนุมัติ */
.apr-card { border-left: 4px solid #dc3545; overflow: hidden; }
.apr-card .card-header { background: linear-gradient(90deg, rgba(220,53,69,.06), transparent 60%); border-bottom: 1px solid rgba(0,0,0,.05); }
.apr-icon { width: 2rem; height: 2rem; border-radius: .6rem; display: inline-grid; place-items: center; background: rgba(220,53,69,.12); color: #dc3545; }
.apr-label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; margin-bottom: .3rem; }
.apr-reason { margin: 0 0 1rem; padding: .55rem .8rem; border-left: 3px solid #7c3aed; background: #f6f0ff; border-radius: 0 .5rem .5rem 0; font-size: .9rem; }
.apr-decide { background: #f8f9fb; border: 1px solid #eef0f3; border-radius: .75rem; padding: .9rem; height: 100%; }
.apr-empty i { font-size: 2.4rem; color: #198754; }
.pgroups { display: grid; gap: .65rem; }
.pgroup { border: 1px solid #eef0f3; border-radius: .6rem; padding: .5rem .75rem; background: #fff; }
.pgroup-h { font-size: .75rem; font-weight: 600; color: #7c3aed; margin-bottom: .2rem; }
.avatar.sm { width: 1.6rem; height: 1.6rem; font-size: .75rem; box-shadow: none; }