:root{
  --stp-primary:#0b2c74;
  --stp-primary-2:#1d4ed8;
  --stp-primary-3:#2563eb;
  --stp-bg:#f3f7fc;
  --stp-panel:#ffffff;
  --stp-border:#dbe4f0;
  --stp-text:#0f172a;
  --stp-muted:#64748b;
  --stp-shadow:0 18px 42px rgba(11,44,116,.10);
}
.stpdm-wrap,.stpdm-front{max-width:1420px}
.stpdm-front{margin:24px auto;padding:0 18px;color:var(--stp-text)}
.stpdm-wrap h1,.stpdm-front h2,.stpdm-front h3{color:var(--stp-text)}
.stpdm-header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}
.stpdm-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7fb4ff;margin-bottom:8px}
.stpdm-hero{display:grid;grid-template-columns:1.6fr .8fr;gap:22px;padding:30px;border-radius:28px;background:linear-gradient(135deg,#07215a 0%, #0b2c74 38%, #1d4ed8 100%);color:#fff;box-shadow:0 24px 50px rgba(11,44,116,.22);margin:8px 0 18px;position:relative;overflow:hidden}
.stpdm-hero:before,.stpdm-hero:after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.08)}
.stpdm-hero:before{width:240px;height:240px;right:-50px;top:-60px}
.stpdm-hero:after{width:220px;height:220px;left:35%;bottom:-130px}
.stpdm-hero__main,.stpdm-hero__side{position:relative;z-index:1}
.stpdm-hero__main h2{font-size:44px;line-height:1.12;margin:0 0 10px;color:#fff}
.stpdm-hero__main p{font-size:15px;line-height:1.75;max-width:760px;margin:0;color:rgba(255,255,255,.92)}
.stpdm-hero__side{display:grid;gap:14px;align-content:center}
.stpdm-mini-stat{background:rgba(255,255,255,.14);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:20px 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.stpdm-mini-stat span{display:block;font-size:13px;color:rgba(255,255,255,.82);margin-bottom:6px;font-weight:600}
.stpdm-mini-stat strong{display:block;font-size:30px;font-weight:800;color:#fff;line-height:1.1}
.stpdm-toolbar{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:14px;background:var(--stp-panel);border:1px solid var(--stp-border);border-radius:20px;padding:16px 18px;box-shadow:var(--stp-shadow);margin:0 0 18px}
.stpdm-toolbar__group{display:flex;flex-direction:column;gap:7px}.stpdm-toolbar__group label{font-size:12px;font-weight:800;color:#334155}
.stpdm-toolbar__group input,.stpdm-toolbar__group select,.stpdm-front input[type=text],.stpdm-front input[type=file],.stpdm-front input[type=date],.stpdm-front textarea,.stpdm-front select{width:100%;padding:11px 12px;border:1px solid #c7d3e3;border-radius:14px;background:#fff;color:var(--stp-text);box-sizing:border-box}
.stpdm-toolbar__actions{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.stpdm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0}
.stpdm-card,.stpdm-panel,.stpdm-login{background:var(--stp-panel);border:1px solid var(--stp-border);border-radius:24px;padding:20px;box-shadow:var(--stp-shadow)}
.stpdm-card{display:flex;align-items:center;gap:16px;min-height:118px;position:relative;overflow:hidden}
.stpdm-card:before{content:"";position:absolute;right:-24px;bottom:-24px;width:108px;height:108px;border-radius:50%;background:rgba(255,255,255,.72)}
.stpdm-card__icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex:0 0 58px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.stpdm-card strong{display:block;font-size:34px;line-height:1;font-weight:900;margin-bottom:9px;color:#0f172a}
.stpdm-card span{font-size:14px;font-weight:700;color:#475569}
.stpdm-card--total{background:linear-gradient(180deg,#eef4ff 0%,#ffffff 100%)} .stpdm-card--total .stpdm-card__icon{background:#dbeafe}
.stpdm-card--not_submitted{background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%)} .stpdm-card--not_submitted .stpdm-card__icon{background:#e2e8f0}
.stpdm-card--submitted{background:linear-gradient(180deg,#eff6ff 0%,#ffffff 100%)} .stpdm-card--submitted .stpdm-card__icon{background:#dbeafe}
.stpdm-card--pending_review{background:linear-gradient(180deg,#fff8df 0%,#ffffff 100%)} .stpdm-card--pending_review .stpdm-card__icon{background:#fde68a}
.stpdm-card--approved{background:linear-gradient(180deg,#eefcf1 0%,#ffffff 100%)} .stpdm-card--approved .stpdm-card__icon{background:#bbf7d0}
.stpdm-card--revision{background:linear-gradient(180deg,#fff1f3 0%,#ffffff 100%)} .stpdm-card--revision .stpdm-card__icon{background:#fecdd3}
.stpdm-exec-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px}
.stpdm-kpi{background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border:1px solid var(--stp-border);border-radius:22px;padding:18px 20px;box-shadow:var(--stp-shadow)}
.stpdm-kpi span{display:block;font-size:12px;color:var(--stp-muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.stpdm-kpi strong{display:block;font-size:28px;line-height:1.2;color:var(--stp-primary);margin-bottom:6px}
.stpdm-kpi small{display:block;color:var(--stp-muted);line-height:1.6}
.stpdm-exec-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 18px}
.stpdm-exec-grid--teacher{grid-template-columns:1fr 1fr}
.stpdm-panel{margin:0 0 16px}
.stpdm-panel__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.stpdm-panel__head h3,.stpdm-panel__head h2{margin:0 0 4px;font-size:28px;line-height:1.2}
.stpdm-panel__head p{margin:0;color:var(--stp-muted);font-size:14px}
.stpdm-chart-donut-wrap{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:center}
.stpdm-donut{width:220px;height:220px;border-radius:50%;background:var(--chart);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 14px rgba(255,255,255,.35)}
.stpdm-donut__inner{width:120px;height:120px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 10px 24px rgba(15,23,42,.12)}
.stpdm-donut__inner strong{font-size:32px;line-height:1;color:var(--stp-primary)}
.stpdm-donut__inner span{font-size:13px;font-weight:700;color:var(--stp-muted);margin-top:6px}
.stpdm-legend{display:flex;flex-direction:column;gap:10px}
.stpdm-legend__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:#f8fafc;border:1px solid #e6edf7}
.stpdm-legend__dot{width:14px;height:14px;border-radius:50%;display:block;flex:0 0 14px}
.stpdm-legend__item strong{display:block;font-size:14px;color:var(--stp-text)}
.stpdm-legend__item small{display:block;font-size:12px;color:var(--stp-muted)}
.stpdm-bar-list{display:flex;flex-direction:column;gap:14px}
.stpdm-bar-item{padding:14px 14px 12px;border:1px solid #e6edf7;border-radius:18px;background:#f8fafc}
.stpdm-bar-item__head{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}.stpdm-bar-item__head strong{font-size:15px}.stpdm-bar-item__head span{font-size:13px;color:var(--stp-muted);font-weight:700}
.stpdm-bar{position:relative;height:16px;background:#dbeafe;border-radius:999px;overflow:hidden}
.stpdm-bar__total{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#93c5fd,#3b82f6);border-radius:999px}
.stpdm-bar__approved{position:absolute;left:0;top:3px;bottom:3px;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:999px;opacity:.95}
.stpdm-bar-item__meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:#475569;font-weight:600}
.stpdm-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stpdm-action-card{display:block;padding:16px 18px;border-radius:18px;background:linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%);border:1px solid #d9e5ff;text-decoration:none;color:var(--stp-text);transition:.2s ease}
.stpdm-action-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(37,99,235,.12)}
.stpdm-action-card strong{display:block;font-size:16px;margin-bottom:6px;color:var(--stp-primary)}
.stpdm-action-card small{display:block;color:var(--stp-muted);line-height:1.6}
.stpdm-insights{margin:0;padding-left:18px;color:#334155}.stpdm-insights li{margin:10px 0;line-height:1.7}
.stpdm-teacher-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stpdm-teacher-summary__item{padding:18px;border-radius:18px;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);border:1px solid #dbe4f0}
.stpdm-teacher-summary__item span{display:block;font-size:13px;font-weight:800;color:#475569;margin-bottom:8px}
.stpdm-teacher-summary__item strong{display:block;font-size:30px;color:var(--stp-primary)}
.stpdm-steps{display:flex;flex-direction:column;gap:12px}.stpdm-step{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:18px;background:#f8fafc;border:1px solid #e2e8f0}.stpdm-step>span{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--stp-primary),var(--stp-primary-3));color:#fff;font-weight:800;flex:0 0 34px}.stpdm-step strong{display:block;margin-bottom:2px;font-size:15px}.stpdm-step small{display:block;color:var(--stp-muted);line-height:1.5}
.stpdm-table-wrap{overflow:auto;border:1px solid #e2e8f0;border-radius:18px}.stpdm-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}.stpdm-table th,.stpdm-table td{padding:14px 12px;border-bottom:1px solid #edf2f7;text-align:left;vertical-align:top}.stpdm-table thead th{background:#f7faff;font-size:13px;font-weight:800;color:#334155;position:sticky;top:0;z-index:1}.stpdm-table tbody tr:hover{background:#fafcff}
.stpdm-date{font-weight:700;color:#0f172a}.stpdm-title-stack{display:flex;flex-direction:column;gap:4px}.stpdm-title-stack strong{font-size:15px}.stpdm-title-stack small{color:var(--stp-muted);line-height:1.5}.stpdm-activity-link{font-weight:800;color:#1d4ed8;text-decoration:none}.stpdm-activity-link:hover{text-decoration:underline}
.stpdm-doc-pill,.stpdm-open-btn,.stpdm-back-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:800;text-decoration:none}.stpdm-doc-pill{background:#eef2ff;color:#1e3a8a}.stpdm-open-btn{background:linear-gradient(135deg,var(--stp-primary),var(--stp-primary-3));color:#fff}.stpdm-open-btn:hover,.stpdm-back-link:hover{opacity:.92;color:#fff}.stpdm-back-link{background:#334155;color:#fff;margin-bottom:12px}
.stpdm-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid transparent;white-space:nowrap}.stpdm-approved{background:#dcfce7;border-color:#86efac;color:#166534}.stpdm-pending_review{background:#fef3c7;border-color:#fcd34d;color:#92400e}.stpdm-revision{background:#fee2e2;border-color:#fca5a5;color:#991b1b}.stpdm-submitted{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}.stpdm-not_submitted{background:#f1f5f9;border-color:#cbd5e1;color:#475569}
.stpdm-empty{color:var(--stp-muted)}.stpdm-note{background:#fff7ed;border:1px solid #fdba74;border-left:4px solid #f97316;padding:14px 16px;border-radius:16px;margin:14px 0;color:#7c2d12}.stpdm-history{margin:0;padding-left:18px}.stpdm-history li{margin:8px 0;color:#334155;line-height:1.6}
.stpdm-login{max-width:560px;margin:44px auto;padding:28px}.stpdm-login h2{margin-top:0;font-size:34px}.stpdm-login p{color:#475569;line-height:1.7}
.stpdm-front .button,.stpdm-wrap .button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:12px;text-decoration:none;font-weight:800;border:1px solid #cbd5e1;background:#fff;color:#0f172a;cursor:pointer}.stpdm-front .button-primary,.stpdm-wrap .button-primary{background:linear-gradient(135deg,var(--stp-primary),var(--stp-primary-3));border-color:var(--stp-primary);color:#fff}
.stpdm-detail-hero__top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.stpdm-detail-hero__top h2{margin:0 0 6px;font-size:34px}.stpdm-detail-hero__top p{margin:0;color:var(--stp-muted)}.stpdm-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stpdm-detail-grid>div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:14px}.stpdm-detail-grid strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--stp-muted);margin-bottom:6px}.stpdm-detail-grid span{font-weight:600;color:var(--stp-text);line-height:1.5}
@media (max-width: 1200px){.stpdm-exec-kpis{grid-template-columns:repeat(2,1fr)}.stpdm-chart-donut-wrap{grid-template-columns:1fr}.stpdm-donut{margin:0 auto}.stpdm-exec-grid,.stpdm-exec-grid--teacher{grid-template-columns:1fr}.stpdm-action-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 900px){.stpdm-front{padding:0 12px}.stpdm-header{align-items:flex-start;flex-direction:column}.stpdm-hero{grid-template-columns:1fr;padding:24px}.stpdm-hero__main h2{font-size:32px}.stpdm-toolbar{grid-template-columns:1fr}.stpdm-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.stpdm-panel__head h3,.stpdm-panel__head h2{font-size:24px}.stpdm-table{min-width:900px}.stpdm-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stpdm-teacher-summary{grid-template-columns:1fr}.stpdm-action-grid{grid-template-columns:1fr}}
@media (max-width: 640px){.stpdm-exec-kpis{grid-template-columns:1fr}.stpdm-detail-grid{grid-template-columns:1fr}}

/* ================================================================
 * V1.3.4 Teacher Responsibility Map
 * จุดเริ่มต้น -> ฝ่าย -> โครงการ -> กิจกรรม -> หน้ารายละเอียด/อัปโหลด
 * ================================================================ */
.stpdm-teacher-map-dashboard{margin-top:8px}
.stpdm-map-hero{display:grid;grid-template-columns:1.5fr .6fr;gap:22px;align-items:center;padding:28px 30px;border-radius:28px;background:linear-gradient(135deg,#102a63 0%,#1749a8 55%,#2563eb 100%);color:#fff;box-shadow:0 22px 46px rgba(15,42,99,.18);margin-bottom:16px;position:relative;overflow:hidden}
.stpdm-map-hero:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-80px;top:-140px;background:rgba(255,255,255,.08)}
.stpdm-map-hero>div{position:relative;z-index:1}.stpdm-map-hero h2{color:#fff;margin:0 0 8px;font-size:38px}.stpdm-map-hero p{margin:0;line-height:1.75;color:rgba(255,255,255,.92);max-width:820px}.stpdm-map-hero p strong{color:#fff}
.stpdm-map-hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stpdm-map-hero__stats>div{padding:16px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);border-radius:18px;backdrop-filter:blur(8px)}.stpdm-map-hero__stats span{display:block;font-size:12px;font-weight:700;color:rgba(255,255,255,.8);margin-bottom:5px}.stpdm-map-hero__stats strong{display:block;font-size:30px;line-height:1;color:#fff}
.stpdm-map-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;background:#fff;border:1px solid var(--stp-border);border-radius:18px;padding:12px 14px;margin-bottom:14px;box-shadow:0 8px 24px rgba(11,44,116,.06)}
.stpdm-map-instruction{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#475569;font-weight:700;font-size:13px}.stpdm-map-instruction span{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#e8f0ff;color:#1749a8;font-weight:900}.stpdm-map-instruction b{color:#60a5fa}
.stpdm-map-shell{background:linear-gradient(180deg,#f8fbff 0%,#f1f7ff 100%);border:1px solid #dbe7f6;border-radius:26px;box-shadow:var(--stp-shadow);overflow:auto}
.stpdm-map-flow{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(240px,.9fr) minmax(280px,1.1fr) minmax(340px,1.45fr);gap:34px;align-items:start;min-width:1120px;padding:28px 28px 34px}
.stpdm-map-col{position:relative;min-width:0}.stpdm-map-col:not(.stpdm-map-col--root):before{content:"";position:absolute;left:-27px;top:62px;width:22px;height:2px;background:#3b82f6}.stpdm-map-col:not(.stpdm-map-col--root):after{content:"";position:absolute;left:-8px;top:57px;border-left:8px solid #3b82f6;border-top:6px solid transparent;border-bottom:6px solid transparent}
.stpdm-map-col[hidden],.stpdm-map-node-list[hidden]{display:none!important}.stpdm-map-col__title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;color:#64748b;margin:0 0 11px;padding-left:3px}.stpdm-map-node-list{display:flex;flex-direction:column;gap:11px}
.stpdm-map-node{appearance:none;width:100%;box-sizing:border-box;text-align:left;border:1px solid #cfe0f5;border-radius:18px;background:#e8fbef;color:#0f3d2b;padding:13px 14px;display:flex;align-items:center;gap:11px;min-height:74px;text-decoration:none;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;font-family:inherit}
.stpdm-map-node:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(30,64,175,.10);border-color:#8ab8ef;color:#0f3d2b}.stpdm-map-node.is-selected{background:linear-gradient(135deg,#dbeafe,#eff6ff);border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.10),0 12px 26px rgba(30,64,175,.12);color:#123f85}
.stpdm-map-node--root{background:linear-gradient(135deg,#ede9fe,#e0e7ff);border-color:#a5b4fc;color:#312e81;min-height:112px}.stpdm-map-node--root.is-selected{background:linear-gradient(135deg,#dbeafe,#e0e7ff);border-color:#2563eb}.stpdm-map-node--project{background:#e5faf4}.stpdm-map-node--activity{background:#ddf8e8;border-color:#a7e7c0;min-height:88px}.stpdm-map-node--activity:hover{background:#d1f4df}
.stpdm-map-node__icon{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:center;flex:0 0 38px;font-size:18px}.stpdm-map-node__body{display:block;min-width:0;flex:1}.stpdm-map-node__body strong{display:block;font-size:14px;line-height:1.4;color:inherit;margin-bottom:3px}.stpdm-map-node__body small{display:block;color:#52706a;font-size:12px;line-height:1.45}.stpdm-map-node__body em{display:block;margin-top:5px;font-style:normal;font-size:11px;font-weight:800;color:#3f6b5c}.stpdm-map-node__arrow{font-size:18px;font-weight:900;color:#3b82f6;white-space:nowrap}.stpdm-map-node--activity .stpdm-map-node__arrow{font-size:12px;background:#fff;border-radius:999px;padding:6px 8px}
.stpdm-map-activity__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}.stpdm-map-activity__meta .stpdm-badge{padding:4px 8px;font-size:10px}.stpdm-map-activity__meta em{margin:0;background:rgba(255,255,255,.78);padding:4px 8px;border-radius:999px;color:#386254}
.stpdm-map-reset{width:100%;margin-top:10px;padding:9px 10px;border:0;background:transparent;color:#64748b;font-weight:800;cursor:pointer;border-radius:12px}.stpdm-map-reset:hover{background:#e8eff9;color:#1d4ed8}.stpdm-map-empty{text-align:center;padding:34px}.stpdm-map-empty h3{margin-top:0}
@media (max-width:900px){.stpdm-map-hero{grid-template-columns:1fr;padding:23px}.stpdm-map-hero h2{font-size:30px}.stpdm-map-toolbar{align-items:flex-start;flex-direction:column}.stpdm-map-flow{display:flex;flex-direction:column;min-width:0;padding:20px;gap:26px}.stpdm-map-col{width:100%}.stpdm-map-col:not(.stpdm-map-col--root):before{left:28px;top:-18px;width:2px;height:14px}.stpdm-map-col:not(.stpdm-map-col--root):after{left:23px;top:-7px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #3b82f6;border-bottom:0}.stpdm-map-hero__stats{max-width:360px}}
@media (max-width:520px){.stpdm-map-hero__stats{grid-template-columns:1fr 1fr}.stpdm-map-node{padding:12px}.stpdm-map-node__arrow{font-size:15px}.stpdm-map-instruction{font-size:12px}}
.stpdm-map-toolbar__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width:900px){.stpdm-map-toolbar__actions{width:100%}.stpdm-map-toolbar__actions .button{flex:1;text-align:center}}


/* =========================================================
   V1.3.6 — Unified Map: wider canvas + safe activity wrap
   Keep the original map design.
   - Wide desktop: 4 columns in one row.
   - Typical notebook/WordPress content width: activities move below
     the first 3 columns and the connector points downward.
   - Mobile: original vertical flow remains.
   ========================================================= */

/* Give the front-end map more usable horizontal canvas when the theme allows it. */
.stpdm-front{
  max-width:1720px;
}
.stpdm-teacher-map-dashboard{
  width:100%;
  max-width:none;
}
.stpdm-map-shell{
  width:100%;
  overflow-x:hidden;
  overflow-y:visible;
}

/* Wide screens: preserve the exact original left-to-right map. */
.stpdm-map-flow{
  grid-template-columns:minmax(210px,.72fr) minmax(235px,.9fr) minmax(285px,1.08fr) minmax(390px,1.5fr);
  gap:28px;
  min-width:0;
  width:100%;
}
.stpdm-map-col--activities .stpdm-map-node__body strong{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
.stpdm-map-col--activities .stpdm-map-node--activity{
  min-width:0;
}
.stpdm-map-col--activities .stpdm-map-node__arrow{
  flex:0 0 auto;
}

/* On normal WordPress/notebook widths, place activities underneath.
   This avoids the 4th column being clipped by the page/container edge. */
@media (max-width:1450px) and (min-width:901px){
  .stpdm-map-flow{
    grid-template-columns:minmax(210px,.82fr) minmax(250px,1fr) minmax(300px,1.18fr);
    gap:28px 32px;
    padding:28px 28px 38px;
  }

  .stpdm-map-col--activities{
    grid-column:1 / -1;
    margin-top:12px;
    padding-top:28px;
  }

  /* Replace the horizontal connector to Activities with a downward arrow. */
  .stpdm-map-col--activities:before{
    left:50%!important;
    top:-4px!important;
    width:2px!important;
    height:20px!important;
    transform:translateX(-50%);
    background:#3b82f6!important;
  }
  .stpdm-map-col--activities:after{
    left:50%!important;
    top:14px!important;
    transform:translateX(-50%);
    border-left:7px solid transparent!important;
    border-right:7px solid transparent!important;
    border-top:9px solid #3b82f6!important;
    border-bottom:0!important;
  }

  .stpdm-map-col--activities .stpdm-map-col__title{
    text-align:center;
    padding-left:0;
    margin-bottom:14px;
  }

  /* More usable space: activities display as two readable cards per row. */
  .stpdm-map-col--activities .stpdm-map-node-list:not([hidden]){
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 14px;
  }

  .stpdm-map-node--activity{
    min-height:96px;
  }
}

/* Slightly narrower notebook: keep activity cards one per row for readability. */
@media (max-width:1080px) and (min-width:901px){
  .stpdm-map-flow{
    grid-template-columns:minmax(190px,.75fr) minmax(225px,.9fr) minmax(270px,1.1fr);
    gap:24px;
    padding:24px;
  }
  .stpdm-map-col--activities .stpdm-map-node-list:not([hidden]){
    grid-template-columns:1fr;
  }
}

/* Existing mobile vertical map is intentionally preserved; make sure
   activity lists use the normal single-column flex layout there. */
@media (max-width:900px){
  .stpdm-map-shell{overflow:visible}
  .stpdm-map-col--activities{
    grid-column:auto;
    margin-top:0;
    padding-top:0;
  }
  .stpdm-map-col--activities .stpdm-map-node-list:not([hidden]){
    display:flex;
    flex-direction:column;
  }
}


/* =========================================================
   V1.3.7 — Container-width responsive map fix
   Media queries use viewport width, but the WordPress/Astra
   content area can be much narrower than the browser window.
   Use a container query so layout responds to the REAL map width.
   ========================================================= */
.stpdm-map-shell{
  container-type:inline-size;
  container-name:stpdm-map;
}

/* Default wide layout remains 4 columns. */
.stpdm-map-flow{
  min-width:0!important;
}

/* When the actual map container is narrower than 1380px,
   move Activities below the first 3 columns. */
@container stpdm-map (max-width:1380px){
  .stpdm-map-flow{
    grid-template-columns:minmax(210px,.82fr) minmax(250px,1fr) minmax(300px,1.18fr)!important;
    gap:28px 32px!important;
    padding:28px 28px 38px!important;
  }

  .stpdm-map-col--activities{
    grid-column:1 / -1!important;
    margin-top:14px!important;
    padding-top:30px!important;
  }

  .stpdm-map-col--activities:before{
    left:50%!important;
    top:-4px!important;
    width:2px!important;
    height:21px!important;
    transform:translateX(-50%)!important;
    background:#3b82f6!important;
  }

  .stpdm-map-col--activities:after{
    left:50%!important;
    top:15px!important;
    transform:translateX(-50%)!important;
    border-left:7px solid transparent!important;
    border-right:7px solid transparent!important;
    border-top:9px solid #3b82f6!important;
    border-bottom:0!important;
  }

  .stpdm-map-col--activities .stpdm-map-col__title{
    text-align:center!important;
    padding-left:0!important;
    margin-bottom:15px!important;
  }

  .stpdm-map-col--activities .stpdm-map-node-list:not([hidden]){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px 14px!important;
  }

  .stpdm-map-col--activities .stpdm-map-node--activity{
    min-height:98px!important;
  }
}

/* Narrow content areas: one activity card per row. */
@container stpdm-map (max-width:980px){
  .stpdm-map-col--activities .stpdm-map-node-list:not([hidden]){
    grid-template-columns:1fr!important;
  }
}

/* Very narrow containers: switch the whole map to vertical flow. */
@container stpdm-map (max-width:760px){
  .stpdm-map-flow{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    padding:20px!important;
    gap:26px!important;
  }
  .stpdm-map-col{
    width:100%!important;
  }
  .stpdm-map-col:not(.stpdm-map-col--root):before{
    left:28px!important;
    top:-18px!important;
    width:2px!important;
    height:14px!important;
    transform:none!important;
  }
  .stpdm-map-col:not(.stpdm-map-col--root):after{
    left:23px!important;
    top:-7px!important;
    transform:none!important;
    border-left:6px solid transparent!important;
    border-right:6px solid transparent!important;
    border-top:8px solid #3b82f6!important;
    border-bottom:0!important;
  }
  .stpdm-map-col--activities{
    margin-top:0!important;
    padding-top:0!important;
  }
  .stpdm-map-col--activities .stpdm-map-col__title{
    text-align:left!important;
    padding-left:3px!important;
  }
  .stpdm-map-col--activities .stpdm-map-node-list:not([hidden]){
    display:flex!important;
    flex-direction:column!important;
  }
}


/* =========================================================
   V1.3.8 — Vertical click-down Responsibility Map
   Flow: จุดเริ่มต้น ↓ ฝ่าย ↓ โครงการ ↓ กิจกรรม
   ========================================================= */

/* Always stack the four stages vertically so nothing can run off-screen. */
.stpdm-map-shell{
  overflow:visible!important;
}
.stpdm-map-flow{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-width:0!important;
  gap:34px!important;
  padding:30px 32px 42px!important;
}
.stpdm-map-col{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}

/* Downward connector between each stage. */
.stpdm-map-col:not(.stpdm-map-col--root):before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:-26px!important;
  width:3px!important;
  height:18px!important;
  background:#3b82f6!important;
  transform:translateX(-50%)!important;
  border:0!important;
}
.stpdm-map-col:not(.stpdm-map-col--root):after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:-10px!important;
  transform:translateX(-50%)!important;
  border-left:8px solid transparent!important;
  border-right:8px solid transparent!important;
  border-top:10px solid #3b82f6!important;
  border-bottom:0!important;
}

/* Stage headings centered like a guided workflow. */
.stpdm-map-col__title{
  text-align:center!important;
  padding-left:0!important;
  margin-bottom:14px!important;
  font-size:13px!important;
}

/* Root card centered and not overly wide. */
.stpdm-map-col--root .stpdm-map-node--root{
  max-width:520px!important;
  margin:0 auto!important;
}
.stpdm-map-col--root .stpdm-map-reset{
  display:block!important;
  max-width:520px!important;
  margin:10px auto 0!important;
}

/* Departments and projects: wide clickable cards in a compact grid. */
.stpdm-map-col[data-stpdm-column="departments"] .stpdm-map-node-list:not([hidden]),
.stpdm-map-col[data-stpdm-column="projects"] .stpdm-map-node-list:not([hidden]){
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  max-width:1220px!important;
  margin:0 auto!important;
}

/* Activities get more room for long Thai titles. */
.stpdm-map-col--activities .stpdm-map-node-list:not([hidden]){
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px 16px!important;
  max-width:1220px!important;
  margin:0 auto!important;
}
.stpdm-map-col--activities .stpdm-map-node--activity{
  min-height:104px!important;
}
.stpdm-map-col--activities .stpdm-map-node__body strong{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* Clear visual emphasis for the selected path. */
.stpdm-map-node.is-selected{
  box-shadow:0 0 0 3px rgba(59,130,246,.12),0 14px 28px rgba(30,64,175,.12)!important;
}

/* Notebook / tablet */
@media(max-width:1100px){
  .stpdm-map-col[data-stpdm-column="departments"] .stpdm-map-node-list:not([hidden]),
  .stpdm-map-col[data-stpdm-column="projects"] .stpdm-map-node-list:not([hidden]){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .stpdm-map-col--activities .stpdm-map-node-list:not([hidden]){
    grid-template-columns:1fr!important;
  }
}

/* Mobile */
@media(max-width:700px){
  .stpdm-map-flow{
    padding:22px 16px 34px!important;
    gap:32px!important;
  }
  .stpdm-map-col[data-stpdm-column="departments"] .stpdm-map-node-list:not([hidden]),
  .stpdm-map-col[data-stpdm-column="projects"] .stpdm-map-node-list:not([hidden]),
  .stpdm-map-col--activities .stpdm-map-node-list:not([hidden]){
    grid-template-columns:1fr!important;
  }
  .stpdm-map-col--root .stpdm-map-node--root,
  .stpdm-map-col--root .stpdm-map-reset{
    max-width:none!important;
  }
}


/* ===== V1.3.9 Vertical map arrow direction fix ===== */
.stpdm-map-node:not(.stpdm-map-node--activity) .stpdm-map-node__arrow{
  font-size:22px!important;
  line-height:1!important;
  color:#2563eb!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:28px!important;
}
.stpdm-map-node--activity .stpdm-map-node__arrow{
  white-space:nowrap!important;
}


/* ===== V1.4.0 Three-level approval workflow ===== */
.stpdm-pending_assistant{background:#fff7d6;border-color:#f5c64c;color:#8a5a00}
.stpdm-pending_deputy{background:#fff0dc;border-color:#f5a84c;color:#9a4c00}
.stpdm-pending_director{background:#f1e8ff;border-color:#b895f5;color:#6d28a8}

.stpdm-approval-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0}
.stpdm-approval-admin-card{position:relative;padding:22px;border:1px solid #dbe4f0;border-radius:20px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)}
.stpdm-approval-admin-card h3{margin:6px 0 6px}.stpdm-approval-admin-card p{color:#64748b;min-height:42px}.stpdm-approval-admin-card select{width:100%}
.stpdm-approval-step{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:#1749a8;color:#fff;font-weight:900}

.stpdm-approval-flow{display:flex;flex-direction:column;align-items:center;gap:8px;margin:18px 0}
.stpdm-approval-flow>div{width:min(560px,100%);text-align:center;padding:13px 18px;border:1px solid #d7e4f5;border-radius:14px;background:#f8fbff;font-weight:800;color:#123f85}
.stpdm-approval-flow>span{font-size:24px;color:#2563eb;font-weight:900}
.stpdm-approval-flow>div.is-final{background:#e9f9ef;border-color:#8bd4a5;color:#166534}

.stpdm-approval-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stpdm-approval-progress__item{padding:14px;border-radius:16px;border:1px solid #dbe4f0;background:#f8fafc}
.stpdm-approval-progress__item strong{display:block;color:#334155;margin-bottom:4px}
.stpdm-approval-progress__item span{display:block;color:#64748b;font-size:12px}
.stpdm-approval-progress__item.is-active{background:#fff7d6;border-color:#f5c64c;box-shadow:0 0 0 3px rgba(245,198,76,.12)}
.stpdm-approval-progress__item.is-done{background:#e9f9ef;border-color:#8bd4a5}
.stpdm-approval-progress__item.is-done strong{color:#166534}
.stpdm-approval-review{border-left:5px solid #2563eb}

@media(max-width:900px){
  .stpdm-approval-admin-grid,.stpdm-approval-progress{grid-template-columns:1fr}
}


/* ===== V1.4.2 UI Restore Guard =====
   Forces the original polished SPT map appearance on the front end.
   This block is also injected inline by the shortcode to bypass cache/theme issues.
*/
.stpdm-front{
  width:min(1720px,calc(100% - 28px))!important;
  max-width:1720px!important;
  margin:24px auto!important;
  padding:0 14px!important;
  color:#14213d!important;
}
.stpdm-teacher-map-dashboard{
  width:100%!important;
}
.stpdm-map-shell{
  background:linear-gradient(180deg,#f8fbff 0%,#f1f7ff 100%)!important;
  border:1px solid #dbe7f6!important;
  border-radius:26px!important;
  box-shadow:0 14px 34px rgba(11,44,116,.08)!important;
}
.stpdm-map-node{
  border:1px solid #cfe0f5!important;
  border-radius:18px!important;
  background:#e8fbef!important;
  color:#0f3d2b!important;
  padding:13px 14px!important;
  min-height:74px!important;
  box-shadow:0 3px 10px rgba(30,64,175,.04)!important;
}
.stpdm-map-node--root{
  background:linear-gradient(135deg,#dbeafe,#e0e7ff)!important;
  border-color:#3b82f6!important;
  color:#123f85!important;
}
.stpdm-map-node--project{
  background:#e5faf4!important;
}
.stpdm-map-node--activity{
  background:#ddf8e8!important;
  border-color:#a7e7c0!important;
  min-height:98px!important;
}
.stpdm-map-node.is-selected{
  background:linear-gradient(135deg,#dbeafe,#eff6ff)!important;
  border-color:#3b82f6!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.10),0 12px 26px rgba(30,64,175,.12)!important;
}
.stpdm-map-node__icon{
  background:rgba(255,255,255,.78)!important;
  border-radius:12px!important;
}
.stpdm-map-node__body strong{
  color:inherit!important;
  font-weight:800!important;
}
.stpdm-map-col__title{
  color:#64748b!important;
  font-weight:900!important;
}


/* ===== V1.4.3 Single Approver ===== */
.stpdm-pending_approver{background:#fff7d6;border-color:#f5c64c;color:#8a5a00}
.stpdm-single-approver-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) minmax(280px,420px);
  align-items:center;
  gap:16px;
  padding:22px;
  margin:18px 0;
  border:1px solid #dbe4f0;
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}
.stpdm-single-approver-card h3{margin:0 0 5px}
.stpdm-single-approver-card p{margin:0;color:#64748b}
.stpdm-single-approver-card select{width:100%}
.stpdm-approval-progress--single{grid-template-columns:minmax(0,520px)!important}
@media(max-width:800px){
  .stpdm-single-approver-card{grid-template-columns:48px 1fr}
  .stpdm-single-approver-card select{grid-column:1/-1}
}


/* ===== V1.4.5 Clear Review Status Panel ===== */
.stpdm-current-status-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.7fr);
  gap:14px;
  align-items:stretch;
}
.stpdm-status-current,
.stpdm-current-approver{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid #dbe4f0;
  background:#f8fbff;
}
.stpdm-current-status__icon{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;font-size:22px;flex:0 0 44px;
  box-shadow:0 4px 12px rgba(15,42,99,.08);
}
.stpdm-status-current small,.stpdm-current-approver small{
  display:block;color:#64748b;font-size:12px;margin-bottom:3px;
}
.stpdm-status-current strong,.stpdm-current-approver strong{
  display:block;font-size:18px;color:#0f2f67;
}
.stpdm-status-current--pending_approver,
.stpdm-status-current--pending_assistant,
.stpdm-status-current--pending_deputy,
.stpdm-status-current--pending_director{
  background:#fff8dc;border-color:#f4cf67;
}
.stpdm-status-current--approved{background:#eaf9ef;border-color:#8fd0a4}
.stpdm-status-current--revision{background:#fff0f0;border-color:#f2a3a3}
.stpdm-status-current--not_submitted{background:#f5f7fa}
.stpdm-note--approved{background:#edf9f1;border-left:4px solid #22c55e}
.stpdm-note--revision{background:#fff3f3;border-left:4px solid #ef4444}
.stpdm-review-actions{display:flex;gap:12px;flex-wrap:wrap}
.stpdm-review-actions .button{min-width:160px;min-height:44px;font-weight:800}
.stpdm-btn-revision{border-color:#ef4444!important;color:#b91c1c!important;background:#fff5f5!important}
.stpdm-btn-approved{background:#16a34a!important;border-color:#16a34a!important}
@media(max-width:760px){
  .stpdm-current-status-wrap{grid-template-columns:1fr}
  .stpdm-review-actions{flex-direction:column}
  .stpdm-review-actions .button{width:100%}
}


/* =========================================================
   V1.4.6 Modern Activity Detail UI
   - visual refresh only, no workflow changes
   ========================================================= */
.stpdm-front{
  max-width: 1220px;
  margin: 0 auto;
  padding: 8px 10px 56px;
}
.stpdm-front > p:first-child{ margin:0 0 18px; }

.stpdm-back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#173b78 0%,#355cc9 100%);
  color:#fff !important;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 12px 28px rgba(31,70,170,.22);
}
.stpdm-back-link:hover{ transform:translateY(-1px); box-shadow:0 16px 32px rgba(31,70,170,.28); }

.stpdm-front .stpdm-panel{
  background:rgba(255,255,255,.92);
  border:1px solid #dbe4f1;
  border-radius:28px;
  box-shadow:
    0 20px 44px rgba(19,44,94,.07),
    0 4px 12px rgba(19,44,94,.03);
  backdrop-filter: blur(6px);
  overflow:hidden;
  margin-bottom:22px;
}

.stpdm-front .stpdm-panel > h3{
  margin:0;
  padding:24px 26px 0;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  color:#122d62;
}
.stpdm-front .stpdm-panel > h3 + *{ margin-top:18px; }

.stpdm-detail-hero{
  position:relative;
  padding:26px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 24%),
    radial-gradient(circle at bottom left, rgba(126,196,255,.10), transparent 24%),
    linear-gradient(135deg,#0f3271 0%, #214da9 58%, #3f69db 100%) !important;
  color:#fff;
  border:none !important;
}
.stpdm-detail-hero:before,
.stpdm-detail-hero:after{
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
}
.stpdm-detail-hero:before{
  width:220px;height:220px;right:-70px;top:-70px;
  background:rgba(255,255,255,.08);
}
.stpdm-detail-hero:after{
  width:180px;height:180px;left:35%;bottom:-80px;
  background:rgba(255,255,255,.06);
}
.stpdm-detail-hero__top{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:start;
  margin-bottom:22px;
}
.stpdm-detail-hero .stpdm-eyebrow{
  display:inline-block;
  margin-bottom:10px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  color:#b9d2ff;
}
.stpdm-detail-hero h2{
  margin:0 0 8px;
  font-size:clamp(32px,4vw,54px);
  line-height:1.04;
  font-weight:900;
  color:#fff;
}
.stpdm-detail-hero__top p{
  margin:0;
  color:#d8e6ff;
  font-size:18px;
}
.stpdm-detail-badge{
  position:relative;
  z-index:2;
  align-self:start;
}
.stpdm-detail-badge .stpdm-badge,
.stpdm-detail-badge .stpdm-status{
  box-shadow:0 10px 20px rgba(0,0,0,.14);
  border-color:rgba(255,255,255,.3);
}

.stpdm-detail-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.stpdm-detail-grid > div{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  padding:18px 18px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.stpdm-detail-grid > div strong{
  display:block;
  margin-bottom:10px;
  font-size:13px;
  font-weight:800;
  color:#d6e4ff;
}
.stpdm-detail-grid > div span{
  display:block;
  font-size:18px;
  line-height:1.35;
  font-weight:800;
  color:#fff;
}

.stpdm-note{
  border-radius:18px;
  padding:16px 18px;
  margin:18px 0 0;
  background:#f6f9ff;
  border:1px solid #dde8f8;
  color:#284268;
}
.stpdm-detail-hero .stpdm-note{
  position:relative;
  z-index:2;
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}

.stpdm-current-status-wrap{
  padding:0 26px 24px;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);
  gap:16px;
}
.stpdm-status-current,
.stpdm-current-approver{
  border-radius:22px;
  border:1px solid #dbe4f0;
  padding:18px 20px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 10px 28px rgba(19,44,94,.05);
}
.stpdm-status-current{
  display:flex;
  align-items:center;
  gap:14px;
}
.stpdm-current-status__icon{
  width:54px;height:54px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e6eef9;
  box-shadow:0 10px 18px rgba(19,44,94,.08);
  font-size:24px;
}
.stpdm-status-current small,
.stpdm-current-approver small{
  display:block;
  font-size:12px;
  color:#71839f;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  margin-bottom:6px;
}
.stpdm-status-current strong,
.stpdm-current-approver strong{
  display:block;
  font-size:22px;
  line-height:1.25;
  color:#12305f;
}
.stpdm-status-current--pending_approver,
.stpdm-status-current--pending_assistant,
.stpdm-status-current--pending_deputy,
.stpdm-status-current--pending_director{
  background:linear-gradient(180deg,#fff9e8 0%,#fff5d9 100%);
  border-color:#f1cf7b;
}
.stpdm-status-current--approved{
  background:linear-gradient(180deg,#effcf4 0%,#e7f8ee 100%);
  border-color:#a4d8b6;
}
.stpdm-status-current--revision{
  background:linear-gradient(180deg,#fff2f2 0%,#ffe9e9 100%);
  border-color:#efb2b2;
}

.stpdm-front .stpdm-panel table.stpdm-table{
  width:calc(100% - 28px);
  margin:0 14px 18px;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid #dfe8f2;
  border-radius:20px;
  background:#fff;
}
.stpdm-front .stpdm-panel table.stpdm-table thead th{
  background:linear-gradient(180deg,#f6f9fd 0%,#eef3f9 100%);
  color:#12305f;
  font-size:14px;
  font-weight:900;
  border-bottom:1px solid #dde6f0;
  padding:16px 14px;
}
.stpdm-front .stpdm-panel table.stpdm-table tbody td{
  padding:18px 14px;
  border-bottom:1px solid #edf2f8;
  vertical-align:top;
}
.stpdm-front .stpdm-panel table.stpdm-table tbody tr:last-child td{ border-bottom:none; }
.stpdm-front .stpdm-panel table.stpdm-table tbody tr:hover td{
  background:#f9fbff;
}
.stpdm-front .stpdm-panel table.stpdm-table a{
  color:#1a4cb8;
  font-weight:800;
  text-decoration:none;
}
.stpdm-front .stpdm-panel table.stpdm-table a:hover{ text-decoration:underline; }

.stpdm-approval-review{
  padding:0 0 22px;
}
.stpdm-approval-review > h3{ padding-top:24px !important; }
.stpdm-approval-review .stpdm-note{
  margin:18px 24px 10px;
}
.stpdm-approval-review form{
  padding:0 24px;
}
.stpdm-approval-review textarea,
.stpdm-front input[type="text"],
.stpdm-front input[type="file"],
.stpdm-front select{
  width:100%;
  border:1px solid #d7e2ef;
  border-radius:16px;
  padding:14px 16px;
  background:#fbfdff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.stpdm-approval-review textarea:focus,
.stpdm-front input[type="text"]:focus,
.stpdm-front select:focus{
  outline:none;
  border-color:#7ea4ff;
  box-shadow:0 0 0 4px rgba(58,109,217,.14);
  background:#fff;
}
.stpdm-front form p{ margin:0 0 14px; }
.stpdm-front form label{ font-weight:800; color:#153567; }
.stpdm-front .button,
.stpdm-front button.button{
  border-radius:16px;
  min-height:48px;
  padding:0 20px;
  font-weight:900;
  box-shadow:none;
}
.stpdm-front .button.button-primary,
.stpdm-front button.button-primary{
  background:linear-gradient(135deg,#163a7b 0%,#2f5ed2 100%);
  border-color:#244db3;
}
.stpdm-front .button.button-primary:hover,
.stpdm-front button.button-primary:hover{
  background:linear-gradient(135deg,#16356f 0%,#2b57c1 100%);
}
.stpdm-btn-approved{
  background:linear-gradient(135deg,#17a44d 0%,#15803d 100%) !important;
  border-color:#15803d !important;
}
.stpdm-btn-approved:hover{
  background:linear-gradient(135deg,#169848 0%,#166f39 100%) !important;
}
.stpdm-btn-revision{
  border:1px solid #efb3b3 !important;
  background:linear-gradient(180deg,#fff 0%,#fff2f2 100%) !important;
  color:#b42323 !important;
}

.stpdm-history{
  list-style:none;
  margin:16px 0 0;
  padding:0 24px 24px;
}
.stpdm-history li{
  position:relative;
  padding:14px 16px 14px 18px;
  margin:0 0 12px;
  border-radius:18px;
  background:#f8fbff;
  border:1px solid #e1e8f3;
}
.stpdm-history li:before{
  content:"";
  position:absolute;
  left:0;top:14px;bottom:14px;
  width:4px;border-radius:99px;
  background:linear-gradient(180deg,#1d4fd7 0%,#76a0ff 100%);
}

@media (max-width: 980px){
  .stpdm-detail-hero__top{ grid-template-columns:1fr; }
  .stpdm-detail-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stpdm-current-status-wrap{ grid-template-columns:1fr; padding:0 18px 20px; }
}

@media (max-width: 640px){
  .stpdm-front{ padding:6px 4px 42px; }
  .stpdm-front .stpdm-panel{ border-radius:22px; }
  .stpdm-detail-hero{ padding:18px; }
  .stpdm-detail-hero h2{ font-size:34px; }
  .stpdm-detail-grid{ grid-template-columns:1fr; }
  .stpdm-front .stpdm-panel > h3{ padding:20px 18px 0; }
  .stpdm-front .stpdm-panel table.stpdm-table{
    width:calc(100% - 16px);
    margin:0 8px 14px;
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
  .stpdm-approval-review .stpdm-note,
  .stpdm-approval-review form,
  .stpdm-history{ padding-left:18px; padding-right:18px; }
}


/* =========================================================
   V1.4.7 Emphasized Lower Layout
   - make lower review/status area more prominent
   ========================================================= */

/* make the sections after hero/document block stand out more */
.stpdm-front .stpdm-panel:nth-of-type(3),
.stpdm-front .stpdm-panel:nth-of-type(4),
.stpdm-front .stpdm-panel:nth-of-type(5){
  position:relative;
  border-radius:30px;
  box-shadow:
    0 28px 54px rgba(17,38,84,.10),
    0 8px 20px rgba(17,38,84,.05);
}

/* stronger section heading */
.stpdm-front .stpdm-panel:nth-of-type(3) > h3,
.stpdm-front .stpdm-panel:nth-of-type(4) > h3,
.stpdm-front .stpdm-panel:nth-of-type(5) > h3{
  font-size:20px;
  font-weight:900;
  color:#0f2f67;
}

/* review status section highlight */
.stpdm-front .stpdm-panel:nth-of-type(3){
  background:
    radial-gradient(circle at top right, rgba(79,125,255,.10), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border:1px solid #d9e4f4;
}
.stpdm-front .stpdm-panel:nth-of-type(3)::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:7px;
  border-radius:30px 0 0 30px;
  background:linear-gradient(180deg,#173b78 0%, #3a6ee7 100%);
}

/* more prominent current status / approver cards */
.stpdm-current-status-wrap{
  padding:0 26px 26px;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);
  gap:18px;
}
.stpdm-status-current,
.stpdm-current-approver{
  min-height:120px;
  align-items:center;
  border-radius:24px;
  box-shadow:
    0 20px 34px rgba(21,49,104,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
}
.stpdm-status-current{
  position:relative;
  overflow:hidden;
}
.stpdm-status-current::after{
  content:"";
  position:absolute;
  right:-30px; top:-30px;
  width:120px; height:120px;
  border-radius:50%;
  background:rgba(255,255,255,.20);
}
.stpdm-current-status__icon{
  width:64px; height:64px;
  border-radius:20px;
  font-size:28px;
}
.stpdm-status-current strong,
.stpdm-current-approver strong{
  font-size:24px;
}
.stpdm-status-current small,
.stpdm-current-approver small{
  font-size:12px;
  margin-bottom:8px;
}
.stpdm-current-approver{
  position:relative;
  background:
    linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
}
.stpdm-current-approver::before{
  content:"👤";
  position:absolute;
  right:18px;
  top:14px;
  font-size:22px;
  opacity:.16;
}

/* emphasise each status color more */
.stpdm-status-current--pending_approver,
.stpdm-status-current--pending_assistant,
.stpdm-status-current--pending_deputy,
.stpdm-status-current--pending_director{
  background:linear-gradient(135deg,#fff8df 0%, #fff1c8 100%);
  border-color:#edc75e;
}
.stpdm-status-current--approved{
  background:linear-gradient(135deg,#eaf9ef 0%, #dff6e7 100%);
  border-color:#86c89d;
}
.stpdm-status-current--revision{
  background:linear-gradient(135deg,#fff1f1 0%, #ffe4e4 100%);
  border-color:#e7a1a1;
}
.stpdm-status-current--not_submitted{
  background:linear-gradient(135deg,#f8fafc 0%, #eef3f9 100%);
  border-color:#d7e2ef;
}

/* action area below status more eye-catching */
.stpdm-approval-review{
  background:
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}
.stpdm-approval-review .stpdm-note{
  border-radius:20px;
  background:linear-gradient(180deg,#f4f8ff 0%,#eef5ff 100%);
  border:1px solid #d7e3fb;
}
.stpdm-review-actions{
  gap:14px;
}
.stpdm-review-actions .button{
  min-width:190px;
  min-height:50px;
  border-radius:16px;
  font-size:15px;
  letter-spacing:.01em;
  box-shadow:0 14px 24px rgba(18,48,95,.08);
}

/* history area a bit more visual */
.stpdm-history li{
  background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
  box-shadow:0 8px 18px rgba(20,44,92,.04);
}

/* mobile */
@media (max-width: 980px){
  .stpdm-current-status-wrap{
    grid-template-columns:1fr;
  }
  .stpdm-status-current,
  .stpdm-current-approver{
    min-height:auto;
  }
}


/* =========================================================
   V1.4.8 Download every attached document/image
   ========================================================= */
.stpdm-documents-panel .stpdm-download-col{
  width:150px;
  text-align:center;
}
.stpdm-file-title{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.stpdm-file-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 40px;
  background:linear-gradient(180deg,#f3f7ff 0%,#eaf1ff 100%);
  border:1px solid #dae5f7;
  font-size:18px;
}
.stpdm-file-title > div{
  min-width:0;
}
.stpdm-file-title a{
  display:inline-block;
  max-width:100%;
  overflow-wrap:anywhere;
}
.stpdm-file-title small{
  color:#71809a;
}
.stpdm-download-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:118px;
  min-height:42px;
  padding:0 15px;
  border-radius:14px;
  background:linear-gradient(135deg,#0f3e89 0%,#2563d5 100%);
  border:1px solid #1c55bf;
  box-shadow:0 10px 20px rgba(32,84,183,.16);
  color:#fff !important;
  font-size:13px;
  font-weight:900 !important;
  text-decoration:none !important;
  white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease;
}
.stpdm-download-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(32,84,183,.22);
  color:#fff !important;
}

@media(max-width:700px){
  .stpdm-documents-panel table.stpdm-table{
    min-width:760px;
  }
}


/* ===== V1.4.9 Manager-only quick links ===== */
.stpdm-manager-quicklinks{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  margin:18px 0 22px;
  padding:20px 22px;
  border:1px solid #d8e3f2;
  border-radius:24px;
  background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
  box-shadow:0 16px 34px rgba(20,48,100,.07);
}
.stpdm-manager-quicklinks__label span{
  display:block;margin-bottom:5px;color:#5a84e8;font-size:11px;font-weight:900;letter-spacing:.14em
}
.stpdm-manager-quicklinks__label strong{
  display:block;color:#12305f;font-size:21px;line-height:1.2;margin-bottom:4px
}
.stpdm-manager-quicklinks__label small{color:#71809a;font-size:13px}
.stpdm-manager-quicklinks__actions{display:flex;gap:12px}
.stpdm-manager-link{
  min-width:190px;min-height:72px;display:grid;grid-template-columns:44px minmax(0,1fr) 18px;
  gap:10px;align-items:center;padding:12px 14px;border-radius:18px;text-decoration:none!important;
  transition:transform .15s ease,box-shadow .15s ease
}
.stpdm-manager-link:hover{transform:translateY(-2px)}
.stpdm-manager-link__icon{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:14px;
  font-size:20px;background:rgba(255,255,255,.82);box-shadow:0 6px 14px rgba(10,37,88,.08)
}
.stpdm-manager-link small{display:block;font-size:11px;margin-bottom:2px;opacity:.78}
.stpdm-manager-link strong{display:block;font-size:16px;line-height:1.1}
.stpdm-manager-link b{font-size:20px}
.stpdm-manager-link--dashboard{
  color:#fff!important;background:linear-gradient(135deg,#123778 0%,#2858c7 100%);
  box-shadow:0 12px 24px rgba(29,73,170,.18)
}
.stpdm-manager-link--reports{
  color:#12305f!important;background:linear-gradient(180deg,#ffffff 0%,#edf4ff 100%);
  border:1px solid #cddbf0;box-shadow:0 10px 20px rgba(22,50,104,.08)
}
@media(max-width:900px){
  .stpdm-manager-quicklinks{grid-template-columns:1fr}
  .stpdm-manager-quicklinks__actions{width:100%}
  .stpdm-manager-link{flex:1 1 0}
}
@media(max-width:620px){
  .stpdm-manager-quicklinks__actions{flex-direction:column}
  .stpdm-manager-link{width:100%}
}


/* =========================================================
   V1.5.0 Manager Workspace
   MANAGEMENT / งานของฉัน / งานที่รอฉันตรวจสอบ
   ========================================================= */
.stpdm-manager-work-section{
  margin:22px 0;
  padding:24px;
  border-radius:28px;
  border:1px solid #d9e4f2;
  background:linear-gradient(180deg,#fff 0%,#f9fbff 100%);
  box-shadow:0 18px 40px rgba(17,45,96,.07);
}
.stpdm-manager-work-section--mine{
  background:
    radial-gradient(circle at top right,rgba(62,111,225,.08),transparent 30%),
    linear-gradient(180deg,#fff 0%,#f7faff 100%);
}
.stpdm-manager-work-section--review{
  background:
    radial-gradient(circle at top right,rgba(245,166,35,.11),transparent 30%),
    linear-gradient(180deg,#fff 0%,#fffdf8 100%);
}
.stpdm-work-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.stpdm-work-kicker{
  display:block;
  margin-bottom:5px;
  color:#5d84e5;
  font-size:11px;
  font-weight:900;
  letter-spacing:.15em;
}
.stpdm-manager-work-section--review .stpdm-work-kicker{color:#d38a14}
.stpdm-work-section-head h2{
  margin:0 0 6px;
  color:#102e63;
  font-size:26px;
  line-height:1.2;
  font-weight:900;
}
.stpdm-work-section-head p{
  margin:0;
  color:#6f8099;
}
.stpdm-work-count{
  min-width:118px;
  padding:14px 18px;
  border-radius:18px;
  text-align:center;
  background:linear-gradient(135deg,#eaf1ff,#f5f8ff);
  border:1px solid #d3dff1;
}
.stpdm-work-count--review{
  background:linear-gradient(135deg,#fff4d6,#fff9e8);
  border-color:#edcb77;
}
.stpdm-work-count strong{
  display:block;
  color:#143d86;
  font-size:28px;
  line-height:1;
}
.stpdm-work-count span{
  display:block;
  margin-top:5px;
  color:#71809a;
  font-size:11px;
  font-weight:800;
}

/* The manager's own map is nested inside a section, so reduce duplicated outer spacing. */
.stpdm-manager-work-section--mine .stpdm-teacher-map-dashboard{
  margin-top:0;
}
.stpdm-manager-work-section--mine .stpdm-map-hero{
  margin-top:0;
  border-radius:24px;
}
.stpdm-manager-work-section--mine .stpdm-map-hero .stpdm-eyebrow{
  color:#aecdff;
}

/* Review queue */
.stpdm-review-queue-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.stpdm-review-queue-card{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:17px;
  border-radius:20px;
  border:1px solid #e0e7f1;
  background:#fff;
  text-decoration:none!important;
  color:#16325f!important;
  box-shadow:0 10px 24px rgba(20,47,94,.05);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.stpdm-review-queue-card:hover{
  transform:translateY(-2px);
  border-color:#f0c86b;
  box-shadow:0 16px 30px rgba(20,47,94,.09);
}
.stpdm-review-queue-card__icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(180deg,#fff4d5,#ffebad);
  font-size:22px;
}
.stpdm-review-queue-card__body{
  min-width:0;
}
.stpdm-review-queue-card__dept{
  display:block;
  margin-bottom:4px;
  color:#8896aa;
  font-size:11px;
  font-weight:800;
}
.stpdm-review-queue-card__body strong{
  display:block;
  margin-bottom:5px;
  color:#12305f;
  font-size:17px;
  line-height:1.3;
}
.stpdm-review-queue-card__body small{
  display:block;
  color:#71809a;
  line-height:1.45;
}
.stpdm-review-queue-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:9px;
  color:#52657f;
  font-size:12px;
}
.stpdm-review-queue-card__action{
  text-align:right;
  white-space:nowrap;
}
.stpdm-review-pill{
  display:block;
  margin-bottom:10px;
  padding:7px 10px;
  border-radius:999px;
  background:#fff4cf;
  border:1px solid #efca6d;
  color:#8a5a00;
  font-size:11px;
  font-weight:900;
}
.stpdm-review-queue-card__action b{
  color:#1b55bd;
  font-size:12px;
}
.stpdm-work-empty{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px;
  border-radius:20px;
  border:1px dashed #cfdbea;
  background:#fbfdff;
}
.stpdm-work-empty > span{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#e8f8ee;color:#168243;font-size:22px;font-weight:900;
}
.stpdm-work-empty strong{display:block;color:#173766;margin-bottom:3px}
.stpdm-work-empty small{color:#78879b}

@media(max-width:980px){
  .stpdm-review-queue-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .stpdm-manager-work-section{padding:16px;border-radius:22px}
  .stpdm-work-section-head{align-items:flex-start;flex-direction:column}
  .stpdm-review-queue-card{
    grid-template-columns:46px minmax(0,1fr);
  }
  .stpdm-review-queue-card__icon{width:46px;height:46px}
  .stpdm-review-queue-card__action{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
  }
  .stpdm-review-pill{margin:0}
}


/* =========================================================
   V1.5.1 Per-activity reviewer assignment
   ========================================================= */
.stpdm-select-reviewer-panel{
  border-left:6px solid #2563eb !important;
  background:
    radial-gradient(circle at top right,rgba(37,99,235,.08),transparent 28%),
    linear-gradient(180deg,#fff 0%,#f8fbff 100%) !important;
}
.stpdm-select-reviewer-panel select{
  min-height:52px;
  font-size:15px;
  font-weight:700;
  color:#12305f;
  background:#fff;
}
.stpdm-select-reviewer-panel .stpdm-note{
  margin-top:12px;
}