/* Management Runtime · Light theme · Brand palette
   #E42369 magenta · #F77BA8 pink · #FFFFFF white · #F0DC7A yellow · #B6E0EB sky · #2F133C ink
   Font: Domine (serif) · Noto Sans Thai (body Thai) · Space Mono (mono)
*/
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Brand palette */
  --brand-magenta:#E42369;
  --brand-pink:#F77BA8;
  --brand-white:#FFFFFF;
  --brand-yellow:#F0DC7A;
  --brand-sky:#B6E0EB;
  --brand-ink:#2F133C;

  /* Semantic */
  --bg:#FFFFFF;
  --surface:#FDF6F9;          /* very pale pink */
  --surface2:#FBF4EC;         /* very pale cream */
  --panel:#FFFFFF;
  --text1:#2F133C;            /* dark purple · main text */
  --text2:#5C3F60;            /* medium purple · body */
  --text3:#8C6B90;            /* light purple · meta */
  --text4:#B89FBC;            /* very light purple · muted */
  --border:rgba(47,19,60,0.10);
  --border-strong:rgba(47,19,60,0.22);

  /* Status colors (text · bg) */
  --st-ready-text:#0E7C56;    --st-ready-bg:#D7F4E7;
  --st-progress-text:#1D7B9B; --st-progress-bg:#DFF1F8;
  --st-partial-text:#A67C18;  --st-partial-bg:#FBF1C8;
  --st-blocked-text:#E42369;  --st-blocked-bg:#FCE1EC;
  --st-none-text:#8C6B90;     --st-none-bg:#F0E8F2;

  /* Priorities */
  --p0-text:#E42369; --p0-bg:#FCE1EC;
  --p1-text:#A67C18; --p1-bg:#FBF1C8;
  --p2-text:#5C3F60; --p2-bg:#F0E8F2;

  /* Mode pill */
  --mode-text:#1D7B9B; --mode-bg:#DFF1F8;

  /* Runtime accent (session strip) */
  --runtime-text:#E42369; --runtime-bg:#FCE1EC;

  /* Legacy variable aliases (keep old class names working) */
  --teal:#0E7C56;
  --blue:#1D7B9B;
  --purple:#6B2C73;
  --amber:#A67C18;
  --rose:#E42369;
  --pink:#E42369;
  --green:#0E7C56;
  --orange:#E42369;
  --cyan:#1D7B9B;
  --indigo:#6B2C73;

  /* Fonts */
  --serif:'Domine','Noto Serif Thai',Georgia,serif;
  --sans:'Noto Sans Thai','Domine',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'Space Mono','SF Mono',Menlo,monospace;
  --bebas:'Domine','Noto Serif Thai',serif; /* replace Bebas with Domine for display */
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text1);min-height:100vh;line-height:1.65;
  background-image:
    radial-gradient(ellipse 70% 50% at 10% -10%,rgba(247,123,168,0.14) 0%,transparent 55%),
    radial-gradient(ellipse 50% 45% at 95% 5%,rgba(182,224,235,0.22) 0%,transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 110%,rgba(240,220,122,0.14) 0%,transparent 55%);
}
a{color:inherit;text-decoration:none}

/* Session strip — runtime indicator (light) */
.session-strip{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 22px;
  background:linear-gradient(90deg,#FCE1EC 0%,#FBF1C8 100%);
  border-bottom:1px solid var(--border-strong);
  box-shadow:0 1px 2px rgba(47,19,60,0.06);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
}
.session-strip .ss-left{display:flex;align-items:center;gap:10px}
.session-strip .ss-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-magenta);box-shadow:0 0 0 4px rgba(228,35,105,0.18);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.session-strip .ss-label{color:var(--brand-magenta);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.session-strip .ss-email{color:var(--text1);font-weight:600}
.session-strip .ss-role{color:var(--text2);padding:2px 8px;border:1px solid var(--border-strong);border-radius:4px;text-transform:uppercase;font-size:10.5px;background:var(--panel)}
.session-strip .ss-right{display:flex;gap:14px;align-items:center}
.session-strip .ss-right a{color:var(--text2);text-transform:uppercase;font-size:11px;letter-spacing:.14em;padding:4px 0;border-bottom:1px dashed transparent}
.session-strip .ss-right a:hover{color:var(--brand-magenta);border-bottom-color:var(--brand-magenta)}
.session-strip .ss-logout{color:var(--brand-magenta)!important;font-weight:700}

.wrap{max-width:100%;width:100%;margin:0 auto;padding:32px 28px 96px}

.breadcrumb{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--text3);text-transform:uppercase;margin-bottom:22px}
.breadcrumb a{color:var(--text2);border-bottom:1px dashed var(--border-strong)}
.breadcrumb a:hover{color:var(--brand-magenta)}
.breadcrumb .sep{color:var(--text4);margin:0 10px}

