/* ================================================================
   ห้องสมุดสื่อธรรมะ วัดวิหารธรรม — ธีมผู้สูงวัย (Elderly-Friendly)
   หลักการ: ตัวอักษรใหญ่ คมชัด ปุ่มใหญ่ น้อยขั้นตอน ไม่มีสิ่งรบกวน
   ================================================================ */

/* ---------- ตัวอักษร / สีพื้นฐาน ---------- */
:root {
    --vhd-cream:      #FFFDF7;   /* พื้นหลังครีมอบอุ่น */
    --vhd-card:       #FFFFFF;
    --vhd-ink:        #33291A;   /* ตัวอักษรหลัก เข้มน้ำตาล */
    --vhd-ink-soft:   #5C4D33;
    --vhd-gold:       #8C5A10;   /* ทองเข้ม ใช้เป็นสีหลัก */
    --vhd-gold-mid:   #B07C1F;
    --vhd-gold-soft:  #F6EAD3;
    --vhd-line:       #E5D9BE;
    --vhd-link:       #0B5FA5;   /* ลิงก์น้ำเงินเข้ม ชัดเจน */
    --vhd-danger:     #B3261E;
    --vhd-green:      #1E7145;
    --vhd-mark:       #FFE76B;   /* ไฮไลต์คำค้น */
    --vhd-radius:     14px;
}

/* ระดับขนาดตัวอักษร (ปุ่ม ก / A+ / A++) */
html { font-size: 112.5%; }                                /* ปกติ = 18px */
html[data-textsize="1"] { font-size: 125%; }               /* ใหญ่ = 20px */
html[data-textsize="2"] { font-size: 143%; }               /* ใหญ่มาก = 23px */

html { scroll-behavior: smooth; }

body {
    font-family: 'Sarabun', 'Leelawadee UI', 'Segoe UI', Tahoma, sans-serif;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--vhd-ink);
    background-color: var(--vhd-cream);
    -webkit-text-size-adjust: 100%;
}

/* ตัวอักษรหนาขึ้นเล็กน้อยทั่วไป เพราะตัวบางอ่านยากบนจอ */
p, li, label { font-weight: 500; }
strong, b { font-weight: 700; }

