/* WC Portal — design tokens ใช้ชุดเดียวกับ GPMS field app mockup (build/phaseB2/field_app_mockup.html)
   เพื่อให้ทั้งองค์กรรู้สึกเป็น "ระบบเดียวกัน" ตาม Master Plan D5 */
:root{
  --ground:#EDEAE2;
  --ground-raised:#FFFFFF;
  --ink:#1E2226;
  --ink-soft:#5B5F63;
  --line:#D8D3C7;
  --accent:#E8571F;
  --accent-ink:#FFFFFF;
  --accent-soft:#FCE2D2;
  --signal-green:#2F8F52;
  --signal-green-soft:#DCF0E2;
  --signal-amber:#C77E00;
  --signal-amber-soft:#FBEACB;
  --signal-red:#C23B3B;
  --signal-red-soft:#F8DEDE;
  --steel:#33637F;
  --steel-soft:#DCE9EE;
  --shadow: 0 24px 60px -24px rgba(30,34,38,0.35);
  --font-display:'Kanit','Sarabun','Noto Sans Thai','TH Sarabun New',system-ui,sans-serif;
  --font-body:'Sarabun','Noto Sans Thai','TH Sarabun New',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#191C1E; --ground-raised:#232729; --ink:#EDEAE2; --ink-soft:#A9AEA9; --line:#33383B;
    --accent:#FF7A3D; --accent-ink:#1B1300; --accent-soft:#3A2314;
    --signal-green:#59C583; --signal-green-soft:#193821;
    --signal-amber:#E3A536; --signal-amber-soft:#3A2C0E;
    --signal-red:#E36B6B; --signal-red-soft:#3A1C1C;
    --steel:#7FB2CC; --steel-soft:#1E333D;
  }
}
:root[data-theme="dark"]{
  --ground:#191C1E; --ground-raised:#232729; --ink:#EDEAE2; --ink-soft:#A9AEA9; --line:#33383B;
  --accent:#FF7A3D; --accent-ink:#1B1300; --accent-soft:#3A2314;
  --signal-green:#59C583; --signal-green-soft:#193821;
  --signal-amber:#E3A536; --signal-amber-soft:#3A2C0E;
  --signal-red:#E36B6B; --signal-red-soft:#3A1C1C;
  --steel:#7FB2CC; --steel-soft:#1E333D;
}
:root[data-theme="light"]{
  --ground:#EDEAE2; --ground-raised:#FFFFFF; --ink:#1E2226; --ink-soft:#5B5F63; --line:#D8D3C7;
  --accent:#E8571F; --accent-ink:#FFFFFF; --accent-soft:#FCE2D2;
  --signal-green:#2F8F52; --signal-green-soft:#DCF0E2;
  --signal-amber:#C77E00; --signal-amber-soft:#FBEACB;
  --signal-red:#C23B3B; --signal-red-soft:#F8DEDE;
  --steel:#33637F; --steel-soft:#DCE9EE;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ground); color:var(--ink); font-family:var(--font-body);
  min-height:100vh;
}
h1,h2,h3{ font-family:var(--font-display); margin:0 0 .5em; }
a{ color:var(--steel); }

/* ---------- shell: sidebar ซ้าย + คอลัมน์เนื้อหาขวา (WC Portal home redesign v4, 20 ก.ค. 2569) ---------- */
.app-shell{ display:flex; align-items:flex-start; min-height:100vh; width:100%; }

.sidebar{
  flex:0 0 240px; width:240px; background:var(--ground-raised); border-right:1px solid var(--line);
  min-height:100vh; position:sticky; top:0; display:flex; flex-direction:column; padding:18px 14px;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 18px; }
.sidebar-brand img{ height:30px; width:auto; }
.sidebar-brand .t1{ font-family:var(--font-display); font-weight:600; font-size:1rem; line-height:1.2; }
.sidebar-brand .t2{ font-size:.72rem; color:var(--ink-soft); }

