/* Pastel Thai Calendar Dashboard
   ธีมทับ style.css (โหลดหลัง style.css) — ตัวแปรสีอยู่ที่ :root แก้ที่เดียวเปลี่ยนทั้งระบบ */

:root {
    --ps-teal-1: #d7f5f3;
    --ps-teal-2: #b8eae9;
    --ps-teal-3: #79d8d6;
    --ps-teal-ink: #1f4f4e;
    --ps-pink: #d6336c;
    --ps-pink-soft: #fde4ec;
    --ps-pink-mid: #f7b6cd;
    --ps-lilac: #e6dafc;
    --ps-lilac-ink: #5b3fa8;
    --ps-mint: #cdf2dd;
    --ps-mint-ink: #1f7a4a;
    --ps-sky: #e3f4fb;
    --ps-ink: #2b2f4a;
    --ps-muted: #8a8fa8;
    --ps-line: #e9ecf5;
    --ps-bg: #f3f7fb;
    --ps-card: #ffffff;
    --ps-radius: 14px;
    --ps-shadow: 0 6px 20px rgba(120, 140, 190, 0.12);
}

body {
    font-family: "Sarabun", "Prompt", "Noto Sans Thai", "Tahoma", "Poppins", sans-serif;
    color: var(--ps-ink);
    background: var(--ps-bg);
}

/* ---------- โครงหน้า ---------- */
.page-body-wrapper,
.main-panel,
.content-wrapper {
    background: var(--ps-bg);
}

.content-wrapper {
    padding: 1.4rem 1.6rem;
}

.footer {
    background: transparent;
    color: var(--ps-muted);
}

/* ---------- แถบบน ---------- */
.navbar.default-layout {
    background: linear-gradient(100deg, #c6f0ee 0%, #dff8f6 55%, #eefbfa 100%);
    box-shadow: 0 2px 10px rgba(121, 216, 214, 0.25);
}

.navbar.default-layout .navbar-brand-wrapper {
    background: #ffffff;
    border-right: 1px solid var(--ps-line);
    justify-content: flex-start !important;
    padding-left: 1.1rem;
}

.ps-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    line-height: 1.1;
}

.ps-brand .ps-brand-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ps-pink-soft);
    color: var(--ps-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.ps-brand .ps-brand-th {
    display: block;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--ps-ink);
}

.ps-brand .ps-brand-en {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--ps-muted);
}

.navbar.default-layout .navbar-menu-wrapper .navbar-nav .nav-item .nav-link,
.navbar.default-layout .profile-text {
    color: var(--ps-teal-ink);
}

