/* ============================================================
 * idp-learner.css — IDP Learner page (Phase 1, standalone)
 *
 * Bootstrap 4.6 theme add-on. NO inline styles are used on the page;
 * every IDP-specific visual (profile cover, donut, timeline stepper,
 * level segments, category/reason badges) is defined here as a class.
 *
 * Dynamic widths (progress bars) are applied by JS from data-* attrs,
 * and SVG donut arcs use presentation attributes — not style="".
 * ============================================================ */

:root {
    --idp-line: #e4e7ec;
    --idp-muted: #5c6470;
    --idp-ink: #1a2430;

    --idp-completed: #178a50;
    --idp-in-progress: #007bff;
    --idp-overdue: #c43c2e;
    --idp-not-started: #b8bec7;
}
/* NB: สี "หมวด competency" (competency_category) และ "เหตุผล" (individual_plan_reason)
   — competency_category ไม่มี field สีใน DB จึงใช้ .is-neutral (ไม่ hardcode สีตามหมวด)
   — reason มีสีใน DB ส่งผ่าน inline var `--reason-c` ให้ .idp-badge.idp-reason-dyn ใช้ */

/* ---------- Rounded utility (softer than theme .rounded-xl = .5rem) ---------- */
.rounded-2xl {
    border-radius: 1rem !important;
}