.sidebar-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; text-decoration:none;
  color:var(--ink-soft); font-size:.9rem; cursor:pointer; border:none; background:transparent;
  font-family:var(--font-body); text-align:left; width:100%;
}
.nav-item .ic{ font-size:1.05rem; width:20px; text-align:center; }
.nav-item:hover{ background:var(--ground); color:var(--ink); }
.nav-item.active{ background:var(--accent-soft); color:var(--accent); font-weight:600; }

.sidebar-bottom{ border-top:1px solid var(--line); padding-top:12px; margin-top:10px; }
.user-chip{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; background:var(--ground); }
.avatar{
  width:32px; height:32px; border-radius:50%; background:var(--steel-soft); color:var(--steel); display:flex;
  align-items:center; justify-content:center; font-size:.82rem; font-weight:600; font-family:var(--font-display);
  flex:0 0 auto;
}
.user-chip .who{ min-width:0; }
.user-chip .name{ font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-chip .role{ font-size:.72rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.main-col{ flex:1; min-width:0; }

.topbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px;
  background:var(--ground-raised); border-bottom:1px solid var(--line); padding:14px 28px;
  position:sticky; top:0; z-index:10;
}
.topbar .crumb{ font-family:var(--font-display); font-weight:600; font-size:1rem; }
.icon-btn{
  width:34px; height:34px; border-radius:10px; border:none; background:transparent; color:var(--ink-soft);
  font-size:1.05rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{ background:var(--accent-soft); color:var(--accent); }

main{ max-width:1080px; margin:0 auto; padding:24px 28px 60px; }

/* ---------- hero banner พื้นเข้ม ---------- */
.hero{
  background:linear-gradient(120deg,#15181A 0%,#1E2226 55%,var(--steel) 130%);
  border-radius:20px; padding:32px 34px; margin-bottom:26px; color:#F4F2ED;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:.76rem; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.hero-body{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hero-logo{
  width:64px; height:64px; border-radius:14px; background:#fff; display:flex; align-items:center;
  justify-content:center; flex:0 0 auto; padding:10px;
}
.hero-logo img{ width:100%; height:auto; }
.hero-text h1{ color:#fff; font-size:1.6rem; margin-bottom:.15em; }
.hero-text p{ color:#D8D3C7; font-size:.92rem; margin:0 0 16px; max-width:520px; }
.hero-cta{
  display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:10px; border:none;
  background:var(--accent); color:var(--accent-ink); font-family:var(--font-body); font-weight:600;
  font-size:.9rem; cursor:pointer; text-decoration:none;
}
.hero-cta:hover{ opacity:.92; }

.group{ margin-bottom:30px; scroll-margin-top:90px; }
.group-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.group-head h2{ font-size:1.05rem; }
.group-head .count{ font-size:.8rem; color:var(--ink-soft); }

/* ---------- การ์ดบริการแบบแถว: ไอคอนสี่เหลี่ยมสี + ข้อความ + ลูกศร ---------- */
.svc-icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; flex:0 0 auto;
}
.svc-icon.c-accent{ background:var(--accent-soft); }
.svc-icon.c-green{ background:var(--signal-green-soft); }
.svc-icon.c-amber{ background:var(--signal-amber-soft); }
.svc-icon.c-red{ background:var(--signal-red-soft); }
.svc-icon.c-steel{ background:var(--steel-soft); }
.svc-text{ flex:1; min-width:0; }
.svc-text .row1{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.svc-text .name{ font-family:var(--font-display); font-weight:600; font-size:.96rem; }
.svc-text .desc{ color:var(--ink-soft); font-size:.82rem; margin-top:3px; line-height:1.4; }
.svc-text .caveat{ margin-top:6px; font-size:.75rem; color:var(--signal-amber); }
.svc-chevron{ flex:0 0 auto; color:var(--ink-soft); font-size:1.3rem; line-height:1; }

.chip{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:.7rem; font-weight:600; white-space:nowrap; }
.chip.live{ background:var(--signal-green-soft); color:var(--signal-green); }
.chip.soon{ background:var(--line); color:var(--ink-soft); }
.chip.ext{ background:var(--steel-soft); color:var(--steel); }

.search-empty{ display:none; color:var(--ink-soft); font-size:.86rem; padding:18px 4px; }
.search-empty.show{ display:block; }

/* ---------- ช่องค้นหาแบบ floating + debounce ---------- */
.search-wrap{ position:relative; display:flex; align-items:center; margin-bottom:14px; }
.search-input{
  width:0; opacity:0; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--ground-raised);
  color:var(--ink); font-family:var(--font-body); font-size:.86rem; height:34px;
  transition:width .18s ease,opacity .12s ease,padding .18s ease;
}
.search-wrap.open .search-input{ width:220px; opacity:1; padding:0 12px; margin-left:6px; }
.search-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* ---------- skeleton loading ---------- */
.skeleton-block{
  display:inline-block; height:1.6rem; width:64px; border-radius:6px;
  background:linear-gradient(100deg,var(--line) 30%,var(--ground) 50%,var(--line) 70%);
  background-size:220% 100%; animation:shimmer 1.1s ease-in-out infinite;
}
@keyframes shimmer{ from{background-position:120% 0;} to{background-position:-20% 0;} }
.stat-card.is-loading .value{ visibility:hidden; position:relative; }
.stat-card.is-loading .value::after{
  content:""; position:absolute; inset:0; left:0;
  background:linear-gradient(100deg,var(--line) 30%,var(--ground) 50%,var(--line) 70%);
  background-size:220% 100%; animation:shimmer 1.1s ease-in-out infinite; border-radius:6px;
}

/* ---------- toast แทน modal ---------- */
.toast-lane{ max-width:1080px; margin:0 auto; padding:0 28px; position:sticky; top:70px; z-index:20; height:0; }
.toast{
  transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform .18s ease,opacity .18s ease;
  background:var(--ink); color:var(--ground); font-size:.86rem; padding:10px 16px; border-radius:10px;
  box-shadow:var(--shadow); display:inline-flex; align-items:center; gap:8px; max-width:360px;
}
.toast-lane.show .toast{ transform:translateY(0); opacity:1; }

/* ---------- stagger เข้าโหลดครั้งแรก + press feedback ---------- */
@keyframes tileIn{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }
.module-tile.stagger-in{ animation:tileIn .32s ease both; }
.nav-item,.icon-btn,.hero-cta,.module-tile.live,.module-tile.soon{ transition:transform .12s ease,border-color .15s ease; }
.nav-item:active,.icon-btn:active,.hero-cta:active,.module-tile.live:active,.module-tile.soon:active{ transform:scale(.97); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

.card{
  background:var(--ground-raised); border:1px solid var(--line); border-radius:16px;
  padding:20px; box-shadow: var(--shadow);
}
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin:20px 0; }
.stat-card{ background:var(--ground-raised); border:1px solid var(--line); border-radius:14px; padding:18px; }
.stat-card .value{ font-family:var(--font-display); font-size:2rem; font-weight:600; }
.stat-card .label{ color:var(--ink-soft); font-size:.9rem; margin-top:4px; }
.stat-card.tone-green .value{ color:var(--signal-green); }
.stat-card.tone-amber .value{ color:var(--signal-amber); }
.stat-card.tone-red .value{ color:var(--signal-red); }
.stat-card.tone-steel .value{ color:var(--steel); }

.badge{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:.78rem; font-weight:600; }
.badge.tone-green{ background:var(--signal-green-soft); color:var(--signal-green); }
.badge.tone-amber{ background:var(--signal-amber-soft); color:var(--signal-amber); }
.badge.tone-red{ background:var(--signal-red-soft); color:var(--signal-red); }
.badge.tone-steel{ background:var(--steel-soft); color:var(--steel); }

table{ width:100%; border-collapse:collapse; margin-top:12px; }
th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.92rem; }
th{ color:var(--ink-soft); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; }
tr:hover td{ background:var(--accent-soft); }

.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.filters select, .filters input{
  padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--ground-raised);
  color:var(--ink); font-family:var(--font-body); font-size:.9rem;
}

.module-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:14px; }
.module-tile{
  position:relative; display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink);
  background:var(--ground-raised); border:1px solid var(--line); border-radius:16px; padding:16px 18px;
}
.module-tile.live:hover{ transform:translateY(-2px); border-color:var(--accent); cursor:pointer; }
.module-tile.soon{ opacity:.6; cursor:pointer; }

