/*
 * ธีมของระบบ 751409 v2 — ยึดตาม THEME.md (โทนชมพู, มุมโค้ง, micro-interaction)
 * ตัวแปรสีชุดเดียวกับ HRMS เพื่อให้ระบบของคณะดูเป็นชุดเดียวกัน
 */
/*
 * ขนาดตัวอักษรหลัก — ทุกขนาดในระบบเป็น rem จึงขยายตามค่านี้ทั้งหมด
 * ใช้ % แทน px เพื่อยังเคารพขนาดตัวอักษรที่ผู้ใช้ตั้งไว้ในเบราว์เซอร์
 * (Sarabun ตัวเล็กกว่าฟอนต์ละตินที่ขนาดเดียวกัน จึงตั้งใหญ่กว่า 16px ปกติ)
 */
html { font-size: 112.5%; }            /* 18px */
@media (max-width: 767.98px) {
    html { font-size: 106.25%; }       /* 17px บนมือถือ กันตารางล้นจอ */
}

:root {
    --primary-pink: #e91e63;
    --primary-pink-dark: #c2185b;
    --primary-pink-lightest: #fff0f5;
    --primary-red: #dc3545;
    --primary-green: #198754;
    --soft-pink: #fce4ec;
    --text-gray: #5f6368;
    --page-bg: #f0f2f5;
    --text-main: #3c4043;
    --sidebar-w: 268px;
}

body {
    font-family: 'Sarabun', system-ui, -apple-system, sans-serif;
    background: var(--page-bg);
    color: var(--text-main);
}

.text-pink { color: var(--primary-pink) !important; }
.text-pink-lightest { color: #ff80ab !important; }
.text-muted-app { color: var(--text-gray) !important; }

/* ---------- Layout ---------- */
.app-navbar {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-between;
    min-height: 58px;
}

.app-navbar .navbar-brand { display: flex; align-items: baseline; gap: .5rem; }
.brand-code { font-weight: 700; color: var(--primary-pink); letter-spacing: .5px; }

.app-shell { display: flex; align-items: flex-start; gap: 0; }
.app-main { flex: 1 1 auto; padding: 1.25rem; min-width: 0; }
.app-footer { background: #fff; border-top: 1px solid rgba(0, 0, 0, .06); }

/* ลิขสิทธิ์อยู่กึ่งกลางเหมือนเดิม ส่วนเลขเวอร์ชันชิดขวา (absolute เพื่อไม่ให้ดันตัวกลางเบี้ยว) */
.app-footer-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0 1rem;
    text-align: center;
}

.app-footer-version {
    position: absolute;
    right: 1rem;
    opacity: .8;
    white-space: nowrap;
}

/* จอแคบ: ให้ไหลต่อท้ายแทนการซ้อนทับข้อความลิขสิทธิ์ */
@media (max-width: 767.98px) {
    .app-footer-inner { flex-wrap: wrap; }
    .app-footer-version { position: static; width: 100%; }
}

@media (min-width: 992px) {
    .app-sidebar {
        width: var(--sidebar-w);
        flex: 0 0 var(--sidebar-w);
        background: #fff;
        border-right: 1px solid rgba(0, 0, 0, .06);
        position: sticky;
        top: 58px;
        height: calc(100vh - 58px);
        overflow-y: auto;
    }
    .app-main { padding: 1.5rem 2rem; }
}

/* ---------- Sidebar ---------- */
/*
 * Bootstrap ตั้ง .offcanvas-lg .offcanvas-body { display: flex } ไว้ที่จอ >= 992px
 * (สำหรับ offcanvas แบบ responsive) ซึ่งทำให้เมนูข้างเรียงเป็น "แนวนอน" บนจอเดสก์ท็อป
 * จึงต้องบังคับ flex-direction: column กลับมา — ใช้ selector ที่ specificity สูงกว่า
 * (.app-sidebar ul.sidebar-menu) เพื่อไม่ต้องพึ่งลำดับการโหลด stylesheet
 */
.app-sidebar ul.sidebar-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: .75rem .5rem;
    list-style: none;
    overflow-y: auto;
}