/* ---------- Card surface (subtle border stays + soft shadow; matches theme card convention) ---------- */
.idp-surface {
    border: 1px solid var(--idp-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px -6px rgba(16, 24, 40, .08);
}

/* ---------- Activity action button — uniform width so buttons line up regardless of label ---------- */
.idp-act-btn {
    min-width: 160px;
}

.idp-card {
    transition: box-shadow .2s ease;
}

.idp-card:hover {
    box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 26px -12px rgba(16, 24, 40, .14);
}

/* ---------- Page heading ---------- */
.idp-page-eyebrow {
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------- Profile (members) card ---------- */
.idp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-primary, #007bff);
    color: #fff;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

.idp-avatar-lg {
    width: 72px;
    height: 72px;
    font-size: 1.4rem;
}

.idp-avatar-sm {
    width: 40px;
    height: 40px;
    font-size: .95rem;
}

/* ---------- Overall progress donut ---------- */
.idp-donut {
    position: relative;
    width: 112px;
    height: 112px;
    flex-shrink: 0;
}

.idp-donut svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.idp-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.idp-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.idp-legend-dot.is-completed { background-color: var(--idp-completed); }
.idp-legend-dot.is-in_progress { background-color: var(--idp-in-progress); }
.idp-legend-dot.is-overdue { background-color: var(--idp-overdue); }
.idp-legend-dot.is-not_started { background-color: var(--idp-not-started); }

/* theme ตั้ง .main-block { overflow:hidden } (custom.css) ซึ่งเป็น ancestor ที่ฆ่า position:sticky
 * — ใช้ display:flow-root แทน: สร้าง BFC เหมือน overflow:hidden (กัน margin-collapse ให้สเปซหัวหน้าคงเดิม)
 *   แต่ไม่ใช่ scroll container จึงไม่ทำให้ sticky พัง
 * scoped ด้วย .idp-learner-page (body class) — ตอนนี้ไฟล์นี้ถูกโหลดทุกหน้าผ่าน inc.css.php
 * ต้องไม่ override .main-block แบบ global มิฉะนั้นกระทบทุกหน้าในระบบ */
.idp-learner-page .main-block {
    overflow: visible;
    display: flow-root;
}

/* ---------- Sticky progress card on desktop ----------
 * ทำเฉพาะกล่องความคืบหน้า (สั้นพอที่จะ pin ได้) — ไม่ทำทั้ง aside เพราะสูงเกิน viewport
 * (sticky element ที่สูงกว่าหน้าจอจะไม่ pin ที่ top)
 * top: 64px = ความสูงจริงของ #header-block (position:fixed, ดู custom.css .main-block{margin-top:64px})
 * ต้องตรงเป๊ะ ไม่ใช่เดา — ไม่งั้นจะมีช่องโหว่ให้เนื้อหาด้านล่าง sticky element โผล่ทะลุขึ้นมาตอน scroll */
@media (min-width: 992px) {
    .idp-progress-sticky {
        position: sticky;
        top: 80px;
    }
}

/* ---------- Filter chips ---------- */
.idp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.idp-filter {
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 50rem;
    padding: .35rem .9rem;
    font-size: .85rem;
    line-height: 1.2;
    background-color: #f1f3f5;
    color: var(--idp-muted);
    transition: background-color .15s ease, color .15s ease;
}

.idp-filter:hover {
    background-color: #e6e9ed;
    color: var(--idp-ink);
}

.idp-filter:focus-visible {
    outline: 2px solid var(--color-primary, #007bff);
    outline-offset: 2px;
}

.idp-filter.active {
    background-color: var(--idp-ink);
    color: #fff;
}

/* semantic-tone filter chips (tint เสมอ, active = solid) — โทนตรงกับ status */
.idp-filter--primary { background-color: #e8eefb; color: #0069d9; }
.idp-filter--primary:hover { background-color: #d9e6fb; color: #0069d9; }
.idp-filter--primary.active { background-color: #007bff; color: #fff; }

.idp-filter--success { background-color: #e6f4ec; color: #178a50; }
.idp-filter--success:hover { background-color: #d8eee1; color: #178a50; }
.idp-filter--success.active { background-color: #178a50; color: #fff; }

.idp-filter--warning { background-color: #fdf1e3; color: #b7791f; }
.idp-filter--warning:hover { background-color: #fbe8cf; color: #b7791f; }
.idp-filter--warning.active { background-color: #f0ad00; color: #1a2430; }

.idp-filter--danger { background-color: #fbe9e6; color: #c43c2e; }
.idp-filter--danger:hover { background-color: #f7ddd8; color: #c43c2e; }
.idp-filter--danger.active { background-color: #c43c2e; color: #fff; }

/* ---------- Tabs (แผนที่กำลังใช้งาน / ประวัติ) ---------- */
.idp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 2px solid #eef1f5;
    margin-bottom: 1.125rem;
}
.idp-tab {
    border: 0;
    background: none;
    padding: .75rem 1.125rem;
    font-weight: 700;
    color: #8592a0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.idp-tab:hover { color: #5b6b7b; }
.idp-tab .idp-tab-count {
    margin-left: .5rem;
    background: #eef1f5;
    color: #5b6b7b;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .05rem .55rem;
}
.idp-tab.active { color: #1a2430; border-bottom-color: #007bff; }
.idp-tab.active .idp-tab-count { background: #e8eefb; color: #007bff; }
.idp-tab.is-hist.active { border-bottom-color: #6b5b95; }
.idp-tab.is-hist.active .idp-tab-count { background: #efe9fb; color: #6b5b95; }
.idp-tabpane { display: none; }
.idp-tabpane.active { display: block; }

/* ---------- Section header (จัดกลุ่ม competency ในแผนที่กำลังใช้งาน) ---------- */
.idp-section-head {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 1.375rem .125rem .75rem;
    font-weight: 700;
    color: #1a2430;
}
.idp-section:first-child .idp-section-head { margin-top: .375rem; }
.idp-section-head .idp-sec-count {
    background: #eef1f5;
    color: #5b6b7b;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .05rem .625rem;
}
.idp-section-head .idp-sec-rule { flex: 1; height: 1px; background: #eef1f5; }

.idp-filter-count {
    margin-left: .45rem;
    font-size: .72rem;
    opacity: .6;
}

.idp-filter.active .idp-filter-count {
    opacity: .8;
}

/* competency progress count — fixed width so bars line up across cards */
.idp-count {
    display: inline-block;
    width: 40px;
    text-align: right;
}

/* ---------- Competency card ---------- */
.idp-card .idp-card-summary {
    cursor: pointer;
}

.idp-card .idp-chevron {
    transition: transform .2s ease;
}

.idp-card[open] .idp-chevron,
.idp-card .idp-card-summary[aria-expanded="true"] .idp-chevron {
    transform: rotate(180deg);
}

/* ---------- Badge system: soft tint background + normal weight (calm, low-noise) ---------- */
.idp-badge {
    font-weight: 400;
    padding: .5em .75em;
}

/* reason — สีมาจาก DB (individual_plan_reason.color) ผ่าน CSS var --reason-c (dynamic passthrough) */
.idp-badge.idp-reason-dyn {
    background-color: color-mix(in srgb, var(--reason-c, #6b7280) 14%, #fff);
    color: color-mix(in srgb, var(--reason-c, #6b7280) 82%, #000);
}

/* status / submission — soft */
.idp-badge.is-completed   { background-color: #e6f4ec; color: var(--idp-completed); }
.idp-badge.is-in_progress { background-color: #e8eefb; color: var(--idp-in-progress); }
.idp-badge.is-overdue     { background-color: #fbe9e6; color: var(--idp-overdue); }
.idp-badge.is-not_started,
.idp-badge.is-neutral     { background-color: #f1f3f5; color: var(--idp-muted); }
.idp-badge.is-pending     { background-color: #fdf1e3; color: #b7791f; }
.idp-badge.is-passed      { background-color: #e6f4ec; color: var(--idp-completed); }
.idp-badge.is-failed      { background-color: #fbe9e6; color: var(--idp-overdue); }

/* ---------- Inline status word (บรรทัด meta: ประเภท · สถานะ · กำหนดส่ง) ----------
   สถานะกิจกรรมสื่อเป็น "คำมีสี" ในบรรทัด meta + สีหมุดซ้าย — ช่องขวาเก็บไว้ให้ปุ่ม action อย่างเดียว
   (ไม่ใช้ badge พื้นทึบซ้อนบนปุ่มแบบเดิม) */
.idp-dot-sep {
    color: #c2c9d2;
    margin: 0 6px;
}
.idp-state {
    font-weight: 600;
}
.idp-state.is-completed   { color: var(--idp-completed); }
.idp-state.is-in_progress { color: var(--idp-in-progress); }
.idp-state.is-overdue     { color: var(--idp-overdue); }
.idp-state.is-pending     { color: #b7791f; }
/* not_started / neutral — ใช้ muted (ไม่ใช้ --idp-not-started ที่จางเกินไปสำหรับตัวอักษร) */
.idp-state.is-not_started,
.idp-state.is-neutral     { color: var(--idp-muted); }

/* ช่องปุ่ม action (ขวา) — ชิดขวาบนจอ sm+ (มือถือไหลปกติใต้เนื้อหา); หมายเหตุ read-only ของ Assessment */
@media (min-width: 576px) {
    .idp-act-col {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
}
.idp-await-note {
    font-style: italic;
    padding-top: 6px;
}

/* reject reason — hairline card น้ำหนักเบา: มีแค่เส้นซ้าย+ไอคอน/label เน้นสี ส่วนเนื้อหาเป็นสีปกติ ไม่ใช้พื้นทึบเหมือน badge */
.idp-reject-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--idp-line);
    border-left: 3px solid var(--idp-overdue);
    background-color: #fff;
    font-size: 13px;
    line-height: 1.5;
}
.idp-reject-box i { margin-top: 2px; color: var(--idp-overdue); }
.idp-reject-box strong { color: var(--idp-overdue); font-weight: 500; }
.idp-reject-box span { color: var(--idp-ink); }

/* ---------- Target level segmented bar ---------- */
.idp-levels {
    display: inline-flex;
    gap: 4px;
}

.idp-level-seg {
    width: 22px;
    height: 6px;
    border-radius: 50rem;
    background-color: var(--idp-line);
}

.idp-level-seg.is-on {
    background-color: #007bff;
}

/* ---------- Slim progress bar (width applied by JS via data-progress) ---------- */
.idp-bar {
    display: inline-block;
    width: 96px;
    height: 6px;
    vertical-align: middle;
    border-radius: 50rem;
    background-color: var(--idp-line);
    overflow: hidden;
}

.idp-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 50rem;
    /* fix เป็น #007bff ไม่ผูกกับ theme primary ของลูกค้า (กันเคส primary=แดง แล้วหลอดดูเหมือน error/เกินกำหนด) */
    background-color: #007bff;
}

.idp-bar-fill.is-overdue { background-color: var(--idp-overdue); }
.idp-bar-fill.is-in_progress { background-color: var(--idp-in-progress); }

/* ---------- Activity timeline stepper ---------- */
.idp-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.idp-tl-item {
    display: flex;
    gap: 1rem;
}

.idp-tl-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.idp-tl-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
    flex-shrink: 0;
    background-color: #fff;
    border: 1px solid var(--idp-line);
    color: var(--idp-muted);
}

.idp-tl-marker.is-completed {
    background-color: var(--idp-completed);
    border-color: var(--idp-completed);
    color: #fff;
}

.idp-tl-marker.is-in_progress {
    border-width: 2px;
    border-color: var(--idp-in-progress);
    color: var(--idp-in-progress);
    background-color: #eaf0fb;
}

.idp-tl-marker.is-overdue {
    border-width: 2px;
    border-color: var(--idp-overdue);
    color: var(--idp-overdue);
    background-color: #fbeae8;
}

.idp-tl-line {
    width: 1px;
    flex: 1 1 auto;
    background-color: var(--idp-line);
    margin: 4px 0;
}

.idp-tl-line.is-completed {
    background-color: rgba(23, 138, 80, .4);
}

.idp-tl-content {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 1.5rem;
}

.idp-tl-item:last-child .idp-tl-content {
    padding-bottom: 0;
}

.idp-type-icon {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
}

/* ---------- Historical group (สำเร็จแล้ว จากแผนก่อนหน้า) — muted, read-only ---------- */
.idp-history > summary {
    cursor: pointer;
    padding: .75rem 1rem;
    border: 1px dashed var(--idp-line);
    border-radius: .75rem;
    background-color: #fafbfc;
    list-style: none;
}

.idp-history > summary::-webkit-details-marker {
    display: none;
}

.idp-history[open] > summary .idp-chevron {
    transform: rotate(180deg);
}

.idp-history-group-head {
    padding: .5rem .25rem;
    margin-bottom: .5rem;
}

.font-weight-600 {
    font-weight: 600;
}

.idp-history-card {
    background-color: #fbfcfd;
}

/* ไม่ต้องมี hover lift (read-only) — override .idp-card:hover ไม่ถูกใช้เพราะไม่ได้ใส่ .idp-card */

/* ---------- External Learning: file dropzone (drag & drop) ---------- */
.idp-dropzone {
    position: relative;
    border: 1px dashed var(--idp-line);
    border-radius: .75rem;
    padding: 1.5rem 1rem;
    background-color: #fafbfc;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.idp-dropzone:hover,
.idp-dropzone.is-dragover {
    border-color: #007bff;
    background-color: #f3f8ff;
}

.idp-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ---------- Empty state ---------- */
.idp-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--token-primary-50, #ebf4ff);
    color: var(--color-primary, #007bff);
}