.brand-logo{ height:26px; width:auto; vertical-align:middle; margin-right:2px; }

.login-wrap{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card{ text-align:center; max-width:360px; padding:40px; }
.login-logo{ height:56px; width:auto; margin-bottom:12px; }
.login-card h1{ font-size:1.4rem; }
.login-card .g-btn-slot{ margin:24px 0; }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- GPMS dashboard: bar chart / breakdown list / alert card (ดึงโครงจาก GPMS prototype S1
   00_GPMS_แผนระบบบริหารโครงการ\build\prototype\gpms_demo.html แต่ใช้ token สีเดิมของ WC Portal ไม่ใช่ธีม
   น้ำเงินของ prototype เพื่อให้เข้ากับ shell เดียวกันทั้งระบบ) ---------- */
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:.85rem; }
.bar-row:last-child{ margin-bottom:0; }
.bar-label{ width:150px; flex:0 0 150px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; background:var(--ground); border-radius:8px; height:16px; position:relative; overflow:hidden; }
.bar-fill{ background:var(--steel); height:100%; border-radius:8px; }
.bar-val{ width:110px; flex:0 0 110px; text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }

.status-legend{ list-style:none; margin:0; padding:0; font-size:.85rem; }
.status-legend li{ display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--line); }
.status-legend li:first-child{ border-top:none; }
.status-legend .dot{ width:10px; height:10px; border-radius:3px; flex:0 0 10px; }
.status-legend .dot.tone-steel{ background:var(--steel); }
.status-legend .dot.tone-red{ background:var(--signal-red); }
.status-legend .dot.tone-amber{ background:var(--signal-amber); }
.status-legend .dot.tone-green{ background:var(--signal-green); }
.status-legend .name{ flex:1; }
.status-legend .count{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }

