/* ════════════════════════════════════════════════════════════════
   webservice — style เฉพาะเว็บนี้ (โหลดต่อจาก style.css ของ Medeesoft)
   ห้ามแก้ style.css ตรงๆ เพื่อให้อัปเดตธีมจาก Medeesoft ได้ด้วยการคัดลอกทับ
   ════════════════════════════════════════════════════════════════ */

/* ── Page shell / title bar / panel — ใช้ร่วมทุกหน้า ── */
.ws-shell {
    --ws-line: rgba(219,228,240,.7);
    --ws-shadow: 0 1px 2px rgba(15,23,42,.04), 0 20px 40px -20px rgba(15,23,42,.22), 0 8px 18px -12px rgba(15,23,42,.12);
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* ความกว้างเนื้อหาแบบ apple.com — กว้างสุด 980px อยู่กลางจอ จอเล็กกว่านี้เต็มความกว้าง */
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}
.ws-titlebar {
    margin-bottom: 0;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(37,99,235,.18);
    overflow: hidden;
}
.ws-panel {
    border: 1px solid var(--ws-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--ws-shadow);
}
/* ── ไอคอนบน title bar: พื้นแก้วโปร่งเดิม + glyph สีขาว เหมือน Medeesoft /apps/shell/ ── */
.title-bar .title-bar-icon,
.title-bar .ms-titlebar-refresh { color: #fff !important; }

/* ปุ่มหน้าหลัก + รีเฟรช ชิดขวาเป็นกลุ่มเดียว */
.ws-titlebar-actions {
    order: 999;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ws-titlebar-actions .ms-titlebar-refresh { margin-left: 0; }

.ws-panel-hd {padding: 13px 18px 11px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 11px; }
.ws-panel-hd-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: var(--fs-lg, 18px); flex-shrink: 0; background: #e0e7ff; color: #4338ca; }
.ws-panel-hd-title { font-size: var(--fs-md, 14px); font-weight: 900; color: #172033; }
.ws-panel-hd-sub { font-size: var(--fs-xs, 11px); font-weight: 700; color: #64748b; margin-top: 1px; }