/* =====================================================================
   research-pages.css — สไตล์ร่วมของหน้าเอกสาร/แบบฟอร์ม (คลาสขึ้นต้น rp-)
   ใช้กับ: ResearchEthics.php, frmBudget.php, intellectualProperty.php
   เปลี่ยนสีทั้งหน้าได้ด้วยคลาสธีมบน .rp-wrap  (ค่าเริ่มต้น = ชมพูพาสเทล)
     .rp-theme-ethics  → ม่วง-ชมพู (หน้าจริยธรรมการวิจัย)
   ===================================================================== */

/* ---------- ตัวแปรสี (ธีมเริ่มต้น: ชมพูพาสเทล) ---------- */
.rp-wrap {
    --rp-50:#fff7fa; --rp-100:#ffecf3; --rp-200:#ffd6e5; --rp-300:#ffbcd3; --rp-400:#f794b8;
    --rp-500:#e2709a; --rp-600:#b94d76;
    --rp-ink:#4a2c3a; --rp-muted:#8a6f7b;
    --rp-primary:var(--rp-500); --rp-primary-dark:var(--rp-600);
    --rp-soft:var(--rp-100); --rp-border:var(--rp-200);
    --rp-orange:#ff9a6b;

    --rp-hero-bg:linear-gradient(120deg, #d9668f 0%, #c2507d 50%, #9b5fc4 100%);
    --rp-hero-shadow:0 12px 28px rgba(185,77,118,.30);
    --rp-hero-icon-bg:rgba(255,255,255,.95);
    --rp-hero-icon-color:#c2507d;

    --rp-tab-ink:var(--rp-600);
    --rp-tab-active:linear-gradient(135deg, var(--rp-400), var(--rp-500));
    --rp-tab-shadow:0 4px 12px rgba(226,112,154,.35);

    --rp-input-bg:var(--rp-50);
    --rp-input-radius:999px;
}

/* ---------- ธีมม่วง-ชมพู (ResearchEthics) ---------- */
.rp-wrap.rp-theme-ethics {
    --rp-primary:#6d3fd8; --rp-primary-dark:#5a2fc0;
    --rp-pink:#e8458b; --rp-orange:#ff8a3d;
    --rp-soft:#f4efff; --rp-border:#ece8f5; --rp-muted:#7a7590; --rp-ink:#2b2640;
    --rp-50:#faf8ff; --rp-100:#f4efff; --rp-200:#ece8f5; --rp-300:#d4cde8;

    --rp-hero-bg:linear-gradient(120deg, #5D093B 0%, #D76086 45%, #E9A5BB 100%);
    --rp-hero-shadow:0 10px 30px rgba(109,63,216,.25);
    --rp-hero-icon-bg:rgba(255,255,255,.2);
    --rp-hero-icon-color:#fff;

    --rp-tab-ink:#4a4560;
    --rp-tab-active:var(--rp-primary);
    --rp-tab-shadow:0 4px 12px rgba(109,63,216,.3);

    --rp-input-bg:#fff;
    --rp-input-radius:12px;
}

/* ---------- ส่วนหัว (Hero) ---------- */
.rp-hero {
    position:relative; overflow:hidden; margin:1.5rem 0 1.25rem; padding:1.6rem 1.75rem;
    border-radius:18px; color:#fff; background:var(--rp-hero-bg); box-shadow:var(--rp-hero-shadow);
}
.rp-hero::before, .rp-hero::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.14); }
.rp-hero::before { width:200px; height:200px; right:-50px; top:-80px; }
.rp-hero::after  { width:120px; height:120px; right:120px; bottom:-70px; background:rgba(255,255,255,.09); }
.rp-hero-icon {
    width:56px; height:56px; flex:0 0 56px; border-radius:16px; display:grid; place-items:center;
    background:var(--rp-hero-icon-bg); color:var(--rp-hero-icon-color); font-size:1.5rem;
    box-shadow:0 4px 14px rgba(80,20,50,.20); position:relative; z-index:1;
}
.rp-hero-title {
    font-family:'Mitr',sans-serif; font-size:1.5rem; font-weight:500; margin:0; color:#fff;
    position:relative; z-index:1; text-shadow:0 1px 2px rgba(80,20,50,.25);
}
.rp-hero p { margin:.25rem 0 0; color:rgba(255,255,255,.9); position:relative; z-index:1; }

