/* ═══════════════════════════════════════════════════════════════════
   Layout: with-events-light — ธีมอ่อนตาม design หน้าหลัก
   ปฏิทินพื้นอ่อน ตัวเลขเข้ม + ลิสต์กิจกรรม scroll ได้ (การ์ดเรียบ ไม่มี rail)
   prefix .dwr-cal-wel-* แยกจาก with-events (.dwr-cal-we-*)
   ─────────────────────────────────────────────────────────────────── */

.dwr-cal-wel {
    /* ── Palette ──
       ดึงจาก design token กลางของ dwr-shared (--dwr-fe-*) ก่อน แล้วค่อย fallback เป็นสี design เดิม
       → เปลี่ยนธีมทั้งเว็บที่ theme.json / dwr-shared ที่เดียว ปฏิทินตามอัตโนมัติ
       (ค่าท้าย = ค่าเดิมของ design ใช้เมื่อ dwr-shared เก่า/ไม่ได้โหลด) */
    --wel-accent:       #0068C9;   /* ปุ่ม / ลูกศร / badge text / วันนี้ */
    --wel-card-bg:      #FFFFFF;
    --wel-cal-from:     #FFFFFF;   /* กล่องปฏิทิน — ไล่สีด้านบน */
    --wel-cal-to:       #D1E9FF;   /* กล่องปฏิทิน — ไล่สีด้านล่าง */
    --wel-cal-bg:       linear-gradient(180deg, var(--wel-cal-from) 0%, var(--wel-cal-to) 100%);
    --wel-month:        #344054;   /* หัวเดือน */
    --wel-day:          #344054;   /* ตัวเลขวัน */
    --wel-dow:          #344054;   /* หัวคอลัมน์ Mo-Su */
    --wel-outside:      #667085EB; /* วันนอกเดือน (จาง) */
    --wel-event-fill:   #86DDFF;   /* วันที่มีกิจกรรม */
    --wel-today-bg:     var(--wel-accent);    /* วันนี้ — พื้นหลัง */
    --wel-today-text:   var(--wel-card-bg);   /* วันนี้ — ตัวอักษร */
    --wel-badge-bg:     #E9F1FB;
    --wel-badge-text:   var(--wel-accent);
    --wel-title:        #344054;
    --wel-body:         #55627A;
    --wel-meta:         #667085;
    --wel-sep:          #E6EBF3;   /* เส้นประคั่น */
    --wel-radius:       24px;

    position: relative;
    /* direction #1: ไม่ cap ความกว้างเอง — client ครอบผ่าน Page editor */
    margin: 40px 0;
    padding: 8px 16px 24px;
    font-family: var(--dwr-fe-font, 'Prompt', 'Kanit', 'Sarabun', 'Inter', sans-serif);
    color: var(--wel-title);
    line-height: 1.6;
}

/* ─── Header ─── */
.dwr-cal-wel-head {
    margin-bottom: 22px;
    padding: 0 4px;
}
.dwr-cal-wel-title {
    margin: 0 0 6px;
    font-size: 1.5rem;          /* WD-102: 24px ตาม Figma (เดิม 30px) */
    font-weight: 600;           /* Figma SemiBold (เดิม 700) */
    color: #182230;             /* Figma text-grey-darker (เดิม var(--wel-title)) */
    line-height: 1.3;
}
.dwr-cal-wel-subtitle {
    margin: 0;
    font-size: 18px;            /* WD-102: Figma 18px (เดิม 1rem) */
    font-weight: 400;
    color: #667085;             /* Figma text-grey (เดิม var(--wel-body)) */
    line-height: 1.6;
}

/* ─── Card ─── */
.dwr-cal-wel-card {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: 28px;
    background: var(--wel-card-bg);
    border-radius: var(--wel-radius);
    box-shadow: 0 18px 44px -20px rgba(31, 76, 145, 0.28);
    padding: 24px;
    align-items: stretch;
}