.app-sidebar .sidebar-item { width: 100%; margin-bottom: .15rem; }
.app-sidebar .submenu { width: 100%; }

.sidebar-link,
.submenu-item > a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: 10px;
    color: #555;
    text-decoration: none;
    font-size: .9rem;
    transition: background .15s, color .15s;
}

.sidebar-link:hover,
.submenu-item > a:hover {
    background: var(--primary-pink-lightest);
    color: var(--primary-pink);
}

.sidebar-item.active > .sidebar-link {
    background: var(--soft-pink);
    color: var(--primary-pink);
    font-weight: 600;
}

.submenu { list-style: none; padding-left: 1.1rem; margin: .15rem 0 .35rem; }
.submenu-item > a { font-size: .85rem; padding: .4rem .7rem; }
.submenu-item.active > a { color: var(--primary-pink); font-weight: 600; }

/* ---------- Cards ---------- */
.card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    transition: transform .18s, box-shadow .18s;
}

a.card:hover,
.card.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.sticky-card { position: sticky; top: 74px; }

.info-section {
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
}

.section-header { background: var(--primary-pink-lightest); }

/* ---------- Buttons ---------- */
.btn-pink {
    background: var(--primary-pink);
    color: #fff;
    border: none;
    border-radius: 10px;
    transition: transform .15s, background .15s;
}