.alert-card, .stale-card{ border-radius:16px; padding:16px 18px; }
.alert-card{ background:var(--signal-red-soft); border:1px solid var(--signal-red); }
.alert-card h3{ margin:0 0 10px; font-size:.95rem; color:var(--signal-red); }
.stale-card{ background:var(--signal-amber-soft); border:1px solid var(--signal-amber); }
.stale-card h3{ margin:0 0 10px; font-size:.95rem; color:var(--signal-amber); }
.alert-list, .stale-list{ font-size:.83rem; }
.alert-list .row, .stale-list .row{
  display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px dashed rgba(0,0,0,.12);
}
.alert-list .row:first-child, .stale-list .row:first-child{ border-top:none; }
.alert-list .row .r, .stale-list .row .r{ text-align:right; white-space:nowrap; color:var(--ink-soft); }
.alert-note{ font-size:.76rem; color:var(--ink-soft); margin-top:10px; }
.empty-row{ color:var(--ink-soft); font-size:.83rem; padding:4px 0; }

.lg-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:700px){ .lg-tiles{ grid-template-columns:1fr; } }

.lg-tile{ border-radius:10px; padding:14px 16px; background:var(--ground); border:1px solid var(--line); }
.lg-tile .lg-num{ font-size:1.3rem; font-weight:600; color:var(--ink-soft); font-family:var(--font-display); }
.lg-tile .lg-lbl{ font-size:.85rem; margin-top:2px; }
.lg-tile .lg-sub{ font-size:.75rem; color:var(--ink-soft); margin-top:4px; }