.navbar.default-layout .img-xs {
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.navbar .navbar-dropdown {
    border: 0;
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
}

/* ---------- เมนูข้าง ---------- */
.sidebar {
    background: #ffffff;
    border-right: 1px solid var(--ps-line);
}

.sidebar .nav .nav-item.nav-profile .nav-link {
    padding: 1.2rem 1.1rem;
}

.sidebar .nav .nav-item.nav-profile .nav-link .user-wrapper .profile-image img {
    border-radius: 50%;
    border: 2px solid var(--ps-teal-2);
}

.sidebar .nav .nav-item.nav-profile .nav-link .user-wrapper .text-wrapper .profile-name {
    color: var(--ps-ink);
    font-weight: 700;
}

.sidebar .nav .nav-item.nav-profile .designation {
    color: var(--ps-muted) !important;
}

.sidebar .nav .nav-item {
    padding: 0 0.9rem;
}

.sidebar .nav .nav-item .nav-link {
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin-bottom: 4px;
    color: #4a4f6a;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar .nav .nav-item .nav-link .menu-icon,
.sidebar .nav .nav-item .nav-link .menu-title {
    color: #4a4f6a;
}

.sidebar .nav .nav-item .nav-link:hover {
    background: var(--ps-sky);
    color: var(--ps-teal-ink);
}

.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item .nav-link.active {
    background: var(--ps-pink-soft);
}

.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item .nav-link.active .menu-title,
.sidebar .nav .nav-item .nav-link.active i {
    color: var(--ps-pink);
    font-weight: 700;
}

/* ---------- การ์ด / แบนเนอร์ ---------- */
.card {
    border: 0;
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    background: var(--ps-card);
}

.card .card-title {
    color: var(--ps-ink);
}

.ps-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 28px;
    margin-bottom: 1.2rem;
    border-radius: var(--ps-radius);
    background: linear-gradient(100deg, #fde8f0 0%, #eaf6fb 60%, #cdeff0 100%);
    box-shadow: var(--ps-shadow);
    overflow: hidden;
    position: relative;
}

.ps-banner::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.ps-banner .ps-banner-ico {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ps-pink-mid);
    color: var(--ps-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.ps-banner h3 {
    margin: 0;
    font-weight: 700;
    color: var(--ps-ink);
    font-size: 1.5rem;
}

.ps-banner p {
    margin: 2px 0 0;
    color: var(--ps-muted);
}

/* ---------- ฟอร์ม ---------- */
label {
    color: var(--ps-ink);
    font-weight: 600;
}

.form-control,
select.form-control {
    border: 1px solid var(--ps-line);
    border-radius: 10px;
    background-color: #fff;
    color: var(--ps-ink);
    height: auto;
    padding: 0.6rem 0.9rem;
}

.form-control:focus {
    border-color: var(--ps-teal-3);
    box-shadow: 0 0 0 3px rgba(121, 216, 214, 0.25);
}

#inpOtM,
#inpOtY {
    display: inline-block;
    width: 280px;
    max-width: 100%;
    margin: 0 12px 12px 0;
}

/* ---------- ปุ่ม ---------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
}

.btn-primary {
    background: var(--ps-pink);
    border-color: var(--ps-pink);
    color: #fff;
    box-shadow: 0 4px 12px rgba(214, 51, 108, 0.25);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #c22a5f !important;
    border-color: #c22a5f !important;
    color: #fff;
}

.btn-success {
    background: var(--ps-mint);
    border-color: var(--ps-mint);
    color: var(--ps-mint-ink);
}

.btn-success:hover,
.btn-success:focus {
    background: #b9ebce !important;
    border-color: #b9ebce !important;
    color: var(--ps-mint-ink);
}

.btn-default {
    background: #fff;
    border: 1px solid var(--ps-line);
    color: var(--ps-ink);
}

.btn-default:hover {
    background: var(--ps-sky);
}

.btn-danger {
    background: var(--ps-pink-soft);
    border-color: var(--ps-pink-soft);
    color: var(--ps-pink);
}

.btn-danger:hover,
.btn-danger:focus {
    background: var(--ps-pink-mid) !important;
    border-color: var(--ps-pink-mid) !important;
    color: #a31c4c;
}

/* ---------- ตาราง ---------- */
.table thead th {
    background: var(--ps-sky);
    color: var(--ps-teal-ink);
    border-bottom: 0;
    font-weight: 700;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--ps-line);
}

.table-hover tbody tr:hover {
    background: #f6fbfe;
}

.table-success,
.table-success > td {
    background: var(--ps-mint) !important;
}

/* ---------- Modal ---------- */
.modal-content {
    border: 0;
    border-radius: var(--ps-radius);
    box-shadow: 0 16px 40px rgba(80, 100, 150, 0.25);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(100deg, #fde8f0, #dff6f5);
    border-bottom: 0;
}

.modal-header .modal-title {
    color: var(--ps-ink);
    font-weight: 700;
}

.modal-footer {
    border-top: 1px solid var(--ps-line);
}

/* ---------- ป้ายรายการในกล่องรายละเอียด (modal) ---------- */
#otlistDet .modal-body .t0,
#otlistDet .modal-body .t1,
#otlistDet .modal-body .t2 {
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 6px;
    border-left: 0;
}

#otlistDet .modal-body .t0 { background: var(--ps-pink-soft); color: var(--ps-pink); }
#otlistDet .modal-body .t1 { background: var(--ps-lilac); color: var(--ps-lilac-ink); }
#otlistDet .modal-body .t2 { background: var(--ps-mint); color: var(--ps-mint-ink); }

/* ---------- คำอธิบายสี (legend) ---------- */
.ps-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 14px 0 0;
}

.ps-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ps-ink);
}

.ps-legend i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}