.btn-pink:hover,
.btn-pink:focus {
    background: var(--primary-pink-dark);
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-secondary { border-radius: 10px; }

/* ---------- Badges ---------- */
.badge-status {
    display: inline-block;
    padding: .28rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    background: var(--soft-pink);
    color: var(--primary-pink);
    white-space: nowrap;
}

.badge-status-open { background: #d1e7dd; color: var(--primary-green); }
.badge-status-closed { background: #f8d7da; color: var(--primary-red); }

.badge-tag {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    background: #e0f2f1;
    color: #00796b;
}

/* ---------- Misc ---------- */
.avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--soft-pink);
    color: var(--primary-pink);
    font-weight: 600;
}

.login-page { background: linear-gradient(160deg, var(--soft-pink), var(--page-bg) 60%); min-height: 100vh; }

.table > thead th {
    font-size: .8rem;
    text-transform: none;
    color: var(--text-gray);
    font-weight: 600;
    border-bottom-width: 1px;
}

/* ---------- DataTables (integration dataTables.bootstrap5) ให้เข้ากับธีมหลัก ---------- */
.dataTables_wrapper { font-size: .875rem; }
.dataTables_wrapper .row { --bs-gutter-x: 0; row-gap: .75rem; }

/* ช่องค้นหา */
.dataTables_wrapper .dataTables_filter label { color: var(--text-gray); font-size: .85rem; }
.dataTables_wrapper .dataTables_filter input.form-control {
    border-radius: 12px;
    border-color: rgba(0, 0, 0, .12);
    padding: .35rem .8rem;
    min-width: 220px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dataTables_wrapper .dataTables_filter input.form-control:focus {
    border-color: var(--primary-pink);
    box-shadow: 0 0 0 .2rem rgba(233, 30, 99, .15);
}

/* หัวตาราง + ลูกศรเรียง */
table.dataTable { width: 100% !important; }
/* คอลัมน์ชื่อเรื่อง/หัวข้อได้พื้นที่ก่อน ไม่ถูกบีบเหลือคำละบรรทัด (จอแคบจะเลื่อนตารางแนวนอนแทน) */
table.dataTable th.col-title { min-width: 18rem; }
table.dataTable th.col-keywords { min-width: 10rem; }
table.dataTable > thead > tr > th { background: var(--primary-pink-lightest); border-bottom: 1px solid rgba(233, 30, 99, .15); white-space: nowrap; }
table.dataTable > thead > tr > th:first-child { border-top-left-radius: 12px; }
table.dataTable > thead > tr > th:last-child { border-top-right-radius: 12px; }
table.dataTable > thead > tr > th.sorting_asc,
table.dataTable > thead > tr > th.sorting_desc { color: var(--primary-pink-dark); }
table.dataTable > thead .sorting_asc::before,
table.dataTable > thead .sorting_desc::after { color: var(--primary-pink); opacity: 1 !important; }

/* แถว */
table.dataTable > tbody > tr { transition: background-color .12s ease; }
.table-hover.dataTable > tbody > tr:hover > * { --bs-table-hover-bg: var(--primary-pink-lightest); --bs-table-accent-bg: var(--primary-pink-lightest); }
table.dataTable > tbody > tr > td { border-bottom-color: rgba(0, 0, 0, .05); }
table.dataTable td.dataTables_empty { color: var(--text-gray); padding: 2rem 0; }

/* สรุปจำนวน + แบ่งหน้า */
.dataTables_wrapper .dataTables_info { color: var(--text-gray); font-size: .8rem; padding-top: .6rem !important; }
.dataTables_wrapper .pagination { gap: .25rem; flex-wrap: wrap; }
.dataTables_wrapper .pagination .page-link {
    border: none;
    border-radius: 10px !important;
    min-width: 2.1rem;
    text-align: center;
    color: var(--text-main);
    background: transparent;
    font-size: .82rem;
    transition: background-color .15s ease, color .15s ease;
}
.dataTables_wrapper .pagination .page-link:hover { background: var(--soft-pink); color: var(--primary-pink); }
.dataTables_wrapper .pagination .page-link:focus { box-shadow: 0 0 0 .2rem rgba(233, 30, 99, .15); }
.dataTables_wrapper .pagination .page-item.active .page-link {
    background: var(--primary-pink);
    color: #fff;
    box-shadow: 0 2px 6px rgba(233, 30, 99, .3);
}
.dataTables_wrapper .pagination .page-item.disabled .page-link { color: rgba(0, 0, 0, .25); background: transparent; }

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate { text-align: left !important; }
    .dataTables_wrapper .dataTables_filter input.form-control { min-width: 0; width: 100%; margin-left: 0 !important; }
    .dataTables_wrapper .pagination { justify-content: flex-start !important; }
}

/* breadcrumb ของหน้า — ดูสไตล์ได้ที่ท้ายไฟล์ (.app-breadcrumb) */
.navbar-dropdown-hover .dropdown-menu { border-radius: 14px; }
.dropdown-item:hover { background: var(--primary-pink-lightest); color: var(--primary-pink); }
.dropdown-item.active { background: var(--soft-pink); color: var(--primary-pink); }

/* ---------- แบนเนอร์สไลด์หน้า dashboard (v1: .hp-banner) ---------- */
/* ภาพเป็นเอกสารกำหนดการ ต้องกว้างเต็มกรอบจึงอ่านออก — มีปุ่มเปิดขนาดเต็มไว้ซูมต่อ */
.dashboard-banner { border-radius: 14px; overflow: hidden; background: var(--soft-pink); }
.dashboard-banner .carousel-item img { display: block; width: 100%; height: auto; }
.dashboard-banner .carousel-indicators { margin-bottom: .6rem; }
.dashboard-banner .carousel-indicators [data-bs-target] {
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .9);
    background-color: var(--primary-pink);
    opacity: .45;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.dashboard-banner .carousel-indicators .active { opacity: 1; }
.dashboard-banner .carousel-control-prev,
.dashboard-banner .carousel-control-next { width: 8%; opacity: 0; transition: opacity .2s ease; }
.dashboard-banner:hover .carousel-control-prev,
.dashboard-banner:hover .carousel-control-next { opacity: .85; }
.dashboard-banner .carousel-control-prev-icon,
.dashboard-banner .carousel-control-next-icon { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
@media (max-width: 767.98px) {
    .dashboard-banner .carousel-control-prev,
    .dashboard-banner .carousel-control-next { opacity: .85; }
}

/* ---------- ตารางเวลา (FullCalendar) ให้เข้ากับธีมหลัก ---------- */
#appCalendar {
    --fc-border-color: rgba(0, 0, 0, .07);
    --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: var(--primary-pink-lightest);
    --fc-today-bg-color: var(--primary-pink-lightest);
    --fc-now-indicator-color: var(--primary-pink);
    --fc-highlight-color: rgba(233, 30, 99, .12);
    --fc-button-text-color: var(--primary-pink);
    --fc-button-bg-color: #fff;
    --fc-button-border-color: rgba(233, 30, 99, .35);
    --fc-button-hover-bg-color: var(--soft-pink);
    --fc-button-hover-border-color: var(--primary-pink);
    --fc-button-active-bg-color: var(--primary-pink);
    --fc-button-active-border-color: var(--primary-pink);
    --fc-event-bg-color: var(--primary-pink);
    --fc-event-border-color: var(--primary-pink);
    --fc-list-event-hover-bg-color: var(--primary-pink-lightest);
    font-family: inherit;
    color: var(--text-main);
}
#appCalendar .fc-toolbar-title { font-size: 1.15rem; font-weight: 700; color: var(--text-main); }
#appCalendar .fc-button {
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 500;
    padding: .35rem .8rem;
    box-shadow: none !important;
    text-transform: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
#appCalendar .fc-button:hover { transform: translateY(-1px); }
#appCalendar .fc-button-primary:not(:disabled).fc-button-active,
#appCalendar .fc-button-primary:not(:disabled):active { color: #fff; }
#appCalendar .fc-button-primary:disabled { color: var(--text-gray); border-color: rgba(0, 0, 0, .1); opacity: .6; }
#appCalendar .fc-col-header-cell-cushion { color: var(--text-gray); font-weight: 600; font-size: .8rem; text-decoration: none; padding: .5rem 0; }
#appCalendar .fc-daygrid-day-number { color: var(--text-main); font-size: .85rem; text-decoration: none; }
#appCalendar .fc-day-today .fc-daygrid-day-number {
    background: var(--primary-pink); color: #fff; border-radius: 50%;
    min-width: 1.8rem; height: 1.8rem; display: inline-flex; align-items: center; justify-content: center; margin: 2px;
}
#appCalendar .fc-scrollgrid { border-radius: 12px; overflow: hidden; }
#appCalendar .fc-event { border-radius: 6px; padding: 1px 4px; font-size: .78rem; cursor: pointer; }
#appCalendar .fc-daygrid-more-link { color: var(--primary-pink); font-size: .78rem; }
#appCalendar .fc-list-day-cushion { background: var(--primary-pink-lightest); }
#appCalendar[data-can-manage="1"] .fc-daygrid-day { cursor: pointer; }