/* ---------- แท็บ (หมวด/ประเภท) ---------- */
.rp-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem; }
.rp-tab {
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.5rem 1rem; border-radius:999px; background:#fff; border:1px solid var(--rp-border);
    font-family:'Mitr',sans-serif; font-size:.9rem; color:var(--rp-tab-ink); text-decoration:none; transition:.15s;
}
.rp-tab:hover { background:var(--rp-soft); border-color:var(--rp-primary); color:var(--rp-primary-dark); }
.rp-tab.active { background:var(--rp-tab-active); border-color:transparent; color:#fff; box-shadow:var(--rp-tab-shadow); }
.rp-badge {
    min-width:24px; padding:0 .45rem; border-radius:999px; background:var(--rp-soft);
    font-size:.75rem; text-align:center; line-height:1.6;
}
.rp-tab.active .rp-badge { background:rgba(255,255,255,.3); }

/* แท็บย่อย (ขนาดเล็ก อยู่ในแผง) */
.rp-subtabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:-.25rem 0 1rem; }
.rp-subtabs .rp-tab { padding:.35rem .85rem; font-size:.84rem; }

/* ---------- ช่องค้นหา ---------- */
.rp-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 14px; }
.rp-search { position:relative; flex:1 1 260px; }
.rp-search > i { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--rp-muted); }
.rp-search input {
    width:100%; padding:.6rem 2.5rem .6rem 2.4rem; border-radius:var(--rp-input-radius);
    border:1px solid var(--rp-border); background:var(--rp-input-bg); outline:none; transition:.15s;
}
.rp-search input:focus { background:#fff; border-color:var(--rp-primary); box-shadow:0 0 0 4px var(--rp-soft); }
.rp-panel-head .rp-search { flex:0 1 300px; }
.rp-search .rp-spin {
    position:absolute; right:14px; top:50%; width:16px; height:16px; margin-top:-8px;
    border:2px solid var(--rp-soft); border-top-color:var(--rp-primary); border-radius:50%;
    animation:rp-rotate .7s linear infinite; display:none;
}
.rp-search .rp-clear {
    position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:transparent;
    color:var(--rp-muted); width:26px; height:26px; border-radius:50%; display:none; cursor:pointer;
}
.rp-search .rp-clear:hover { background:var(--rp-soft); color:var(--rp-primary); }
.rp-search.has-text .rp-clear { display:block; }
.rp-loading .rp-search .rp-spin { display:block; }
.rp-loading .rp-search .rp-clear { display:none; }
@keyframes rp-rotate { to { transform:rotate(360deg); } }
.rp-results { transition:opacity .15s; }
.rp-loading .rp-results { opacity:.45; pointer-events:none; }

/* ---------- ปุ่ม ---------- */
.rp-btn {
    border:0; border-radius:12px; padding:10px 18px; font-weight:600; color:#fff; text-decoration:none;
    background:linear-gradient(120deg, var(--rp-primary), var(--rp-pink, var(--rp-600)));
    display:inline-flex; align-items:center; gap:6px;
}
.rp-btn:hover { color:#fff; filter:brightness(1.07); }
.rp-btn-light { background:#fff; color:var(--rp-primary); border:1px solid var(--rp-border); }
.rp-btn-light:hover { color:var(--rp-primary); background:var(--rp-soft); }

/* ---------- แถบประกาศ ---------- */
.rp-announce {
    display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:14px; margin-bottom:16px;
    background:linear-gradient(120deg,#fff6ec,#fff0f6); border:1px solid #ffe0c7; text-decoration:none; color:#7a3e10;
}
.rp-announce:hover { color:#7a3e10; border-color:var(--rp-orange); }
.rp-announce i { font-size:1.3rem; color:var(--rp-orange); }

/* ---------- แผงรายการ ---------- */
.rp-panel {
    background:#fff; border:1px solid var(--rp-soft); border-radius:18px; padding:1.25rem;
    box-shadow:0 4px 18px rgba(226,112,154,.08);
}
.rp-panel-head { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-bottom:1rem; }
.rp-panel-title {
    display:flex; align-items:center; gap:.6rem; margin:0; flex:1 1 auto;
    font-family:'Mitr',sans-serif; font-size:1.2rem; font-weight:500; color:var(--rp-primary-dark);
}
.rp-panel-title > i {
    width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:11px;
    background:var(--rp-soft); color:var(--rp-primary); font-size:1rem;
}
.rp-section-label {
    display:flex; align-items:center; gap:.5rem; margin:.25rem 0 .75rem; padding:.5rem .85rem;
    border-radius:12px; background:var(--rp-50); border-left:4px solid var(--rp-400, var(--rp-primary));
    font-family:'Mitr',sans-serif; font-size:.95rem; color:var(--rp-primary-dark);
}

.rp-summary { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; color:var(--rp-muted); font-size:.9rem; margin-bottom:10px; }
.rp-summary b { color:var(--rp-ink); font-size:1.05rem; }

/* ---------- รายการเอกสาร ----------
   ค่าเริ่มต้น = การ์ดแยกชิ้น ; ถ้าอยู่ใน .rp-panel = แถวเรียบในแผง */
.rp-item {
    display:flex; align-items:center; gap:1rem; padding:14px 16px; margin-bottom:10px;
    background:#fff; border:1px solid var(--rp-border); border-radius:14px;
    text-decoration:none; color:var(--rp-ink);
    transition:transform .15s, box-shadow .15s, border-color .15s, background .15s;
}
a.rp-item:hover { transform:translateY(-2px); border-color:var(--rp-300); box-shadow:0 8px 22px rgba(60,40,120,.10); color:var(--rp-ink); }
.rp-item[hidden] { display:none; }

.rp-panel .rp-item { margin:0; padding:.85rem 1rem; border-color:transparent; }
.rp-panel .rp-item + .rp-item { margin-top:.35rem; }
.rp-panel a.rp-item:hover { background:var(--rp-50); border-color:var(--rp-border); transform:translateX(3px); box-shadow:none; }

.rp-file { width:46px; height:46px; flex:0 0 46px; border-radius:12px; display:grid; place-items:center; font-size:1.3rem; }
.rp-pdf   { background:#ffe9ea; color:#e0333d; }
.rp-word  { background:#e7efff; color:#2a62d8; }
.rp-excel { background:#e4f6ec; color:#1b8a4b; }
.rp-ppt   { background:#fff0e5; color:#e0661a; }
.rp-img   { background:#f3e9ff; color:#8a3fd8; }
.rp-zip   { background:#fff7d9; color:#b68600; }
.rp-link  { background:#e6f6f4; color:#13897a; }
.rp-other { background:var(--rp-soft); color:var(--rp-primary); }
.rp-none  { background:#f3f1f2; color:#bdb3b8; }

.rp-body  { flex:1; min-width:0; }
.rp-title { display:block; font-weight:300; line-height:1.0; color:var(--rp-ink); }
a.rp-item:hover .rp-title { color:var(--rp-primary-dark); }
.rp-meta  { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.3rem; font-size:.8rem; color:var(--rp-muted); align-items:center; }
.rp-chip  { padding:0 .6rem; border-radius:999px; background:var(--rp-50); border:1px solid var(--rp-soft); line-height:1.7; }
.rp-new {
    padding:0 .6rem; border-radius:999px; color:#fff; font-weight:700; font-size:.72rem; letter-spacing:.05em; line-height:1.7;
    background:linear-gradient(120deg, var(--rp-orange), var(--rp-pink, var(--rp-500))); animation:rp-glow 2s infinite;
}
@keyframes rp-glow { 50% { box-shadow:0 0 0 4px rgba(232,69,139,.15); } }
.rp-dl {
    flex:0 0 40px; height:40px; border-radius:50%; display:grid; place-items:center;
    background:var(--rp-soft); color:var(--rp-primary); transition:.15s;
}
a.rp-item:hover .rp-dl { background:var(--rp-primary); color:#fff; }
.rp-hl { background:#fff1a8; color:inherit; padding:0 2px; border-radius:3px; }

/* ---------- ไม่พบข้อมูล ---------- */
.rp-empty { text-align:center; padding:2.75rem 1rem; color:var(--rp-muted); }
.rp-empty > i { display:block; font-size:2.5rem; color:var(--rp-300); margin-bottom:.5rem; }
.rp-empty-box { background:#fff; border:1px dashed var(--rp-border); border-radius:16px; }

/* ---------- แบ่งหน้า ---------- */
.rp-pages { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:24px 0 10px; padding:0; list-style:none; }
.rp-pages a, .rp-pages span {
    min-width:40px; height:40px; padding:0 12px; border-radius:10px; display:grid; place-items:center;
    text-decoration:none; background:#fff; border:1px solid var(--rp-border); color:var(--rp-tab-ink); font-weight:500;
}
.rp-pages a:hover { border-color:var(--rp-primary); color:var(--rp-primary); }
.rp-pages .active span { background:var(--rp-primary); border-color:var(--rp-primary); color:#fff; }

/* ---------- มือถือ / ลดการเคลื่อนไหว ---------- */
@media (max-width:575.98px) {
    .rp-hero { padding:1.25rem; }
    .rp-hero-title { font-size:1.25rem; }
    .rp-panel { padding:.9rem; }
    .rp-panel-head .rp-search { flex-basis:100%; }
    .rp-item, .rp-panel .rp-item { gap:.75rem; padding:.75rem .6rem; }
    .rp-dl { display:none; }
}
@media (prefers-reduced-motion: reduce) {
    .rp-item, .rp-new { transition:none; animation:none; }
    a.rp-item:hover, .rp-panel a.rp-item:hover { transform:none; }
}