.ps-legend .lg-t0 i { background: #f06fa0; }
.ps-legend .lg-t1 i { background: #a98bf0; }
.ps-legend .lg-t2 i { background: #45c088; }
.ps-legend .lg-hol i { background: var(--ps-pink-mid); }

/* ---------- ระดับ responsive ---------- */
@media (max-width: 991px) {
    .content-wrapper {
        padding: 1rem;
    }

    .ps-banner {
        padding: 16px;
    }

    .ps-banner h3 {
        font-size: 1.2rem;
    }
}

/* ปุ่มล็อกอินเล็กๆ มุมขวาของแบนเนอร์ (หน้า Index) */
.ps-login-btn {
    margin-left: auto;
    position: relative;
    z-index: 1;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    color: var(--ps-teal-ink);
    background: var(--ps-teal-2);
    border: 1px solid var(--ps-teal-2);
    border-radius: 999px;
    white-space: nowrap;
}

.ps-login-btn:hover,
.ps-login-btn:focus {
    color: var(--ps-teal-ink);
    background: #a3dfde;
    border-color: #a3dfde;
}

/* =====================================================================
   หน้านำเข้าตารางห้องสอบ (doc/Pastel Thai Exam Scheduling Dashboard.png)
   ===================================================================== */
.ps-banner-import {
    background: linear-gradient(100deg, #fde8f0 0%, #f6ecf6 45%, #dff1fa 100%);
}
.ps-banner-import .ps-banner-ico {
    background: #f9c4d8;
    color: #e0245e;
}
.ps-banner-deco {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 40px;
    color: #c9d3ea;
    position: relative;
    z-index: 1;
}
.ps-banner-deco .mdi-arrow-right { font-size: 26px; color: #a9b6dc; }
.ps-banner-deco .mdi-file-excel-box { color: #3aa76d; font-size: 52px; }

.ps-card { margin-bottom: 1rem; }
.ps-help { color: #4a4f6a; margin-bottom: 14px; line-height: 1.7; }
.ps-muted { color: var(--ps-muted); font-weight: 400; }

/* อัปโหลด */
.ps-upload-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.ps-dropzone {
    flex: 0 1 650px;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 24px;
    border: 2px dashed #d5dcea;
    border-radius: 14px;
    background: #fbfcfe;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ps-dropzone:hover,
.ps-dropzone:focus,
.ps-dropzone.drag {
    border-color: var(--ps-pink);
    background: #fff6f9;
    outline: none;
}
.ps-dropzone > .mdi { font-size: 40px; color: #3aa76d; }
.ps-drop-title { font-weight: 700; color: var(--ps-ink); }
.ps-drop-title span { color: var(--ps-pink); margin-left: 4px; }
.ps-drop-sub { font-size: 0.8rem; color: var(--ps-muted); }

.ps-msg { margin-top: 10px; min-height: 0; }
.ps-msg:not(:empty) { padding: 8px 14px; border-radius: 10px; background: var(--ps-sky); color: var(--ps-teal-ink); }
.ps-msg.ok { background: var(--ps-mint); color: var(--ps-mint-ink); }
.ps-msg.err { background: var(--ps-pink-soft); color: #a31c4c; }

.ps-batch-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.ps-batch-row label { margin: 0; }
.ps-dl { color: #1e7fd0; font-weight: 600; }
.ps-dl:hover { color: #155f9e; }

/* select ที่มีไอคอนนำหน้า */
.ps-select {
    position: relative;
    display: inline-block;
    min-width: 230px;
}
.ps-select > .mdi {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b708a;
    pointer-events: none;
    z-index: 1;
}
.ps-select > .mdi + .form-control { padding-left: 38px; }
.ps-select .form-control { width: 100%; }
.ps-select-wide { min-width: 460px; max-width: 100%; }
.ps-select-short { min-width: 110px; }

/* กำหนดผู้ใช้ + ตัวกรอง */
.ps-assign-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 14px;
}
.ps-field label { display: block; margin-bottom: 6px; }
.ps-count { margin-bottom: 8px; color: var(--ps-ink); font-size: 1.05rem; }
.ps-count b { font-size: 1.2rem; }
.ps-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.ps-field-inline { display: flex; align-items: center; gap: 8px; }
.ps-field-inline label { margin: 0; white-space: nowrap; }
.ps-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; }
.ps-filter-btns { display: flex; gap: 10px; }

/* ตาราง */
.ps-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.ps-table-title { font-size: 1.15rem; font-weight: 700; color: var(--ps-ink); display: flex; align-items: center; gap: 8px; }
.ps-table-title > .mdi { color: var(--ps-pink); font-size: 1.5rem; }
.ps-pill {
    background: var(--ps-pink-soft);
    color: var(--ps-pink);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 2px 12px;
    border-radius: 999px;
}
.ps-table { margin-bottom: 0; }
.ps-table thead th {
    background: #dff2fa;
    color: var(--ps-teal-ink);
    border: 0;
    padding: 10px 12px;
    white-space: nowrap;
    user-select: none;
}
.ps-table thead th:first-child { border-radius: 10px 0 0 10px; }
.ps-table thead th:last-child { border-radius: 0 10px 10px 0; }
.ps-table th.sortable { cursor: pointer; }
.ps-table th.sortable .arr { color: var(--ps-pink); font-size: 0.7em; margin-left: 2px; }
.ps-table tbody td {
    padding: 6px 12px;
    vertical-align: middle;
    border-top: 1px solid var(--ps-line);
    color: var(--ps-ink);
}
.ps-table tbody tr:hover { background: #f6fbfe; }
.ps-table tbody tr.saved { background: var(--ps-mint); }
.ps-table .seats { font-weight: 700; font-size: 1.05rem; }
.ps-table .selUser { min-width: 220px; }
.ps-empty { text-align: center; color: var(--ps-muted); padding: 22px; }

@media (max-width: 991px) {
    .ps-banner-deco { display: none; }
    .ps-select-wide { min-width: 0; width: 100%; }
}

/* หน้าจัดการวันหยุด (ใช้ชุดสไตล์เดียวกับหน้านำเข้าตารางห้องสอบ) */
.ps-banner-holiday .ps-banner-ico {
    background: #f9c4d8;
    color: #e0245e;
}
.ps-banner-holiday .ps-banner-deco .mdi-tree { color: #e0245e; font-size: 52px; }
.ps-grow { flex: 1 1 320px; }
.ps-grow .form-control { flex: 1; min-width: 0; }
.ps-date { min-width: 190px; }
.ps-table-head .ps-select .form-control[type="text"] { padding-left: 38px; }

/* =====================================================================
   หน้าตารางงานของฉัน (doc/Pastel Thai Work Schedule Dashboard.png)
   ===================================================================== */
.ps-banner-my .ps-banner-ico { background: #f9c4d8; color: #e0245e; }
.ps-banner-my .ps-banner-deco .mdi-calendar-check { color: #5bb8d6; font-size: 56px; }
.ps-banner-my .ps-banner-deco .mdi-clock { color: #2b2f4a; font-size: 34px; margin-left: -18px; margin-top: 26px; }

.ps-my-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.ps-month-nav { display: flex; align-items: center; gap: 10px; }
.ps-sq { width: 44px; height: 44px; padding: 0; font-size: 1.4rem; line-height: 1; }
.ps-select-month { min-width: 300px; }
.ps-select-month .form-control { font-weight: 700; }
.ps-select-sort { min-width: 280px; }

.ps-view-btns { display: flex; gap: 10px; }
.ps-tab {
    background: #fff;
    border: 1px solid var(--ps-line);
    color: var(--ps-ink);
    padding: 0.65rem 1.4rem;
    border-radius: 12px;
}
.ps-tab:hover { background: var(--ps-sky); color: var(--ps-ink); }
.ps-tab.active,
.ps-tab.active:hover {
    background: var(--ps-pink);
    border-color: var(--ps-pink);
    color: #fff;
    box-shadow: 0 6px 14px rgba(214, 51, 108, 0.28);
}
.ps-tab-today { background: #e8f0f8; border-color: #e8f0f8; color: #6b7fa3; }

/* timeline */
.ps-timeline { position: relative; }
.ps-tl-item {
    display: grid;
    grid-template-columns: 120px 34px 1fr;
    align-items: start;
    margin-bottom: 18px;
    position: relative;
}
.ps-tl-item::before {      /* เส้นแนวตั้ง */
    content: "";
    position: absolute;
    left: 137px;
    top: 0;
    bottom: -18px;
    width: 2px;
    background: #f2d9e4;
}
.ps-tl-item.t1::before { background: #e3d6fb; }
.ps-tl-item.t2::before { background: #cdf2dd; }
.ps-tl-item:last-child::before { bottom: 0; }

.ps-tl-date {
    text-align: center;
    border-radius: 14px;
    padding: 14px 6px;
    background: #fdeaf1;
}
.ps-tl-date .d { font-size: 2.4rem; font-weight: 800; line-height: 1; color: #e0245e; }
.ps-tl-date .my { margin-top: 6px; font-weight: 600; color: var(--ps-ink); }
.ps-tl-date .dw { font-size: 0.85rem; color: var(--ps-muted); }

.ps-tl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e0245e;
    margin: 20px auto 0;
    position: relative;
    z-index: 1;
}
.ps-tl-card {
    border-radius: 14px;
    border: 1px solid #f7c6d9;
    background: linear-gradient(180deg, #fff3f8 0%, #fff 100%);
    overflow: hidden;
}
.ps-tl-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 16px;
}
.ps-tl-time {
    background: #fde0eb;
    color: #e0245e;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 14px;
}
.ps-tl-title { font-weight: 700; font-size: 1.1rem; color: var(--ps-ink); }
.ps-tl-title .mdi { color: #e0245e; margin-right: 4px; }
.ps-tl-tag {
    margin-left: auto;
    background: #fde0eb;
    color: #e0245e;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 14px;
}
.ps-tl-body { padding: 4px 18px 14px; }
.ps-tl-body > div { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; color: var(--ps-ink); }
.ps-tl-body .mdi { color: #6b708a; width: 20px; text-align: center; }
.ps-tl-body b { min-width: 92px; }
.ps-tl-body span { color: #4a4f6a; }

/* งานประจำ (ม่วง) */
.ps-tl-item.t1 .ps-tl-date { background: #f1ebfc; }
.ps-tl-item.t1 .ps-tl-date .d { color: #7a2fe0; }
.ps-tl-item.t1 .ps-tl-dot { background: #7a2fe0; }
.ps-tl-item.t1 .ps-tl-card { border-color: #d9c8f7; background: linear-gradient(180deg, #f6f1fe 0%, #fff 100%); }
.ps-tl-item.t1 .ps-tl-time,
.ps-tl-item.t1 .ps-tl-tag { background: #e6dafc; color: #5b3fa8; }
.ps-tl-item.t1 .ps-tl-title .mdi { color: #7a2fe0; }

/* บันทึกแจ้ง (เขียวมิ้นต์) */
.ps-tl-item.t2 .ps-tl-date { background: #e4f8ec; }
.ps-tl-item.t2 .ps-tl-date .d { color: #1f9a5a; }
.ps-tl-item.t2 .ps-tl-dot { background: #1f9a5a; }
.ps-tl-item.t2 .ps-tl-card { border-color: #bfe9d0; background: linear-gradient(180deg, #f1fbf5 0%, #fff 100%); }
.ps-tl-item.t2 .ps-tl-time,
.ps-tl-item.t2 .ps-tl-tag { background: #cdf2dd; color: #1f7a4a; }
.ps-tl-item.t2 .ps-tl-title .mdi { color: #1f9a5a; }

.ps-tl-item.is-today .ps-tl-date { box-shadow: 0 0 0 2px #7ccf9f inset; }
.ps-tl-item.flash .ps-tl-card { box-shadow: 0 0 0 3px rgba(214, 51, 108, 0.35); transition: box-shadow 0.3s ease; }

@media (max-width: 767px) {
    .ps-tl-item { grid-template-columns: 78px 22px 1fr; }
    .ps-tl-item::before { left: 89px; }
    .ps-tl-date .d { font-size: 1.7rem; }
    .ps-tl-tag { margin-left: 0; }
    .ps-select-month, .ps-select-sort { min-width: 0; width: 100%; }
}

/* โลโก้ OT (public/img/ot-icon.png) */
.ps-brand .ps-brand-img {
    height: 42px;
    width: auto;
    display: block;
}

/* =====================================================================
   แดชบอร์ด /home (doc/Pastel Thai Work  Dashboard.png)
   ===================================================================== */
.ps-banner-dash { padding-right: 20px; }
.ps-banner-dash h3 { font-size: 1.7rem; }
.ps-banner-dash .ps-banner-deco .mdi-calendar-check { color: #f2a6c3; font-size: 70px; }
.ps-datebox {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 14px;
    padding: 12px 20px;
    box-shadow: var(--ps-shadow);
    position: relative;
    z-index: 1;
    margin-left: 14px;
}
.ps-datebox > .mdi { font-size: 34px; color: var(--ps-pink); }
.ps-datebox small { display: block; color: var(--ps-muted); font-size: 0.75rem; }
.ps-datebox b { display: block; font-size: 1.15rem; color: var(--ps-ink); }

/* KPI */
.ps-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.45fr;
    gap: 14px;
    margin-bottom: 1rem;
}
.ps-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    background: #fff;
}
.ps-kpi-ico {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.ps-kpi-label { font-weight: 700; color: var(--ps-ink); }
.ps-kpi-num { font-size: 2.2rem; font-weight: 800; line-height: 1.15; color: #1d2145; }
.ps-kpi-num small { font-size: 0.85rem; font-weight: 600; color: var(--ps-ink); }
.ps-kpi-delta { font-size: 0.78rem; margin-top: 2px; }
.ps-kpi-delta .up { color: #1f9a5a; font-weight: 600; }
.ps-kpi-delta .down { color: #e0245e; font-weight: 600; }
.ps-kpi-delta .muted, .ps-kpi-delta.muted { color: var(--ps-muted); }
.k-pink { background: linear-gradient(135deg, #fff0f6, #fff); }
.k-pink .ps-kpi-ico { background: #fcd3e3; color: #e0245e; }
.k-purple { background: linear-gradient(135deg, #f5f0ff, #fff); }
.k-purple .ps-kpi-ico { background: #e6dafc; color: #7a2fe0; }
.k-rose { background: linear-gradient(135deg, #fff1f4, #fff); }
.k-rose .ps-kpi-ico { background: #fbd5e5; color: #d6336c; }
.k-salmon { background: linear-gradient(135deg, #fff3ee, #fff); }
.k-salmon .ps-kpi-ico { background: #fde0d4; color: #e8603c; }

.ps-mywork { flex-direction: column; align-items: stretch; gap: 8px; background: linear-gradient(135deg, #f1f8fd, #fff); }
.ps-mywork-head { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.ps-mywork-head > .mdi { font-size: 1.5rem; color: var(--ps-ink); }
.ps-mywork-head a { color: var(--ps-ink); font-size: 1.4rem; }
.ps-mywork-row { display: flex; align-items: center; gap: 8px; color: var(--ps-ink); }
.ps-mywork-row > .mdi { color: #6b708a; }
.ps-mywork-row b { margin-left: auto; font-size: 1.05rem; }
.ps-mywork-row small { color: var(--ps-muted); width: 44px; }

/* ปฏิทิน + ข้าง */
.ps-dash-main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 1rem;
    align-items: start;
}
.ps-dash-main .ps-card, .ps-dash-stats .ps-card { margin-bottom: 0; height: 100%; }
.ps-side { display: grid; gap: 14px; }
.ps-cal-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.ps-legend-top { margin: 0 0 10px; justify-content: center; }
.ps-dash .d-r-m { display: none; }
.ps-dash .d-date-text .t0, .ps-dash .d-date-text .t1, .ps-dash .d-date-text .t2 { font-size: 0.68em; }
.ps-dash .dledit, .ps-dash .dlremove, .ps-dash-modal .dledit, .ps-dash-modal .dlremove { display: none !important; }

.ps-side-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ps-side-head > .mdi { font-size: 1.7rem; color: var(--ps-ink); }

.ps-today-item {
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
    border: 1px solid #f7c6d9;
    background: linear-gradient(180deg, #fff3f8, #fff);
}
.ps-today-item .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ps-today-item .tm { background: #fde0eb; color: #e0245e; font-weight: 700; border-radius: 999px; padding: 3px 12px; }
.ps-today-item .row2 { color: #4a4f6a; padding: 2px 0; font-size: 0.9rem; }
.ps-today-item .row2 .mdi { color: #6b708a; margin-right: 4px; }
.ps-today-item.t1 { border-color: #d9c8f7; background: linear-gradient(180deg, #f6f1fe, #fff); }
.ps-today-item.t1 .tm { background: #e6dafc; color: #5b3fa8; }
.ps-today-item.t2 { border-color: #bfe9d0; background: linear-gradient(180deg, #f1fbf5, #fff); }
.ps-today-item.t2 .tm { background: #cdf2dd; color: #1f7a4a; }

.ps-recent { list-style: none; padding: 0; margin: 0; }
.ps-recent li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: 0.88rem; color: var(--ps-ink); }
.ps-recent li > i { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.ps-recent .dt { color: #4a4f6a; white-space: nowrap; }
.ps-recent .tm { color: var(--ps-muted); width: 44px; }
.ps-recent .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* สรุป 3 ส่วน */
.ps-dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ps-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ps-donut {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #eef1f7;
    position: relative;
    flex: 0 0 auto;
}
.ps-donut-hole {
    position: absolute;
    top: 24px; right: 24px; bottom: 24px; left: 24px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ps-donut-hole b { font-size: 1.9rem; line-height: 1; color: var(--ps-ink); }
.ps-donut-hole small { color: var(--ps-muted); }
.ps-donut-legend { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 190px; }
.ps-donut-legend li { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.ps-donut-legend li i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.ps-donut-legend li span { flex: 1; }
.ps-donut-legend li em { font-style: normal; color: var(--ps-muted); font-size: 0.85rem; width: 62px; text-align: right; }

.ps-bars { display: flex; align-items: flex-end; justify-content: space-around; height: 190px; padding-top: 10px; }
.ps-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; width: 56px; color: var(--ps-ink); }
.ps-bar .col { width: 100%; border-radius: 8px 8px 0 0; background: #fbc3d8; }
.ps-bar .col.alt { background: #c9b4f6; }
.ps-bar span { font-size: 0.8rem; color: var(--ps-muted); margin-top: 4px; white-space: nowrap; }

.ps-dep { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.ps-dep .n { width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ps-ink); }
.ps-dep .track { flex: 1; height: 10px; border-radius: 999px; background: #efe9fb; overflow: hidden; }
.ps-dep .track div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #b79cf2, #a37cf0); }
.ps-dep b { width: 28px; text-align: right; }
.ps-dep em { font-style: normal; color: var(--ps-muted); font-size: 0.82rem; width: 52px; text-align: right; }

@media (max-width: 1399px) {
    .ps-kpis { grid-template-columns: repeat(2, 1fr); }
    .ps-mywork { grid-column: 1 / -1; }
}
@media (max-width: 1199px) {
    .ps-dash-main, .ps-dash-stats { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .ps-kpis { grid-template-columns: 1fr; }
    .ps-datebox { margin-left: 0; width: 100%; }
    .ps-banner-dash { flex-wrap: wrap; }
}

/* ตัวกรองแบบชิป (กดเลือกได้ทีละ 1 ค่าต่อกลุ่ม) — หน้านำเข้าตารางห้องสอบ */
.ps-filter-groups { display: grid; gap: 12px; }
.ps-fgroup { display: flex; align-items: flex-start; gap: 12px; }
.ps-fgroup > label { flex: 0 0 90px; margin: 7px 0 0; white-space: nowrap; }
.ps-fgroup-bar { align-items: center; }
.ps-fgroup-bar .ps-check { margin: 0; }
.ps-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.ps-chip {
    border: 1px solid var(--ps-line);
    background: #fff;
    color: var(--ps-ink);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.88rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ps-chip:hover { background: var(--ps-sky); border-color: #cfe6f3; }
.ps-chip.active,
.ps-chip.active:hover {
    background: var(--ps-pink);
    border-color: var(--ps-pink);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(214, 51, 108, 0.25);
}
@media (max-width: 767px) {
    .ps-fgroup { flex-direction: column; gap: 4px; }
    .ps-fgroup > label { margin-top: 0; }
}

/* ชิปกำหนดผู้ใช้ (รายชื่อยาวให้เลื่อนในกรอบ) */
.ps-chips-scroll { max-height: 132px; overflow-y: auto; padding: 2px 4px 2px 0; }
.ps-sep { border: 0; border-top: 1px solid var(--ps-line); margin: 14px 0; }
.ps-assign-groups .ps-count { margin: 6px 0 0; white-space: nowrap; }