/* ═══ Mini Calendar (LIGHT) ═══ */
.dwr-cal-wel-mini {
    background: var(--wel-cal-bg);
    border-radius: 20px;
    padding: 22px 20px;
}
.dwr-cal-wel-mini-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.dwr-cal-wel-month-label {
    margin: 0;
    font-size: 26px;            /* WD-102: Figma 26px (เดิม 22px) */
    font-weight: 600;           /* Figma SemiBold (เดิม 700) */
    color: #344054;             /* Figma text-grey-dark (เดิม var(--wel-month)) */
    line-height: 1.3;
}
.dwr-cal-wel-nav { display: flex; gap: 10px; }
.dwr-cal-wel-nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--wel-card-bg);
    border: 1.5px solid var(--wel-sep);
    color: var(--wel-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s;
}
.dwr-cal-wel-nav-btn:hover,
.dwr-cal-wel-nav-btn:focus-visible {
    background: var(--wel-badge-bg);
    border-color: var(--wel-accent);
}

.dwr-cal-wel-mini-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.dwr-cal-wel-mini-table thead th {
    font-size: 19px;           /* WD-102: Figma ~19px (เดิม 14px) */
    font-weight: 500;
    color: #344054;            /* Figma text-grey-dark (เดิม var(--wel-dow)) */
    text-align: center;
    padding: 6px 0 10px;
}
.dwr-cal-wel-mini-table tbody td {
    text-align: center;
    padding: 3px;
    line-height: 1;
}