a { color: var(--vhd-link); text-decoration-thickness: 2px; }
a:hover { color: #084A80; }

/* ---------- ปุ่มขยายตัวอักษร (มุมขวาบน ทุกหน้า) ---------- */
.textsize-bar {
    position: sticky; top: 0; z-index: 1030;
    background: var(--vhd-gold-soft);
    border-bottom: 2px solid var(--vhd-line);
    display: flex; justify-content: flex-end; align-items: center;
    gap: .35rem; padding: .3rem .6rem;
}
.textsize-bar .ts-label { font-size: .95rem; font-weight: 700; margin-right: auto; color: var(--vhd-ink-soft); }
.ts-btn {
    min-width: 52px; min-height: 48px; font-weight: 800; font-size: 1.05rem;
    border: 2px solid var(--vhd-gold); border-radius: 10px;
    background: #fff; color: var(--vhd-gold); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ts-btn.active { background: var(--vhd-gold); color: #fff; }
.ts-btn:focus-visible { outline: 3px solid #1565C0; outline-offset: 2px; }

/* ---------- แถบเมนูหลัก ---------- */
.vhd-navbar {
    background: linear-gradient(180deg, #fff 0%, #FDF6E9 100%);
    border-bottom: 3px solid var(--vhd-gold);
    box-shadow: 0 2px 6px rgba(60, 45, 15, .08);
}
.vhd-navbar .navbar-brand { font-weight: 800; color: var(--vhd-gold); }
.vhd-navbar .nav-link {
    font-weight: 700; font-size: 1.06rem; color: var(--vhd-ink);
    min-height: 48px; display: inline-flex; align-items: center;
    padding: .45rem .9rem !important; border-radius: 10px;
    border-bottom: 4px solid transparent;
}
.vhd-navbar .nav-link:hover, .vhd-navbar .nav-link:focus { background: var(--vhd-gold-soft); }
.vhd-navbar .nav-link.active { color: var(--vhd-gold); border-bottom-color: var(--vhd-gold-mid); background: var(--vhd-gold-soft); }
.navbar-toggler { border: 2px solid var(--vhd-gold); padding: .5rem .75rem; font-size: 1.2rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(140, 90, 16, .35); }

/* ---------- ปุ่มขนาดใหญ่ (ทั่วระบบ) ---------- */
.btn { font-weight: 700; }
.btn-big {
    min-height: 58px; font-size: 1.18rem; padding: .8rem 1.6rem;
    border-radius: 12px; border-width: 2px;
}
.btn-gold {
    background: var(--vhd-gold); border: 2px solid #734A0B; color: #fff;
}
.btn-gold:hover, .btn-gold:focus { background: #744909; color: #fff; }
.btn-outline-gold {
    border: 2px solid var(--vhd-gold); color: var(--vhd-gold); background: #fff;
}
.btn-outline-gold:hover { background: var(--vhd-gold); color: #fff; }
.btn-download {
    background: #F9A825; border: 2px solid #C07E00; color: #33210A;
}
.btn-download:hover { background: #F59D00; color: #1F1405; }
.btn:focus-visible { outline: 3px solid #1565C0; outline-offset: 2px; }

/* ---------- หน้าแรก: 4 ปุ่มใหญ่ ---------- */
.home-hero { background: linear-gradient(180deg, #FDF3DD 0%, var(--vhd-cream) 100%); }
.home-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.home-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 150px; padding: 1.1rem .8rem; text-align: center;
    background: var(--vhd-card); border: 3px solid var(--vhd-gold-mid);
    border-radius: var(--vhd-radius); color: var(--vhd-ink);
    text-decoration: none; box-shadow: 0 3px 0 rgba(115, 74, 11, .25);
    transition: transform .12s ease;
}
.home-tile:hover, .home-tile:focus { text-decoration: none; transform: translateY(-2px); background: #FFF9EE; color: var(--vhd-ink); }
.home-tile:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(115,74,11,.25); }
.home-tile .tile-icon { font-size: 3rem; line-height: 1.1; }
.home-tile .tile-name { font-size: 1.3rem; font-weight: 800; margin-top: .3rem; }
.home-tile .tile-desc { font-size: .95rem; color: var(--vhd-ink-soft); font-weight: 600; }
@media (max-width: 575.98px) { .home-tiles { grid-template-columns: 1fr; } .home-tile { min-height: 108px; } }

/* ---------- ช่องค้นหาใหญ่ ---------- */
.big-search .form-control, .big-search .form-select {
    min-height: 60px; font-size: 1.25rem; border: 2px solid var(--vhd-gold-mid); border-radius: 12px;
}
.big-search .form-control:focus, .big-search .form-select:focus {
    border-color: var(--vhd-gold); box-shadow: 0 0 0 4px rgba(176, 124, 31, .25);
}
.form-label { font-weight: 700; font-size: 1.05rem; }
.form-control:focus, .form-select:focus { border-color: var(--vhd-gold-mid); box-shadow: 0 0 0 3px rgba(176,124,31,.2); }

/* ---------- การ์ดสื่อ ---------- */
.media-card {
    background: var(--vhd-card); border: 2px solid var(--vhd-line);
    border-radius: var(--vhd-radius); overflow: hidden; height: 100%;
    transition: box-shadow .15s ease, transform .12s ease;
}
.media-card:hover { box-shadow: 0 6px 18px rgba(60,45,15,.14); transform: translateY(-2px); }
.media-card .card-cover {
    aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
    border-bottom: 2px solid var(--vhd-line); background: var(--vhd-gold-soft);
}
.media-card .cover-fallback {
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
    font-size: 4rem; border-bottom: 2px solid var(--vhd-line); background: var(--vhd-gold-soft);
}
.media-card .card-title { font-size: 1.16rem; font-weight: 800; color: var(--vhd-ink); }
.media-card .card-meta { font-size: .96rem; color: var(--vhd-ink-soft); font-weight: 600; }

/* ---------- หน้าชมสื่อ ---------- */
.page-title { font-weight: 800; color: var(--vhd-gold); }
.breadcrumb-simple {
    background: var(--vhd-gold-soft); border: 1px solid var(--vhd-line); border-radius: 10px;
    font-size: 1rem; font-weight: 700; padding: .55rem 1rem; color: var(--vhd-ink-soft);
}
.breadcrumb-simple a { color: var(--vhd-link); }
.pdf-frame { border: 2px solid var(--vhd-line); border-radius: 10px; background: #525659; min-height: 70vh; width: 100%; }
.video-frame { border: 2px solid var(--vhd-line); border-radius: 10px; overflow: hidden; background: #000; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- เครื่องเล่นเสียงพิเศษสำหรับผู้สูงวัย ---------- */
.audio-player-box {
    background: linear-gradient(180deg, #FFF8EA 0%, #F6EAD3 100%);
    border: 3px solid var(--vhd-gold-mid); border-radius: var(--vhd-radius);
    padding: 1.4rem; text-align: center;
}
.audio-player-box .ap-play {
    width: 96px; height: 96px; border-radius: 50%;
    font-size: 2.6rem; line-height: 1;
    background: var(--vhd-gold); color: #fff; border: 4px solid #734A0B;
    display: inline-flex; align-items: center; justify-content: center;
}
.audio-player-box .ap-play:hover { background: #744909; }
.audio-player-box .ap-side {
    width: 64px; height: 64px; border-radius: 14px; font-size: 1rem; font-weight: 800;
    border: 2px solid var(--vhd-gold); background: #fff; color: var(--vhd-gold);
}
.audio-player-box .ap-time { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.audio-player-box input[type="range"] { width: 100%; height: 16px; accent-color: var(--vhd-gold); cursor: pointer; }

/* ---------- ปุ่มแชร์ ---------- */
.share-group .btn { min-height: 52px; font-size: 1.05rem; }
.btn-line { background: #06C755; border: 2px solid #049B41; color: #fff; }
.btn-line:hover { background: #05A846; color: #fff; }
.btn-fb { background: #1877F2; border: 2px solid #0F5BCA; color: #fff; }
.btn-fb:hover { background: #0F5BCA; color: #fff; }

/* ---------- ไฮไลต์คำค้น ---------- */
mark { background: var(--vhd-mark); color: var(--vhd-ink); font-weight: 800; padding: 0 3px; border-radius: 3px; }
.search-result-card { border-left: 8px solid var(--vhd-gold-mid); }
.page-hit {
    background: #fff; border: 2px solid var(--vhd-line); border-radius: 10px; padding: .8rem 1rem;
}
.page-hit .ph-no { font-weight: 800; color: var(--vhd-gold); white-space: nowrap; }

/* ---------- ป้ายสถานะ ---------- */
.badge { font-size: .95rem; font-weight: 800; padding: .45em .7em; }
.badge-answered { background: #D9F2E3; color: #116A3C; border: 1px solid #9AD7B6; }
.badge-pending   { background: #FFF3CD; color: #7A5B00; border: 1px solid #EDD48A; }
.badge-closed    { background: #ECECEC; color: #555; border: 1px solid #CCC; }
.badge-new       { background: #FDE2E1; color: #8C1D18; border: 1px solid #F5B5B1; }
.badge-scan      { background: #ECE4F5; color: #4A2B7A; border: 1px solid #CBB8E8; }

/* ---------- ถาม-ตอบ / ข้อเสนอแนะ ---------- */
.qa-card { border-left: 8px solid var(--vhd-gold-soft); }
.qa-card.answered { border-left-color: var(--vhd-green); }
.answer-box { background: #F0F9F3; border: 2px solid #BEE3CC; border-radius: 10px; }
.question-box { background: #FFFBF2; border: 2px solid var(--vhd-line); border-radius: 10px; }

/* ---------- ส่วนท้าย ---------- */
.vhd-footer {
    background: #4A3A1E; color: #F3E8D2; margin-top: 3rem; padding: 2rem 0;
    font-size: 1rem; font-weight: 600;
}
.vhd-footer a { color: #FFD98A; }

/* ---------- หลังบ้าน (admin) ---------- */
.admin-sidebar .nav-link {
    font-weight: 700; font-size: 1.02rem; color: var(--vhd-ink);
    min-height: 48px; display: flex; align-items: center; gap: .55rem;
    border-radius: 10px; padding: .5rem .9rem;
}
.admin-sidebar .nav-link:hover { background: var(--vhd-gold-soft); }
.admin-sidebar .nav-link.active { background: var(--vhd-gold); color: #fff; }
.admin-sidebar .nav-link .badge { margin-left: auto; }
.table th { background: var(--vhd-gold-soft); font-weight: 800; }
.table td, .table th { padding: .7rem .65rem; vertical-align: middle; font-size: 1rem; }
.stat-card { border: 2px solid var(--vhd-line); border-radius: var(--vhd-radius); background: #fff; }
.stat-card .sc-num { font-size: 2rem; font-weight: 800; color: var(--vhd-gold); }
.stat-card .sc-label { font-size: 1rem; font-weight: 700; color: var(--vhd-ink-soft); }

/* ---------- อัปโหลด ---------- */
.dropzone {
    border: 3px dashed var(--vhd-gold-mid); border-radius: var(--vhd-radius);
    background: #FFFDF4; padding: 2rem 1rem; text-align: center; cursor: pointer;
}
.dropzone.dragover { background: var(--vhd-gold-soft); border-color: var(--vhd-gold); }
.dropzone .dz-icon { font-size: 3rem; }
.progress { height: 28px; border-radius: 8px; border: 1px solid var(--vhd-line); }
.progress-bar { background: var(--vhd-gold-mid); font-size: 1rem; font-weight: 800; color: #fff; line-height: 26px; }

/* ---------- ทั่วไป ---------- */
.container-content { max-width: 1080px; margin-inline: auto; padding-inline: 1rem; }
.card { border-radius: var(--vhd-radius); }
.alert { font-size: 1.02rem; font-weight: 600; border-radius: 12px; }
.alert-success { background: #E9F7EE; border: 2px solid #A9DCC0; color: #14532D; }
.alert-danger  { background: #FDECEA; border: 2px solid #F1B8B3; color: #7F1D1A; }
.alert-info    { background: #E8F2FB; border: 2px solid #AFCDEC; color: #0F3D66; }
.alert-warning { background: #FFF6DE; border: 2px solid #EBD18A; color: #6B4E00; }
.text-muted-2 { color: var(--vhd-ink-soft); }
.help-step { border: 2px solid var(--vhd-line); border-radius: var(--vhd-radius); background: #fff; padding: 1.2rem; height: 100%; }
.help-step .hs-no {
    width: 52px; height: 52px; border-radius: 50%; background: var(--vhd-gold); color: #fff;
    font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.pagination .page-link { font-size: 1.1rem; font-weight: 700; min-width: 48px; text-align: center; padding: .55rem .8rem; }
.pagination .page-item.active .page-link { background: var(--vhd-gold); border-color: var(--vhd-gold); }

/* โฟกัสชัดเจนสำหรับการใช้คีย์บอร์ด */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #1565C0; outline-offset: 2px;
}

/* ลดการเคลื่อนไหวสำหรับผู้ที่ไวต่อ motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}