/* จอแท็บเล็ต (681–1024px, เช่น iPad ตั้ง/นอน) — เค้าโครงหลักพอไหวเหมือนเดสก์ท็อป */
@media (min-width: 681px) and (max-width: 1024px){
  main{ padding:24px 20px 50px; }
  .topbar{ padding:12px 20px; }
  .card-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* จอแคบกว่า 900px — sidebar ยุบเป็นแถบบนแนวนอน (แทนที่คอลัมน์ซ้าย) ตาม mockup v4 */
@media (max-width: 900px){
  .app-shell{ flex-direction:column; }
  .sidebar{
    position:static; width:100%; min-height:auto; flex-direction:row; flex-wrap:wrap; align-items:center;
    border-right:none; border-bottom:1px solid var(--line);
  }
  .sidebar-brand{ padding:6px 8px; }
  .sidebar-nav{ flex-direction:row; flex-wrap:wrap; flex:1; }
  .sidebar-bottom{ border-top:none; margin-top:0; padding-top:0; flex:0 0 100%; } /* ห้ามซ่อน — ปุ่มออกจากระบบต้องกดได้บนมือถือด้วย */
  main{ padding:18px 16px 50px; }
  .hero{ padding:24px 20px; }
  .hero-body{ align-items:flex-start; }
}

/* จอมือถือ — ฟอร์มกรองเต็มความกว้าง, ตารางเลื่อนแนวนอนแทนการบีบคอลัมน์ */
@media (max-width: 680px){
  main{ padding:16px 12px 40px; }

  .card{ padding:14px; border-radius:12px; }
  .card-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .stat-card{ padding:12px; }
  .stat-card .value{ font-size:1.5rem; }

  .filters{ flex-direction:column; align-items:stretch; }
  .filters select, .filters input, .filters button{ width:100%; }

  table{ font-size:.85rem; min-width:640px; } /* min-width บังคับให้ scroll แทนบีบตัวอักษรจนอ่านไม่ออก */
  th, td{ padding:8px; }
}

/* GPMS dashboard 2-คอลัมน์ (bar chart/status legend, alert/stale card) — วางท้ายไฟล์เสมอ กันโดน .card-grid
   breakpoint เดิมทับ (cascade แพ้ถ้าอยู่ก่อนบล็อก media query อื่นที่ specificity เท่ากัน) */
.dash-col-wide{ grid-template-columns:1.3fr 1fr; }
.dash-col-even{ grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .dash-col-wide, .dash-col-even{ grid-template-columns:1fr; } }

/* ---------- Project 360: stepper + key-value facts ---------- */
.p360-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.p360-head h2{ margin:0 0 4px; font-size:1.2rem; }
.p360-head .code{ color:var(--ink-soft); font-size:.85rem; }
.back-link{ background:none; border:none; color:var(--steel); cursor:pointer; font-size:.85rem; padding:0; margin-bottom:10px; font-family:inherit; text-decoration:none; display:inline-block; }

.stepper{ display:flex; align-items:flex-start; margin:10px 0 6px; overflow-x:auto; }
.step{ display:flex; flex-direction:column; align-items:center; flex:1; min-width:90px; position:relative; }
.step .dot{
  width:24px; height:24px; border-radius:50%; background:var(--ground); border:1px solid var(--line);
  color:var(--ink-soft); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700;
  z-index:1; flex:0 0 auto;
}
.step .lbl{ font-size:.72rem; color:var(--ink-soft); margin-top:6px; text-align:center; }
.step::before{ content:''; position:absolute; top:12px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0; }
.step:first-child::before{ display:none; }
.step.done .dot{ background:var(--signal-green); border-color:var(--signal-green); color:#fff; }
.step.done::before{ background:var(--signal-green); }
.step.current .dot{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 4px var(--accent-soft); }

.kv{ display:grid; grid-template-columns:170px 1fr; row-gap:10px; font-size:.88rem; }
.kv .k{ color:var(--ink-soft); }

.doc-link-card{ text-align:center; padding:22px; }
.doc-link-card .doc-icon{ font-size:2rem; margin-bottom:8px; }
.doc-link-card p{ color:var(--ink-soft); font-size:.85rem; margin:6px 0 14px; }

.profit-hero{ text-align:center; padding:40px 24px; }
.profit-hero .big-icon{ font-size:2.6rem; margin-bottom:10px; }
.profit-hero h2{ margin:0 0 8px; }
.profit-hero p{ color:var(--ink-soft); max-width:520px; margin:0 auto 4px; font-size:.92rem; }
.profit-skeleton-table{ opacity:.5; margin-top:22px; }
.profit-skeleton-table table{ pointer-events:none; }