/* ── HARN pastel ledger ─────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

body {
    /* บรรยากาศพาสเทล: blob นุ่ม ๆ ลอยอยู่หลังเนื้อหา */
    background-color: #FBF6EE;
    background-image:
        radial-gradient(420px 320px at 8% -4%, rgba(191, 232, 214, .55), transparent 70%),
        radial-gradient(480px 360px at 104% 12%, rgba(220, 211, 242, .5), transparent 70%),
        radial-gradient(420px 320px at 50% 112%, rgba(255, 217, 196, .45), transparent 70%);
    background-attachment: fixed;
    min-height: 100dvh;
}

/* ── โหลดหน้าแรก ── */
.harn-loading {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    font-family: 'Mitr', sans-serif;
    color: #3F3649;
}
.harn-loading svg { animation: harn-bob 2.2s ease-in-out infinite; filter: drop-shadow(0 14px 24px rgba(63,54,73,.18)); }
.harn-loading-text { font-size: 1rem; letter-spacing: .02em; opacity: .75; }
.harn-loading-bar {
    width: 180px; height: 8px; border-radius: 999px;
    background: #F0E6D9; overflow: hidden;
}
.harn-loading-bar div {
    width: 40%; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #BFE8D6, #DCD3F2, #FFD9C4);
    animation: harn-slide 1.4s ease-in-out infinite;
}
@keyframes harn-bob { 0%,100% { transform: translateY(0) rotate(-2deg);} 50% { transform: translateY(-10px) rotate(2deg);} }
@keyframes harn-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* ── เข้าหน้าใหม่แบบนุ่ม ๆ ── */
.harn-enter { animation: harn-enter .45s cubic-bezier(.2,.8,.3,1) both; }
@keyframes harn-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.harn-stagger > * { animation: harn-enter .5s cubic-bezier(.2,.8,.3,1) both; }
.harn-stagger > *:nth-child(1) { animation-delay: .03s; }
.harn-stagger > *:nth-child(2) { animation-delay: .08s; }
.harn-stagger > *:nth-child(3) { animation-delay: .13s; }
.harn-stagger > *:nth-child(4) { animation-delay: .18s; }
.harn-stagger > *:nth-child(5) { animation-delay: .23s; }
.harn-stagger > *:nth-child(6) { animation-delay: .28s; }

/* ── การ์ดหลัก ── */
.harn-card {
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px);
    border: 1px solid #F0E6D9;
    border-radius: 1.4rem;
    box-shadow: 0 8px 30px -12px rgba(63,54,73,.18);
}
.harn-card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.harn-card-hover:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -16px rgba(63,54,73,.28); }

/* ── input / ปุ่ม พื้นฐาน ── */
.harn-input {
    width: 100%;
    border: 1.5px solid #F0E6D9;
    border-radius: .9rem;
    background: #fff;
    padding: .55rem .9rem;
    font-family: 'Anuphan', sans-serif;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.harn-input:focus { border-color: #BFE8D6; box-shadow: 0 0 0 4px rgba(191,232,214,.35); }

.harn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: 'Mitr', sans-serif; font-weight: 500;
    border-radius: .9rem; padding: .55rem 1.2rem;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s;
    cursor: pointer; white-space: nowrap;
}
.harn-btn:active { transform: scale(.97); }
.harn-btn-primary { background: #3F3649; color: #FBF6EE; box-shadow: 0 10px 22px -10px rgba(63,54,73,.5); }
.harn-btn-primary:hover { filter: brightness(1.12); }
.harn-btn-mint { background: #BFE8D6; color: #14543E; }
.harn-btn-mint:hover { filter: brightness(1.04); }
.harn-btn-ghost { background: transparent; color: #3F3649; border: 1.5px solid #F0E6D9; }
.harn-btn-ghost:hover { background: #fff; }
.harn-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── ตัวเลขเงิน ── */
.money { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── scrollbar พาสเทล ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #E4D9C8; border-radius: 999px; border: 2px solid #FBF6EE; }
::-webkit-scrollbar-thumb:hover { background: #D4C5AE; }

/* ── Blazor error bar ── */
#blazor-error-ui {
    background: #F7CFDD; color: #8C2B50;
    bottom: 0; box-shadow: 0 -4px 20px rgba(63,54,73,.15);
    display: none; left: 0; padding: .7rem 1.25rem; position: fixed; width: 100%;
    z-index: 1000; font-family: 'Anuphan', sans-serif;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .9rem; top: .6rem; }
#blazor-error-ui .reload { text-decoration: underline; margin-left: .5rem; }

/* ── print: หน้า report ── */
@media print {
    body { background: #fff !important; }
    .no-print { display: none !important; }
    .harn-card { box-shadow: none; border: 1px solid #ddd; }
}

/* focus จาก FocusOnNavigate ไม่ต้องโชว์กรอบ */
h1:focus { outline: none; }