/* กำหนดการที่ผู้ดูแลเพิ่ม = ชมพูเข้ม, ตารางนำเสนอ = ชมพูอ่อน */
#appCalendar .fc-event-schedule { background: var(--primary-pink-dark); border-color: var(--primary-pink-dark); color: #fff; }
#appCalendar .fc-event-present { background: var(--soft-pink); border-color: #f8bbd0; }
#appCalendar .fc-event-present .fc-event-main,
#appCalendar .fc-event-present .fc-event-time,
#appCalendar .fc-event-present .fc-event-title { color: var(--primary-pink-dark); }
#appCalendar .fc-list-event.fc-event-schedule,
#appCalendar .fc-list-event.fc-event-present { background: transparent; }
#appCalendar .fc-list-event.fc-event-schedule .fc-list-event-dot { border-color: var(--primary-pink-dark); }
#appCalendar .fc-list-event.fc-event-present .fc-list-event-dot { border-color: #f48fb1; }
#appCalendar .fc-list-event td { color: var(--text-main); }

.calendar-legend { display: inline-block; width: .8rem; height: .8rem; border-radius: 4px; margin-right: .35rem; vertical-align: -1px; }
.calendar-legend-schedule { background: var(--primary-pink-dark); }
.calendar-legend-present { background: var(--soft-pink); border: 1px solid #f8bbd0; }

@media (max-width: 575.98px) {
    #appCalendar .fc-header-toolbar { flex-direction: column; gap: .5rem; }
    #appCalendar .fc-toolbar-title { font-size: 1rem; }
}

/* ---------- SweetAlert2 ให้เข้ากับธีม ---------- */
.app-swal { border-radius: 18px; font-family: inherit; }
.app-swal .swal2-title { font-size: 1.25rem; color: var(--text-main); }
.app-swal .swal2-html-container { font-size: .95rem; color: var(--text-gray); }
.app-swal .swal2-actions .swal2-styled { border-radius: 12px; padding: .55rem 1.4rem; font-weight: 500; }
.app-swal .swal2-actions .swal2-cancel { background: #fff !important; color: var(--text-gray) !important; border: 1px solid rgba(0, 0, 0, .15); }
.app-swal .swal2-icon.swal2-question { border-color: var(--primary-pink); color: var(--primary-pink); }
.app-swal .swal2-loader { border-color: var(--primary-pink) transparent var(--primary-pink) transparent; }

/* ---------- tooltip ของปฏิทิน ---------- */
.cal-tooltip { --bs-tooltip-max-width: 280px; --bs-tooltip-bg: #fff; --bs-tooltip-color: var(--text-main); --bs-tooltip-opacity: 1; }
.cal-tooltip .tooltip-inner {
    text-align: left;
    padding: .6rem .75rem;
    border-radius: 12px;
    border: 1px solid rgba(233, 30, 99, .2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    font-family: 'Sarabun', system-ui, sans-serif;
    font-size: .8rem;
    line-height: 1.45;
}
.cal-tooltip .cal-tip-kind { font-size: .7rem; color: var(--primary-pink); font-weight: 600; margin-bottom: .1rem; }
.cal-tooltip .cal-tip-title { font-weight: 700; font-size: .85rem; margin-bottom: .3rem; }
.cal-tooltip .cal-tip-line { color: var(--text-gray); }
.cal-tooltip .cal-tip-line .bi { color: var(--primary-pink); margin-right: .15rem; }
.cal-tooltip .cal-tip-desc { margin-top: .3rem; white-space: pre-line; }
.cal-tooltip .cal-tip-hint { margin-top: .35rem; font-size: .7rem; color: var(--text-gray); font-style: italic; }

/* ---------- สถานะอนุมัติ + วันที่/ผู้อนุมัติ ---------- */
.approval-meta { margin-top: .3rem; font-size: .75rem; color: var(--text-gray); line-height: 1.35; }
.approval-meta .bi { color: var(--primary-pink); margin-right: .25rem; font-size: .7rem; }
.approval-status-compact .approval-meta { font-size: .7rem; }
.approval-status-compact .approval-meta div { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- ปุ่มไฟล์แนบของงานวิจัย (แยกสีตามชนิด) ---------- */
.btn-file {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: 12px;
    border: 1px solid transparent;
    padding: .45rem .75rem;
    font-weight: 500;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn-file .bi { font-size: 1.15rem; line-height: 1; }
.btn-file:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.btn-file-ext { font-size: .68rem; font-weight: 600; letter-spacing: .3px; padding: .1rem .4rem; border-radius: 6px; background: rgba(255, 255, 255, .7); }

/* รายงาน 751409 (ร่าง) — ส้ม/แดงอ่อน */
.btn-file-research { background: #fff4ec; border-color: #ffd3b5; color: #c2410c; }
.btn-file-research:hover { background: #ffe8d6; color: #9a3412; border-color: #fdba8c; }

/* รายงานฉบับสมบูรณ์ — ชมพูหลักของระบบ เด่นสุด */
.btn-file-research_final { background: var(--primary-pink); border-color: var(--primary-pink); color: #fff; }
.btn-file-research_final:hover { background: var(--primary-pink-dark); border-color: var(--primary-pink-dark); color: #fff; }
.btn-file-research_final .btn-file-ext { background: rgba(255, 255, 255, .25); color: #fff; }

/* ไฟล์ข้อมูล (csv/xlsx) — เขียวแบบ spreadsheet */
.btn-file-survey { background: #ecfdf3; border-color: #b7ebc9; color: #15803d; }
.btn-file-survey:hover { background: #d9f7e4; color: #166534; border-color: #86d9a6; }

/* ---------- ช่องทางติดต่ออาจารย์ที่ปรึกษา (PDF) ---------- */
.contact-pdf-frame { height: 80vh; min-height: 480px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); background: #f8f9fa; }
.contact-pdf-frame object { display: block; }
@media (max-width: 767.98px) { .contact-pdf-frame { height: 70vh; } }

/* ---------- ตารางที่ต้องการตัวอักษรใหญ่กว่าปกติ (เช่น นักศึกษาลงทะเบียน) ---------- */
table.dataTable.table-comfortable { font-size: 1rem; }
table.dataTable.table-comfortable > thead > tr > th { font-size: .9rem; }
table.dataTable.table-comfortable > tbody > tr > td { padding-top: .7rem; padding-bottom: .7rem; }
table.dataTable.table-comfortable th.col-title { min-width: 11rem; }

/* ---------- กลุ่มนำเสนอ ---------- */
.present-group-card.is-mine { box-shadow: 0 0 0 2px var(--primary-pink), 0 2px 10px rgba(0, 0, 0, .04); }
.present-row-mine > * { background: var(--primary-pink-lightest) !important; }
.js-slot-table .js-slot-order { max-width: 5rem; }

/* ---------- ภาระงานที่ปรึกษา ---------- */
.workload-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.2rem; padding: .15rem .6rem; border-radius: 999px;
    background: var(--primary-pink-lightest); color: var(--primary-pink);
    font-weight: 600; text-decoration: none;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.workload-count:hover { background: var(--soft-pink); color: var(--primary-pink-dark); transform: scale(1.08); box-shadow: 0 2px 8px rgba(233, 30, 99, .2); }
.workload-count.is-total { background: var(--primary-pink); color: #fff; }
.workload-count.is-total:hover { background: var(--primary-pink-dark); color: #fff; }
.workload-count.is-zero { background: transparent; color: var(--text-gray); font-weight: 400; }

/* ความกว้างคอลัมน์ตารางภาระงานบนหน้าจอ */
.workload-table .col-no { width: 60px; }
.workload-table .col-id { width: 130px; }
.workload-table .col-name { width: 230px; }
.workload-table .col-term { width: 90px; }
.workload-table .col-role { width: 120px; }

/* ---------- พิมพ์ / บันทึกเป็น PDF ขนาด A4 ---------- */
.print-only { display: none; }

@page {
    size: A4 portrait;
    margin: 14mm 12mm 16mm 12mm;
    @bottom-right { content: counter(page) " / " counter(pages); font-family: 'Sarabun', sans-serif; font-size: 8.5pt; color: #666; }
}

@media print {
    html { font-size: 10pt !important; }
    body { background: #fff !important; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .app-navbar, .app-sidebar, .app-footer, .no-print, .screen-only, .page-header, .alert { display: none !important; }
    .print-only { display: block !important; }
    .app-shell { display: block !important; }
    .app-main { padding: 0 !important; }
    .card { box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; }
    .table-responsive { overflow: visible !important; }
    a { color: inherit !important; text-decoration: none !important; }

    /* หัวเอกสาร */
    .print-doc-header { border-bottom: 1.5pt solid var(--primary-pink); padding-bottom: 3mm; margin-bottom: 4mm; }
    .print-doc-org { font-size: 9pt; color: #555; }
    .print-doc-title { font-size: 15pt; font-weight: 700; margin: 1mm 0 2.5mm; }
    .print-doc-meta { width: 100%; border-collapse: collapse; font-size: 10pt; }
    .print-doc-meta th { width: 30mm; white-space: nowrap; color: #555; font-weight: 600; text-align: left; padding: .6mm 2mm .6mm 0; vertical-align: top; }
    .print-doc-meta td { padding: .6mm 4mm .6mm 0; vertical-align: top; }

    /* ตารางข้อมูล — กว้างพอดี A4 (186mm) หัวตารางซ้ำทุกหน้า แถวไม่ขาดข้ามหน้า */
    .workload-table { width: 100% !important; table-layout: fixed; border-collapse: collapse; font-size: 9.5pt; }
    .workload-table thead { display: table-header-group; }
    .workload-table tr { page-break-inside: avoid; break-inside: avoid; }
    .workload-table th, .workload-table td { border: .5pt solid #bbb !important; padding: 1.6mm 1.8mm !important; vertical-align: top !important; }
    .workload-table thead th { background: #fce4ec !important; color: #000 !important; font-size: 9pt; font-weight: 700; white-space: normal !important; }
    .workload-table .col-no { width: 13mm; }
    .workload-table thead th.col-no, .workload-table thead th.col-term { white-space: nowrap !important; }
    .workload-table .col-id { width: 22mm; }
    .workload-table .col-name { width: 38mm; }
    .workload-table .col-title { width: auto; min-width: 0 !important; }
    .workload-table .col-term { width: 16mm; }
    .workload-table .col-role { width: 21mm; }
    .workload-table td.small, .workload-table .small { font-size: 9.5pt !important; }
    .workload-table .text-muted-app { color: #555 !important; font-size: 8.5pt; }
    .workload-table .badge-status { background: none !important; color: #000 !important; padding: 0 !important; font-size: 9pt; white-space: normal; }
}


/* ---------- การแจ้งเตือน (กระดิ่งบนแถบบน + หน้ารวม) ---------- */
.badge-unread {
    background: var(--primary-pink);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
}

.notification-bell-count {
    position: absolute;
    top: .15rem;
    right: .1rem;
    padding: .15rem .35rem;
    line-height: 1;
}

.notification-menu {
    width: min(23rem, calc(100vw - 2rem));
}

.notification-menu-list {
    max-height: 60vh;
    overflow-y: auto;
}

.notification-menu .dropdown-item:active,
.notification-menu .dropdown-item:active * {
    background: var(--soft-pink);
    color: var(--text-main);
}

.notification-unread {
    background: var(--primary-pink-lightest);
    border-left: 3px solid var(--primary-pink);
}

.notification-list .list-group-item:hover {
    background: var(--soft-pink);
}

/* ---------- เส้นทางนำทาง (breadcrumb) ---------- */
/* เป็นชิปกลม ๆ โทนเดียวกับเมนู: หน้าที่เปิดอยู่เป็นชิปสีชมพูอ่อน ที่เหลือจางลงและกดได้
   บนจอแคบเลื่อนแนวนอนแทนการตัดบรรทัด เพื่อไม่ให้ดันหัวเรื่องลงไป */
.app-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .1rem;
    margin: 0 0 .35rem;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.app-breadcrumb::-webkit-scrollbar { display: none; }

.app-breadcrumb > li {
    display: flex;
    align-items: center;
    min-width: 0;
}

.app-breadcrumb .crumb {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 16rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--text-gray);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

/* ตัวอักษรอยู่ใน span ชั้นใน เพราะ text-overflow ใช้กับ flex container โดยตรงไม่ได้ */
.app-breadcrumb .crumb-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-breadcrumb a.crumb:hover,
.app-breadcrumb a.crumb:focus-visible {
    background: var(--soft-pink);
    color: var(--primary-pink-dark);
}

.app-breadcrumb a.crumb:focus-visible { outline: 2px solid var(--primary-pink); outline-offset: 1px; }

.app-breadcrumb .crumb i { font-size: .9em; }

/* กลุ่มเมนูที่ไม่ใช่ลิงก์ (เช่น "วิจัย 409") */
.app-breadcrumb .crumb-plain { color: var(--text-gray); opacity: .85; }

/* หน้าที่เปิดอยู่ */
.app-breadcrumb .crumb-current {
    background: var(--primary-pink-lightest);
    color: var(--primary-pink-dark);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(233, 30, 99, .16);
}

.app-breadcrumb .crumb-sep {
    color: #c7cbd1;
    font-size: .62rem;
    padding: 0 .1rem;
    flex: 0 0 auto;
}

/* จอแคบ: เหลือไอคอนบ้านอย่างเดียว และย่อชิปให้สั้นลง */
@media (max-width: 575.98px) {
    .app-breadcrumb .crumb-home-label { display: none; }
    .app-breadcrumb .crumb { max-width: 10rem; }
}

@media print {
    .app-breadcrumb { display: none; }
}

/* ---------- ปุ่มส่งออกเป็นไฟล์ตาราง (Excel / CSV) ---------- */
/* ใช้สีเขียวให้ตรงกับไอคอน Excel และแยกจากปุ่มสีชมพูที่เป็นการกระทำหลักของหน้า */
.btn-excel {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: #fff;
}

.btn-excel:hover,
.btn-excel:focus {
    background: #146c43;
    border-color: #146c43;
    color: #fff;
}

.btn-excel:focus-visible { box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .3); }

/* แบบเส้นขอบ — ใช้กับปุ่มไอคอนเล็ก ๆ ในตาราง ที่ไม่ควรเด่นกว่าข้อมูล */
.btn-outline-excel {
    background: #fff;
    border-color: #a7e3bf;
    color: var(--primary-green);
}

.btn-outline-excel:hover,
.btn-outline-excel:focus {
    background: #ecfdf3;
    border-color: #7fd3a3;
    color: #146c43;
}

.btn-outline-excel:focus-visible { box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .25); }

/* ---------- การ์ดดาวน์โหลดคู่มือ PDF ---------- */
.guide-card {
    border: 1px solid #ececf0;
    border-radius: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.guide-card:hover {
    border-color: var(--soft-pink);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    transform: translateY(-1px);
}

.guide-card-icon {
    font-size: 1.9rem;
    line-height: 1;
    color: #d64545;          /* แดงแบบไอคอน PDF ให้เห็นชนิดไฟล์ทันที */
    flex: 0 0 auto;
}

/* ---------- Word cloud คำสำคัญงานวิจัย ---------- */
.word-cloud-wrap {
    background: linear-gradient(180deg, #fff 0%, var(--primary-pink-lightest) 100%);
    border: 1px solid #f1e3ea;
    border-radius: 14px;
    padding: .75rem;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.word-cloud-canvas { display: block; max-width: 100%; }

/* แบบสำรอง (และแบบที่ใช้จริงถ้าไลบรารีโหลดไม่ได้) — เรียงเป็นแท็ก */
.word-cloud-fallback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .75rem;
    padding: .5rem;
    line-height: 1.35;
}

.word-cloud-fallback .word-tag {
    color: var(--primary-pink-dark);
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
}

.word-cloud-fallback .word-tag:nth-child(3n) { color: #8e24aa; }
.word-cloud-fallback .word-tag:nth-child(3n+1) { color: var(--primary-pink); }
.word-cloud-fallback .word-tag:hover { color: #000; transform: scale(1.06); }

/* แถบสัดส่วนในตารางอันดับคำ */
.keyword-bar {
    background: #f1f1f4;
    border-radius: 999px;
    height: .5rem;
    overflow: hidden;
}

.keyword-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-pink) 0%, #f06292 100%);
}

@media print {
    .word-cloud-wrap { background: none; border-color: #ddd; }
}

/* ---------- ตารางสถิติการใช้บริการ (รอบปีงบประมาณ) ---------- */
.usage-table th,
.usage-table td { font-size: .8rem; white-space: nowrap; }

.usage-table thead th {
    background: var(--primary-pink-lightest);
    color: var(--primary-pink-dark);
    font-weight: 600;
    vertical-align: middle;
}

.usage-table .usage-quarter { background: var(--soft-pink); }
.usage-table .usage-month { width: 5.5%; }
.usage-table .usage-year-total { background: #fff3cd; color: #7a5b00; }

/* ชื่อหลักสูตรในคอลัมน์แรก — ตั้งแนวตั้งเพื่อประหยัดความกว้าง */
.usage-table .usage-program {
    background: #fafafa;
    font-weight: 600;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    padding: .35rem .2rem;
}

.usage-table .usage-subtotal td { background: #fdf3f7; font-weight: 500; }
.usage-table .usage-grand td { background: #f4f4f6; font-weight: 700; }

@media print {
    .usage-table { font-size: 8.5pt; }
    .usage-table th, .usage-table td { padding: .18rem .25rem !important; font-size: 8.5pt; }
    .usage-table thead th, .usage-table .usage-subtotal td, .usage-table .usage-grand td,
    .usage-table .usage-year-total { background: #f2f2f2 !important; color: #000 !important; }
}