.hero{
  padding:30px 36px;border-radius:18px;
  background:linear-gradient(135deg,#FCE1EC 0%,#FBF1C8 55%,#DFF1F8 100%);
  border:1px solid var(--border-strong);
  margin-bottom:26px;
  box-shadow:0 12px 36px rgba(47,19,60,0.08);
}
.hero .kicker{
  display:inline-block;padding:6px 14px;border-radius:99px;
  background:var(--panel);border:1px solid var(--border-strong);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-magenta);font-weight:700;margin-bottom:12px;
}
.hero h1{
  font-family:var(--serif);font-size:clamp(34px,5vw,56px);font-weight:700;letter-spacing:-.01em;line-height:1.08;
  color:var(--brand-ink);
  margin-bottom:10px;
}
.hero h1 em{font-style:italic;color:var(--brand-magenta);font-weight:700}
.hero .sub{font-size:17px;color:var(--text2);line-height:1.55;max-width:920px;font-family:var(--sans)}
.hero .sub code{font-family:var(--mono);background:var(--panel);color:var(--brand-magenta);padding:1px 7px;border-radius:4px;border:1px solid var(--border-strong);font-size:14px}
.hero .sub strong{color:var(--brand-ink)}

.summary-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:20px 0 24px}
.sum-card{padding:16px 18px;border-radius:12px;background:var(--panel);border:1px solid var(--border);box-shadow:0 2px 6px rgba(47,19,60,0.04)}
.sum-card .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
.sum-card .value{font-family:var(--serif);font-size:34px;color:var(--brand-ink);line-height:1;font-weight:700}
.sum-card .meta{font-family:var(--mono);font-size:11px;color:var(--text4);margin-top:4px}
.sum-card.accent{background:#FCE1EC;border-color:rgba(228,35,105,0.2)}
.sum-card.accent .value{color:var(--brand-magenta)}
.sum-card.danger{background:#FBF1C8;border-color:rgba(166,124,24,0.2)}
.sum-card.danger .value{color:#A67C18}

.section{margin-top:26px}
.section h2{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--brand-ink);margin-bottom:10px;letter-spacing:-.01em}
.section h2 .th{display:block;font-family:var(--sans);font-size:14.5px;font-weight:400;color:var(--text3);letter-spacing:0;margin-top:2px}

.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
.btn{
  padding:8px 16px;border-radius:8px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:var(--brand-magenta);color:var(--brand-white);border:1px solid var(--brand-magenta);
  cursor:pointer;transition:all .15s;
  box-shadow:0 2px 4px rgba(228,35,105,0.2);
}
.btn:hover{background:#C71F5C;border-color:#C71F5C}
.btn-edit{background:var(--brand-yellow);color:var(--brand-ink);border-color:#D8C06A;padding:5px 12px;font-size:12.5px;box-shadow:0 1px 2px rgba(47,19,60,0.06)}
.btn-edit:hover{background:#E6CF6E}
.btn-refresh{background:var(--brand-sky);color:#165E78;border-color:#8DC7D7;box-shadow:0 1px 2px rgba(47,19,60,0.06)}
.btn-refresh:hover{background:#A3D7E4}

.filter-bar{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.chip{
  padding:5px 12px;border-radius:99px;
  background:var(--panel);border:1px solid var(--border-strong);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);
  cursor:pointer;user-select:none;transition:all .15s;
}
.chip:hover{border-color:var(--brand-magenta);color:var(--brand-magenta)}
.chip.active{background:var(--brand-magenta);border-color:var(--brand-magenta);color:var(--brand-white)}

table.reg{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px;color:var(--text1);background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(47,19,60,0.04)}
table.reg th{text-align:left;padding:12px 14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--text1);background:#FBEFEF;border-bottom:2px solid var(--brand-pink);white-space:nowrap}
table.reg td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:top}
table.reg tr:last-child td{border-bottom:none}
table.reg tbody tr:hover{background:#FDF6F9}
table.reg td.id{font-family:var(--mono);font-size:13.5px;color:var(--brand-magenta);font-weight:700;white-space:nowrap}
table.reg td.name{color:var(--brand-ink);font-weight:600;font-size:15px}
table.reg td.muted{color:var(--text3);font-family:var(--mono);font-size:13.5px}
.table-wrap{overflow-x:auto;width:100%;border-radius:10px}

/* Status pills — colored text with tinted bg */
.pill{display:inline-block;padding:3px 10px;border-radius:5px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;white-space:nowrap;border:1px solid transparent}
.pill-ready   {background:var(--st-ready-bg);   color:var(--st-ready-text);   border-color:#B4E4CF}
.pill-progress{background:var(--st-progress-bg);color:var(--st-progress-text);border-color:#BADCE6}
.pill-partial {background:var(--st-partial-bg); color:var(--st-partial-text); border-color:#E8D380}
.pill-blocked {background:var(--st-blocked-bg); color:var(--st-blocked-text); border-color:#F2C2D3}
.pill-none    {background:var(--st-none-bg);    color:var(--st-none-text);    border-color:#DDCFE0}
.pill-mode    {background:var(--mode-bg);       color:var(--mode-text);       border-color:#BADCE6}
.pill-priority-p0{background:var(--p0-bg);color:var(--p0-text);border-color:#F2C2D3}
.pill-priority-p1{background:var(--p1-bg);color:var(--p1-text);border-color:#E8D380}
.pill-priority-p2{background:var(--p2-bg);color:var(--p2-text);border-color:#DDCFE0}

.blocker-text{color:var(--brand-magenta);font-size:13.5px;font-weight:500}
.next-action-text{color:#A67C18;font-size:13.5px;font-weight:500}
.updated-at{color:var(--text4);font-family:var(--mono);font-size:12.5px}

/* Status Legend at bottom of each page */
.status-legend{
  margin-top:28px;padding:18px 22px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);
  font-family:var(--sans);font-size:14px;color:var(--text2);line-height:1.7;
}
.status-legend h3{
  font-family:var(--serif);font-size:18px;color:var(--brand-ink);margin-bottom:10px;font-weight:700;
}
.status-legend .legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 18px;margin-top:8px}
.status-legend .leg-row{display:flex;align-items:center;gap:10px}
.status-legend .leg-row .pill{flex-shrink:0}
.status-legend .leg-row .desc{color:var(--text2);font-size:13.5px}
.status-legend .note{margin-top:10px;font-size:12.5px;color:var(--text3);font-style:italic}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(47,19,60,0.35);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--panel);border:1px solid var(--border-strong);border-radius:14px;padding:26px 30px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(47,19,60,0.25)}
.modal h3{font-family:var(--serif);font-size:24px;color:var(--brand-magenta);margin-bottom:14px;font-weight:700;letter-spacing:-.01em}
.modal .field{margin-bottom:14px}
.modal label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:5px}
.modal input,.modal select,.modal textarea{width:100%;padding:9px 12px;background:var(--bg);border:1px solid var(--border-strong);border-radius:6px;color:var(--text1);font-family:var(--sans);font-size:14.5px}
.modal input:focus,.modal select:focus,.modal textarea:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(228,35,105,0.14)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.btn-cancel{padding:9px 18px;background:var(--panel);border:1px solid var(--border-strong);color:var(--text2);border-radius:7px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.btn-cancel:hover{border-color:var(--text2)}
.btn-save{padding:9px 18px;background:var(--brand-magenta);border:1px solid var(--brand-magenta);color:var(--brand-white);border-radius:7px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.btn-save:hover{background:#C71F5C}
.modal-msg{margin-top:10px;font-size:13px;font-family:var(--mono)}
.modal-msg.saving{color:var(--st-progress-text)}
.modal-msg.success{color:var(--st-ready-text)}
.modal-msg.error{color:var(--brand-magenta)}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{max-width:440px;width:100%;padding:36px 40px;border-radius:18px;background:var(--panel);border:1px solid var(--border);box-shadow:0 28px 80px rgba(47,19,60,0.12)}
.login-card h1{font-family:var(--serif);font-size:40px;color:var(--brand-ink);margin-bottom:6px;font-weight:700;letter-spacing:-.015em}
.login-card h1 em{font-style:italic;color:var(--brand-magenta)}
.login-card .sub{font-size:14px;color:var(--text3);margin-bottom:22px;font-family:var(--sans)}
.login-card .field{margin-bottom:14px}
.login-card label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:5px}
.login-card input{width:100%;padding:11px 14px;background:var(--bg);border:1px solid var(--border-strong);border-radius:9px;color:var(--text1);font-family:var(--sans);font-size:15px}
.login-card input:focus{outline:none;border-color:var(--brand-magenta);box-shadow:0 0 0 3px rgba(228,35,105,0.14)}
.login-card button{width:100%;padding:12px;margin-top:10px;background:var(--brand-magenta);border:1px solid var(--brand-magenta);color:var(--brand-white);border-radius:9px;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;transition:background .15s}
.login-card button:hover{background:#C71F5C}
.login-msg{margin-top:12px;min-height:20px;font-size:13px;font-family:var(--mono)}
.login-msg.error{color:var(--brand-magenta)}
.login-msg.success{color:var(--st-ready-text)}

.foot{margin-top:48px;padding-top:22px;border-top:1px solid var(--border);font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--text3);text-transform:uppercase;text-align:center}
.foot a{color:var(--text2);border-bottom:1px dashed var(--border-strong);padding:0 8px}
.foot a:hover{color:var(--brand-magenta)}

.runtime-note{padding:14px 18px;border-radius:10px;background:#FBF1C8;border:1px solid #E8D380;font-size:14px;color:var(--text1);margin:14px 0;font-family:var(--sans);line-height:1.6}
.runtime-note strong{color:#A67C18;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

@media (max-width:760px){
  .session-strip{flex-direction:column;align-items:flex-start;gap:6px}
  .session-strip .ss-right{flex-wrap:wrap;gap:10px}
  .wrap{padding:22px 16px 80px}
  .hero{padding:22px 22px}
  table.reg{font-size:14px}
  table.reg td.muted,table.reg td.id{font-size:12.5px}
  .pill{font-size:10.5px}
}