.dwr-cal-wel-day {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 19px;           /* WD-102: Figma ~19px (เดิม 1rem) */
    font-weight: 500;
    color: #667085;            /* Figma (เดิม var(--wel-day)) */
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.dwr-cal-wel-day:hover,
.dwr-cal-wel-day:focus-visible {
    background: var(--wel-event-fill);
}
/* วันนอกเดือน — โชว์แบบจาง (ตาม design) */
.dwr-cal-wel-day--outside {
    color: var(--wel-outside);
    cursor: default;
    font-weight: 500;
}
.dwr-cal-wel-day--outside:hover { background: transparent; }
/* WD-287 — เสาร์-อาทิตย์ตอนกรอง "ไม่ครอบคลุม": เป็นไปไม่ได้ที่จะมีกิจกรรม
   จางเหมือนวันนอกเดือน + ไม่มีพื้นสีแม้อยู่ในช่วงที่กรอง + ไม่ตอบสนอง hover
   (ปุ่มตั้ง aria-disabled ไว้แล้ว _bindDayClicks จึงไม่ผูก click ให้) */
.dwr-cal-wel-day--off {
    color: var(--wel-outside);
    background: transparent;
    cursor: default;
    font-weight: 500;
}
.dwr-cal-wel-day--off:hover,
.dwr-cal-wel-day--off:focus-visible { background: transparent; }

/* วันที่มีกิจกรรม — พื้นฟ้าอ่อน */
.dwr-cal-wel-day--has-events {
    background: var(--wel-event-fill);
    color: var(--wel-day);
}
/* วันที่ถูกเลือก — วงขอบน้ำเงิน */
.dwr-cal-wel-day--selected:not(.dwr-cal-wel-day--today) {
    box-shadow: inset 0 0 0 2px var(--wel-accent);
    font-weight: 700;
}
/* วันนี้ — พื้นน้ำเงินเข้ม ตัวอักษรขาว (ปรับได้จาก ตั้งค่า → สีปฏิทินธีมอ่อน) */
.dwr-cal-wel-day--today {
    background: var(--wel-today-bg, var(--wel-accent, #0068C9));
    color: var(--wel-today-text, var(--wel-card-bg, #FFFFFF));
    font-weight: 700;
}

.dwr-cal-wel-loading {
    text-align: center;
    padding: 36px 0;
    color: var(--wel-body);
    font-size: 14px;
    font-weight: 600;
}

/* ═══ Event list (scrollable) ═══ */
.dwr-cal-wel-list-wrap {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: #c6d5ea transparent;
}
.dwr-cal-wel-list-wrap::-webkit-scrollbar { width: 6px; }
.dwr-cal-wel-list-wrap::-webkit-scrollbar-track { background: #eef2f8; border-radius: 3px; }
.dwr-cal-wel-list-wrap::-webkit-scrollbar-thumb { background: #c6d5ea; border-radius: 3px; }
.dwr-cal-wel-list-wrap::-webkit-scrollbar-thumb:hover { background: var(--wel-accent); }

.dwr-cal-wel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dwr-cal-wel-event {
    border-bottom: 1px dashed var(--wel-sep);
}
.dwr-cal-wel-event:last-child { border-bottom: none; }

.dwr-cal-wel-event-btn {
    display: flex;
    gap: 16px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 14px;
    padding: 16px 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    align-items: flex-start;
}
.dwr-cal-wel-event-btn:hover,
.dwr-cal-wel-event-btn:focus-visible { background: var(--wel-badge-bg); }

/* Date badge */
.dwr-cal-wel-event-chip {
    flex-shrink: 0;
    /* WD-184: กว้างเท่ากันทุกใบ (วันเดียว/ช่วงวัน) → เนื้อหาฝั่งขวาเริ่มตรงกันทุกแถว
       เดิมวันเดียว 62px คงที่ ส่วนช่วงวัน width:auto → เหลื่อมกัน */
    width: var(--wel-chip-w, 104px);
    box-sizing: border-box;   /* padding ของ chip ช่วงวันต้องไม่บวกเพิ่มจาก width */
    height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--wel-badge-bg);
    color: var(--wel-badge-text);
    border-radius: 14px;
    line-height: 1;
}
.dwr-cal-wel-event-chip-day {
    font-size: 1.5rem;          /* 24px */
    font-weight: 700;
}
.dwr-cal-wel-event-chip-month {
    margin-top: 5px;
    font-size: 14px;           /* WD-102: Figma 14px (เดิม 12px) */
    font-weight: 300;          /* Figma Light */
}

/* Range date badge — กิจกรรมหลายวัน: "27 – 8 / ก.ค. ส.ค." (WD-129 UI)
 *
 * WD-465: เดือนต้องอยู่กึ่งกลางใต้เลขของตัวเอง
 * เดิมแถวเลขเป็น flex จัดกลาง ส่วนแถวเดือนเป็น flex space-between → เดือนถูกดันไปชิด
 * ขอบซ้าย/ขวาของ chip ขณะที่เลขอยู่เข้ามาข้างใน สองแถวจึงไม่ตรงกัน
 * และเพราะเป็น flex คนละกล่อง ต่อให้จัดกลางทั้งคู่ก็ยังไม่การันตีว่าคอลัมน์ตรงกัน
 *
 * แก้ = ทำให้ทั้งสองแถวใช้ **กริดเดียวกัน** ด้วย display:contents ที่ตัวห่อ
 * เลข/ขีด/เดือน จึงตกลงในคอลัมน์เดียวกันโดยไม่ต้องเดาความกว้างเป็นตัวเลข
 * (chip ทั้งใบเป็น aria-hidden อยู่แล้ว display:contents จึงไม่กระทบ a11y) */
.dwr-cal-wel-event-chip--range {
    /* WD-184: ใช้ความกว้างเดียวกับ chip วันเดียว (ไม่ยืดตามเนื้อหาแล้ว) */
    padding-inline: 10px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* เลข | ขีด | เลข */
    align-items: center;
    justify-items: center;
    /* WD-468: ต้องกอง 2 แถวไว้กลางกล่อง ไม่ใช่ยืดเต็มความสูง
       ค่าปริยายของ grid คือแถว auto จะ stretch เต็ม 62px → แถวถูกดันห่างกัน 14.5px
       และเหลือขอบบน/ล่างแค่ 4.8px ขณะที่ chip วันเดียว (flex column, justify-content:center)
       ได้ 9.5 / 5 / 9.5 — align-content:center ทำให้สองแบบวัดได้เท่ากันเป๊ะ */
    align-content: center;
    column-gap: 6px;
    row-gap: 5px;
}
.dwr-cal-wel-event-chip--range .dwr-cal-wel-event-chip-day,
.dwr-cal-wel-event-chip--range .dwr-cal-wel-event-chip-month {
    display: contents;
}
/* ตัวห่อหายไปกับ display:contents — ย้ายขนาด/น้ำหนักฟอนต์มาไว้ที่ตัวลูกแทน */
.dwr-cal-wel-event-chip--range .dwr-cal-wel-event-chip-num,
.dwr-cal-wel-event-chip--range .dwr-cal-wel-event-chip-dash {
    font-size: 1.5rem;
    line-height: 1;
    white-space: nowrap;
}
.dwr-cal-wel-event-chip--range .dwr-cal-wel-event-chip-num { font-weight: 700; }
.dwr-cal-wel-event-chip-dash { font-weight: 400; }
.dwr-cal-wel-event-chip--range .dwr-cal-wel-event-chip-month > span {
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    white-space: nowrap;
}
/* วางเดือนให้ตรงคอลัมน์เลข — ไม่งั้น auto-placement จะเอาเดือนที่สองไปอยู่คอลัมน์กลาง */
.dwr-cal-wel-event-chip--range .dwr-cal-wel-event-chip-month > span:first-child {
    grid-column: 1;
    grid-row: 2;
}
.dwr-cal-wel-event-chip--range .dwr-cal-wel-event-chip-month > span:last-child {
    grid-column: 3;
    grid-row: 2;
}

.dwr-cal-wel-event-body { flex: 1; min-width: 0; }
.dwr-cal-wel-event-title {
    margin: 0 0 4px;
    font-size: 16px;            /* WD-102: Figma 16px (เดิม 17px) */
    font-weight: 600;           /* Figma SemiBold (เดิม 700) */
    color: #182230;             /* Figma text-grey-darker (เดิม var(--wel-title)) */
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dwr-cal-wel-event-subtitle {
    margin: 0 0 8px;
    font-size: 16px;            /* WD-102: Figma 16px (เดิม 15px) */
    font-weight: 400;
    color: var(--wel-body);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dwr-cal-wel-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 14px;           /* WD-102: Figma 14px */
    font-weight: 300;          /* Figma Light (เดิม 500) */
    color: #667085;            /* Figma text-grey (เดิม var(--wel-meta)) */
    line-height: 1.5;
}
.dwr-cal-wel-event-meta time,
.dwr-cal-wel-event-meta address {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-style: normal;
}
.dwr-cal-wel-event-meta svg {
    color: var(--wel-accent);
    flex-shrink: 0;
}

.dwr-cal-wel-empty {
    padding: 30px 0;
    text-align: center;
    color: var(--wel-body);
    font-size: 1rem;
}

/* ─── View all ─── */
.dwr-cal-wel-actions {
    text-align: center;
    margin-top: 24px;
}
.dwr-cal-wel-view-all {
    display: inline-block;
    padding: 13px 44px;
    background: var(--wel-accent);
    color: var(--wel-card-bg) !important;
    text-decoration: none !important;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    /* เงากลาง ๆ ไม่ผูกสีใดสีหนึ่ง → เข้ากับ accent ที่ admin ตั้งเองได้ทุกสี */
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.28);
    transition: filter 0.2s, transform 0.15s;
}
/* hover เข้มขึ้นจาก accent เอง (ไม่ต้องตั้งสี hover แยก — ตั้ง accent สีไหน hover ตามทันที) */
.dwr-cal-wel-view-all:hover,
.dwr-cal-wel-view-all:focus-visible {
    filter: brightness(0.88);
    transform: translateY(-1px);
}

/* ─── Responsive ─── */
@media (max-width: 860px) {
    .dwr-cal-wel-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 18px;
    }
    .dwr-cal-wel-title { font-size: 1.5rem; }
    .dwr-cal-wel-list-wrap { max-height: 380px; }
}

/* ═══ WD-266 — สไตล์ช่วงวัน (ย้ายมาจาก full-page.css)
   ใช้ทั้งโหมด page (เลือกช่วงในหน้ารวม) และ single (ปฏิทินกิจกรรมเดียวในหน้ารายละเอียด) ═══ */
/* ── ปฏิทินเล็กในโหมดเลือกช่วงวัน ── */
/* WD-266: วันตรงกลางช่วง = พื้นขาวตาม design (เดิมเป็นฟ้าจาง rgba(134,221,255,.42))
   หัว/ท้ายช่วงยังเป็นฟ้า --wel-event-fill ทรงแคปซูลเหมือนเดิม */
.dwr-cal-wel--page .dwr-cal-wel-day--in-range {
    background: var(--wel-range-mid, #FFFFFF);
    border-radius: 0;
}
.dwr-cal-wel--page .dwr-cal-wel-day--range-start,
.dwr-cal-wel--page .dwr-cal-wel-day--range-end {
    background: var(--wel-event-fill, #86DDFF);
    color: var(--wel-day, #344054);
    font-weight: 700;
}
.dwr-cal-wel--page .dwr-cal-wel-day--range-start { border-radius: 999px 0 0 999px; }
.dwr-cal-wel--page .dwr-cal-wel-day--range-end   { border-radius: 0 999px 999px 0; }
.dwr-cal-wel--page .dwr-cal-wel-day--range-start.dwr-cal-wel-day--range-end { border-radius: 999px; }

/* WD-266 ตามหลัง: "วันนี้" ต้องไม่ถูกสีของช่วงที่เลือกกลืน
   กฎ --in-range ข้างบนมี specificity (0,2,0) สูงกว่า .dwr-cal-wel-day--today (0,1,0)
   → พื้นหลังถูกทับเป็นขาว แต่ color:#fff ของ today ยังอยู่ = ขาวบนขาว มองไม่เห็น
   (เดิมพื้นเป็นฟ้าจาง rgba(...,.42) เลยพอเห็นราง ๆ จึงไม่มีใครเจอ)
   กฎนี้ specificity เท่ากันแต่มาทีหลัง จึงชนะ */
.dwr-cal-wel--page .dwr-cal-wel-day--today {
    background: var(--wel-today-bg, var(--wel-accent, #0068C9));
    color: var(--wel-today-text, var(--wel-card-bg, #FFFFFF));
}
/* ── ปฏิทินเล็กในโหมดเลือกช่วงวัน ── */
/* WD-266: วันตรงกลางช่วง = พื้นขาวตาม design (เดิมเป็นฟ้าจาง rgba(134,221,255,.42))
   หัว/ท้ายช่วงยังเป็นฟ้า --wel-event-fill ทรงแคปซูลเหมือนเดิม */
.dwr-cal-wel--single .dwr-cal-wel-day--in-range {
    background: var(--wel-range-mid, #FFFFFF);
    border-radius: 0;
}
.dwr-cal-wel--single .dwr-cal-wel-day--range-start,
.dwr-cal-wel--single .dwr-cal-wel-day--range-end {
    background: var(--wel-event-fill, #86DDFF);
    color: var(--wel-day, #344054);
    font-weight: 700;
}
.dwr-cal-wel--single .dwr-cal-wel-day--range-start { border-radius: 999px 0 0 999px; }
.dwr-cal-wel--single .dwr-cal-wel-day--range-end   { border-radius: 0 999px 999px 0; }
.dwr-cal-wel--single .dwr-cal-wel-day--range-start.dwr-cal-wel-day--range-end { border-radius: 999px; }

/* WD-266 ตามหลัง: "วันนี้" ต้องไม่ถูกสีของช่วงที่เลือกกลืน
   กฎ --in-range ข้างบนมี specificity (0,2,0) สูงกว่า .dwr-cal-wel-day--today (0,1,0)
   → พื้นหลังถูกทับเป็นขาว แต่ color:#fff ของ today ยังอยู่ = ขาวบนขาว มองไม่เห็น
   (เดิมพื้นเป็นฟ้าจาง rgba(...,.42) เลยพอเห็นราง ๆ จึงไม่มีใครเจอ)
   กฎนี้ specificity เท่ากันแต่มาทีหลัง จึงชนะ */
.dwr-cal-wel--single .dwr-cal-wel-day--today {
    background: var(--wel-today-bg, var(--wel-accent, #0068C9));
    color: var(--wel-today-text, var(--wel-card-bg, #FFFFFF));
}

/* ═══ WD-563 — รูปแบบการแสดงผลของ section หน้าแรก ═══
   การ์ดเดิมเป็น 2 ช่อง (ปฏิทินซ้าย + ลิสต์ขวา) · โหมดใหม่แค่ซ่อนอีกฝั่งแล้วให้ที่เหลือกินเต็ม
   ไม่ได้ทำ markup แยก 3 ชุด — ข้อมูล/JS/พฤติกรรมจึงเป็นตัวเดียวกันหมด */
.dwr-cal-wel--calendar .dwr-cal-wel-list-wrap { display: none; }
.dwr-cal-wel--list .dwr-cal-wel-mini { display: none; }
.dwr-cal-wel--calendar .dwr-cal-wel-card,
.dwr-cal-wel--list .dwr-cal-wel-card { grid-template-columns: minmax(0, 1fr); }
/* โหมด "เฉพาะปฏิทิน" เหลือช่องเดียว — ปฏิทินไม่ต้องยืดเต็มจนช่องวันบานเป็นสี่เหลี่ยมใหญ่ */
.dwr-cal-wel--calendar .dwr-cal-wel-mini { max-width: 420px; margin-inline: auto; }