/* /Pages/Home.razor.rz.scp.css */
.ecmis-home[b-ux8xufov0i]{
  --ecmis-navy:#0a2647;
  --ecmis-navy-2:#123b63;
  --ecmis-navy-dark:#051425;
  --ecmis-gold:#c9a227;
  --ecmis-gold-light:#e6c765;
  --ecmis-red:#a5322a;
  --ecmis-bg:#f7f6f2;
  --ecmis-ink:#20262e;
  --serif:'Noto Serif Thai','Prompt',serif;
  font-family:'Prompt',sans-serif;
  background:var(--ecmis-bg);
  color:var(--ecmis-ink);
  letter-spacing:.1px;
  min-height:100vh;
  width:100%;
}
h1[b-ux8xufov0i],h2[b-ux8xufov0i],h3[b-ux8xufov0i],h4[b-ux8xufov0i],h5[b-ux8xufov0i],h6[b-ux8xufov0i]{ font-family:var(--serif); }

/* ---------- Accessibility toolbar ---------- */
.a11y-bar[b-ux8xufov0i]{
  background:var(--ecmis-navy-dark);
  color:#cfd8e6;
  font-size:.78rem;
  border-bottom:1px solid rgba(201,162,39,.25);
}
.a11y-bar a[b-ux8xufov0i], .a11y-bar button[b-ux8xufov0i]{
  color:#e8edf5;
  text-decoration:none;
  font-size:.78rem;
}
.a11y-bar button[b-ux8xufov0i]{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  border-radius:20px;
  padding:2px 10px;
  margin-left:4px;
  transition:.2s;
}
.a11y-bar button:hover[b-ux8xufov0i]{ background:var(--ecmis-gold); color:#1a1a1a; border-color:var(--ecmis-gold); }
.util-divider[b-ux8xufov0i]{
  width:1px; height:14px;
  background:rgba(255,255,255,.2);
  display:inline-block;
  margin:0 12px;
}
.util-link[b-ux8xufov0i]{
  background:transparent;
  border:none;
  color:#b9c4d6;
  font-size:.78rem;
  padding:0;
  transition:.2s;
}
.util-link:hover[b-ux8xufov0i]{ color:var(--ecmis-gold-light); background:transparent; }
.util-link i[b-ux8xufov0i]{ font-size:.75rem; }

.ecmis-home.high-contrast[b-ux8xufov0i]{
  background:#000 !important;
  color:#fff !important;
}
.ecmis-home.high-contrast .navbar[b-ux8xufov0i],
.ecmis-home.high-contrast .site-footer[b-ux8xufov0i],
.ecmis-home.high-contrast .card[b-ux8xufov0i],
.ecmis-home.high-contrast .hero-section[b-ux8xufov0i],
.ecmis-home.high-contrast .news-tabs .nav-link[b-ux8xufov0i]{
  background:#000 !important;
  color:#fff !important;
  border-color:#fff !important;
}
/* every <section> gets a black bg + white inherited text-color, so any
   plain/unclassed text sitting directly on it stops blending in */
.ecmis-home.high-contrast section[b-ux8xufov0i]{
  background:#000 !important;
  color:#fff !important;
}
/* elements that set their own (non-inherited) color need explicit overrides,
   since a directly-matching rule always wins over an inherited value */
.ecmis-home.high-contrast .section-title[b-ux8xufov0i]{ color:#fff !important; }
.ecmis-home.high-contrast .section-sub[b-ux8xufov0i]{ color:#dbe3ef !important; }
.ecmis-home.high-contrast .btn-view-all[b-ux8xufov0i]{ color:#fff !important; border-color:#fff !important; }
.ecmis-home.high-contrast .btn-view-all:hover[b-ux8xufov0i]{ background:#fff !important; color:#000 !important; }
.ecmis-home.high-contrast .riskmap-toplist li[b-ux8xufov0i]{ border-bottom-color:rgba(255,255,255,.2) !important; }
.ecmis-home.high-contrast a[b-ux8xufov0i]{ color:#ffd400 !important; }
.ecmis-home.high-contrast .btn-primary[b-ux8xufov0i]{ background:#ffd400; color:#000; border-color:#ffd400; }

/* ---------- Navbar ---------- */
.navbar-ecmis[b-ux8xufov0i]{
  background:linear-gradient(180deg, var(--ecmis-navy) 0%, #0d2e54 100%);
  padding-top:1rem;
  padding-bottom:1rem;
  border-bottom:2px solid var(--ecmis-gold);
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.navbar-ecmis .navbar-nav[b-ux8xufov0i]{ align-items:center; }
.brand-badge[b-ux8xufov0i]{
  width:50px;height:50px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-right:12px;
  flex:0 0 auto;
}
.brand-badge img[b-ux8xufov0i]{
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  transition:transform .35s ease, filter .35s ease;
}
.navbar-brand:hover .brand-badge img[b-ux8xufov0i]{
  transform:scale(1.08) rotate(-4deg);
  filter:drop-shadow(0 2px 10px rgba(230,199,101,.65));
}
.navbar-ecmis .navbar-brand[b-ux8xufov0i]{
  color:#fff;
  font-weight:600;
  line-height:1.2;
  font-family:var(--serif);
  letter-spacing:.5px;
}
.navbar-ecmis .navbar-brand small[b-ux8xufov0i]{
  display:block;
  font-size:.95rem;
  font-weight:400;
  opacity:.9;
  font-family:'Prompt',sans-serif;
  letter-spacing:.2px;
  line-height:1.3;
}
@media (max-width:991.98px){
  .navbar-ecmis .navbar-brand small[b-ux8xufov0i]{ font-size:.8rem; }
}
.navbar-ecmis .nav-link[b-ux8xufov0i]{
  color:#dbe3ef !important;
  font-weight:400;
  position:relative;
  display:inline-flex;
  align-items:center;
  margin:0 6px;
  padding-left:.85rem !important;
  padding-right:.85rem !important;
  white-space:nowrap;
  font-size:.92rem;
  letter-spacing:.15px;
}
@media (min-width:1200px) and (max-width:1399.98px){
  .navbar-ecmis .nav-link[b-ux8xufov0i]{ font-size:.86rem; margin:0 2px; padding-left:.55rem !important; padding-right:.55rem !important; }
}
/* anchor targets: keep clear of the sticky navbar when jumping via #links */
#home[b-ux8xufov0i], #channels[b-ux8xufov0i], #stats[b-ux8xufov0i], #riskmap[b-ux8xufov0i], #news[b-ux8xufov0i], #faq[b-ux8xufov0i], #footer[b-ux8xufov0i]{
  scroll-margin-top:90px;
}
.navbar-ecmis .nav-link[b-ux8xufov0i]::after{
  content:"";
  position:absolute;
  left:50%; bottom:2px;
  width:0; height:2px;
  background:var(--ecmis-gold);
  transition:.25s;
  transform:translateX(-50%);
}
.navbar-ecmis .nav-link:hover[b-ux8xufov0i]::after,
.navbar-ecmis .nav-link.active[b-ux8xufov0i]::after{ width:70%; }
.navbar-ecmis .nav-link:hover[b-ux8xufov0i]{ color:var(--ecmis-gold-light) !important; }
.btn-login[b-ux8xufov0i]{
  background:linear-gradient(135deg, var(--ecmis-gold-light), var(--ecmis-gold));
  color:#1a1a1a;
  border:none;
  font-weight:600;
  box-shadow:0 3px 10px rgba(201,162,39,.35);
}
.btn-login:hover[b-ux8xufov0i]{ filter:brightness(1.05); color:#1a1a1a; transform:translateY(-1px); }
.btn-register[b-ux8xufov0i]{
  background:transparent;
  border:1px solid rgba(255,255,255,.5);
  color:#fff !important;
}
.btn-register:hover[b-ux8xufov0i]{ background:rgba(255,255,255,.1); color:#fff !important; border-color:#fff; }

/* ==========================================================================
   Hero (final polish pass: 8px spacing system, equal-width trust badges,
   deeper tracking-card integration, dashboard-area glow + vignette).
   Palette, fonts, IDs and functionality unchanged from the previous version.
   ========================================================================== */
.hero-section[b-ux8xufov0i]{
  background:
    radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.15) 100%),
    radial-gradient(ellipse 620px 420px at 24% 42%, rgba(255,250,240,.05), transparent 62%),
    radial-gradient(ellipse 480px 480px at 80% 52%, rgba(230,199,101,.08), transparent 65%),
    radial-gradient(circle at 88% 12%, rgba(201,162,39,.16), transparent 42%),
    linear-gradient(140deg, var(--ecmis-navy-dark) 0%, var(--ecmis-navy) 45%, var(--ecmis-navy-2) 100%);
  color:#fff;
  padding:56px 0 48px;
  position:relative;
  overflow:hidden;
}
.hero-section[b-ux8xufov0i]::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.6), transparent 75%);
  pointer-events:none;
}
.hero-section[b-ux8xufov0i]::after{
  content:"";
  position:absolute;
  right:-100px; top:-100px;
  width:380px;height:380px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,39,.16), transparent 70%);
}
.hero-section .container[b-ux8xufov0i]{ position:relative; z-index:2; }

/* soft background depth: slow drifting colour blobs + fine grain, kept quiet */
.hero-bg-decor[b-ux8xufov0i]{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-blob[b-ux8xufov0i]{ position:absolute; border-radius:50%; filter:blur(74px); }
.hero-blob-gold[b-ux8xufov0i]{
  width:340px; height:340px; top:-100px; right:8%;
  background:radial-gradient(circle, rgba(201,162,39,.42) 0%, transparent 70%);
  animation:heroBlobDrift-b-ux8xufov0i 22s ease-in-out infinite alternate;
}
.hero-blob-navy[b-ux8xufov0i]{
  width:400px; height:400px; bottom:-170px; left:-100px;
  background:radial-gradient(circle, rgba(31,79,134,.48) 0%, transparent 70%);
  animation:heroBlobDrift-b-ux8xufov0i 26s ease-in-out infinite alternate-reverse;
}
@keyframes heroBlobDrift-b-ux8xufov0i{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(20px,-14px); }
}
.hero-noise[b-ux8xufov0i]{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; mix-blend-mode:overlay; }

/* quiet scattered stars, night-sky touch behind the hero content */
.hero-star[b-ux8xufov0i]{
  position:absolute;
  width:2px; height:2px;
  border-radius:50%;
  background:#fff;
  opacity:.35;
  box-shadow:0 0 4px 1px rgba(255,255,255,.3);
  animation:heroStarTwinkle-b-ux8xufov0i 5s ease-in-out infinite;
}
.hero-star-lg[b-ux8xufov0i]{ width:3px; height:3px; box-shadow:0 0 6px 1px rgba(255,233,168,.4); }
@keyframes heroStarTwinkle-b-ux8xufov0i{
  0%,100%{ opacity:.2; }
  50%{ opacity:.85; }
}

/* ---------- copy column: generous, calm rhythm (primary visual focus) ---------- */
.eyebrow[b-ux8xufov0i]{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--ecmis-gold-light);
  margin-bottom:1rem;
}
.eyebrow[b-ux8xufov0i]::before{
  content:"";
  width:22px; height:2px;
  background:var(--ecmis-gold-light);
  display:inline-block;
}
.hero-section h1[b-ux8xufov0i]{
  font-weight:700;
  font-size:1.85rem;
  line-height:1.55;
  letter-spacing:.15px;
  margin-bottom:1.5rem;
}
@media (min-width:1200px){
  .hero-section h1[b-ux8xufov0i]{ font-size:2rem; }
}
.hero-section .subtitle[b-ux8xufov0i]{
  font-size:1.03rem;
  opacity:.85;
  line-height:1.85;
  font-weight:300;
  margin-bottom:2.5rem;
}

/* ---------- trust indicators: plain text + icon, not button-shaped, one row ---------- */
.hero-trust[b-ux8xufov0i]{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:1.75rem;
  row-gap:.6rem;
  margin-top:2rem;
}
.trust-badge[b-ux8xufov0i]{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:none;
  border:none;
  padding:0;
  border-radius:0;
  transition:opacity .2s ease;
}
.trust-badge:hover[b-ux8xufov0i]{ opacity:.85; }
.trust-badge i[b-ux8xufov0i]{
  color:var(--ecmis-gold-light);
  font-size:.82rem;
  flex:0 0 16px;
  text-align:center;
}
.trust-badge span[b-ux8xufov0i]{
  font-size:.8rem;
  color:rgba(255,255,255,.82);
  font-weight:400;
  line-height:1.4;
  white-space:nowrap;
}
@media (max-width:767.98px){
  .trust-badge span[b-ux8xufov0i]{ white-space:normal; }
}

/* ---------- CTAs: primary stays strongest, secondary recedes, calm hover ---------- */
.hero-cta .btn[b-ux8xufov0i]{
  font-weight:600;
  border-radius:12px;
  letter-spacing:.2px;
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), background .25s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero-cta .btn[b-ux8xufov0i]::before{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
  z-index:1;
  pointer-events:none;
}
.hero-cta .btn:hover[b-ux8xufov0i]::before{ left:120%; }
.hero-cta .btn:hover[b-ux8xufov0i]{ transform:translateY(-2px); }
.btn-file-complaint[b-ux8xufov0i]{
  padding:1rem 2rem;
  background:linear-gradient(135deg,#c1443a, var(--ecmis-red));
  border:none;
  box-shadow:0 14px 30px -10px rgba(165,50,42,.7);
  color:#fff;
}
.btn-file-complaint:hover[b-ux8xufov0i]{
  background:linear-gradient(135deg,#b5453c,#8f2a23);
  box-shadow:0 16px 34px -8px rgba(165,50,42,.8);
  color:#fff;
}
.btn-track-status[b-ux8xufov0i]{
  padding:.75rem 1.5rem;
  font-size:.9rem;
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.9);
  border:1.5px solid rgba(230,199,101,.55);
  backdrop-filter:blur(4px);
  box-shadow:none;
}
.btn-track-status:hover[b-ux8xufov0i]{ background:var(--ecmis-gold-light); color:#1a1a1a; border-color:var(--ecmis-gold-light); }

/* ---------- visual column: dashboard reads as a real interface, quiet supporting role ---------- */
.hero-visual[b-ux8xufov0i]{ position:relative; }
.hero-illustration-wrap[b-ux8xufov0i]{
  position:relative;
  max-width:87%;
  margin-left:auto;
  filter:drop-shadow(0 18px 34px rgba(5,20,37,.4));
  animation:heroFloat-b-ux8xufov0i 8s ease-in-out infinite;
}
@keyframes heroFloat-b-ux8xufov0i{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}
.hero-dashboard-svg[b-ux8xufov0i]{ width:100%; height:auto; display:block; }
.hero-bar[b-ux8xufov0i]{ transform-box:fill-box; transform-origin:center bottom; animation:barGrow-b-ux8xufov0i .7s cubic-bezier(.22,.8,.28,1) both; }
@keyframes barGrow-b-ux8xufov0i{
  0%{ transform:scaleY(0); opacity:0; }
  100%{ transform:scaleY(1); opacity:1; }
}
.hero-float-badge[b-ux8xufov0i]{
  transform-box:fill-box; transform-origin:center;
  animation:badgeFloat-b-ux8xufov0i 5s ease-in-out infinite;
  animation-delay:.4s;
}
@keyframes badgeFloat-b-ux8xufov0i{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
.hero-ring-accent[b-ux8xufov0i]{ opacity:.4; animation:heroFloat-b-ux8xufov0i 10s ease-in-out infinite; animation-delay:.8s; }

/* tracking card: overlaps the panel intentionally, reads as part of the interface */
.hero-tracking-card[b-ux8xufov0i]{
  position:relative;
  z-index:2;
  margin:-84px 1rem 0 auto;
  max-width:460px;
  background:#fff;
  color:var(--ecmis-ink);
  border-radius:16px;
  border-top:3px solid var(--ecmis-gold);
  padding:1.5rem 1.6rem 1.75rem;
  box-shadow:0 20px 40px -16px rgba(5,20,37,.42), 0 3px 8px rgba(5,20,37,.1);
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.hero-tracking-card:hover[b-ux8xufov0i]{
  transform:translateY(-3px);
  box-shadow:0 26px 48px -16px rgba(5,20,37,.48), 0 3px 8px rgba(5,20,37,.12);
}
.hero-tracking-card h6[b-ux8xufov0i]{
  color:var(--ecmis-navy);
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:1.1rem;
}
.hero-tracking-card h6 i[b-ux8xufov0i]{ color:var(--ecmis-gold); }
.hero-tracking-card .form-control[b-ux8xufov0i]{
  border-radius:8px 0 0 8px;
  border:1px solid #e3e7ee;
  background:#f7f8fb;
  color:var(--ecmis-ink);
  font-size:.95rem;
  padding:.65rem .9rem;
}
.hero-tracking-card .form-control[b-ux8xufov0i]::placeholder{ color:#9aa4b5; }
.hero-tracking-card .form-control:focus[b-ux8xufov0i]{ box-shadow:none; border-color:var(--ecmis-gold); background:#fff; }
.hero-tracking-card .btn-track-status[b-ux8xufov0i]{
  padding:.65rem 1.35rem;
  font-size:.95rem;
  background:var(--ecmis-navy);
  color:#fff;
  border:1px solid var(--ecmis-navy);
  border-radius:0 8px 8px 0;
  backdrop-filter:none;
  box-shadow:none;
}
.hero-tracking-card .btn-track-status:hover[b-ux8xufov0i]{ background:var(--ecmis-gold); border-color:var(--ecmis-gold); color:#1a1a1a; }
.hero-tracking-card .hint[b-ux8xufov0i]{
  color:#8a94a6;
  font-size:.8rem;
  margin-top:.85rem;
  line-height:1.55;
}
@media (max-width:991.98px){
  .hero-illustration-wrap[b-ux8xufov0i]{ max-width:94%; }
  .hero-tracking-card[b-ux8xufov0i]{ margin:-48px auto 0; max-width:520px; }
}

/* ---------- Section titles ---------- */
.section-eyebrow[b-ux8xufov0i]{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--ecmis-gold);
  display:block;
  margin-bottom:.4rem;
}
.section-title[b-ux8xufov0i]{
  font-weight:700;
  color:var(--ecmis-navy);
  position:relative;
  padding-bottom:14px;
  margin-bottom:.6rem;
}
.section-title[b-ux8xufov0i]::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:3px;
  background:linear-gradient(90deg, var(--ecmis-gold), transparent);
  border-radius:2px;
  transition:width .8s ease .2s;
}
.section-title.in-view[b-ux8xufov0i]::after{ width:60px; }
.section-sub[b-ux8xufov0i]{
  color:#6b7280;
  font-size:.92rem;
  margin-bottom:2.25rem !important;
}

/* ---------- Risk Heatmap ---------- */
.riskmap-panel[b-ux8xufov0i]{
  position:relative;
  background:linear-gradient(160deg, var(--ecmis-navy-dark) 0%, var(--ecmis-navy) 100%);
  border-radius:18px;
  border:1px solid rgba(230,199,101,.25);
  box-shadow:0 20px 45px -18px rgba(5,20,37,.55);
}
.riskmap-panel-head[b-ux8xufov0i]{ font-size:.78rem; }
.riskmap-livechip[b-ux8xufov0i]{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#e6c765;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  font-size:.7rem;
}
.live-dot[b-ux8xufov0i]{
  width:7px; height:7px;
  border-radius:50%;
  background:#3ddc84;
  animation:livePulse-b-ux8xufov0i 2s ease-in-out infinite;
}
@keyframes livePulse-b-ux8xufov0i{
  0%,100%{ box-shadow:0 0 0 0 rgba(61,220,132,.55); }
  50%{ box-shadow:0 0 0 6px rgba(61,220,132,0); }
}
.riskmap-updated[b-ux8xufov0i]{ color:rgba(255,255,255,.55); font-size:.72rem; }
.riskmap-svg[b-ux8xufov0i]{ width:100%; height:auto; max-height:460px; display:block; margin:0 auto; }
.riskmap-outline[b-ux8xufov0i]{ fill:rgba(219,227,239,.14); stroke:var(--ecmis-gold-light); stroke-width:1.6; }
.riskmap-caption[b-ux8xufov0i]{ color:rgba(255,255,255,.5); font-size:.74rem; margin-top:.5rem; }
.zone-marker[b-ux8xufov0i]{ cursor:pointer; }
.zone-marker circle:not(.zone-ping)[b-ux8xufov0i]{ transition:stroke-width .2s, filter .2s; }
.zone-marker:hover circle:not(.zone-ping)[b-ux8xufov0i], .zone-marker:focus circle:not(.zone-ping)[b-ux8xufov0i]{
  stroke-width:3.5;
  filter:brightness(1.2);
  outline:none;
}
.zone-ping[b-ux8xufov0i]{
  transform-box:fill-box;
  transform-origin:center;
  opacity:.6;
  animation:fabPing-b-ux8xufov0i 2.2s ease-out infinite;
}
.riskmap-side[b-ux8xufov0i]{ border-top:3px solid var(--ecmis-gold); border-radius:16px; }
.legend-dot[b-ux8xufov0i]{ width:14px; height:14px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.riskmap-toplist[b-ux8xufov0i]{ list-style:none; padding:0; margin:0; }
.riskmap-toplist li[b-ux8xufov0i]{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.55rem 0;
  border-bottom:1px solid #eef0f4;
  font-size:.9rem;
}
.riskmap-toplist li:last-child[b-ux8xufov0i]{ border-bottom:none; }

/* ---------- Channels ---------- */
.channel-card[b-ux8xufov0i]{
  border:1px solid #eef0f4;
  border-radius:16px;
  box-shadow:0 4px 16px rgba(15,35,65,.05);
  transition:.25s;
  height:100%;
}
.channel-card:hover[b-ux8xufov0i]{
  transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(15,35,65,.12);
  border-color:rgba(201,162,39,.4);
}
.channel-card[b-ux8xufov0i]{ display:flex; flex-direction:column; justify-content:center; min-height:132px; }
.channel-icon[b-ux8xufov0i]{
  width:50px;height:50px;
  border-radius:50%;
  background:linear-gradient(150deg, var(--ecmis-navy-2), var(--ecmis-navy));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;
  margin:0 auto 10px;
  box-shadow:0 6px 14px -4px rgba(10,38,71,.5);
  transition:.3s;
}
.channel-icon i[b-ux8xufov0i]{
  color:#fff;
}
.channel-card:hover .channel-icon[b-ux8xufov0i]{
  transform:scale(1.12) rotate(-6deg);
  background:linear-gradient(150deg, var(--ecmis-gold-light), var(--ecmis-gold));
  color:#1a1a1a;
}
.channel-card:hover .channel-icon i[b-ux8xufov0i]{
  color:#1a1a1a;
}

/* ---------- Stats ---------- */
.stats-section[b-ux8xufov0i]{
  background:#fff;
}
.stat-card[b-ux8xufov0i]{
  border-radius:16px;
  border:1px solid #eef0f4;
  box-shadow:0 4px 16px rgba(15,35,65,.05);
  padding:1.6rem 1rem;
  text-align:center;
  height:100%;
  position:relative;
  overflow:hidden;
  transition:.25s;
}
.stat-card[b-ux8xufov0i]::before{
  content:"";
  position:absolute; left:0; top:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--ecmis-navy), var(--ecmis-gold));
}
.stat-card:hover[b-ux8xufov0i]{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(15,35,65,.1); }
.stat-icon-badge[b-ux8xufov0i]{
  width:52px;height:52px;
  border-radius:50%;
  background:linear-gradient(150deg, var(--ecmis-gold-light), var(--ecmis-gold));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;
  box-shadow:0 6px 14px -4px rgba(201,162,39,.5);
}
.stat-icon-badge i[b-ux8xufov0i]{ font-size:1.2rem; color:#1a1a1a; }
.stat-number[b-ux8xufov0i]{
  font-family:var(--serif);
  font-size:2.1rem;
  font-weight:700;
  color:var(--ecmis-navy);
}
.stat-label[b-ux8xufov0i]{ color:#6b7280; font-size:.85rem; }
.progress[b-ux8xufov0i]{ height:8px; border-radius:6px; background:#eef0f4; }

.stat-panel[b-ux8xufov0i]{
  border-radius:16px;
  border:1px solid #eef0f4;
  box-shadow:0 4px 16px rgba(15,35,65,.05);
}

/* ---------- News tabs ---------- */
.news-tabs[b-ux8xufov0i]{ border-bottom:1px solid #e5e8ee; gap:.3rem; }
.news-tabs .nav-link[b-ux8xufov0i]{
  color:var(--ecmis-navy);
  font-weight:500;
  border-radius:10px 10px 0 0;
  border:1px solid transparent;
}
.news-tabs .nav-link.active[b-ux8xufov0i]{
  background:var(--ecmis-navy);
  color:#fff;
  border-color:var(--ecmis-navy);
}
.news-card[b-ux8xufov0i]{
  border:1px solid #eef0f4;
  border-left:3px solid var(--ecmis-gold);
  border-radius:14px;
  height:100%;
  transition:.2s;
  box-shadow:0 3px 12px rgba(15,35,65,.04);
}
.news-card:hover[b-ux8xufov0i]{ box-shadow:0 10px 24px rgba(15,35,65,.1); transform:translateY(-3px); }
.news-card .badge-cat[b-ux8xufov0i]{
  font-size:.7rem;
  background:var(--ecmis-navy) !important;
  font-weight:500;
  letter-spacing:.3px;
}
.news-date[b-ux8xufov0i]{ font-size:.78rem; color:#8a8f98; }

/* ---------- FAQ ---------- */
.accordion-item[b-ux8xufov0i]{ border-color:#eef0f4; }
.accordion-button[b-ux8xufov0i]{ font-weight:500; }
.accordion-button:not(.collapsed)[b-ux8xufov0i]{
  background:#eef2fa;
  color:var(--ecmis-navy);
  box-shadow:none;
}
.accordion-button:focus[b-ux8xufov0i]{ box-shadow:0 0 0 .2rem rgba(10,38,71,.12); }
.quick-link-card[b-ux8xufov0i]{
  border:1px solid #eef0f4;
  border-radius:16px;
  text-align:center;
  padding:1.4rem .8rem;
  height:100%;
  color:var(--ecmis-navy);
  text-decoration:none;
  display:block;
  transition:.25s;
  box-shadow:0 4px 16px rgba(15,35,65,.05);
}
.quick-link-card:hover[b-ux8xufov0i]{
  background:var(--ecmis-navy);
  color:#fff;
  border-color:var(--ecmis-navy);
  transform:translateY(-4px);
}
.quick-link-card:hover .quick-link-icon[b-ux8xufov0i]{ background:var(--ecmis-gold); }
.quick-link-card:hover .quick-link-icon i[b-ux8xufov0i]{ color:#1a1a1a; }
.quick-link-icon[b-ux8xufov0i]{
  width:48px;height:48px;
  border-radius:50%;
  background:#eef2fa;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;
  transition:.25s;
}
.quick-link-icon i[b-ux8xufov0i]{ font-size:1.2rem; color:var(--ecmis-navy); transition:.25s; }

/* ---------- Footer ---------- */
.site-footer[b-ux8xufov0i]{
  background:var(--ecmis-navy-dark);
  color:#aebada;
  padding-top:3.5rem;
  border-top:3px solid var(--ecmis-gold);
}
.site-footer h6[b-ux8xufov0i]{
  color:#fff;
  font-weight:600;
  margin-bottom:1.1rem;
  font-family:var(--serif);
  letter-spacing:.4px;
  font-size:.95rem;
  text-transform:uppercase;
}
.site-footer a[b-ux8xufov0i]{
  color:#aebada;
  text-decoration:none;
  font-size:.88rem;
  transition:.2s;
}
.site-footer a:hover[b-ux8xufov0i]{ color:var(--ecmis-gold-light); padding-left:2px; }
.footer-bottom[b-ux8xufov0i]{
  background:#03101f;
  font-size:.78rem;
  color:#7b879e;
}
.social-icon[b-ux8xufov0i]{
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  display:inline-flex;align-items:center;justify-content:center;
  margin-right:8px;
  color:#fff !important;
  transition:.2s;
}
.social-icon:hover[b-ux8xufov0i]{
  background:linear-gradient(135deg, var(--ecmis-gold-light), var(--ecmis-gold));
  color:#1a1a1a !important;
  border-color:transparent;
  transform:translateY(-3px) rotate(-6deg);
}

table.dataTable thead th[b-ux8xufov0i]{ color:var(--ecmis-navy); font-family:var(--serif); }

/* ---------- Scroll reveal ---------- */
.reveal[b-ux8xufov0i]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in-view[b-ux8xufov0i]{ opacity:1; transform:translateY(0); }

/* ---------- Progress bar fill animation ---------- */
.progress-bar[b-ux8xufov0i]{ transition:width 1.4s cubic-bezier(.22,.9,.3,1); }

/* ---------- Navbar scrolled state ---------- */
.navbar-ecmis.scrolled[b-ux8xufov0i]{
  box-shadow:0 6px 22px rgba(0,0,0,.3);
  padding-top:.55rem; padding-bottom:.55rem;
}

/* ---------- Floating quick-report button ---------- */
.fab-report[b-ux8xufov0i]{
  position:fixed;
  right:24px; bottom:28px;
  z-index:1040;
  transition:bottom .35s ease, transform .25s ease;
  background:linear-gradient(135deg,#c1443a, var(--ecmis-red));
  color:#fff;
  border:none;
  border-radius:50px;
  padding:.9rem 1.3rem;
  font-weight:600;
  font-size:.9rem;
  display:flex; align-items:center; gap:.5rem;
  box-shadow:0 10px 28px -6px rgba(165,50,42,.6);
}
.fab-report:hover[b-ux8xufov0i]{ transform:translateY(-3px) scale(1.03); color:#fff; }
.fab-report .fab-ping[b-ux8xufov0i]{
  position:absolute; inset:0;
  border-radius:50px;
  background:rgba(197,68,58,.55);
  animation:fabPing-b-ux8xufov0i 2.2s ease-out infinite;
  z-index:-1;
}
@keyframes fabPing-b-ux8xufov0i{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(1.35); opacity:0; }
}
@media (max-width:575.98px){
  .fab-report span[b-ux8xufov0i]{ display:none; }
  .fab-report[b-ux8xufov0i]{ padding:.9rem; border-radius:50%; }
}

/* ---------- News thumbnails ---------- */
.news-card[b-ux8xufov0i]{ padding:0; overflow:hidden; }
.news-card .news-body[b-ux8xufov0i]{ padding:1rem; }
.news-thumb[b-ux8xufov0i]{
  height:128px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.3rem;
  color:rgba(255,255,255,.9);
  position:relative;
  overflow:hidden;
}
.news-thumb[b-ux8xufov0i]::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 22% 20%, rgba(255,255,255,.22), transparent 55%);
}
.news-thumb i[b-ux8xufov0i]{ position:relative; z-index:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.thumb-news[b-ux8xufov0i]{ background:linear-gradient(135deg, var(--ecmis-navy-2), var(--ecmis-navy)); }
.thumb-result[b-ux8xufov0i]{ background:linear-gradient(135deg, #7a2b25, var(--ecmis-red)); }
.view-all-wrap[b-ux8xufov0i]{ text-align:right; margin-top:1.25rem; }
.btn-view-all[b-ux8xufov0i]{
  background:transparent;
  border:1px solid var(--ecmis-navy);
  color:var(--ecmis-navy);
  font-weight:500;
  border-radius:10px;
  transition:.2s;
}
.btn-view-all:hover[b-ux8xufov0i]{ background:var(--ecmis-navy); color:#fff; }

/* ---------- Cookie consent banner ---------- */
.cookie-banner[b-ux8xufov0i]{
  position:fixed; left:0; right:0; bottom:0;
  z-index:1050;
  background:var(--ecmis-navy-dark);
  border-top:3px solid var(--ecmis-gold);
  color:#dbe3ef;
  padding:1rem 1.25rem;
  transform:translateY(120%);
  transition:transform .5s ease;
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
}
.cookie-banner.show[b-ux8xufov0i]{ transform:translateY(0); }
.sound-hint[b-ux8xufov0i]{
  position:fixed;
  top:70px; left:50%;
  transform:translate(-50%,-16px);
  z-index:1060;
  background:var(--ecmis-navy-dark);
  border:1px solid rgba(230,199,101,.4);
  color:#fff;
  padding:.55rem 1.1rem;
  border-radius:30px;
  font-size:.82rem;
  display:flex; align-items:center; gap:.5rem;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
}
.sound-hint.show[b-ux8xufov0i]{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.sound-hint i[b-ux8xufov0i]{ color:var(--ecmis-gold-light); animation:soundHintPulse-b-ux8xufov0i 1.6s ease-in-out infinite; }
@keyframes soundHintPulse-b-ux8xufov0i{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.18); }
}
.cookie-banner a[b-ux8xufov0i]{ color:var(--ecmis-gold-light); }
.cookie-banner .btn-cookie-accept[b-ux8xufov0i]{
  background:linear-gradient(135deg, var(--ecmis-gold-light), var(--ecmis-gold));
  color:#1a1a1a; font-weight:600; border:none;
}
.cookie-banner .btn-cookie-accept:hover[b-ux8xufov0i]{ color:#1a1a1a; filter:brightness(1.05); }
.cookie-banner .btn-cookie-settings[b-ux8xufov0i]{
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
}
.cookie-banner .btn-cookie-settings:hover[b-ux8xufov0i]{ background:rgba(255,255,255,.1); color:#fff; }
/* /Pages/PersonScreen/ApprovalInboxMockup.razor.rz.scp.css */
.inbox-container[b-q0is51ybn3] {
    padding: 30px;
    font-family: 'Sarabun', sans-serif;
    color: #1e293b;
    background: #f8fafc;
    min-height: 100vh;
}

.inbox-header[b-q0is51ybn3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
}

.inbox-title-row[b-q0is51ybn3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inbox-icon[b-q0is51ybn3] {
    font-size: 28px;
    color: #1a2744;
}

.inbox-header h1[b-q0is51ybn3] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #1a2744;
}

.inbox-badge[b-q0is51ybn3] {
    background: #e2e8f0;
    color: #334155;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
}

.inbox-subtitle[b-q0is51ybn3] {
    font-size: 14px;
    color: #64748b;
    margin: 6px 0 0 0;
}

.role-selector[b-q0is51ybn3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.role-selector label[b-q0is51ybn3] {
    font-size: 12px;
    font-weight: bold;
    color: #64748b;
}

.role-selector select[b-q0is51ybn3] {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 4px 8px;
    outline: none;
    font-size: 13px;
    color: #1a2744;
    cursor: pointer;
    background: #ffffff;
}

.table-card[b-q0is51ybn3] {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
    overflow: hidden;
}

.inbox-table[b-q0is51ybn3] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

.inbox-table th[b-q0is51ybn3] {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    padding: 14px 20px;
    border-bottom: 1px solid #cbd5e1;
    font-size: 13.5px;
}

.inbox-table td[b-q0is51ybn3] {
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.inbox-table tbody tr[b-q0is51ybn3] {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.inbox-table tbody tr:hover[b-q0is51ybn3] {
    background: #f8fafc;
}

.report-no[b-q0is51ybn3] {
    font-weight: bold;
    color: #1e3a8a;
}

.case-info[b-q0is51ybn3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.case-name[b-q0is51ybn3] {
    font-weight: 500;
    color: #0f172a;
    line-height: 1.4;
}

.agency-badge[b-q0is51ybn3] {
    align-self: flex-start;
    font-size: 11px;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.sender-info[b-q0is51ybn3] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
}

.sender-info i[b-q0is51ybn3] {
    font-size: 16px;
    color: #94a3b8;
}

.status-badge[b-q0is51ybn3] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

.status-pending[b-q0is51ybn3] {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde047;
}

.status-rejected[b-q0is51ybn3] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.status-approved[b-q0is51ybn3] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
/* /Pages/PersonScreen/BoardCaseApprovalDetailPage.razor.rz.scp.css */
.review-container[b-lqsrutt7is] {
    padding: 20px;
    font-family: 'Sarabun', sans-serif;
    color: #0b2b63;
    background: #eaf2fb;
    min-height: 100vh;
}

.top-nav-bar[b-lqsrutt7is] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #d7e2f1;
    box-shadow: 0 1px 3px rgba(13,27,62,0.05);
    gap: 16px;
    flex-wrap: wrap;
}

.top-nav-left[b-lqsrutt7is] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-btn[b-lqsrutt7is] {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #214f9b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: 'Sarabun', sans-serif;
}
.back-btn:hover[b-lqsrutt7is] {
    background: #e2e8f0;
    color: #0f172a;
}

.view-tag[b-lqsrutt7is] {
    font-size: 12.5px;
    font-weight: 700;
    color: #0b2b63;
    background: #dfeaff;
    border: 1px solid #d7e2f1;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.workspace-grid[b-lqsrutt7is] {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
}

.left-panel[b-lqsrutt7is] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card[b-lqsrutt7is] {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #d7e2f1;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(13,27,62,0.02);
}

.card h2[b-lqsrutt7is] {
    font-size: 15px;
    font-weight: 800;
    color: #0b2b63;
    margin: 0 0 16px 0;
    border-bottom: 1px dashed #d7e2f1;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-row[b-lqsrutt7is] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid #f8fafc;
}

.info-row .label[b-lqsrutt7is] {
    color: #6e82a3;
    font-weight: 600;
}

.info-row .value[b-lqsrutt7is] {
    color: #0b2b63;
    font-weight: 800;
}

/* Status Trail styles */
.trail-list[b-lqsrutt7is] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding-left: 20px;
}
.trail-list[b-lqsrutt7is]::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: #d7e2f1;
    z-index: 1;
}
.trail-item[b-lqsrutt7is] {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 2;
}
.trail-icon[b-lqsrutt7is] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #6e82a3;
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.trail-item.completed .trail-icon[b-lqsrutt7is] {
    background: #1fc989;
}
.trail-item.rejected .trail-icon[b-lqsrutt7is] {
    background: #dc2626;
}
.trail-item.pending .trail-icon[b-lqsrutt7is] {
    background: #f5a623;
}
.trail-details[b-lqsrutt7is] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.trail-details strong[b-lqsrutt7is] {
    font-size: 13px;
    font-weight: 800;
    color: #0b2b63;
}
.trail-details span[b-lqsrutt7is] {
    font-size: 11px;
    color: #6e82a3;
    font-weight: 600;
}

/* Form Settings & Signature Cards */
.sig-option-card[b-lqsrutt7is] {
    border: 1.5px solid #d7e2f1;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8fafc;
    transition: all 0.2s ease-in-out;
    margin-bottom: 8px;
}
.sig-option-card:hover[b-lqsrutt7is] {
    border-color: #214f9b;
    background: #ffffff;
}
.sig-option-card.active[b-lqsrutt7is] {
    border-color: #214f9b;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(33,79,155,0.08);
}
.sig-option-content[b-lqsrutt7is] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.sig-option-content strong[b-lqsrutt7is] {
    font-size: 12.5px;
    color: #0b2b63;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sig-option-content span[b-lqsrutt7is] {
    font-size: 10.5px;
    color: #6e82a3;
    font-weight: 600;
}
.sig-thumbnail-badge[b-lqsrutt7is] {
    width: 50px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #d7e2f1;
    border-radius: 4px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sig-thumbnail-badge img[b-lqsrutt7is] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Form inputs */
.remarks-input[b-lqsrutt7is] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d7e2f1;
    border-radius: 6px;
    font-size: 13px;
    color: #0b2b63;
    font-family: 'Sarabun', sans-serif;
    outline: none;
    resize: none;
    background: #f8fafc;
}
.remarks-input:focus[b-lqsrutt7is] {
    border-color: #214f9b;
    background: #ffffff;
}

/* Action button row */
.action-buttons[b-lqsrutt7is] {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 12px;
    margin-top: 16px;
}
.btn-reject[b-lqsrutt7is] {
    height: 40px;
    border: 1.5px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.btn-reject:hover[b-lqsrutt7is] {
    background: #fee2e2;
}
.btn-approve[b-lqsrutt7is] {
    height: 40px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #1fc989, #059669);
    color: #ffffff;
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(31,201,137,0.2);
}
.btn-approve:hover[b-lqsrutt7is] {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(31,201,137,0.3);
}

/* Success/Reject outcome banners */
.outcome-banner[b-lqsrutt7is] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13.5px;
    margin-bottom: 12px;
}
.outcome-banner.approved[b-lqsrutt7is] {
    background: #dff8eb;
    color: #065f46;
    border: 1.5px solid #a7f3d0;
}
.outcome-banner.rejected[b-lqsrutt7is] {
    background: #fef2f2;
    color: #991b1b;
    border: 1.5px solid #fecaca;
}

/* Right Panel: Official A4 Sheet Preview */
.right-panel[b-lqsrutt7is] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.preview-header[b-lqsrutt7is] {
    background: #0b2b63;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 8px 8px 0 0;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -24px;
    z-index: 10;
}
.paper-size-tag[b-lqsrutt7is] {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.memo-sheet[b-lqsrutt7is] {
    background: #ffffff;
    padding: 50px 60px;
    border: 1px solid #cbd5e1;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
    min-height: 1000px;
    position: relative;
    font-family: 'Sarabun', sans-serif;
    color: #000000;
}
.garuda-container[b-lqsrutt7is] {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.garuda-container img[b-lqsrutt7is] {
    height: 90px;
}
.memo-title[b-lqsrutt7is] {
    font-size: 29px;
    font-weight: 800;
    text-align: center;
    margin: 10px 0 30px;
    font-family: 'Sarabun', sans-serif;
}
.memo-metadata[b-lqsrutt7is] {
    border-bottom: 2px solid #000000;
    padding-bottom: 12px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.8;
}
.meta-row[b-lqsrutt7is] {
    display: flex;
    width: 100%;
}
.meta-row.split[b-lqsrutt7is] {
    justify-content: space-between;
}
.meta-row.split .meta-col:last-child[b-lqsrutt7is] {
    text-align: right;
    min-width: 250px;
}
.memo-content[b-lqsrutt7is] {
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
}
.memo-content p[b-lqsrutt7is] {
    text-indent: 2.5em;
    margin-top: 12px;
    margin-bottom: 12px;
}
.memo-table[b-lqsrutt7is] {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}
.memo-table th[b-lqsrutt7is], .memo-table td[b-lqsrutt7is] {
    border: 1px solid #000000;
    padding: 8px 12px;
}
.memo-table th[b-lqsrutt7is] {
    background: #f1f5f9;
    font-weight: 700;
}

/* Official Signature Block */
.memo-signature-block[b-lqsrutt7is] {
    margin-top: 40px;
    float: right;
    width: 280px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.memo-signature-block .greeting[b-lqsrutt7is] {
    margin-bottom: 8px;
    font-size: 15px;
}
.memo-signature-block .signer-name[b-lqsrutt7is] {
    margin-top: 6px;
    margin-bottom: 2px;
    font-size: 15px;
    font-weight: 700;
}
.memo-signature-block .signer-title[b-lqsrutt7is] {
    margin: 0;
    font-size: 13px;
    color: #334155;
}
.signature-space[b-lqsrutt7is] {
    width: 180px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 6px 0;
}
.empty-sig-line[b-lqsrutt7is] {
    width: 100%;
    border-bottom: 1.5px dotted #94a3b8;
    margin-top: 45px;
}

.mock-signature-container[b-lqsrutt7is] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drawn-signature-img[b-lqsrutt7is] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.digital-signature-badge[b-lqsrutt7is] {
    border: 2.2px dashed #10b981;
    border-radius: 8px;
    background-color: #f0fdf4;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: rotate(-3deg);
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1);
    animation: stampEffect-b-lqsrutt7is 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.digital-signature-badge .check-icon[b-lqsrutt7is] {
    font-size: 20px;
    color: #10b981;
}
.digital-signature-badge .badge-texts[b-lqsrutt7is] {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.digital-signature-badge .badge-title[b-lqsrutt7is] {
    font-size: 14px;
    font-weight: 800;
    color: #065f46;
    line-height: 1.2;
}
.digital-signature-badge .badge-time[b-lqsrutt7is] {
    font-size: 11px;
    font-weight: 700;
    color: #047857;
}

/* Modal and Canvas overlay */
.modal-backdrop[b-lqsrutt7is] {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-lqsrutt7is 0.2s ease-out;
}
.modal-card[b-lqsrutt7is] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 500px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: scaleIn-b-lqsrutt7is 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-header[b-lqsrutt7is] {
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-body[b-lqsrutt7is] {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
}
.modal-footer[b-lqsrutt7is] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.canvas-wrapper[b-lqsrutt7is] {
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    display: inline-block;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
#sig-canvas[b-lqsrutt7is] {
    display: block;
    background-color: #ffffff;
    cursor: crosshair;
    touch-action: none;
}
.btn-canvas-clear[b-lqsrutt7is] {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-canvas-clear:hover[b-lqsrutt7is] {
    background-color: #e2e8f0;
    color: #1e293b;
}
.btn-modal-cancel[b-lqsrutt7is] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-modal-cancel:hover[b-lqsrutt7is] {
    background-color: #f8fafc;
    color: #334155;
}
.btn-modal-save[b-lqsrutt7is] {
    background-color: #214f9b;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-modal-save:hover[b-lqsrutt7is] {
    background-color: #1a4180;
}

.alert-success-banner[b-lqsrutt7is] {
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    border-radius: 8px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #065f46;
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(6, 95, 70, 0.03);
    animation: slideDown-b-lqsrutt7is 0.3s ease both;
}
.alert-success-banner i[b-lqsrutt7is] {
    font-size: 20px;
}

@keyframes slideDown-b-lqsrutt7is {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes stampEffect-b-lqsrutt7is {
    0% {
        transform: scale(1.3) rotate(-15deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(-3deg);
        opacity: 1;
    }
}
@keyframes fadeIn-b-lqsrutt7is {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn-b-lqsrutt7is {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.password-input-field[b-lqsrutt7is] {
    font-size: 18px !important;
    letter-spacing: 4px;
    font-weight: 800;
    max-width: 320px;
    margin: 0 auto;
}

/* Demo Scenario Switcher Box */
.demo-scenario-box[b-lqsrutt7is] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
}
.scenario-label[b-lqsrutt7is] {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 4px;
}
.scenario-buttons[b-lqsrutt7is] {
    display: flex;
    gap: 6px;
}
.scenario-btn[b-lqsrutt7is] {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: 'Sarabun', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.scenario-btn:hover[b-lqsrutt7is] {
    background: #f1f5f9;
    color: #0f172a;
}
.scenario-btn.active[b-lqsrutt7is] {
    background: #1e3a8a;
    color: #ffffff;
    border-color: #1e3a8a;
    box-shadow: 0 2px 4px rgba(30,58,138,0.2);
}

/* Approve / Reject isolated dialog overlays */
.modal-overlay-action[b-lqsrutt7is] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}
.modal-card-action[b-lqsrutt7is] {
    background: #ffffff !important;
    border-radius: 8px !important;
    width: 450px !important;
    max-width: 450px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
    padding: 0 !important;
    display: block !important;
}
.modal-header-action[b-lqsrutt7is] {
    background: #1a2744;
    color: white !important;
    padding: 16px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
}
.modal-header-action.header-red[b-lqsrutt7is] {
    background: #dc2626 !important;
}
.modal-header-action h3[b-lqsrutt7is] {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    color: white !important;
}
.modal-header-action .close-btn[b-lqsrutt7is] {
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-size: 18px !important;
    cursor: pointer !important;
}
.modal-body-action[b-lqsrutt7is] {
    padding: 20px !important;
}
.modal-body-action p[b-lqsrutt7is] {
    margin: 0 0 16px 0 !important;
    font-size: 13.5px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}
.modal-footer-action[b-lqsrutt7is] {
    padding: 16px 20px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.form-control[b-lqsrutt7is] {
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 12px;
    outline: none;
    font-size: 14px;
    font-family: 'Sarabun', sans-serif;
    box-sizing: border-box !important;
    width: 100% !important;
}
.form-control-area[b-lqsrutt7is] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 10px 12px;
    outline: none;
    font-size: 13.5px;
    resize: none;
    font-family: 'Sarabun', sans-serif;
    box-sizing: border-box !important;
    width: 100% !important;
}
.modal-error[b-lqsrutt7is] {
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 8px;
    font-weight: 600;
}
.btn[b-lqsrutt7is] {
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    border: none;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Sarabun', sans-serif;
}
.btn-secondary[b-lqsrutt7is] {
    background: #e2e8f0;
    color: #475569;
}
.btn-green[b-lqsrutt7is] {
    background: #16a34a;
    color: white;
}
.btn-green:hover[b-lqsrutt7is] {
    background: #15803d;
}
.btn-red[b-lqsrutt7is] {
    background: #dc2626;
    color: white;
}
.btn-red:hover[b-lqsrutt7is] {
    background: #b91c1c;
}
/* /Pages/PersonScreen/BoardCaseApprovalListPage.razor.rz.scp.css */
.pcl-page[b-k8ulffia1t] {
    --pcl-bg: #eaf2fb;
    --pcl-card: #ffffff;
    --pcl-line: #d7e2f1;
    --pcl-head: #e8f1fb;
    --pcl-text: #0b2b63;
    --pcl-muted: #6e82a3;
    --pcl-blue: #214f9b;
    --pcl-orange: #f5a623;
    --pcl-green: #1fc989;
    --pcl-red: #dc2626;
    --pcl-soft-blue: #dfeaff;
    --pcl-soft-green: #dff8eb;
    --pcl-soft-orange: #fff0c9;
    --pcl-soft-red: #fef2f2;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--pcl-bg);
    color: var(--pcl-text);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
}

/* Hero Banner */
.pcl-hero[b-k8ulffia1t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.pcl-kicker[b-k8ulffia1t] {
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.pcl-hero h1[b-k8ulffia1t] {
    margin: 0;
    color: var(--pcl-text);
    font-size: 26px;
    line-height: 1.25;
    font-weight: 800;
}

.pcl-hero p[b-k8ulffia1t] {
    margin: 6px 0 0;
    color: var(--pcl-muted);
    font-size: 14px;
    font-weight: 600;
}

.pcl-screen-code[b-k8ulffia1t] {
    min-width: 120px;
    padding-top: 10px;
    color: #49658f;
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

/* 4 KPI Cards Grid */
.pcl-kpis-4col[b-k8ulffia1t] {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.pcl-kpi[b-k8ulffia1t] {
    position: relative;
    overflow: hidden;
    min-height: 90px;
    background: var(--pcl-card);
    border: 1.5px solid var(--pcl-line);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 2px 4px rgba(13, 27, 62, .04);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pcl-kpi:hover[b-k8ulffia1t] {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(13, 27, 62, .08);
}

.pcl-kpi-title-line[b-k8ulffia1t] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pcl-kpi-icon[b-k8ulffia1t] {
    font-size: 18px;
}

.pcl-kpi-title-line p[b-k8ulffia1t] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pcl-text);
}

.pcl-kpi strong[b-k8ulffia1t] {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    margin-top: 8px;
    margin-bottom: 2px;
}

.pcl-kpi span[b-k8ulffia1t] {
    font-size: 12px;
    color: var(--pcl-muted);
    font-weight: 600;
}

/* Card Tones & Active States */
.tone-blue .pcl-kpi-icon[b-k8ulffia1t], .tone-blue strong[b-k8ulffia1t] { color: var(--pcl-blue); }
.tone-orange .pcl-kpi-icon[b-k8ulffia1t], .tone-orange strong[b-k8ulffia1t] { color: #d97706; }
.tone-green .pcl-kpi-icon[b-k8ulffia1t], .tone-green strong[b-k8ulffia1t] { color: #16a34a; }
.tone-red .pcl-kpi-icon[b-k8ulffia1t], .tone-red strong[b-k8ulffia1t] { color: var(--pcl-red); }

.pcl-kpi.active[b-k8ulffia1t] {
    border-width: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.tone-blue.active[b-k8ulffia1t] { border-color: var(--pcl-blue); background: var(--pcl-soft-blue); }
.tone-orange.active[b-k8ulffia1t] { border-color: #f59e0b; background: var(--pcl-soft-orange); }
.tone-green.active[b-k8ulffia1t] { border-color: #16a34a; background: var(--pcl-soft-green); }
.tone-red.active[b-k8ulffia1t] { border-color: var(--pcl-red); background: var(--pcl-soft-red); }

/* Table Container & Filterbar */
.pcl-card[b-k8ulffia1t] {
    background: var(--pcl-card);
    border: 1px solid var(--pcl-line);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(13, 27, 62, .03);
}

.pcl-filterbar[b-k8ulffia1t] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.pcl-search[b-k8ulffia1t] {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 12px;
    height: 38px;
}

.pcl-search i[b-k8ulffia1t] {
    color: #64748b;
    font-size: 15px;
}

.pcl-search input[b-k8ulffia1t] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 13.5px;
    color: #1e293b;
    font-family: 'Sarabun', sans-serif;
}

.pcl-filterbar select[b-k8ulffia1t] {
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 13.5px;
    color: #1e293b;
    outline: none;
    background: #ffffff;
    cursor: pointer;
    font-family: 'Sarabun', sans-serif;
}

.pcl-filter-actions[b-k8ulffia1t] {
    display: flex;
    gap: 8px;
}

.pcl-search-btn[b-k8ulffia1t], .pcl-clear-btn[b-k8ulffia1t] {
    height: 38px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    transition: all 0.2s;
    font-family: 'Sarabun', sans-serif;
}

.pcl-search-btn[b-k8ulffia1t] {
    background: var(--pcl-blue);
    color: #ffffff;
}

.pcl-search-btn:hover[b-k8ulffia1t] {
    background: #193e7d;
}

.pcl-clear-btn[b-k8ulffia1t] {
    background: #e2e8f0;
    color: #475569;
}

.pcl-clear-btn:hover[b-k8ulffia1t] {
    background: #cbd5e1;
}

/* Table styling */
.pcl-table-wrap[b-k8ulffia1t] {
    overflow-x: auto;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.pcl-table[b-k8ulffia1t] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    text-align: left;
}

.pcl-table th[b-k8ulffia1t] {
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
    padding: 14px 16px;
    border-bottom: 2px solid #cbd5e1;
    white-space: nowrap;
}

.pcl-table td[b-k8ulffia1t] {
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.table-row-clickable[b-k8ulffia1t] {
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}

.table-row-clickable:hover[b-k8ulffia1t] {
    background: #f0f7ff;
}

.report-no[b-k8ulffia1t] {
    font-weight: 800;
    color: #1e3a8a;
}

.case-info[b-k8ulffia1t] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.case-name[b-k8ulffia1t] {
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
}

.agency-badge[b-k8ulffia1t] {
    display: inline-block;
    font-size: 11.5px;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.sender-info[b-k8ulffia1t] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
}

.sender-info i[b-k8ulffia1t] {
    font-size: 16px;
    color: #94a3b8;
}

/* Status Badges */
.status-badge[b-k8ulffia1t] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.status-pending[b-k8ulffia1t] {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde047;
}

.status-rejected[b-k8ulffia1t] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.status-approved[b-k8ulffia1t] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.btn-review-action[b-k8ulffia1t] {
    background: #1e3a8a;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6.5px 14px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
    font-family: 'Sarabun', sans-serif;
}

.btn-review-action:hover[b-k8ulffia1t] {
    background: #15295c;
}

.empty-row-text[b-k8ulffia1t] {
    text-align: center;
    padding: 40px !important;
    color: #64748b;
    font-weight: 600;
}

.pcl-footer[b-k8ulffia1t] {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    font-size: 12.5px;
    color: #64748b;
    font-weight: 600;
}
/* /Pages/PersonScreen/BoardCaseDetailPage.razor.rz.scp.css */
.pcl-page[b-pb786p8o08] {
    --pcl-bg: #eaf2fb;
    --pcl-card: #ffffff;
    --pcl-line: #d7e2f1;
    --pcl-head: #e8f1fb;
    --pcl-text: #0b2b63;
    --pcl-muted: #6e82a3;
    --pcl-blue: #214f9b;
    --pcl-orange: #f5a623;
    --pcl-green: #1fc989;
    --pcl-soft-blue: #dfeaff;
    --pcl-soft-green: #dff8eb;
    --pcl-soft-orange: #fff0c9;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--pcl-bg);
    color: var(--pcl-text);
    font-size: 14px;
}

.pcl-hero[b-pb786p8o08] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pcl-kicker[b-pb786p8o08] {
    color: var(--pcl-orange);
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 7px;
}

.pcl-hero h1[b-pb786p8o08] {
    margin: 0;
    color: var(--pcl-text);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pcl-hero p[b-pb786p8o08] {
    margin: 8px 0 0;
    color: var(--pcl-muted);
    font-size: 14px;
    font-weight: 700;
}

.pcl-screen-code[b-pb786p8o08] {
    min-width: 120px;
    padding-top: 20px;
    color: #49658f;
    font-size: 10px;
    font-weight: 800;
    text-align: right;
}

.back-btn[b-pb786p8o08] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--pcl-line);
    background: #ffffff;
    color: var(--pcl-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(13,27,62,0.05);
}
.back-btn:hover[b-pb786p8o08] {
    background: var(--pcl-soft-blue);
    border-color: var(--pcl-blue);
    color: var(--pcl-blue);
}

.pcl-card[b-pb786p8o08] {
    background: var(--pcl-card);
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
    padding: 24px;
    margin-bottom: 16px;
}

/* Summary Card */
.summary-card[b-pb786p8o08] {
    padding: 20px 24px;
}
.summary-grid[b-pb786p8o08] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.summary-item[b-pb786p8o08] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.summary-item .label[b-pb786p8o08] {
    font-size: 11px;
    font-weight: 800;
    color: var(--pcl-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.summary-item .value[b-pb786p8o08] {
    font-size: 15px;
    font-weight: 700;
    color: var(--pcl-text);
}
.summary-item strong.value[b-pb786p8o08] {
    font-size: 18px;
    font-weight: 800;
}
.text-blue[b-pb786p8o08] { color: var(--pcl-blue) !important; }
.text-navy[b-pb786p8o08] { color: #0f172a !important; }

.badge-status[b-pb786p8o08] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}
.status-pending[b-pb786p8o08] { background: var(--pcl-soft-orange); color: #c27803; }
.status-ready[b-pb786p8o08] { background: var(--pcl-soft-green); color: #0e9f6e; }
.status-issued[b-pb786p8o08] { background: #e0f2fe; color: #0369a1; }

/* Alert Card Styles */
.alert-card[b-pb786p8o08] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 24px;
}
.alert-danger-theme[b-pb786p8o08] {
    background: linear-gradient(135deg, #fffaf0, #fff5f5);
    border: 1.5px solid #fecaca;
}
.alert-success-theme[b-pb786p8o08] {
    background: linear-gradient(135deg, #f0fdf4, #e6fdf0);
    border: 1.5px solid #bbf7d0;
}
.alert-icon-col[b-pb786p8o08] {
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.text-orange[b-pb786p8o08] { color: var(--pcl-orange); }
.text-green[b-pb786p8o08] { color: var(--pcl-green); }
.alert-content-col h3[b-pb786p8o08] {
    margin: 0 0 6px 0;
    font-size: 15.5px;
    font-weight: 800;
    color: var(--pcl-text);
}
.alert-content-col p[b-pb786p8o08] {
    margin: 0;
    font-size: 13.5px;
    color: #475569;
    font-weight: 600;
    line-height: 1.45;
}

.incomplete-ids-list[b-pb786p8o08] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
}
.incomplete-id-tag[b-pb786p8o08] {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 800;
}

/* Section Title inside list card */
.section-subtitle[b-pb786p8o08] {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--pcl-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1.5px solid var(--pcl-line);
    padding-bottom: 12px;
}

/* Custom Table Styles */
.table-responsive[b-pb786p8o08] {
    overflow-x: auto;
}
.table-custom[b-pb786p8o08] {
    width: 100%;
    border-collapse: collapse;
}
.table-custom th[b-pb786p8o08] {
    background: var(--pcl-head);
    color: var(--pcl-text);
    font-weight: 800;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid var(--pcl-line);
}
.table-custom td[b-pb786p8o08] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pcl-line);
    color: var(--pcl-text);
    font-weight: 500;
    vertical-align: middle;
}
.table-custom tr:hover[b-pb786p8o08] {
    background: #fafbfe;
}

.case-id-badge[b-pb786p8o08] {
    background: var(--pcl-soft-blue);
    color: var(--pcl-blue);
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
}

.accused-name[b-pb786p8o08] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pcl-text);
    margin-bottom: 4px;
}
.original-agency[b-pb786p8o08] {
    font-size: 12px;
    color: var(--pcl-muted);
    font-weight: 600;
}
.case-type-badge[b-pb786p8o08] {
    background: #f1f5f9;
    color: var(--pcl-text);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid var(--pcl-line);
}
.case-size-text[b-pb786p8o08] {
    font-weight: 700;
    color: var(--pcl-text);
}
.empty-value[b-pb786p8o08] {
    color: var(--pcl-muted);
    font-style: italic;
}

/* Validation status styles */
.status-col[b-pb786p8o08] {
    font-weight: 700;
    font-size: 13px;
}
.text-red[b-pb786p8o08] { color: #dc2626 !important; }
.badge-incomplete[b-pb786p8o08] {
    background: #fee2e2;
    color: #ef4444;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
}
.missing-fields-desc[b-pb786p8o08] {
    font-size: 11.5px;
    color: #ef4444;
    margin-top: 4px;
    font-weight: 600;
    line-height: 1.35;
}

.edit-btn[b-pb786p8o08] {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--pcl-blue);
    border-radius: 6px;
    background: transparent;
    color: var(--pcl-blue);
    font-weight: 700;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.edit-btn:hover[b-pb786p8o08] {
    background: var(--pcl-blue);
    color: #fff;
}

/* Bottom Action Bar */
.bottom-action-bar[b-pb786p8o08] {
    background: #ffffff;
    border-top: 1.5px solid var(--pcl-line);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px -24px -34px -24px;
    box-shadow: 0 -4px 12px rgba(13, 27, 62, 0.04);
}
.status-stat-text[b-pb786p8o08] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pcl-text);
}

.proceed-btn[b-pb786p8o08] {
    background: linear-gradient(135deg, var(--pcl-blue), #1e40af);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 800;
    font-size: 14.5px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(33, 79, 155, 0.25);
}
.proceed-btn:hover:not(:disabled)[b-pb786p8o08] {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    transform: translateY(-1px);
}
.proceed-btn:disabled[b-pb786p8o08] {
    background: #cbd5e1 !important;
    color: #94a3b8 !important;
    border: 1px solid #cbd5e1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Smart CSS Tooltip */
.smart-tooltip-container[b-pb786p8o08] {
    position: relative;
    display: inline-block;
}
.smart-tooltip-container:hover .smart-tooltip-text[b-pb786p8o08] {
    visibility: visible;
    opacity: 1;
}
.smart-tooltip-text[b-pb786p8o08] {
    visibility: hidden;
    width: 320px;
    background-color: #1e293b;
    color: #f8fafc;
    text-align: left;
    border-radius: 8px;
    padding: 10px 14px;
    position: absolute;
    z-index: 100;
    bottom: 135%;
    right: 0;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    border: 1px solid #475569;
}
.smart-tooltip-text[b-pb786p8o08]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 40px;
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}
.text-gold[b-pb786p8o08] {
    color: var(--gold) !important;
}
/* /Pages/PersonScreen/BoardCaseEditPage.razor.rz.scp.css */
.pcl-page[b-mchkef3u2q] {
    --pcl-bg: #eaf2fb;
    --pcl-card: #ffffff;
    --pcl-line: #d7e2f1;
    --pcl-head: #e8f1fb;
    --pcl-text: #0b2b63;
    --pcl-muted: #6e82a3;
    --pcl-blue: #214f9b;
    --pcl-orange: #f5a623;
    --pcl-green: #1fc989;
    --pcl-soft-blue: #dfeaff;
    --pcl-soft-green: #dff8eb;
    --pcl-soft-orange: #fff0c9;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--pcl-bg);
    color: var(--pcl-text);
    font-size: 14px;
}

.pcl-hero[b-mchkef3u2q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pcl-kicker[b-mchkef3u2q] {
    color: var(--pcl-orange);
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 7px;
}

.pcl-hero h1[b-mchkef3u2q] {
    margin: 0;
    color: var(--pcl-text);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pcl-hero p[b-mchkef3u2q] {
    margin: 8px 0 0;
    color: var(--pcl-muted);
    font-size: 14px;
    font-weight: 700;
}

.pcl-screen-code[b-mchkef3u2q] {
    min-width: 120px;
    padding-top: 20px;
    color: #49658f;
    font-size: 10px;
    font-weight: 800;
    text-align: right;
}

.back-btn[b-mchkef3u2q] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--pcl-line);
    background: #ffffff;
    color: var(--pcl-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(13,27,62,0.05);
}
.back-btn:hover[b-mchkef3u2q] {
    background: var(--pcl-soft-blue);
    border-color: var(--pcl-blue);
    color: var(--pcl-blue);
}

.pcl-card[b-mchkef3u2q] {
    background: var(--pcl-card);
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
    padding: 24px;
    margin-bottom: 16px;
}

.edit-layout[b-mchkef3u2q] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.form-container[b-mchkef3u2q] {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.sidebar-logs-container[b-mchkef3u2q] {
    flex: 1;
    min-width: 320px;
}

.form-section[b-mchkef3u2q] {
    padding: 24px;
}

.section-title[b-mchkef3u2q] {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--pcl-text);
    margin-top: 0;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header-row[b-mchkef3u2q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.section-header-row .section-title[b-mchkef3u2q] {
    margin-bottom: 0;
}

.form-grid[b-mchkef3u2q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group[b-mchkef3u2q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-group.span-2[b-mchkef3u2q] {
    grid-column: span 2;
}

.form-group label[b-mchkef3u2q] {
    font-size: 13px;
    font-weight: 800;
    color: #49658f;
}

.form-control[b-mchkef3u2q] {
    height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--pcl-line);
    border-radius: 6px;
    font-size: 14px;
    color: var(--pcl-text);
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    width: 100%;
}
.form-control:focus:not(.readonly)[b-mchkef3u2q] {
    border-color: var(--pcl-blue);
    background: #ffffff;
}
.form-control.readonly[b-mchkef3u2q] {
    background: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
    font-weight: 600;
}

.help-text[b-mchkef3u2q] {
    font-size: 11px;
    color: var(--pcl-muted);
    font-weight: 600;
    margin-top: 2px;
}

/* Custom Radio Toggles */
.radio-group[b-mchkef3u2q] {
    display: flex;
    gap: 24px;
    height: 40px;
    align-items: center;
}
.radio-label[b-mchkef3u2q] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--pcl-text);
    cursor: pointer;
}
.radio-label input[b-mchkef3u2q] {
    display: none;
}
.radio-custom[b-mchkef3u2q] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: inline-block;
    position: relative;
    transition: all 0.2s;
    background: #ffffff;
}
.radio-label input:checked + .radio-custom[b-mchkef3u2q] {
    border-color: var(--pcl-blue);
}
.radio-label input:checked + .radio-custom[b-mchkef3u2q]::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pcl-blue);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Expiry calculation box styling */
.expiry-calc-box[b-mchkef3u2q] {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1.5px solid #bfdbfe;
    border-radius: 8px;
    padding: 14px 18px;
    box-shadow: 0 1px 3px rgba(37,99,235,0.04);
}
.expiry-calc-title[b-mchkef3u2q] {
    font-size: 13.5px;
    font-weight: 800;
    color: #1e40af;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.expiry-calc-grid[b-mchkef3u2q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pcl-text);
}
.expiry-calc-grid strong[b-mchkef3u2q] {
    font-size: 15px;
}
.text-red[b-mchkef3u2q] { color: #dc2626 !important; }
.text-orange[b-mchkef3u2q] { color: #d97706 !important; }
.text-green[b-mchkef3u2q] { color: #16a34a !important; }

/* Role Simulator Switcher */
.role-simulator[b-mchkef3u2q] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
}
.role-label[b-mchkef3u2q] {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    padding-left: 8px;
}
.role-sim-btn[b-mchkef3u2q] {
    border: none;
    background: transparent;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 14px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
}
.role-sim-btn.active-sim[b-mchkef3u2q] {
    background: var(--pcl-blue);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(13,27,62,0.1);
}

.role-lock-warning[b-mchkef3u2q] {
    background: #fffbeb;
    border: 1px solid #fef08a;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: #a16207;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.role-unlock-info[b-mchkef3u2q] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: #166534;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/* Audit Logs Sidebar */
.logs-section[b-mchkef3u2q] {
    padding: 24px;
    min-height: 480px;
}
.logs-timeline[b-mchkef3u2q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}
.log-item[b-mchkef3u2q] {
    border-left: 2px solid #cbd5e1;
    padding-left: 14px;
    position: relative;
    padding-bottom: 6px;
}
.log-item[b-mchkef3u2q]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    position: absolute;
    left: -5px;
    top: 6px;
}
.log-meta[b-mchkef3u2q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--pcl-muted);
    margin-bottom: 6px;
}
.log-user[b-mchkef3u2q] {
    display: flex;
    align-items: center;
    gap: 4px;
}
.log-content[b-mchkef3u2q] {
    font-size: 12.5px;
    color: #334155;
    line-height: 1.45;
    font-weight: 600;
}

/* Footer Actions */
.actions-footer[b-mchkef3u2q] {
    background: #ffffff;
    border-top: 1.5px solid var(--pcl-line);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 24px -24px -34px -24px;
    box-shadow: 0 -4px 12px rgba(13, 27, 62, 0.04);
}

.btn-cancel[b-mchkef3u2q] {
    height: 40px;
    padding: 0 24px;
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--pcl-muted);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-cancel:hover[b-mchkef3u2q] {
    background: #f1f5f9;
    color: var(--pcl-text);
}

.btn-save[b-mchkef3u2q] {
    height: 40px;
    padding: 0 24px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--pcl-blue), #1e40af);
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(33,79,155,0.20);
}
.btn-save:hover[b-mchkef3u2q] {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    transform: translateY(-1px);
}

/* Success Alert Banner */
.alert-success-banner[b-mchkef3u2q] {
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    border-radius: 8px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #065f46;
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(6, 95, 70, 0.03);
    animation: slideDown-b-mchkef3u2q 0.3s ease both;
}
.alert-success-banner i[b-mchkef3u2q] {
    font-size: 20px;
}

@keyframes slideDown-b-mchkef3u2q {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.invalid-border[b-mchkef3u2q] {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}
.radio-group.invalid-border[b-mchkef3u2q] {
    border: 1.5px solid #dc2626 !important;
    padding: 0 10px;
    border-radius: 6px;
}
.checkbox-label.invalid-border[b-mchkef3u2q] {
    border: 1.5px solid #dc2626 !important;
    background-color: #fef2f2 !important;
}
.validation-error-text[b-mchkef3u2q] {
    font-size: 11.5px;
    color: #dc2626;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.checkbox-label[b-mchkef3u2q] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--pcl-text);
    cursor: pointer;
    border: 1.5px solid var(--pcl-line);
    border-radius: 8px;
    padding: 10px 14px;
    background: #f8fafc;
    transition: all 0.2s;
}
.checkbox-label input[b-mchkef3u2q] {
    display: none;
}
.checkbox-custom[b-mchkef3u2q] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid #cbd5e1;
    display: inline-block;
    position: relative;
    transition: all 0.2s;
    background: #ffffff;
}
.checkbox-label input:checked + .checkbox-custom[b-mchkef3u2q] {
    border-color: var(--pcl-blue);
    background: var(--pcl-blue);
}
.checkbox-label input:checked + .checkbox-custom[b-mchkef3u2q]::after {
    content: "\F26E"; /* bootstrap-icons check */
    font-family: "bootstrap-icons";
    color: #ffffff;
    font-size: 13px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 900;
}

/* Readonly Box for System Info */
.system-readonly-box[b-mchkef3u2q] {
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}
.readonly-title[b-mchkef3u2q] {
    font-size: 13px;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.readonly-grid[b-mchkef3u2q] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.readonly-box[b-mchkef3u2q] {
    background-color: #e2e8f0 !important;
    color: #475569 !important;
    font-weight: 700;
    border: 1px solid #cbd5e1 !important;
    cursor: not-allowed;
    display: flex;
    align-items: center;
}

/* Document Drag & Drop Area */
.drag-drop-zone[b-mchkef3u2q] {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}
.drag-drop-zone.drag-over[b-mchkef3u2q] {
    border-color: var(--pcl-blue);
    background-color: #eff6ff;
}
.drag-drop-zone.invalid-border[b-mchkef3u2q] {
    border-color: #dc2626;
    background-color: #fef2f2;
}
.upload-icon[b-mchkef3u2q] {
    font-size: 32px;
    color: var(--pcl-muted);
    transition: color 0.2s;
}
.drag-drop-zone.drag-over .upload-icon[b-mchkef3u2q] {
    color: var(--pcl-blue);
}
.drag-drop-zone p[b-mchkef3u2q] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pcl-text);
}
.file-label[b-mchkef3u2q] {
    color: var(--pcl-blue);
    text-decoration: underline;
    cursor: pointer;
    margin: 0;
}
.file-info-note[b-mchkef3u2q] {
    font-size: 11px;
    color: var(--pcl-muted);
}
.uploaded-file-info[b-mchkef3u2q] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid var(--pcl-line);
    padding: 6px 12px;
    border-radius: 6px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.file-type-icon[b-mchkef3u2q] {
    font-size: 20px;
}
.uploaded-file-name[b-mchkef3u2q] {
    font-size: 13px;
    font-weight: 700;
    color: var(--pcl-text);
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-remove-file[b-mchkef3u2q] {
    background: none;
    border: none;
    color: var(--pcl-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.btn-remove-file:hover[b-mchkef3u2q] {
    color: #dc2626;
}

/* Custom Modal Backdrop & Card */
.modal-backdrop[b-mchkef3u2q] {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-mchkef3u2q 0.2s ease-out;
}
.modal-card[b-mchkef3u2q] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 500px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: scaleIn-b-mchkef3u2q 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-header[b-mchkef3u2q] {
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-header.text-red[b-mchkef3u2q] {
    color: #dc2626;
}
.modal-body[b-mchkef3u2q] {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
}
.validation-modal-list[b-mchkef3u2q] {
    margin: 10px 0 0;
    padding-left: 20px;
}
.validation-modal-list li[b-mchkef3u2q] {
    margin-bottom: 6px;
}
.modal-footer[b-mchkef3u2q] {
    display: flex;
    justify-content: flex-end;
}
.btn-modal-close[b-mchkef3u2q] {
    background-color: var(--pcl-blue);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 24px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-modal-close:hover[b-mchkef3u2q] {
    background-color: #1a4180;
}

@keyframes fadeIn-b-mchkef3u2q {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn-b-mchkef3u2q {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
/* /Pages/PersonScreen/BoardCaseFollowupDetailPage.razor.rz.scp.css */
.review-container[b-g1f0smnek4] {
    padding: 20px;
    font-family: 'Sarabun', sans-serif;
    color: #0b2b63;
    background: #eaf2fb;
    min-height: 100vh;
}

.top-nav-bar[b-g1f0smnek4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #d7e2f1;
    box-shadow: 0 1px 3px rgba(13,27,62,0.05);
    gap: 16px;
    flex-wrap: wrap;
}

.top-nav-left[b-g1f0smnek4] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-btn[b-g1f0smnek4] {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #214f9b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: 'Sarabun', sans-serif;
}
.back-btn:hover[b-g1f0smnek4] {
    background: #e2e8f0;
    color: #0f172a;
}

.view-tag[b-g1f0smnek4] {
    font-size: 12.5px;
    font-weight: 700;
    color: #0b2b63;
    background: #dfeaff;
    border: 1px solid #d7e2f1;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.workspace-grid[b-g1f0smnek4] {
    display: grid;
    grid-template-columns: 390px 1fr;
    gap: 24px;
    align-items: start;
}

.left-panel[b-g1f0smnek4] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card[b-g1f0smnek4] {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #d7e2f1;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(13,27,62,0.02);
}

.card h2[b-g1f0smnek4] {
    font-size: 15px;
    font-weight: 800;
    color: #0b2b63;
    margin: 0 0 16px 0;
    border-bottom: 1px dashed #d7e2f1;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-row[b-g1f0smnek4] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid #f8fafc;
}

.info-row .label[b-g1f0smnek4] {
    color: #6e82a3;
    font-weight: 600;
}

.info-row .value[b-g1f0smnek4] {
    color: #0b2b63;
    font-weight: 800;
}

.btn-primary-action[b-g1f0smnek4] {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #214f9b, #193e7d);
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(33,79,155,0.15);
    font-family: 'Sarabun', sans-serif;
}
.btn-primary-action:hover[b-g1f0smnek4] {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(33,79,155,0.25);
}
.btn-primary-action:disabled[b-g1f0smnek4] {
    background: #cbd5e1;
    color: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-success-action[b-g1f0smnek4] {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #1fc989, #059669);
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(31,201,137,0.15);
    font-family: 'Sarabun', sans-serif;
}
.btn-success-action:hover[b-g1f0smnek4] {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(31,201,137,0.25);
}

.form-group[b-g1f0smnek4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.form-group label[b-g1f0smnek4] {
    font-size: 12.5px;
    font-weight: 800;
    color: #475569;
}
.form-select[b-g1f0smnek4], .form-control[b-g1f0smnek4] {
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 10px;
    outline: none;
    font-size: 13.5px;
    color: #1e293b;
    font-family: 'Sarabun', sans-serif;
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
}
.form-textarea[b-g1f0smnek4] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 10px;
    outline: none;
    font-size: 13.5px;
    color: #1e293b;
    font-family: 'Sarabun', sans-serif;
    background: #ffffff;
    resize: none;
    width: 100%;
    box-sizing: border-box;
}

.simulator-btn[b-g1f0smnek4] {
    width: 100%;
    height: 38px;
    background: #f5f8ff;
    border: 1.5px dashed #214f9b;
    color: #214f9b;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: 'Sarabun', sans-serif;
}
.simulator-btn:hover[b-g1f0smnek4] {
    background: #eaf1ff;
}

/* Success/Reject outcome banners */
.outcome-banner[b-g1f0smnek4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13.5px;
    margin-bottom: 12px;
}
.outcome-banner.approved[b-g1f0smnek4] {
    background: #dff8eb;
    color: #065f46;
    border: 1.5px solid #a7f3d0;
}
.outcome-banner.tracking[b-g1f0smnek4] {
    background: #fffbeb;
    color: #d97706;
    border: 1.5px solid #fef3c7;
}

/* Right Panel: Official A4 Circular Sheet Preview */
.right-panel[b-g1f0smnek4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.preview-header[b-g1f0smnek4] {
    background: #0b2b63;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 8px 8px 0 0;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -24px;
    z-index: 10;
}
.paper-size-tag[b-g1f0smnek4] {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.memo-sheet[b-g1f0smnek4] {
    background: #ffffff;
    padding: 40px 50px;
    border: 1px solid #cbd5e1;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
    min-height: 1050px;
    position: relative;
    font-family: 'Sarabun', sans-serif;
    color: #000000;
}
.garuda-container[b-g1f0smnek4] {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.garuda-container img[b-g1f0smnek4] {
    height: 90px;
}
.memo-title[b-g1f0smnek4] {
    font-size: 29px;
    font-weight: 800;
    text-align: center;
    margin: 10px 0 25px;
    font-family: 'Sarabun', sans-serif;
}
.memo-metadata[b-g1f0smnek4] {
    border-bottom: 2px solid #000000;
    padding-bottom: 12px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.8;
}
.meta-row[b-g1f0smnek4] {
    display: flex;
    width: 100%;
}
.meta-row.split[b-g1f0smnek4] {
    justify-content: space-between;
}
.meta-row.split .meta-col:last-child[b-g1f0smnek4] {
    text-align: right;
    min-width: 250px;
}
.memo-content[b-g1f0smnek4] {
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
}
.memo-content p[b-g1f0smnek4] {
    text-indent: 2.5em;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Progress bar inside details */
.progress-container[b-g1f0smnek4] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.progress-bar-bg[b-g1f0smnek4] {
    background: #e2e8f0;
    border-radius: 4px;
    height: 10px;
    flex-grow: 1;
    overflow: hidden;
}
.progress-bar-fill[b-g1f0smnek4] {
    background: #10b981;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.progress-text[b-g1f0smnek4] {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
    min-width: 100px;
    text-align: right;
}

/* A4 details table */
.memo-table[b-g1f0smnek4] {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
}
.memo-table th[b-g1f0smnek4], .memo-table td[b-g1f0smnek4] {
    border: 1px solid #000000;
    padding: 8px 10px;
}
.memo-table th[b-g1f0smnek4] {
    background: #f8fafc;
    font-weight: 700;
}

/* Status Badges */
.badge-status[b-g1f0smnek4] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
}
.badge-pending[b-g1f0smnek4] {
    background: #fffbeb;
    color: #d97706;
    border: 1.2px solid #fcd34d;
}
.badge-completed[b-g1f0smnek4] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1.2px solid #bbf7d0;
}
/* /Pages/PersonScreen/BoardCaseFollowupListPage.razor.rz.scp.css */
.bcl-page[b-qmu65qr7zc] {
    --bcl-navy-950: #071a3d;
    --bcl-navy-900: #0b2b63;
    --bcl-navy-800: #123d7a;
    --bcl-blue-700: #1e56a6;
    --bcl-blue-600: #2d6bc2;
    --bcl-blue-100: #dceafe;
    --bcl-blue-50: #f1f6ff;
    --bcl-gold-500: #d2aa43;
    --bcl-gold-100: #fff0c2;
    --bcl-slate-900: #172033;
    --bcl-slate-700: #42526d;
    --bcl-slate-600: #60708c;
    --bcl-slate-500: #7e8da7;
    --bcl-slate-300: #cbd7e7;
    --bcl-slate-200: #dfe7f2;
    --bcl-slate-100: #edf2f8;
    --bcl-slate-50: #f7f9fc;
    --bcl-green-700: #087a58;
    --bcl-green-500: #18a878;
    --bcl-green-100: #d9f7eb;
    --bcl-amber-700: #a85b05;
    --bcl-amber-500: #e39218;
    --bcl-amber-100: #fff0d2;
    --bcl-red-700: #b42333;
    --bcl-red-100: #ffe3e8;
    --bcl-white: #ffffff;
    margin: -24px;
    min-height: calc(100vh - var(--header-h, 70px));
    padding: 28px 24px 40px;
    color: var(--bcl-slate-900);
    background:
        radial-gradient(circle at 0 0, rgba(45, 107, 194, .11), transparent 28rem),
        linear-gradient(180deg, #edf3fb 0, #f6f8fc 22rem, #f7f9fc 100%);
    font-family: var(--bs-body-font-family, "Sarabun", sans-serif);
    font-size: 14px;
}

.bcl-page[b-qmu65qr7zc],
.bcl-page *[b-qmu65qr7zc] {
    box-sizing: border-box;
}

.bcl-page > section[b-qmu65qr7zc] {
    width: min(100%, 1680px);
    margin-right: auto;
    margin-left: auto;
}

/* Header */
.bcl-hero[b-qmu65qr7zc] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    min-height: 136px;
    margin-bottom: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    color: var(--bcl-white);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .04), transparent 45%),
        linear-gradient(135deg, var(--bcl-navy-950), var(--bcl-navy-800));
    box-shadow: 0 14px 34px rgba(7, 26, 61, .18);
}

.bcl-hero[b-qmu65qr7zc]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    border: 74px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.bcl-hero[b-qmu65qr7zc]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 24%;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(210, 170, 67, .2);
    border-radius: 50%;
}

.bcl-hero-main[b-qmu65qr7zc] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.bcl-hero-icon[b-qmu65qr7zc] {
    display: inline-flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    color: var(--bcl-gold-100);
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: 28px;
}

.bcl-hero-copy[b-qmu65qr7zc] {
    min-width: 0;
}

.bcl-kicker[b-qmu65qr7zc] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #f4d67c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
}

.bcl-kicker i[b-qmu65qr7zc] {
    color: rgba(255, 255, 255, .55);
    font-size: 9px;
}

.bcl-hero h1[b-qmu65qr7zc] {
    margin: 0;
    color: var(--bcl-white);
    font-size: clamp(24px, 2vw, 31px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.25px;
}

.bcl-hero p[b-qmu65qr7zc] {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
}

.bcl-hero-meta[b-qmu65qr7zc] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.bcl-hero-btn[b-qmu65qr7zc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: var(--bcl-navy-900);
    background: var(--bcl-gold-100);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-hero-btn:hover[b-qmu65qr7zc] {
    transform: translateY(-1px);
    background: var(--bcl-white);
    box-shadow: 0 6px 16px rgba(7, 26, 61, .28);
}

.bcl-hero-btn:focus-visible[b-qmu65qr7zc] {
    outline: 3px solid rgba(255, 255, 255, .4);
    outline-offset: 2px;
}

.bcl-source-pill[b-qmu65qr7zc] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-source-pill i[b-qmu65qr7zc] {
    color: #7fe3be;
}

.bcl-screen-code[b-qmu65qr7zc] {
    color: rgba(255, 255, 255, .52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* KPI cards */
.bcl-kpis[b-qmu65qr7zc] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bcl-kpi[b-qmu65qr7zc] {
    --bcl-tone: var(--bcl-blue-600);
    --bcl-tone-soft: var(--bcl-blue-50);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 164px;
    overflow: hidden;
    padding: 17px 18px 14px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 14px;
    color: inherit;
    background: var(--bcl-white);
    box-shadow: 0 5px 18px rgba(11, 43, 99, .065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.bcl-kpi.tone-pending[b-qmu65qr7zc] {
    --bcl-tone: var(--bcl-amber-500);
    --bcl-tone-soft: #fff8e9;
}

.bcl-kpi.tone-ready[b-qmu65qr7zc] {
    --bcl-tone: var(--bcl-green-500);
    --bcl-tone-soft: #eefbf6;
}

.bcl-kpi.tone-returned[b-qmu65qr7zc] {
    --bcl-tone: #dc2626;
    --bcl-tone-soft: #fff1f2;
}

/* Case-level tones, matching BoardCaseListPage's "สถานะอัปเดตสำนวน" palette
   (violet/teal) 1:1 so the two pages read as the same color system, plus a
   navy "selected" tone specific to this page's checkbox-driven workflow. */
.bcl-kpi.status-pending[b-qmu65qr7zc] {
    --bcl-tone: #7c3aed;
    --bcl-tone-soft: #f5f3ff;
}

.bcl-kpi.status-complete[b-qmu65qr7zc] {
    --bcl-tone: #0f766e;
    --bcl-tone-soft: #f0fdfa;
}

.bcl-kpi.tone-selected[b-qmu65qr7zc] {
    --bcl-tone: var(--bcl-navy-900);
    --bcl-tone-soft: var(--bcl-blue-50);
}

.bcl-kpi-accent[b-qmu65qr7zc] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bcl-tone);
}

.bcl-kpi[b-qmu65qr7zc]::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -60px;
    width: 130px;
    height: 130px;
    border: 24px solid var(--bcl-tone-soft);
    border-radius: 50%;
    pointer-events: none;
}

.bcl-kpi:hover[b-qmu65qr7zc] {
    z-index: 1;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bcl-tone) 45%, var(--bcl-slate-200));
    box-shadow: 0 11px 26px rgba(11, 43, 99, .12);
}

.bcl-kpi:focus-visible[b-qmu65qr7zc] {
    outline: 3px solid color-mix(in srgb, var(--bcl-tone) 28%, transparent);
    outline-offset: 2px;
}

.bcl-kpi.active[b-qmu65qr7zc] {
    border-color: var(--bcl-tone);
    background: linear-gradient(145deg, var(--bcl-white), var(--bcl-tone-soft));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bcl-tone) 13%, transparent),
        0 9px 24px rgba(11, 43, 99, .11);
}

.bcl-kpi-top[b-qmu65qr7zc] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bcl-kpi-icon[b-qmu65qr7zc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--bcl-tone);
    background: var(--bcl-tone-soft);
    font-size: 18px;
}

.bcl-kpi-code[b-qmu65qr7zc] {
    overflow: hidden;
    color: var(--bcl-slate-500);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-kpi-title[b-qmu65qr7zc] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: var(--bcl-slate-700);
    font-size: 13px;
    font-weight: 700;
}

.bcl-kpi-value[b-qmu65qr7zc] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 1px;
}

.bcl-kpi-value strong[b-qmu65qr7zc] {
    color: var(--bcl-navy-900);
    font-size: 30px;
    font-weight: 850;
    line-height: 1.15;
}

.bcl-kpi-value span[b-qmu65qr7zc] {
    color: var(--bcl-slate-500);
    font-size: 11.5px;
    font-weight: 600;
}

.bcl-kpi-action[b-qmu65qr7zc] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--bcl-slate-100);
    color: var(--bcl-tone);
    font-size: 10.5px;
    font-weight: 750;
}

.bcl-kpi-action i[b-qmu65qr7zc] {
    transition: transform .18s ease;
}

.bcl-kpi:hover .bcl-kpi-action i[b-qmu65qr7zc] {
    transform: translateX(3px);
}

/* Main card and filter */
.bcl-card[b-qmu65qr7zc] {
    overflow: hidden;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 8px 28px rgba(11, 43, 99, .075);
}

.bcl-card-header[b-qmu65qr7zc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.bcl-card-heading[b-qmu65qr7zc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bcl-section-icon[b-qmu65qr7zc] {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
    font-size: 17px;
}

.bcl-card-heading h2[b-qmu65qr7zc],
.bcl-table-heading h2[b-qmu65qr7zc] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.bcl-card-heading p[b-qmu65qr7zc],
.bcl-table-heading p[b-qmu65qr7zc] {
    margin: 3px 0 0;
    color: var(--bcl-slate-600);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
}

.bcl-result-summary[b-qmu65qr7zc] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 9px;
    color: var(--bcl-slate-600);
    background: var(--bcl-blue-50);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.bcl-result-summary strong[b-qmu65qr7zc] {
    color: var(--bcl-blue-700);
    font-size: 18px;
    font-weight: 850;
    line-height: 1;
}

.bcl-filter-panel[b-qmu65qr7zc] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-slate-50);
}

.bcl-filter-grid[b-qmu65qr7zc] {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(210px, 1fr) minmax(210px, 1fr);
    gap: 13px;
}

.bcl-field[b-qmu65qr7zc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bcl-field-label[b-qmu65qr7zc] {
    color: var(--bcl-slate-700);
    font-size: 11.5px;
    font-weight: 750;
}

.bcl-input-shell[b-qmu65qr7zc],
.bcl-select-shell[b-qmu65qr7zc],
.bcl-date-shell[b-qmu65qr7zc] {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--bcl-slate-300);
    border-radius: 9px;
    background: var(--bcl-white);
    box-shadow: 0 1px 2px rgba(11, 43, 99, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-input-shell:focus-within[b-qmu65qr7zc],
.bcl-select-shell:focus-within[b-qmu65qr7zc],
.bcl-date-shell:focus-within[b-qmu65qr7zc] {
    border-color: var(--bcl-blue-600);
    background: var(--bcl-white);
    box-shadow: 0 0 0 3px rgba(45, 107, 194, .12);
}

.bcl-input-shell > i:first-child[b-qmu65qr7zc],
.bcl-select-shell > i:first-child[b-qmu65qr7zc],
.bcl-date-shell > i:first-child[b-qmu65qr7zc] {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    color: var(--bcl-slate-500);
    font-size: 14px;
}

.bcl-input-shell input[b-qmu65qr7zc],
.bcl-select-shell select[b-qmu65qr7zc],
.bcl-date-shell input[b-qmu65qr7zc] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    color: var(--bcl-slate-900);
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
}

.bcl-input-shell input[b-qmu65qr7zc]::placeholder {
    color: #9aa8bc;
    font-weight: 500;
}

.bcl-select-shell select[b-qmu65qr7zc] {
    padding-right: 32px;
    appearance: none;
    cursor: pointer;
}

.bcl-select-arrow[b-qmu65qr7zc] {
    position: absolute;
    right: 11px;
    color: var(--bcl-slate-500);
    font-size: 10px;
    pointer-events: none;
}

.bcl-filter-actions[b-qmu65qr7zc] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.bcl-primary-btn[b-qmu65qr7zc],
.bcl-secondary-btn[b-qmu65qr7zc],
.bcl-empty-reset[b-qmu65qr7zc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-primary-btn[b-qmu65qr7zc] {
    border: 1px solid var(--bcl-navy-900);
    color: var(--bcl-white);
    background: linear-gradient(135deg, var(--bcl-navy-900), var(--bcl-blue-700));
    box-shadow: 0 4px 10px rgba(11, 43, 99, .17);
}

.bcl-primary-btn:hover[b-qmu65qr7zc] {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(11, 43, 99, .22);
}

.bcl-secondary-btn[b-qmu65qr7zc] {
    border: 1px solid var(--bcl-slate-300);
    color: var(--bcl-slate-700);
    background: var(--bcl-white);
}

.bcl-secondary-btn:hover[b-qmu65qr7zc] {
    border-color: #aebdd1;
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

.bcl-primary-btn:focus-visible[b-qmu65qr7zc],
.bcl-secondary-btn:focus-visible[b-qmu65qr7zc],
.bcl-empty-reset:focus-visible[b-qmu65qr7zc],
.bcl-inspect-btn:focus-visible[b-qmu65qr7zc],
.bfl-batch-link:focus-visible[b-qmu65qr7zc] {
    outline: 3px solid rgba(45, 107, 194, .2);
    outline-offset: 2px;
}

/* Table */
.bcl-table-section[b-qmu65qr7zc] {
    padding: 0 22px 18px;
}

.bcl-table-heading[b-qmu65qr7zc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
}

.bcl-table-count[b-qmu65qr7zc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bfl-heading-actions[b-qmu65qr7zc] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.bfl-heading-actions .bcl-primary-btn:disabled[b-qmu65qr7zc] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
    transform: none;
}

.bcl-table-count i[b-qmu65qr7zc] {
    color: var(--bcl-blue-700);
}

.bcl-table-wrap[b-qmu65qr7zc] {
    overflow: auto;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 11px;
    background: var(--bcl-white);
    scrollbar-color: #bdcadd transparent;
    scrollbar-width: thin;
}

.bcl-table[b-qmu65qr7zc] {
    width: 100%;
    min-width: 1300px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--bcl-slate-900);
    font-size: 12.5px;
}

.bcl-col-batch[b-qmu65qr7zc] {
    width: 146px;
}

.bcl-col-reference[b-qmu65qr7zc] {
    width: 210px;
}

.bcl-col-received[b-qmu65qr7zc] {
    width: 168px;
}

.bfl-col-dispatch[b-qmu65qr7zc] {
    width: 190px;
}

.bcl-col-total[b-qmu65qr7zc] {
    width: 116px;
}

.bcl-col-complete[b-qmu65qr7zc] {
    width: 178px;
}

.bfl-col-badge[b-qmu65qr7zc] {
    width: 118px;
}

.bcl-col-status[b-qmu65qr7zc] {
    width: 192px;
}

.bfl-col-action[b-qmu65qr7zc] {
    width: 200px;
}

.bfl-col-check[b-qmu65qr7zc] {
    width: 46px;
}

.bfl-col-case[b-qmu65qr7zc] {
    width: 168px;
}

.bfl-col-type[b-qmu65qr7zc] {
    width: 140px;
}

.bfl-col-size[b-qmu65qr7zc] {
    width: 88px;
}

.bfl-col-officer[b-qmu65qr7zc] {
    width: 160px;
}

.bfl-col-unit[b-qmu65qr7zc] {
    width: 176px;
}

.bfl-col-updated[b-qmu65qr7zc] {
    width: 132px;
}

.bfl-col-meeting[b-qmu65qr7zc] {
    width: 168px;
}

.bcl-table th[b-qmu65qr7zc] {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 12px 13px;
    border-bottom: 1px solid #cbd7e7;
    color: var(--bcl-navy-900);
    background: linear-gradient(180deg, #edf3fb, #e7eff9);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.bcl-table th:not(:last-child)[b-qmu65qr7zc] {
    border-right: 1px solid rgba(203, 215, 231, .68);
}

.bcl-table th i[b-qmu65qr7zc] {
    margin-right: 5px;
    color: var(--bcl-blue-600);
    font-size: 12px;
}

.bcl-table td[b-qmu65qr7zc] {
    position: relative;
    height: 76px;
    padding: 13px;
    border-bottom: 1px solid var(--bcl-slate-200);
    color: var(--bcl-slate-700);
    font-weight: 550;
    line-height: 1.45;
    vertical-align: middle;
    background: var(--bcl-white);
}

.bcl-table tbody tr:last-child td[b-qmu65qr7zc] {
    border-bottom: 0;
}

.bcl-table tbody tr:hover td[b-qmu65qr7zc] {
    background: #f8fbff;
}

.bcl-table tbody tr.bcl-row-attention td:first-child[b-qmu65qr7zc]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-amber-500);
}

.bcl-table tbody tr.bfl-row-selected td[b-qmu65qr7zc] {
    background: var(--bcl-blue-50);
}

.bcl-table tbody tr.bfl-row-selected:hover td[b-qmu65qr7zc] {
    background: #e9f1ff;
}

.bcl-table tbody tr.bfl-row-selected td:first-child[b-qmu65qr7zc]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-blue-700);
}

.bfl-checkbox[b-qmu65qr7zc] {
    width: 17px;
    height: 17px;
    accent-color: var(--bcl-navy-900);
    cursor: pointer;
}


.bcl-cell-center[b-qmu65qr7zc] {
    text-align: center !important;
}

.bcl-batch-cell[b-qmu65qr7zc],
.bcl-date-cell[b-qmu65qr7zc] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bfl-batch-link[b-qmu65qr7zc] {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.bfl-batch-link:hover strong[b-qmu65qr7zc] {
    text-decoration: underline;
}

.bcl-batch-cell > span:last-child[b-qmu65qr7zc],
.bcl-date-cell > span:last-child[b-qmu65qr7zc] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}

.bcl-batch-cell strong[b-qmu65qr7zc] {
    overflow: hidden;
    color: var(--bcl-blue-700);
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-batch-cell small[b-qmu65qr7zc],
.bcl-date-cell small[b-qmu65qr7zc] {
    color: var(--bcl-slate-500);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.bcl-date-cell strong[b-qmu65qr7zc] {
    color: var(--bcl-slate-900);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.bcl-reference-cell[b-qmu65qr7zc] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bcl-navy-900);
    font-size: 12px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.bcl-total-count[b-qmu65qr7zc] {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    min-width: 64px;
    padding: 5px 9px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
}

.bcl-total-count strong[b-qmu65qr7zc] {
    color: var(--bcl-navy-900);
    font-size: 17px;
    font-weight: 850;
}

.bcl-total-count small[b-qmu65qr7zc] {
    font-size: 9.5px;
    font-weight: 700;
}

.bfl-total-note[b-qmu65qr7zc] {
    margin-top: 5px;
    color: var(--bcl-slate-500);
    font-size: 9.5px;
    font-weight: 650;
    text-align: center;
}

.bcl-completion[b-qmu65qr7zc] {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 6px;
}

.bcl-completion-value[b-qmu65qr7zc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--bcl-slate-600);
    font-size: 10.5px;
    font-weight: 650;
}

.bcl-completion-value span strong[b-qmu65qr7zc],
.bcl-completion-value > strong[b-qmu65qr7zc] {
    color: var(--bcl-green-700);
    font-weight: 850;
}

.bcl-progress[b-qmu65qr7zc] {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e3eaf3;
}

.bcl-progress span[b-qmu65qr7zc] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--bcl-green-500), #36c797);
    transition: width .25s ease;
}

.bcl-data-badge[b-qmu65qr7zc],
.bcl-status[b-qmu65qr7zc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.bcl-data-badge.is-incomplete[b-qmu65qr7zc] {
    border-color: #ffd0d8;
    color: var(--bcl-red-700);
    background: var(--bcl-red-100);
}

.bcl-data-badge.is-warning[b-qmu65qr7zc] {
    border-color: #fcd9a8;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
}

.bcl-data-badge.is-neutral[b-qmu65qr7zc] {
    border-color: var(--bcl-slate-200);
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
}

.bcl-status[b-qmu65qr7zc] {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 8px;
    white-space: normal;
}

.bcl-status strong[b-qmu65qr7zc] {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 11px;
}

.bcl-status span[b-qmu65qr7zc] {
    text-align: left;
    line-height: 1.4;
}

.bcl-status i[b-qmu65qr7zc] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

/* "สถานะอัปเดตสำนวน" badges (this page's own per-case rows) — same violet/
   teal used by BoardCaseListPage's status-pending/status-complete so a case
   reads the same color here as it does on the meeting list. */
.bcl-status.status-pending[b-qmu65qr7zc] {
    border-color: #ddd6fe;
    color: #7c3aed;
    background: #f5f3ff;
}

.bcl-status.status-complete[b-qmu65qr7zc] {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

/*
   Status color map — mirrors BoardCaseListPage's 19-code palette so both
   screens read the same status color the same way.
*/
.bcl-status.is-pending[b-qmu65qr7zc] {
    border-color: #f4d69f;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
}

.bcl-status.is-review-div1[b-qmu65qr7zc] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.bcl-status.is-review-bureau1[b-qmu65qr7zc] {
    border-color: #93c5fd;
    color: #1e40af;
    background: #dbeafe;
}

.bcl-status.is-dispatched[b-qmu65qr7zc] {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

.bcl-status.is-agency-done[b-qmu65qr7zc] {
    border-color: #a5f3fc;
    color: #0e7490;
    background: #ecfeff;
}

.bcl-status.is-review-div2[b-qmu65qr7zc] {
    border-color: #c7d2fe;
    color: #4338ca;
    background: #eef2ff;
}

.bcl-status.is-review-bureau2[b-qmu65qr7zc] {
    border-color: #ddd6fe;
    color: #6d28d9;
    background: #f5f3ff;
}

.bcl-status.is-review-secgen[b-qmu65qr7zc] {
    border-color: #e9d5ff;
    color: #7e22ce;
    background: #faf5ff;
}

.bcl-status.is-review-board[b-qmu65qr7zc] {
    border-color: #f5d0fe;
    color: #a21caf;
    background: #fdf4ff;
}

.bcl-status.is-review-ack[b-qmu65qr7zc] {
    border-color: #fbcfe8;
    color: #be185d;
    background: #fdf2f8;
}

.bcl-status.is-ready[b-qmu65qr7zc] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-status.is-closed[b-qmu65qr7zc] {
    border-color: #6ee7b7;
    color: #065f46;
    background: #d1fae5;
}

.bcl-status.is-issued[b-qmu65qr7zc] {
    border-color: #c9dcfb;
    color: #2259a9;
    background: #e8f1ff;
}

.bcl-status.is-returned[b-qmu65qr7zc] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.bcl-inspect-btn[b-qmu65qr7zc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--bcl-blue-600);
    border-radius: 8px;
    color: var(--bcl-blue-700);
    background: var(--bcl-white);
    font: inherit;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.bcl-inspect-btn:hover[b-qmu65qr7zc] {
    transform: translateY(-1px);
    color: var(--bcl-white);
    background: var(--bcl-blue-700);
    box-shadow: 0 5px 12px rgba(30, 86, 166, .2);
}

.bcl-btn-arrow[b-qmu65qr7zc] {
    font-size: 9px;
    transition: transform .16s ease;
}

.bcl-inspect-btn:hover .bcl-btn-arrow[b-qmu65qr7zc] {
    transform: translateX(2px);
}

.bcl-empty[b-qmu65qr7zc] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    flex-direction: column;
    padding: 32px 20px;
    text-align: center;
}

.bcl-empty-icon[b-qmu65qr7zc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 50%;
    color: var(--bcl-blue-600);
    background: var(--bcl-blue-50);
    font-size: 26px;
}

.bcl-empty h3[b-qmu65qr7zc] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 15px;
    font-weight: 800;
}

.bcl-empty p[b-qmu65qr7zc] {
    margin: 5px 0 14px;
    color: var(--bcl-slate-600);
    font-size: 11.5px;
}

.bcl-empty-reset[b-qmu65qr7zc] {
    min-height: 34px;
    border: 1px solid var(--bcl-blue-100);
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
}

.bcl-empty-reset:hover[b-qmu65qr7zc] {
    border-color: var(--bcl-blue-600);
    background: #e6f0ff;
}

.bcl-table-footer[b-qmu65qr7zc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px 0;
    color: var(--bcl-slate-600);
    font-size: 11px;
    font-weight: 600;
}

.bcl-table-footer strong[b-qmu65qr7zc] {
    color: var(--bcl-navy-900);
    font-weight: 800;
}

.bcl-footer-note[b-qmu65qr7zc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcl-footer-note i[b-qmu65qr7zc] {
    color: var(--bcl-blue-600);
}

@media (max-width: 1399px) {
    .bcl-filter-grid[b-qmu65qr7zc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1140px) {
    .bcl-kpis[b-qmu65qr7zc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcl-kpi[b-qmu65qr7zc] {
        min-height: 154px;
    }
}

@media (max-width: 768px) {
    .bcl-page[b-qmu65qr7zc] {
        margin: -18px -14px;
        padding: 18px 14px 30px;
    }

    .bcl-hero[b-qmu65qr7zc] {
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .bcl-hero-icon[b-qmu65qr7zc] {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 13px;
        font-size: 22px;
    }

    .bcl-hero-meta[b-qmu65qr7zc] {
        display: none;
    }

    .bcl-kpis[b-qmu65qr7zc] {
        gap: 10px;
    }

    .bcl-card-header[b-qmu65qr7zc],
    .bcl-table-heading[b-qmu65qr7zc],
    .bcl-table-footer[b-qmu65qr7zc] {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcl-result-summary[b-qmu65qr7zc],
    .bcl-table-count[b-qmu65qr7zc] {
        align-self: flex-start;
    }

    .bfl-heading-actions[b-qmu65qr7zc] {
        width: 100%;
        justify-content: space-between;
    }

    .bcl-filter-grid[b-qmu65qr7zc] {
        grid-template-columns: 1fr;
    }

    .bcl-filter-actions[b-qmu65qr7zc] {
        justify-content: stretch;
    }

    .bcl-secondary-btn[b-qmu65qr7zc] {
        flex: 1;
    }

    .bcl-table-section[b-qmu65qr7zc] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .bcl-card-header[b-qmu65qr7zc],
    .bcl-filter-panel[b-qmu65qr7zc] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .bcl-footer-note[b-qmu65qr7zc] {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .bcl-page[b-qmu65qr7zc] {
        margin: -14px -10px;
        padding: 14px 10px 26px;
    }

    .bcl-hero[b-qmu65qr7zc] {
        margin-bottom: 14px;
        padding: 17px 15px;
        border-radius: 12px;
    }

    .bcl-hero-main[b-qmu65qr7zc] {
        align-items: flex-start;
        gap: 11px;
    }

    .bcl-hero-icon[b-qmu65qr7zc] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 19px;
    }

    .bcl-kicker[b-qmu65qr7zc] {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .bcl-hero h1[b-qmu65qr7zc] {
        font-size: 20px;
    }

    .bcl-hero p[b-qmu65qr7zc] {
        font-size: 11.5px;
    }

    .bcl-kpis[b-qmu65qr7zc] {
        grid-template-columns: 1fr;
        margin-bottom: 14px;
    }

    .bcl-kpi[b-qmu65qr7zc] {
        min-height: 142px;
    }

    .bcl-card[b-qmu65qr7zc] {
        border-radius: 12px;
    }

    .bcl-card-header[b-qmu65qr7zc] {
        gap: 12px;
        padding: 15px;
    }

    .bcl-section-icon[b-qmu65qr7zc] {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .bcl-card-heading h2[b-qmu65qr7zc],
    .bcl-table-heading h2[b-qmu65qr7zc] {
        font-size: 15px;
    }

    .bcl-filter-panel[b-qmu65qr7zc] {
        padding: 15px;
    }

    .bcl-filter-actions[b-qmu65qr7zc] {
        flex-direction: column;
    }

    .bcl-secondary-btn[b-qmu65qr7zc] {
        width: 100%;
    }

    .bcl-table-section[b-qmu65qr7zc] {
        padding: 0 10px 14px;
    }

    .bcl-table-heading[b-qmu65qr7zc] {
        padding: 15px 2px 12px;
    }

    .bcl-table-footer[b-qmu65qr7zc] {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcl-page *[b-qmu65qr7zc],
    .bcl-page *[b-qmu65qr7zc]::before,
    .bcl-page *[b-qmu65qr7zc]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* /Pages/PersonScreen/BoardCaseListPage.razor.rz.scp.css */
.bcl-page[b-5irlrebjuj] {
    --bcl-navy-950: #071a3d;
    --bcl-navy-900: #0b2b63;
    --bcl-navy-800: #123d7a;
    --bcl-blue-700: #1e56a6;
    --bcl-blue-600: #2d6bc2;
    --bcl-blue-100: #dceafe;
    --bcl-blue-50: #f1f6ff;
    --bcl-gold-500: #d2aa43;
    --bcl-gold-100: #fff0c2;
    --bcl-slate-900: #172033;
    --bcl-slate-700: #42526d;
    --bcl-slate-600: #60708c;
    --bcl-slate-500: #7e8da7;
    --bcl-slate-300: #cbd7e7;
    --bcl-slate-200: #dfe7f2;
    --bcl-slate-100: #edf2f8;
    --bcl-slate-50: #f7f9fc;
    --bcl-green-700: #087a58;
    --bcl-green-500: #18a878;
    --bcl-green-100: #d9f7eb;
    --bcl-amber-700: #a85b05;
    --bcl-amber-500: #e39218;
    --bcl-amber-100: #fff0d2;
    --bcl-red-700: #b42333;
    --bcl-red-100: #ffe3e8;
    --bcl-white: #ffffff;
    margin: -24px;
    min-height: calc(100vh - var(--header-h, 70px));
    padding: 28px 24px 40px;
    color: var(--bcl-slate-900);
    background:
        radial-gradient(circle at 0 0, rgba(45, 107, 194, .11), transparent 28rem),
        linear-gradient(180deg, #edf3fb 0, #f6f8fc 22rem, #f7f9fc 100%);
    font-family: var(--bs-body-font-family, "Sarabun", sans-serif);
    font-size: 14px;
}

.bcl-page[b-5irlrebjuj],
.bcl-page *[b-5irlrebjuj] {
    box-sizing: border-box;
}

.bcl-page > section[b-5irlrebjuj] {
    width: min(100%, 1680px);
    margin-right: auto;
    margin-left: auto;
}

/* Header */
.bcl-hero[b-5irlrebjuj] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    min-height: 136px;
    margin-bottom: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    color: var(--bcl-white);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .04), transparent 45%),
        linear-gradient(135deg, var(--bcl-navy-950), var(--bcl-navy-800));
    box-shadow: 0 14px 34px rgba(7, 26, 61, .18);
}

.bcl-hero[b-5irlrebjuj]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    border: 74px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.bcl-hero[b-5irlrebjuj]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 24%;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(210, 170, 67, .2);
    border-radius: 50%;
}

.bcl-hero-main[b-5irlrebjuj] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.bcl-hero-icon[b-5irlrebjuj] {
    display: inline-flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    color: var(--bcl-gold-100);
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: 28px;
}

.bcl-hero-copy[b-5irlrebjuj] {
    min-width: 0;
}

.bcl-kicker[b-5irlrebjuj] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #f4d67c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
}

.bcl-kicker i[b-5irlrebjuj] {
    color: rgba(255, 255, 255, .55);
    font-size: 9px;
}

.bcl-hero h1[b-5irlrebjuj] {
    margin: 0;
    color: var(--bcl-white);
    font-size: clamp(24px, 2vw, 31px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.25px;
}

.bcl-hero p[b-5irlrebjuj] {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
}

.bcl-hero-meta[b-5irlrebjuj] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.bcl-source-pill[b-5irlrebjuj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-source-pill i[b-5irlrebjuj] {
    color: #7fe3be;
}

.bcl-screen-code[b-5irlrebjuj] {
    color: rgba(255, 255, 255, .52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* KPI cards */
.bcl-kpis[b-5irlrebjuj] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bcl-kpi[b-5irlrebjuj] {
    --bcl-tone: var(--bcl-blue-600);
    --bcl-tone-soft: var(--bcl-blue-50);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 164px;
    overflow: hidden;
    padding: 17px 18px 14px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 14px;
    color: inherit;
    background: var(--bcl-white);
    box-shadow: 0 5px 18px rgba(11, 43, 99, .065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/*
   Tones mirror the "สถานะภาพรวม" table badges 1:1 (status-pending/
   status-partial/status-complete) so a card's color up top matches the
   badge color a user finds after filtering down to the table. "ALL" gets
   its own vivid indigo so it doesn't read as another "partial" card, and
   "pending" uses a bright violet instead of flat gray so the first two
   cards read as lively as the other two.
*/
.bcl-kpi.tone-all[b-5irlrebjuj] {
    --bcl-tone: #4338ca;
    --bcl-tone-soft: #eef2ff;
}

.bcl-kpi.status-pending[b-5irlrebjuj] {
    --bcl-tone: #7c3aed;
    --bcl-tone-soft: #f5f3ff;
}

.bcl-kpi.status-partial[b-5irlrebjuj] {
    --bcl-tone: #1d4ed8;
    --bcl-tone-soft: #eff6ff;
}

.bcl-kpi.status-complete[b-5irlrebjuj] {
    --bcl-tone: #0f766e;
    --bcl-tone-soft: #f0fdfa;
}

.bcl-kpi-accent[b-5irlrebjuj] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bcl-tone);
}

.bcl-kpi[b-5irlrebjuj]::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -60px;
    width: 130px;
    height: 130px;
    border: 24px solid var(--bcl-tone-soft);
    border-radius: 50%;
    pointer-events: none;
}

.bcl-kpi:hover[b-5irlrebjuj] {
    z-index: 1;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bcl-tone) 45%, var(--bcl-slate-200));
    box-shadow: 0 11px 26px rgba(11, 43, 99, .12);
}

.bcl-kpi:focus-visible[b-5irlrebjuj] {
    outline: 3px solid color-mix(in srgb, var(--bcl-tone) 28%, transparent);
    outline-offset: 2px;
}

.bcl-kpi.active[b-5irlrebjuj] {
    border-color: var(--bcl-tone);
    background: linear-gradient(145deg, var(--bcl-white), var(--bcl-tone-soft));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bcl-tone) 13%, transparent),
        0 9px 24px rgba(11, 43, 99, .11);
}

.bcl-kpi-top[b-5irlrebjuj] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bcl-kpi-icon[b-5irlrebjuj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--bcl-tone);
    background: var(--bcl-tone-soft);
    font-size: 18px;
}

.bcl-kpi-code[b-5irlrebjuj] {
    overflow: hidden;
    color: var(--bcl-slate-500);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-kpi-title[b-5irlrebjuj] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: var(--bcl-slate-700);
    font-size: 13px;
    font-weight: 700;
}

.bcl-kpi-value[b-5irlrebjuj] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 1px;
}

.bcl-kpi-value strong[b-5irlrebjuj] {
    color: var(--bcl-navy-900);
    font-size: 30px;
    font-weight: 850;
    line-height: 1.15;
}

.bcl-kpi-value span[b-5irlrebjuj] {
    color: var(--bcl-slate-500);
    font-size: 11.5px;
    font-weight: 600;
}

.bcl-kpi-action[b-5irlrebjuj] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--bcl-slate-100);
    color: var(--bcl-tone);
    font-size: 10.5px;
    font-weight: 750;
}

.bcl-kpi-action i[b-5irlrebjuj] {
    transition: transform .18s ease;
}

.bcl-kpi:hover .bcl-kpi-action i[b-5irlrebjuj] {
    transform: translateX(3px);
}

/* Main card and filter */
.bcl-card[b-5irlrebjuj] {
    overflow: hidden;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 8px 28px rgba(11, 43, 99, .075);
}

.bcl-card-header[b-5irlrebjuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.bcl-card-heading[b-5irlrebjuj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bcl-section-icon[b-5irlrebjuj] {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
    font-size: 17px;
}

.bcl-card-heading h2[b-5irlrebjuj],
.bcl-table-heading h2[b-5irlrebjuj] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.bcl-card-heading p[b-5irlrebjuj],
.bcl-table-heading p[b-5irlrebjuj] {
    margin: 3px 0 0;
    color: var(--bcl-slate-600);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
}

.bcl-result-summary[b-5irlrebjuj] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 9px;
    color: var(--bcl-slate-600);
    background: var(--bcl-blue-50);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.bcl-result-summary strong[b-5irlrebjuj] {
    color: var(--bcl-blue-700);
    font-size: 18px;
    font-weight: 850;
    line-height: 1;
}

.bcl-filter-panel[b-5irlrebjuj] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-slate-50);
}

.bcl-filter-grid[b-5irlrebjuj] {
    display: grid;
    grid-template-columns: minmax(250px, 1.45fr) minmax(230px, 1.2fr) minmax(180px, .8fr) minmax(180px, .8fr);
    gap: 13px;
}

.bcl-field[b-5irlrebjuj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bcl-field-label[b-5irlrebjuj] {
    color: var(--bcl-slate-700);
    font-size: 11.5px;
    font-weight: 750;
}

.bcl-input-shell[b-5irlrebjuj],
.bcl-select-shell[b-5irlrebjuj],
.bcl-date-shell[b-5irlrebjuj] {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--bcl-slate-300);
    border-radius: 9px;
    background: var(--bcl-white);
    box-shadow: 0 1px 2px rgba(11, 43, 99, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-input-shell:focus-within[b-5irlrebjuj],
.bcl-select-shell:focus-within[b-5irlrebjuj],
.bcl-date-shell:focus-within[b-5irlrebjuj] {
    border-color: var(--bcl-blue-600);
    background: var(--bcl-white);
    box-shadow: 0 0 0 3px rgba(45, 107, 194, .12);
}

.bcl-input-shell > i:first-child[b-5irlrebjuj],
.bcl-select-shell > i:first-child[b-5irlrebjuj],
.bcl-date-shell > i:first-child[b-5irlrebjuj] {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    color: var(--bcl-slate-500);
    font-size: 14px;
}

.bcl-input-shell input[b-5irlrebjuj],
.bcl-select-shell select[b-5irlrebjuj],
.bcl-date-shell input[b-5irlrebjuj] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    color: var(--bcl-slate-900);
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
}

.bcl-input-shell input[b-5irlrebjuj]::placeholder {
    color: #9aa8bc;
    font-weight: 500;
}

.bcl-select-shell select[b-5irlrebjuj] {
    padding-right: 32px;
    appearance: none;
    cursor: pointer;
}

.bcl-select-arrow[b-5irlrebjuj] {
    position: absolute;
    right: 11px;
    color: var(--bcl-slate-500);
    font-size: 10px;
    pointer-events: none;
}

.bcl-date-shell input[b-5irlrebjuj] {
    padding-right: 10px;
    cursor: pointer;
}

.bcl-filter-actions[b-5irlrebjuj] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.bcl-primary-btn[b-5irlrebjuj],
.bcl-secondary-btn[b-5irlrebjuj],
.bcl-empty-reset[b-5irlrebjuj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-primary-btn[b-5irlrebjuj] {
    border: 1px solid var(--bcl-navy-900);
    color: var(--bcl-white);
    background: linear-gradient(135deg, var(--bcl-navy-900), var(--bcl-blue-700));
    box-shadow: 0 4px 10px rgba(11, 43, 99, .17);
}

.bcl-primary-btn:hover[b-5irlrebjuj] {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(11, 43, 99, .22);
}

.bcl-secondary-btn[b-5irlrebjuj] {
    border: 1px solid var(--bcl-slate-300);
    color: var(--bcl-slate-700);
    background: var(--bcl-white);
}

.bcl-secondary-btn:hover[b-5irlrebjuj] {
    border-color: #aebdd1;
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

.bcl-primary-btn:focus-visible[b-5irlrebjuj],
.bcl-secondary-btn:focus-visible[b-5irlrebjuj],
.bcl-empty-reset:focus-visible[b-5irlrebjuj],
.bcl-inspect-btn:focus-visible[b-5irlrebjuj],
.bcl-notice-btn:focus-visible[b-5irlrebjuj] {
    outline: 3px solid rgba(45, 107, 194, .2);
    outline-offset: 2px;
}

/* Table */
.bcl-table-section[b-5irlrebjuj] {
    padding: 0 22px 18px;
}

.bcl-table-heading[b-5irlrebjuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
}

.bcl-table-count[b-5irlrebjuj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-table-count i[b-5irlrebjuj] {
    color: var(--bcl-blue-700);
}

.bcl-table-wrap[b-5irlrebjuj] {
    overflow: auto;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 11px;
    background: var(--bcl-white);
    scrollbar-color: #bdcadd transparent;
    scrollbar-width: thin;
}

.bcl-table[b-5irlrebjuj] {
    width: 100%;
    min-width: 1280px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--bcl-slate-900);
    font-size: 14.5px;
}

.bcl-col-batch[b-5irlrebjuj] {
    width: 60px;
}

.bcl-col-meeting[b-5irlrebjuj] {
    width: 150px;
}

.bcl-col-issued[b-5irlrebjuj] {
    width: 150px;
}

.bcl-col-unit-received[b-5irlrebjuj] {
    width: 190px;
}

.bcl-col-remaining[b-5irlrebjuj] {
    width: 140px;
}

.bcl-col-total[b-5irlrebjuj] {
    width: 120px;
}

.bcl-col-status[b-5irlrebjuj] {
    width: 140px;
}

.bcl-col-action[b-5irlrebjuj] {
    width: 160px;
}

.bcl-table th[b-5irlrebjuj] {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 12px 13px;
    border-bottom: 1px solid #cbd7e7;
    color: var(--bcl-navy-900);
    background: linear-gradient(180deg, #edf3fb, #e7eff9);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.bcl-table th:not(:last-child)[b-5irlrebjuj] {
    border-right: 1px solid rgba(203, 215, 231, .68);
}

.bcl-table th i[b-5irlrebjuj] {
    margin-right: 5px;
    color: var(--bcl-blue-600);
    font-size: 14px;
}

.bcl-table td[b-5irlrebjuj] {
    position: relative;
    min-height: 76px;
    padding: 13px;
    border-bottom: 1px solid var(--bcl-slate-200);
    color: var(--bcl-slate-700);
    font-weight: 550;
    line-height: 1.45;
    vertical-align: middle;
    background: var(--bcl-white);
}

.bcl-table tbody tr:last-child td[b-5irlrebjuj] {
    border-bottom: 0;
}

.bcl-table tbody tr:hover td[b-5irlrebjuj] {
    background: #f8fbff;
}

.bcl-cell-center[b-5irlrebjuj] {
    text-align: center !important;
}

.bcl-row-index[b-5irlrebjuj] {
    color: var(--bcl-slate-600);
    font-size: 14px;
    font-weight: 800;
}

.bcl-date-cell[b-5irlrebjuj] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bcl-date-cell > span:last-child[b-5irlrebjuj] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.bcl-date-cell small[b-5irlrebjuj] {
    color: var(--bcl-slate-500);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bcl-date-cell strong[b-5irlrebjuj] {
    color: var(--bcl-slate-900);
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
}

.bcl-date-cell strong.bcl-not-received[b-5irlrebjuj] {
    color: var(--bcl-amber-700);
}

.bcl-reference-cell[b-5irlrebjuj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bcl-navy-900);
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.bcl-total-count[b-5irlrebjuj] {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    min-width: 64px;
    padding: 5px 9px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
}

.bcl-total-count strong[b-5irlrebjuj] {
    color: var(--bcl-navy-900);
    font-size: 19px;
    font-weight: 850;
}

.bcl-total-count small[b-5irlrebjuj] {
    font-size: 11.5px;
    font-weight: 700;
}

.bcl-completion[b-5irlrebjuj] {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 6px;
}

.bcl-completion-value[b-5irlrebjuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--bcl-slate-600);
    font-size: 12.5px;
    font-weight: 650;
}

.bcl-completion-value span strong[b-5irlrebjuj],
.bcl-completion-value > strong[b-5irlrebjuj] {
    color: var(--bcl-green-700);
    font-weight: 850;
}

.bcl-progress[b-5irlrebjuj] {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e3eaf3;
}

.bcl-progress span[b-5irlrebjuj] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--bcl-green-500), #36c797);
    transition: width .25s ease;
}

.bcl-data-badge[b-5irlrebjuj],
.bcl-status[b-5irlrebjuj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.bcl-data-badge.is-complete[b-5irlrebjuj] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-data-badge.is-incomplete[b-5irlrebjuj] {
    border-color: #ffd0d8;
    color: var(--bcl-red-700);
    background: var(--bcl-red-100);
}

.bcl-status[b-5irlrebjuj] {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 8px;
    white-space: normal;
}

.bcl-status strong[b-5irlrebjuj] {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 13px;
}

.bcl-status span[b-5irlrebjuj] {
    text-align: left;
    line-height: 1.4;
}

.bcl-status i[b-5irlrebjuj] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

/*
   Two independent color families so the two status-bearing columns never
   look like they mean the same thing:

   - สถานะภาพรวม (case update progress) uses a violet/blue/teal family - a
     "how far along" signal with no urgency connotation, matching the KPI
     cards above 1:1.
       pending (ยังไม่เริ่ม)  : violet
       partial (มีอัปเดตแล้ว) : blue
       complete (ครบแล้ว)    : teal

   - ระยะเวลาที่เหลือ (deadline countdown) uses a traffic-light scale so the
     color itself communicates urgency, matching how a countdown should read:
       neutral (ยังไม่เริ่มนับ)     : light gray
       closed (ปิดงานแล้ว)        : darker gray - finished, not merely idle
       safe (เหลือเวลามาก)        : green
       warning (ใกล้หมดเวลา, 2-3 วัน) : amber
       overdue (เหลือ <=1 วัน หรือเกินกำหนด) : red
*/
.bcl-status.status-pending[b-5irlrebjuj] {
    border-color: #ddd6fe;
    color: #7c3aed;
    background: #f5f3ff;
}

.bcl-status.status-partial[b-5irlrebjuj] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.bcl-status.status-complete[b-5irlrebjuj] {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

.bcl-status.time-neutral[b-5irlrebjuj] {
    border-color: var(--bcl-slate-200);
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
}

.bcl-status.time-closed[b-5irlrebjuj] {
    border-color: var(--bcl-slate-300);
    color: var(--bcl-slate-900);
    background: var(--bcl-slate-200);
}

.bcl-status.time-safe[b-5irlrebjuj] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-status.time-warning[b-5irlrebjuj] {
    border-color: #f4d69f;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
}

.bcl-status.time-overdue[b-5irlrebjuj] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.bcl-inspect-btn[b-5irlrebjuj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 130px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid var(--bcl-blue-600);
    border-radius: 8px;
    color: var(--bcl-blue-700);
    background: var(--bcl-white);
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.bcl-inspect-btn:hover[b-5irlrebjuj] {
    transform: translateY(-1px);
    color: var(--bcl-white);
    background: var(--bcl-blue-700);
    box-shadow: 0 5px 12px rgba(30, 86, 166, .2);
}

.bcl-btn-arrow[b-5irlrebjuj] {
    font-size: 11px;
    transition: transform .16s ease;
}

.bcl-inspect-btn:hover .bcl-btn-arrow[b-5irlrebjuj] {
    transform: translateX(2px);
}

.bcl-action-stack[b-5irlrebjuj] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
}

.bcl-notice-btn[b-5irlrebjuj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 130px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid #7c3aed;
    border-radius: 8px;
    color: #6d28d9;
    background: #f5f3ff;
    font: inherit;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.bcl-notice-btn:hover[b-5irlrebjuj] {
    transform: translateY(-1px);
    color: #ffffff;
    background: #6d28d9;
    box-shadow: 0 5px 12px rgba(109, 40, 217, .2);
}

.bcl-empty[b-5irlrebjuj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    flex-direction: column;
    padding: 32px 20px;
    text-align: center;
}

.bcl-empty-icon[b-5irlrebjuj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 50%;
    color: var(--bcl-blue-600);
    background: var(--bcl-blue-50);
    font-size: 26px;
}

.bcl-empty h3[b-5irlrebjuj] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 15px;
    font-weight: 800;
}

.bcl-empty p[b-5irlrebjuj] {
    margin: 5px 0 14px;
    color: var(--bcl-slate-600);
    font-size: 11.5px;
}

.bcl-empty-reset[b-5irlrebjuj] {
    min-height: 34px;
    border: 1px solid var(--bcl-blue-100);
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
}

.bcl-empty-reset:hover[b-5irlrebjuj] {
    border-color: var(--bcl-blue-600);
    background: #e6f0ff;
}

.bcl-table-footer[b-5irlrebjuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px 0;
    color: var(--bcl-slate-600);
    font-size: 11px;
    font-weight: 600;
}

.bcl-table-footer strong[b-5irlrebjuj] {
    color: var(--bcl-navy-900);
    font-weight: 800;
}

.bcl-footer-note[b-5irlrebjuj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcl-footer-note i[b-5irlrebjuj] {
    color: var(--bcl-blue-600);
}

@media (max-width: 1399px) {
    .bcl-filter-grid[b-5irlrebjuj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1140px) {
    .bcl-kpis[b-5irlrebjuj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcl-kpi[b-5irlrebjuj] {
        min-height: 154px;
    }
}

@media (max-width: 768px) {
    .bcl-page[b-5irlrebjuj] {
        margin: -18px -14px;
        padding: 18px 14px 30px;
    }

    .bcl-hero[b-5irlrebjuj] {
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .bcl-hero-icon[b-5irlrebjuj] {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 13px;
        font-size: 22px;
    }

    .bcl-hero-meta[b-5irlrebjuj] {
        display: none;
    }

    .bcl-kpis[b-5irlrebjuj] {
        gap: 10px;
    }

    .bcl-card-header[b-5irlrebjuj],
    .bcl-table-heading[b-5irlrebjuj],
    .bcl-table-footer[b-5irlrebjuj] {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcl-result-summary[b-5irlrebjuj],
    .bcl-table-count[b-5irlrebjuj] {
        align-self: flex-start;
    }

    .bcl-filter-grid[b-5irlrebjuj] {
        grid-template-columns: 1fr;
    }

    .bcl-filter-actions[b-5irlrebjuj] {
        justify-content: stretch;
    }

    .bcl-primary-btn[b-5irlrebjuj],
    .bcl-secondary-btn[b-5irlrebjuj] {
        flex: 1;
    }

    .bcl-table-section[b-5irlrebjuj] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .bcl-card-header[b-5irlrebjuj],
    .bcl-filter-panel[b-5irlrebjuj] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .bcl-footer-note[b-5irlrebjuj] {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .bcl-page[b-5irlrebjuj] {
        margin: -14px -10px;
        padding: 14px 10px 26px;
    }

    .bcl-hero[b-5irlrebjuj] {
        margin-bottom: 14px;
        padding: 17px 15px;
        border-radius: 12px;
    }

    .bcl-hero-main[b-5irlrebjuj] {
        align-items: flex-start;
        gap: 11px;
    }

    .bcl-hero-icon[b-5irlrebjuj] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 19px;
    }

    .bcl-kicker[b-5irlrebjuj] {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .bcl-hero h1[b-5irlrebjuj] {
        font-size: 20px;
    }

    .bcl-hero p[b-5irlrebjuj] {
        font-size: 11.5px;
    }

    .bcl-kpis[b-5irlrebjuj] {
        grid-template-columns: 1fr;
        margin-bottom: 14px;
    }

    .bcl-kpi[b-5irlrebjuj] {
        min-height: 142px;
    }

    .bcl-card[b-5irlrebjuj] {
        border-radius: 12px;
    }

    .bcl-card-header[b-5irlrebjuj] {
        gap: 12px;
        padding: 15px;
    }

    .bcl-section-icon[b-5irlrebjuj] {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .bcl-card-heading h2[b-5irlrebjuj],
    .bcl-table-heading h2[b-5irlrebjuj] {
        font-size: 15px;
    }

    .bcl-filter-panel[b-5irlrebjuj] {
        padding: 15px;
    }

    .bcl-filter-actions[b-5irlrebjuj] {
        flex-direction: column;
    }

    .bcl-primary-btn[b-5irlrebjuj],
    .bcl-secondary-btn[b-5irlrebjuj] {
        width: 100%;
    }

    .bcl-table-section[b-5irlrebjuj] {
        padding: 0 10px 14px;
    }

    .bcl-table-heading[b-5irlrebjuj] {
        padding: 15px 2px 12px;
    }

    .bcl-table-footer[b-5irlrebjuj] {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcl-page *[b-5irlrebjuj],
    .bcl-page *[b-5irlrebjuj]::before,
    .bcl-page *[b-5irlrebjuj]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* /Pages/PersonScreen/BoardCaseProceedStep4.razor.rz.scp.css */
.pcl-page[b-0lmz50hx0x] {
    --pcl-bg: #eaf2fb;
    --pcl-card: #ffffff;
    --pcl-line: #d7e2f1;
    --pcl-head: #e8f1fb;
    --pcl-text: #0b2b63;
    --pcl-muted: #6e82a3;
    --pcl-blue: #214f9b;
    --pcl-orange: #f5a623;
    --pcl-green: #1fc989;
    --pcl-soft-blue: #dfeaff;
    --pcl-soft-green: #dff8eb;
    --pcl-soft-orange: #fff0c9;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--pcl-bg);
    color: var(--pcl-text);
    font-size: 14px;
}

.pcl-hero[b-0lmz50hx0x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pcl-kicker[b-0lmz50hx0x] {
    color: var(--pcl-orange);
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 7px;
}

.pcl-hero h1[b-0lmz50hx0x] {
    margin: 0;
    color: var(--pcl-text);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pcl-hero p[b-0lmz50hx0x] {
    margin: 8px 0 0;
    color: var(--pcl-muted);
    font-size: 14px;
    font-weight: 700;
}

.pcl-screen-code[b-0lmz50hx0x] {
    min-width: 120px;
    padding-top: 20px;
    color: #49658f;
    font-size: 10px;
    font-weight: 800;
    text-align: right;
}

.back-btn[b-0lmz50hx0x] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--pcl-line);
    background: #ffffff;
    color: var(--pcl-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(13,27,62,0.05);
}
.back-btn:hover[b-0lmz50hx0x] {
    background: var(--pcl-soft-blue);
    border-color: var(--pcl-blue);
    color: var(--pcl-blue);
}

.pcl-card[b-0lmz50hx0x] {
    background: var(--pcl-card);
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
    padding: 24px;
    margin-bottom: 16px;
}

.split-layout[b-0lmz50hx0x] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    align-items: flex-start;
}

.editor-column[b-0lmz50hx0x] {
    display: flex;
    flex-direction: column;
}

.preview-column[b-0lmz50hx0x] {
    display: flex;
    flex-direction: column;
}

.preview-header[b-0lmz50hx0x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: #0b2b63;
    color: #f8fafc;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.paper-size-tag[b-0lmz50hx0x] {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
}

/* Simulated Official Memo Sheet (A4 Style) */
.memo-sheet[b-0lmz50hx0x] {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 25px rgba(13, 27, 62, 0.05);
    padding: 48px;
    min-height: 840px;
    font-family: 'Sarabun', sans-serif;
    color: #000000;
    line-height: 1.6;
    font-size: 14.5px;
    box-sizing: border-box;
}

.garuda-container[b-0lmz50hx0x] {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.garuda-container img[b-0lmz50hx0x] {
    width: 75px;
    height: 75px;
    object-fit: contain;
}

.memo-title[b-0lmz50hx0x] {
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    color: #000000;
    margin: 0 0 24px 0;
    letter-spacing: 0.5px;
}

.memo-metadata[b-0lmz50hx0x] {
    border-bottom: 2.5px solid #000000;
    padding-bottom: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}

.meta-row[b-0lmz50hx0x] {
    margin-bottom: 8px;
}
.meta-row.split[b-0lmz50hx0x] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.meta-col[b-0lmz50hx0x] {
    line-height: 1.4;
}

.memo-content[b-0lmz50hx0x] {
    font-weight: 500;
    text-align: justify;
    text-justify: inter-word;
}
.memo-content p[b-0lmz50hx0x] {
    margin-top: 0;
    margin-bottom: 16px;
    text-indent: 48px;
}

.memo-table[b-0lmz50hx0x] {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 13px;
    font-weight: 600;
}
.memo-table th[b-0lmz50hx0x] {
    border: 1px solid #000000;
    padding: 8px;
    font-weight: 800;
    background: #f8fafc;
    text-align: left;
}
.memo-table td[b-0lmz50hx0x] {
    border: 1px solid #000000;
    padding: 8px;
}

/* Approval Routing inside Memo */
.memo-signatures[b-0lmz50hx0x] {
    margin-top: 36px;
}

.signature-flow-box[b-0lmz50hx0x] {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    padding: 14px 18px;
}

.flow-title[b-0lmz50hx0x] {
    font-size: 11px;
    font-weight: 800;
    color: var(--pcl-blue);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.flow-steps[b-0lmz50hx0x] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.step-badge[b-0lmz50hx0x] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.step-badge.pending[b-0lmz50hx0x] {
    background: var(--pcl-soft-orange);
    color: #c27803;
    border-color: #fde047;
}

.step-arrow[b-0lmz50hx0x] {
    color: #94a3b8;
    font-size: 12px;
}

.flow-desc[b-0lmz50hx0x] {
    font-size: 11px;
    color: var(--pcl-muted);
    font-weight: 600;
    display: block;
}

/* Form Settings Left Column */
.form-group[b-0lmz50hx0x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-group label[b-0lmz50hx0x] {
    font-size: 13px;
    font-weight: 800;
    color: #49658f;
}

.form-control[b-0lmz50hx0x] {
    height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--pcl-line);
    border-radius: 6px;
    font-size: 14px;
    color: var(--pcl-text);
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    width: 100%;
}
.form-control:focus[b-0lmz50hx0x] {
    border-color: var(--pcl-blue);
    background: #ffffff;
}

.signature-options[b-0lmz50hx0x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.sig-option-card[b-0lmz50hx0x] {
    border: 1.5px solid var(--pcl-line);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #f8fafc;
    transition: all 0.2s ease-in-out;
}
.sig-option-card:hover[b-0lmz50hx0x] {
    border-color: var(--pcl-blue);
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(13,27,62,0.02);
}
.sig-option-card.active[b-0lmz50hx0x] {
    border-color: var(--pcl-blue);
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(33,79,155,0.08);
}

.sig-option-content[b-0lmz50hx0x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.sig-option-content strong[b-0lmz50hx0x] {
    font-size: 13.5px;
    color: var(--pcl-text);
    font-weight: 800;
}
.sig-option-content span[b-0lmz50hx0x] {
    font-size: 11px;
    color: var(--pcl-muted);
    font-weight: 600;
    line-height: 1.35;
}

.sig-thumbnail-badge[b-0lmz50hx0x] {
    width: 60px;
    height: 35px;
    background: #ffffff;
    border: 1px solid var(--pcl-line);
    border-radius: 4px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sig-thumbnail-badge img[b-0lmz50hx0x] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Upload zone and progress */
.upload-zone[b-0lmz50hx0x] {
    border: 2px dashed var(--pcl-line);
    border-radius: 8px;
    background: #f8fafc;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
}
.upload-zone:hover[b-0lmz50hx0x] {
    border-color: var(--pcl-blue);
    background: #eff6ff;
}
.upload-zone i[b-0lmz50hx0x] {
    font-size: 32px;
    color: var(--pcl-muted);
}
.upload-zone span[b-0lmz50hx0x] {
    font-size: 13.5px;
    font-weight: 700;
}
.upload-zone .sub-text[b-0lmz50hx0x] {
    font-size: 11px;
    color: var(--pcl-muted);
    font-weight: 600;
}

.uploaded-file-box[b-0lmz50hx0x] {
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    padding: 12px 16px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(13,27,62,0.02);
}
.uploaded-file-box .file-info[b-0lmz50hx0x] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.uploaded-file-box .file-info i[b-0lmz50hx0x] {
    font-size: 28px;
}
.uploaded-file-box .file-info div[b-0lmz50hx0x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.uploaded-file-box .file-info strong[b-0lmz50hx0x] {
    font-size: 13.5px;
    color: var(--pcl-text);
    font-weight: 800;
}
.uploaded-file-box .file-info span[b-0lmz50hx0x] {
    font-size: 11px;
    color: var(--pcl-muted);
    font-weight: 600;
}
.btn-remove-file[b-0lmz50hx0x] {
    background: none;
    border: none;
    color: var(--pcl-muted);
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s;
}
.btn-remove-file:hover[b-0lmz50hx0x] {
    color: #dc2626;
}

.actions-footer[b-0lmz50hx0x] {
    background: #ffffff;
    border-top: 1.5px solid var(--pcl-line);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 24px -24px -34px -24px;
    box-shadow: 0 -4px 12px rgba(13, 27, 62, 0.04);
}

.btn-cancel[b-0lmz50hx0x] {
    height: 40px;
    padding: 0 24px;
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--pcl-muted);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-cancel:hover[b-0lmz50hx0x] {
    background: #f1f5f9;
    color: var(--pcl-text);
}

.btn-save[b-0lmz50hx0x] {
    height: 40px;
    padding: 0 24px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--pcl-blue), #1e40af);
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(33,79,155,0.20);
}
.btn-save:hover[b-0lmz50hx0x] {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    transform: translateY(-1px);
}

.alert-success-banner[b-0lmz50hx0x] {
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    border-radius: 8px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #065f46;
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(6, 95, 70, 0.03);
    animation: slideDown-b-0lmz50hx0x 0.3s ease both;
}
.alert-success-banner i[b-0lmz50hx0x] {
    font-size: 20px;
}

@keyframes slideDown-b-0lmz50hx0x {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Official Signature block inside the A4 Memo */
.memo-signature-block[b-0lmz50hx0x] {
    margin-top: 40px;
    float: right;
    width: 250px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Sarabun", sans-serif;
}
.memo-signature-block .greeting[b-0lmz50hx0x] {
    margin-bottom: 8px;
    font-size: 14px;
}
.memo-signature-block .signer-name[b-0lmz50hx0x] {
    margin-top: 6px;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 700;
}
.memo-signature-block .signer-title[b-0lmz50hx0x] {
    margin: 0;
    font-size: 12px;
    color: #475569;
}
.signature-space[b-0lmz50hx0x] {
    width: 180px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 6px 0;
}
.empty-sig-line[b-0lmz50hx0x] {
    width: 100%;
    border-bottom: 1.5px dotted #94a3b8;
    margin-top: 45px;
}

/* Option 2: Mock handwritten signature container */
.mock-signature-container[b-0lmz50hx0x] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Option 3: Green dashed digital signature badge */
.digital-signature-badge[b-0lmz50hx0x] {
    border: 2.2px dashed #10b981;
    border-radius: 8px;
    background-color: #f0fdf4;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: rotate(-3deg);
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1);
    animation: stampEffect-b-0lmz50hx0x 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.digital-signature-badge .check-icon[b-0lmz50hx0x] {
    font-size: 20px;
    color: #10b981;
}
.digital-signature-badge .badge-texts[b-0lmz50hx0x] {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.digital-signature-badge .badge-title[b-0lmz50hx0x] {
    font-size: 14px;
    font-weight: 800;
    color: #065f46;
    line-height: 1.2;
}
.digital-signature-badge .badge-time[b-0lmz50hx0x] {
    font-size: 11px;
    font-weight: 700;
    color: #047857;
}

/* Option 1: Drawn signature rendering */
.drawn-signature-img[b-0lmz50hx0x] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Canvas overlay Modal signature */
.modal-backdrop[b-0lmz50hx0x] {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-0lmz50hx0x 0.2s ease-out;
}
.modal-card[b-0lmz50hx0x] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 500px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: scaleIn-b-0lmz50hx0x 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-header[b-0lmz50hx0x] {
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-body[b-0lmz50hx0x] {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
}
.modal-footer[b-0lmz50hx0x] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

@keyframes fadeIn-b-0lmz50hx0x {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn-b-0lmz50hx0x {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.signature-modal[b-0lmz50hx0x] {
    max-width: 500px;
}
.canvas-wrapper[b-0lmz50hx0x] {
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    display: inline-block;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
#sig-canvas[b-0lmz50hx0x] {
    display: block;
    background-color: #ffffff;
    cursor: crosshair;
    touch-action: none;
}
.btn-canvas-clear[b-0lmz50hx0x] {
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-canvas-clear:hover[b-0lmz50hx0x] {
    background-color: #e2e8f0;
    color: #1e293b;
}
.btn-modal-cancel[b-0lmz50hx0x] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-modal-cancel:hover[b-0lmz50hx0x] {
    background-color: #f8fafc;
    color: #334155;
}
.btn-modal-save[b-0lmz50hx0x] {
    background-color: var(--pcl-blue);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-modal-save:hover[b-0lmz50hx0x] {
    background-color: #1a4180;
}

@keyframes stampEffect-b-0lmz50hx0x {
    0% {
        transform: scale(1.3) rotate(-15deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(-3deg);
        opacity: 1;
    }
}
/* /Pages/PersonScreen/CreatorStatusMockup.razor.rz.scp.css */
.creator-container[b-7yo92dzo20] {
    padding: 30px;
    font-family: 'Sarabun', sans-serif;
    color: #1e293b;
    background: #f8fafc;
    min-height: 100vh;
}

.creator-header[b-7yo92dzo20] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
}

.creator-header h1[b-7yo92dzo20] {
    font-size: 24px;
    font-weight: 700;
    color: #1a2744;
    margin: 0;
}

.subtitle[b-7yo92dzo20] {
    font-size: 14px;
    color: #64748b;
    margin: 6px 0 0 0;
}

/* Scenario Toggle Box */
.scenario-toggle-box[b-7yo92dzo20] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.toggle-label[b-7yo92dzo20] {
    font-size: 12px;
    font-weight: bold;
    color: #64748b;
    display: block;
    margin-bottom: 6px;
}

.toggle-buttons[b-7yo92dzo20] {
    display: flex;
    gap: 8px;
}

.toggle-btn[b-7yo92dzo20] {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn.active[b-7yo92dzo20] {
    background: #1e3a8a;
    color: white;
    border-color: #1e3a8a;
}

/* Alert Banner */
.alert-banner[b-7yo92dzo20] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 6px -1px rgba(220,38,38,0.05);
    animation: alertSlideDown-b-7yo92dzo20 0.3s ease-out;
}

@keyframes alertSlideDown-b-7yo92dzo20 {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.alert-icon-block[b-7yo92dzo20] {
    font-size: 28px;
    color: #dc2626;
    display: flex;
    align-items: center;
}

.alert-text-block[b-7yo92dzo20] {
    flex-grow: 1;
}

.alert-text-block h2[b-7yo92dzo20] {
    font-size: 15px;
    font-weight: 700;
    color: #991b1b;
    margin: 0 0 4px 0;
}

.alert-text-block p[b-7yo92dzo20] {
    font-size: 13.5px;
    color: #7f1d1d;
    margin: 0 0 4px 0;
}

.reject-meta[b-7yo92dzo20] {
    font-size: 11.5px;
    color: #b91c1c;
    font-weight: 500;
}

.resubmit-btn[b-7yo92dzo20] {
    height: 38px;
    padding: 0 16px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px -1px rgba(220,38,38,0.2);
    transition: background 0.2s;
}

.resubmit-btn:hover[b-7yo92dzo20] {
    background: #b91c1c;
}

/* Card styles */
.card[b-7yo92dzo20] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.doc-info-card[b-7yo92dzo20] {
    border-left: 4px solid #1a2744;
}

.doc-header-row[b-7yo92dzo20] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.report-badge[b-7yo92dzo20] {
    font-size: 11px;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.doc-info-card h2[b-7yo92dzo20] {
    font-size: 18px;
    font-weight: 700;
    color: #1a2744;
    margin: 4px 0 0 0;
}

.case-title[b-7yo92dzo20] {
    font-size: 14.5px;
    color: #334155;
    margin: 0;
    line-height: 1.5;
}

.doc-status-badge[b-7yo92dzo20] {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: bold;
}

.doc-status-badge.pending[b-7yo92dzo20] {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde047;
}

.doc-status-badge.rejected[b-7yo92dzo20] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Stepper Card */
.stepper-card h3[b-7yo92dzo20] {
    font-size: 15px;
    font-weight: bold;
    color: #1e293b;
    margin: 0 0 25px 0;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 10px;
}

.stepper-wrapper[b-7yo92dzo20] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 40px;
}

.step-node[b-7yo92dzo20] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 150px;
}

.step-icon[b-7yo92dzo20] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 2px solid #cbd5e1;
    margin-bottom: 12px;
    transition: all 0.3s;
}

.step-info[b-7yo92dzo20] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.step-number[b-7yo92dzo20] {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.step-name[b-7yo92dzo20] {
    font-size: 13.5px;
    color: #1e293b;
}

.step-status[b-7yo92dzo20] {
    font-size: 12px;
    font-weight: bold;
    color: #16a34a;
}

.step-status.pending[b-7yo92dzo20] {
    color: #d97706;
}

.step-status.rejected[b-7yo92dzo20] {
    color: #dc2626;
}

.step-date[b-7yo92dzo20] {
    font-size: 11px;
    color: #94a3b8;
}

/* Connectors */
.step-line[b-7yo92dzo20] {
    flex-grow: 1;
    height: 2px;
    background: #e2e8f0;
    margin-top: 18px;
}

/* Stepper states */
.step-node.completed .step-icon[b-7yo92dzo20] {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 0 0 4px rgba(22,163,74,0.1);
}

.step-node.active .step-icon[b-7yo92dzo20] {
    background: #fffbeb;
    color: #d97706;
    border-color: #d97706;
    box-shadow: 0 0 0 4px rgba(217,119,6,0.1);
}

.step-node.rejected .step-icon[b-7yo92dzo20] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220,38,38,0.1);
}

.step-line.completed[b-7yo92dzo20] {
    background: #16a34a;
}

.step-line.active[b-7yo92dzo20] {
    background: #d97706;
}

.step-line.rejected[b-7yo92dzo20] {
    background: #dc2626;
}

/* Toast success */
.toast-success[b-7yo92dzo20] {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #16a34a;
    color: white;
    padding: 14px 24px;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: bold;
    z-index: 2000;
    animation: toastSlideUp-b-7yo92dzo20 0.3s ease-out;
}

@keyframes toastSlideUp-b-7yo92dzo20 {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* /Pages/PersonScreen/DisciplinaryCaseInspectPage.razor.rz.scp.css */
.bcl-page[b-atzh3me9jy] {
    --bcl-navy-950: #071a3d;
    --bcl-navy-900: #0b2b63;
    --bcl-navy-800: #123d7a;
    --bcl-blue-700: #1e56a6;
    --bcl-blue-600: #2d6bc2;
    --bcl-blue-100: #dceafe;
    --bcl-blue-50: #f1f6ff;
    --bcl-gold-500: #d2aa43;
    --bcl-gold-100: #fff0c2;
    --bcl-slate-900: #172033;
    --bcl-slate-700: #42526d;
    --bcl-slate-600: #60708c;
    --bcl-slate-500: #7e8da7;
    --bcl-slate-300: #cbd7e7;
    --bcl-slate-200: #dfe7f2;
    --bcl-slate-100: #edf2f8;
    --bcl-slate-50: #f7f9fc;
    --bcl-green-700: #087a58;
    --bcl-green-500: #18a878;
    --bcl-green-100: #d9f7eb;
    --bcl-amber-700: #a85b05;
    --bcl-amber-500: #e39218;
    --bcl-amber-100: #fff0d2;
    --bcl-red-700: #b42333;
    --bcl-red-100: #ffe3e8;
    --bcl-white: #ffffff;
    margin: -24px;
    min-height: calc(100vh - var(--header-h, 70px));
    padding: 28px 24px 40px;
    color: var(--bcl-slate-900);
    background:
        radial-gradient(circle at 0 0, rgba(45, 107, 194, .11), transparent 28rem),
        linear-gradient(180deg, #edf3fb 0, #f6f8fc 22rem, #f7f9fc 100%);
    font-family: var(--bs-body-font-family, "Sarabun", sans-serif);
    font-size: 16px;
}

.bcl-page[b-atzh3me9jy],
.bcl-page *[b-atzh3me9jy] {
    box-sizing: border-box;
}

.bcl-page > section[b-atzh3me9jy] {
    width: min(100%, 1680px);
    margin-right: auto;
    margin-left: auto;
}

/* Header */
.bcl-hero[b-atzh3me9jy] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    min-height: 136px;
    margin-bottom: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    color: var(--bcl-white);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .04), transparent 45%),
        linear-gradient(135deg, var(--bcl-navy-950), var(--bcl-navy-800));
    box-shadow: 0 14px 34px rgba(7, 26, 61, .18);
}

.bcl-hero[b-atzh3me9jy]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    border: 74px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.bcl-hero[b-atzh3me9jy]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 24%;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(210, 170, 67, .2);
    border-radius: 50%;
}

.bcl-hero-main[b-atzh3me9jy] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.bcl-hero-icon[b-atzh3me9jy] {
    display: inline-flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    color: var(--bcl-gold-100);
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: 30px;
}

.bcl-hero-copy[b-atzh3me9jy] {
    min-width: 0;
}

.bcl-kicker[b-atzh3me9jy] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #f4d67c;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
}

.bcl-kicker i[b-atzh3me9jy] {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

.bcl-hero h1[b-atzh3me9jy] {
    margin: 0;
    color: var(--bcl-white);
    font-size: clamp(26px, 2vw, 33px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.25px;
}

.bcl-hero p[b-atzh3me9jy] {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.55;
}

.bcl-hero-meta[b-atzh3me9jy] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.bcl-source-pill[b-atzh3me9jy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-source-pill i[b-atzh3me9jy] {
    color: #7fe3be;
}

.bcl-screen-code[b-atzh3me9jy] {
    color: rgba(255, 255, 255, .52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* KPI cards */
.bcl-kpis[b-atzh3me9jy] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bcl-kpi[b-atzh3me9jy] {
    --bcl-tone: var(--bcl-blue-600);
    --bcl-tone-soft: var(--bcl-blue-50);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 164px;
    overflow: hidden;
    padding: 17px 18px 14px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 14px;
    color: inherit;
    background: var(--bcl-white);
    box-shadow: 0 5px 18px rgba(11, 43, 99, .065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.bcl-kpi.tone-pending[b-atzh3me9jy] {
    --bcl-tone: var(--bcl-amber-500);
    --bcl-tone-soft: #fff8e9;
}

.bcl-kpi.tone-ready[b-atzh3me9jy] {
    --bcl-tone: var(--bcl-green-500);
    --bcl-tone-soft: #eefbf6;
}

.bcl-kpi.tone-draft[b-atzh3me9jy] {
    --bcl-tone: #7c3aed;
    --bcl-tone-soft: #f5f3ff;
}

.bcl-kpi.tone-selected[b-atzh3me9jy] {
    --bcl-tone: var(--bcl-navy-900);
    --bcl-tone-soft: var(--bcl-blue-50);
}

.bcl-kpi-accent[b-atzh3me9jy] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bcl-tone);
}

.bcl-kpi[b-atzh3me9jy]::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -60px;
    width: 130px;
    height: 130px;
    border: 24px solid var(--bcl-tone-soft);
    border-radius: 50%;
    pointer-events: none;
}

.bcl-kpi:hover[b-atzh3me9jy] {
    z-index: 1;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bcl-tone) 45%, var(--bcl-slate-200));
    box-shadow: 0 11px 26px rgba(11, 43, 99, .12);
}

.bcl-kpi:focus-visible[b-atzh3me9jy] {
    outline: 3px solid color-mix(in srgb, var(--bcl-tone) 28%, transparent);
    outline-offset: 2px;
}

.bcl-kpi.active[b-atzh3me9jy] {
    border-color: var(--bcl-tone);
    background: linear-gradient(145deg, var(--bcl-white), var(--bcl-tone-soft));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bcl-tone) 13%, transparent),
        0 9px 24px rgba(11, 43, 99, .11);
}

.bcl-kpi-top[b-atzh3me9jy] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bcl-kpi-icon[b-atzh3me9jy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--bcl-tone);
    background: var(--bcl-tone-soft);
    font-size: 20px;
}

.bcl-kpi-code[b-atzh3me9jy] {
    overflow: hidden;
    color: var(--bcl-slate-500);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-kpi-title[b-atzh3me9jy] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: var(--bcl-slate-700);
    font-size: 15px;
    font-weight: 700;
}

.bcl-kpi-value[b-atzh3me9jy] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 1px;
}

.bcl-kpi-value strong[b-atzh3me9jy] {
    color: var(--bcl-navy-900);
    font-size: 32px;
    font-weight: 850;
    line-height: 1.15;
}

.bcl-kpi-value span[b-atzh3me9jy] {
    color: var(--bcl-slate-500);
    font-size: 13.5px;
    font-weight: 600;
}

.bcl-kpi-action[b-atzh3me9jy] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--bcl-slate-100);
    color: var(--bcl-tone);
    font-size: 12.5px;
    font-weight: 750;
}

.bcl-kpi-action i[b-atzh3me9jy] {
    transition: transform .18s ease;
}

.bcl-kpi:hover .bcl-kpi-action i[b-atzh3me9jy] {
    transform: translateX(3px);
}

/* Main card and filter */
.bcl-card[b-atzh3me9jy] {
    overflow: hidden;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 8px 28px rgba(11, 43, 99, .075);
}

.bcl-card-header[b-atzh3me9jy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.bcl-card-heading[b-atzh3me9jy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bcl-section-icon[b-atzh3me9jy] {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
    font-size: 19px;
}

.bcl-card-heading h2[b-atzh3me9jy],
.bcl-table-heading h2[b-atzh3me9jy] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.bcl-card-heading p[b-atzh3me9jy],
.bcl-table-heading p[b-atzh3me9jy] {
    margin: 3px 0 0;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}

.bcl-result-summary[b-atzh3me9jy] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 9px;
    color: var(--bcl-slate-600);
    background: var(--bcl-blue-50);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.bcl-result-summary strong[b-atzh3me9jy] {
    color: var(--bcl-blue-700);
    font-size: 20px;
    font-weight: 850;
    line-height: 1;
}

.bcl-filter-panel[b-atzh3me9jy] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-slate-50);
}

.bcl-filter-grid[b-atzh3me9jy] {
    display: grid;
    grid-template-columns: minmax(250px, 1.45fr) minmax(230px, 1.2fr) minmax(180px, .8fr) minmax(180px, .8fr);
    gap: 13px;
}

.bcl-field[b-atzh3me9jy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bcl-field-label[b-atzh3me9jy] {
    color: var(--bcl-slate-700);
    font-size: 13.5px;
    font-weight: 750;
}

.bcl-input-shell[b-atzh3me9jy],
.bcl-select-shell[b-atzh3me9jy],
.bcl-date-shell[b-atzh3me9jy] {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--bcl-slate-300);
    border-radius: 9px;
    background: var(--bcl-white);
    box-shadow: 0 1px 2px rgba(11, 43, 99, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-input-shell:focus-within[b-atzh3me9jy],
.bcl-select-shell:focus-within[b-atzh3me9jy],
.bcl-date-shell:focus-within[b-atzh3me9jy] {
    border-color: var(--bcl-blue-600);
    background: var(--bcl-white);
    box-shadow: 0 0 0 3px rgba(45, 107, 194, .12);
}

.bcl-input-shell > i:first-child[b-atzh3me9jy],
.bcl-select-shell > i:first-child[b-atzh3me9jy],
.bcl-date-shell > i:first-child[b-atzh3me9jy] {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    color: var(--bcl-slate-500);
    font-size: 16px;
}

.bcl-input-shell input[b-atzh3me9jy],
.bcl-select-shell select[b-atzh3me9jy],
.bcl-date-shell input[b-atzh3me9jy] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    color: var(--bcl-slate-900);
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
}

.bcl-input-shell input[b-atzh3me9jy]::placeholder {
    color: #9aa8bc;
    font-weight: 500;
}

.bcl-select-shell select[b-atzh3me9jy] {
    padding-right: 32px;
    appearance: none;
    cursor: pointer;
}

.bcl-select-arrow[b-atzh3me9jy] {
    position: absolute;
    right: 11px;
    color: var(--bcl-slate-500);
    font-size: 12px;
    pointer-events: none;
}

.bcl-date-shell input[b-atzh3me9jy] {
    padding-right: 10px;
    cursor: pointer;
}

.bcl-filter-actions[b-atzh3me9jy] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.bcl-primary-btn[b-atzh3me9jy],
.bcl-secondary-btn[b-atzh3me9jy],
.bcl-empty-reset[b-atzh3me9jy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-primary-btn[b-atzh3me9jy] {
    border: 1px solid var(--bcl-navy-900);
    color: var(--bcl-white);
    background: linear-gradient(135deg, var(--bcl-navy-900), var(--bcl-blue-700));
    box-shadow: 0 4px 10px rgba(11, 43, 99, .17);
}

.bcl-primary-btn:hover[b-atzh3me9jy] {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(11, 43, 99, .22);
}

.bcl-secondary-btn[b-atzh3me9jy] {
    border: 1px solid var(--bcl-slate-300);
    color: var(--bcl-slate-700);
    background: var(--bcl-white);
}

.bcl-secondary-btn:hover[b-atzh3me9jy] {
    border-color: #aebdd1;
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

.bcl-primary-btn:focus-visible[b-atzh3me9jy],
.bcl-secondary-btn:focus-visible[b-atzh3me9jy],
.bcl-empty-reset:focus-visible[b-atzh3me9jy],
.rpt-link:focus-visible[b-atzh3me9jy] {
    outline: 3px solid rgba(45, 107, 194, .2);
    outline-offset: 2px;
}

/* Table */
.bcl-table-section[b-atzh3me9jy] {
    padding: 0 22px 18px;
}

.bcl-table-heading[b-atzh3me9jy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
}

.bcl-table-count[b-atzh3me9jy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-table-count i[b-atzh3me9jy] {
    color: var(--bcl-blue-700);
}

.bcl-table-wrap[b-atzh3me9jy] {
    overflow: auto;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 11px;
    background: var(--bcl-white);
    scrollbar-color: #bdcadd transparent;
    scrollbar-width: thin;
}

.bcl-table[b-atzh3me9jy] {
    width: 100%;
    min-width: 1150px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--bcl-slate-900);
    font-size: 14.5px;
}

.rpt-col-check[b-atzh3me9jy] {
    width: 46px;
}

.rpt-col-case[b-atzh3me9jy] {
    width: 190px;
}

.rpt-col-unit[b-atzh3me9jy] {
    width: 190px;
}

.rpt-col-result[b-atzh3me9jy] {
    width: 150px;
}

.rpt-col-date[b-atzh3me9jy] {
    width: 150px;
}

.rpt-col-report[b-atzh3me9jy] {
    width: 210px;
}

.rpt-col-source[b-atzh3me9jy] {
    width: 190px;
}

.bcl-table th[b-atzh3me9jy] {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 12px 13px;
    border-bottom: 1px solid #cbd7e7;
    color: var(--bcl-navy-900);
    background: linear-gradient(180deg, #edf3fb, #e7eff9);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.bcl-table th:not(:last-child)[b-atzh3me9jy] {
    border-right: 1px solid rgba(203, 215, 231, .68);
}

.bcl-table th i[b-atzh3me9jy] {
    margin-right: 5px;
    color: var(--bcl-blue-600);
    font-size: 14px;
}

.bcl-table td[b-atzh3me9jy] {
    position: relative;
    height: 76px;
    padding: 13px;
    border-bottom: 1px solid var(--bcl-slate-200);
    color: var(--bcl-slate-700);
    font-weight: 550;
    line-height: 1.45;
    vertical-align: middle;
    background: var(--bcl-white);
}

.bcl-table tbody tr:last-child td[b-atzh3me9jy] {
    border-bottom: 0;
}

.bcl-table tbody tr:hover td[b-atzh3me9jy] {
    background: #f8fbff;
}

.bcl-table tbody tr.bcl-row-attention td:first-child[b-atzh3me9jy]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-amber-500);
}

.bcl-cell-center[b-atzh3me9jy] {
    text-align: center !important;
}

.bcl-batch-cell[b-atzh3me9jy],
.bcl-date-cell[b-atzh3me9jy] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bcl-batch-cell > span:last-child[b-atzh3me9jy],
.bcl-date-cell > span:last-child[b-atzh3me9jy] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.bcl-batch-cell strong[b-atzh3me9jy] {
    overflow: hidden;
    color: var(--bcl-blue-700);
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-batch-cell small[b-atzh3me9jy],
.bcl-date-cell small[b-atzh3me9jy] {
    color: var(--bcl-slate-500);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bcl-date-cell strong[b-atzh3me9jy] {
    color: var(--bcl-slate-900);
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
}

.bcl-reference-cell[b-atzh3me9jy] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bcl-navy-900);
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.bcl-data-badge[b-atzh3me9jy],
.bcl-status[b-atzh3me9jy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.bcl-data-badge.is-complete[b-atzh3me9jy] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-data-badge.is-incomplete[b-atzh3me9jy] {
    border-color: #ffd0d8;
    color: var(--bcl-red-700);
    background: var(--bcl-red-100);
}

.bcl-status[b-atzh3me9jy] {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 8px;
    white-space: normal;
}

.bcl-status strong[b-atzh3me9jy] {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 13px;
}

.bcl-status span[b-atzh3me9jy] {
    text-align: left;
    line-height: 1.4;
}

.bcl-status i[b-atzh3me9jy] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

/*
   Status color map (19 codes):
   - 01 pending           : amber  — งานยังไม่เริ่ม
   - 02-03 circular review: blue family (เข้ม-อ่อนตามลำดับผู้อนุมัติ) — ตรวจ/อนุมัติบันทึกแจ้งเวียน
   - 04 dispatched        : teal   — ส่งหน่วยงานแล้ว รอหน่วยงานตอบกลับ
   - 05 agency-done       : cyan   — หน่วยงานตอบครบ รอจัดทำรายงาน (คั่นกลางก่อนเข้าสายรายงาน)
   - 06-10 report review  : indigo -> violet -> purple -> fuchsia -> rose ไล่เฉดตามลำดับชั้นผู้อนุมัติรายงาน
   - 11 success / 12 closed: green family (12 เข้มกว่า 11 = ปิดงานสมบูรณ์)
   - 13-19 returned       : red กลุ่มเดียวกันทั้งหมด (ตีกลับทุกขั้นตอนใช้สีเดียวกันเพื่อสื่อว่าเป็นสถานะเดียวกันคือ "ตีกลับ")
*/
.bcl-status.is-pending[b-atzh3me9jy] {
    border-color: #f4d69f;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
}

.bcl-status.is-review-div1[b-atzh3me9jy] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.bcl-status.is-review-bureau1[b-atzh3me9jy] {
    border-color: #93c5fd;
    color: #1e40af;
    background: #dbeafe;
}

.bcl-status.is-dispatched[b-atzh3me9jy] {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

.bcl-status.is-agency-done[b-atzh3me9jy] {
    border-color: #a5f3fc;
    color: #0e7490;
    background: #ecfeff;
}

.bcl-status.is-review-div2[b-atzh3me9jy] {
    border-color: #c7d2fe;
    color: #4338ca;
    background: #eef2ff;
}

.bcl-status.is-review-bureau2[b-atzh3me9jy] {
    border-color: #ddd6fe;
    color: #6d28d9;
    background: #f5f3ff;
}

.bcl-status.is-review-secgen[b-atzh3me9jy] {
    border-color: #e9d5ff;
    color: #7e22ce;
    background: #faf5ff;
}

.bcl-status.is-review-board[b-atzh3me9jy] {
    border-color: #f5d0fe;
    color: #a21caf;
    background: #fdf4ff;
}

.bcl-status.is-review-ack[b-atzh3me9jy] {
    border-color: #fbcfe8;
    color: #be185d;
    background: #fdf2f8;
}

.bcl-status.is-ready[b-atzh3me9jy] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-status.is-closed[b-atzh3me9jy] {
    border-color: #6ee7b7;
    color: #065f46;
    background: #d1fae5;
}

.bcl-status.is-issued[b-atzh3me9jy] {
    border-color: #c9dcfb;
    color: #2259a9;
    background: #e8f1ff;
}

.bcl-status.is-returned[b-atzh3me9jy] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.rpt-link[b-atzh3me9jy] {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rpt-link:hover strong[b-atzh3me9jy] {
    text-decoration: underline;
}

.rpt-checkbox[b-atzh3me9jy] {
    width: 17px;
    height: 17px;
    accent-color: var(--bcl-navy-900);
    cursor: pointer;
}

.bcl-table tbody tr.rpt-row-selected td[b-atzh3me9jy] {
    background: var(--bcl-blue-50);
}

.bcl-table tbody tr.rpt-row-selected:hover td[b-atzh3me9jy] {
    background: #e9f1ff;
}

.bcl-table tbody tr.rpt-row-selected td:first-child[b-atzh3me9jy]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-blue-700);
}

.rpt-heading-actions[b-atzh3me9jy] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.rpt-heading-actions .bcl-primary-btn:disabled[b-atzh3me9jy] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
    transform: none;
}

.bcl-empty[b-atzh3me9jy] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    flex-direction: column;
    padding: 32px 20px;
    text-align: center;
}

.bcl-empty-icon[b-atzh3me9jy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 50%;
    color: var(--bcl-blue-600);
    background: var(--bcl-blue-50);
    font-size: 28px;
}

.bcl-empty h3[b-atzh3me9jy] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 17px;
    font-weight: 800;
}

.bcl-empty p[b-atzh3me9jy] {
    margin: 5px 0 14px;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
}

.bcl-empty-reset[b-atzh3me9jy] {
    min-height: 34px;
    border: 1px solid var(--bcl-blue-100);
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
}

.bcl-empty-reset:hover[b-atzh3me9jy] {
    border-color: var(--bcl-blue-600);
    background: #e6f0ff;
}

.bcl-table-footer[b-atzh3me9jy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px 0;
    color: var(--bcl-slate-600);
    font-size: 13px;
    font-weight: 600;
}

.bcl-table-footer strong[b-atzh3me9jy] {
    color: var(--bcl-navy-900);
    font-weight: 800;
}

.bcl-footer-note[b-atzh3me9jy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcl-footer-note i[b-atzh3me9jy] {
    color: var(--bcl-blue-600);
}

@media (max-width: 1399px) {
    .bcl-filter-grid[b-atzh3me9jy] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1140px) {
    .bcl-kpis[b-atzh3me9jy] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcl-kpi[b-atzh3me9jy] {
        min-height: 154px;
    }
}

@media (max-width: 768px) {
    .bcl-page[b-atzh3me9jy] {
        margin: -18px -14px;
        padding: 18px 14px 30px;
    }

    .bcl-hero[b-atzh3me9jy] {
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .bcl-hero-icon[b-atzh3me9jy] {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 13px;
        font-size: 24px;
    }

    .bcl-hero-meta[b-atzh3me9jy] {
        display: none;
    }

    .bcl-kpis[b-atzh3me9jy] {
        gap: 10px;
    }

    .bcl-card-header[b-atzh3me9jy],
    .bcl-table-heading[b-atzh3me9jy],
    .bcl-table-footer[b-atzh3me9jy] {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcl-result-summary[b-atzh3me9jy],
    .bcl-table-count[b-atzh3me9jy] {
        align-self: flex-start;
    }

    .rpt-heading-actions[b-atzh3me9jy] {
        width: 100%;
        justify-content: space-between;
    }

    .bcl-filter-grid[b-atzh3me9jy] {
        grid-template-columns: 1fr;
    }

    .bcl-filter-actions[b-atzh3me9jy] {
        justify-content: stretch;
    }

    .bcl-primary-btn[b-atzh3me9jy],
    .bcl-secondary-btn[b-atzh3me9jy] {
        flex: 1;
    }

    .bcl-table-section[b-atzh3me9jy] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .bcl-card-header[b-atzh3me9jy],
    .bcl-filter-panel[b-atzh3me9jy] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .bcl-footer-note[b-atzh3me9jy] {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .bcl-page[b-atzh3me9jy] {
        margin: -14px -10px;
        padding: 14px 10px 26px;
    }

    .bcl-hero[b-atzh3me9jy] {
        margin-bottom: 14px;
        padding: 17px 15px;
        border-radius: 12px;
    }

    .bcl-hero-main[b-atzh3me9jy] {
        align-items: flex-start;
        gap: 11px;
    }

    .bcl-hero-icon[b-atzh3me9jy] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 21px;
    }

    .bcl-kicker[b-atzh3me9jy] {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .bcl-hero h1[b-atzh3me9jy] {
        font-size: 22px;
    }

    .bcl-hero p[b-atzh3me9jy] {
        font-size: 13.5px;
    }

    .bcl-kpis[b-atzh3me9jy] {
        grid-template-columns: 1fr;
        margin-bottom: 14px;
    }

    .bcl-kpi[b-atzh3me9jy] {
        min-height: 142px;
    }

    .bcl-card[b-atzh3me9jy] {
        border-radius: 12px;
    }

    .bcl-card-header[b-atzh3me9jy] {
        gap: 12px;
        padding: 15px;
    }

    .bcl-section-icon[b-atzh3me9jy] {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .bcl-card-heading h2[b-atzh3me9jy],
    .bcl-table-heading h2[b-atzh3me9jy] {
        font-size: 17px;
    }

    .bcl-filter-panel[b-atzh3me9jy] {
        padding: 15px;
    }

    .bcl-filter-actions[b-atzh3me9jy] {
        flex-direction: column;
    }

    .bcl-primary-btn[b-atzh3me9jy],
    .bcl-secondary-btn[b-atzh3me9jy] {
        width: 100%;
    }

    .bcl-table-section[b-atzh3me9jy] {
        padding: 0 10px 14px;
    }

    .bcl-table-heading[b-atzh3me9jy] {
        padding: 15px 2px 12px;
    }

    .bcl-table-footer[b-atzh3me9jy] {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcl-page *[b-atzh3me9jy],
    .bcl-page *[b-atzh3me9jy]::before,
    .bcl-page *[b-atzh3me9jy]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* /Pages/PersonScreen/DisciplinaryEmsFormPage.razor.rz.scp.css */
.bcl-page[b-c2qa9wn20f] {
    --bcl-navy-950: #071a3d;
    --bcl-navy-900: #0b2b63;
    --bcl-navy-800: #123d7a;
    --bcl-blue-700: #1e56a6;
    --bcl-blue-600: #2d6bc2;
    --bcl-blue-100: #dceafe;
    --bcl-blue-50: #f1f6ff;
    --bcl-gold-500: #d2aa43;
    --bcl-gold-100: #fff0c2;
    --bcl-slate-900: #172033;
    --bcl-slate-700: #42526d;
    --bcl-slate-600: #60708c;
    --bcl-slate-500: #7e8da7;
    --bcl-slate-300: #cbd7e7;
    --bcl-slate-200: #dfe7f2;
    --bcl-slate-100: #edf2f8;
    --bcl-slate-50: #f7f9fc;
    --bcl-green-700: #087a58;
    --bcl-green-500: #18a878;
    --bcl-green-100: #d9f7eb;
    --bcl-amber-700: #a85b05;
    --bcl-amber-500: #e39218;
    --bcl-amber-100: #fff0d2;
    --bcl-red-700: #b42333;
    --bcl-red-100: #ffe3e8;
    --bcl-white: #ffffff;
    margin: -24px;
    min-height: calc(100vh - var(--header-h, 70px));
    padding: 28px 24px 40px;
    color: var(--bcl-slate-900);
    background:
        radial-gradient(circle at 0 0, rgba(45, 107, 194, .11), transparent 28rem),
        linear-gradient(180deg, #edf3fb 0, #f6f8fc 22rem, #f7f9fc 100%);
    font-family: var(--bs-body-font-family, "Sarabun", sans-serif);
    font-size: 16px;
}

.bcl-page[b-c2qa9wn20f],
.bcl-page *[b-c2qa9wn20f] {
    box-sizing: border-box;
}

.bcl-page > section[b-c2qa9wn20f] {
    width: min(100%, 1680px);
    margin-right: auto;
    margin-left: auto;
}

/* Header */
.bcl-hero[b-c2qa9wn20f] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    min-height: 136px;
    margin-bottom: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    color: var(--bcl-white);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .04), transparent 45%),
        linear-gradient(135deg, var(--bcl-navy-950), var(--bcl-navy-800));
    box-shadow: 0 14px 34px rgba(7, 26, 61, .18);
}

.bcl-hero[b-c2qa9wn20f]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    border: 74px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.bcl-hero[b-c2qa9wn20f]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 24%;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(210, 170, 67, .2);
    border-radius: 50%;
}

.bcl-hero-main[b-c2qa9wn20f] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.bcl-hero-icon[b-c2qa9wn20f] {
    display: inline-flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    color: var(--bcl-gold-100);
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: 30px;
}

.bcl-hero-copy[b-c2qa9wn20f] {
    min-width: 0;
}

.bcl-kicker[b-c2qa9wn20f] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #f4d67c;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
}

.bcl-kicker i[b-c2qa9wn20f] {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

.bcl-hero h1[b-c2qa9wn20f] {
    margin: 0;
    color: var(--bcl-white);
    font-size: clamp(26px, 2vw, 33px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.25px;
}

.bcl-hero p[b-c2qa9wn20f] {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.55;
}

.bcl-hero-meta[b-c2qa9wn20f] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.bcl-source-pill[b-c2qa9wn20f] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-source-pill i[b-c2qa9wn20f] {
    color: #7fe3be;
}

.bcl-screen-code[b-c2qa9wn20f] {
    color: rgba(255, 255, 255, .52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* KPI cards */
.bcl-kpis[b-c2qa9wn20f] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bcl-kpi[b-c2qa9wn20f] {
    --bcl-tone: var(--bcl-blue-600);
    --bcl-tone-soft: var(--bcl-blue-50);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 164px;
    overflow: hidden;
    padding: 17px 18px 14px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 14px;
    color: inherit;
    background: var(--bcl-white);
    box-shadow: 0 5px 18px rgba(11, 43, 99, .065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.bcl-kpi.tone-pending[b-c2qa9wn20f] {
    --bcl-tone: var(--bcl-amber-500);
    --bcl-tone-soft: #fff8e9;
}

.bcl-kpi.tone-ready[b-c2qa9wn20f] {
    --bcl-tone: var(--bcl-green-500);
    --bcl-tone-soft: #eefbf6;
}

.bcl-kpi.tone-draft[b-c2qa9wn20f] {
    --bcl-tone: #7c3aed;
    --bcl-tone-soft: #f5f3ff;
}

.bcl-kpi.tone-selected[b-c2qa9wn20f] {
    --bcl-tone: var(--bcl-navy-900);
    --bcl-tone-soft: var(--bcl-blue-50);
}

.bcl-kpi-accent[b-c2qa9wn20f] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bcl-tone);
}

.bcl-kpi[b-c2qa9wn20f]::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -60px;
    width: 130px;
    height: 130px;
    border: 24px solid var(--bcl-tone-soft);
    border-radius: 50%;
    pointer-events: none;
}

.bcl-kpi:hover[b-c2qa9wn20f] {
    z-index: 1;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bcl-tone) 45%, var(--bcl-slate-200));
    box-shadow: 0 11px 26px rgba(11, 43, 99, .12);
}

.bcl-kpi:focus-visible[b-c2qa9wn20f] {
    outline: 3px solid color-mix(in srgb, var(--bcl-tone) 28%, transparent);
    outline-offset: 2px;
}

.bcl-kpi.active[b-c2qa9wn20f] {
    border-color: var(--bcl-tone);
    background: linear-gradient(145deg, var(--bcl-white), var(--bcl-tone-soft));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bcl-tone) 13%, transparent),
        0 9px 24px rgba(11, 43, 99, .11);
}

.bcl-kpi-top[b-c2qa9wn20f] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bcl-kpi-icon[b-c2qa9wn20f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--bcl-tone);
    background: var(--bcl-tone-soft);
    font-size: 20px;
}

.bcl-kpi-code[b-c2qa9wn20f] {
    overflow: hidden;
    color: var(--bcl-slate-500);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-kpi-title[b-c2qa9wn20f] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: var(--bcl-slate-700);
    font-size: 15px;
    font-weight: 700;
}

.bcl-kpi-value[b-c2qa9wn20f] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 1px;
}

.bcl-kpi-value strong[b-c2qa9wn20f] {
    color: var(--bcl-navy-900);
    font-size: 32px;
    font-weight: 850;
    line-height: 1.15;
}

.bcl-kpi-value span[b-c2qa9wn20f] {
    color: var(--bcl-slate-500);
    font-size: 13.5px;
    font-weight: 600;
}

.bcl-kpi-action[b-c2qa9wn20f] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--bcl-slate-100);
    color: var(--bcl-tone);
    font-size: 12.5px;
    font-weight: 750;
}

.bcl-kpi-action i[b-c2qa9wn20f] {
    transition: transform .18s ease;
}

.bcl-kpi:hover .bcl-kpi-action i[b-c2qa9wn20f] {
    transform: translateX(3px);
}

/* Main card and filter */
.bcl-card[b-c2qa9wn20f] {
    overflow: hidden;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 8px 28px rgba(11, 43, 99, .075);
}

.bcl-card-header[b-c2qa9wn20f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.bcl-card-heading[b-c2qa9wn20f] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bcl-section-icon[b-c2qa9wn20f] {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
    font-size: 19px;
}

.bcl-card-heading h2[b-c2qa9wn20f],
.bcl-table-heading h2[b-c2qa9wn20f] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.bcl-card-heading p[b-c2qa9wn20f],
.bcl-table-heading p[b-c2qa9wn20f] {
    margin: 3px 0 0;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}

.bcl-result-summary[b-c2qa9wn20f] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 9px;
    color: var(--bcl-slate-600);
    background: var(--bcl-blue-50);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.bcl-result-summary strong[b-c2qa9wn20f] {
    color: var(--bcl-blue-700);
    font-size: 20px;
    font-weight: 850;
    line-height: 1;
}

.bcl-filter-panel[b-c2qa9wn20f] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-slate-50);
}

.bcl-filter-grid[b-c2qa9wn20f] {
    display: grid;
    grid-template-columns: minmax(250px, 1.45fr) minmax(230px, 1.2fr) minmax(180px, .8fr) minmax(180px, .8fr);
    gap: 13px;
}

.bcl-field[b-c2qa9wn20f] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bcl-field-label[b-c2qa9wn20f] {
    color: var(--bcl-slate-700);
    font-size: 13.5px;
    font-weight: 750;
}

.bcl-input-shell[b-c2qa9wn20f],
.bcl-select-shell[b-c2qa9wn20f],
.bcl-date-shell[b-c2qa9wn20f] {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--bcl-slate-300);
    border-radius: 9px;
    background: var(--bcl-white);
    box-shadow: 0 1px 2px rgba(11, 43, 99, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-input-shell:focus-within[b-c2qa9wn20f],
.bcl-select-shell:focus-within[b-c2qa9wn20f],
.bcl-date-shell:focus-within[b-c2qa9wn20f] {
    border-color: var(--bcl-blue-600);
    background: var(--bcl-white);
    box-shadow: 0 0 0 3px rgba(45, 107, 194, .12);
}

.bcl-input-shell > i:first-child[b-c2qa9wn20f],
.bcl-select-shell > i:first-child[b-c2qa9wn20f],
.bcl-date-shell > i:first-child[b-c2qa9wn20f] {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    color: var(--bcl-slate-500);
    font-size: 16px;
}

.bcl-input-shell input[b-c2qa9wn20f],
.bcl-select-shell select[b-c2qa9wn20f],
.bcl-date-shell input[b-c2qa9wn20f] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    color: var(--bcl-slate-900);
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
}

.bcl-input-shell input[b-c2qa9wn20f]::placeholder {
    color: #9aa8bc;
    font-weight: 500;
}

.bcl-select-shell select[b-c2qa9wn20f] {
    padding-right: 32px;
    appearance: none;
    cursor: pointer;
}

.bcl-select-arrow[b-c2qa9wn20f] {
    position: absolute;
    right: 11px;
    color: var(--bcl-slate-500);
    font-size: 12px;
    pointer-events: none;
}

.bcl-date-shell input[b-c2qa9wn20f] {
    padding-right: 10px;
    cursor: pointer;
}

.bcl-filter-actions[b-c2qa9wn20f] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.bcl-primary-btn[b-c2qa9wn20f],
.bcl-secondary-btn[b-c2qa9wn20f],
.bcl-empty-reset[b-c2qa9wn20f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-primary-btn[b-c2qa9wn20f] {
    border: 1px solid var(--bcl-navy-900);
    color: var(--bcl-white);
    background: linear-gradient(135deg, var(--bcl-navy-900), var(--bcl-blue-700));
    box-shadow: 0 4px 10px rgba(11, 43, 99, .17);
}

.bcl-primary-btn:hover[b-c2qa9wn20f] {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(11, 43, 99, .22);
}

.bcl-secondary-btn[b-c2qa9wn20f] {
    border: 1px solid var(--bcl-slate-300);
    color: var(--bcl-slate-700);
    background: var(--bcl-white);
}

.bcl-secondary-btn:hover[b-c2qa9wn20f] {
    border-color: #aebdd1;
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

.bcl-primary-btn:focus-visible[b-c2qa9wn20f],
.bcl-secondary-btn:focus-visible[b-c2qa9wn20f],
.bcl-empty-reset:focus-visible[b-c2qa9wn20f],
.rpt-link:focus-visible[b-c2qa9wn20f] {
    outline: 3px solid rgba(45, 107, 194, .2);
    outline-offset: 2px;
}

/* Table */
.bcl-table-section[b-c2qa9wn20f] {
    padding: 0 22px 18px;
}

.bcl-table-heading[b-c2qa9wn20f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
}

.bcl-table-count[b-c2qa9wn20f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-table-count i[b-c2qa9wn20f] {
    color: var(--bcl-blue-700);
}

.bcl-table-wrap[b-c2qa9wn20f] {
    overflow: auto;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 11px;
    background: var(--bcl-white);
    scrollbar-color: #bdcadd transparent;
    scrollbar-width: thin;
}

.bcl-table[b-c2qa9wn20f] {
    width: 100%;
    min-width: 1150px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--bcl-slate-900);
    font-size: 14.5px;
}

.rpt-col-check[b-c2qa9wn20f] {
    width: 46px;
}

.rpt-col-case[b-c2qa9wn20f] {
    width: 190px;
}

.rpt-col-unit[b-c2qa9wn20f] {
    width: 190px;
}

.rpt-col-result[b-c2qa9wn20f] {
    width: 150px;
}

.rpt-col-date[b-c2qa9wn20f] {
    width: 150px;
}

.rpt-col-report[b-c2qa9wn20f] {
    width: 210px;
}

.rpt-col-source[b-c2qa9wn20f] {
    width: 190px;
}

.bcl-table th[b-c2qa9wn20f] {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 12px 13px;
    border-bottom: 1px solid #cbd7e7;
    color: var(--bcl-navy-900);
    background: linear-gradient(180deg, #edf3fb, #e7eff9);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.bcl-table th:not(:last-child)[b-c2qa9wn20f] {
    border-right: 1px solid rgba(203, 215, 231, .68);
}

.bcl-table th i[b-c2qa9wn20f] {
    margin-right: 5px;
    color: var(--bcl-blue-600);
    font-size: 14px;
}

.bcl-table td[b-c2qa9wn20f] {
    position: relative;
    height: 76px;
    padding: 13px;
    border-bottom: 1px solid var(--bcl-slate-200);
    color: var(--bcl-slate-700);
    font-weight: 550;
    line-height: 1.45;
    vertical-align: middle;
    background: var(--bcl-white);
}

.bcl-table tbody tr:last-child td[b-c2qa9wn20f] {
    border-bottom: 0;
}

.bcl-table tbody tr:hover td[b-c2qa9wn20f] {
    background: #f8fbff;
}

.bcl-table tbody tr.bcl-row-attention td:first-child[b-c2qa9wn20f]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-amber-500);
}

.bcl-cell-center[b-c2qa9wn20f] {
    text-align: center !important;
}

.bcl-batch-cell[b-c2qa9wn20f],
.bcl-date-cell[b-c2qa9wn20f] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bcl-batch-cell > span:last-child[b-c2qa9wn20f],
.bcl-date-cell > span:last-child[b-c2qa9wn20f] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.bcl-batch-cell strong[b-c2qa9wn20f] {
    overflow: hidden;
    color: var(--bcl-blue-700);
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-batch-cell small[b-c2qa9wn20f],
.bcl-date-cell small[b-c2qa9wn20f] {
    color: var(--bcl-slate-500);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bcl-date-cell strong[b-c2qa9wn20f] {
    color: var(--bcl-slate-900);
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
}

.bcl-reference-cell[b-c2qa9wn20f] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bcl-navy-900);
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.bcl-data-badge[b-c2qa9wn20f],
.bcl-status[b-c2qa9wn20f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.bcl-data-badge.is-complete[b-c2qa9wn20f] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-data-badge.is-incomplete[b-c2qa9wn20f] {
    border-color: #ffd0d8;
    color: var(--bcl-red-700);
    background: var(--bcl-red-100);
}

.bcl-status[b-c2qa9wn20f] {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 8px;
    white-space: normal;
}

.bcl-status strong[b-c2qa9wn20f] {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 13px;
}

.bcl-status span[b-c2qa9wn20f] {
    text-align: left;
    line-height: 1.4;
}

.bcl-status i[b-c2qa9wn20f] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

/*
   Status color map (19 codes):
   - 01 pending           : amber  — งานยังไม่เริ่ม
   - 02-03 circular review: blue family (เข้ม-อ่อนตามลำดับผู้อนุมัติ) — ตรวจ/อนุมัติบันทึกแจ้งเวียน
   - 04 dispatched        : teal   — ส่งหน่วยงานแล้ว รอหน่วยงานตอบกลับ
   - 05 agency-done       : cyan   — หน่วยงานตอบครบ รอจัดทำรายงาน (คั่นกลางก่อนเข้าสายรายงาน)
   - 06-10 report review  : indigo -> violet -> purple -> fuchsia -> rose ไล่เฉดตามลำดับชั้นผู้อนุมัติรายงาน
   - 11 success / 12 closed: green family (12 เข้มกว่า 11 = ปิดงานสมบูรณ์)
   - 13-19 returned       : red กลุ่มเดียวกันทั้งหมด (ตีกลับทุกขั้นตอนใช้สีเดียวกันเพื่อสื่อว่าเป็นสถานะเดียวกันคือ "ตีกลับ")
*/
.bcl-status.is-pending[b-c2qa9wn20f] {
    border-color: #f4d69f;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
}

.bcl-status.is-review-div1[b-c2qa9wn20f] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.bcl-status.is-review-bureau1[b-c2qa9wn20f] {
    border-color: #93c5fd;
    color: #1e40af;
    background: #dbeafe;
}

.bcl-status.is-dispatched[b-c2qa9wn20f] {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

.bcl-status.is-agency-done[b-c2qa9wn20f] {
    border-color: #a5f3fc;
    color: #0e7490;
    background: #ecfeff;
}

.bcl-status.is-review-div2[b-c2qa9wn20f] {
    border-color: #c7d2fe;
    color: #4338ca;
    background: #eef2ff;
}

.bcl-status.is-review-bureau2[b-c2qa9wn20f] {
    border-color: #ddd6fe;
    color: #6d28d9;
    background: #f5f3ff;
}

.bcl-status.is-review-secgen[b-c2qa9wn20f] {
    border-color: #e9d5ff;
    color: #7e22ce;
    background: #faf5ff;
}

.bcl-status.is-review-board[b-c2qa9wn20f] {
    border-color: #f5d0fe;
    color: #a21caf;
    background: #fdf4ff;
}

.bcl-status.is-review-ack[b-c2qa9wn20f] {
    border-color: #fbcfe8;
    color: #be185d;
    background: #fdf2f8;
}

.bcl-status.is-ready[b-c2qa9wn20f] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-status.is-closed[b-c2qa9wn20f] {
    border-color: #6ee7b7;
    color: #065f46;
    background: #d1fae5;
}

.bcl-status.is-issued[b-c2qa9wn20f] {
    border-color: #c9dcfb;
    color: #2259a9;
    background: #e8f1ff;
}

.bcl-status.is-returned[b-c2qa9wn20f] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.rpt-link[b-c2qa9wn20f] {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rpt-link:hover strong[b-c2qa9wn20f] {
    text-decoration: underline;
}

.rpt-checkbox[b-c2qa9wn20f] {
    width: 17px;
    height: 17px;
    accent-color: var(--bcl-navy-900);
    cursor: pointer;
}

.bcl-table tbody tr.rpt-row-selected td[b-c2qa9wn20f] {
    background: var(--bcl-blue-50);
}

.bcl-table tbody tr.rpt-row-selected:hover td[b-c2qa9wn20f] {
    background: #e9f1ff;
}

.bcl-table tbody tr.rpt-row-selected td:first-child[b-c2qa9wn20f]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-blue-700);
}

.rpt-heading-actions[b-c2qa9wn20f] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.rpt-heading-actions .bcl-primary-btn:disabled[b-c2qa9wn20f] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
    transform: none;
}

.bcl-empty[b-c2qa9wn20f] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    flex-direction: column;
    padding: 32px 20px;
    text-align: center;
}

.bcl-empty-icon[b-c2qa9wn20f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 50%;
    color: var(--bcl-blue-600);
    background: var(--bcl-blue-50);
    font-size: 28px;
}

.bcl-empty h3[b-c2qa9wn20f] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 17px;
    font-weight: 800;
}

.bcl-empty p[b-c2qa9wn20f] {
    margin: 5px 0 14px;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
}

.bcl-empty-reset[b-c2qa9wn20f] {
    min-height: 34px;
    border: 1px solid var(--bcl-blue-100);
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
}

.bcl-empty-reset:hover[b-c2qa9wn20f] {
    border-color: var(--bcl-blue-600);
    background: #e6f0ff;
}

.bcl-table-footer[b-c2qa9wn20f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px 0;
    color: var(--bcl-slate-600);
    font-size: 13px;
    font-weight: 600;
}

.bcl-table-footer strong[b-c2qa9wn20f] {
    color: var(--bcl-navy-900);
    font-weight: 800;
}

.bcl-footer-note[b-c2qa9wn20f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcl-footer-note i[b-c2qa9wn20f] {
    color: var(--bcl-blue-600);
}

@media (max-width: 1399px) {
    .bcl-filter-grid[b-c2qa9wn20f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1140px) {
    .bcl-kpis[b-c2qa9wn20f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcl-kpi[b-c2qa9wn20f] {
        min-height: 154px;
    }
}

@media (max-width: 768px) {
    .bcl-page[b-c2qa9wn20f] {
        margin: -18px -14px;
        padding: 18px 14px 30px;
    }

    .bcl-hero[b-c2qa9wn20f] {
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .bcl-hero-icon[b-c2qa9wn20f] {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 13px;
        font-size: 24px;
    }

    .bcl-hero-meta[b-c2qa9wn20f] {
        display: none;
    }

    .bcl-kpis[b-c2qa9wn20f] {
        gap: 10px;
    }

    .bcl-card-header[b-c2qa9wn20f],
    .bcl-table-heading[b-c2qa9wn20f],
    .bcl-table-footer[b-c2qa9wn20f] {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcl-result-summary[b-c2qa9wn20f],
    .bcl-table-count[b-c2qa9wn20f] {
        align-self: flex-start;
    }

    .rpt-heading-actions[b-c2qa9wn20f] {
        width: 100%;
        justify-content: space-between;
    }

    .bcl-filter-grid[b-c2qa9wn20f] {
        grid-template-columns: 1fr;
    }

    .bcl-filter-actions[b-c2qa9wn20f] {
        justify-content: stretch;
    }

    .bcl-primary-btn[b-c2qa9wn20f],
    .bcl-secondary-btn[b-c2qa9wn20f] {
        flex: 1;
    }

    .bcl-table-section[b-c2qa9wn20f] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .bcl-card-header[b-c2qa9wn20f],
    .bcl-filter-panel[b-c2qa9wn20f] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .bcl-footer-note[b-c2qa9wn20f] {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .bcl-page[b-c2qa9wn20f] {
        margin: -14px -10px;
        padding: 14px 10px 26px;
    }

    .bcl-hero[b-c2qa9wn20f] {
        margin-bottom: 14px;
        padding: 17px 15px;
        border-radius: 12px;
    }

    .bcl-hero-main[b-c2qa9wn20f] {
        align-items: flex-start;
        gap: 11px;
    }

    .bcl-hero-icon[b-c2qa9wn20f] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 21px;
    }

    .bcl-kicker[b-c2qa9wn20f] {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .bcl-hero h1[b-c2qa9wn20f] {
        font-size: 22px;
    }

    .bcl-hero p[b-c2qa9wn20f] {
        font-size: 13.5px;
    }

    .bcl-kpis[b-c2qa9wn20f] {
        grid-template-columns: 1fr;
        margin-bottom: 14px;
    }

    .bcl-kpi[b-c2qa9wn20f] {
        min-height: 142px;
    }

    .bcl-card[b-c2qa9wn20f] {
        border-radius: 12px;
    }

    .bcl-card-header[b-c2qa9wn20f] {
        gap: 12px;
        padding: 15px;
    }

    .bcl-section-icon[b-c2qa9wn20f] {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .bcl-card-heading h2[b-c2qa9wn20f],
    .bcl-table-heading h2[b-c2qa9wn20f] {
        font-size: 17px;
    }

    .bcl-filter-panel[b-c2qa9wn20f] {
        padding: 15px;
    }

    .bcl-filter-actions[b-c2qa9wn20f] {
        flex-direction: column;
    }

    .bcl-primary-btn[b-c2qa9wn20f],
    .bcl-secondary-btn[b-c2qa9wn20f] {
        width: 100%;
    }

    .bcl-table-section[b-c2qa9wn20f] {
        padding: 0 10px 14px;
    }

    .bcl-table-heading[b-c2qa9wn20f] {
        padding: 15px 2px 12px;
    }

    .bcl-table-footer[b-c2qa9wn20f] {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcl-page *[b-c2qa9wn20f],
    .bcl-page *[b-c2qa9wn20f]::before,
    .bcl-page *[b-c2qa9wn20f]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Printable ใบฝากส่งไปรษณีย์ (EMS) document - deliberately plain/paper-styled,
   not the bcl-* dashboard look, since this is what actually gets printed. */
.ems-doc[b-c2qa9wn20f] {
    max-width: 820px;
    margin: 0 auto 20px;
    padding: 28px 32px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #111827;
    font-size: 15px;
    box-shadow: 0 8px 28px rgba(11, 43, 99, .08);
}

.ems-doc-header[b-c2qa9wn20f] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #cbd5e1;
}

.ems-doc-header-row[b-c2qa9wn20f] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ems-doc-header-row span[b-c2qa9wn20f] {
    flex: 0 0 110px;
    color: #374151;
    font-weight: 700;
}

.ems-doc-header-row input[b-c2qa9wn20f] {
    flex: 1;
    border: 0;
    border-bottom: 1px dotted #9ca3af;
    padding: 3px 2px;
    background: transparent;
    font: inherit;
}

.ems-doc-header-row input:disabled[b-c2qa9wn20f] {
    opacity: 1;
    color: #111827;
    -webkit-text-fill-color: #111827;
}

.ems-doc-table[b-c2qa9wn20f] {
    width: 100%;
    margin-bottom: 14px;
    border-collapse: collapse;
}

.ems-doc-table th[b-c2qa9wn20f],
.ems-doc-table td[b-c2qa9wn20f] {
    border: 1px solid #9ca3af;
    padding: 8px 10px;
    font-size: 14.5px;
    text-align: left;
}

.ems-doc-table th[b-c2qa9wn20f] {
    background: #f1f5f9;
    font-weight: 700;
}

.ems-doc-table input[b-c2qa9wn20f] {
    width: 100%;
    padding: 2px;
    border: 0;
    background: transparent;
    font: inherit;
}

.ems-doc-table input:disabled[b-c2qa9wn20f] {
    opacity: 1;
    color: #111827;
    -webkit-text-fill-color: #111827;
}

.ems-doc-total[b-c2qa9wn20f] {
    margin-bottom: 22px;
    font-weight: 700;
    text-align: right;
}

.ems-doc-signatures[b-c2qa9wn20f] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 30px;
}

.ems-doc-sign[b-c2qa9wn20f] {
    text-align: center;
}

.ems-doc-sign-line[b-c2qa9wn20f] {
    margin-bottom: 6px;
}

.ems-doc-sign-label[b-c2qa9wn20f] {
    color: #4b5563;
    font-size: 13.5px;
}

/* On-screen heading above each of the 3 printable forms - not part of the
   physical document, so it never prints (see .ems-noprint below). */
.ems-doc-caption[b-c2qa9wn20f] {
    margin: 0 auto 10px;
    max-width: 820px;
    color: var(--bcl-navy-900);
    font-size: 16px;
    font-weight: 800;
}

/* แบบที่ 2-3: ป้ายชื่อ-ที่อยู่ผู้ฝากส่ง/ผู้รับ - a single sticker label, so it's
   narrower than the A4 dispatch slip above it. */
.ems-doc.ems-label[b-c2qa9wn20f] {
    max-width: 560px;
}

.ems-label-title[b-c2qa9wn20f] {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #cbd5e1;
    font-weight: 700;
}

.ems-label-textarea[b-c2qa9wn20f] {
    width: 100%;
    padding: 8px;
    border: 1px dashed #9ca3af;
    border-radius: 4px;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 14.5px;
    line-height: 1.6;
    resize: vertical;
}

/* Plain-text mirror of the address textarea, shown only when printing (see
   @media print below) - textareas print inconsistently across browsers
   (fixed scroll box vs. auto-fit), which was crowding the reference line
   right underneath it. A plain block div always follows normal text flow. */
.ems-print-only[b-c2qa9wn20f] {
    display: none;
}

.ems-label-ref[b-c2qa9wn20f] {
    clear: both;
    margin-top: 18px;
    color: #374151;
    font-size: 13.5px;
}

.ems-label-footnote[b-c2qa9wn20f] {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
    color: #4b5563;
    font-size: 13px;
}

@media print {
    .ems-noprint[b-c2qa9wn20f] {
        display: none !important;
    }

    /* Set by PrintOnly()/PrintHideClass() in the code-behind so window.print()
       only outputs the one form (dispatch slip / sender label / addressee
       label) the officer just clicked "บันทึกและพิมพ์"/"พิมพ์อีกครั้ง" on. */
    .ems-print-hide[b-c2qa9wn20f] {
        display: none !important;
    }

    .ems-doc[b-c2qa9wn20f] {
        max-width: 100%;
        border: 0;
        box-shadow: none;
    }

    /* The address textarea is edit-only chrome (hidden via .ems-noprint above) -
       .ems-print-only takes its place on paper as plain, predictably-flowing text. */
    .ems-print-only[b-c2qa9wn20f] {
        display: block;
        margin-top: 8px;
        padding: 0;
        white-space: pre-line;
        color: #111827;
        font-size: 14.5px;
        line-height: 1.6;
    }

    .bcl-page[b-c2qa9wn20f] {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
}
/* /Pages/PersonScreen/DisciplinaryEscalationListPage.razor.rz.scp.css */
.bcl-page[b-w0sqrcbtvb] {
    --bcl-navy-950: #071a3d;
    --bcl-navy-900: #0b2b63;
    --bcl-navy-800: #123d7a;
    --bcl-blue-700: #1e56a6;
    --bcl-blue-600: #2d6bc2;
    --bcl-blue-100: #dceafe;
    --bcl-blue-50: #f1f6ff;
    --bcl-gold-500: #d2aa43;
    --bcl-gold-100: #fff0c2;
    --bcl-slate-900: #172033;
    --bcl-slate-700: #42526d;
    --bcl-slate-600: #60708c;
    --bcl-slate-500: #7e8da7;
    --bcl-slate-300: #cbd7e7;
    --bcl-slate-200: #dfe7f2;
    --bcl-slate-100: #edf2f8;
    --bcl-slate-50: #f7f9fc;
    --bcl-green-700: #087a58;
    --bcl-green-500: #18a878;
    --bcl-green-100: #d9f7eb;
    --bcl-amber-700: #a85b05;
    --bcl-amber-500: #e39218;
    --bcl-amber-100: #fff0d2;
    --bcl-red-700: #b42333;
    --bcl-red-100: #ffe3e8;
    --bcl-white: #ffffff;
    margin: -24px;
    min-height: calc(100vh - var(--header-h, 70px));
    padding: 28px 24px 40px;
    color: var(--bcl-slate-900);
    background:
        radial-gradient(circle at 0 0, rgba(45, 107, 194, .11), transparent 28rem),
        linear-gradient(180deg, #edf3fb 0, #f6f8fc 22rem, #f7f9fc 100%);
    font-family: var(--bs-body-font-family, "Sarabun", sans-serif);
    font-size: 16px;
}

.bcl-page[b-w0sqrcbtvb],
.bcl-page *[b-w0sqrcbtvb] {
    box-sizing: border-box;
}

.bcl-page > section[b-w0sqrcbtvb] {
    width: min(100%, 1680px);
    margin-right: auto;
    margin-left: auto;
}

/* Header */
.bcl-hero[b-w0sqrcbtvb] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    min-height: 136px;
    margin-bottom: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    color: var(--bcl-white);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .04), transparent 45%),
        linear-gradient(135deg, var(--bcl-navy-950), var(--bcl-navy-800));
    box-shadow: 0 14px 34px rgba(7, 26, 61, .18);
}

.bcl-hero[b-w0sqrcbtvb]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    border: 74px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.bcl-hero[b-w0sqrcbtvb]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 24%;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(210, 170, 67, .2);
    border-radius: 50%;
}

.bcl-hero-main[b-w0sqrcbtvb] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.bcl-hero-icon[b-w0sqrcbtvb] {
    display: inline-flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    color: var(--bcl-gold-100);
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: 30px;
}

.bcl-hero-copy[b-w0sqrcbtvb] {
    min-width: 0;
}

.bcl-kicker[b-w0sqrcbtvb] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #f4d67c;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
}

.bcl-kicker i[b-w0sqrcbtvb] {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

.bcl-hero h1[b-w0sqrcbtvb] {
    margin: 0;
    color: var(--bcl-white);
    font-size: clamp(26px, 2vw, 33px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.25px;
}

.bcl-hero p[b-w0sqrcbtvb] {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.55;
}

.bcl-hero-meta[b-w0sqrcbtvb] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.bcl-source-pill[b-w0sqrcbtvb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-source-pill i[b-w0sqrcbtvb] {
    color: #7fe3be;
}

.bcl-screen-code[b-w0sqrcbtvb] {
    color: rgba(255, 255, 255, .52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* KPI cards - ALL + one tile per work status (01-05) = 6 tiles */
.bcl-kpis[b-w0sqrcbtvb] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bcl-kpi[b-w0sqrcbtvb] {
    --bcl-tone: var(--bcl-blue-600);
    --bcl-tone-soft: var(--bcl-blue-50);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 164px;
    overflow: hidden;
    padding: 17px 18px 14px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 14px;
    color: inherit;
    background: var(--bcl-white);
    box-shadow: 0 5px 18px rgba(11, 43, 99, .065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.bcl-kpi.tone-pending[b-w0sqrcbtvb] {
    --bcl-tone: var(--bcl-amber-500);
    --bcl-tone-soft: #fff8e9;
}

.bcl-kpi.tone-ready[b-w0sqrcbtvb] {
    --bcl-tone: var(--bcl-green-500);
    --bcl-tone-soft: #eefbf6;
}

.bcl-kpi.tone-draft[b-w0sqrcbtvb] {
    --bcl-tone: #7c3aed;
    --bcl-tone-soft: #f5f3ff;
}

.bcl-kpi.tone-selected[b-w0sqrcbtvb] {
    --bcl-tone: var(--bcl-navy-900);
    --bcl-tone-soft: var(--bcl-blue-50);
}

.bcl-kpi.tone-danger[b-w0sqrcbtvb] {
    --bcl-tone: var(--bcl-red-700);
    --bcl-tone-soft: var(--bcl-red-100);
}

.bcl-kpi-accent[b-w0sqrcbtvb] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bcl-tone);
}

.bcl-kpi[b-w0sqrcbtvb]::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -60px;
    width: 130px;
    height: 130px;
    border: 24px solid var(--bcl-tone-soft);
    border-radius: 50%;
    pointer-events: none;
}

.bcl-kpi:hover[b-w0sqrcbtvb] {
    z-index: 1;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bcl-tone) 45%, var(--bcl-slate-200));
    box-shadow: 0 11px 26px rgba(11, 43, 99, .12);
}

.bcl-kpi:focus-visible[b-w0sqrcbtvb] {
    outline: 3px solid color-mix(in srgb, var(--bcl-tone) 28%, transparent);
    outline-offset: 2px;
}

.bcl-kpi.active[b-w0sqrcbtvb] {
    border-color: var(--bcl-tone);
    background: linear-gradient(145deg, var(--bcl-white), var(--bcl-tone-soft));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bcl-tone) 13%, transparent),
        0 9px 24px rgba(11, 43, 99, .11);
}

.bcl-kpi-top[b-w0sqrcbtvb] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bcl-kpi-icon[b-w0sqrcbtvb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--bcl-tone);
    background: var(--bcl-tone-soft);
    font-size: 20px;
}

.bcl-kpi-code[b-w0sqrcbtvb] {
    overflow: hidden;
    color: var(--bcl-slate-500);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-kpi-title[b-w0sqrcbtvb] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: var(--bcl-slate-700);
    font-size: 15px;
    font-weight: 700;
}

.bcl-kpi-value[b-w0sqrcbtvb] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 1px;
}

.bcl-kpi-value strong[b-w0sqrcbtvb] {
    color: var(--bcl-navy-900);
    font-size: 32px;
    font-weight: 850;
    line-height: 1.15;
}

.bcl-kpi-value span[b-w0sqrcbtvb] {
    color: var(--bcl-slate-500);
    font-size: 13.5px;
    font-weight: 600;
}

.bcl-kpi-action[b-w0sqrcbtvb] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--bcl-slate-100);
    color: var(--bcl-tone);
    font-size: 12.5px;
    font-weight: 750;
}

.bcl-kpi-action i[b-w0sqrcbtvb] {
    transition: transform .18s ease;
}

.bcl-kpi:hover .bcl-kpi-action i[b-w0sqrcbtvb] {
    transform: translateX(3px);
}

/* Main card and filter */
.bcl-card[b-w0sqrcbtvb] {
    overflow: hidden;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 8px 28px rgba(11, 43, 99, .075);
}

.bcl-card-header[b-w0sqrcbtvb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.bcl-card-heading[b-w0sqrcbtvb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bcl-section-icon[b-w0sqrcbtvb] {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
    font-size: 19px;
}

.bcl-card-heading h2[b-w0sqrcbtvb],
.bcl-table-heading h2[b-w0sqrcbtvb] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.bcl-card-heading p[b-w0sqrcbtvb],
.bcl-table-heading p[b-w0sqrcbtvb] {
    margin: 3px 0 0;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}

.bcl-result-summary[b-w0sqrcbtvb] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 9px;
    color: var(--bcl-slate-600);
    background: var(--bcl-blue-50);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.bcl-result-summary strong[b-w0sqrcbtvb] {
    color: var(--bcl-blue-700);
    font-size: 20px;
    font-weight: 850;
    line-height: 1;
}

.bcl-filter-panel[b-w0sqrcbtvb] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-slate-50);
}

.bcl-filter-grid[b-w0sqrcbtvb] {
    display: grid;
    grid-template-columns: minmax(250px, 1.45fr) minmax(230px, 1.2fr) minmax(180px, .8fr) minmax(180px, .8fr);
    gap: 13px;
}

.bcl-field[b-w0sqrcbtvb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bcl-field-label[b-w0sqrcbtvb] {
    color: var(--bcl-slate-700);
    font-size: 13.5px;
    font-weight: 750;
}

.bcl-input-shell[b-w0sqrcbtvb],
.bcl-select-shell[b-w0sqrcbtvb],
.bcl-date-shell[b-w0sqrcbtvb] {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--bcl-slate-300);
    border-radius: 9px;
    background: var(--bcl-white);
    box-shadow: 0 1px 2px rgba(11, 43, 99, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-input-shell:focus-within[b-w0sqrcbtvb],
.bcl-select-shell:focus-within[b-w0sqrcbtvb],
.bcl-date-shell:focus-within[b-w0sqrcbtvb] {
    border-color: var(--bcl-blue-600);
    background: var(--bcl-white);
    box-shadow: 0 0 0 3px rgba(45, 107, 194, .12);
}

.bcl-input-shell > i:first-child[b-w0sqrcbtvb],
.bcl-select-shell > i:first-child[b-w0sqrcbtvb],
.bcl-date-shell > i:first-child[b-w0sqrcbtvb] {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    color: var(--bcl-slate-500);
    font-size: 16px;
}

.bcl-input-shell input[b-w0sqrcbtvb],
.bcl-select-shell select[b-w0sqrcbtvb],
.bcl-date-shell input[b-w0sqrcbtvb] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    color: var(--bcl-slate-900);
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
}

.bcl-input-shell input[b-w0sqrcbtvb]::placeholder {
    color: #9aa8bc;
    font-weight: 500;
}

.bcl-select-shell select[b-w0sqrcbtvb] {
    padding-right: 32px;
    appearance: none;
    cursor: pointer;
}

.bcl-select-arrow[b-w0sqrcbtvb] {
    position: absolute;
    right: 11px;
    color: var(--bcl-slate-500);
    font-size: 12px;
    pointer-events: none;
}

.bcl-date-shell input[b-w0sqrcbtvb] {
    padding-right: 10px;
    cursor: pointer;
}

.bcl-filter-actions[b-w0sqrcbtvb] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.bcl-primary-btn[b-w0sqrcbtvb],
.bcl-secondary-btn[b-w0sqrcbtvb],
.bcl-empty-reset[b-w0sqrcbtvb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-primary-btn[b-w0sqrcbtvb] {
    border: 1px solid var(--bcl-navy-900);
    color: var(--bcl-white);
    background: linear-gradient(135deg, var(--bcl-navy-900), var(--bcl-blue-700));
    box-shadow: 0 4px 10px rgba(11, 43, 99, .17);
}

.bcl-primary-btn:hover[b-w0sqrcbtvb] {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(11, 43, 99, .22);
}

.bcl-secondary-btn[b-w0sqrcbtvb] {
    border: 1px solid var(--bcl-slate-300);
    color: var(--bcl-slate-700);
    background: var(--bcl-white);
}

.bcl-secondary-btn:hover[b-w0sqrcbtvb] {
    border-color: #aebdd1;
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

/* Distinct tone for the "จัดการ" action on rows waiting for a ต้นสังกัด reply
   (work status 03) - same label as the other rows' buttons, but the color/icon
   pull the eye to "this one needs you to key something in". */
.bcl-warning-btn[b-w0sqrcbtvb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid var(--bcl-amber-500);
    border-radius: 8px;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-warning-btn:hover[b-w0sqrcbtvb] {
    transform: translateY(-1px);
    border-color: var(--bcl-amber-700);
    background: #ffe6ac;
    box-shadow: 0 6px 14px rgba(212, 149, 12, .22);
}

/* "สถานะ EMS" - styled after Thailand Post's own red/cream livery so it reads
   as "this opens a courier tracking view", not just another generic action. */
.bcl-post-btn[b-w0sqrcbtvb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid #a10f18;
    border-radius: 8px;
    color: #fff8ec;
    background: linear-gradient(135deg, #ed1c24, #a10f18);
    box-shadow: 0 4px 10px rgba(161, 15, 24, .28);
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-post-btn i[b-w0sqrcbtvb] {
    color: #ffd25c;
}

.bcl-post-btn:hover[b-w0sqrcbtvb] {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #ff3b32, #c21420);
    box-shadow: 0 7px 16px rgba(161, 15, 24, .35);
}

.bcl-primary-btn:focus-visible[b-w0sqrcbtvb],
.bcl-secondary-btn:focus-visible[b-w0sqrcbtvb],
.bcl-empty-reset:focus-visible[b-w0sqrcbtvb],
.rpt-link:focus-visible[b-w0sqrcbtvb] {
    outline: 3px solid rgba(45, 107, 194, .2);
    outline-offset: 2px;
}

/* Table */
.bcl-table-section[b-w0sqrcbtvb] {
    padding: 0 22px 18px;
}

.bcl-table-heading[b-w0sqrcbtvb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
}

.bcl-table-count[b-w0sqrcbtvb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-table-count i[b-w0sqrcbtvb] {
    color: var(--bcl-blue-700);
}

.bcl-table-wrap[b-w0sqrcbtvb] {
    overflow: auto;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 11px;
    background: var(--bcl-white);
    scrollbar-color: #bdcadd transparent;
    scrollbar-width: thin;
}

.bcl-table[b-w0sqrcbtvb] {
    width: 100%;
    min-width: 1150px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--bcl-slate-900);
    font-size: 14.5px;
}

.rpt-col-check[b-w0sqrcbtvb] {
    width: 46px;
}

.rpt-col-case[b-w0sqrcbtvb] {
    width: 190px;
}

.rpt-col-unit[b-w0sqrcbtvb] {
    width: 190px;
}

.rpt-col-result[b-w0sqrcbtvb] {
    width: 150px;
}

.rpt-col-date[b-w0sqrcbtvb] {
    width: 150px;
}

.rpt-col-report[b-w0sqrcbtvb] {
    width: 210px;
}

.rpt-col-source[b-w0sqrcbtvb] {
    width: 190px;
}

.bcl-table th[b-w0sqrcbtvb] {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 12px 13px;
    border-bottom: 1px solid #cbd7e7;
    color: var(--bcl-navy-900);
    background: linear-gradient(180deg, #edf3fb, #e7eff9);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.bcl-table th:not(:last-child)[b-w0sqrcbtvb] {
    border-right: 1px solid rgba(203, 215, 231, .68);
}

.bcl-table th i[b-w0sqrcbtvb] {
    margin-right: 5px;
    color: var(--bcl-blue-600);
    font-size: 14px;
}

.bcl-table td[b-w0sqrcbtvb] {
    position: relative;
    height: 76px;
    padding: 13px;
    border-bottom: 1px solid var(--bcl-slate-200);
    color: var(--bcl-slate-700);
    font-weight: 550;
    line-height: 1.45;
    vertical-align: middle;
    background: var(--bcl-white);
}

.bcl-table tbody tr:last-child td[b-w0sqrcbtvb] {
    border-bottom: 0;
}

.bcl-table tbody tr:hover td[b-w0sqrcbtvb] {
    background: #f8fbff;
}

.bcl-table tbody tr.bcl-row-attention td:first-child[b-w0sqrcbtvb]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-amber-500);
}

.bcl-cell-center[b-w0sqrcbtvb] {
    text-align: center !important;
}

.bcl-batch-cell[b-w0sqrcbtvb],
.bcl-date-cell[b-w0sqrcbtvb] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bcl-batch-cell > span:last-child[b-w0sqrcbtvb],
.bcl-date-cell > span:last-child[b-w0sqrcbtvb] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.bcl-batch-cell strong[b-w0sqrcbtvb] {
    overflow: hidden;
    color: var(--bcl-blue-700);
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-batch-cell small[b-w0sqrcbtvb],
.bcl-date-cell small[b-w0sqrcbtvb] {
    color: var(--bcl-slate-500);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bcl-date-cell strong[b-w0sqrcbtvb] {
    color: var(--bcl-slate-900);
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
}

.bcl-reference-cell[b-w0sqrcbtvb] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bcl-navy-900);
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.bcl-data-badge[b-w0sqrcbtvb],
.bcl-status[b-w0sqrcbtvb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.bcl-data-badge.is-complete[b-w0sqrcbtvb] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-data-badge.is-incomplete[b-w0sqrcbtvb] {
    border-color: #ffd0d8;
    color: var(--bcl-red-700);
    background: var(--bcl-red-100);
}

.bcl-status[b-w0sqrcbtvb] {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 8px;
    white-space: normal;
}

.bcl-status strong[b-w0sqrcbtvb] {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 13px;
}

.bcl-status span[b-w0sqrcbtvb] {
    text-align: left;
    line-height: 1.4;
}

.bcl-status i[b-w0sqrcbtvb] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

/*
   Status color map (19 codes):
   - 01 pending           : amber  — งานยังไม่เริ่ม
   - 02-03 circular review: blue family (เข้ม-อ่อนตามลำดับผู้อนุมัติ) — ตรวจ/อนุมัติบันทึกแจ้งเวียน
   - 04 dispatched        : teal   — ส่งหน่วยงานแล้ว รอหน่วยงานตอบกลับ
   - 05 agency-done       : cyan   — หน่วยงานตอบครบ รอจัดทำรายงาน (คั่นกลางก่อนเข้าสายรายงาน)
   - 06-10 report review  : indigo -> violet -> purple -> fuchsia -> rose ไล่เฉดตามลำดับชั้นผู้อนุมัติรายงาน
   - 11 success / 12 closed: green family (12 เข้มกว่า 11 = ปิดงานสมบูรณ์)
   - 13-19 returned       : red กลุ่มเดียวกันทั้งหมด (ตีกลับทุกขั้นตอนใช้สีเดียวกันเพื่อสื่อว่าเป็นสถานะเดียวกันคือ "ตีกลับ")
*/
.bcl-status.is-pending[b-w0sqrcbtvb] {
    border-color: #f4d69f;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
}

.bcl-status.is-review-div1[b-w0sqrcbtvb] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.bcl-status.is-review-bureau1[b-w0sqrcbtvb] {
    border-color: #93c5fd;
    color: #1e40af;
    background: #dbeafe;
}

.bcl-status.is-dispatched[b-w0sqrcbtvb] {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

.bcl-status.is-agency-done[b-w0sqrcbtvb] {
    border-color: #a5f3fc;
    color: #0e7490;
    background: #ecfeff;
}

.bcl-status.is-review-div2[b-w0sqrcbtvb] {
    border-color: #c7d2fe;
    color: #4338ca;
    background: #eef2ff;
}

.bcl-status.is-review-bureau2[b-w0sqrcbtvb] {
    border-color: #ddd6fe;
    color: #6d28d9;
    background: #f5f3ff;
}

.bcl-status.is-review-secgen[b-w0sqrcbtvb] {
    border-color: #e9d5ff;
    color: #7e22ce;
    background: #faf5ff;
}

.bcl-status.is-review-board[b-w0sqrcbtvb] {
    border-color: #f5d0fe;
    color: #a21caf;
    background: #fdf4ff;
}

.bcl-status.is-review-ack[b-w0sqrcbtvb] {
    border-color: #fbcfe8;
    color: #be185d;
    background: #fdf2f8;
}

.bcl-status.is-ready[b-w0sqrcbtvb] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-status.is-closed[b-w0sqrcbtvb] {
    border-color: #6ee7b7;
    color: #065f46;
    background: #d1fae5;
}

.bcl-status.is-issued[b-w0sqrcbtvb] {
    border-color: #c9dcfb;
    color: #2259a9;
    background: #e8f1ff;
}

.bcl-status.is-returned[b-w0sqrcbtvb] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.rpt-link[b-w0sqrcbtvb] {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rpt-link:hover strong[b-w0sqrcbtvb] {
    text-decoration: underline;
}

.rpt-checkbox[b-w0sqrcbtvb] {
    width: 17px;
    height: 17px;
    accent-color: var(--bcl-navy-900);
    cursor: pointer;
}

.bcl-table tbody tr.rpt-row-selected td[b-w0sqrcbtvb] {
    background: var(--bcl-blue-50);
}

.bcl-table tbody tr.rpt-row-selected:hover td[b-w0sqrcbtvb] {
    background: #e9f1ff;
}

.bcl-table tbody tr.rpt-row-selected td:first-child[b-w0sqrcbtvb]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-blue-700);
}

.rpt-heading-actions[b-w0sqrcbtvb] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.rpt-heading-actions .bcl-primary-btn:disabled[b-w0sqrcbtvb] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
    transform: none;
}

.bcl-empty[b-w0sqrcbtvb] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    flex-direction: column;
    padding: 32px 20px;
    text-align: center;
}

.bcl-empty-icon[b-w0sqrcbtvb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 50%;
    color: var(--bcl-blue-600);
    background: var(--bcl-blue-50);
    font-size: 28px;
}

.bcl-empty h3[b-w0sqrcbtvb] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 17px;
    font-weight: 800;
}

.bcl-empty p[b-w0sqrcbtvb] {
    margin: 5px 0 14px;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
}

.bcl-empty-reset[b-w0sqrcbtvb] {
    min-height: 34px;
    border: 1px solid var(--bcl-blue-100);
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
}

.bcl-empty-reset:hover[b-w0sqrcbtvb] {
    border-color: var(--bcl-blue-600);
    background: #e6f0ff;
}

.bcl-table-footer[b-w0sqrcbtvb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px 0;
    color: var(--bcl-slate-600);
    font-size: 13px;
    font-weight: 600;
}

.bcl-table-footer strong[b-w0sqrcbtvb] {
    color: var(--bcl-navy-900);
    font-weight: 800;
}

.bcl-footer-note[b-w0sqrcbtvb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcl-footer-note i[b-w0sqrcbtvb] {
    color: var(--bcl-blue-600);
}

@media (max-width: 1399px) {
    .bcl-filter-grid[b-w0sqrcbtvb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1140px) {
    .bcl-kpis[b-w0sqrcbtvb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcl-kpi[b-w0sqrcbtvb] {
        min-height: 154px;
    }
}

@media (max-width: 768px) {
    .bcl-page[b-w0sqrcbtvb] {
        margin: -18px -14px;
        padding: 18px 14px 30px;
    }

    .bcl-hero[b-w0sqrcbtvb] {
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .bcl-hero-icon[b-w0sqrcbtvb] {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 13px;
        font-size: 24px;
    }

    .bcl-hero-meta[b-w0sqrcbtvb] {
        display: none;
    }

    .bcl-kpis[b-w0sqrcbtvb] {
        gap: 10px;
    }

    .bcl-card-header[b-w0sqrcbtvb],
    .bcl-table-heading[b-w0sqrcbtvb],
    .bcl-table-footer[b-w0sqrcbtvb] {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcl-result-summary[b-w0sqrcbtvb],
    .bcl-table-count[b-w0sqrcbtvb] {
        align-self: flex-start;
    }

    .rpt-heading-actions[b-w0sqrcbtvb] {
        width: 100%;
        justify-content: space-between;
    }

    .bcl-filter-grid[b-w0sqrcbtvb] {
        grid-template-columns: 1fr;
    }

    .bcl-filter-actions[b-w0sqrcbtvb] {
        justify-content: stretch;
    }

    .bcl-primary-btn[b-w0sqrcbtvb],
    .bcl-secondary-btn[b-w0sqrcbtvb] {
        flex: 1;
    }

    .bcl-table-section[b-w0sqrcbtvb] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .bcl-card-header[b-w0sqrcbtvb],
    .bcl-filter-panel[b-w0sqrcbtvb] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .bcl-footer-note[b-w0sqrcbtvb] {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .bcl-page[b-w0sqrcbtvb] {
        margin: -14px -10px;
        padding: 14px 10px 26px;
    }

    .bcl-hero[b-w0sqrcbtvb] {
        margin-bottom: 14px;
        padding: 17px 15px;
        border-radius: 12px;
    }

    .bcl-hero-main[b-w0sqrcbtvb] {
        align-items: flex-start;
        gap: 11px;
    }

    .bcl-hero-icon[b-w0sqrcbtvb] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 21px;
    }

    .bcl-kicker[b-w0sqrcbtvb] {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .bcl-hero h1[b-w0sqrcbtvb] {
        font-size: 22px;
    }

    .bcl-hero p[b-w0sqrcbtvb] {
        font-size: 13.5px;
    }

    .bcl-kpis[b-w0sqrcbtvb] {
        grid-template-columns: 1fr;
        margin-bottom: 14px;
    }

    .bcl-kpi[b-w0sqrcbtvb] {
        min-height: 142px;
    }

    .bcl-card[b-w0sqrcbtvb] {
        border-radius: 12px;
    }

    .bcl-card-header[b-w0sqrcbtvb] {
        gap: 12px;
        padding: 15px;
    }

    .bcl-section-icon[b-w0sqrcbtvb] {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .bcl-card-heading h2[b-w0sqrcbtvb],
    .bcl-table-heading h2[b-w0sqrcbtvb] {
        font-size: 17px;
    }

    .bcl-filter-panel[b-w0sqrcbtvb] {
        padding: 15px;
    }

    .bcl-filter-actions[b-w0sqrcbtvb] {
        flex-direction: column;
    }

    .bcl-primary-btn[b-w0sqrcbtvb],
    .bcl-secondary-btn[b-w0sqrcbtvb] {
        width: 100%;
    }

    .bcl-table-section[b-w0sqrcbtvb] {
        padding: 0 10px 14px;
    }

    .bcl-table-heading[b-w0sqrcbtvb] {
        padding: 15px 2px 12px;
    }

    .bcl-table-footer[b-w0sqrcbtvb] {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcl-page *[b-w0sqrcbtvb],
    .bcl-page *[b-w0sqrcbtvb]::before,
    .bcl-page *[b-w0sqrcbtvb]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* สถานะ EMS popup - reverse-chronological timeline (newest/current step on top,
   matching Thailand Post's own Track & Trace layout), current step highlighted,
   not-yet-reached steps greyed out. */
.ems-timeline-backdrop[b-w0sqrcbtvb] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(7, 26, 61, .55);
    backdrop-filter: blur(2px);
}

.ems-timeline-panel[b-w0sqrcbtvb] {
    width: min(100%, 520px);
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 24px 60px rgba(7, 26, 61, .35);
}

.ems-timeline-header[b-w0sqrcbtvb] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-white);
}

.ems-timeline-header h2[b-w0sqrcbtvb] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 17.5px;
    font-weight: 800;
}

.ems-timeline-header p[b-w0sqrcbtvb] {
    margin: 4px 0 0;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
    font-weight: 600;
}

.ems-timeline-close[b-w0sqrcbtvb] {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    cursor: pointer;
}

.ems-timeline-close:hover[b-w0sqrcbtvb] {
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

.ems-timeline-summary[b-w0sqrcbtvb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 22px 4px;
}

.ems-timeline-summary-note[b-w0sqrcbtvb] {
    color: var(--bcl-slate-500);
    font-size: 12.5px;
    line-height: 1.5;
}

.ems-timeline-list[b-w0sqrcbtvb] {
    position: relative;
    margin: 12px 22px 4px;
    padding-left: 22px;
    list-style: none;
}

.ems-timeline-list[b-w0sqrcbtvb]::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 5px;
    width: 2px;
    background: var(--bcl-slate-200);
}

.ems-timeline-item[b-w0sqrcbtvb] {
    position: relative;
    padding-bottom: 20px;
}

.ems-timeline-item:last-child[b-w0sqrcbtvb] {
    padding-bottom: 4px;
}

.ems-timeline-dot[b-w0sqrcbtvb] {
    position: absolute;
    top: 3px;
    left: -22px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--bcl-white);
    border-radius: 50%;
    background: var(--bcl-slate-300);
    box-shadow: 0 0 0 2px var(--bcl-slate-200);
}

.ems-timeline-item.is-reached .ems-timeline-dot[b-w0sqrcbtvb] {
    background: var(--bcl-green-500);
    box-shadow: 0 0 0 2px var(--bcl-green-100);
}

.ems-timeline-item.is-current .ems-timeline-dot[b-w0sqrcbtvb] {
    background: var(--bcl-blue-600);
    box-shadow: 0 0 0 4px var(--bcl-blue-100);
}

.ems-timeline-body strong[b-w0sqrcbtvb] {
    display: block;
    color: var(--bcl-navy-900);
    font-size: 14.5px;
    font-weight: 750;
}

.ems-timeline-item.is-pending .ems-timeline-body strong[b-w0sqrcbtvb] {
    color: var(--bcl-slate-500);
    font-weight: 650;
}

.ems-timeline-meta[b-w0sqrcbtvb] {
    display: block;
    margin-top: 2px;
    color: var(--bcl-slate-500);
    font-size: 13px;
}

.ems-timeline-footer[b-w0sqrcbtvb] {
    display: flex;
    justify-content: flex-end;
    padding: 14px 22px 20px;
}
/* /Pages/PersonScreen/DisciplinaryIntakeListPage.razor.rz.scp.css */
.bcl-page[b-mt9traa9w8] {
    --bcl-navy-950: #071a3d;
    --bcl-navy-900: #0b2b63;
    --bcl-navy-800: #123d7a;
    --bcl-blue-700: #1e56a6;
    --bcl-blue-600: #2d6bc2;
    --bcl-blue-100: #dceafe;
    --bcl-blue-50: #f1f6ff;
    --bcl-gold-500: #d2aa43;
    --bcl-gold-100: #fff0c2;
    --bcl-slate-900: #172033;
    --bcl-slate-700: #42526d;
    --bcl-slate-600: #60708c;
    --bcl-slate-500: #7e8da7;
    --bcl-slate-300: #cbd7e7;
    --bcl-slate-200: #dfe7f2;
    --bcl-slate-100: #edf2f8;
    --bcl-slate-50: #f7f9fc;
    --bcl-green-700: #087a58;
    --bcl-green-500: #18a878;
    --bcl-green-100: #d9f7eb;
    --bcl-amber-700: #a85b05;
    --bcl-amber-500: #e39218;
    --bcl-amber-100: #fff0d2;
    --bcl-red-700: #b42333;
    --bcl-red-100: #ffe3e8;
    --bcl-white: #ffffff;
    margin: -24px;
    min-height: calc(100vh - var(--header-h, 70px));
    padding: 28px 24px 40px;
    color: var(--bcl-slate-900);
    background:
        radial-gradient(circle at 0 0, rgba(45, 107, 194, .11), transparent 28rem),
        linear-gradient(180deg, #edf3fb 0, #f6f8fc 22rem, #f7f9fc 100%);
    font-family: var(--bs-body-font-family, "Sarabun", sans-serif);
    font-size: 16px;
}

.bcl-page[b-mt9traa9w8],
.bcl-page *[b-mt9traa9w8] {
    box-sizing: border-box;
}

.bcl-page > section[b-mt9traa9w8] {
    width: min(100%, 1680px);
    margin-right: auto;
    margin-left: auto;
}

/* Header */
.bcl-hero[b-mt9traa9w8] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    min-height: 136px;
    margin-bottom: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    color: var(--bcl-white);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .04), transparent 45%),
        linear-gradient(135deg, var(--bcl-navy-950), var(--bcl-navy-800));
    box-shadow: 0 14px 34px rgba(7, 26, 61, .18);
}

.bcl-hero[b-mt9traa9w8]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    border: 74px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.bcl-hero[b-mt9traa9w8]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 24%;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(210, 170, 67, .2);
    border-radius: 50%;
}

.bcl-hero-main[b-mt9traa9w8] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.bcl-hero-icon[b-mt9traa9w8] {
    display: inline-flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    color: var(--bcl-gold-100);
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: 30px;
}

.bcl-hero-copy[b-mt9traa9w8] {
    min-width: 0;
}

.bcl-kicker[b-mt9traa9w8] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #f4d67c;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
}

.bcl-kicker i[b-mt9traa9w8] {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

.bcl-hero h1[b-mt9traa9w8] {
    margin: 0;
    color: var(--bcl-white);
    font-size: clamp(26px, 2vw, 33px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.25px;
}

.bcl-hero p[b-mt9traa9w8] {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.55;
}

.bcl-hero-meta[b-mt9traa9w8] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.bcl-source-pill[b-mt9traa9w8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-source-pill i[b-mt9traa9w8] {
    color: #7fe3be;
}

.bcl-screen-code[b-mt9traa9w8] {
    color: rgba(255, 255, 255, .52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* KPI cards - ALL + one tile per work status (01-05) + one grouped tile for the
   escalation-round family (06-15) = 7 tiles */
.bcl-kpis[b-mt9traa9w8] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bcl-kpi[b-mt9traa9w8] {
    --bcl-tone: var(--bcl-blue-600);
    --bcl-tone-soft: var(--bcl-blue-50);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 164px;
    overflow: hidden;
    padding: 17px 18px 14px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 14px;
    color: inherit;
    background: var(--bcl-white);
    box-shadow: 0 5px 18px rgba(11, 43, 99, .065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.bcl-kpi.tone-pending[b-mt9traa9w8] {
    --bcl-tone: var(--bcl-amber-500);
    --bcl-tone-soft: #fff8e9;
}

.bcl-kpi.tone-ready[b-mt9traa9w8] {
    --bcl-tone: var(--bcl-green-500);
    --bcl-tone-soft: #eefbf6;
}

.bcl-kpi.tone-draft[b-mt9traa9w8] {
    --bcl-tone: #7c3aed;
    --bcl-tone-soft: #f5f3ff;
}

.bcl-kpi.tone-selected[b-mt9traa9w8] {
    --bcl-tone: var(--bcl-navy-900);
    --bcl-tone-soft: var(--bcl-blue-50);
}

.bcl-kpi.tone-danger[b-mt9traa9w8] {
    --bcl-tone: var(--bcl-red-700);
    --bcl-tone-soft: var(--bcl-red-100);
}

.bcl-kpi-accent[b-mt9traa9w8] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bcl-tone);
}

.bcl-kpi[b-mt9traa9w8]::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -60px;
    width: 130px;
    height: 130px;
    border: 24px solid var(--bcl-tone-soft);
    border-radius: 50%;
    pointer-events: none;
}

.bcl-kpi:hover[b-mt9traa9w8] {
    z-index: 1;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bcl-tone) 45%, var(--bcl-slate-200));
    box-shadow: 0 11px 26px rgba(11, 43, 99, .12);
}

.bcl-kpi:focus-visible[b-mt9traa9w8] {
    outline: 3px solid color-mix(in srgb, var(--bcl-tone) 28%, transparent);
    outline-offset: 2px;
}

.bcl-kpi.active[b-mt9traa9w8] {
    border-color: var(--bcl-tone);
    background: linear-gradient(145deg, var(--bcl-white), var(--bcl-tone-soft));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bcl-tone) 13%, transparent),
        0 9px 24px rgba(11, 43, 99, .11);
}

.bcl-kpi-top[b-mt9traa9w8] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bcl-kpi-icon[b-mt9traa9w8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--bcl-tone);
    background: var(--bcl-tone-soft);
    font-size: 20px;
}

.bcl-kpi-code[b-mt9traa9w8] {
    overflow: hidden;
    color: var(--bcl-slate-500);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-kpi-title[b-mt9traa9w8] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: var(--bcl-slate-700);
    font-size: 15px;
    font-weight: 700;
}

.bcl-kpi-value[b-mt9traa9w8] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 1px;
}

.bcl-kpi-value strong[b-mt9traa9w8] {
    color: var(--bcl-navy-900);
    font-size: 32px;
    font-weight: 850;
    line-height: 1.15;
}

.bcl-kpi-value span[b-mt9traa9w8] {
    color: var(--bcl-slate-500);
    font-size: 13.5px;
    font-weight: 600;
}

.bcl-kpi-action[b-mt9traa9w8] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--bcl-slate-100);
    color: var(--bcl-tone);
    font-size: 12.5px;
    font-weight: 750;
}

.bcl-kpi-action i[b-mt9traa9w8] {
    transition: transform .18s ease;
}

.bcl-kpi:hover .bcl-kpi-action i[b-mt9traa9w8] {
    transform: translateX(3px);
}

/* Main card and filter */
.bcl-card[b-mt9traa9w8] {
    overflow: hidden;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 8px 28px rgba(11, 43, 99, .075);
}

.bcl-card-header[b-mt9traa9w8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.bcl-card-heading[b-mt9traa9w8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bcl-section-icon[b-mt9traa9w8] {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
    font-size: 19px;
}

.bcl-card-heading h2[b-mt9traa9w8],
.bcl-table-heading h2[b-mt9traa9w8] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.bcl-card-heading p[b-mt9traa9w8],
.bcl-table-heading p[b-mt9traa9w8] {
    margin: 3px 0 0;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}

.bcl-result-summary[b-mt9traa9w8] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 9px;
    color: var(--bcl-slate-600);
    background: var(--bcl-blue-50);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.bcl-result-summary strong[b-mt9traa9w8] {
    color: var(--bcl-blue-700);
    font-size: 20px;
    font-weight: 850;
    line-height: 1;
}

.bcl-filter-panel[b-mt9traa9w8] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-slate-50);
}

.bcl-filter-grid[b-mt9traa9w8] {
    display: grid;
    grid-template-columns: minmax(250px, 1.45fr) minmax(230px, 1.2fr) minmax(180px, .8fr) minmax(180px, .8fr);
    gap: 13px;
}

.bcl-field[b-mt9traa9w8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bcl-field-label[b-mt9traa9w8] {
    color: var(--bcl-slate-700);
    font-size: 13.5px;
    font-weight: 750;
}

.bcl-input-shell[b-mt9traa9w8],
.bcl-select-shell[b-mt9traa9w8],
.bcl-date-shell[b-mt9traa9w8] {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--bcl-slate-300);
    border-radius: 9px;
    background: var(--bcl-white);
    box-shadow: 0 1px 2px rgba(11, 43, 99, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-input-shell:focus-within[b-mt9traa9w8],
.bcl-select-shell:focus-within[b-mt9traa9w8],
.bcl-date-shell:focus-within[b-mt9traa9w8] {
    border-color: var(--bcl-blue-600);
    background: var(--bcl-white);
    box-shadow: 0 0 0 3px rgba(45, 107, 194, .12);
}

.bcl-input-shell > i:first-child[b-mt9traa9w8],
.bcl-select-shell > i:first-child[b-mt9traa9w8],
.bcl-date-shell > i:first-child[b-mt9traa9w8] {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    color: var(--bcl-slate-500);
    font-size: 16px;
}

.bcl-input-shell input[b-mt9traa9w8],
.bcl-select-shell select[b-mt9traa9w8],
.bcl-date-shell input[b-mt9traa9w8] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    color: var(--bcl-slate-900);
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
}

.bcl-input-shell input[b-mt9traa9w8]::placeholder {
    color: #9aa8bc;
    font-weight: 500;
}

.bcl-select-shell select[b-mt9traa9w8] {
    padding-right: 32px;
    appearance: none;
    cursor: pointer;
}

.bcl-select-arrow[b-mt9traa9w8] {
    position: absolute;
    right: 11px;
    color: var(--bcl-slate-500);
    font-size: 12px;
    pointer-events: none;
}

.bcl-date-shell input[b-mt9traa9w8] {
    padding-right: 10px;
    cursor: pointer;
}

.bcl-filter-actions[b-mt9traa9w8] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.bcl-primary-btn[b-mt9traa9w8],
.bcl-secondary-btn[b-mt9traa9w8],
.bcl-empty-reset[b-mt9traa9w8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-primary-btn[b-mt9traa9w8] {
    border: 1px solid var(--bcl-navy-900);
    color: var(--bcl-white);
    background: linear-gradient(135deg, var(--bcl-navy-900), var(--bcl-blue-700));
    box-shadow: 0 4px 10px rgba(11, 43, 99, .17);
}

.bcl-primary-btn:hover[b-mt9traa9w8] {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(11, 43, 99, .22);
}

.bcl-secondary-btn[b-mt9traa9w8] {
    border: 1px solid var(--bcl-slate-300);
    color: var(--bcl-slate-700);
    background: var(--bcl-white);
}

.bcl-secondary-btn:hover[b-mt9traa9w8] {
    border-color: #aebdd1;
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

/* Distinct tone for the "จัดการ" action on rows waiting for a ต้นสังกัด reply
   (work status 03) - same label as the other rows' buttons, but the color/icon
   pull the eye to "this one needs you to key something in". */
.bcl-warning-btn[b-mt9traa9w8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid var(--bcl-amber-500);
    border-radius: 8px;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-warning-btn:hover[b-mt9traa9w8] {
    transform: translateY(-1px);
    border-color: var(--bcl-amber-700);
    background: #ffe6ac;
    box-shadow: 0 6px 14px rgba(212, 149, 12, .22);
}

/* "สถานะ EMS" - styled after Thailand Post's own red/cream livery so it reads
   as "this opens a courier tracking view", not just another generic action. */
.bcl-post-btn[b-mt9traa9w8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid #a10f18;
    border-radius: 8px;
    color: #fff8ec;
    background: linear-gradient(135deg, #ed1c24, #a10f18);
    box-shadow: 0 4px 10px rgba(161, 15, 24, .28);
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-post-btn i[b-mt9traa9w8] {
    color: #ffd25c;
}

.bcl-post-btn:hover[b-mt9traa9w8] {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #ff3b32, #c21420);
    box-shadow: 0 7px 16px rgba(161, 15, 24, .35);
}

.bcl-primary-btn:focus-visible[b-mt9traa9w8],
.bcl-secondary-btn:focus-visible[b-mt9traa9w8],
.bcl-empty-reset:focus-visible[b-mt9traa9w8],
.rpt-link:focus-visible[b-mt9traa9w8] {
    outline: 3px solid rgba(45, 107, 194, .2);
    outline-offset: 2px;
}

/* Table */
.bcl-table-section[b-mt9traa9w8] {
    padding: 0 22px 18px;
}

.bcl-table-heading[b-mt9traa9w8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
}

.bcl-table-count[b-mt9traa9w8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-table-count i[b-mt9traa9w8] {
    color: var(--bcl-blue-700);
}

.bcl-table-wrap[b-mt9traa9w8] {
    overflow: auto;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 11px;
    background: var(--bcl-white);
    scrollbar-color: #bdcadd transparent;
    scrollbar-width: thin;
}

.bcl-table[b-mt9traa9w8] {
    width: 100%;
    min-width: 1150px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--bcl-slate-900);
    font-size: 14.5px;
}

.rpt-col-check[b-mt9traa9w8] {
    width: 46px;
}

.rpt-col-case[b-mt9traa9w8] {
    width: 190px;
}

.rpt-col-unit[b-mt9traa9w8] {
    width: 190px;
}

.rpt-col-result[b-mt9traa9w8] {
    width: 150px;
}

.rpt-col-date[b-mt9traa9w8] {
    width: 150px;
}

.rpt-col-report[b-mt9traa9w8] {
    width: 210px;
}

.rpt-col-source[b-mt9traa9w8] {
    width: 190px;
}

.bcl-table th[b-mt9traa9w8] {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 12px 13px;
    border-bottom: 1px solid #cbd7e7;
    color: var(--bcl-navy-900);
    background: linear-gradient(180deg, #edf3fb, #e7eff9);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.bcl-table th:not(:last-child)[b-mt9traa9w8] {
    border-right: 1px solid rgba(203, 215, 231, .68);
}

.bcl-table th i[b-mt9traa9w8] {
    margin-right: 5px;
    color: var(--bcl-blue-600);
    font-size: 14px;
}

.bcl-table td[b-mt9traa9w8] {
    position: relative;
    height: 76px;
    padding: 13px;
    border-bottom: 1px solid var(--bcl-slate-200);
    color: var(--bcl-slate-700);
    font-weight: 550;
    line-height: 1.45;
    vertical-align: middle;
    background: var(--bcl-white);
}

.bcl-table tbody tr:last-child td[b-mt9traa9w8] {
    border-bottom: 0;
}

.bcl-table tbody tr:hover td[b-mt9traa9w8] {
    background: #f8fbff;
}

.bcl-table tbody tr.bcl-row-attention td:first-child[b-mt9traa9w8]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-amber-500);
}

.bcl-cell-center[b-mt9traa9w8] {
    text-align: center !important;
}

.bcl-batch-cell[b-mt9traa9w8],
.bcl-date-cell[b-mt9traa9w8] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bcl-batch-cell > span:last-child[b-mt9traa9w8],
.bcl-date-cell > span:last-child[b-mt9traa9w8] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.bcl-batch-cell strong[b-mt9traa9w8] {
    overflow: hidden;
    color: var(--bcl-blue-700);
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-batch-cell small[b-mt9traa9w8],
.bcl-date-cell small[b-mt9traa9w8] {
    color: var(--bcl-slate-500);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bcl-date-cell strong[b-mt9traa9w8] {
    color: var(--bcl-slate-900);
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
}

.bcl-reference-cell[b-mt9traa9w8] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bcl-navy-900);
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.bcl-data-badge[b-mt9traa9w8],
.bcl-status[b-mt9traa9w8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.bcl-data-badge.is-complete[b-mt9traa9w8] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-data-badge.is-incomplete[b-mt9traa9w8] {
    border-color: #ffd0d8;
    color: var(--bcl-red-700);
    background: var(--bcl-red-100);
}

.bcl-status[b-mt9traa9w8] {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 8px;
    white-space: normal;
}

.bcl-status strong[b-mt9traa9w8] {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 13px;
}

.bcl-status span[b-mt9traa9w8] {
    text-align: left;
    line-height: 1.4;
}

.bcl-status i[b-mt9traa9w8] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

/*
   Status color map (19 codes):
   - 01 pending           : amber  — งานยังไม่เริ่ม
   - 02-03 circular review: blue family (เข้ม-อ่อนตามลำดับผู้อนุมัติ) — ตรวจ/อนุมัติบันทึกแจ้งเวียน
   - 04 dispatched        : teal   — ส่งหน่วยงานแล้ว รอหน่วยงานตอบกลับ
   - 05 agency-done       : cyan   — หน่วยงานตอบครบ รอจัดทำรายงาน (คั่นกลางก่อนเข้าสายรายงาน)
   - 06-10 report review  : indigo -> violet -> purple -> fuchsia -> rose ไล่เฉดตามลำดับชั้นผู้อนุมัติรายงาน
   - 11 success / 12 closed: green family (12 เข้มกว่า 11 = ปิดงานสมบูรณ์)
   - 13-19 returned       : red กลุ่มเดียวกันทั้งหมด (ตีกลับทุกขั้นตอนใช้สีเดียวกันเพื่อสื่อว่าเป็นสถานะเดียวกันคือ "ตีกลับ")
*/
.bcl-status.is-pending[b-mt9traa9w8] {
    border-color: #f4d69f;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
}

.bcl-status.is-review-div1[b-mt9traa9w8] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.bcl-status.is-review-bureau1[b-mt9traa9w8] {
    border-color: #93c5fd;
    color: #1e40af;
    background: #dbeafe;
}

.bcl-status.is-dispatched[b-mt9traa9w8] {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

.bcl-status.is-agency-done[b-mt9traa9w8] {
    border-color: #a5f3fc;
    color: #0e7490;
    background: #ecfeff;
}

.bcl-status.is-review-div2[b-mt9traa9w8] {
    border-color: #c7d2fe;
    color: #4338ca;
    background: #eef2ff;
}

.bcl-status.is-review-bureau2[b-mt9traa9w8] {
    border-color: #ddd6fe;
    color: #6d28d9;
    background: #f5f3ff;
}

.bcl-status.is-review-secgen[b-mt9traa9w8] {
    border-color: #e9d5ff;
    color: #7e22ce;
    background: #faf5ff;
}

.bcl-status.is-review-board[b-mt9traa9w8] {
    border-color: #f5d0fe;
    color: #a21caf;
    background: #fdf4ff;
}

.bcl-status.is-review-ack[b-mt9traa9w8] {
    border-color: #fbcfe8;
    color: #be185d;
    background: #fdf2f8;
}

.bcl-status.is-ready[b-mt9traa9w8] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-status.is-closed[b-mt9traa9w8] {
    border-color: #6ee7b7;
    color: #065f46;
    background: #d1fae5;
}

.bcl-status.is-issued[b-mt9traa9w8] {
    border-color: #c9dcfb;
    color: #2259a9;
    background: #e8f1ff;
}

.bcl-status.is-returned[b-mt9traa9w8] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.rpt-link[b-mt9traa9w8] {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rpt-link:hover strong[b-mt9traa9w8] {
    text-decoration: underline;
}

.rpt-checkbox[b-mt9traa9w8] {
    width: 17px;
    height: 17px;
    accent-color: var(--bcl-navy-900);
    cursor: pointer;
}

.bcl-table tbody tr.rpt-row-selected td[b-mt9traa9w8] {
    background: var(--bcl-blue-50);
}

.bcl-table tbody tr.rpt-row-selected:hover td[b-mt9traa9w8] {
    background: #e9f1ff;
}

.bcl-table tbody tr.rpt-row-selected td:first-child[b-mt9traa9w8]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-blue-700);
}

.rpt-heading-actions[b-mt9traa9w8] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.rpt-heading-actions .bcl-primary-btn:disabled[b-mt9traa9w8] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
    transform: none;
}

.bcl-empty[b-mt9traa9w8] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    flex-direction: column;
    padding: 32px 20px;
    text-align: center;
}

.bcl-empty-icon[b-mt9traa9w8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 50%;
    color: var(--bcl-blue-600);
    background: var(--bcl-blue-50);
    font-size: 28px;
}

.bcl-empty h3[b-mt9traa9w8] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 17px;
    font-weight: 800;
}

.bcl-empty p[b-mt9traa9w8] {
    margin: 5px 0 14px;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
}

.bcl-empty-reset[b-mt9traa9w8] {
    min-height: 34px;
    border: 1px solid var(--bcl-blue-100);
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
}

.bcl-empty-reset:hover[b-mt9traa9w8] {
    border-color: var(--bcl-blue-600);
    background: #e6f0ff;
}

.bcl-table-footer[b-mt9traa9w8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px 0;
    color: var(--bcl-slate-600);
    font-size: 13px;
    font-weight: 600;
}

.bcl-table-footer strong[b-mt9traa9w8] {
    color: var(--bcl-navy-900);
    font-weight: 800;
}

.bcl-footer-note[b-mt9traa9w8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcl-footer-note i[b-mt9traa9w8] {
    color: var(--bcl-blue-600);
}

@media (max-width: 1399px) {
    .bcl-filter-grid[b-mt9traa9w8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1140px) {
    .bcl-kpis[b-mt9traa9w8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcl-kpi[b-mt9traa9w8] {
        min-height: 154px;
    }
}

@media (max-width: 768px) {
    .bcl-page[b-mt9traa9w8] {
        margin: -18px -14px;
        padding: 18px 14px 30px;
    }

    .bcl-hero[b-mt9traa9w8] {
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .bcl-hero-icon[b-mt9traa9w8] {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 13px;
        font-size: 24px;
    }

    .bcl-hero-meta[b-mt9traa9w8] {
        display: none;
    }

    .bcl-kpis[b-mt9traa9w8] {
        gap: 10px;
    }

    .bcl-card-header[b-mt9traa9w8],
    .bcl-table-heading[b-mt9traa9w8],
    .bcl-table-footer[b-mt9traa9w8] {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcl-result-summary[b-mt9traa9w8],
    .bcl-table-count[b-mt9traa9w8] {
        align-self: flex-start;
    }

    .rpt-heading-actions[b-mt9traa9w8] {
        width: 100%;
        justify-content: space-between;
    }

    .bcl-filter-grid[b-mt9traa9w8] {
        grid-template-columns: 1fr;
    }

    .bcl-filter-actions[b-mt9traa9w8] {
        justify-content: stretch;
    }

    .bcl-primary-btn[b-mt9traa9w8],
    .bcl-secondary-btn[b-mt9traa9w8] {
        flex: 1;
    }

    .bcl-table-section[b-mt9traa9w8] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .bcl-card-header[b-mt9traa9w8],
    .bcl-filter-panel[b-mt9traa9w8] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .bcl-footer-note[b-mt9traa9w8] {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .bcl-page[b-mt9traa9w8] {
        margin: -14px -10px;
        padding: 14px 10px 26px;
    }

    .bcl-hero[b-mt9traa9w8] {
        margin-bottom: 14px;
        padding: 17px 15px;
        border-radius: 12px;
    }

    .bcl-hero-main[b-mt9traa9w8] {
        align-items: flex-start;
        gap: 11px;
    }

    .bcl-hero-icon[b-mt9traa9w8] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 21px;
    }

    .bcl-kicker[b-mt9traa9w8] {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .bcl-hero h1[b-mt9traa9w8] {
        font-size: 22px;
    }

    .bcl-hero p[b-mt9traa9w8] {
        font-size: 13.5px;
    }

    .bcl-kpis[b-mt9traa9w8] {
        grid-template-columns: 1fr;
        margin-bottom: 14px;
    }

    .bcl-kpi[b-mt9traa9w8] {
        min-height: 142px;
    }

    .bcl-card[b-mt9traa9w8] {
        border-radius: 12px;
    }

    .bcl-card-header[b-mt9traa9w8] {
        gap: 12px;
        padding: 15px;
    }

    .bcl-section-icon[b-mt9traa9w8] {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .bcl-card-heading h2[b-mt9traa9w8],
    .bcl-table-heading h2[b-mt9traa9w8] {
        font-size: 17px;
    }

    .bcl-filter-panel[b-mt9traa9w8] {
        padding: 15px;
    }

    .bcl-filter-actions[b-mt9traa9w8] {
        flex-direction: column;
    }

    .bcl-primary-btn[b-mt9traa9w8],
    .bcl-secondary-btn[b-mt9traa9w8] {
        width: 100%;
    }

    .bcl-table-section[b-mt9traa9w8] {
        padding: 0 10px 14px;
    }

    .bcl-table-heading[b-mt9traa9w8] {
        padding: 15px 2px 12px;
    }

    .bcl-table-footer[b-mt9traa9w8] {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcl-page *[b-mt9traa9w8],
    .bcl-page *[b-mt9traa9w8]::before,
    .bcl-page *[b-mt9traa9w8]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* สถานะ EMS popup - reverse-chronological timeline (newest/current step on top,
   matching Thailand Post's own Track & Trace layout), current step highlighted,
   not-yet-reached steps greyed out. */
.ems-timeline-backdrop[b-mt9traa9w8] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(7, 26, 61, .55);
    backdrop-filter: blur(2px);
}

.ems-timeline-panel[b-mt9traa9w8] {
    width: min(100%, 520px);
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 24px 60px rgba(7, 26, 61, .35);
}

.ems-timeline-header[b-mt9traa9w8] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-white);
}

.ems-timeline-header h2[b-mt9traa9w8] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 17.5px;
    font-weight: 800;
}

.ems-timeline-header p[b-mt9traa9w8] {
    margin: 4px 0 0;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
    font-weight: 600;
}

.ems-timeline-close[b-mt9traa9w8] {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    cursor: pointer;
}

.ems-timeline-close:hover[b-mt9traa9w8] {
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

.ems-timeline-summary[b-mt9traa9w8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 22px 4px;
}

.ems-timeline-summary-note[b-mt9traa9w8] {
    color: var(--bcl-slate-500);
    font-size: 12.5px;
    line-height: 1.5;
}

.ems-timeline-list[b-mt9traa9w8] {
    position: relative;
    margin: 12px 22px 4px;
    padding-left: 22px;
    list-style: none;
}

.ems-timeline-list[b-mt9traa9w8]::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 5px;
    width: 2px;
    background: var(--bcl-slate-200);
}

.ems-timeline-item[b-mt9traa9w8] {
    position: relative;
    padding-bottom: 20px;
}

.ems-timeline-item:last-child[b-mt9traa9w8] {
    padding-bottom: 4px;
}

.ems-timeline-dot[b-mt9traa9w8] {
    position: absolute;
    top: 3px;
    left: -22px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--bcl-white);
    border-radius: 50%;
    background: var(--bcl-slate-300);
    box-shadow: 0 0 0 2px var(--bcl-slate-200);
}

.ems-timeline-item.is-reached .ems-timeline-dot[b-mt9traa9w8] {
    background: var(--bcl-green-500);
    box-shadow: 0 0 0 2px var(--bcl-green-100);
}

.ems-timeline-item.is-current .ems-timeline-dot[b-mt9traa9w8] {
    background: var(--bcl-blue-600);
    box-shadow: 0 0 0 4px var(--bcl-blue-100);
}

.ems-timeline-body strong[b-mt9traa9w8] {
    display: block;
    color: var(--bcl-navy-900);
    font-size: 14.5px;
    font-weight: 750;
}

.ems-timeline-item.is-pending .ems-timeline-body strong[b-mt9traa9w8] {
    color: var(--bcl-slate-500);
    font-weight: 650;
}

.ems-timeline-meta[b-mt9traa9w8] {
    display: block;
    margin-top: 2px;
    color: var(--bcl-slate-500);
    font-size: 13px;
}

.ems-timeline-footer[b-mt9traa9w8] {
    display: flex;
    justify-content: flex-end;
    padding: 14px 22px 20px;
}
/* /Pages/PersonScreen/DisciplinaryResultEditPage.razor.rz.scp.css */
.bcl-page[b-vl60mqikqq] {
    --bcl-navy-950: #071a3d;
    --bcl-navy-900: #0b2b63;
    --bcl-navy-800: #123d7a;
    --bcl-blue-700: #1e56a6;
    --bcl-blue-600: #2d6bc2;
    --bcl-blue-100: #dceafe;
    --bcl-blue-50: #f1f6ff;
    --bcl-gold-500: #d2aa43;
    --bcl-gold-100: #fff0c2;
    --bcl-slate-900: #172033;
    --bcl-slate-700: #42526d;
    --bcl-slate-600: #60708c;
    --bcl-slate-500: #7e8da7;
    --bcl-slate-300: #cbd7e7;
    --bcl-slate-200: #dfe7f2;
    --bcl-slate-100: #edf2f8;
    --bcl-slate-50: #f7f9fc;
    --bcl-green-700: #087a58;
    --bcl-green-500: #18a878;
    --bcl-green-100: #d9f7eb;
    --bcl-amber-700: #a85b05;
    --bcl-amber-500: #e39218;
    --bcl-amber-100: #fff0d2;
    --bcl-red-700: #b42333;
    --bcl-red-100: #ffe3e8;
    --bcl-white: #ffffff;
    margin: -24px;
    min-height: calc(100vh - var(--header-h, 70px));
    padding: 28px 24px 40px;
    color: var(--bcl-slate-900);
    background:
        radial-gradient(circle at 0 0, rgba(45, 107, 194, .11), transparent 28rem),
        linear-gradient(180deg, #edf3fb 0, #f6f8fc 22rem, #f7f9fc 100%);
    font-family: var(--bs-body-font-family, "Sarabun", sans-serif);
    font-size: 16px;
}

.bcl-page[b-vl60mqikqq],
.bcl-page *[b-vl60mqikqq] {
    box-sizing: border-box;
}

.bcl-page > section[b-vl60mqikqq] {
    width: min(100%, 1680px);
    margin-right: auto;
    margin-left: auto;
}

/* Header */
.bcl-hero[b-vl60mqikqq] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    min-height: 136px;
    margin-bottom: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    color: var(--bcl-white);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .04), transparent 45%),
        linear-gradient(135deg, var(--bcl-navy-950), var(--bcl-navy-800));
    box-shadow: 0 14px 34px rgba(7, 26, 61, .18);
}

.bcl-hero[b-vl60mqikqq]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    border: 74px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.bcl-hero[b-vl60mqikqq]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 24%;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(210, 170, 67, .2);
    border-radius: 50%;
}

.bcl-hero-main[b-vl60mqikqq] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.bcl-hero-icon[b-vl60mqikqq] {
    display: inline-flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    color: var(--bcl-gold-100);
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: 30px;
}

.bcl-hero-copy[b-vl60mqikqq] {
    min-width: 0;
}

.bcl-kicker[b-vl60mqikqq] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #f4d67c;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
}

.bcl-kicker i[b-vl60mqikqq] {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

.bcl-hero h1[b-vl60mqikqq] {
    margin: 0;
    color: var(--bcl-white);
    font-size: clamp(26px, 2vw, 33px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.25px;
}

.bcl-hero p[b-vl60mqikqq] {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.55;
}

.bcl-hero-meta[b-vl60mqikqq] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.bcl-source-pill[b-vl60mqikqq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-source-pill i[b-vl60mqikqq] {
    color: #7fe3be;
}

.bcl-screen-code[b-vl60mqikqq] {
    color: rgba(255, 255, 255, .52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* KPI cards */
.bcl-kpis[b-vl60mqikqq] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bcl-kpi[b-vl60mqikqq] {
    --bcl-tone: var(--bcl-blue-600);
    --bcl-tone-soft: var(--bcl-blue-50);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 164px;
    overflow: hidden;
    padding: 17px 18px 14px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 14px;
    color: inherit;
    background: var(--bcl-white);
    box-shadow: 0 5px 18px rgba(11, 43, 99, .065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.bcl-kpi.tone-pending[b-vl60mqikqq] {
    --bcl-tone: var(--bcl-amber-500);
    --bcl-tone-soft: #fff8e9;
}

.bcl-kpi.tone-ready[b-vl60mqikqq] {
    --bcl-tone: var(--bcl-green-500);
    --bcl-tone-soft: #eefbf6;
}

.bcl-kpi.tone-draft[b-vl60mqikqq] {
    --bcl-tone: #7c3aed;
    --bcl-tone-soft: #f5f3ff;
}

.bcl-kpi.tone-selected[b-vl60mqikqq] {
    --bcl-tone: var(--bcl-navy-900);
    --bcl-tone-soft: var(--bcl-blue-50);
}

.bcl-kpi-accent[b-vl60mqikqq] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bcl-tone);
}

.bcl-kpi[b-vl60mqikqq]::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -60px;
    width: 130px;
    height: 130px;
    border: 24px solid var(--bcl-tone-soft);
    border-radius: 50%;
    pointer-events: none;
}

.bcl-kpi:hover[b-vl60mqikqq] {
    z-index: 1;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bcl-tone) 45%, var(--bcl-slate-200));
    box-shadow: 0 11px 26px rgba(11, 43, 99, .12);
}

.bcl-kpi:focus-visible[b-vl60mqikqq] {
    outline: 3px solid color-mix(in srgb, var(--bcl-tone) 28%, transparent);
    outline-offset: 2px;
}

.bcl-kpi.active[b-vl60mqikqq] {
    border-color: var(--bcl-tone);
    background: linear-gradient(145deg, var(--bcl-white), var(--bcl-tone-soft));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bcl-tone) 13%, transparent),
        0 9px 24px rgba(11, 43, 99, .11);
}

.bcl-kpi-top[b-vl60mqikqq] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bcl-kpi-icon[b-vl60mqikqq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--bcl-tone);
    background: var(--bcl-tone-soft);
    font-size: 20px;
}

.bcl-kpi-code[b-vl60mqikqq] {
    overflow: hidden;
    color: var(--bcl-slate-500);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-kpi-title[b-vl60mqikqq] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: var(--bcl-slate-700);
    font-size: 15px;
    font-weight: 700;
}

.bcl-kpi-value[b-vl60mqikqq] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 1px;
}

.bcl-kpi-value strong[b-vl60mqikqq] {
    color: var(--bcl-navy-900);
    font-size: 32px;
    font-weight: 850;
    line-height: 1.15;
}

.bcl-kpi-value span[b-vl60mqikqq] {
    color: var(--bcl-slate-500);
    font-size: 13.5px;
    font-weight: 600;
}

.bcl-kpi-action[b-vl60mqikqq] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--bcl-slate-100);
    color: var(--bcl-tone);
    font-size: 12.5px;
    font-weight: 750;
}

.bcl-kpi-action i[b-vl60mqikqq] {
    transition: transform .18s ease;
}

.bcl-kpi:hover .bcl-kpi-action i[b-vl60mqikqq] {
    transform: translateX(3px);
}

/* Main card and filter */
.bcl-card[b-vl60mqikqq] {
    overflow: hidden;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 8px 28px rgba(11, 43, 99, .075);
}

.bcl-card-header[b-vl60mqikqq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.bcl-card-heading[b-vl60mqikqq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bcl-section-icon[b-vl60mqikqq] {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
    font-size: 19px;
}

.bcl-card-heading h2[b-vl60mqikqq],
.bcl-table-heading h2[b-vl60mqikqq] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.bcl-card-heading p[b-vl60mqikqq],
.bcl-table-heading p[b-vl60mqikqq] {
    margin: 3px 0 0;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}

.bcl-result-summary[b-vl60mqikqq] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 9px;
    color: var(--bcl-slate-600);
    background: var(--bcl-blue-50);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.bcl-result-summary strong[b-vl60mqikqq] {
    color: var(--bcl-blue-700);
    font-size: 20px;
    font-weight: 850;
    line-height: 1;
}

.bcl-filter-panel[b-vl60mqikqq] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-slate-50);
}

.bcl-filter-grid[b-vl60mqikqq] {
    display: grid;
    grid-template-columns: minmax(250px, 1.45fr) minmax(230px, 1.2fr) minmax(180px, .8fr) minmax(180px, .8fr);
    gap: 13px;
}

.bcl-field[b-vl60mqikqq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bcl-field-label[b-vl60mqikqq] {
    color: var(--bcl-slate-700);
    font-size: 13.5px;
    font-weight: 750;
}

.bcl-input-shell[b-vl60mqikqq],
.bcl-select-shell[b-vl60mqikqq],
.bcl-date-shell[b-vl60mqikqq] {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--bcl-slate-300);
    border-radius: 9px;
    background: var(--bcl-white);
    box-shadow: 0 1px 2px rgba(11, 43, 99, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-input-shell:focus-within[b-vl60mqikqq],
.bcl-select-shell:focus-within[b-vl60mqikqq],
.bcl-date-shell:focus-within[b-vl60mqikqq] {
    border-color: var(--bcl-blue-600);
    background: var(--bcl-white);
    box-shadow: 0 0 0 3px rgba(45, 107, 194, .12);
}

.bcl-input-shell > i:first-child[b-vl60mqikqq],
.bcl-select-shell > i:first-child[b-vl60mqikqq],
.bcl-date-shell > i:first-child[b-vl60mqikqq] {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    color: var(--bcl-slate-500);
    font-size: 16px;
}

.bcl-input-shell input[b-vl60mqikqq],
.bcl-select-shell select[b-vl60mqikqq],
.bcl-date-shell input[b-vl60mqikqq] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    color: var(--bcl-slate-900);
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
}

.bcl-input-shell input[b-vl60mqikqq]::placeholder {
    color: #9aa8bc;
    font-weight: 500;
}

.bcl-select-shell select[b-vl60mqikqq] {
    padding-right: 32px;
    appearance: none;
    cursor: pointer;
}

.bcl-select-arrow[b-vl60mqikqq] {
    position: absolute;
    right: 11px;
    color: var(--bcl-slate-500);
    font-size: 12px;
    pointer-events: none;
}

.bcl-date-shell input[b-vl60mqikqq] {
    padding-right: 10px;
    cursor: pointer;
}

.bcl-filter-actions[b-vl60mqikqq] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.bcl-primary-btn[b-vl60mqikqq],
.bcl-secondary-btn[b-vl60mqikqq],
.bcl-empty-reset[b-vl60mqikqq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-primary-btn[b-vl60mqikqq] {
    border: 1px solid var(--bcl-navy-900);
    color: var(--bcl-white);
    background: linear-gradient(135deg, var(--bcl-navy-900), var(--bcl-blue-700));
    box-shadow: 0 4px 10px rgba(11, 43, 99, .17);
}

.bcl-primary-btn:hover[b-vl60mqikqq] {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(11, 43, 99, .22);
}

.bcl-secondary-btn[b-vl60mqikqq] {
    border: 1px solid var(--bcl-slate-300);
    color: var(--bcl-slate-700);
    background: var(--bcl-white);
}

.bcl-secondary-btn:hover[b-vl60mqikqq] {
    border-color: #aebdd1;
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

.bcl-primary-btn:focus-visible[b-vl60mqikqq],
.bcl-secondary-btn:focus-visible[b-vl60mqikqq],
.bcl-empty-reset:focus-visible[b-vl60mqikqq],
.rpt-link:focus-visible[b-vl60mqikqq] {
    outline: 3px solid rgba(45, 107, 194, .2);
    outline-offset: 2px;
}

/* Table */
.bcl-table-section[b-vl60mqikqq] {
    padding: 0 22px 18px;
}

.bcl-table-heading[b-vl60mqikqq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
}

.bcl-table-count[b-vl60mqikqq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-table-count i[b-vl60mqikqq] {
    color: var(--bcl-blue-700);
}

.bcl-table-wrap[b-vl60mqikqq] {
    overflow: auto;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 11px;
    background: var(--bcl-white);
    scrollbar-color: #bdcadd transparent;
    scrollbar-width: thin;
}

.bcl-table[b-vl60mqikqq] {
    width: 100%;
    min-width: 1150px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--bcl-slate-900);
    font-size: 14.5px;
}

.rpt-col-check[b-vl60mqikqq] {
    width: 46px;
}

.rpt-col-case[b-vl60mqikqq] {
    width: 190px;
}

.rpt-col-unit[b-vl60mqikqq] {
    width: 190px;
}

.rpt-col-result[b-vl60mqikqq] {
    width: 150px;
}

.rpt-col-date[b-vl60mqikqq] {
    width: 150px;
}

.rpt-col-report[b-vl60mqikqq] {
    width: 210px;
}

.rpt-col-source[b-vl60mqikqq] {
    width: 190px;
}

.bcl-table th[b-vl60mqikqq] {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 12px 13px;
    border-bottom: 1px solid #cbd7e7;
    color: var(--bcl-navy-900);
    background: linear-gradient(180deg, #edf3fb, #e7eff9);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.bcl-table th:not(:last-child)[b-vl60mqikqq] {
    border-right: 1px solid rgba(203, 215, 231, .68);
}

.bcl-table th i[b-vl60mqikqq] {
    margin-right: 5px;
    color: var(--bcl-blue-600);
    font-size: 14px;
}

.bcl-table td[b-vl60mqikqq] {
    position: relative;
    height: 76px;
    padding: 13px;
    border-bottom: 1px solid var(--bcl-slate-200);
    color: var(--bcl-slate-700);
    font-weight: 550;
    line-height: 1.45;
    vertical-align: middle;
    background: var(--bcl-white);
}

.bcl-table tbody tr:last-child td[b-vl60mqikqq] {
    border-bottom: 0;
}

.bcl-table tbody tr:hover td[b-vl60mqikqq] {
    background: #f8fbff;
}

.bcl-table tbody tr.bcl-row-attention td:first-child[b-vl60mqikqq]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-amber-500);
}

.bcl-cell-center[b-vl60mqikqq] {
    text-align: center !important;
}

.bcl-batch-cell[b-vl60mqikqq],
.bcl-date-cell[b-vl60mqikqq] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bcl-batch-cell > span:last-child[b-vl60mqikqq],
.bcl-date-cell > span:last-child[b-vl60mqikqq] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.bcl-batch-cell strong[b-vl60mqikqq] {
    overflow: hidden;
    color: var(--bcl-blue-700);
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-batch-cell small[b-vl60mqikqq],
.bcl-date-cell small[b-vl60mqikqq] {
    color: var(--bcl-slate-500);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bcl-date-cell strong[b-vl60mqikqq] {
    color: var(--bcl-slate-900);
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
}

.bcl-reference-cell[b-vl60mqikqq] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bcl-navy-900);
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.bcl-data-badge[b-vl60mqikqq],
.bcl-status[b-vl60mqikqq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.bcl-data-badge.is-complete[b-vl60mqikqq] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-data-badge.is-incomplete[b-vl60mqikqq] {
    border-color: #ffd0d8;
    color: var(--bcl-red-700);
    background: var(--bcl-red-100);
}

.bcl-status[b-vl60mqikqq] {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 8px;
    white-space: normal;
}

.bcl-status strong[b-vl60mqikqq] {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 13px;
}

.bcl-status span[b-vl60mqikqq] {
    text-align: left;
    line-height: 1.4;
}

.bcl-status i[b-vl60mqikqq] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

/*
   Status color map (19 codes):
   - 01 pending           : amber  — งานยังไม่เริ่ม
   - 02-03 circular review: blue family (เข้ม-อ่อนตามลำดับผู้อนุมัติ) — ตรวจ/อนุมัติบันทึกแจ้งเวียน
   - 04 dispatched        : teal   — ส่งหน่วยงานแล้ว รอหน่วยงานตอบกลับ
   - 05 agency-done       : cyan   — หน่วยงานตอบครบ รอจัดทำรายงาน (คั่นกลางก่อนเข้าสายรายงาน)
   - 06-10 report review  : indigo -> violet -> purple -> fuchsia -> rose ไล่เฉดตามลำดับชั้นผู้อนุมัติรายงาน
   - 11 success / 12 closed: green family (12 เข้มกว่า 11 = ปิดงานสมบูรณ์)
   - 13-19 returned       : red กลุ่มเดียวกันทั้งหมด (ตีกลับทุกขั้นตอนใช้สีเดียวกันเพื่อสื่อว่าเป็นสถานะเดียวกันคือ "ตีกลับ")
*/
.bcl-status.is-pending[b-vl60mqikqq] {
    border-color: #f4d69f;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
}

.bcl-status.is-review-div1[b-vl60mqikqq] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.bcl-status.is-review-bureau1[b-vl60mqikqq] {
    border-color: #93c5fd;
    color: #1e40af;
    background: #dbeafe;
}

.bcl-status.is-dispatched[b-vl60mqikqq] {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

.bcl-status.is-agency-done[b-vl60mqikqq] {
    border-color: #a5f3fc;
    color: #0e7490;
    background: #ecfeff;
}

.bcl-status.is-review-div2[b-vl60mqikqq] {
    border-color: #c7d2fe;
    color: #4338ca;
    background: #eef2ff;
}

.bcl-status.is-review-bureau2[b-vl60mqikqq] {
    border-color: #ddd6fe;
    color: #6d28d9;
    background: #f5f3ff;
}

.bcl-status.is-review-secgen[b-vl60mqikqq] {
    border-color: #e9d5ff;
    color: #7e22ce;
    background: #faf5ff;
}

.bcl-status.is-review-board[b-vl60mqikqq] {
    border-color: #f5d0fe;
    color: #a21caf;
    background: #fdf4ff;
}

.bcl-status.is-review-ack[b-vl60mqikqq] {
    border-color: #fbcfe8;
    color: #be185d;
    background: #fdf2f8;
}

.bcl-status.is-ready[b-vl60mqikqq] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-status.is-closed[b-vl60mqikqq] {
    border-color: #6ee7b7;
    color: #065f46;
    background: #d1fae5;
}

.bcl-status.is-issued[b-vl60mqikqq] {
    border-color: #c9dcfb;
    color: #2259a9;
    background: #e8f1ff;
}

.bcl-status.is-returned[b-vl60mqikqq] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.rpt-link[b-vl60mqikqq] {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rpt-link:hover strong[b-vl60mqikqq] {
    text-decoration: underline;
}

.rpt-checkbox[b-vl60mqikqq] {
    width: 17px;
    height: 17px;
    accent-color: var(--bcl-navy-900);
    cursor: pointer;
}

.bcl-table tbody tr.rpt-row-selected td[b-vl60mqikqq] {
    background: var(--bcl-blue-50);
}

.bcl-table tbody tr.rpt-row-selected:hover td[b-vl60mqikqq] {
    background: #e9f1ff;
}

.bcl-table tbody tr.rpt-row-selected td:first-child[b-vl60mqikqq]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-blue-700);
}

.rpt-heading-actions[b-vl60mqikqq] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.rpt-heading-actions .bcl-primary-btn:disabled[b-vl60mqikqq] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
    transform: none;
}

.bcl-empty[b-vl60mqikqq] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    flex-direction: column;
    padding: 32px 20px;
    text-align: center;
}

.bcl-empty-icon[b-vl60mqikqq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 50%;
    color: var(--bcl-blue-600);
    background: var(--bcl-blue-50);
    font-size: 28px;
}

.bcl-empty h3[b-vl60mqikqq] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 17px;
    font-weight: 800;
}

.bcl-empty p[b-vl60mqikqq] {
    margin: 5px 0 14px;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
}

.bcl-empty-reset[b-vl60mqikqq] {
    min-height: 34px;
    border: 1px solid var(--bcl-blue-100);
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
}

.bcl-empty-reset:hover[b-vl60mqikqq] {
    border-color: var(--bcl-blue-600);
    background: #e6f0ff;
}

.bcl-table-footer[b-vl60mqikqq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px 0;
    color: var(--bcl-slate-600);
    font-size: 13px;
    font-weight: 600;
}

.bcl-table-footer strong[b-vl60mqikqq] {
    color: var(--bcl-navy-900);
    font-weight: 800;
}

.bcl-footer-note[b-vl60mqikqq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcl-footer-note i[b-vl60mqikqq] {
    color: var(--bcl-blue-600);
}

@media (max-width: 1399px) {
    .bcl-filter-grid[b-vl60mqikqq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1140px) {
    .bcl-kpis[b-vl60mqikqq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcl-kpi[b-vl60mqikqq] {
        min-height: 154px;
    }
}

@media (max-width: 768px) {
    .bcl-page[b-vl60mqikqq] {
        margin: -18px -14px;
        padding: 18px 14px 30px;
    }

    .bcl-hero[b-vl60mqikqq] {
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .bcl-hero-icon[b-vl60mqikqq] {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 13px;
        font-size: 24px;
    }

    .bcl-hero-meta[b-vl60mqikqq] {
        display: none;
    }

    .bcl-kpis[b-vl60mqikqq] {
        gap: 10px;
    }

    .bcl-card-header[b-vl60mqikqq],
    .bcl-table-heading[b-vl60mqikqq],
    .bcl-table-footer[b-vl60mqikqq] {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcl-result-summary[b-vl60mqikqq],
    .bcl-table-count[b-vl60mqikqq] {
        align-self: flex-start;
    }

    .rpt-heading-actions[b-vl60mqikqq] {
        width: 100%;
        justify-content: space-between;
    }

    .bcl-filter-grid[b-vl60mqikqq] {
        grid-template-columns: 1fr;
    }

    .bcl-filter-actions[b-vl60mqikqq] {
        justify-content: stretch;
    }

    .bcl-primary-btn[b-vl60mqikqq],
    .bcl-secondary-btn[b-vl60mqikqq] {
        flex: 1;
    }

    .bcl-table-section[b-vl60mqikqq] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .bcl-card-header[b-vl60mqikqq],
    .bcl-filter-panel[b-vl60mqikqq] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .bcl-footer-note[b-vl60mqikqq] {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .bcl-page[b-vl60mqikqq] {
        margin: -14px -10px;
        padding: 14px 10px 26px;
    }

    .bcl-hero[b-vl60mqikqq] {
        margin-bottom: 14px;
        padding: 17px 15px;
        border-radius: 12px;
    }

    .bcl-hero-main[b-vl60mqikqq] {
        align-items: flex-start;
        gap: 11px;
    }

    .bcl-hero-icon[b-vl60mqikqq] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 21px;
    }

    .bcl-kicker[b-vl60mqikqq] {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .bcl-hero h1[b-vl60mqikqq] {
        font-size: 22px;
    }

    .bcl-hero p[b-vl60mqikqq] {
        font-size: 13.5px;
    }

    .bcl-kpis[b-vl60mqikqq] {
        grid-template-columns: 1fr;
        margin-bottom: 14px;
    }

    .bcl-kpi[b-vl60mqikqq] {
        min-height: 142px;
    }

    .bcl-card[b-vl60mqikqq] {
        border-radius: 12px;
    }

    .bcl-card-header[b-vl60mqikqq] {
        gap: 12px;
        padding: 15px;
    }

    .bcl-section-icon[b-vl60mqikqq] {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .bcl-card-heading h2[b-vl60mqikqq],
    .bcl-table-heading h2[b-vl60mqikqq] {
        font-size: 17px;
    }

    .bcl-filter-panel[b-vl60mqikqq] {
        padding: 15px;
    }

    .bcl-filter-actions[b-vl60mqikqq] {
        flex-direction: column;
    }

    .bcl-primary-btn[b-vl60mqikqq],
    .bcl-secondary-btn[b-vl60mqikqq] {
        width: 100%;
    }

    .bcl-table-section[b-vl60mqikqq] {
        padding: 0 10px 14px;
    }

    .bcl-table-heading[b-vl60mqikqq] {
        padding: 15px 2px 12px;
    }

    .bcl-table-footer[b-vl60mqikqq] {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcl-page *[b-vl60mqikqq],
    .bcl-page *[b-vl60mqikqq]::before,
    .bcl-page *[b-vl60mqikqq]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* /Pages/PersonScreen/DisciplinaryResultInboxPage.razor.rz.scp.css */
.bcl-page[b-lcegn33j6t] {
    --bcl-navy-950: #071a3d;
    --bcl-navy-900: #0b2b63;
    --bcl-navy-800: #123d7a;
    --bcl-blue-700: #1e56a6;
    --bcl-blue-600: #2d6bc2;
    --bcl-blue-100: #dceafe;
    --bcl-blue-50: #f1f6ff;
    --bcl-gold-500: #d2aa43;
    --bcl-gold-100: #fff0c2;
    --bcl-slate-900: #172033;
    --bcl-slate-700: #42526d;
    --bcl-slate-600: #60708c;
    --bcl-slate-500: #7e8da7;
    --bcl-slate-300: #cbd7e7;
    --bcl-slate-200: #dfe7f2;
    --bcl-slate-100: #edf2f8;
    --bcl-slate-50: #f7f9fc;
    --bcl-green-700: #087a58;
    --bcl-green-500: #18a878;
    --bcl-green-100: #d9f7eb;
    --bcl-amber-700: #a85b05;
    --bcl-amber-500: #e39218;
    --bcl-amber-100: #fff0d2;
    --bcl-red-700: #b42333;
    --bcl-red-100: #ffe3e8;
    --bcl-white: #ffffff;
    margin: -24px;
    min-height: calc(100vh - var(--header-h, 70px));
    padding: 28px 24px 40px;
    color: var(--bcl-slate-900);
    background:
        radial-gradient(circle at 0 0, rgba(45, 107, 194, .11), transparent 28rem),
        linear-gradient(180deg, #edf3fb 0, #f6f8fc 22rem, #f7f9fc 100%);
    font-family: var(--bs-body-font-family, "Sarabun", sans-serif);
    font-size: 16px;
}

.bcl-page[b-lcegn33j6t],
.bcl-page *[b-lcegn33j6t] {
    box-sizing: border-box;
}

.bcl-page > section[b-lcegn33j6t] {
    width: min(100%, 1680px);
    margin-right: auto;
    margin-left: auto;
}

/* Header */
.bcl-hero[b-lcegn33j6t] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    min-height: 136px;
    margin-bottom: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    color: var(--bcl-white);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .04), transparent 45%),
        linear-gradient(135deg, var(--bcl-navy-950), var(--bcl-navy-800));
    box-shadow: 0 14px 34px rgba(7, 26, 61, .18);
}

.bcl-hero[b-lcegn33j6t]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    border: 74px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.bcl-hero[b-lcegn33j6t]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 24%;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(210, 170, 67, .2);
    border-radius: 50%;
}

.bcl-hero-main[b-lcegn33j6t] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.bcl-hero-icon[b-lcegn33j6t] {
    display: inline-flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    color: var(--bcl-gold-100);
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: 30px;
}

.bcl-hero-copy[b-lcegn33j6t] {
    min-width: 0;
}

.bcl-kicker[b-lcegn33j6t] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #f4d67c;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
}

.bcl-kicker i[b-lcegn33j6t] {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

.bcl-hero h1[b-lcegn33j6t] {
    margin: 0;
    color: var(--bcl-white);
    font-size: clamp(26px, 2vw, 33px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.25px;
}

.bcl-hero p[b-lcegn33j6t] {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.55;
}

.bcl-hero-meta[b-lcegn33j6t] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.bcl-source-pill[b-lcegn33j6t] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-source-pill i[b-lcegn33j6t] {
    color: #7fe3be;
}

.bcl-screen-code[b-lcegn33j6t] {
    color: rgba(255, 255, 255, .52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* KPI cards */
.bcl-kpis[b-lcegn33j6t] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bcl-kpi[b-lcegn33j6t] {
    --bcl-tone: var(--bcl-blue-600);
    --bcl-tone-soft: var(--bcl-blue-50);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 164px;
    overflow: hidden;
    padding: 17px 18px 14px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 14px;
    color: inherit;
    background: var(--bcl-white);
    box-shadow: 0 5px 18px rgba(11, 43, 99, .065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.bcl-kpi.tone-pending[b-lcegn33j6t] {
    --bcl-tone: var(--bcl-amber-500);
    --bcl-tone-soft: #fff8e9;
}

.bcl-kpi.tone-ready[b-lcegn33j6t] {
    --bcl-tone: var(--bcl-green-500);
    --bcl-tone-soft: #eefbf6;
}

.bcl-kpi.tone-draft[b-lcegn33j6t] {
    --bcl-tone: #7c3aed;
    --bcl-tone-soft: #f5f3ff;
}

.bcl-kpi.tone-selected[b-lcegn33j6t] {
    --bcl-tone: var(--bcl-navy-900);
    --bcl-tone-soft: var(--bcl-blue-50);
}

.bcl-kpi-accent[b-lcegn33j6t] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bcl-tone);
}

.bcl-kpi[b-lcegn33j6t]::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -60px;
    width: 130px;
    height: 130px;
    border: 24px solid var(--bcl-tone-soft);
    border-radius: 50%;
    pointer-events: none;
}

.bcl-kpi:hover[b-lcegn33j6t] {
    z-index: 1;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bcl-tone) 45%, var(--bcl-slate-200));
    box-shadow: 0 11px 26px rgba(11, 43, 99, .12);
}

.bcl-kpi:focus-visible[b-lcegn33j6t] {
    outline: 3px solid color-mix(in srgb, var(--bcl-tone) 28%, transparent);
    outline-offset: 2px;
}

.bcl-kpi.active[b-lcegn33j6t] {
    border-color: var(--bcl-tone);
    background: linear-gradient(145deg, var(--bcl-white), var(--bcl-tone-soft));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bcl-tone) 13%, transparent),
        0 9px 24px rgba(11, 43, 99, .11);
}

.bcl-kpi-top[b-lcegn33j6t] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bcl-kpi-icon[b-lcegn33j6t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--bcl-tone);
    background: var(--bcl-tone-soft);
    font-size: 20px;
}

.bcl-kpi-code[b-lcegn33j6t] {
    overflow: hidden;
    color: var(--bcl-slate-500);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-kpi-title[b-lcegn33j6t] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: var(--bcl-slate-700);
    font-size: 15px;
    font-weight: 700;
}

.bcl-kpi-value[b-lcegn33j6t] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 1px;
}

.bcl-kpi-value strong[b-lcegn33j6t] {
    color: var(--bcl-navy-900);
    font-size: 32px;
    font-weight: 850;
    line-height: 1.15;
}

.bcl-kpi-value span[b-lcegn33j6t] {
    color: var(--bcl-slate-500);
    font-size: 13.5px;
    font-weight: 600;
}

.bcl-kpi-action[b-lcegn33j6t] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--bcl-slate-100);
    color: var(--bcl-tone);
    font-size: 12.5px;
    font-weight: 750;
}

.bcl-kpi-action i[b-lcegn33j6t] {
    transition: transform .18s ease;
}

.bcl-kpi:hover .bcl-kpi-action i[b-lcegn33j6t] {
    transform: translateX(3px);
}

/* Main card and filter */
.bcl-card[b-lcegn33j6t] {
    overflow: hidden;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 8px 28px rgba(11, 43, 99, .075);
}

.bcl-card-header[b-lcegn33j6t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.bcl-card-heading[b-lcegn33j6t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bcl-section-icon[b-lcegn33j6t] {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
    font-size: 19px;
}

.bcl-card-heading h2[b-lcegn33j6t],
.bcl-table-heading h2[b-lcegn33j6t] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.bcl-card-heading p[b-lcegn33j6t],
.bcl-table-heading p[b-lcegn33j6t] {
    margin: 3px 0 0;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}

.bcl-result-summary[b-lcegn33j6t] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 9px;
    color: var(--bcl-slate-600);
    background: var(--bcl-blue-50);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.bcl-result-summary strong[b-lcegn33j6t] {
    color: var(--bcl-blue-700);
    font-size: 20px;
    font-weight: 850;
    line-height: 1;
}

.bcl-filter-panel[b-lcegn33j6t] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-slate-50);
}

.bcl-filter-grid[b-lcegn33j6t] {
    display: grid;
    grid-template-columns: minmax(250px, 1.45fr) minmax(230px, 1.2fr) minmax(180px, .8fr) minmax(180px, .8fr);
    gap: 13px;
}

.bcl-field[b-lcegn33j6t] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bcl-field-label[b-lcegn33j6t] {
    color: var(--bcl-slate-700);
    font-size: 13.5px;
    font-weight: 750;
}

.bcl-input-shell[b-lcegn33j6t],
.bcl-select-shell[b-lcegn33j6t],
.bcl-date-shell[b-lcegn33j6t] {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--bcl-slate-300);
    border-radius: 9px;
    background: var(--bcl-white);
    box-shadow: 0 1px 2px rgba(11, 43, 99, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-input-shell:focus-within[b-lcegn33j6t],
.bcl-select-shell:focus-within[b-lcegn33j6t],
.bcl-date-shell:focus-within[b-lcegn33j6t] {
    border-color: var(--bcl-blue-600);
    background: var(--bcl-white);
    box-shadow: 0 0 0 3px rgba(45, 107, 194, .12);
}

.bcl-input-shell > i:first-child[b-lcegn33j6t],
.bcl-select-shell > i:first-child[b-lcegn33j6t],
.bcl-date-shell > i:first-child[b-lcegn33j6t] {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    color: var(--bcl-slate-500);
    font-size: 16px;
}

.bcl-input-shell input[b-lcegn33j6t],
.bcl-select-shell select[b-lcegn33j6t],
.bcl-date-shell input[b-lcegn33j6t] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    color: var(--bcl-slate-900);
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
}

.bcl-input-shell input[b-lcegn33j6t]::placeholder {
    color: #9aa8bc;
    font-weight: 500;
}

.bcl-select-shell select[b-lcegn33j6t] {
    padding-right: 32px;
    appearance: none;
    cursor: pointer;
}

.bcl-select-arrow[b-lcegn33j6t] {
    position: absolute;
    right: 11px;
    color: var(--bcl-slate-500);
    font-size: 12px;
    pointer-events: none;
}

.bcl-date-shell input[b-lcegn33j6t] {
    padding-right: 10px;
    cursor: pointer;
}

.bcl-filter-actions[b-lcegn33j6t] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.bcl-primary-btn[b-lcegn33j6t],
.bcl-secondary-btn[b-lcegn33j6t],
.bcl-empty-reset[b-lcegn33j6t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-primary-btn[b-lcegn33j6t] {
    border: 1px solid var(--bcl-navy-900);
    color: var(--bcl-white);
    background: linear-gradient(135deg, var(--bcl-navy-900), var(--bcl-blue-700));
    box-shadow: 0 4px 10px rgba(11, 43, 99, .17);
}

.bcl-primary-btn:hover[b-lcegn33j6t] {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(11, 43, 99, .22);
}

.bcl-secondary-btn[b-lcegn33j6t] {
    border: 1px solid var(--bcl-slate-300);
    color: var(--bcl-slate-700);
    background: var(--bcl-white);
}

.bcl-secondary-btn:hover[b-lcegn33j6t] {
    border-color: #aebdd1;
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

.bcl-primary-btn:focus-visible[b-lcegn33j6t],
.bcl-secondary-btn:focus-visible[b-lcegn33j6t],
.bcl-empty-reset:focus-visible[b-lcegn33j6t],
.rpt-link:focus-visible[b-lcegn33j6t] {
    outline: 3px solid rgba(45, 107, 194, .2);
    outline-offset: 2px;
}

/* Table */
.bcl-table-section[b-lcegn33j6t] {
    padding: 0 22px 18px;
}

.bcl-table-heading[b-lcegn33j6t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
}

.bcl-table-count[b-lcegn33j6t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-table-count i[b-lcegn33j6t] {
    color: var(--bcl-blue-700);
}

.bcl-table-wrap[b-lcegn33j6t] {
    overflow: auto;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 11px;
    background: var(--bcl-white);
    scrollbar-color: #bdcadd transparent;
    scrollbar-width: thin;
}

.bcl-table[b-lcegn33j6t] {
    width: 100%;
    min-width: 1150px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--bcl-slate-900);
    font-size: 14.5px;
}

.rpt-col-check[b-lcegn33j6t] {
    width: 46px;
}

.rpt-col-case[b-lcegn33j6t] {
    width: 190px;
}

.rpt-col-unit[b-lcegn33j6t] {
    width: 190px;
}

.rpt-col-result[b-lcegn33j6t] {
    width: 150px;
}

.rpt-col-date[b-lcegn33j6t] {
    width: 150px;
}

.rpt-col-report[b-lcegn33j6t] {
    width: 210px;
}

.rpt-col-source[b-lcegn33j6t] {
    width: 190px;
}

.bcl-table th[b-lcegn33j6t] {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 12px 13px;
    border-bottom: 1px solid #cbd7e7;
    color: var(--bcl-navy-900);
    background: linear-gradient(180deg, #edf3fb, #e7eff9);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.bcl-table th:not(:last-child)[b-lcegn33j6t] {
    border-right: 1px solid rgba(203, 215, 231, .68);
}

.bcl-table th i[b-lcegn33j6t] {
    margin-right: 5px;
    color: var(--bcl-blue-600);
    font-size: 14px;
}

.bcl-table td[b-lcegn33j6t] {
    position: relative;
    height: 76px;
    padding: 13px;
    border-bottom: 1px solid var(--bcl-slate-200);
    color: var(--bcl-slate-700);
    font-weight: 550;
    line-height: 1.45;
    vertical-align: middle;
    background: var(--bcl-white);
}

.bcl-table tbody tr:last-child td[b-lcegn33j6t] {
    border-bottom: 0;
}

.bcl-table tbody tr:hover td[b-lcegn33j6t] {
    background: #f8fbff;
}

.bcl-table tbody tr.bcl-row-attention td:first-child[b-lcegn33j6t]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-amber-500);
}

.bcl-cell-center[b-lcegn33j6t] {
    text-align: center !important;
}

.bcl-batch-cell[b-lcegn33j6t],
.bcl-date-cell[b-lcegn33j6t] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bcl-batch-cell > span:last-child[b-lcegn33j6t],
.bcl-date-cell > span:last-child[b-lcegn33j6t] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.bcl-batch-cell strong[b-lcegn33j6t] {
    overflow: hidden;
    color: var(--bcl-blue-700);
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-batch-cell small[b-lcegn33j6t],
.bcl-date-cell small[b-lcegn33j6t] {
    color: var(--bcl-slate-500);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bcl-date-cell strong[b-lcegn33j6t] {
    color: var(--bcl-slate-900);
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
}

.bcl-reference-cell[b-lcegn33j6t] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bcl-navy-900);
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.bcl-data-badge[b-lcegn33j6t],
.bcl-status[b-lcegn33j6t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.bcl-data-badge.is-complete[b-lcegn33j6t] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-data-badge.is-incomplete[b-lcegn33j6t] {
    border-color: #ffd0d8;
    color: var(--bcl-red-700);
    background: var(--bcl-red-100);
}

.bcl-status[b-lcegn33j6t] {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 8px;
    white-space: normal;
}

.bcl-status strong[b-lcegn33j6t] {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 13px;
}

.bcl-status span[b-lcegn33j6t] {
    text-align: left;
    line-height: 1.4;
}

.bcl-status i[b-lcegn33j6t] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

/*
   Status color map (19 codes):
   - 01 pending           : amber  — งานยังไม่เริ่ม
   - 02-03 circular review: blue family (เข้ม-อ่อนตามลำดับผู้อนุมัติ) — ตรวจ/อนุมัติบันทึกแจ้งเวียน
   - 04 dispatched        : teal   — ส่งหน่วยงานแล้ว รอหน่วยงานตอบกลับ
   - 05 agency-done       : cyan   — หน่วยงานตอบครบ รอจัดทำรายงาน (คั่นกลางก่อนเข้าสายรายงาน)
   - 06-10 report review  : indigo -> violet -> purple -> fuchsia -> rose ไล่เฉดตามลำดับชั้นผู้อนุมัติรายงาน
   - 11 success / 12 closed: green family (12 เข้มกว่า 11 = ปิดงานสมบูรณ์)
   - 13-19 returned       : red กลุ่มเดียวกันทั้งหมด (ตีกลับทุกขั้นตอนใช้สีเดียวกันเพื่อสื่อว่าเป็นสถานะเดียวกันคือ "ตีกลับ")
*/
.bcl-status.is-pending[b-lcegn33j6t] {
    border-color: #f4d69f;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
}

.bcl-status.is-review-div1[b-lcegn33j6t] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.bcl-status.is-review-bureau1[b-lcegn33j6t] {
    border-color: #93c5fd;
    color: #1e40af;
    background: #dbeafe;
}

.bcl-status.is-dispatched[b-lcegn33j6t] {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

.bcl-status.is-agency-done[b-lcegn33j6t] {
    border-color: #a5f3fc;
    color: #0e7490;
    background: #ecfeff;
}

.bcl-status.is-review-div2[b-lcegn33j6t] {
    border-color: #c7d2fe;
    color: #4338ca;
    background: #eef2ff;
}

.bcl-status.is-review-bureau2[b-lcegn33j6t] {
    border-color: #ddd6fe;
    color: #6d28d9;
    background: #f5f3ff;
}

.bcl-status.is-review-secgen[b-lcegn33j6t] {
    border-color: #e9d5ff;
    color: #7e22ce;
    background: #faf5ff;
}

.bcl-status.is-review-board[b-lcegn33j6t] {
    border-color: #f5d0fe;
    color: #a21caf;
    background: #fdf4ff;
}

.bcl-status.is-review-ack[b-lcegn33j6t] {
    border-color: #fbcfe8;
    color: #be185d;
    background: #fdf2f8;
}

.bcl-status.is-ready[b-lcegn33j6t] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-status.is-closed[b-lcegn33j6t] {
    border-color: #6ee7b7;
    color: #065f46;
    background: #d1fae5;
}

.bcl-status.is-issued[b-lcegn33j6t] {
    border-color: #c9dcfb;
    color: #2259a9;
    background: #e8f1ff;
}

.bcl-status.is-returned[b-lcegn33j6t] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.rpt-link[b-lcegn33j6t] {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rpt-link:hover strong[b-lcegn33j6t] {
    text-decoration: underline;
}

.rpt-checkbox[b-lcegn33j6t] {
    width: 17px;
    height: 17px;
    accent-color: var(--bcl-navy-900);
    cursor: pointer;
}

.bcl-table tbody tr.rpt-row-selected td[b-lcegn33j6t] {
    background: var(--bcl-blue-50);
}

.bcl-table tbody tr.rpt-row-selected:hover td[b-lcegn33j6t] {
    background: #e9f1ff;
}

.bcl-table tbody tr.rpt-row-selected td:first-child[b-lcegn33j6t]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-blue-700);
}

.rpt-heading-actions[b-lcegn33j6t] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.rpt-heading-actions .bcl-primary-btn:disabled[b-lcegn33j6t] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
    transform: none;
}

.bcl-empty[b-lcegn33j6t] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    flex-direction: column;
    padding: 32px 20px;
    text-align: center;
}

.bcl-empty-icon[b-lcegn33j6t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 50%;
    color: var(--bcl-blue-600);
    background: var(--bcl-blue-50);
    font-size: 28px;
}

.bcl-empty h3[b-lcegn33j6t] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 17px;
    font-weight: 800;
}

.bcl-empty p[b-lcegn33j6t] {
    margin: 5px 0 14px;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
}

.bcl-empty-reset[b-lcegn33j6t] {
    min-height: 34px;
    border: 1px solid var(--bcl-blue-100);
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
}

.bcl-empty-reset:hover[b-lcegn33j6t] {
    border-color: var(--bcl-blue-600);
    background: #e6f0ff;
}

.bcl-table-footer[b-lcegn33j6t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px 0;
    color: var(--bcl-slate-600);
    font-size: 13px;
    font-weight: 600;
}

.bcl-table-footer strong[b-lcegn33j6t] {
    color: var(--bcl-navy-900);
    font-weight: 800;
}

.bcl-footer-note[b-lcegn33j6t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcl-footer-note i[b-lcegn33j6t] {
    color: var(--bcl-blue-600);
}

@media (max-width: 1399px) {
    .bcl-filter-grid[b-lcegn33j6t] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1140px) {
    .bcl-kpis[b-lcegn33j6t] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcl-kpi[b-lcegn33j6t] {
        min-height: 154px;
    }
}

@media (max-width: 768px) {
    .bcl-page[b-lcegn33j6t] {
        margin: -18px -14px;
        padding: 18px 14px 30px;
    }

    .bcl-hero[b-lcegn33j6t] {
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .bcl-hero-icon[b-lcegn33j6t] {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 13px;
        font-size: 24px;
    }

    .bcl-hero-meta[b-lcegn33j6t] {
        display: none;
    }

    .bcl-kpis[b-lcegn33j6t] {
        gap: 10px;
    }

    .bcl-card-header[b-lcegn33j6t],
    .bcl-table-heading[b-lcegn33j6t],
    .bcl-table-footer[b-lcegn33j6t] {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcl-result-summary[b-lcegn33j6t],
    .bcl-table-count[b-lcegn33j6t] {
        align-self: flex-start;
    }

    .rpt-heading-actions[b-lcegn33j6t] {
        width: 100%;
        justify-content: space-between;
    }

    .bcl-filter-grid[b-lcegn33j6t] {
        grid-template-columns: 1fr;
    }

    .bcl-filter-actions[b-lcegn33j6t] {
        justify-content: stretch;
    }

    .bcl-primary-btn[b-lcegn33j6t],
    .bcl-secondary-btn[b-lcegn33j6t] {
        flex: 1;
    }

    .bcl-table-section[b-lcegn33j6t] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .bcl-card-header[b-lcegn33j6t],
    .bcl-filter-panel[b-lcegn33j6t] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .bcl-footer-note[b-lcegn33j6t] {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .bcl-page[b-lcegn33j6t] {
        margin: -14px -10px;
        padding: 14px 10px 26px;
    }

    .bcl-hero[b-lcegn33j6t] {
        margin-bottom: 14px;
        padding: 17px 15px;
        border-radius: 12px;
    }

    .bcl-hero-main[b-lcegn33j6t] {
        align-items: flex-start;
        gap: 11px;
    }

    .bcl-hero-icon[b-lcegn33j6t] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 21px;
    }

    .bcl-kicker[b-lcegn33j6t] {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .bcl-hero h1[b-lcegn33j6t] {
        font-size: 22px;
    }

    .bcl-hero p[b-lcegn33j6t] {
        font-size: 13.5px;
    }

    .bcl-kpis[b-lcegn33j6t] {
        grid-template-columns: 1fr;
        margin-bottom: 14px;
    }

    .bcl-kpi[b-lcegn33j6t] {
        min-height: 142px;
    }

    .bcl-card[b-lcegn33j6t] {
        border-radius: 12px;
    }

    .bcl-card-header[b-lcegn33j6t] {
        gap: 12px;
        padding: 15px;
    }

    .bcl-section-icon[b-lcegn33j6t] {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .bcl-card-heading h2[b-lcegn33j6t],
    .bcl-table-heading h2[b-lcegn33j6t] {
        font-size: 17px;
    }

    .bcl-filter-panel[b-lcegn33j6t] {
        padding: 15px;
    }

    .bcl-filter-actions[b-lcegn33j6t] {
        flex-direction: column;
    }

    .bcl-primary-btn[b-lcegn33j6t],
    .bcl-secondary-btn[b-lcegn33j6t] {
        width: 100%;
    }

    .bcl-table-section[b-lcegn33j6t] {
        padding: 0 10px 14px;
    }

    .bcl-table-heading[b-lcegn33j6t] {
        padding: 15px 2px 12px;
    }

    .bcl-table-footer[b-lcegn33j6t] {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcl-page *[b-lcegn33j6t],
    .bcl-page *[b-lcegn33j6t]::before,
    .bcl-page *[b-lcegn33j6t]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* /Pages/PersonScreen/DocumentReviewMockup.razor.rz.scp.css */
.review-container[b-apvg9tvxjo] {
    padding: 20px;
    font-family: 'Sarabun', sans-serif;
    color: #1e293b;
    background: #f1f5f9;
    min-height: 100vh;
}

.top-nav-bar[b-apvg9tvxjo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.back-btn[b-apvg9tvxjo] {
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #1e3a8a;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-tag[b-apvg9tvxjo] {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 6px;
}

.workspace-grid[b-apvg9tvxjo] {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 20px;
    align-items: start;
}

.left-panel[b-apvg9tvxjo] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card[b-apvg9tvxjo] {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.card h2[b-apvg9tvxjo] {
    font-size: 15px;
    font-weight: 700;
    color: #1a2744;
    margin: 0 0 16px 0;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 8px;
}

.info-row[b-apvg9tvxjo] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid #f8fafc;
}

.info-row .label[b-apvg9tvxjo] {
    color: #64748b;
}

.info-row .value[b-apvg9tvxjo] {
    color: #0f172a;
    font-weight: 600;
}

/* Status Trail */
.trail-list[b-apvg9tvxjo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding-left: 20px;
}

.trail-list[b-apvg9tvxjo]::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: #cbd5e1;
    z-index: 1;
}

.trail-item[b-apvg9tvxjo] {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.trail-icon[b-apvg9tvxjo] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #94a3b8;
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.trail-item.completed .trail-icon[b-apvg9tvxjo] {
    background: #16a34a;
}

.trail-item.rejected .trail-icon[b-apvg9tvxjo] {
    background: #dc2626;
}

.trail-item.pending .trail-icon[b-apvg9tvxjo] {
    background: #d97706;
}

.trail-details[b-apvg9tvxjo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trail-details strong[b-apvg9tvxjo] {
    font-size: 13px;
    color: #1e293b;
}

.trail-details span[b-apvg9tvxjo] {
    font-size: 11.5px;
    color: #64748b;
}

.signed-text[b-apvg9tvxjo] {
    color: #16a34a !important;
    font-weight: 600;
}

.rejected-text[b-apvg9tvxjo] {
    color: #dc2626 !important;
    font-weight: 600;
}

/* Action Box */
.action-desc[b-apvg9tvxjo] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
    margin: 0 0 16px 0;
}

.action-buttons-row[b-apvg9tvxjo] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-btn[b-apvg9tvxjo] {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.accept-btn[b-apvg9tvxjo] {
    background: #16a34a;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(22,163,74,0.2);
}

.accept-btn:hover[b-apvg9tvxjo] {
    background: #15803d;
}

.reject-btn[b-apvg9tvxjo] {
    background: #dc2626;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(220,38,38,0.2);
}

.reject-btn:hover[b-apvg9tvxjo] {
    background: #b91c1c;
}

/* Action Completed Box */
.action-completed-box[b-apvg9tvxjo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.alert[b-apvg9tvxjo] {
    padding: 14px;
    border-radius: 6px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.alert i[b-apvg9tvxjo] {
    font-size: 18px;
}

.alert-green[b-apvg9tvxjo] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.alert-red[b-apvg9tvxjo] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.psc-btn-back[b-apvg9tvxjo] {
    height: 38px;
    width: 100%;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
}

/* A4 Document Preview */
.a4-preview-card[b-apvg9tvxjo] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 50px;
    min-height: 800px;
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Sarabun', sans-serif;
    color: #000000;
}

.logo-container[b-apvg9tvxjo] {
    text-align: center;
    margin-bottom: 25px;
}

.logo-container img[b-apvg9tvxjo] {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.report-title[b-apvg9tvxjo] {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
    margin: 0 0 35px 0;
}

.report-preview-table[b-apvg9tvxjo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    margin-bottom: 40px;
}

.report-preview-table th[b-apvg9tvxjo] {
    background-color: #E5E7EB;
    border: 1px solid #000000;
    padding: 10px 6px;
    font-weight: bold;
}

.report-preview-table td[b-apvg9tvxjo] {
    border: 1px solid #000000;
    padding: 10px 6px;
}

/* Signature block */
.signature-block-container[b-apvg9tvxjo] {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    padding: 0 20px;
}

.signature-spot[b-apvg9tvxjo] {
    width: 250px;
    text-align: center;
}

.sig-line[b-apvg9tvxjo] {
    border-bottom: 1px dashed #94a3b8;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
}

.placeholder-sig[b-apvg9tvxjo] {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
}

.sig-title[b-apvg9tvxjo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
}

.sig-title strong[b-apvg9tvxjo] {
    color: #1e293b;
}

.sig-title span[b-apvg9tvxjo] {
    color: #64748b;
    font-size: 11px;
}

/* Digital stamp styles */
.digital-stamp[b-apvg9tvxjo] {
    position: absolute;
    top: 5px;
    background: rgba(22, 163, 74, 0.08);
    border: 2px dashed #16a34a;
    color: #16a34a;
    padding: 6px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    transform: rotate(-3deg);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.stamp-director[b-apvg9tvxjo] {
    background: rgba(37, 99, 235, 0.08);
    border-color: #2563eb;
    color: #2563eb;
}

.digital-stamp i[b-apvg9tvxjo] {
    font-size: 20px;
}

.stamp-title[b-apvg9tvxjo] {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.stamp-name[b-apvg9tvxjo] {
    font-size: 11px;
    font-weight: bold;
}

.stamp-date[b-apvg9tvxjo] {
    font-size: 8.5px;
    opacity: 0.85;
}

/* Modals */
.modal-overlay[b-apvg9tvxjo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-card[b-apvg9tvxjo] {
    background: #ffffff;
    border-radius: 8px;
    width: 450px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    animation: modalFadeIn-b-apvg9tvxjo 0.25s ease-out;
}

@keyframes modalFadeIn-b-apvg9tvxjo {
    from { transform: translateY(15px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header[b-apvg9tvxjo] {
    background: #1a2744;
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-red[b-apvg9tvxjo] {
    background: #dc2626 !important;
}

.modal-header h3[b-apvg9tvxjo] {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
}

.modal-header .close-btn[b-apvg9tvxjo] {
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.modal-body[b-apvg9tvxjo] {
    padding: 20px;
}

.modal-body p[b-apvg9tvxjo] {
    margin: 0 0 16px 0;
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.4;
}

.form-group[b-apvg9tvxjo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-apvg9tvxjo] {
    font-size: 12.5px;
    font-weight: bold;
    color: #334155;
}

.form-control[b-apvg9tvxjo] {
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 12px;
    outline: none;
    font-size: 14px;
}

.form-control-area[b-apvg9tvxjo] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 10px 12px;
    outline: none;
    font-size: 13.5px;
    resize: none;
}

.modal-error[b-apvg9tvxjo] {
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 8px;
    font-weight: 600;
}

.modal-footer[b-apvg9tvxjo] {
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn[b-apvg9tvxjo] {
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    border: none;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}

.btn-secondary[b-apvg9tvxjo] {
    background: #e2e8f0;
    color: #475569;
}

.btn-green[b-apvg9tvxjo] {
    background: #16a34a;
    color: white;
}

.btn-red[b-apvg9tvxjo] {
    background: #dc2626;
    color: white;
}

/* Toast Notification */
.toast-notification[b-apvg9tvxjo] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #334155;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: bold;
    z-index: 2000;
    animation: toastSlideIn-b-apvg9tvxjo 0.3s ease-out;
}

@keyframes toastSlideIn-b-apvg9tvxjo {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-success[b-apvg9tvxjo] {
    background: #16a34a;
    border-left: 4px solid #15803d;
}

.toast-error[b-apvg9tvxjo] {
    background: #dc2626;
    border-left: 4px solid #b91c1c;
}
/* /Pages/PersonScreen/HeadApprovalDetailPage.razor.rz.scp.css */
.review-container[b-fbdoly9zfw] {
    padding: 20px;
    font-family: 'Sarabun', sans-serif;
    color: #1e293b;
    background: #f1f5f9;
    min-height: 100vh;
}

.top-nav-bar[b-fbdoly9zfw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    gap: 16px;
    flex-wrap: wrap;
}

.top-nav-left[b-fbdoly9zfw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-btn[b-fbdoly9zfw] {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #1e3a8a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: 'Sarabun', sans-serif;
}

.back-btn:hover[b-fbdoly9zfw] {
    background: #e2e8f0;
    color: #0f172a;
}

.view-tag[b-fbdoly9zfw] {
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Demo Scenario Switcher Box */
.demo-scenario-box[b-fbdoly9zfw] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.scenario-label[b-fbdoly9zfw] {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 4px;
}

.scenario-buttons[b-fbdoly9zfw] {
    display: flex;
    gap: 6px;
}

.scenario-btn[b-fbdoly9zfw] {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-family: 'Sarabun', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.scenario-btn:hover[b-fbdoly9zfw] {
    background: #f1f5f9;
    color: #0f172a;
}

.scenario-btn.active[b-fbdoly9zfw] {
    background: #1e3a8a;
    color: #ffffff;
    border-color: #1e3a8a;
    box-shadow: 0 2px 4px rgba(30,58,138,0.2);
}

.workspace-grid[b-fbdoly9zfw] {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
    align-items: start;
}

.left-panel[b-fbdoly9zfw] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card[b-fbdoly9zfw] {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.card h2[b-fbdoly9zfw] {
    font-size: 15px;
    font-weight: 700;
    color: #1a2744;
    margin: 0 0 16px 0;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 8px;
}

.info-row[b-fbdoly9zfw] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid #f8fafc;
}

.info-row .label[b-fbdoly9zfw] {
    color: #64748b;
}

.info-row .value[b-fbdoly9zfw] {
    color: #0f172a;
    font-weight: 600;
}

/* Status Trail */
.trail-list[b-fbdoly9zfw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding-left: 20px;
}

.trail-list[b-fbdoly9zfw]::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: #cbd5e1;
    z-index: 1;
}

.trail-item[b-fbdoly9zfw] {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.trail-icon[b-fbdoly9zfw] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #94a3b8;
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.trail-item.completed .trail-icon[b-fbdoly9zfw] {
    background: #16a34a;
}

.trail-item.rejected .trail-icon[b-fbdoly9zfw] {
    background: #dc2626;
}

.trail-item.pending .trail-icon[b-fbdoly9zfw] {
    background: #d97706;
}

.trail-details[b-fbdoly9zfw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trail-details strong[b-fbdoly9zfw] {
    font-size: 13px;
    color: #1e293b;
}

.trail-details span[b-fbdoly9zfw] {
    font-size: 11.5px;
    color: #64748b;
}

.signed-text[b-fbdoly9zfw] {
    color: #16a34a !important;
    font-weight: 600;
}

.rejected-text[b-fbdoly9zfw] {
    color: #dc2626 !important;
    font-weight: 600;
}

/* Action Box */
.action-desc[b-fbdoly9zfw] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
    margin: 0 0 16px 0;
}

.action-buttons-row[b-fbdoly9zfw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-btn[b-fbdoly9zfw] {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: 'Sarabun', sans-serif;
}

.accept-btn[b-fbdoly9zfw] {
    background: #16a34a;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(22,163,74,0.2);
}

.accept-btn:hover[b-fbdoly9zfw] {
    background: #15803d;
}

.reject-btn[b-fbdoly9zfw] {
    background: #dc2626;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(220,38,38,0.2);
}

.reject-btn:hover[b-fbdoly9zfw] {
    background: #b91c1c;
}

/* Action Completed Box */
.action-completed-box[b-fbdoly9zfw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.alert[b-fbdoly9zfw] {
    padding: 14px;
    border-radius: 6px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.alert i[b-fbdoly9zfw] {
    font-size: 18px;
}

.alert-green[b-fbdoly9zfw] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.alert-red[b-fbdoly9zfw] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.psc-btn-back[b-fbdoly9zfw] {
    height: 38px;
    width: 100%;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Sarabun', sans-serif;
}

/* A4 Document Preview */
.a4-preview-card[b-fbdoly9zfw] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 40px 35px;
    min-height: 800px;
    max-width: 820px;
    margin: 0 auto;
    font-family: 'Sarabun', sans-serif;
    color: #000000;
}

.logo-container[b-fbdoly9zfw] {
    text-align: center;
    margin-bottom: 25px;
}

.logo-container img[b-fbdoly9zfw] {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* 3 Signatures block container */
.signature-block-container[b-fbdoly9zfw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 50px;
    padding: 0;
}

.signature-spot[b-fbdoly9zfw] {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sig-line[b-fbdoly9zfw] {
    border-bottom: 1px dashed #94a3b8;
    height: 65px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
}

.placeholder-sig[b-fbdoly9zfw] {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
    white-space: nowrap;
}

.sig-title[b-fbdoly9zfw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11.5px;
    white-space: nowrap;
}

.sig-title strong[b-fbdoly9zfw] {
    color: #1e293b;
    font-size: 12px;
}

.sig-title span[b-fbdoly9zfw] {
    color: #64748b;
    font-size: 10.5px;
}

/* Digital stamp styles */
.digital-stamp[b-fbdoly9zfw] {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    background: rgba(22, 163, 74, 0.08);
    border: 2px dashed #16a34a;
    color: #16a34a;
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    z-index: 5;
}

.digital-stamp.stamp-creator[b-fbdoly9zfw] {
    background: rgba(16, 185, 129, 0.08);
    border-color: #10b981;
    color: #059669;
}

.digital-stamp.stamp-director[b-fbdoly9zfw] {
    background: rgba(37, 99, 235, 0.08);
    border-color: #2563eb;
    color: #2563eb;
}

.digital-stamp i[b-fbdoly9zfw] {
    font-size: 16px;
}

.stamp-title[b-fbdoly9zfw] {
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
}

.stamp-name[b-fbdoly9zfw] {
    font-size: 10.5px;
    font-weight: bold;
}

.stamp-date[b-fbdoly9zfw] {
    font-size: 8px;
    opacity: 0.85;
}

/* Modals */
.modal-overlay[b-fbdoly9zfw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-card[b-fbdoly9zfw] {
    background: #ffffff;
    border-radius: 8px;
    width: 450px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.modal-header[b-fbdoly9zfw] {
    background: #1a2744;
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-red[b-fbdoly9zfw] {
    background: #dc2626 !important;
}

.modal-header h3[b-fbdoly9zfw] {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
}

.modal-header .close-btn[b-fbdoly9zfw] {
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.modal-body[b-fbdoly9zfw] {
    padding: 20px;
}

.modal-body p[b-fbdoly9zfw] {
    margin: 0 0 16px 0;
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.4;
}

.form-group[b-fbdoly9zfw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-fbdoly9zfw] {
    font-size: 12.5px;
    font-weight: bold;
    color: #334155;
}

.form-control[b-fbdoly9zfw] {
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 12px;
    outline: none;
    font-size: 14px;
    font-family: 'Sarabun', sans-serif;
}

.form-control-area[b-fbdoly9zfw] {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 10px 12px;
    outline: none;
    font-size: 13.5px;
    resize: none;
    font-family: 'Sarabun', sans-serif;
}

.modal-error[b-fbdoly9zfw] {
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 8px;
    font-weight: 600;
}

.modal-footer[b-fbdoly9zfw] {
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn[b-fbdoly9zfw] {
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    border: none;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Sarabun', sans-serif;
}

.btn-secondary[b-fbdoly9zfw] {
    background: #e2e8f0;
    color: #475569;
}

.btn-green[b-fbdoly9zfw] {
    background: #16a34a;
    color: white;
}

.btn-red[b-fbdoly9zfw] {
    background: #dc2626;
    color: white;
}

/* Toast Notification */
.toast-notification[b-fbdoly9zfw] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #334155;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: bold;
    z-index: 2000;
}

.toast-success[b-fbdoly9zfw] {
    background: #16a34a;
    border-left: 4px solid #15803d;
}

.toast-error[b-fbdoly9zfw] {
    background: #dc2626;
    border-left: 4px solid #b91c1c;
}
/* /Pages/PersonScreen/HeadApprovalListPage.razor.rz.scp.css */
.pcl-page[b-l23c2ohz1k] {
    --pcl-bg: #eaf2fb;
    --pcl-card: #ffffff;
    --pcl-line: #d7e2f1;
    --pcl-head: #e8f1fb;
    --pcl-text: #0b2b63;
    --pcl-muted: #6e82a3;
    --pcl-blue: #214f9b;
    --pcl-orange: #f5a623;
    --pcl-green: #1fc989;
    --pcl-red: #dc2626;
    --pcl-soft-blue: #dfeaff;
    --pcl-soft-green: #dff8eb;
    --pcl-soft-orange: #fff0c9;
    --pcl-soft-red: #fef2f2;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--pcl-bg);
    color: var(--pcl-text);
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
}

/* Hero Banner */
.pcl-hero[b-l23c2ohz1k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.pcl-kicker[b-l23c2ohz1k] {
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.pcl-hero h1[b-l23c2ohz1k] {
    margin: 0;
    color: var(--pcl-text);
    font-size: 26px;
    line-height: 1.25;
    font-weight: 800;
}

.pcl-hero p[b-l23c2ohz1k] {
    margin: 6px 0 0;
    color: var(--pcl-muted);
    font-size: 14px;
    font-weight: 600;
}

.pcl-screen-code[b-l23c2ohz1k] {
    min-width: 120px;
    padding-top: 10px;
    color: #49658f;
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

/* 4 KPI Cards Grid */
.pcl-kpis-4col[b-l23c2ohz1k] {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.pcl-kpi[b-l23c2ohz1k] {
    position: relative;
    overflow: hidden;
    min-height: 90px;
    background: var(--pcl-card);
    border: 1.5px solid var(--pcl-line);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 2px 4px rgba(13, 27, 62, .04);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pcl-kpi:hover[b-l23c2ohz1k] {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(13, 27, 62, .08);
}

.pcl-kpi-title-line[b-l23c2ohz1k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pcl-kpi-icon[b-l23c2ohz1k] {
    font-size: 18px;
}

.pcl-kpi-title-line p[b-l23c2ohz1k] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pcl-text);
}

.pcl-kpi strong[b-l23c2ohz1k] {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    margin-top: 8px;
    margin-bottom: 2px;
}

.pcl-kpi span[b-l23c2ohz1k] {
    font-size: 12px;
    color: var(--pcl-muted);
    font-weight: 600;
}

/* Card Tones & Active States */
.tone-blue .pcl-kpi-icon[b-l23c2ohz1k], .tone-blue strong[b-l23c2ohz1k] { color: var(--pcl-blue); }
.tone-orange .pcl-kpi-icon[b-l23c2ohz1k], .tone-orange strong[b-l23c2ohz1k] { color: #d97706; }
.tone-green .pcl-kpi-icon[b-l23c2ohz1k], .tone-green strong[b-l23c2ohz1k] { color: #16a34a; }
.tone-red .pcl-kpi-icon[b-l23c2ohz1k], .tone-red strong[b-l23c2ohz1k] { color: var(--pcl-red); }

.pcl-kpi.active[b-l23c2ohz1k] {
    border-width: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.tone-blue.active[b-l23c2ohz1k] { border-color: var(--pcl-blue); background: var(--pcl-soft-blue); }
.tone-orange.active[b-l23c2ohz1k] { border-color: #f59e0b; background: var(--pcl-soft-orange); }
.tone-green.active[b-l23c2ohz1k] { border-color: #16a34a; background: var(--pcl-soft-green); }
.tone-red.active[b-l23c2ohz1k] { border-color: var(--pcl-red); background: var(--pcl-soft-red); }

/* Table Container & Filterbar */
.pcl-card[b-l23c2ohz1k] {
    background: var(--pcl-card);
    border: 1px solid var(--pcl-line);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(13, 27, 62, .03);
}

.pcl-filterbar[b-l23c2ohz1k] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.pcl-search[b-l23c2ohz1k] {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 12px;
    height: 38px;
}

.pcl-search i[b-l23c2ohz1k] {
    color: #64748b;
    font-size: 15px;
}

.pcl-search input[b-l23c2ohz1k] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 13.5px;
    color: #1e293b;
    font-family: 'Sarabun', sans-serif;
}

.pcl-filterbar select[b-l23c2ohz1k] {
    height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 13.5px;
    color: #1e293b;
    outline: none;
    background: #ffffff;
    cursor: pointer;
    font-family: 'Sarabun', sans-serif;
}

.pcl-filter-actions[b-l23c2ohz1k] {
    display: flex;
    gap: 8px;
}

.pcl-search-btn[b-l23c2ohz1k], .pcl-clear-btn[b-l23c2ohz1k] {
    height: 38px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    transition: all 0.2s;
    font-family: 'Sarabun', sans-serif;
}

.pcl-search-btn[b-l23c2ohz1k] {
    background: var(--pcl-blue);
    color: #ffffff;
}

.pcl-search-btn:hover[b-l23c2ohz1k] {
    background: #193e7d;
}

.pcl-clear-btn[b-l23c2ohz1k] {
    background: #e2e8f0;
    color: #475569;
}

.pcl-clear-btn:hover[b-l23c2ohz1k] {
    background: #cbd5e1;
}

/* Table styling */
.pcl-table-wrap[b-l23c2ohz1k] {
    overflow-x: auto;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.pcl-table[b-l23c2ohz1k] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    text-align: left;
}

.pcl-table th[b-l23c2ohz1k] {
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
    padding: 14px 16px;
    border-bottom: 2px solid #cbd5e1;
    white-space: nowrap;
}

.pcl-table td[b-l23c2ohz1k] {
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.table-row-clickable[b-l23c2ohz1k] {
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}

.table-row-clickable:hover[b-l23c2ohz1k] {
    background: #f0f7ff;
}

.report-no[b-l23c2ohz1k] {
    font-weight: 800;
    color: #1e3a8a;
}

.case-info[b-l23c2ohz1k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.case-name[b-l23c2ohz1k] {
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
}

.agency-badge[b-l23c2ohz1k] {
    display: inline-block;
    font-size: 11.5px;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.sender-info[b-l23c2ohz1k] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
}

.sender-info i[b-l23c2ohz1k] {
    font-size: 16px;
    color: #94a3b8;
}

/* Status Badges */
.status-badge[b-l23c2ohz1k] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.status-pending[b-l23c2ohz1k] {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde047;
}

.status-rejected[b-l23c2ohz1k] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.status-approved[b-l23c2ohz1k] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.btn-review-action[b-l23c2ohz1k] {
    background: #1e3a8a;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}

.btn-review-action:hover[b-l23c2ohz1k] {
    background: #15295c;
}

.empty-row-text[b-l23c2ohz1k] {
    text-align: center;
    padding: 40px !important;
    color: #64748b;
    font-weight: 600;
}

.pcl-footer[b-l23c2ohz1k] {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    font-size: 12.5px;
    color: #64748b;
    font-weight: 600;
}
/* /Pages/PersonScreen/OfficerDisciplinaryReportListPage.razor.rz.scp.css */
.bcl-page[b-0vfnj2gs1w] {
    --bcl-navy-950: #071a3d;
    --bcl-navy-900: #0b2b63;
    --bcl-navy-800: #123d7a;
    --bcl-blue-700: #1e56a6;
    --bcl-blue-600: #2d6bc2;
    --bcl-blue-100: #dceafe;
    --bcl-blue-50: #f1f6ff;
    --bcl-gold-500: #d2aa43;
    --bcl-gold-100: #fff0c2;
    --bcl-slate-900: #172033;
    --bcl-slate-700: #42526d;
    --bcl-slate-600: #60708c;
    --bcl-slate-500: #7e8da7;
    --bcl-slate-300: #cbd7e7;
    --bcl-slate-200: #dfe7f2;
    --bcl-slate-100: #edf2f8;
    --bcl-slate-50: #f7f9fc;
    --bcl-green-700: #087a58;
    --bcl-green-500: #18a878;
    --bcl-green-100: #d9f7eb;
    --bcl-amber-700: #a85b05;
    --bcl-amber-500: #e39218;
    --bcl-amber-100: #fff0d2;
    --bcl-red-700: #b42333;
    --bcl-red-100: #ffe3e8;
    --bcl-white: #ffffff;
    margin: -24px;
    min-height: calc(100vh - var(--header-h, 70px));
    padding: 28px 24px 40px;
    color: var(--bcl-slate-900);
    background:
        radial-gradient(circle at 0 0, rgba(45, 107, 194, .11), transparent 28rem),
        linear-gradient(180deg, #edf3fb 0, #f6f8fc 22rem, #f7f9fc 100%);
    font-family: var(--bs-body-font-family, "Sarabun", sans-serif);
    font-size: 16px;
}

.bcl-page[b-0vfnj2gs1w],
.bcl-page *[b-0vfnj2gs1w] {
    box-sizing: border-box;
}

.bcl-page > section[b-0vfnj2gs1w] {
    width: min(100%, 1680px);
    margin-right: auto;
    margin-left: auto;
}

/* Header */
.bcl-hero[b-0vfnj2gs1w] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    min-height: 136px;
    margin-bottom: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    color: var(--bcl-white);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .04), transparent 45%),
        linear-gradient(135deg, var(--bcl-navy-950), var(--bcl-navy-800));
    box-shadow: 0 14px 34px rgba(7, 26, 61, .18);
}

.bcl-hero[b-0vfnj2gs1w]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    border: 74px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.bcl-hero[b-0vfnj2gs1w]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 24%;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(210, 170, 67, .2);
    border-radius: 50%;
}

.bcl-hero-main[b-0vfnj2gs1w] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.bcl-hero-icon[b-0vfnj2gs1w] {
    display: inline-flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    color: var(--bcl-gold-100);
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: 30px;
}

.bcl-hero-copy[b-0vfnj2gs1w] {
    min-width: 0;
}

.bcl-kicker[b-0vfnj2gs1w] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #f4d67c;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .8px;
}

.bcl-kicker i[b-0vfnj2gs1w] {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

.bcl-hero h1[b-0vfnj2gs1w] {
    margin: 0;
    color: var(--bcl-white);
    font-size: clamp(26px, 2vw, 33px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.25px;
}

.bcl-hero p[b-0vfnj2gs1w] {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.55;
}

.bcl-hero-meta[b-0vfnj2gs1w] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.bcl-source-pill[b-0vfnj2gs1w] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-source-pill i[b-0vfnj2gs1w] {
    color: #7fe3be;
}

.bcl-screen-code[b-0vfnj2gs1w] {
    color: rgba(255, 255, 255, .52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* KPI cards */
.bcl-kpis[b-0vfnj2gs1w] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bcl-kpi[b-0vfnj2gs1w] {
    --bcl-tone: var(--bcl-blue-600);
    --bcl-tone-soft: var(--bcl-blue-50);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 164px;
    overflow: hidden;
    padding: 17px 18px 14px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 14px;
    color: inherit;
    background: var(--bcl-white);
    box-shadow: 0 5px 18px rgba(11, 43, 99, .065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.bcl-kpi.tone-pending[b-0vfnj2gs1w] {
    --bcl-tone: var(--bcl-amber-500);
    --bcl-tone-soft: #fff8e9;
}

.bcl-kpi.tone-ready[b-0vfnj2gs1w] {
    --bcl-tone: var(--bcl-green-500);
    --bcl-tone-soft: #eefbf6;
}

.bcl-kpi.tone-draft[b-0vfnj2gs1w] {
    --bcl-tone: #7c3aed;
    --bcl-tone-soft: #f5f3ff;
}

.bcl-kpi.tone-selected[b-0vfnj2gs1w] {
    --bcl-tone: var(--bcl-navy-900);
    --bcl-tone-soft: var(--bcl-blue-50);
}

.bcl-kpi-accent[b-0vfnj2gs1w] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bcl-tone);
}

.bcl-kpi[b-0vfnj2gs1w]::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -60px;
    width: 130px;
    height: 130px;
    border: 24px solid var(--bcl-tone-soft);
    border-radius: 50%;
    pointer-events: none;
}

.bcl-kpi:hover[b-0vfnj2gs1w] {
    z-index: 1;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bcl-tone) 45%, var(--bcl-slate-200));
    box-shadow: 0 11px 26px rgba(11, 43, 99, .12);
}

.bcl-kpi:focus-visible[b-0vfnj2gs1w] {
    outline: 3px solid color-mix(in srgb, var(--bcl-tone) 28%, transparent);
    outline-offset: 2px;
}

.bcl-kpi.active[b-0vfnj2gs1w] {
    border-color: var(--bcl-tone);
    background: linear-gradient(145deg, var(--bcl-white), var(--bcl-tone-soft));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bcl-tone) 13%, transparent),
        0 9px 24px rgba(11, 43, 99, .11);
}

.bcl-kpi-top[b-0vfnj2gs1w] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bcl-kpi-icon[b-0vfnj2gs1w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--bcl-tone);
    background: var(--bcl-tone-soft);
    font-size: 20px;
}

.bcl-kpi-code[b-0vfnj2gs1w] {
    overflow: hidden;
    color: var(--bcl-slate-500);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-kpi-title[b-0vfnj2gs1w] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: var(--bcl-slate-700);
    font-size: 15px;
    font-weight: 700;
}

.bcl-kpi-value[b-0vfnj2gs1w] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 1px;
}

.bcl-kpi-value strong[b-0vfnj2gs1w] {
    color: var(--bcl-navy-900);
    font-size: 32px;
    font-weight: 850;
    line-height: 1.15;
}

.bcl-kpi-value span[b-0vfnj2gs1w] {
    color: var(--bcl-slate-500);
    font-size: 13.5px;
    font-weight: 600;
}

.bcl-kpi-action[b-0vfnj2gs1w] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--bcl-slate-100);
    color: var(--bcl-tone);
    font-size: 12.5px;
    font-weight: 750;
}

.bcl-kpi-action i[b-0vfnj2gs1w] {
    transition: transform .18s ease;
}

.bcl-kpi:hover .bcl-kpi-action i[b-0vfnj2gs1w] {
    transform: translateX(3px);
}

/* Main card and filter */
.bcl-card[b-0vfnj2gs1w] {
    overflow: hidden;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 8px 28px rgba(11, 43, 99, .075);
}

.bcl-card-header[b-0vfnj2gs1w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.bcl-card-heading[b-0vfnj2gs1w] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bcl-section-icon[b-0vfnj2gs1w] {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
    font-size: 19px;
}

.bcl-card-heading h2[b-0vfnj2gs1w],
.bcl-table-heading h2[b-0vfnj2gs1w] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.bcl-card-heading p[b-0vfnj2gs1w],
.bcl-table-heading p[b-0vfnj2gs1w] {
    margin: 3px 0 0;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
}

.bcl-result-summary[b-0vfnj2gs1w] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 9px;
    color: var(--bcl-slate-600);
    background: var(--bcl-blue-50);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.bcl-result-summary strong[b-0vfnj2gs1w] {
    color: var(--bcl-blue-700);
    font-size: 20px;
    font-weight: 850;
    line-height: 1;
}

.bcl-filter-panel[b-0vfnj2gs1w] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-slate-50);
}

.bcl-filter-grid[b-0vfnj2gs1w] {
    display: grid;
    grid-template-columns: minmax(250px, 1.45fr) minmax(230px, 1.2fr) minmax(180px, .8fr) minmax(180px, .8fr);
    gap: 13px;
}

.bcl-field[b-0vfnj2gs1w] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bcl-field-label[b-0vfnj2gs1w] {
    color: var(--bcl-slate-700);
    font-size: 13.5px;
    font-weight: 750;
}

.bcl-input-shell[b-0vfnj2gs1w],
.bcl-select-shell[b-0vfnj2gs1w],
.bcl-date-shell[b-0vfnj2gs1w] {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--bcl-slate-300);
    border-radius: 9px;
    background: var(--bcl-white);
    box-shadow: 0 1px 2px rgba(11, 43, 99, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-input-shell:focus-within[b-0vfnj2gs1w],
.bcl-select-shell:focus-within[b-0vfnj2gs1w],
.bcl-date-shell:focus-within[b-0vfnj2gs1w] {
    border-color: var(--bcl-blue-600);
    background: var(--bcl-white);
    box-shadow: 0 0 0 3px rgba(45, 107, 194, .12);
}

.bcl-input-shell > i:first-child[b-0vfnj2gs1w],
.bcl-select-shell > i:first-child[b-0vfnj2gs1w],
.bcl-date-shell > i:first-child[b-0vfnj2gs1w] {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    color: var(--bcl-slate-500);
    font-size: 16px;
}

.bcl-input-shell input[b-0vfnj2gs1w],
.bcl-select-shell select[b-0vfnj2gs1w],
.bcl-date-shell input[b-0vfnj2gs1w] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    color: var(--bcl-slate-900);
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
}

.bcl-input-shell input[b-0vfnj2gs1w]::placeholder {
    color: #9aa8bc;
    font-weight: 500;
}

.bcl-select-shell select[b-0vfnj2gs1w] {
    padding-right: 32px;
    appearance: none;
    cursor: pointer;
}

.bcl-select-arrow[b-0vfnj2gs1w] {
    position: absolute;
    right: 11px;
    color: var(--bcl-slate-500);
    font-size: 12px;
    pointer-events: none;
}

.bcl-date-shell input[b-0vfnj2gs1w] {
    padding-right: 10px;
    cursor: pointer;
}

.bcl-filter-actions[b-0vfnj2gs1w] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.bcl-primary-btn[b-0vfnj2gs1w],
.bcl-secondary-btn[b-0vfnj2gs1w],
.bcl-empty-reset[b-0vfnj2gs1w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-primary-btn[b-0vfnj2gs1w] {
    border: 1px solid var(--bcl-navy-900);
    color: var(--bcl-white);
    background: linear-gradient(135deg, var(--bcl-navy-900), var(--bcl-blue-700));
    box-shadow: 0 4px 10px rgba(11, 43, 99, .17);
}

.bcl-primary-btn:hover[b-0vfnj2gs1w] {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(11, 43, 99, .22);
}

.bcl-secondary-btn[b-0vfnj2gs1w] {
    border: 1px solid var(--bcl-slate-300);
    color: var(--bcl-slate-700);
    background: var(--bcl-white);
}

.bcl-secondary-btn:hover[b-0vfnj2gs1w] {
    border-color: #aebdd1;
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

.bcl-primary-btn:focus-visible[b-0vfnj2gs1w],
.bcl-secondary-btn:focus-visible[b-0vfnj2gs1w],
.bcl-empty-reset:focus-visible[b-0vfnj2gs1w],
.rpt-link:focus-visible[b-0vfnj2gs1w] {
    outline: 3px solid rgba(45, 107, 194, .2);
    outline-offset: 2px;
}

/* Table */
.bcl-table-section[b-0vfnj2gs1w] {
    padding: 0 22px 18px;
}

.bcl-table-heading[b-0vfnj2gs1w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
}

.bcl-table-count[b-0vfnj2gs1w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-table-count i[b-0vfnj2gs1w] {
    color: var(--bcl-blue-700);
}

.bcl-table-wrap[b-0vfnj2gs1w] {
    overflow: auto;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 11px;
    background: var(--bcl-white);
    scrollbar-color: #bdcadd transparent;
    scrollbar-width: thin;
}

.bcl-table[b-0vfnj2gs1w] {
    width: 100%;
    min-width: 1150px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--bcl-slate-900);
    font-size: 14.5px;
}

.rpt-col-check[b-0vfnj2gs1w] {
    width: 46px;
}

.rpt-col-case[b-0vfnj2gs1w] {
    width: 190px;
}

.rpt-col-unit[b-0vfnj2gs1w] {
    width: 190px;
}

.rpt-col-result[b-0vfnj2gs1w] {
    width: 150px;
}

.rpt-col-date[b-0vfnj2gs1w] {
    width: 150px;
}

.rpt-col-report[b-0vfnj2gs1w] {
    width: 210px;
}

.rpt-col-source[b-0vfnj2gs1w] {
    width: 190px;
}

.bcl-table th[b-0vfnj2gs1w] {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 12px 13px;
    border-bottom: 1px solid #cbd7e7;
    color: var(--bcl-navy-900);
    background: linear-gradient(180deg, #edf3fb, #e7eff9);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.bcl-table th:not(:last-child)[b-0vfnj2gs1w] {
    border-right: 1px solid rgba(203, 215, 231, .68);
}

.bcl-table th i[b-0vfnj2gs1w] {
    margin-right: 5px;
    color: var(--bcl-blue-600);
    font-size: 14px;
}

.bcl-table td[b-0vfnj2gs1w] {
    position: relative;
    height: 76px;
    padding: 13px;
    border-bottom: 1px solid var(--bcl-slate-200);
    color: var(--bcl-slate-700);
    font-weight: 550;
    line-height: 1.45;
    vertical-align: middle;
    background: var(--bcl-white);
}

.bcl-table tbody tr:last-child td[b-0vfnj2gs1w] {
    border-bottom: 0;
}

.bcl-table tbody tr:hover td[b-0vfnj2gs1w] {
    background: #f8fbff;
}

.bcl-table tbody tr.bcl-row-attention td:first-child[b-0vfnj2gs1w]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-amber-500);
}

.bcl-cell-center[b-0vfnj2gs1w] {
    text-align: center !important;
}

.bcl-batch-cell[b-0vfnj2gs1w],
.bcl-date-cell[b-0vfnj2gs1w] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bcl-batch-cell > span:last-child[b-0vfnj2gs1w],
.bcl-date-cell > span:last-child[b-0vfnj2gs1w] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.bcl-batch-cell strong[b-0vfnj2gs1w] {
    overflow: hidden;
    color: var(--bcl-blue-700);
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-batch-cell small[b-0vfnj2gs1w],
.bcl-date-cell small[b-0vfnj2gs1w] {
    color: var(--bcl-slate-500);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bcl-date-cell strong[b-0vfnj2gs1w] {
    color: var(--bcl-slate-900);
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
}

.bcl-reference-cell[b-0vfnj2gs1w] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bcl-navy-900);
    font-size: 14px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.bcl-data-badge[b-0vfnj2gs1w],
.bcl-status[b-0vfnj2gs1w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.bcl-data-badge.is-complete[b-0vfnj2gs1w] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-data-badge.is-incomplete[b-0vfnj2gs1w] {
    border-color: #ffd0d8;
    color: var(--bcl-red-700);
    background: var(--bcl-red-100);
}

.bcl-status[b-0vfnj2gs1w] {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 8px;
    white-space: normal;
}

.bcl-status strong[b-0vfnj2gs1w] {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 13px;
}

.bcl-status span[b-0vfnj2gs1w] {
    text-align: left;
    line-height: 1.4;
}

.bcl-status i[b-0vfnj2gs1w] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

/*
   Status color map (19 codes):
   - 01 pending           : amber  — งานยังไม่เริ่ม
   - 02-03 circular review: blue family (เข้ม-อ่อนตามลำดับผู้อนุมัติ) — ตรวจ/อนุมัติบันทึกแจ้งเวียน
   - 04 dispatched        : teal   — ส่งหน่วยงานแล้ว รอหน่วยงานตอบกลับ
   - 05 agency-done       : cyan   — หน่วยงานตอบครบ รอจัดทำรายงาน (คั่นกลางก่อนเข้าสายรายงาน)
   - 06-10 report review  : indigo -> violet -> purple -> fuchsia -> rose ไล่เฉดตามลำดับชั้นผู้อนุมัติรายงาน
   - 11 success / 12 closed: green family (12 เข้มกว่า 11 = ปิดงานสมบูรณ์)
   - 13-19 returned       : red กลุ่มเดียวกันทั้งหมด (ตีกลับทุกขั้นตอนใช้สีเดียวกันเพื่อสื่อว่าเป็นสถานะเดียวกันคือ "ตีกลับ")
*/
.bcl-status.is-pending[b-0vfnj2gs1w] {
    border-color: #f4d69f;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
}

.bcl-status.is-review-div1[b-0vfnj2gs1w] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.bcl-status.is-review-bureau1[b-0vfnj2gs1w] {
    border-color: #93c5fd;
    color: #1e40af;
    background: #dbeafe;
}

.bcl-status.is-dispatched[b-0vfnj2gs1w] {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

.bcl-status.is-agency-done[b-0vfnj2gs1w] {
    border-color: #a5f3fc;
    color: #0e7490;
    background: #ecfeff;
}

.bcl-status.is-review-div2[b-0vfnj2gs1w] {
    border-color: #c7d2fe;
    color: #4338ca;
    background: #eef2ff;
}

.bcl-status.is-review-bureau2[b-0vfnj2gs1w] {
    border-color: #ddd6fe;
    color: #6d28d9;
    background: #f5f3ff;
}

.bcl-status.is-review-secgen[b-0vfnj2gs1w] {
    border-color: #e9d5ff;
    color: #7e22ce;
    background: #faf5ff;
}

.bcl-status.is-review-board[b-0vfnj2gs1w] {
    border-color: #f5d0fe;
    color: #a21caf;
    background: #fdf4ff;
}

.bcl-status.is-review-ack[b-0vfnj2gs1w] {
    border-color: #fbcfe8;
    color: #be185d;
    background: #fdf2f8;
}

.bcl-status.is-ready[b-0vfnj2gs1w] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-status.is-closed[b-0vfnj2gs1w] {
    border-color: #6ee7b7;
    color: #065f46;
    background: #d1fae5;
}

.bcl-status.is-issued[b-0vfnj2gs1w] {
    border-color: #c9dcfb;
    color: #2259a9;
    background: #e8f1ff;
}

.bcl-status.is-returned[b-0vfnj2gs1w] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.rpt-link[b-0vfnj2gs1w] {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rpt-link:hover strong[b-0vfnj2gs1w] {
    text-decoration: underline;
}

.rpt-checkbox[b-0vfnj2gs1w] {
    width: 17px;
    height: 17px;
    accent-color: var(--bcl-navy-900);
    cursor: pointer;
}

.bcl-table tbody tr.rpt-row-selected td[b-0vfnj2gs1w] {
    background: var(--bcl-blue-50);
}

.bcl-table tbody tr.rpt-row-selected:hover td[b-0vfnj2gs1w] {
    background: #e9f1ff;
}

.bcl-table tbody tr.rpt-row-selected td:first-child[b-0vfnj2gs1w]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-blue-700);
}

.rpt-heading-actions[b-0vfnj2gs1w] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.rpt-heading-actions .bcl-primary-btn:disabled[b-0vfnj2gs1w] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
    transform: none;
}

.bcl-empty[b-0vfnj2gs1w] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    flex-direction: column;
    padding: 32px 20px;
    text-align: center;
}

.bcl-empty-icon[b-0vfnj2gs1w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 50%;
    color: var(--bcl-blue-600);
    background: var(--bcl-blue-50);
    font-size: 28px;
}

.bcl-empty h3[b-0vfnj2gs1w] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 17px;
    font-weight: 800;
}

.bcl-empty p[b-0vfnj2gs1w] {
    margin: 5px 0 14px;
    color: var(--bcl-slate-600);
    font-size: 13.5px;
}

.bcl-empty-reset[b-0vfnj2gs1w] {
    min-height: 34px;
    border: 1px solid var(--bcl-blue-100);
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
}

.bcl-empty-reset:hover[b-0vfnj2gs1w] {
    border-color: var(--bcl-blue-600);
    background: #e6f0ff;
}

.bcl-table-footer[b-0vfnj2gs1w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px 0;
    color: var(--bcl-slate-600);
    font-size: 13px;
    font-weight: 600;
}

.bcl-table-footer strong[b-0vfnj2gs1w] {
    color: var(--bcl-navy-900);
    font-weight: 800;
}

.bcl-footer-note[b-0vfnj2gs1w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcl-footer-note i[b-0vfnj2gs1w] {
    color: var(--bcl-blue-600);
}

@media (max-width: 1399px) {
    .bcl-filter-grid[b-0vfnj2gs1w] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1140px) {
    .bcl-kpis[b-0vfnj2gs1w] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcl-kpi[b-0vfnj2gs1w] {
        min-height: 154px;
    }
}

@media (max-width: 768px) {
    .bcl-page[b-0vfnj2gs1w] {
        margin: -18px -14px;
        padding: 18px 14px 30px;
    }

    .bcl-hero[b-0vfnj2gs1w] {
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .bcl-hero-icon[b-0vfnj2gs1w] {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 13px;
        font-size: 24px;
    }

    .bcl-hero-meta[b-0vfnj2gs1w] {
        display: none;
    }

    .bcl-kpis[b-0vfnj2gs1w] {
        gap: 10px;
    }

    .bcl-card-header[b-0vfnj2gs1w],
    .bcl-table-heading[b-0vfnj2gs1w],
    .bcl-table-footer[b-0vfnj2gs1w] {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcl-result-summary[b-0vfnj2gs1w],
    .bcl-table-count[b-0vfnj2gs1w] {
        align-self: flex-start;
    }

    .rpt-heading-actions[b-0vfnj2gs1w] {
        width: 100%;
        justify-content: space-between;
    }

    .bcl-filter-grid[b-0vfnj2gs1w] {
        grid-template-columns: 1fr;
    }

    .bcl-filter-actions[b-0vfnj2gs1w] {
        justify-content: stretch;
    }

    .bcl-primary-btn[b-0vfnj2gs1w],
    .bcl-secondary-btn[b-0vfnj2gs1w] {
        flex: 1;
    }

    .bcl-table-section[b-0vfnj2gs1w] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .bcl-card-header[b-0vfnj2gs1w],
    .bcl-filter-panel[b-0vfnj2gs1w] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .bcl-footer-note[b-0vfnj2gs1w] {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .bcl-page[b-0vfnj2gs1w] {
        margin: -14px -10px;
        padding: 14px 10px 26px;
    }

    .bcl-hero[b-0vfnj2gs1w] {
        margin-bottom: 14px;
        padding: 17px 15px;
        border-radius: 12px;
    }

    .bcl-hero-main[b-0vfnj2gs1w] {
        align-items: flex-start;
        gap: 11px;
    }

    .bcl-hero-icon[b-0vfnj2gs1w] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 21px;
    }

    .bcl-kicker[b-0vfnj2gs1w] {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .bcl-hero h1[b-0vfnj2gs1w] {
        font-size: 22px;
    }

    .bcl-hero p[b-0vfnj2gs1w] {
        font-size: 13.5px;
    }

    .bcl-kpis[b-0vfnj2gs1w] {
        grid-template-columns: 1fr;
        margin-bottom: 14px;
    }

    .bcl-kpi[b-0vfnj2gs1w] {
        min-height: 142px;
    }

    .bcl-card[b-0vfnj2gs1w] {
        border-radius: 12px;
    }

    .bcl-card-header[b-0vfnj2gs1w] {
        gap: 12px;
        padding: 15px;
    }

    .bcl-section-icon[b-0vfnj2gs1w] {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .bcl-card-heading h2[b-0vfnj2gs1w],
    .bcl-table-heading h2[b-0vfnj2gs1w] {
        font-size: 17px;
    }

    .bcl-filter-panel[b-0vfnj2gs1w] {
        padding: 15px;
    }

    .bcl-filter-actions[b-0vfnj2gs1w] {
        flex-direction: column;
    }

    .bcl-primary-btn[b-0vfnj2gs1w],
    .bcl-secondary-btn[b-0vfnj2gs1w] {
        width: 100%;
    }

    .bcl-table-section[b-0vfnj2gs1w] {
        padding: 0 10px 14px;
    }

    .bcl-table-heading[b-0vfnj2gs1w] {
        padding: 15px 2px 12px;
    }

    .bcl-table-footer[b-0vfnj2gs1w] {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcl-page *[b-0vfnj2gs1w],
    .bcl-page *[b-0vfnj2gs1w]::before,
    .bcl-page *[b-0vfnj2gs1w]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* /Pages/PersonScreen/OfficerFollowupReportListPage.razor.rz.scp.css */
.bcl-page[b-e072gyh0fw] {
    --bcl-navy-950: #071a3d;
    --bcl-navy-900: #0b2b63;
    --bcl-navy-800: #123d7a;
    --bcl-blue-700: #1e56a6;
    --bcl-blue-600: #2d6bc2;
    --bcl-blue-100: #dceafe;
    --bcl-blue-50: #f1f6ff;
    --bcl-gold-500: #d2aa43;
    --bcl-gold-100: #fff0c2;
    --bcl-slate-900: #172033;
    --bcl-slate-700: #42526d;
    --bcl-slate-600: #60708c;
    --bcl-slate-500: #7e8da7;
    --bcl-slate-300: #cbd7e7;
    --bcl-slate-200: #dfe7f2;
    --bcl-slate-100: #edf2f8;
    --bcl-slate-50: #f7f9fc;
    --bcl-green-700: #087a58;
    --bcl-green-500: #18a878;
    --bcl-green-100: #d9f7eb;
    --bcl-amber-700: #a85b05;
    --bcl-amber-500: #e39218;
    --bcl-amber-100: #fff0d2;
    --bcl-red-700: #b42333;
    --bcl-red-100: #ffe3e8;
    --bcl-white: #ffffff;
    margin: -24px;
    min-height: calc(100vh - var(--header-h, 70px));
    padding: 28px 24px 40px;
    color: var(--bcl-slate-900);
    background:
        radial-gradient(circle at 0 0, rgba(45, 107, 194, .11), transparent 28rem),
        linear-gradient(180deg, #edf3fb 0, #f6f8fc 22rem, #f7f9fc 100%);
    font-family: var(--bs-body-font-family, "Sarabun", sans-serif);
    font-size: 14px;
}

.bcl-page[b-e072gyh0fw],
.bcl-page *[b-e072gyh0fw] {
    box-sizing: border-box;
}

.bcl-page > section[b-e072gyh0fw] {
    width: min(100%, 1680px);
    margin-right: auto;
    margin-left: auto;
}

/* Header */
.bcl-hero[b-e072gyh0fw] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    min-height: 136px;
    margin-bottom: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    color: var(--bcl-white);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .04), transparent 45%),
        linear-gradient(135deg, var(--bcl-navy-950), var(--bcl-navy-800));
    box-shadow: 0 14px 34px rgba(7, 26, 61, .18);
}

.bcl-hero[b-e072gyh0fw]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -140px;
    right: -90px;
    width: 390px;
    height: 390px;
    border: 74px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.bcl-hero[b-e072gyh0fw]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 24%;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(210, 170, 67, .2);
    border-radius: 50%;
}

.bcl-hero-main[b-e072gyh0fw] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.bcl-hero-icon[b-e072gyh0fw] {
    display: inline-flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    color: var(--bcl-gold-100);
    background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    font-size: 28px;
}

.bcl-hero-copy[b-e072gyh0fw] {
    min-width: 0;
}

.bcl-kicker[b-e072gyh0fw] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #f4d67c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
}

.bcl-kicker i[b-e072gyh0fw] {
    color: rgba(255, 255, 255, .55);
    font-size: 9px;
}

.bcl-hero h1[b-e072gyh0fw] {
    margin: 0;
    color: var(--bcl-white);
    font-size: clamp(24px, 2vw, 31px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.25px;
}

.bcl-hero p[b-e072gyh0fw] {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .76);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
}

.bcl-hero-meta[b-e072gyh0fw] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.bcl-source-pill[b-e072gyh0fw] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-source-pill i[b-e072gyh0fw] {
    color: #7fe3be;
}

.bcl-screen-code[b-e072gyh0fw] {
    color: rgba(255, 255, 255, .52);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* KPI cards */
.bcl-kpis[b-e072gyh0fw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.bcl-kpi[b-e072gyh0fw] {
    --bcl-tone: var(--bcl-blue-600);
    --bcl-tone-soft: var(--bcl-blue-50);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 164px;
    overflow: hidden;
    padding: 17px 18px 14px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 14px;
    color: inherit;
    background: var(--bcl-white);
    box-shadow: 0 5px 18px rgba(11, 43, 99, .065);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.bcl-kpi.tone-pending[b-e072gyh0fw] {
    --bcl-tone: var(--bcl-amber-500);
    --bcl-tone-soft: #fff8e9;
}

.bcl-kpi.tone-ready[b-e072gyh0fw] {
    --bcl-tone: var(--bcl-green-500);
    --bcl-tone-soft: #eefbf6;
}

.bcl-kpi.tone-draft[b-e072gyh0fw] {
    --bcl-tone: #7c3aed;
    --bcl-tone-soft: #f5f3ff;
}

.bcl-kpi.tone-selected[b-e072gyh0fw] {
    --bcl-tone: var(--bcl-navy-900);
    --bcl-tone-soft: var(--bcl-blue-50);
}

.bcl-kpi-accent[b-e072gyh0fw] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--bcl-tone);
}

.bcl-kpi[b-e072gyh0fw]::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -60px;
    width: 130px;
    height: 130px;
    border: 24px solid var(--bcl-tone-soft);
    border-radius: 50%;
    pointer-events: none;
}

.bcl-kpi:hover[b-e072gyh0fw] {
    z-index: 1;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bcl-tone) 45%, var(--bcl-slate-200));
    box-shadow: 0 11px 26px rgba(11, 43, 99, .12);
}

.bcl-kpi:focus-visible[b-e072gyh0fw] {
    outline: 3px solid color-mix(in srgb, var(--bcl-tone) 28%, transparent);
    outline-offset: 2px;
}

.bcl-kpi.active[b-e072gyh0fw] {
    border-color: var(--bcl-tone);
    background: linear-gradient(145deg, var(--bcl-white), var(--bcl-tone-soft));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bcl-tone) 13%, transparent),
        0 9px 24px rgba(11, 43, 99, .11);
}

.bcl-kpi-top[b-e072gyh0fw] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bcl-kpi-icon[b-e072gyh0fw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--bcl-tone);
    background: var(--bcl-tone-soft);
    font-size: 18px;
}

.bcl-kpi-code[b-e072gyh0fw] {
    overflow: hidden;
    color: var(--bcl-slate-500);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-kpi-title[b-e072gyh0fw] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 11px;
    color: var(--bcl-slate-700);
    font-size: 13px;
    font-weight: 700;
}

.bcl-kpi-value[b-e072gyh0fw] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 1px;
}

.bcl-kpi-value strong[b-e072gyh0fw] {
    color: var(--bcl-navy-900);
    font-size: 30px;
    font-weight: 850;
    line-height: 1.15;
}

.bcl-kpi-value span[b-e072gyh0fw] {
    color: var(--bcl-slate-500);
    font-size: 11.5px;
    font-weight: 600;
}

.bcl-kpi-action[b-e072gyh0fw] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid var(--bcl-slate-100);
    color: var(--bcl-tone);
    font-size: 10.5px;
    font-weight: 750;
}

.bcl-kpi-action i[b-e072gyh0fw] {
    transition: transform .18s ease;
}

.bcl-kpi:hover .bcl-kpi-action i[b-e072gyh0fw] {
    transform: translateX(3px);
}

/* Main card and filter */
.bcl-card[b-e072gyh0fw] {
    overflow: hidden;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 16px;
    background: var(--bcl-white);
    box-shadow: 0 8px 28px rgba(11, 43, 99, .075);
}

.bcl-card-header[b-e072gyh0fw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: linear-gradient(180deg, #fff, #fbfcff);
}

.bcl-card-heading[b-e072gyh0fw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bcl-section-icon[b-e072gyh0fw] {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
    font-size: 17px;
}

.bcl-card-heading h2[b-e072gyh0fw],
.bcl-table-heading h2[b-e072gyh0fw] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.bcl-card-heading p[b-e072gyh0fw],
.bcl-table-heading p[b-e072gyh0fw] {
    margin: 3px 0 0;
    color: var(--bcl-slate-600);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
}

.bcl-result-summary[b-e072gyh0fw] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 9px;
    color: var(--bcl-slate-600);
    background: var(--bcl-blue-50);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.bcl-result-summary strong[b-e072gyh0fw] {
    color: var(--bcl-blue-700);
    font-size: 18px;
    font-weight: 850;
    line-height: 1;
}

.bcl-filter-panel[b-e072gyh0fw] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--bcl-slate-200);
    background: var(--bcl-slate-50);
}

.bcl-filter-grid[b-e072gyh0fw] {
    display: grid;
    grid-template-columns: minmax(250px, 1.45fr) minmax(230px, 1.2fr) minmax(180px, .8fr) minmax(180px, .8fr);
    gap: 13px;
}

.bcl-field[b-e072gyh0fw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bcl-field-label[b-e072gyh0fw] {
    color: var(--bcl-slate-700);
    font-size: 11.5px;
    font-weight: 750;
}

.bcl-input-shell[b-e072gyh0fw],
.bcl-select-shell[b-e072gyh0fw],
.bcl-date-shell[b-e072gyh0fw] {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--bcl-slate-300);
    border-radius: 9px;
    background: var(--bcl-white);
    box-shadow: 0 1px 2px rgba(11, 43, 99, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.bcl-input-shell:focus-within[b-e072gyh0fw],
.bcl-select-shell:focus-within[b-e072gyh0fw],
.bcl-date-shell:focus-within[b-e072gyh0fw] {
    border-color: var(--bcl-blue-600);
    background: var(--bcl-white);
    box-shadow: 0 0 0 3px rgba(45, 107, 194, .12);
}

.bcl-input-shell > i:first-child[b-e072gyh0fw],
.bcl-select-shell > i:first-child[b-e072gyh0fw],
.bcl-date-shell > i:first-child[b-e072gyh0fw] {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    color: var(--bcl-slate-500);
    font-size: 14px;
}

.bcl-input-shell input[b-e072gyh0fw],
.bcl-select-shell select[b-e072gyh0fw],
.bcl-date-shell input[b-e072gyh0fw] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    color: var(--bcl-slate-900);
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
}

.bcl-input-shell input[b-e072gyh0fw]::placeholder {
    color: #9aa8bc;
    font-weight: 500;
}

.bcl-select-shell select[b-e072gyh0fw] {
    padding-right: 32px;
    appearance: none;
    cursor: pointer;
}

.bcl-select-arrow[b-e072gyh0fw] {
    position: absolute;
    right: 11px;
    color: var(--bcl-slate-500);
    font-size: 10px;
    pointer-events: none;
}

.bcl-date-shell input[b-e072gyh0fw] {
    padding-right: 10px;
    cursor: pointer;
}

.bcl-filter-actions[b-e072gyh0fw] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.bcl-primary-btn[b-e072gyh0fw],
.bcl-secondary-btn[b-e072gyh0fw],
.bcl-empty-reset[b-e072gyh0fw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.bcl-primary-btn[b-e072gyh0fw] {
    border: 1px solid var(--bcl-navy-900);
    color: var(--bcl-white);
    background: linear-gradient(135deg, var(--bcl-navy-900), var(--bcl-blue-700));
    box-shadow: 0 4px 10px rgba(11, 43, 99, .17);
}

.bcl-primary-btn:hover[b-e072gyh0fw] {
    transform: translateY(-1px);
    box-shadow: 0 7px 15px rgba(11, 43, 99, .22);
}

.bcl-secondary-btn[b-e072gyh0fw] {
    border: 1px solid var(--bcl-slate-300);
    color: var(--bcl-slate-700);
    background: var(--bcl-white);
}

.bcl-secondary-btn:hover[b-e072gyh0fw] {
    border-color: #aebdd1;
    color: var(--bcl-navy-900);
    background: var(--bcl-slate-100);
}

.bcl-primary-btn:focus-visible[b-e072gyh0fw],
.bcl-secondary-btn:focus-visible[b-e072gyh0fw],
.bcl-empty-reset:focus-visible[b-e072gyh0fw],
.rpt-link:focus-visible[b-e072gyh0fw] {
    outline: 3px solid rgba(45, 107, 194, .2);
    outline-offset: 2px;
}

/* Table */
.bcl-table-section[b-e072gyh0fw] {
    padding: 0 22px 18px;
}

.bcl-table-heading[b-e072gyh0fw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 14px;
}

.bcl-table-count[b-e072gyh0fw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 8px;
    color: var(--bcl-slate-600);
    background: var(--bcl-slate-50);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.bcl-table-count i[b-e072gyh0fw] {
    color: var(--bcl-blue-700);
}

.bcl-table-wrap[b-e072gyh0fw] {
    overflow: auto;
    border: 1px solid var(--bcl-slate-200);
    border-radius: 11px;
    background: var(--bcl-white);
    scrollbar-color: #bdcadd transparent;
    scrollbar-width: thin;
}

.bcl-table[b-e072gyh0fw] {
    width: 100%;
    min-width: 1150px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--bcl-slate-900);
    font-size: 12.5px;
}

.rpt-col-check[b-e072gyh0fw] {
    width: 46px;
}

.rpt-col-case[b-e072gyh0fw] {
    width: 190px;
}

.rpt-col-unit[b-e072gyh0fw] {
    width: 190px;
}

.rpt-col-result[b-e072gyh0fw] {
    width: 150px;
}

.rpt-col-date[b-e072gyh0fw] {
    width: 150px;
}

.rpt-col-report[b-e072gyh0fw] {
    width: 210px;
}

.rpt-col-source[b-e072gyh0fw] {
    width: 190px;
}

.bcl-table th[b-e072gyh0fw] {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 12px 13px;
    border-bottom: 1px solid #cbd7e7;
    color: var(--bcl-navy-900);
    background: linear-gradient(180deg, #edf3fb, #e7eff9);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.bcl-table th:not(:last-child)[b-e072gyh0fw] {
    border-right: 1px solid rgba(203, 215, 231, .68);
}

.bcl-table th i[b-e072gyh0fw] {
    margin-right: 5px;
    color: var(--bcl-blue-600);
    font-size: 12px;
}

.bcl-table td[b-e072gyh0fw] {
    position: relative;
    height: 76px;
    padding: 13px;
    border-bottom: 1px solid var(--bcl-slate-200);
    color: var(--bcl-slate-700);
    font-weight: 550;
    line-height: 1.45;
    vertical-align: middle;
    background: var(--bcl-white);
}

.bcl-table tbody tr:last-child td[b-e072gyh0fw] {
    border-bottom: 0;
}

.bcl-table tbody tr:hover td[b-e072gyh0fw] {
    background: #f8fbff;
}

.bcl-table tbody tr.bcl-row-attention td:first-child[b-e072gyh0fw]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-amber-500);
}

.bcl-cell-center[b-e072gyh0fw] {
    text-align: center !important;
}

.bcl-batch-cell[b-e072gyh0fw],
.bcl-date-cell[b-e072gyh0fw] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bcl-batch-cell > span:last-child[b-e072gyh0fw],
.bcl-date-cell > span:last-child[b-e072gyh0fw] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.bcl-batch-cell strong[b-e072gyh0fw] {
    overflow: hidden;
    color: var(--bcl-blue-700);
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcl-batch-cell small[b-e072gyh0fw],
.bcl-date-cell small[b-e072gyh0fw] {
    color: var(--bcl-slate-500);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.bcl-date-cell strong[b-e072gyh0fw] {
    color: var(--bcl-slate-900);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.bcl-reference-cell[b-e072gyh0fw] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bcl-navy-900);
    font-size: 12px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.bcl-data-badge[b-e072gyh0fw],
.bcl-status[b-e072gyh0fw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.bcl-data-badge.is-complete[b-e072gyh0fw] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-data-badge.is-incomplete[b-e072gyh0fw] {
    border-color: #ffd0d8;
    color: var(--bcl-red-700);
    background: var(--bcl-red-100);
}

.bcl-status[b-e072gyh0fw] {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 9px;
    border-radius: 8px;
    white-space: normal;
}

.bcl-status strong[b-e072gyh0fw] {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 11px;
}

.bcl-status span[b-e072gyh0fw] {
    text-align: left;
    line-height: 1.4;
}

.bcl-status i[b-e072gyh0fw] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

/*
   Status color map (19 codes):
   - 01 pending           : amber  — งานยังไม่เริ่ม
   - 02-03 circular review: blue family (เข้ม-อ่อนตามลำดับผู้อนุมัติ) — ตรวจ/อนุมัติบันทึกแจ้งเวียน
   - 04 dispatched        : teal   — ส่งหน่วยงานแล้ว รอหน่วยงานตอบกลับ
   - 05 agency-done       : cyan   — หน่วยงานตอบครบ รอจัดทำรายงาน (คั่นกลางก่อนเข้าสายรายงาน)
   - 06-10 report review  : indigo -> violet -> purple -> fuchsia -> rose ไล่เฉดตามลำดับชั้นผู้อนุมัติรายงาน
   - 11 success / 12 closed: green family (12 เข้มกว่า 11 = ปิดงานสมบูรณ์)
   - 13-19 returned       : red กลุ่มเดียวกันทั้งหมด (ตีกลับทุกขั้นตอนใช้สีเดียวกันเพื่อสื่อว่าเป็นสถานะเดียวกันคือ "ตีกลับ")
*/
.bcl-status.is-pending[b-e072gyh0fw] {
    border-color: #f4d69f;
    color: var(--bcl-amber-700);
    background: var(--bcl-amber-100);
}

.bcl-status.is-review-div1[b-e072gyh0fw] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.bcl-status.is-review-bureau1[b-e072gyh0fw] {
    border-color: #93c5fd;
    color: #1e40af;
    background: #dbeafe;
}

.bcl-status.is-dispatched[b-e072gyh0fw] {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

.bcl-status.is-agency-done[b-e072gyh0fw] {
    border-color: #a5f3fc;
    color: #0e7490;
    background: #ecfeff;
}

.bcl-status.is-review-div2[b-e072gyh0fw] {
    border-color: #c7d2fe;
    color: #4338ca;
    background: #eef2ff;
}

.bcl-status.is-review-bureau2[b-e072gyh0fw] {
    border-color: #ddd6fe;
    color: #6d28d9;
    background: #f5f3ff;
}

.bcl-status.is-review-secgen[b-e072gyh0fw] {
    border-color: #e9d5ff;
    color: #7e22ce;
    background: #faf5ff;
}

.bcl-status.is-review-board[b-e072gyh0fw] {
    border-color: #f5d0fe;
    color: #a21caf;
    background: #fdf4ff;
}

.bcl-status.is-review-ack[b-e072gyh0fw] {
    border-color: #fbcfe8;
    color: #be185d;
    background: #fdf2f8;
}

.bcl-status.is-ready[b-e072gyh0fw] {
    border-color: #b8ead6;
    color: var(--bcl-green-700);
    background: var(--bcl-green-100);
}

.bcl-status.is-closed[b-e072gyh0fw] {
    border-color: #6ee7b7;
    color: #065f46;
    background: #d1fae5;
}

.bcl-status.is-issued[b-e072gyh0fw] {
    border-color: #c9dcfb;
    color: #2259a9;
    background: #e8f1ff;
}

.bcl-status.is-returned[b-e072gyh0fw] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.rpt-link[b-e072gyh0fw] {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rpt-link:hover strong[b-e072gyh0fw] {
    text-decoration: underline;
}

.rpt-checkbox[b-e072gyh0fw] {
    width: 17px;
    height: 17px;
    accent-color: var(--bcl-navy-900);
    cursor: pointer;
}

.bcl-table tbody tr.rpt-row-selected td[b-e072gyh0fw] {
    background: var(--bcl-blue-50);
}

.bcl-table tbody tr.rpt-row-selected:hover td[b-e072gyh0fw] {
    background: #e9f1ff;
}

.bcl-table tbody tr.rpt-row-selected td:first-child[b-e072gyh0fw]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--bcl-blue-700);
}

.rpt-heading-actions[b-e072gyh0fw] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

.rpt-heading-actions .bcl-primary-btn:disabled[b-e072gyh0fw] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
    transform: none;
}

.bcl-empty[b-e072gyh0fw] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    flex-direction: column;
    padding: 32px 20px;
    text-align: center;
}

.bcl-empty-icon[b-e072gyh0fw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 12px;
    border: 1px solid var(--bcl-blue-100);
    border-radius: 50%;
    color: var(--bcl-blue-600);
    background: var(--bcl-blue-50);
    font-size: 26px;
}

.bcl-empty h3[b-e072gyh0fw] {
    margin: 0;
    color: var(--bcl-navy-900);
    font-size: 15px;
    font-weight: 800;
}

.bcl-empty p[b-e072gyh0fw] {
    margin: 5px 0 14px;
    color: var(--bcl-slate-600);
    font-size: 11.5px;
}

.bcl-empty-reset[b-e072gyh0fw] {
    min-height: 34px;
    border: 1px solid var(--bcl-blue-100);
    color: var(--bcl-blue-700);
    background: var(--bcl-blue-50);
}

.bcl-empty-reset:hover[b-e072gyh0fw] {
    border-color: var(--bcl-blue-600);
    background: #e6f0ff;
}

.bcl-table-footer[b-e072gyh0fw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px 0;
    color: var(--bcl-slate-600);
    font-size: 11px;
    font-weight: 600;
}

.bcl-table-footer strong[b-e072gyh0fw] {
    color: var(--bcl-navy-900);
    font-weight: 800;
}

.bcl-footer-note[b-e072gyh0fw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcl-footer-note i[b-e072gyh0fw] {
    color: var(--bcl-blue-600);
}

@media (max-width: 1399px) {
    .bcl-filter-grid[b-e072gyh0fw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1140px) {
    .bcl-kpis[b-e072gyh0fw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bcl-kpi[b-e072gyh0fw] {
        min-height: 154px;
    }
}

@media (max-width: 768px) {
    .bcl-page[b-e072gyh0fw] {
        margin: -18px -14px;
        padding: 18px 14px 30px;
    }

    .bcl-hero[b-e072gyh0fw] {
        align-items: flex-start;
        min-height: 0;
        padding: 20px;
    }

    .bcl-hero-icon[b-e072gyh0fw] {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 13px;
        font-size: 22px;
    }

    .bcl-hero-meta[b-e072gyh0fw] {
        display: none;
    }

    .bcl-kpis[b-e072gyh0fw] {
        gap: 10px;
    }

    .bcl-card-header[b-e072gyh0fw],
    .bcl-table-heading[b-e072gyh0fw],
    .bcl-table-footer[b-e072gyh0fw] {
        align-items: flex-start;
        flex-direction: column;
    }

    .bcl-result-summary[b-e072gyh0fw],
    .bcl-table-count[b-e072gyh0fw] {
        align-self: flex-start;
    }

    .rpt-heading-actions[b-e072gyh0fw] {
        width: 100%;
        justify-content: space-between;
    }

    .bcl-filter-grid[b-e072gyh0fw] {
        grid-template-columns: 1fr;
    }

    .bcl-filter-actions[b-e072gyh0fw] {
        justify-content: stretch;
    }

    .bcl-primary-btn[b-e072gyh0fw],
    .bcl-secondary-btn[b-e072gyh0fw] {
        flex: 1;
    }

    .bcl-table-section[b-e072gyh0fw] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .bcl-card-header[b-e072gyh0fw],
    .bcl-filter-panel[b-e072gyh0fw] {
        padding-right: 16px;
        padding-left: 16px;
    }

    .bcl-footer-note[b-e072gyh0fw] {
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .bcl-page[b-e072gyh0fw] {
        margin: -14px -10px;
        padding: 14px 10px 26px;
    }

    .bcl-hero[b-e072gyh0fw] {
        margin-bottom: 14px;
        padding: 17px 15px;
        border-radius: 12px;
    }

    .bcl-hero-main[b-e072gyh0fw] {
        align-items: flex-start;
        gap: 11px;
    }

    .bcl-hero-icon[b-e072gyh0fw] {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 19px;
    }

    .bcl-kicker[b-e072gyh0fw] {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .bcl-hero h1[b-e072gyh0fw] {
        font-size: 20px;
    }

    .bcl-hero p[b-e072gyh0fw] {
        font-size: 11.5px;
    }

    .bcl-kpis[b-e072gyh0fw] {
        grid-template-columns: 1fr;
        margin-bottom: 14px;
    }

    .bcl-kpi[b-e072gyh0fw] {
        min-height: 142px;
    }

    .bcl-card[b-e072gyh0fw] {
        border-radius: 12px;
    }

    .bcl-card-header[b-e072gyh0fw] {
        gap: 12px;
        padding: 15px;
    }

    .bcl-section-icon[b-e072gyh0fw] {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .bcl-card-heading h2[b-e072gyh0fw],
    .bcl-table-heading h2[b-e072gyh0fw] {
        font-size: 15px;
    }

    .bcl-filter-panel[b-e072gyh0fw] {
        padding: 15px;
    }

    .bcl-filter-actions[b-e072gyh0fw] {
        flex-direction: column;
    }

    .bcl-primary-btn[b-e072gyh0fw],
    .bcl-secondary-btn[b-e072gyh0fw] {
        width: 100%;
    }

    .bcl-table-section[b-e072gyh0fw] {
        padding: 0 10px 14px;
    }

    .bcl-table-heading[b-e072gyh0fw] {
        padding: 15px 2px 12px;
    }

    .bcl-table-footer[b-e072gyh0fw] {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcl-page *[b-e072gyh0fw],
    .bcl-page *[b-e072gyh0fw]::before,
    .bcl-page *[b-e072gyh0fw]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* /Pages/PersonScreen/PersonScreenBulkSearchPage.razor.rz.scp.css */
.psb-page[b-4gg3gx3223] {

    --psd-bg: #eaf2fb;

    --psd-card: #ffffff;

    --psd-line: #d7e2f1;

    --psd-text: #0b2b63;

    --psd-muted: #6e82a3;

    --psd-blue: #214f9b;

    --psd-orange: #f5a623;

    --psd-green: #1fc989;

    --psd-red: #ef4444;

    --psd-soft-blue: #e8f1ff;

    --psd-soft-orange: #fff3ce;

    --psd-soft-green: #e2f9ef;

    --psd-soft-red: #ffe9e9;

    margin: -24px;

    min-height: calc(100vh - 60px);

    padding: 28px 22px 34px;

    background: var(--psd-bg);

    color: var(--psd-text);

}

.psb-hero[b-4gg3gx3223] {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 14px;

    margin-bottom: 20px;

}

.psb-kicker[b-4gg3gx3223] {

    color: var(--psd-orange);

    font-size: 10px;

    font-weight: 900;

    margin-bottom: 6px;

    text-transform: uppercase;

}

.psb-hero h1[b-4gg3gx3223] {

    margin: 0;

    color: var(--psd-text);

    font-size: 28px;

    line-height: 1.2;

    font-weight: 900;

}

.psb-hero p[b-4gg3gx3223] {

    margin: 7px 0 0;

    color: var(--psd-muted);

    font-size: 13px;

    font-weight: 700;

}

.psb-screen-code[b-4gg3gx3223] {

    color: #8aa0bd;

    font-size: 10px;

    font-weight: 900;

    align-self: center;

}

.psb-kpis[b-4gg3gx3223] {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 20px;

}

.psb-kpi[b-4gg3gx3223] {

    background: var(--psd-card);

    border: 1px solid var(--psd-line);

    border-radius: 12px;

    padding: 16px 20px;

    box-shadow: 0 4px 12px rgba(13, 27, 62, .03);

    position: relative;

    overflow: hidden;

}

.psb-kpi[b-4gg3gx3223]::before {

    content: "";

    position: absolute;

    left: 0;

    top: 14px;

    bottom: 14px;

    width: 4px;

    border-radius: 0 4px 4px 0;

    background: #9db9e6;

}

.psb-kpi.tone-blue[b-4gg3gx3223]::before { background: var(--psd-blue); }

.psb-kpi.tone-green[b-4gg3gx3223]::before { background: var(--psd-green); }

.psb-kpi.tone-red[b-4gg3gx3223]::before { background: var(--psd-red); }

.psb-kpi div[b-4gg3gx3223] {

    color: var(--psd-muted);

    font-size: 11px;

    font-weight: 900;

    margin-bottom: 6px;

}

.psb-kpi strong[b-4gg3gx3223] {

    display: block;

    color: var(--psd-text);

    font-size: 24px;

    font-weight: 900;

    line-height: 1.25;

}

.psb-kpi span[b-4gg3gx3223] {

    color: var(--psd-muted);

    font-size: 11px;

    font-weight: 700;

    margin-left: 4px;

}

.psb-card[b-4gg3gx3223] {

    background: var(--psd-card);

    border: 1px solid var(--psd-line);

    border-radius: 12px;

    padding: 20px;

    box-shadow: 0 4px 12px rgba(13, 27, 62, .03);

    margin-bottom: 20px;

}

.psb-card-head[b-4gg3gx3223] {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    border-bottom: 1px solid #edf3fa;

    padding-bottom: 14px;

    margin-bottom: 18px;

}

.psb-card-head h2[b-4gg3gx3223] {

    margin: 0;

    font-size: 15px;

    font-weight: 900;

    color: var(--psd-text);

    display: flex;

    align-items: center;

    gap: 8px;

}

.psb-card-head span[b-4gg3gx3223] {

    display: block;

    margin-top: 4px;

    font-size: 11px;

    font-weight: 700;

    color: var(--psd-muted);

}

.psb-textarea[b-4gg3gx3223] {

    width: 100%;

    min-height: 120px;

    border: 1.5px solid var(--psd-line);

    border-radius: 10px;

    padding: 12px 14px;

    font-size: 13px;

    font-weight: 700;

    color: var(--psd-text);

    outline: none;

    resize: vertical;

    font-family: inherit;

    transition: border-color 0.25s;

    background: #fafcff;

}

.psb-textarea:focus[b-4gg3gx3223] {

    border-color: var(--psd-blue);

    background: #ffffff;

}

.psb-tag-input-container[b-4gg3gx3223] {

    width: 100%;

    min-height: 120px;

    border: 1.5px solid var(--psd-line);

    border-radius: 10px;

    padding: 10px 12px;

    display: flex;

    flex-wrap: wrap;

    align-content: flex-start;

    gap: 8px;

    background: #fafcff;

    transition: all 0.25s;

}

.psb-tag-input-container:focus-within[b-4gg3gx3223] {

    border-color: var(--psd-blue);

    background: #ffffff;

    box-shadow: 0 0 0 3px rgba(33, 79, 155, 0.08);

}

.psb-tag[b-4gg3gx3223] {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: var(--psd-soft-blue);

    color: var(--psd-blue);

    border: 1px solid #cbdcf2;

    padding: 4px 10px;

    border-radius: 6px;

    font-size: 12.5px;

    font-weight: 800;

    line-height: 1;

    margin: 2px 0;

}

.psb-tag-close[b-4gg3gx3223] {

    border: none;

    background: transparent;

    color: var(--psd-red);

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    padding: 0;

    font-size: 13px;

    font-weight: 900;

    opacity: 0.8;

    transition: opacity 0.2s;

}

.psb-tag-close:hover[b-4gg3gx3223] {

    opacity: 1;

}

.psb-actions[b-4gg3gx3223] {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 14px;

}

.psb-btn[b-4gg3gx3223] {

    border-radius: 8px;

    font-size: 12px;

    font-weight: 900;

    padding: 10px 18px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: all 0.2s;

    border: 1px solid var(--psd-line);

    background: #fff;

    color: var(--psd-text);

}

.psb-btn-primary[b-4gg3gx3223] {

    background: var(--psd-blue);

    border-color: var(--psd-blue);

    color: #fff;

}

.psb-btn-primary:hover[b-4gg3gx3223] {

    background: #193f7d;

}

.psb-btn-light:hover[b-4gg3gx3223] {

    background: #f1f5fa;

}

.psb-table-wrap[b-4gg3gx3223] {

    overflow-x: auto;

}

.psb-table[b-4gg3gx3223] {

    width: 100%;

    border-collapse: collapse;

    font-size: 12px;

}

.psb-table th[b-4gg3gx3223] {

    background: #f5f9fd;

    color: #60779d;

    font-weight: 900;

    padding: 12px;

    text-align: left;

    border-bottom: 1.5px solid var(--psd-line);

    font-size: 11px;

}

.psb-table td[b-4gg3gx3223] {

    padding: 12px;

    border-bottom: 1px solid #e6edf6;

    color: #244266;

    vertical-align: middle;

}

.psb-table tr:hover[b-4gg3gx3223] {

    background: #fafcff;

}

.psb-status[b-4gg3gx3223] {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 12px;

    border-radius: 999px;

    font-size: 10.5px;

    font-weight: 900;

    white-space: nowrap;

}

.psb-status.tone-green[b-4gg3gx3223] {

    background: var(--psd-soft-green);

    color: #157a56;

}

.psb-status.tone-red[b-4gg3gx3223] {

    background: var(--psd-soft-red);

    color: #c93131;

}

.psb-status.tone-orange[b-4gg3gx3223] {

    background: var(--psd-soft-orange);

    color: #a86100;

}

.psb-icon-btn[b-4gg3gx3223] {

    border: 1px solid var(--psd-line);

    border-radius: 6px;

    background: #fff;

    color: var(--psd-blue);

    font-size: 13px;

    width: 28px;

    height: 28px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s;

}

.psb-icon-btn:hover[b-4gg3gx3223] {

    background: var(--psd-soft-blue);

    border-color: #cbdcf2;

}

.psb-no-data[b-4gg3gx3223] {

    text-align: center;

    padding: 40px;

    color: var(--psd-muted);

    font-size: 13px;

    font-weight: 700;

}

.psb-no-data i[b-4gg3gx3223] {

    font-size: 28px;

    display: block;

    margin-bottom: 8px;

    color: #b0c2de;

}
/* /Pages/PersonScreen/PersonScreenCaseCreatePage.razor.rz.scp.css */
.psc-page[b-miweoaud2k] {
    --psc-bg: #eaf2fb;
    --psc-card: #ffffff;
    --psc-line: #d7e2f1;
    --psc-head: #e8f1fb;
    --psc-text: #0b2b63;
    --psc-muted: #6e82a3;
    --psc-blue: #214f9b;
    --psc-orange: #f5a623;
    --psc-green: #1fc989;
    --psc-red: #e44f5f;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--psc-bg);
    color: var(--psc-text);
}

.psc-hero[b-miweoaud2k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.psc-kicker[b-miweoaud2k] {
    color: var(--psc-orange);
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 7px;
}

.psc-hero h1[b-miweoaud2k] {
    margin: 0;
    color: var(--psc-text);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
}

.psc-hero p[b-miweoaud2k] {
    max-width: 880px;
    margin: 8px 0 0;
    color: var(--psc-muted);
    font-size: 13px;
    font-weight: 700;
}

.psc-hero-actions[b-miweoaud2k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
}

.psc-screen-code[b-miweoaud2k] {
    min-width: 92px;
    color: #49658f;
    font-size: 10px;
    font-weight: 800;
    text-align: right;
}

.psc-stepper[b-miweoaud2k] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.psc-step[b-miweoaud2k] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    border: 1px solid var(--psc-line);
    border-radius: 10px;
    background: #fff;
    color: var(--psc-text);
    text-align: left;
    padding: 12px 14px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
}

.psc-step:disabled[b-miweoaud2k] {
    cursor: not-allowed;
    opacity: .62;
}

.psc-step>span[b-miweoaud2k] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: #edf4ff;
    color: var(--psc-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.psc-step strong[b-miweoaud2k] {
    display: block;
    color: var(--psc-text);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 900;
}

.psc-step small[b-miweoaud2k] {
    display: block;
    margin-top: 3px;
    color: var(--psc-muted);
    font-size: 10.5px;
    font-weight: 800;
}

.psc-step>div[b-miweoaud2k] {
    min-width: 0;
}

.psc-step.active[b-miweoaud2k] {
    border-color: var(--psc-blue);
    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
    box-shadow: 0 8px 22px rgba(33, 79, 155, .12);
}

.psc-step.active>span[b-miweoaud2k] {
    background: var(--psc-blue);
    color: #fff;
}

.psc-step.done[b-miweoaud2k] {
    border-color: #b8ebd8;
    background: #f3fff9;
}

.psc-step.done>span[b-miweoaud2k] {
    background: var(--psc-green);
    color: #fff;
}

.psc-shell[b-miweoaud2k] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.psc-card[b-miweoaud2k],
.psc-summary-card[b-miweoaud2k] {
    background: var(--psc-card);
    border: 1px solid var(--psc-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
}

.psc-summary-card[b-miweoaud2k] {
    position: sticky;
    top: 14px;
    padding: 14px;
}

.psc-summary-head[b-miweoaud2k] {
    border-bottom: 1px solid #e8eef7;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.psc-summary-head span[b-miweoaud2k],
.psc-summary-grid span[b-miweoaud2k],
.psc-save-log small[b-miweoaud2k] {
    display: block;
    color: var(--psc-muted);
    font-size: 10.5px;
    font-weight: 800;
}

.psc-summary-head strong[b-miweoaud2k] {
    display: block;
    margin-top: 4px;
    color: var(--psc-text);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 900;
}

.psc-summary-grid[b-miweoaud2k] {
    display: grid;
    gap: 8px;
}

.psc-summary-grid div[b-miweoaud2k] {
    border: 1px solid #e3edf8;
    border-radius: 8px;
    background: #f8fbff;
    padding: 10px;
}

.psc-summary-grid strong[b-miweoaud2k] {
    display: block;
    margin-top: 4px;
    color: var(--psc-text);
    font-size: 12px;
    font-weight: 900;
}

.psc-save-log[b-miweoaud2k] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e8eef7;
}

.psc-save-log h2[b-miweoaud2k] {
    margin: 0 0 10px;
    color: var(--psc-text);
    font-size: 13px;
    font-weight: 900;
}

.psc-save-log>div[b-miweoaud2k] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.psc-save-log p[b-miweoaud2k] {
    margin: 0;
}

.psc-save-log strong[b-miweoaud2k] {
    display: block;
    color: var(--psc-text);
    font-size: 11px;
    font-weight: 900;
}

.psc-dot[b-miweoaud2k] {
    width: 9px;
    height: 9px;
    min-width: 9px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--tone);
}

.psc-main-card[b-miweoaud2k] {
    min-height: 620px;
    padding: 16px;
}

.psc-card-head[b-miweoaud2k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid #e8eef7;
}

.psc-card-head h2[b-miweoaud2k] {
    margin: 0;
    color: var(--psc-text);
    font-size: 18px;
    font-weight: 900;
}

.psc-card-head p[b-miweoaud2k] {
    margin: 6px 0 0;
    color: var(--psc-muted);
    font-size: 12px;
    font-weight: 700;
}

.psc-form-grid[b-miweoaud2k] {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 12px;
}

.psc-form-grid.compact[b-miweoaud2k] {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.psc-form-grid label[b-miweoaud2k] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.psc-form-grid .span-2[b-miweoaud2k] {
    grid-column: span 2;
}

.psc-form-grid .span-4[b-miweoaud2k] {
    grid-column: span 4;
}

.psc-report-form[b-miweoaud2k] {
    margin-bottom: 14px;
}

.psc-form-grid span[b-miweoaud2k],
.psc-action-panel span[b-miweoaud2k],
.psc-import-card span[b-miweoaud2k],
.psc-preview-box span[b-miweoaud2k],
.psc-letter-pack span[b-miweoaud2k] {
    color: var(--psc-muted);
    font-size: 11px;
    font-weight: 800;
}

.psc-form-grid input[b-miweoaud2k],
.psc-form-grid select[b-miweoaud2k],
.psc-form-grid textarea[b-miweoaud2k],
.psc-table input[b-miweoaud2k] {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--psc-line);
    border-radius: 8px;
    background: #fff;
    color: var(--psc-text);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    outline: none;
}

.psc-form-grid input[b-miweoaud2k],
.psc-form-grid select[b-miweoaud2k] {
    height: 38px;
    padding: 0 11px;
}

.psc-form-grid textarea[b-miweoaud2k] {
    resize: vertical;
    padding: 10px 11px;
}

.psc-form-grid input:disabled[b-miweoaud2k],
.psc-form-grid select:disabled[b-miweoaud2k],
.psc-form-grid textarea:disabled[b-miweoaud2k] {
    background: #f1f6fc;
    color: #657da3;
}

.psc-upload-row[b-miweoaud2k],
.psc-action-panel[b-miweoaud2k],
.psc-import-card[b-miweoaud2k],
.psc-preview-box[b-miweoaud2k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    border: 1px solid #d9e8f8;
    border-radius: 10px;
    background: #f8fbff;
    padding: 13px 14px;
}

.psc-upload-row>div[b-miweoaud2k],
.psc-import-card>div[b-miweoaud2k],
.psc-preview-box>div[b-miweoaud2k] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.psc-upload-row i[b-miweoaud2k],
.psc-import-card i[b-miweoaud2k],
.psc-preview-box i[b-miweoaud2k],
.psc-letter-pack i[b-miweoaud2k] {
    color: var(--psc-blue);
    font-size: 17px;
}

.psc-upload-row strong[b-miweoaud2k],
.psc-action-panel strong[b-miweoaud2k],
.psc-import-card strong[b-miweoaud2k],
.psc-preview-box strong[b-miweoaud2k],
.psc-letter-pack strong[b-miweoaud2k] {
    color: var(--psc-text);
    font-size: 12px;
    font-weight: 900;
}

.psc-action-panel[b-miweoaud2k] {
    margin-top: 0;
    margin-bottom: 12px;
}

.psc-letter-action-panel[b-miweoaud2k] {
    margin-top: 18px;
}

.psc-action-panel>div[b-miweoaud2k] {
    margin-right: auto;
}

.psc-table-wrap[b-miweoaud2k] {
    overflow-x: auto;
    border: 1px solid #e1ebf8;
    border-radius: 10px;
}

.psc-table[b-miweoaud2k] {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.psc-table th[b-miweoaud2k] {
    background: var(--psc-head);
    color: var(--psc-text);
    font-size: 11px;
    font-weight: 900;
    text-align: left;
    padding: 10px 12px;
}

.psc-table td[b-miweoaud2k] {
    border-bottom: 1px solid #e8eef7;
    color: var(--psc-text);
    font-size: 11px;
    font-weight: 800;
    padding: 9px 12px;
    vertical-align: middle;
}

.psc-table tr:last-child td[b-miweoaud2k] {
    border-bottom: 0;
}

.psc-table input[b-miweoaud2k] {
    height: 32px;
    padding: 0 9px;
}

.psc-verification-table[b-miweoaud2k] {
    min-width: 1220px;
}

.psc-person-name[b-miweoaud2k] {
    display: grid;
    gap: 3px;
    min-width: 150px;
}

.psc-person-name strong[b-miweoaud2k] {
    color: var(--psc-text);
    font-size: 11.5px;
    line-height: 1.25;
    font-weight: 900;
}

.psc-person-name span[b-miweoaud2k],
.psc-empty-detail[b-miweoaud2k] {
    color: var(--psc-muted);
    font-size: 10.5px;
    font-weight: 800;
}

.psc-check-status[b-miweoaud2k] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 14%, white);
    color: color-mix(in srgb, var(--tone) 80%, #0b2b63);
    font-size: 10.8px;
    line-height: 1.1;
    font-weight: 900;
    white-space: nowrap;
    padding: 6px 11px;
}

.psc-check-status i[b-miweoaud2k] {
    font-size: 13px;
    line-height: 1;
}

.psc-decision-select[b-miweoaud2k] {
    width: 148px;
    min-width: 148px;
    height: 36px;
    appearance: none;
    border: 1px solid #c7d8ef;
    border-radius: 999px;
    background:
        linear-gradient(135deg, transparent 50%, #214f9b 50%) calc(100% - 17px) 15px / 6px 6px no-repeat,
        linear-gradient(45deg, #214f9b 50%, transparent 50%) calc(100% - 13px) 15px / 6px 6px no-repeat,
        linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    color: var(--psc-text);
    font: inherit;
    font-size: 11.5px;
    font-weight: 900;
    outline: none;
    padding: 0 34px 0 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(13, 27, 62, .05);
}

.psc-decision-select:disabled[b-miweoaud2k] {
    background: #f1f6fc;
    color: #8293ad;
}

.psc-decision-select:not(:disabled):hover[b-miweoaud2k] {
    border-color: #9dbbe5;
    background-color: #f8fbff;
}

.psc-decision-select:not(:disabled):focus[b-miweoaud2k] {
    border-color: var(--psc-blue);
    box-shadow: 0 0 0 3px rgba(33, 79, 155, .14);
}

.psc-detail-btn[b-miweoaud2k] {
    min-height: 34px;
    border: 1px solid #b8cef0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
    color: var(--psc-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    padding: 6px 13px;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .05);
}

.psc-detail-btn i[b-miweoaud2k] {
    font-size: 13px;
}

.psc-detail-btn:hover[b-miweoaud2k],
.psc-detail-btn:focus[b-miweoaud2k] {
    border-color: var(--psc-blue);
    background: #e4f0ff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 79, 155, .12);
}

.psc-report-grid[b-miweoaud2k] {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.psc-report-grid article[b-miweoaud2k] {
    position: relative;
    overflow: hidden;
    min-height: 94px;
    border: 1px solid var(--psc-line);
    border-radius: 10px;
    background: #fff;
    padding: 14px;
}

.psc-report-grid article[b-miweoaud2k]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--psc-blue);
}

.psc-report-grid span[b-miweoaud2k] {
    color: var(--psc-muted);
    font-size: 11px;
    font-weight: 800;
}

.psc-report-grid strong[b-miweoaud2k] {
    display: block;
    margin-top: 8px;
    color: var(--psc-text);
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

.psc-report-grid small[b-miweoaud2k] {
    color: var(--psc-muted);
    font-size: 11px;
    font-weight: 800;
}

.psc-report-preview[b-miweoaud2k] {
    border: 1px solid #d9e8f8;
    border-radius: 10px;
    background: #fbfdff;
    margin-top: 14px;
    overflow: hidden;
}

.psc-report-preview-head[b-miweoaud2k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e4edf9;
    background: #f4f8ff;
    padding: 13px 14px;
}

.psc-report-preview-head>div:first-child[b-miweoaud2k] {
    display: grid;
    gap: 4px;
}

.psc-report-preview-head strong[b-miweoaud2k] {
    color: var(--psc-text);
    font-size: 12.5px;
    font-weight: 900;
}

.psc-report-preview-head span[b-miweoaud2k] {
    color: var(--psc-muted);
    font-size: 11px;
    font-weight: 800;
}

.psc-report-badges[b-miweoaud2k] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.psc-mini-badge[b-miweoaud2k] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 13%, white);
    color: color-mix(in srgb, var(--tone) 78%, #0b2b63);
    font-size: 10.5px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    padding: 5px 10px;
}

.psc-report-table-wrap[b-miweoaud2k] {
    overflow-x: auto;
}

.psc-report-table[b-miweoaud2k] {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.psc-report-table th[b-miweoaud2k] {
    background: #fff;
    border-bottom: 1px solid #e4edf9;
    color: var(--psc-text);
    font-size: 10.8px;
    font-weight: 900;
    text-align: left;
    padding: 10px 12px;
}

.psc-report-table td[b-miweoaud2k] {
    border-bottom: 1px solid #eef3fa;
    color: var(--psc-text);
    font-size: 11px;
    font-weight: 800;
    padding: 10px 12px;
    vertical-align: middle;
}

.psc-report-table tr:last-child td[b-miweoaud2k] {
    border-bottom: 0;
}

.psc-letter-pack[b-miweoaud2k] {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.psc-letter-pack article[b-miweoaud2k] {
    display: grid;
    gap: 6px;
    border: 1px solid #d9e8f8;
    border-radius: 10px;
    background: #f8fbff;
    padding: 14px;
}

.psc-footer-actions[b-miweoaud2k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e8eef7;
}

.psc-footer-actions>div:last-child[b-miweoaud2k] {
    display: flex;
    gap: 10px;
}

.psc-save-message[b-miweoaud2k] {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #167a58;
    font-size: 11px;
    font-weight: 900;
}

.psc-btn[b-miweoaud2k],
.psc-icon-btn[b-miweoaud2k] {
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.psc-btn[b-miweoaud2k] {
    min-height: 36px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
}

.psc-btn:disabled[b-miweoaud2k] {
    cursor: not-allowed;
    opacity: .55;
}

.psc-btn-primary[b-miweoaud2k] {
    border-color: var(--psc-text);
    background: var(--psc-text);
    color: #fff;
}

.psc-btn-disabled[b-miweoaud2k],
.psc-btn-disabled:disabled[b-miweoaud2k] {
    border-color: #cbd5e1;
    background: #e5e7eb;
    color: #64748b;
}

.psc-btn-light[b-miweoaud2k] {
    border-color: #c9dcf5;
    background: #fff;
    color: var(--psc-text);
}

.psc-icon-btn[b-miweoaud2k] {
    width: 32px;
    height: 32px;
    border: 1px solid #f1c8c8;
    background: #fff5f5;
    color: #bc3545;
}

.psc-chip[b-miweoaud2k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 14%, white);
    color: color-mix(in srgb, var(--tone) 76%, #0b2b63);
    font-size: 10.8px;
    line-height: 1;
    font-weight: 900;
    padding: 6px 11px;
}

.tone-blue[b-miweoaud2k] {
    --tone: var(--psc-blue);
}

.tone-orange[b-miweoaud2k] {
    --tone: var(--psc-orange);
}

.tone-green[b-miweoaud2k] {
    --tone: var(--psc-green);
}

.tone-red[b-miweoaud2k] {
    --tone: var(--psc-red);
}

.tone-neutral[b-miweoaud2k] {
    --tone: #b9c6da;
}

@media (max-width: 1180px) {
    .psc-shell[b-miweoaud2k] {
        grid-template-columns: 1fr;
    }

    .psc-summary-card[b-miweoaud2k] {
        position: static;
    }

    .psc-form-grid[b-miweoaud2k],
    .psc-report-grid[b-miweoaud2k],
    .psc-letter-pack[b-miweoaud2k] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .psc-form-grid .span-4[b-miweoaud2k] {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .psc-stepper[b-miweoaud2k] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 720px) {
    .psc-page[b-miweoaud2k] {
        margin: -16px;
        padding: 20px 14px 28px;
    }

    .psc-hero[b-miweoaud2k],
    .psc-card-head[b-miweoaud2k],
    .psc-report-preview-head[b-miweoaud2k],
    .psc-footer-actions[b-miweoaud2k],
    .psc-action-panel[b-miweoaud2k],
    .psc-upload-row[b-miweoaud2k],
    .psc-import-card[b-miweoaud2k],
    .psc-preview-box[b-miweoaud2k] {
        flex-direction: column;
        align-items: stretch;
    }

    .psc-hero h1[b-miweoaud2k] {
        font-size: 23px;
    }

    .psc-stepper[b-miweoaud2k],
    .psc-form-grid[b-miweoaud2k],
    .psc-form-grid.compact[b-miweoaud2k],
    .psc-report-grid[b-miweoaud2k],
    .psc-letter-pack[b-miweoaud2k] {
        grid-template-columns: 1fr;
    }

    .psc-form-grid .span-2[b-miweoaud2k],
    .psc-form-grid .span-4[b-miweoaud2k] {
        grid-column: span 1;
    }

    .psc-footer-actions>div:last-child[b-miweoaud2k] {
        width: 100%;
        flex-direction: column;
    }

    .psc-btn[b-miweoaud2k] {
        width: 100%;
    }
}


/* Step 5 : กล่องสร้างหนังสือแจ้งผลจากผลตรวจสอบ */
.psc-letter-generate-box[b-miweoaud2k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    border: 1px solid #cfe0f5;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    padding: 14px;
}

.psc-letter-generate-box>div[b-miweoaud2k] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.psc-letter-generate-box strong[b-miweoaud2k] {
    color: var(--psc-text);
    font-size: 12.5px;
    font-weight: 900;
}

.psc-letter-generate-box span[b-miweoaud2k] {
    color: var(--psc-muted);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 800;
}

.psc-letter-generate-box .psc-btn:disabled[b-miweoaud2k] {
    border-color: #cbd5e1;
    background: #e5e7eb;
    color: #64748b;
}

/* ===== Font size normalization: ส่วนใหญ่ของหน้า Create เป็น 14px ยกเว้นตำแหน่งสำคัญ ===== */
.psc-page :where(p,
    span,
    strong,
    small,
    button,
    th,
    td,
    label,
    select,
    input,
    textarea,
    div,
    i)[b-miweoaud2k] {
    font-size: 14px !important;
}

/* ยกเว้น: ACTIVITY 8 / CHK001 */
.psc-page .psc-kicker[b-miweoaud2k] {
    font-size: 10px !important;
}

/* ยกเว้น: เพิ่มข้อมูล Case */
.psc-page .psc-hero h1[b-miweoaud2k] {
    font-size: 28px !important;
}

/* ยกเว้น: sys-chk-003 */
.psc-page .psc-screen-code[b-miweoaud2k] {
    font-size: 10px !important;
}

/* ยกเว้น: เลขในการ์ด Step */
.psc-page .psc-step>span[b-miweoaud2k] {
    font-size: inherit !important;
}

/* ยกเว้น: ตำแหน่งหัวข้อ Step ในการ์ดหลัก เช่น Step 1 : ข้อมูล Case / Step 2 : เพิ่มรายชื่อ */
.psc-page .psc-card-head h2[b-miweoaud2k] {
    font-size: 18px !important;
}

/* ยกเว้น: เลข Summary/Report ที่เป็นตัวเลขใหญ่ในตำแหน่งเดิม */
.psc-page .psc-report-grid strong[b-miweoaud2k] {
    font-size: 28px !important;
}

/* ===== Rev: Step cards ให้สอดคล้องกับการ์ดสถานะหน้า Case List ===== */
.psc-page[b-miweoaud2k] {
    --psc-step1: #f59e0b;
    --psc-step2: #2563eb;
    --psc-step3: #06b6d4;
    --psc-step4: #7c3aed;
    --psc-step5: #f97316;
}

.psc-step.tone-step1[b-miweoaud2k] {
    --tone: var(--psc-step1);
}

.psc-step.tone-step2[b-miweoaud2k] {
    --tone: var(--psc-step2);
}

.psc-step.tone-step3[b-miweoaud2k] {
    --tone: var(--psc-step3);
}

.psc-step.tone-step4[b-miweoaud2k] {
    --tone: var(--psc-step4);
}

.psc-step.tone-step5[b-miweoaud2k] {
    --tone: var(--psc-step5);
}

.psc-step[b-miweoaud2k] {
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    min-height: 86px;
    border-color: color-mix(in srgb, var(--tone) 32%, #d7e2f1);
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tone) 6%, #ffffff) 100%);
}

.psc-step[b-miweoaud2k]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--tone);
}

.psc-step>span[b-miweoaud2k] {
    margin-left: 2px;
    background: color-mix(in srgb, var(--tone) 14%, #ffffff);
    color: color-mix(in srgb, var(--tone) 76%, #0b2b63);
}

.psc-step-title-line[b-miweoaud2k] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    min-width: 0;
}

.psc-step-title-line em[b-miweoaud2k] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 14%, #ffffff);
    color: color-mix(in srgb, var(--tone) 76%, #0b2b63);
    font-size: 13px;
    line-height: 1;
    font-style: normal;
    font-weight: 900;
    padding: 0 9px;
}

.psc-step-title-line strong[b-miweoaud2k] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--psc-text);
    font-size: 14px;
    line-height: 24px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psc-step small[b-miweoaud2k] {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.25;
}

.psc-step.done[b-miweoaud2k] {
    border-color: color-mix(in srgb, var(--tone) 46%, #ffffff);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 10%, #ffffff), #ffffff);
}

.psc-step.done>span[b-miweoaud2k],
.psc-step.active>span[b-miweoaud2k] {
    background: var(--tone);
    color: #fff;
}

.psc-step.active[b-miweoaud2k] {
    border-color: color-mix(in srgb, var(--tone) 70%, #ffffff);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 11%, #ffffff), #ffffff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 16%, #ffffff), 0 7px 18px rgba(13, 27, 62, .14);
}

.psc-step:disabled[b-miweoaud2k] {
    opacity: .72;
}

.psc-step:disabled>span[b-miweoaud2k] {
    background: #edf2f7;
    color: #7890ae;
}

@media (max-width: 1280px) {
    .psc-stepper[b-miweoaud2k] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ===== Rev: Step card ปรับสีอ่อน / Step ที่ยังไม่ถึงเป็นเทา / Step ที่บันทึกแล้วมีติ๊กถูก ===== */
.psc-step[b-miweoaud2k] {
    border-color: color-mix(in srgb, var(--tone) 22%, #d7e2f1) !important;
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tone) 4%, #ffffff) 100%) !important;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04) !important;
}

.psc-step[b-miweoaud2k]::before {
    width: 4px !important;
    background: color-mix(in srgb, var(--tone) 82%, #ffffff) !important;
}

.psc-step>span[b-miweoaud2k],
.psc-step-title-line em[b-miweoaud2k] {
    background: color-mix(in srgb, var(--tone) 9%, #ffffff) !important;
    color: color-mix(in srgb, var(--tone) 70%, #0b2b63) !important;
}

.psc-step.done[b-miweoaud2k] {
    border-color: color-mix(in srgb, var(--tone) 28%, #d7e2f1) !important;
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--tone) 5%, #ffffff) 100%) !important;
}

.psc-step.done>span[b-miweoaud2k] {
    background: color-mix(in srgb, var(--tone) 76%, #ffffff) !important;
    color: #ffffff !important;
}

.psc-step.active[b-miweoaud2k] {
    border-color: color-mix(in srgb, var(--tone) 38%, #d7e2f1) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 6%, #ffffff), #ffffff) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 10%, #ffffff), 0 5px 14px rgba(13, 27, 62, .09) !important;
}

.psc-step.active>span[b-miweoaud2k] {
    background: color-mix(in srgb, var(--tone) 78%, #ffffff) !important;
    color: #ffffff !important;
}

.psc-step-title-line[b-miweoaud2k] {
    width: 100% !important;
}

.psc-step-title-line strong[b-miweoaud2k] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.psc-step-check[b-miweoaud2k] {
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    margin-left: auto !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #16a34a !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    box-shadow: 0 2px 5px rgba(22, 163, 74, .20) !important;
}

/* Step ที่ยังกดไม่ถึง ให้เป็นโทนเทาก่อน */
.psc-step:disabled[b-miweoaud2k],
.psc-step:disabled:hover[b-miweoaud2k] {
    --tone: #b8c4d6 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    border-color: #d7e2f1 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%) !important;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .03) !important;
    transform: none !important;
}

.psc-step:disabled[b-miweoaud2k]::before {
    background: #c4cedd !important;
}

.psc-step:disabled>span[b-miweoaud2k],
.psc-step:disabled .psc-step-title-line em[b-miweoaud2k] {
    background: #eef2f7 !important;
    color: #7c8da6 !important;
}

.psc-step:disabled .psc-step-title-line strong[b-miweoaud2k],
.psc-step:disabled small[b-miweoaud2k] {
    color: #7c8da6 !important;
}

.psc-step:disabled .psc-step-check[b-miweoaud2k] {
    display: none !important;
}

/* ===== Rev: เอาการ์ด Current Case ออก และให้พื้นที่ฟอร์มหลักเต็มความกว้าง ===== */
.psc-shell[b-miweoaud2k] {
    grid-template-columns: minmax(0, 1fr) !important;
}

.psc-main-card[b-miweoaud2k] {
    width: 100%;
}

/* ===== Rev: Step 1 compact 4-column layout ให้เห็นปุ่มบันทึกโดยไม่ต้องเลื่อนเยอะ ===== */
.psc-main-card[b-miweoaud2k] {
    min-height: auto !important;
}

.psc-step1-head[b-miweoaud2k] {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}

.psc-step1-grid[b-miweoaud2k] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    align-items: start !important;
}

.psc-step1-grid label[b-miweoaud2k] {
    gap: 4px !important;
}

.psc-step1-grid span[b-miweoaud2k] {
    min-height: 18px !important;
    line-height: 1.15 !important;
}

.psc-step1-grid input[b-miweoaud2k],
.psc-step1-grid select[b-miweoaud2k] {
    height: 34px !important;
    padding: 0 10px !important;
}

.psc-step1-grid textarea[b-miweoaud2k] {
    min-height: 58px !important;
    max-height: 70px !important;
    resize: vertical !important;
    padding: 8px 10px !important;
}

.psc-step1-grid input[type="file"][b-miweoaud2k] {
    display: flex !important;
    align-items: center !important;
    height: 34px !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
}

.psc-step1-grid input[type="file"][b-miweoaud2k]::file-selector-button {
    height: 24px !important;
    margin-right: 8px !important;
    border: 1px solid #c9dcf5 !important;
    border-radius: 7px !important;
    background: #eef6ff !important;
    color: var(--psc-text) !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    padding: 0 9px !important;
}

.psc-step1-grid .span-2[b-miweoaud2k] {
    grid-column: span 2 !important;
}

.psc-step1-grid .span-4[b-miweoaud2k] {
    grid-column: span 4 !important;
}

.psc-footer-actions[b-miweoaud2k] {
    margin-top: 12px !important;
    padding-top: 12px !important;
}

@media (max-width: 1180px) {
    .psc-step1-grid[b-miweoaud2k] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .psc-step1-grid .span-2[b-miweoaud2k],
    .psc-step1-grid .span-4[b-miweoaud2k] {
        grid-column: span 2 !important;
    }
}

@media (max-width: 720px) {
    .psc-step1-grid[b-miweoaud2k] {
        grid-template-columns: 1fr !important;
    }

    .psc-step1-grid .span-2[b-miweoaud2k],
    .psc-step1-grid .span-4[b-miweoaud2k] {
        grid-column: span 1 !important;
    }
}

/* ===== Rev: Step 1 relaxed 4-column layout ใช้พื้นที่แนวตั้งให้โปร่งขึ้น ===== */
.psc-main-card[b-miweoaud2k] {
    padding: 18px 18px 16px !important;
}

.psc-step1-head[b-miweoaud2k] {
    margin-bottom: 14px !important;
    padding-bottom: 13px !important;
}

.psc-step1-head h2[b-miweoaud2k] {
    margin-bottom: 4px !important;
}

.psc-step1-grid[b-miweoaud2k] {
    gap: 13px 14px !important;
}

.psc-step1-grid label[b-miweoaud2k] {
    gap: 6px !important;
}

.psc-step1-grid span[b-miweoaud2k] {
    min-height: 20px !important;
    line-height: 1.25 !important;
}

.psc-step1-grid input[b-miweoaud2k],
.psc-step1-grid select[b-miweoaud2k] {
    height: 38px !important;
    padding: 0 12px !important;
}

.psc-step1-grid input[type="file"][b-miweoaud2k] {
    height: 38px !important;
    padding: 6px 10px !important;
}

.psc-step1-grid input[type="file"][b-miweoaud2k]::file-selector-button {
    height: 26px !important;
    margin-right: 10px !important;
    padding: 0 11px !important;
}

.psc-step1-grid textarea[b-miweoaud2k] {
    min-height: 76px !important;
    max-height: 92px !important;
    padding: 10px 12px !important;
    line-height: 1.45 !important;
}

.psc-footer-actions[b-miweoaud2k] {
    margin-top: 16px !important;
    padding-top: 14px !important;
}

/* ===== Rev: Step 1 เพิ่มระยะห่างแนวตั้งอีกเล็กน้อยตามพื้นที่ว่างด้านล่าง ===== */
.psc-main-card[b-miweoaud2k] {
    padding: 20px 18px 18px !important;
}

.psc-step1-head[b-miweoaud2k] {
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
}

.psc-step1-grid[b-miweoaud2k] {
    gap: 16px 14px !important;
}

.psc-step1-grid label[b-miweoaud2k] {
    gap: 7px !important;
}

.psc-step1-grid input[b-miweoaud2k],
.psc-step1-grid select[b-miweoaud2k] {
    height: 40px !important;
}

.psc-step1-grid input[type="file"][b-miweoaud2k] {
    height: 40px !important;
    padding: 7px 10px !important;
}

.psc-step1-grid textarea[b-miweoaud2k] {
    min-height: 84px !important;
    max-height: 100px !important;
}

.psc-footer-actions[b-miweoaud2k] {
    margin-top: 18px !important;
    padding-top: 16px !important;
}

/* ===== Rev: Step 1 dropdown placeholder สีเทาเมื่อยังไม่เลือก ===== */
.psc-step1-grid select.psc-placeholder-select[b-miweoaud2k] {
    color: #8a99ad !important;
    font-weight: 800 !important;
}

.psc-step1-grid select.psc-placeholder-select option[b-miweoaud2k] {
    color: var(--psc-text);
}

.psc-step1-grid select.psc-placeholder-select option[value=""][b-miweoaud2k] {
    color: #8a99ad;
}

/* ===== Rev: Step 2 เว้นระยะระหว่างการ์ดนำเข้า Excel กับเพิ่มรายชื่อเอง ===== */
.psc-import-card+.psc-action-panel[b-miweoaud2k] {
    margin-top: 14px !important;
}

.psc-action-panel+.psc-import-card[b-miweoaud2k] {
    margin-top: 14px !important;
}

/* ===== Rev: Step 2 เพิ่มปุ่ม Download Template Excel และจัดการ์ดนำเข้าให้ชัดเจน ===== */
.psc-excel-import-card[b-miweoaud2k] {
    align-items: stretch !important;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbf8 100%) !important;
    border-color: #cdeedd !important;
}

.psc-import-info[b-miweoaud2k] {
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.psc-import-info>div[b-miweoaud2k] {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.psc-import-info i[b-miweoaud2k] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 999px;
    background: #e2f9ef;
    color: #147a55 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.psc-import-actions[b-miweoaud2k] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.psc-import-actions .psc-btn[b-miweoaud2k] {
    min-width: 168px;
}

.psc-import-actions .psc-btn-primary[b-miweoaud2k] {
    min-width: 132px;
}

@media (max-width: 900px) {
    .psc-excel-import-card[b-miweoaud2k] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .psc-import-actions[b-miweoaud2k] {
        justify-content: stretch;
    }

    .psc-import-actions .psc-btn[b-miweoaud2k] {
        flex: 1 1 180px;
    }
}

/* ===== Rev: Step 2 ปรับ icon ปุ่มเลือก Excel + icon การ์ดเพิ่มรายชื่อเอง ===== */
.psc-import-actions .psc-btn-primary i[b-miweoaud2k] {
    color: #ffffff !important;
}

.psc-manual-person-card[b-miweoaud2k] {
    align-items: stretch !important;
}

.psc-manual-person-info[b-miweoaud2k] {
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-right: auto !important;
}

.psc-manual-person-info>i[b-miweoaud2k] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 999px;
    background: #eaf3ff;
    color: var(--psc-blue) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px !important;
}

.psc-manual-person-info>div[b-miweoaud2k] {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

@media (max-width: 900px) {
    .psc-manual-person-card[b-miweoaud2k] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .psc-manual-person-card .psc-btn[b-miweoaud2k] {
        width: 100%;
    }
}

/* ===== Rev: Step 2 เลือกไฟล์ Excel จากเครื่องจริง ===== */
.psc-file-picker-btn[b-miweoaud2k] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.psc-file-picker-btn input[type="file"][b-miweoaud2k] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ===== Rev: ปุ่มเลือกไฟล์ Excel แบบ Custom ไม่โชว์ Choose File เดิมของ Browser ===== */
.psc-excel-file-action[b-miweoaud2k] {
    display: inline-flex;
    align-items: center;
}

.psc-hidden-file-input[b-miweoaud2k] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.psc-excel-file-btn[b-miweoaud2k] {
    min-width: 138px !important;
    height: 38px !important;
    border-radius: 9px !important;
    background: var(--psc-text) !important;
    border-color: var(--psc-text) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(11, 43, 99, .16) !important;
}

.psc-excel-file-btn i[b-miweoaud2k] {
    color: #ffffff !important;
    font-size: 14px !important;
}

.psc-excel-file-btn:hover[b-miweoaud2k] {
    background: #123d82 !important;
    border-color: #123d82 !important;
}

/* ===== Rev: ซ่อน Native Choose File ของ InputFile แบบไม่พึ่ง CSS isolation ===== */
.psc-excel-file-action[b-miweoaud2k] {
    position: relative;
}

/* ===== Rev: ปุ่มลบรายการ (Delete All / Delete Selected) ===== */
.psc-btn-danger[b-miweoaud2k] {
    border-color: var(--psc-red);
    background: var(--psc-red);
    color: #fff;
}

.psc-btn-danger:hover:not(:disabled)[b-miweoaud2k] {
    background: #d03d4c;
    border-color: #d03d4c;
}

.psc-btn-danger-outline[b-miweoaud2k] {
    border-color: #f1c8c8;
    background: #fff5f5;
    color: var(--psc-red);
}

.psc-btn-danger-outline:hover:not(:disabled)[b-miweoaud2k] {
    background: #ffe3e3;
}

.psc-manual-actions[b-miweoaud2k] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-right: 0 !important;
    margin-left: auto !important;
}

@media (max-width: 900px) {
    .psc-manual-actions[b-miweoaud2k] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .psc-manual-actions .psc-btn[b-miweoaud2k] {
        width: 100%;
    }
}

/* ===== Rev: ปุ่มพิมพ์รายงาน 3 รูปแบบ (PDF, Word, Excel) ===== */
.psc-btn-pdf[b-miweoaud2k] {
    border-color: #f5c2c2;
    background: #fff5f5;
    color: #c92a2a;
}

.psc-btn-pdf:hover[b-miweoaud2k] {
    background: #ffe3e3;
}

.psc-btn-word[b-miweoaud2k] {
    border-color: #c0ebf5;
    background: #f0faff;
    color: #1c7ed6;
}

.psc-btn-word:hover[b-miweoaud2k] {
    background: #e7f5ff;
}

.psc-btn-excel[b-miweoaud2k] {
    border-color: #c3fae8;
    background: #f4fbf7;
    color: #2b8a3e;
}

.psc-btn-excel:hover[b-miweoaud2k] {
    background: #e6fcf5;
}
/* /Pages/PersonScreen/PersonScreenCaseDetailPage.razor.rz.scp.css */
.psd-page[b-hfb033dwky] {
    --psd-bg: #eaf2fb;
    --psd-card: #ffffff;
    --psd-line: #d7e2f1;
    --psd-head: #e8f1fb;
    --psd-text: #0b2b63;
    --psd-muted: #6e82a3;
    --psd-blue: #214f9b;
    --psd-orange: #f5a623;
    --psd-green: #1fc989;
    --psd-soft-blue: #e8f1ff;
    --psd-soft-orange: #fff3ce;
    --psd-soft-green: #e2f9ef;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--psd-bg);
    color: var(--psd-text);
}

.psd-hero[b-hfb033dwky],
.psd-card-head[b-hfb033dwky],
.psd-hero-actions[b-hfb033dwky],
.psd-doc-box[b-hfb033dwky] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.psd-hero[b-hfb033dwky] {
    margin-bottom: 16px;
}

.psd-hero-actions[b-hfb033dwky] {
    align-items: center;
    padding-top: 14px;
}

.psd-kicker[b-hfb033dwky] {
    color: var(--psd-orange);
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 6px;
}

.psd-hero h1[b-hfb033dwky] {
    margin: 0;
    color: var(--psd-text);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 900;
}

.psd-hero p[b-hfb033dwky] {
    margin: 7px 0 0;
    color: var(--psd-muted);
    font-size: 13px;
    font-weight: 700;
}

.psd-screen-code[b-hfb033dwky] {
    color: #8aa0bd;
    font-size: 10px;
    font-weight: 900;
}

.psd-btn[b-hfb033dwky],
.psd-edit-step-btn[b-hfb033dwky],
.psd-link-btn[b-hfb033dwky] {
    border: 1px solid var(--psd-line);
    border-radius: 8px;
    background: #fff;
    color: var(--psd-text);
    font-size: 12px;
    font-weight: 900;
    padding: 9px 14px;
    cursor: pointer;
}

.psd-btn-light[b-hfb033dwky] {
    background: #fff;
}

.psd-link-btn[b-hfb033dwky] {
    color: var(--psd-blue);
    background: #f7fbff;
    border-color: #c9d9ef;
}

.psd-summary-strip[b-hfb033dwky] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.psd-summary-strip article[b-hfb033dwky],
.psd-card[b-hfb033dwky],
.psd-step-card[b-hfb033dwky] {
    background: var(--psd-card);
    border: 1px solid var(--psd-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
}

.psd-summary-strip article[b-hfb033dwky] {
    padding: 12px 14px;
}

.psd-summary-strip span[b-hfb033dwky],
.psd-info-list span[b-hfb033dwky],
.psd-card-head p[b-hfb033dwky],
.psd-step-card small[b-hfb033dwky],
.psd-step-body small[b-hfb033dwky],
.psd-doc-box span[b-hfb033dwky] {
    color: var(--psd-muted);
    font-size: 11px;
    font-weight: 800;
}

.psd-summary-strip strong[b-hfb033dwky] {
    display: block;
    margin-top: 5px;
    color: var(--psd-text);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
}

.psd-step-grid[b-hfb033dwky] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.psd-step-card[b-hfb033dwky] {
    min-height: 186px;
    padding: 14px;
    display: flex;
    flex-direction: column;
}

.psd-step-card header[b-hfb033dwky] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-height: 48px;
}

.psd-step-no[b-hfb033dwky] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: var(--psd-soft-blue);
    color: var(--psd-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.psd-step-card strong[b-hfb033dwky] {
    color: var(--psd-text);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
}

.psd-step-body[b-hfb033dwky] {
    margin-top: 12px;
}

.psd-step-body p[b-hfb033dwky] {
    min-height: 38px;
    margin: 8px 0 6px;
    color: #38547d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.psd-step-card footer[b-hfb033dwky] {
    margin-top: auto;
}

.psd-edit-step-btn[b-hfb033dwky] {
    width: 100%;
    margin-top: 12px;
    background: #f8fbff;
    border-color: #c9d9ef;
    color: var(--psd-blue);
}

.psd-step-card.tone-green[b-hfb033dwky] {
    border-color: #b8ebd8;
    background: linear-gradient(180deg, #fff 0%, #f5fffa 100%);
}

.psd-step-card.tone-orange[b-hfb033dwky] {
    border-color: #ffe0a3;
    background: linear-gradient(180deg, #fff 0%, #fff9ec 100%);
}

.psd-step-card.tone-blue[b-hfb033dwky] {
    border-color: #c8d9f2;
    background: linear-gradient(180deg, #fff 0%, #f5f9ff 100%);
}

.psd-step-card.tone-step1[b-hfb033dwky] {
    --tone: #f59e0b;
}

.psd-step-card.tone-step2[b-hfb033dwky] {
    --tone: #2563eb;
}

.psd-step-card.tone-step3[b-hfb033dwky] {
    --tone: #06b6d4;
}

.psd-step-card.tone-step4[b-hfb033dwky] {
    --tone: #7c3aed;
}

.psd-step-card.tone-step5[b-hfb033dwky] {
    --tone: #f97316;
}

.psd-step-card.tone-step1[b-hfb033dwky],
.psd-step-card.tone-step2[b-hfb033dwky],
.psd-step-card.tone-step3[b-hfb033dwky],
.psd-step-card.tone-step4[b-hfb033dwky],
.psd-step-card.tone-step5[b-hfb033dwky] {
    border-color: color-mix(in srgb, var(--tone) 36%, #ffffff);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 7%, #ffffff), #ffffff);
}

.psd-step-title-line[b-hfb033dwky] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 28px;
    width: 100%;
}

.psd-step-label[b-hfb033dwky] {
    flex: 0 0 auto;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 14%, #ffffff);
    color: color-mix(in srgb, var(--tone) 76%, #0b2b63);
    font-size: 13px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
}

.psd-step-title-line strong[b-hfb033dwky] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--psd-text);
    font-size: 14px;
    line-height: 24px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psd-step-work[b-hfb033dwky] {
    margin: 0 0 4px !important;
    min-height: 0 !important;
    color: var(--psd-text) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

.psd-main-grid[b-hfb033dwky],
.psd-bottom-grid[b-hfb033dwky] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.psd-main-grid[b-hfb033dwky] {
    margin-bottom: 14px;
}

.psd-bottom-grid[b-hfb033dwky] {
    margin-top: 18px;
    margin-bottom: 14px;
}

.psd-card[b-hfb033dwky] {
    padding: 16px;
}

.psd-card-head[b-hfb033dwky] {
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8eef7;
}

.psd-card-head.compact[b-hfb033dwky] {
    min-height: 70px;
}

.psd-card-head h2[b-hfb033dwky] {
    margin: 0;
    color: var(--psd-text);
    font-size: 15px;
    font-weight: 900;
}

.psd-card-head p[b-hfb033dwky] {
    margin: 4px 0 0;
}

.psd-info-list[b-hfb033dwky] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

.psd-info-list div[b-hfb033dwky] {
    border-bottom: 1px solid #edf2f8;
    padding: 7px 0;
}

.psd-info-list strong[b-hfb033dwky] {
    display: block;
    margin-top: 4px;
    color: var(--psd-text);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 900;
}

.psd-timeline[b-hfb033dwky] {
    display: grid;
    gap: 0;
    padding: 8px 0 2px;
}

.psd-time-item[b-hfb033dwky] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    position: relative;
    min-height: 46px;
}

.psd-time-item:not(:last-child)[b-hfb033dwky]::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 20px;
    width: 2px;
    height: calc(100% - 8px);
    background: #d7e3f2;
}

.psd-time-dot[b-hfb033dwky] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid #cbd8e8;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.psd-time-content[b-hfb033dwky] {
    padding: 0 0 12px;
}

.psd-time-item strong[b-hfb033dwky] {
    display: block;
    color: var(--psd-text);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 900;
    margin-top: -1px;
}

.psd-time-item small[b-hfb033dwky] {
    display: block;
    margin-top: 4px;
    color: var(--psd-muted);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 800;
}

.psd-time-item.tone-green .psd-time-dot[b-hfb033dwky] {
    border-color: var(--psd-green);
    background: var(--psd-green);
}

.psd-time-item.tone-green:not(:last-child)[b-hfb033dwky]::after {
    background: #d7e3f2;
}

.psd-time-item.tone-orange .psd-time-dot[b-hfb033dwky] {
    border-color: var(--psd-orange);
    background: var(--psd-orange);
}

.psd-time-item.tone-orange:not(:last-child)[b-hfb033dwky]::after {
    background: #d7e3f2;
}

.psd-time-item.tone-neutral .psd-time-dot[b-hfb033dwky] {
    border-color: #cbd8e8;
    background: #fff;
}

.psd-time-item.tone-neutral strong[b-hfb033dwky],
.psd-time-item.tone-neutral small[b-hfb033dwky] {
    color: #7b8ea9;
}


.psd-table-wrap[b-hfb033dwky] {
    overflow-x: auto;
}

.psd-table[b-hfb033dwky] {
    width: 100%;
    border-collapse: collapse;
    min-width: 840px;
}

.psd-table th[b-hfb033dwky] {
    background: var(--psd-head);
    color: #60779d;
    font-size: 11px;
    text-align: left;
    padding: 10px 12px;
}

.psd-table td[b-hfb033dwky] {
    border-bottom: 1px solid #e6edf6;
    color: #244266;
    font-size: 12px;
    padding: 10px 12px;
}

.psd-table strong[b-hfb033dwky] {
    color: var(--psd-text);
    font-weight: 900;
}

.psd-chip[b-hfb033dwky] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 4px 12px;
    color: var(--psd-text);
    background: #edf4ff;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.psd-chip.tone-green[b-hfb033dwky],
.tone-green .psd-chip[b-hfb033dwky],
.psd-chip.tone-green[b-hfb033dwky] {
    background: var(--psd-soft-green);
    color: #157a56;
}

.psd-chip.tone-orange[b-hfb033dwky],
.tone-orange .psd-chip[b-hfb033dwky],
.psd-chip.tone-orange[b-hfb033dwky] {
    background: var(--psd-soft-orange);
    color: #a86100;
}

.psd-chip.tone-blue[b-hfb033dwky],
.tone-blue .psd-chip[b-hfb033dwky],
.psd-chip.tone-blue[b-hfb033dwky] {
    background: var(--psd-soft-blue);
    color: var(--psd-blue);
}

.psd-chip.tone-neutral[b-hfb033dwky],
.tone-neutral .psd-chip[b-hfb033dwky],
.psd-chip.tone-neutral[b-hfb033dwky] {
    background: #eef3f9;
    color: #6c7f9e;
}

.psd-doc-box[b-hfb033dwky] {
    justify-content: flex-start;
    align-items: center;
    padding: 14px;
    border: 1px solid #e4edf8;
    border-radius: 10px;
    background: #f8fbff;
    min-height: 72px;
}

.psd-doc-box i[b-hfb033dwky] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e8f1ff;
    color: var(--psd-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.psd-doc-box strong[b-hfb033dwky] {
    display: block;
    color: var(--psd-text);
    font-size: 13px;
    font-weight: 900;
}

@media (max-width: 1180px) {
    .psd-summary-strip[b-hfb033dwky] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .psd-step-grid[b-hfb033dwky],
    .psd-main-grid[b-hfb033dwky],
    .psd-bottom-grid[b-hfb033dwky] {
        grid-template-columns: 1fr;
    }
}


/* ===== Timeline final override: ให้สถานะการดำเนินการกลับเป็นเส้นทางแบบเดิม ===== */
.psd-progress-card .psd-timeline[b-hfb033dwky] {
    display: grid !important;
    gap: 0 !important;
    padding: 8px 0 2px !important;
}

.psd-progress-card .psd-time-item[b-hfb033dwky] {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: flex-start !important;
    position: relative !important;
    min-height: 46px !important;
}

.psd-progress-card .psd-time-item:not(:last-child)[b-hfb033dwky]::after {
    content: "" !important;
    position: absolute !important;
    left: 9px !important;
    top: 20px !important;
    width: 2px !important;
    height: calc(100% - 8px) !important;
    background: #d7e3f2 !important;
}

.psd-progress-card .psd-time-item>span[b-hfb033dwky],
.psd-progress-card .psd-time-dot[b-hfb033dwky] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-top: 2px !important;
    border-radius: 50% !important;
    border: 2px solid #cbd8e8 !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.psd-progress-card .psd-time-item>div[b-hfb033dwky],
.psd-progress-card .psd-time-content[b-hfb033dwky] {
    display: block !important;
    padding: 0 0 12px !important;
}

.psd-progress-card .psd-time-item strong[b-hfb033dwky] {
    display: block !important;
    color: var(--psd-text) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    margin: -1px 0 0 !important;
}

.psd-progress-card .psd-time-item small[b-hfb033dwky] {
    display: block !important;
    margin-top: 4px !important;
    color: var(--psd-muted) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

.psd-progress-card .psd-time-item.tone-green>span[b-hfb033dwky],
.psd-progress-card .psd-time-item.tone-green .psd-time-dot[b-hfb033dwky] {
    border-color: var(--psd-green) !important;
    background: var(--psd-green) !important;
}

.psd-progress-card .psd-time-item.tone-orange>span[b-hfb033dwky],
.psd-progress-card .psd-time-item.tone-orange .psd-time-dot[b-hfb033dwky] {
    border-color: var(--psd-orange) !important;
    background: var(--psd-orange) !important;
}

.psd-progress-card .psd-time-item.tone-neutral>span[b-hfb033dwky],
.psd-progress-card .psd-time-item.tone-neutral .psd-time-dot[b-hfb033dwky] {
    border-color: #cbd8e8 !important;
    background: #fff !important;
}

/* ===== Rev6: ปรับการ์ดด้านบน + รอดำเนินการสีเทา + สถานะตรงกัน ===== */
.psd-summary-strip[b-hfb033dwky] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.psd-summary-strip article[b-hfb033dwky],
.psd-summary-card[b-hfb033dwky] {
    position: relative;
    overflow: hidden;
    min-height: 78px;
    padding: 15px 18px;
    border: 1px solid #d6e4f5;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 6px 16px rgba(13, 42, 92, .06);
}

.psd-summary-strip article[b-hfb033dwky]::before,
.psd-summary-card[b-hfb033dwky]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: #9db9e6;
}

.psd-summary-card.is-status[b-hfb033dwky]::before {
    background: #f5a623;
}

.psd-chip.tone-neutral[b-hfb033dwky],
.tone-neutral .psd-chip[b-hfb033dwky] {
    background: #eef2f7 !important;
    color: #718198 !important;
}

.psd-step-card.tone-neutral[b-hfb033dwky] {
    border-color: #d8e2ef;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

@media (max-width: 1180px) {
    .psd-summary-strip[b-hfb033dwky] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== Rev7: ทำ chip สถานะให้สี/ขนาดเท่ากันทั้งการ์ดบนและ Step card ===== */
.psd-page .psd-chip.tone-orange[b-hfb033dwky],
.psd-page .tone-orange .psd-chip[b-hfb033dwky],
.psd-page .psd-summary-card .psd-chip.tone-orange[b-hfb033dwky] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 28px !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    background: #fff3ce !important;
    color: #a86100 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.psd-page .psd-summary-card.is-status strong[b-hfb033dwky] {
    display: flex !important;
    align-items: center !important;
    min-height: 34px !important;
    margin-top: 4px !important;
}

.psd-page .psd-step-body .psd-chip[b-hfb033dwky] {
    margin-bottom: 2px !important;
}

.psd-page .psd-summary-card[b-hfb033dwky],
.psd-page .psd-summary-strip article[b-hfb033dwky] {
    min-height: 88px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.psd-page .psd-step-card[b-hfb033dwky] {
    min-height: 156px !important;
}

/* ===== Rev8: status pill สี/ขนาดเดียวกันทั้งการ์ดบนและ Step card ===== */
.psd-status-pill[b-hfb033dwky] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    min-height: 28px !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.psd-status-pill.tone-orange[b-hfb033dwky] {
    background: #fff3ce !important;
    color: #a86100 !important;
}

.psd-status-pill.tone-neutral[b-hfb033dwky] {
    background: #eef2f7 !important;
    color: #718198 !important;
}

.psd-status-pill.tone-green[b-hfb033dwky] {
    background: #e2f9ef !important;
    color: #157a56 !important;
}

.psd-summary-card.is-status strong[b-hfb033dwky] {
    display: block !important;
    width: auto !important;
    min-height: auto !important;
    margin-top: 0 !important;
}

.psd-step-body[b-hfb033dwky] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* ===== Rev9: ตารางรายชื่อ ตัดผลเบื้องต้น และใช้สถานะตรวจสอบ 3 แบบ ===== */
.psd-verification-status[b-hfb033dwky] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 900;
    white-space: nowrap;
}

.psd-verification-status i[b-hfb033dwky] {
    font-size: 13px;
    line-height: 1;
}

.psd-verification-status.tone-neutral[b-hfb033dwky] {
    background: #eef2f7;
    color: #6f7f96;
}

.psd-verification-status.tone-green[b-hfb033dwky] {
    background: #e2f9ef;
    color: #157a56;
}

.psd-verification-status.tone-red[b-hfb033dwky] {
    background: #ffe9e9;
    color: #c93131;
}

/* ===== Rev10: Detail Page 5 Steps + Approval Flow ===== */
.psd-step-grid[b-hfb033dwky] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.psd-step-card[b-hfb033dwky] {
    min-height: 156px;
}

.psd-verification-card[b-hfb033dwky] {
    margin-bottom: 14px;
}

.psd-verification-summary-grid[b-hfb033dwky] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.psd-verification-summary-grid article[b-hfb033dwky] {
    border: 1px solid #e4edf8;
    border-radius: 10px;
    padding: 14px 16px;
    background: #f8fbff;
}

.psd-verification-summary-grid article.tone-green[b-hfb033dwky] {
    border-color: #b8ebd8;
    background: #f4fff9;
}

.psd-verification-summary-grid article.tone-red[b-hfb033dwky] {
    border-color: #f5c2c2;
    background: #fff6f6;
}

.psd-verification-summary-grid span[b-hfb033dwky] {
    display: block;
    color: #6e82a3;
    font-size: 11px;
    font-weight: 900;
}

.psd-verification-summary-grid strong[b-hfb033dwky] {
    display: block;
    margin-top: 5px;
    color: #0b2b63;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.psd-manager-flow-card[b-hfb033dwky] {
    margin-top: 14px;
}

.psd-manager-flow[b-hfb033dwky] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.psd-manager-flow article[b-hfb033dwky] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 78px;
    border: 1px solid #e4edf8;
    border-radius: 10px;
    background: #f8fbff;
    padding: 14px;
}

.psd-manager-flow article.active[b-hfb033dwky] {
    border-color: #b8ebd8;
    background: #f5fffa;
}

.psd-manager-flow article>span[b-hfb033dwky] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f1ff;
    color: #214f9b;
    font-weight: 900;
}

.psd-manager-flow article.active>span[b-hfb033dwky] {
    background: #1fc989;
    color: #fff;
}

.psd-manager-flow strong[b-hfb033dwky] {
    display: block;
    color: #0b2b63;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 900;
}

.psd-manager-flow small[b-hfb033dwky] {
    display: block;
    margin-top: 4px;
    color: #6e82a3;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.psd-manager-actions[b-hfb033dwky] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #e8eef7;
}

.psd-flow-btn[b-hfb033dwky] {
    border: 1px solid #c9dcf5;
    border-radius: 8px;
    background: #fff;
    color: #0b2b63;
    font-size: 12px;
    font-weight: 900;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.psd-flow-btn.tone-orange[b-hfb033dwky] {
    border-color: #f7d88e;
    background: #fff3ce;
    color: #9a5b00;
}

.psd-flow-btn.tone-blue[b-hfb033dwky] {
    border-color: #c9dcf5;
    background: #eaf3ff;
    color: #173a78;
}

.psd-flow-btn.tone-green[b-hfb033dwky] {
    border-color: #b8ebd8;
    background: #e2f9ef;
    color: #147a55;
}

.psd-flow-status[b-hfb033dwky] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.psd-flow-status.tone-blue[b-hfb033dwky] {
    background: #eaf3ff;
    color: #173a78;
}

.psd-flow-status.tone-green[b-hfb033dwky] {
    background: #e2f9ef;
    color: #147a55;
}

.psd-status-pill.tone-step5[b-hfb033dwky],
.psd-status-pill.tone-step6[b-hfb033dwky],
.psd-status-pill.tone-step7[b-hfb033dwky],
.psd-status-pill.tone-step8[b-hfb033dwky],
.psd-status-pill.tone-step9[b-hfb033dwky],
.psd-status-pill.tone-step10[b-hfb033dwky],
.psd-status-pill.tone-step11[b-hfb033dwky],
.psd-flow-btn.tone-step6[b-hfb033dwky],
.psd-flow-btn.tone-step7[b-hfb033dwky],
.psd-flow-btn.tone-step8[b-hfb033dwky],
.psd-flow-btn.tone-step9[b-hfb033dwky],
.psd-flow-btn.tone-step10[b-hfb033dwky],
.psd-flow-btn.tone-step11[b-hfb033dwky],
.psd-flow-status.tone-step6[b-hfb033dwky],
.psd-flow-status.tone-step7[b-hfb033dwky],
.psd-flow-status.tone-step8[b-hfb033dwky],
.psd-flow-status.tone-step9[b-hfb033dwky],
.psd-flow-status.tone-step10[b-hfb033dwky],
.psd-flow-status.tone-step11[b-hfb033dwky] {
    background: color-mix(in srgb, var(--tone) 14%, #ffffff) !important;
    color: color-mix(in srgb, var(--tone) 76%, #0b2b63) !important;
}

.psd-flow-btn.tone-step6[b-hfb033dwky],
.psd-flow-btn.tone-step7[b-hfb033dwky],
.psd-flow-btn.tone-step8[b-hfb033dwky],
.psd-flow-btn.tone-step9[b-hfb033dwky],
.psd-flow-btn.tone-step10[b-hfb033dwky],
.psd-flow-btn.tone-step11[b-hfb033dwky] {
    border-color: color-mix(in srgb, var(--tone) 45%, #ffffff) !important;
}

.psd-modal-backdrop[b-hfb033dwky] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 27, 63, .34);
}

.psd-modal-card[b-hfb033dwky] {
    width: min(520px, 100%);
    border: 1px solid #d7e2f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(8, 27, 63, .22);
    overflow: hidden;
}

.psd-modal-head[b-hfb033dwky] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e5edf7;
}

.psd-modal-head h2[b-hfb033dwky] {
    margin: 0;
    color: #0b2b63;
    font-size: 18px;
    font-weight: 900;
}

.psd-modal-head p[b-hfb033dwky] {
    margin: 5px 0 0;
    color: #6e82a3;
    font-size: 12px;
    font-weight: 700;
}

.psd-modal-close[b-hfb033dwky] {
    width: 32px;
    height: 32px;
    border: 1px solid #d7e2f1;
    border-radius: 8px;
    background: #fff;
    color: #0b2b63;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.psd-modal-body[b-hfb033dwky] {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
}

.psd-modal-body label[b-hfb033dwky] {
    display: grid;
    gap: 7px;
}

.psd-modal-body span[b-hfb033dwky] {
    color: #0b2b63;
    font-size: 12px;
    font-weight: 900;
}

.psd-modal-body select[b-hfb033dwky],
.psd-modal-body input[b-hfb033dwky] {
    height: 40px;
    border: 1px solid #d7e2f1;
    border-radius: 8px;
    padding: 0 12px;
    color: #0b2b63;
    font-size: 12px;
    font-weight: 700;
    outline: none;
}

.psd-modal-actions[b-hfb033dwky] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid #e5edf7;
}

@media (max-width: 1180px) {

    .psd-step-grid[b-hfb033dwky],
    .psd-manager-flow[b-hfb033dwky],
    .psd-verification-summary-grid[b-hfb033dwky] {
        grid-template-columns: 1fr;
    }
}

/* ===== Rev11: จัด Layout หน้า Detail ให้การ์ดสถานะอยู่ซ้าย และการดำเนินการหลังสร้างหนังสืออยู่ขวา ===== */
.psd-top-work-grid[b-hfb033dwky] {
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    align-items: stretch;
    gap: 16px;
    margin-bottom: 18px;
}

.psd-top-work-grid .psd-progress-card[b-hfb033dwky],
.psd-top-work-grid .psd-manager-flow-card[b-hfb033dwky] {
    min-height: 100%;
}

.psd-top-work-grid .psd-manager-flow-card[b-hfb033dwky] {
    margin-top: 0;
}

.psd-top-work-grid .psd-manager-flow[b-hfb033dwky] {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.psd-top-work-grid .psd-manager-flow article[b-hfb033dwky] {
    min-height: 66px;
    padding: 12px 14px;
}

.psd-top-work-grid .psd-manager-actions[b-hfb033dwky] {
    padding-top: 12px;
}

.psd-top-work-grid .psd-card-head[b-hfb033dwky] {
    align-items: flex-start;
    gap: 12px;
}

.psd-top-work-grid .psd-card-head .psd-status-pill[b-hfb033dwky] {
    margin-top: 2px;
    white-space: nowrap;
}

.psd-case-detail-card[b-hfb033dwky] {
    margin-bottom: 14px;
}

.psd-case-detail-card .psd-info-list[b-hfb033dwky] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.psd-verification-card[b-hfb033dwky] {
    margin-top: 22px;
    margin-bottom: 14px;
}

@media (max-width: 1180px) {
    .psd-top-work-grid[b-hfb033dwky] {
        grid-template-columns: 1fr;
    }

    .psd-case-detail-card .psd-info-list[b-hfb033dwky] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .psd-case-detail-card .psd-info-list[b-hfb033dwky] {
        grid-template-columns: 1fr;
    }
}

/* ===== Rev12: ปรับ Font Size ส่วนใหญ่ของหน้า Detail เป็น 14px ยกเว้นหัวข้อหลัก/รหัสหน้า/เลข Step/Summary Number ===== */
.psd-page :where(p, span, strong, small, button, th, td, label, select, input, textarea, h2, div)[b-hfb033dwky] {
    font-size: 14px !important;
}

.psd-page .psd-kicker[b-hfb033dwky] {
    font-size: 10px !important;
}

.psd-page .psd-hero h1[b-hfb033dwky] {
    font-size: 28px !important;
}

.psd-page .psd-screen-code[b-hfb033dwky] {
    font-size: 10px !important;
}

.psd-page .psd-step-no[b-hfb033dwky] {
    font-size: 16px !important;
}

.psd-page .psd-verification-summary-grid strong[b-hfb033dwky] {
    font-size: 26px !important;
}

.psd-page .psd-modal-close[b-hfb033dwky] {
    font-size: 20px !important;
}

/* ===== Rev13: Step cards ใช้สถานะและจังหวะเดียวกับ KPI cards ของหน้า List ===== */
.psd-page .tone-step1[b-hfb033dwky] {
    --tone: #f59e0b;
}

.psd-page .tone-step2[b-hfb033dwky] {
    --tone: #2563eb;
}

.psd-page .tone-step3[b-hfb033dwky] {
    --tone: #06b6d4;
}

.psd-page .tone-step4[b-hfb033dwky] {
    --tone: #7c3aed;
}

.psd-page .tone-step5[b-hfb033dwky] {
    --tone: #f97316;
}

.psd-page .tone-step6[b-hfb033dwky] {
    --tone: #db2777;
}

.psd-page .tone-step7[b-hfb033dwky] {
    --tone: #4f46e5;
}

.psd-page .tone-step8[b-hfb033dwky] {
    --tone: #16a34a;
}

.psd-page .tone-step9[b-hfb033dwky] {
    --tone: #0891b2;
}

.psd-page .tone-step10[b-hfb033dwky] {
    --tone: #9333ea;
}

.psd-page .tone-step11[b-hfb033dwky] {
    --tone: #0d9488;
}

.psd-page .psd-step-grid[b-hfb033dwky] {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.psd-page .psd-step-card[b-hfb033dwky] {
    min-height: 156px !important;
    border-color: color-mix(in srgb, var(--tone) 36%, #ffffff) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 7%, #ffffff), #ffffff) !important;
}

.psd-page .psd-step-card header[b-hfb033dwky] {
    min-height: 30px !important;
}

.psd-page .psd-step-title-line[b-hfb033dwky] {
    align-items: center !important;
    min-height: 28px !important;
}

.psd-page .psd-step-label[b-hfb033dwky] {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 9px !important;
    background: color-mix(in srgb, var(--tone) 14%, #ffffff) !important;
    color: color-mix(in srgb, var(--tone) 76%, #0b2b63) !important;
    line-height: 1 !important;
}

.psd-page .psd-step-title-line strong[b-hfb033dwky] {
    overflow: hidden !important;
    line-height: 24px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.psd-page .psd-step-state-marker[b-hfb033dwky] {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

.psd-page .psd-step-state-marker.is-done[b-hfb033dwky] {
    background: #16a34a !important;
    color: #ffffff !important;
}

.psd-page .psd-step-state-marker.is-waiting[b-hfb033dwky] {
    width: auto !important;
    min-width: 34px !important;
    padding: 0 8px !important;
    background: #eef2f7 !important;
    color: #718198 !important;
}

.psd-page .psd-step-card.is-waiting[b-hfb033dwky] {
    border-style: dashed !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

.psd-page .psd-step-body[b-hfb033dwky] {
    margin-top: 12px !important;
    min-height: 22px !important;
}

.psd-page .psd-step-body small[b-hfb033dwky] {
    color: #6e82a3 !important;
    font-weight: 800 !important;
}

.psd-page .psd-manager-flow article[b-hfb033dwky] {
    border-left: 4px solid #d8e2ef !important;
}

.psd-page .psd-manager-flow article.active[b-hfb033dwky] {
    border-left-color: #16a34a !important;
}

.psd-page .psd-manager-flow article.active.tone-orange[b-hfb033dwky] {
    border-left-color: #ea580c !important;
    background: #fff7ed !important;
}

.psd-page .psd-manager-flow article.active.tone-orange > .psd-manager-step-label[b-hfb033dwky] {
    background: #ea580c !important;
    color: #ffffff !important;
}

.psd-page .psd-manager-flow article.active.tone-red[b-hfb033dwky] {
    border-left-color: #dc2626 !important;
    background: #fef2f2 !important;
}

.psd-page .psd-manager-flow article.active.tone-red > .psd-manager-step-label[b-hfb033dwky] {
    background: #dc2626 !important;
    color: #ffffff !important;
}

.psd-page .psd-manager-flow article.active.tone-green[b-hfb033dwky] {
    border-left-color: #16a34a !important;
    background: #f0fdf4 !important;
}

.psd-page .psd-manager-flow article.active.tone-green > .psd-manager-step-label[b-hfb033dwky] {
    background: #16a34a !important;
    color: #ffffff !important;
}

.psd-page .psd-manager-flow article>.psd-manager-step-label[b-hfb033dwky] {
    width: auto !important;
    min-width: 58px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #eef4ff !important;
    color: #214f9b !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.psd-page .psd-manager-flow article.active>.psd-manager-step-label[b-hfb033dwky] {
    background: #16a34a !important;
    color: #ffffff !important;
}

@media (max-width: 1280px) {
    .psd-page .psd-step-grid[b-hfb033dwky] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .psd-page .psd-step-grid[b-hfb033dwky] {
        grid-template-columns: 1fr !important;
    }
}

.psc-upload-btn-label[b-hfb033dwky] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #0d2a5c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.1s !important;
    box-shadow: 0 4px 10px rgba(13, 42, 92, 0.15) !important;
    user-select: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.psc-upload-btn-label:hover[b-hfb033dwky] {
    background-color: #1a4387 !important;
}

.psc-upload-btn-label:active[b-hfb033dwky] {
    transform: scale(0.98) !important;
}

.psc-upload-btn-label input[type="file"][b-hfb033dwky] {
    display: none !important;
}

/* ===== Highlight Target Step Card ===== */
.psd-page .psd-step-card.highlighted-step-card[b-hfb033dwky] {
    border: 2px solid #2563eb !important;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.3) !important;
    animation: psd-pulse-glow-b-hfb033dwky 2s infinite ease-in-out !important;
}

@keyframes psd-pulse-glow-b-hfb033dwky {
    0%, 100% {
        box-shadow: 0 0 12px rgba(37, 99, 235, 0.3);
    }
    50% {
        box-shadow: 0 0 22px rgba(37, 99, 235, 0.7);
    }
}

/* ===== Prevent Text Overflows (Rev14) ===== */
.psd-page .psd-time-content[b-hfb033dwky] {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
}

.psd-page .psd-time-content small[b-hfb033dwky] {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
}

.psd-page .psd-manager-flow article > div[b-hfb033dwky] {
    min-width: 0 !important;
}

.psd-page .psd-manager-flow article small[b-hfb033dwky] {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
}
/* /Pages/PersonScreen/PersonScreenCaseEditStep1Page.razor.rz.scp.css */

.pse-page[b-51b4ajkxop] {
    --pse-bg: #eaf2fb;
    --pse-card: #ffffff;
    --pse-line: #d7e2f1;
    --pse-head: #e8f1fb;
    --pse-text: #0b2b63;
    --pse-muted: #6e82a3;
    --pse-blue: #214f9b;
    --pse-orange: #f5a623;
    --pse-green: #1fc989;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--pse-bg);
    color: var(--pse-text);
}

.pse-hero[b-51b4ajkxop],
.pse-hero-actions[b-51b4ajkxop],
.pse-card-head[b-51b4ajkxop],
.pse-footer-actions[b-51b4ajkxop],
.pse-action-panel[b-51b4ajkxop],
.pse-upload-row[b-51b4ajkxop] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.pse-hero[b-51b4ajkxop] { margin-bottom: 16px; }
.pse-hero-actions[b-51b4ajkxop] { align-items: center; padding-top: 14px; }
.pse-kicker[b-51b4ajkxop] { color: var(--pse-orange); font-size: 10px; font-weight: 900; margin-bottom: 6px; }
.pse-hero h1[b-51b4ajkxop] { margin: 0; color: var(--pse-text); font-size: 28px; line-height: 1.2; font-weight: 900; }
.pse-hero p[b-51b4ajkxop] { margin: 7px 0 0; color: var(--pse-muted); font-size: 13px; font-weight: 700; }
.pse-screen-code[b-51b4ajkxop] { color: #8aa0bd; font-size: 10px; font-weight: 900; }

.pse-stepper[b-51b4ajkxop] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pse-step[b-51b4ajkxop] { min-height: 72px; border: 1px solid var(--pse-line); border-radius: 10px; background: #fff; display: flex; gap: 10px; align-items: center; padding: 12px; }
.pse-step-no[b-51b4ajkxop] { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: #edf4ff; color: var(--pse-blue); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.pse-step strong[b-51b4ajkxop] { display: block; color: var(--pse-text); font-size: 12px; line-height: 1.25; font-weight: 900; }
.pse-step small[b-51b4ajkxop] { color: var(--pse-muted); font-size: 10.5px; font-weight: 800; }
.pse-step.active[b-51b4ajkxop] { border-color: var(--pse-blue); background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%); box-shadow: 0 8px 22px rgba(33,79,155,.12); }
.pse-step.active .pse-step-no[b-51b4ajkxop] { background: var(--pse-blue); color: #fff; }
.pse-step.done[b-51b4ajkxop] { border-color: #b8ebd8; background: #f5fffa; }
.pse-step.done .pse-step-no[b-51b4ajkxop] { background: var(--pse-green); color: #fff; }

.pse-card[b-51b4ajkxop] { background: #fff; border: 1px solid var(--pse-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(13,27,62,.04); padding: 16px; }
.pse-card-head[b-51b4ajkxop] { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #e8eef7; }
.pse-card-head h2[b-51b4ajkxop] { margin: 0; color: var(--pse-text); font-size: 16px; font-weight: 900; }
.pse-card-head p[b-51b4ajkxop] { margin: 4px 0 0; color: var(--pse-muted); font-size: 12px; font-weight: 800; }

.pse-chip[b-51b4ajkxop] { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; border-radius: 999px; padding: 4px 12px; color: var(--pse-blue); background: #e8f1ff; font-size: 11px; font-weight: 900; white-space: nowrap; }
.pse-chip.tone-green[b-51b4ajkxop] { background: #e2f9ef; color: #157a56; }
.pse-chip.tone-orange[b-51b4ajkxop] { background: #fff3ce; color: #a86100; }
.pse-chip.tone-blue[b-51b4ajkxop] { background: #e8f1ff; color: var(--pse-blue); }
.pse-chip.tone-neutral[b-51b4ajkxop] { background: #eef3f9; color: #6c7f9e; }

.pse-form-grid[b-51b4ajkxop] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.pse-form-grid.compact[b-51b4ajkxop] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pse-form-grid label[b-51b4ajkxop] { display: grid; gap: 6px; color: var(--pse-text); font-size: 12px; font-weight: 900; }
.pse-form-grid label.span-2[b-51b4ajkxop] { grid-column: span 2; }
.pse-form-grid label.span-3[b-51b4ajkxop] { grid-column: span 3; }
.pse-form-grid input[b-51b4ajkxop],
.pse-form-grid select[b-51b4ajkxop],
.pse-form-grid textarea[b-51b4ajkxop],
.pse-table input[b-51b4ajkxop],
.pse-table select[b-51b4ajkxop] { width: 100%; min-height: 38px; border: 1px solid #d8e4f2; border-radius: 8px; background: #fff; color: #244266; padding: 8px 10px; font-size: 12px; font-weight: 700; }
.pse-form-grid textarea[b-51b4ajkxop] { resize: vertical; }

.pse-action-panel[b-51b4ajkxop],
.pse-upload-row[b-51b4ajkxop] { align-items: center; border: 1px solid #e4edf8; border-radius: 10px; background: #f8fbff; padding: 12px 14px; margin-bottom: 14px; }
.pse-action-panel strong[b-51b4ajkxop],
.pse-upload-row strong[b-51b4ajkxop] { display: block; color: var(--pse-text); font-size: 13px; font-weight: 900; }
.pse-action-panel span[b-51b4ajkxop],
.pse-upload-row span[b-51b4ajkxop] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }
.pse-action-buttons[b-51b4ajkxop] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.pse-report-grid[b-51b4ajkxop] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pse-report-grid article[b-51b4ajkxop] { border: 1px solid #e4edf8; border-radius: 10px; background: #f8fbff; padding: 13px; }
.pse-report-grid span[b-51b4ajkxop] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }
.pse-report-grid strong[b-51b4ajkxop] { display: block; margin-top: 5px; color: var(--pse-text); font-size: 24px; font-weight: 900; }
.pse-report-grid small[b-51b4ajkxop] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }

.pse-table-wrap[b-51b4ajkxop] { overflow-x: auto; }
.pse-table[b-51b4ajkxop] { width: 100%; border-collapse: collapse; min-width: 900px; }
.pse-table th[b-51b4ajkxop] { background: var(--pse-head); color: #60779d; font-size: 11px; text-align: left; padding: 10px 12px; }
.pse-table td[b-51b4ajkxop] { border-bottom: 1px solid #e6edf6; color: #244266; font-size: 12px; padding: 9px 12px; }

.pse-footer-actions[b-51b4ajkxop] { align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e8eef7; }
.pse-save-message[b-51b4ajkxop] { color: #157a56; font-size: 12px; font-weight: 900; }
.pse-footer-buttons[b-51b4ajkxop] { display: flex; gap: 10px; justify-content: flex-end; }
.pse-btn[b-51b4ajkxop] { min-height: 38px; border: 1px solid var(--pse-line); border-radius: 8px; background: #fff; color: var(--pse-text); padding: 8px 14px; font-size: 12px; font-weight: 900; cursor: pointer; }
.pse-btn-primary[b-51b4ajkxop] { background: var(--pse-blue); border-color: var(--pse-blue); color: #fff; }
.pse-btn-light[b-51b4ajkxop] { background: #fff; }
.pse-btn-soft[b-51b4ajkxop] { background: #f8fbff; color: var(--pse-blue); border-color: #c9d9ef; }
.pse-icon-btn[b-51b4ajkxop] { width: 34px; height: 34px; border: 1px solid #d8e4f2; border-radius: 8px; background: #fff; color: #b42318; cursor: pointer; }

@media (max-width: 1180px) {
    .pse-stepper[b-51b4ajkxop],
    .pse-report-grid[b-51b4ajkxop],
    .pse-form-grid[b-51b4ajkxop],
    .pse-form-grid.compact[b-51b4ajkxop] { grid-template-columns: 1fr; }
    .pse-form-grid label.span-2[b-51b4ajkxop],
    .pse-form-grid label.span-3[b-51b4ajkxop] { grid-column: span 1; }
    .pse-hero[b-51b4ajkxop],
    .pse-card-head[b-51b4ajkxop],
    .pse-footer-actions[b-51b4ajkxop],
    .pse-action-panel[b-51b4ajkxop],
    .pse-upload-row[b-51b4ajkxop] { flex-direction: column; align-items: stretch; }
}
/* /Pages/PersonScreen/PersonScreenCaseEditStep2Page.razor.rz.scp.css */

.pse-page[b-aj37pdgpnw] {
    --pse-bg: #eaf2fb;
    --pse-card: #ffffff;
    --pse-line: #d7e2f1;
    --pse-head: #e8f1fb;
    --pse-text: #0b2b63;
    --pse-muted: #6e82a3;
    --pse-blue: #214f9b;
    --pse-orange: #f5a623;
    --pse-green: #1fc989;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--pse-bg);
    color: var(--pse-text);
}

.pse-hero[b-aj37pdgpnw],
.pse-hero-actions[b-aj37pdgpnw],
.pse-card-head[b-aj37pdgpnw],
.pse-footer-actions[b-aj37pdgpnw],
.pse-action-panel[b-aj37pdgpnw],
.pse-upload-row[b-aj37pdgpnw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.pse-hero[b-aj37pdgpnw] { margin-bottom: 16px; }
.pse-hero-actions[b-aj37pdgpnw] { align-items: center; padding-top: 14px; }
.pse-kicker[b-aj37pdgpnw] { color: var(--pse-orange); font-size: 10px; font-weight: 900; margin-bottom: 6px; }
.pse-hero h1[b-aj37pdgpnw] { margin: 0; color: var(--pse-text); font-size: 28px; line-height: 1.2; font-weight: 900; }
.pse-hero p[b-aj37pdgpnw] { margin: 7px 0 0; color: var(--pse-muted); font-size: 13px; font-weight: 700; }
.pse-screen-code[b-aj37pdgpnw] { color: #8aa0bd; font-size: 10px; font-weight: 900; }

.pse-stepper[b-aj37pdgpnw] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pse-step[b-aj37pdgpnw] { min-height: 72px; border: 1px solid var(--pse-line); border-radius: 10px; background: #fff; display: flex; gap: 10px; align-items: center; padding: 12px; }
.pse-step-no[b-aj37pdgpnw] { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: #edf4ff; color: var(--pse-blue); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.pse-step strong[b-aj37pdgpnw] { display: block; color: var(--pse-text); font-size: 12px; line-height: 1.25; font-weight: 900; }
.pse-step small[b-aj37pdgpnw] { color: var(--pse-muted); font-size: 10.5px; font-weight: 800; }
.pse-step.active[b-aj37pdgpnw] { border-color: var(--pse-blue); background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%); box-shadow: 0 8px 22px rgba(33,79,155,.12); }
.pse-step.active .pse-step-no[b-aj37pdgpnw] { background: var(--pse-blue); color: #fff; }
.pse-step.done[b-aj37pdgpnw] { border-color: #b8ebd8; background: #f5fffa; }
.pse-step.done .pse-step-no[b-aj37pdgpnw] { background: var(--pse-green); color: #fff; }

.pse-card[b-aj37pdgpnw] { background: #fff; border: 1px solid var(--pse-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(13,27,62,.04); padding: 16px; }
.pse-card-head[b-aj37pdgpnw] { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #e8eef7; }
.pse-card-head h2[b-aj37pdgpnw] { margin: 0; color: var(--pse-text); font-size: 16px; font-weight: 900; }
.pse-card-head p[b-aj37pdgpnw] { margin: 4px 0 0; color: var(--pse-muted); font-size: 12px; font-weight: 800; }

.pse-chip[b-aj37pdgpnw] { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; border-radius: 999px; padding: 4px 12px; color: var(--pse-blue); background: #e8f1ff; font-size: 11px; font-weight: 900; white-space: nowrap; }
.pse-chip.tone-green[b-aj37pdgpnw] { background: #e2f9ef; color: #157a56; }
.pse-chip.tone-orange[b-aj37pdgpnw] { background: #fff3ce; color: #a86100; }
.pse-chip.tone-blue[b-aj37pdgpnw] { background: #e8f1ff; color: var(--pse-blue); }
.pse-chip.tone-neutral[b-aj37pdgpnw] { background: #eef3f9; color: #6c7f9e; }

.pse-form-grid[b-aj37pdgpnw] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.pse-form-grid.compact[b-aj37pdgpnw] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pse-form-grid label[b-aj37pdgpnw] { display: grid; gap: 6px; color: var(--pse-text); font-size: 12px; font-weight: 900; }
.pse-form-grid label.span-2[b-aj37pdgpnw] { grid-column: span 2; }
.pse-form-grid label.span-3[b-aj37pdgpnw] { grid-column: span 3; }
.pse-form-grid input[b-aj37pdgpnw],
.pse-form-grid select[b-aj37pdgpnw],
.pse-form-grid textarea[b-aj37pdgpnw],
.pse-table input[b-aj37pdgpnw],
.pse-table select[b-aj37pdgpnw] { width: 100%; min-height: 38px; border: 1px solid #d8e4f2; border-radius: 8px; background: #fff; color: #244266; padding: 8px 10px; font-size: 12px; font-weight: 700; }
.pse-form-grid textarea[b-aj37pdgpnw] { resize: vertical; }

.pse-action-panel[b-aj37pdgpnw],
.pse-upload-row[b-aj37pdgpnw] { align-items: center; border: 1px solid #e4edf8; border-radius: 10px; background: #f8fbff; padding: 12px 14px; margin-bottom: 14px; }
.pse-action-panel strong[b-aj37pdgpnw],
.pse-upload-row strong[b-aj37pdgpnw] { display: block; color: var(--pse-text); font-size: 13px; font-weight: 900; }
.pse-action-panel span[b-aj37pdgpnw],
.pse-upload-row span[b-aj37pdgpnw] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }
.pse-action-buttons[b-aj37pdgpnw] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.pse-report-grid[b-aj37pdgpnw] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pse-report-grid article[b-aj37pdgpnw] { border: 1px solid #e4edf8; border-radius: 10px; background: #f8fbff; padding: 13px; }
.pse-report-grid span[b-aj37pdgpnw] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }
.pse-report-grid strong[b-aj37pdgpnw] { display: block; margin-top: 5px; color: var(--pse-text); font-size: 24px; font-weight: 900; }
.pse-report-grid small[b-aj37pdgpnw] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }

.pse-table-wrap[b-aj37pdgpnw] { overflow-x: auto; }
.pse-table[b-aj37pdgpnw] { width: 100%; border-collapse: collapse; min-width: 900px; }
.pse-table th[b-aj37pdgpnw] { background: var(--pse-head); color: #60779d; font-size: 11px; text-align: left; padding: 10px 12px; }
.pse-table td[b-aj37pdgpnw] { border-bottom: 1px solid #e6edf6; color: #244266; font-size: 12px; padding: 9px 12px; }

.pse-footer-actions[b-aj37pdgpnw] { align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e8eef7; }
.pse-save-message[b-aj37pdgpnw] { color: #157a56; font-size: 12px; font-weight: 900; }
.pse-footer-buttons[b-aj37pdgpnw] { display: flex; gap: 10px; justify-content: flex-end; }
.pse-btn[b-aj37pdgpnw] { min-height: 38px; border: 1px solid var(--pse-line); border-radius: 8px; background: #fff; color: var(--pse-text); padding: 8px 14px; font-size: 12px; font-weight: 900; cursor: pointer; }
.pse-btn-primary[b-aj37pdgpnw] { background: var(--pse-blue); border-color: var(--pse-blue); color: #fff; }
.pse-btn-light[b-aj37pdgpnw] { background: #fff; }
.pse-btn-soft[b-aj37pdgpnw] { background: #f8fbff; color: var(--pse-blue); border-color: #c9d9ef; }
.pse-icon-btn[b-aj37pdgpnw] { width: 34px; height: 34px; border: 1px solid #d8e4f2; border-radius: 8px; background: #fff; color: #b42318; cursor: pointer; }

@media (max-width: 1180px) {
    .pse-stepper[b-aj37pdgpnw],
    .pse-report-grid[b-aj37pdgpnw],
    .pse-form-grid[b-aj37pdgpnw],
    .pse-form-grid.compact[b-aj37pdgpnw] { grid-template-columns: 1fr; }
    .pse-form-grid label.span-2[b-aj37pdgpnw],
    .pse-form-grid label.span-3[b-aj37pdgpnw] { grid-column: span 1; }
    .pse-hero[b-aj37pdgpnw],
    .pse-card-head[b-aj37pdgpnw],
    .pse-footer-actions[b-aj37pdgpnw],
    .pse-action-panel[b-aj37pdgpnw],
    .pse-upload-row[b-aj37pdgpnw] { flex-direction: column; align-items: stretch; }
}
/* /Pages/PersonScreen/PersonScreenCaseEditStep3Page.razor.rz.scp.css */

.pse-page[b-2s6jdpmyon] {
    --pse-bg: #eaf2fb;
    --pse-card: #ffffff;
    --pse-line: #d7e2f1;
    --pse-head: #e8f1fb;
    --pse-text: #0b2b63;
    --pse-muted: #6e82a3;
    --pse-blue: #214f9b;
    --pse-orange: #f5a623;
    --pse-green: #1fc989;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--pse-bg);
    color: var(--pse-text);
}

.pse-hero[b-2s6jdpmyon],
.pse-hero-actions[b-2s6jdpmyon],
.pse-card-head[b-2s6jdpmyon],
.pse-footer-actions[b-2s6jdpmyon],
.pse-action-panel[b-2s6jdpmyon],
.pse-upload-row[b-2s6jdpmyon] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.pse-hero[b-2s6jdpmyon] { margin-bottom: 16px; }
.pse-hero-actions[b-2s6jdpmyon] { align-items: center; padding-top: 14px; }
.pse-kicker[b-2s6jdpmyon] { color: var(--pse-orange); font-size: 10px; font-weight: 900; margin-bottom: 6px; }
.pse-hero h1[b-2s6jdpmyon] { margin: 0; color: var(--pse-text); font-size: 28px; line-height: 1.2; font-weight: 900; }
.pse-hero p[b-2s6jdpmyon] { margin: 7px 0 0; color: var(--pse-muted); font-size: 13px; font-weight: 700; }
.pse-screen-code[b-2s6jdpmyon] { color: #8aa0bd; font-size: 10px; font-weight: 900; }

.pse-stepper[b-2s6jdpmyon] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pse-step[b-2s6jdpmyon] { min-height: 72px; border: 1px solid var(--pse-line); border-radius: 10px; background: #fff; display: flex; gap: 10px; align-items: center; padding: 12px; }
.pse-step-no[b-2s6jdpmyon] { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: #edf4ff; color: var(--pse-blue); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.pse-step strong[b-2s6jdpmyon] { display: block; color: var(--pse-text); font-size: 12px; line-height: 1.25; font-weight: 900; }
.pse-step small[b-2s6jdpmyon] { color: var(--pse-muted); font-size: 10.5px; font-weight: 800; }
.pse-step.active[b-2s6jdpmyon] { border-color: var(--pse-blue); background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%); box-shadow: 0 8px 22px rgba(33,79,155,.12); }
.pse-step.active .pse-step-no[b-2s6jdpmyon] { background: var(--pse-blue); color: #fff; }
.pse-step.done[b-2s6jdpmyon] { border-color: #b8ebd8; background: #f5fffa; }
.pse-step.done .pse-step-no[b-2s6jdpmyon] { background: var(--pse-green); color: #fff; }

.pse-card[b-2s6jdpmyon] { background: #fff; border: 1px solid var(--pse-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(13,27,62,.04); padding: 16px; }
.pse-card-head[b-2s6jdpmyon] { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #e8eef7; }
.pse-card-head h2[b-2s6jdpmyon] { margin: 0; color: var(--pse-text); font-size: 16px; font-weight: 900; }
.pse-card-head p[b-2s6jdpmyon] { margin: 4px 0 0; color: var(--pse-muted); font-size: 12px; font-weight: 800; }

.pse-chip[b-2s6jdpmyon] { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; border-radius: 999px; padding: 4px 12px; color: var(--pse-blue); background: #e8f1ff; font-size: 11px; font-weight: 900; white-space: nowrap; }
.pse-chip.tone-green[b-2s6jdpmyon] { background: #e2f9ef; color: #157a56; }
.pse-chip.tone-orange[b-2s6jdpmyon] { background: #fff3ce; color: #a86100; }
.pse-chip.tone-blue[b-2s6jdpmyon] { background: #e8f1ff; color: var(--pse-blue); }
.pse-chip.tone-neutral[b-2s6jdpmyon] { background: #eef3f9; color: #6c7f9e; }

.pse-form-grid[b-2s6jdpmyon] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.pse-form-grid.compact[b-2s6jdpmyon] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pse-form-grid label[b-2s6jdpmyon] { display: grid; gap: 6px; color: var(--pse-text); font-size: 12px; font-weight: 900; }
.pse-form-grid label.span-2[b-2s6jdpmyon] { grid-column: span 2; }
.pse-form-grid label.span-3[b-2s6jdpmyon] { grid-column: span 3; }
.pse-form-grid input[b-2s6jdpmyon],
.pse-form-grid select[b-2s6jdpmyon],
.pse-form-grid textarea[b-2s6jdpmyon],
.pse-table input[b-2s6jdpmyon],
.pse-table select[b-2s6jdpmyon] { width: 100%; min-height: 38px; border: 1px solid #d8e4f2; border-radius: 8px; background: #fff; color: #244266; padding: 8px 10px; font-size: 12px; font-weight: 700; }
.pse-form-grid textarea[b-2s6jdpmyon] { resize: vertical; }

.pse-action-panel[b-2s6jdpmyon],
.pse-upload-row[b-2s6jdpmyon] { align-items: center; border: 1px solid #e4edf8; border-radius: 10px; background: #f8fbff; padding: 12px 14px; margin-bottom: 14px; }
.pse-action-panel strong[b-2s6jdpmyon],
.pse-upload-row strong[b-2s6jdpmyon] { display: block; color: var(--pse-text); font-size: 13px; font-weight: 900; }
.pse-action-panel span[b-2s6jdpmyon],
.pse-upload-row span[b-2s6jdpmyon] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }
.pse-action-buttons[b-2s6jdpmyon] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.pse-report-grid[b-2s6jdpmyon] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pse-report-grid article[b-2s6jdpmyon] { border: 1px solid #e4edf8; border-radius: 10px; background: #f8fbff; padding: 13px; }
.pse-report-grid span[b-2s6jdpmyon] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }
.pse-report-grid strong[b-2s6jdpmyon] { display: block; margin-top: 5px; color: var(--pse-text); font-size: 24px; font-weight: 900; }
.pse-report-grid small[b-2s6jdpmyon] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }

.pse-table-wrap[b-2s6jdpmyon] { overflow-x: auto; }
.pse-table[b-2s6jdpmyon] { width: 100%; border-collapse: collapse; min-width: 900px; }
.pse-table th[b-2s6jdpmyon] { background: var(--pse-head); color: #60779d; font-size: 11px; text-align: left; padding: 10px 12px; }
.pse-table td[b-2s6jdpmyon] { border-bottom: 1px solid #e6edf6; color: #244266; font-size: 12px; padding: 9px 12px; }

.pse-footer-actions[b-2s6jdpmyon] { align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e8eef7; }
.pse-save-message[b-2s6jdpmyon] { color: #157a56; font-size: 12px; font-weight: 900; }
.pse-footer-buttons[b-2s6jdpmyon] { display: flex; gap: 10px; justify-content: flex-end; }
.pse-btn[b-2s6jdpmyon] { min-height: 38px; border: 1px solid var(--pse-line); border-radius: 8px; background: #fff; color: var(--pse-text); padding: 8px 14px; font-size: 12px; font-weight: 900; cursor: pointer; }
.pse-btn-primary[b-2s6jdpmyon] { background: var(--pse-blue); border-color: var(--pse-blue); color: #fff; }
.pse-btn-light[b-2s6jdpmyon] { background: #fff; }
.pse-btn-soft[b-2s6jdpmyon] { background: #f8fbff; color: var(--pse-blue); border-color: #c9d9ef; }
.pse-icon-btn[b-2s6jdpmyon] { width: 34px; height: 34px; border: 1px solid #d8e4f2; border-radius: 8px; background: #fff; color: #b42318; cursor: pointer; }

@media (max-width: 1180px) {
    .pse-stepper[b-2s6jdpmyon],
    .pse-report-grid[b-2s6jdpmyon],
    .pse-form-grid[b-2s6jdpmyon],
    .pse-form-grid.compact[b-2s6jdpmyon] { grid-template-columns: 1fr; }
    .pse-form-grid label.span-2[b-2s6jdpmyon],
    .pse-form-grid label.span-3[b-2s6jdpmyon] { grid-column: span 1; }
    .pse-hero[b-2s6jdpmyon],
    .pse-card-head[b-2s6jdpmyon],
    .pse-footer-actions[b-2s6jdpmyon],
    .pse-action-panel[b-2s6jdpmyon],
    .pse-upload-row[b-2s6jdpmyon] { flex-direction: column; align-items: stretch; }
}
/* /Pages/PersonScreen/PersonScreenCaseEditStep4Page.razor.rz.scp.css */

.pse-page[b-u8x0hvfvvg] {
    --pse-bg: #eaf2fb;
    --pse-card: #ffffff;
    --pse-line: #d7e2f1;
    --pse-head: #e8f1fb;
    --pse-text: #0b2b63;
    --pse-muted: #6e82a3;
    --pse-blue: #214f9b;
    --pse-orange: #f5a623;
    --pse-green: #1fc989;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--pse-bg);
    color: var(--pse-text);
}

.pse-hero[b-u8x0hvfvvg],
.pse-hero-actions[b-u8x0hvfvvg],
.pse-card-head[b-u8x0hvfvvg],
.pse-footer-actions[b-u8x0hvfvvg],
.pse-action-panel[b-u8x0hvfvvg],
.pse-upload-row[b-u8x0hvfvvg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.pse-hero[b-u8x0hvfvvg] { margin-bottom: 16px; }
.pse-hero-actions[b-u8x0hvfvvg] { align-items: center; padding-top: 14px; }
.pse-kicker[b-u8x0hvfvvg] { color: var(--pse-orange); font-size: 10px; font-weight: 900; margin-bottom: 6px; }
.pse-hero h1[b-u8x0hvfvvg] { margin: 0; color: var(--pse-text); font-size: 28px; line-height: 1.2; font-weight: 900; }
.pse-hero p[b-u8x0hvfvvg] { margin: 7px 0 0; color: var(--pse-muted); font-size: 13px; font-weight: 700; }
.pse-screen-code[b-u8x0hvfvvg] { color: #8aa0bd; font-size: 10px; font-weight: 900; }

.pse-stepper[b-u8x0hvfvvg] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pse-step[b-u8x0hvfvvg] { min-height: 72px; border: 1px solid var(--pse-line); border-radius: 10px; background: #fff; display: flex; gap: 10px; align-items: center; padding: 12px; }
.pse-step-no[b-u8x0hvfvvg] { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: #edf4ff; color: var(--pse-blue); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.pse-step strong[b-u8x0hvfvvg] { display: block; color: var(--pse-text); font-size: 12px; line-height: 1.25; font-weight: 900; }
.pse-step small[b-u8x0hvfvvg] { color: var(--pse-muted); font-size: 10.5px; font-weight: 800; }
.pse-step.active[b-u8x0hvfvvg] { border-color: var(--pse-blue); background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%); box-shadow: 0 8px 22px rgba(33,79,155,.12); }
.pse-step.active .pse-step-no[b-u8x0hvfvvg] { background: var(--pse-blue); color: #fff; }
.pse-step.done[b-u8x0hvfvvg] { border-color: #b8ebd8; background: #f5fffa; }
.pse-step.done .pse-step-no[b-u8x0hvfvvg] { background: var(--pse-green); color: #fff; }

.pse-card[b-u8x0hvfvvg] { background: #fff; border: 1px solid var(--pse-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(13,27,62,.04); padding: 16px; }
.pse-card-head[b-u8x0hvfvvg] { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #e8eef7; }
.pse-card-head h2[b-u8x0hvfvvg] { margin: 0; color: var(--pse-text); font-size: 16px; font-weight: 900; }
.pse-card-head p[b-u8x0hvfvvg] { margin: 4px 0 0; color: var(--pse-muted); font-size: 12px; font-weight: 800; }

.pse-chip[b-u8x0hvfvvg] { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; border-radius: 999px; padding: 4px 12px; color: var(--pse-blue); background: #e8f1ff; font-size: 11px; font-weight: 900; white-space: nowrap; }
.pse-chip.tone-green[b-u8x0hvfvvg] { background: #e2f9ef; color: #157a56; }
.pse-chip.tone-orange[b-u8x0hvfvvg] { background: #fff3ce; color: #a86100; }
.pse-chip.tone-blue[b-u8x0hvfvvg] { background: #e8f1ff; color: var(--pse-blue); }
.pse-chip.tone-neutral[b-u8x0hvfvvg] { background: #eef3f9; color: #6c7f9e; }

.pse-form-grid[b-u8x0hvfvvg] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.pse-form-grid.compact[b-u8x0hvfvvg] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pse-form-grid label[b-u8x0hvfvvg] { display: grid; gap: 6px; color: var(--pse-text); font-size: 12px; font-weight: 900; }
.pse-form-grid label.span-2[b-u8x0hvfvvg] { grid-column: span 2; }
.pse-form-grid label.span-3[b-u8x0hvfvvg] { grid-column: span 3; }
.pse-form-grid input[b-u8x0hvfvvg],
.pse-form-grid select[b-u8x0hvfvvg],
.pse-form-grid textarea[b-u8x0hvfvvg],
.pse-table input[b-u8x0hvfvvg],
.pse-table select[b-u8x0hvfvvg] { width: 100%; min-height: 38px; border: 1px solid #d8e4f2; border-radius: 8px; background: #fff; color: #244266; padding: 8px 10px; font-size: 12px; font-weight: 700; }
.pse-form-grid textarea[b-u8x0hvfvvg] { resize: vertical; }

.pse-action-panel[b-u8x0hvfvvg],
.pse-upload-row[b-u8x0hvfvvg] { align-items: center; border: 1px solid #e4edf8; border-radius: 10px; background: #f8fbff; padding: 12px 14px; margin-bottom: 14px; }
.pse-action-panel strong[b-u8x0hvfvvg],
.pse-upload-row strong[b-u8x0hvfvvg] { display: block; color: var(--pse-text); font-size: 13px; font-weight: 900; }
.pse-action-panel span[b-u8x0hvfvvg],
.pse-upload-row span[b-u8x0hvfvvg] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }
.pse-action-buttons[b-u8x0hvfvvg] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.pse-report-grid[b-u8x0hvfvvg] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pse-report-grid article[b-u8x0hvfvvg] { border: 1px solid #e4edf8; border-radius: 10px; background: #f8fbff; padding: 13px; }
.pse-report-grid span[b-u8x0hvfvvg] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }
.pse-report-grid strong[b-u8x0hvfvvg] { display: block; margin-top: 5px; color: var(--pse-text); font-size: 24px; font-weight: 900; }
.pse-report-grid small[b-u8x0hvfvvg] { color: var(--pse-muted); font-size: 11px; font-weight: 800; }

.pse-table-wrap[b-u8x0hvfvvg] { overflow-x: auto; }
.pse-table[b-u8x0hvfvvg] { width: 100%; border-collapse: collapse; min-width: 900px; }
.pse-table th[b-u8x0hvfvvg] { background: var(--pse-head); color: #60779d; font-size: 11px; text-align: left; padding: 10px 12px; }
.pse-table td[b-u8x0hvfvvg] { border-bottom: 1px solid #e6edf6; color: #244266; font-size: 12px; padding: 9px 12px; }

.pse-footer-actions[b-u8x0hvfvvg] { align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e8eef7; }
.pse-save-message[b-u8x0hvfvvg] { color: #157a56; font-size: 12px; font-weight: 900; }
.pse-footer-buttons[b-u8x0hvfvvg] { display: flex; gap: 10px; justify-content: flex-end; }
.pse-btn[b-u8x0hvfvvg] { min-height: 38px; border: 1px solid var(--pse-line); border-radius: 8px; background: #fff; color: var(--pse-text); padding: 8px 14px; font-size: 12px; font-weight: 900; cursor: pointer; }
.pse-btn-primary[b-u8x0hvfvvg] { background: var(--pse-blue); border-color: var(--pse-blue); color: #fff; }
.pse-btn-light[b-u8x0hvfvvg] { background: #fff; }
.pse-btn-soft[b-u8x0hvfvvg] { background: #f8fbff; color: var(--pse-blue); border-color: #c9d9ef; }
.pse-icon-btn[b-u8x0hvfvvg] { width: 34px; height: 34px; border: 1px solid #d8e4f2; border-radius: 8px; background: #fff; color: #b42318; cursor: pointer; }

@media (max-width: 1180px) {
    .pse-stepper[b-u8x0hvfvvg],
    .pse-report-grid[b-u8x0hvfvvg],
    .pse-form-grid[b-u8x0hvfvvg],
    .pse-form-grid.compact[b-u8x0hvfvvg] { grid-template-columns: 1fr; }
    .pse-form-grid label.span-2[b-u8x0hvfvvg],
    .pse-form-grid label.span-3[b-u8x0hvfvvg] { grid-column: span 1; }
    .pse-hero[b-u8x0hvfvvg],
    .pse-card-head[b-u8x0hvfvvg],
    .pse-footer-actions[b-u8x0hvfvvg],
    .pse-action-panel[b-u8x0hvfvvg],
    .pse-upload-row[b-u8x0hvfvvg] { flex-direction: column; align-items: stretch; }
}
/* /Pages/PersonScreen/PersonScreenCaseListPage.razor.rz.scp.css */
.pcl-page[b-9w7oqih3al] {
    --pcl-bg: #eaf2fb;
    --pcl-card: #ffffff;
    --pcl-line: #d7e2f1;
    --pcl-head: #e8f1fb;
    --pcl-text: #0b2b63;
    --pcl-muted: #6e82a3;
    --pcl-blue: #214f9b;
    --pcl-orange: #f5a623;
    --pcl-green: #1fc989;
    --pcl-soft-blue: #dfeaff;
    --pcl-soft-green: #dff8eb;
    --pcl-soft-orange: #fff0c9;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 34px;
    background: var(--pcl-bg);
    color: var(--pcl-text);
    font-size: 14px;
}

.pcl-hero[b-9w7oqih3al] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pcl-kicker[b-9w7oqih3al] {
    color: var(--pcl-orange);
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 7px;
}

.pcl-hero h1[b-9w7oqih3al] {
    margin: 0;
    color: var(--pcl-text);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
}

.pcl-hero p[b-9w7oqih3al] {
    margin: 8px 0 0;
    color: var(--pcl-muted);
    font-size: 14px;
    font-weight: 700;
}

.pcl-screen-code[b-9w7oqih3al] {
    min-width: 120px;
    padding-top: 20px;
    color: #49658f;
    font-size: 10px;
    font-weight: 800;
    text-align: right;
}

.pcl-kpis[b-9w7oqih3al] {
    display: grid;
    grid-template-columns: repeat(6, minmax(122px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.pcl-kpi[b-9w7oqih3al] {
    position: relative;
    overflow: hidden;
    min-height: 76px;
    background: var(--pcl-card);
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
}

.pcl-kpi[b-9w7oqih3al]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--tone);
}

.pcl-kpi div[b-9w7oqih3al] {
    margin-bottom: 6px;
    color: var(--pcl-text);
    font-size: 14px;
    font-weight: 800;
}

.pcl-kpi strong[b-9w7oqih3al] {
    color: var(--pcl-text);
    font-size: 18.5px;
    line-height: 1;
    font-weight: 800;
}

.pcl-kpi span[b-9w7oqih3al] {
    margin-left: 7px;
    color: var(--pcl-muted);
    font-size: 14px;
    font-weight: 800;
}

.tone-blue[b-9w7oqih3al] { --tone: var(--pcl-blue); }
.tone-orange[b-9w7oqih3al] { --tone: var(--pcl-orange); }
.tone-green[b-9w7oqih3al] { --tone: var(--pcl-green); }
.tone-violet[b-9w7oqih3al] { --tone: #7c3aed; }
.tone-neutral[b-9w7oqih3al] { --tone: #b9c6da; }

.pcl-card[b-9w7oqih3al] {
    background: var(--pcl-card);
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
}

.pcl-list-card[b-9w7oqih3al] {
    padding: 14px 14px 12px;
}

.pcl-list-actions[b-9w7oqih3al] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pcl-tabs[b-9w7oqih3al] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pcl-tabs button[b-9w7oqih3al],
.pcl-add-btn[b-9w7oqih3al],
.pcl-search-btn[b-9w7oqih3al],
.pcl-clear-btn[b-9w7oqih3al],
.pcl-detail-btn[b-9w7oqih3al],
.pcl-pager button[b-9w7oqih3al] {
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.pcl-tabs button[b-9w7oqih3al] {
    height: 34px;
    min-width: 86px;
    border: 1px solid #cad9ec;
    background: #fff;
    color: var(--pcl-text);
    padding: 0 16px;
}

.pcl-tabs button.active[b-9w7oqih3al] {
    border-color: var(--pcl-text);
    background: var(--pcl-text);
    color: #fff;
}

.pcl-add-btn[b-9w7oqih3al] {
    height: 34px;
    border: 1px solid #b9cdeb;
    background: #eef6ff;
    color: var(--pcl-text);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
}

.pcl-filterbar[b-9w7oqih3al] {
    display: grid;
    grid-template-columns: minmax(260px, 1.7fr) repeat(4, minmax(130px, 1fr)) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.pcl-search[b-9w7oqih3al] {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    background: #fff;
    padding: 0 12px;
    color: #6f86ab;
}

.pcl-search input[b-9w7oqih3al],
.pcl-filterbar select[b-9w7oqih3al] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pcl-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
}

.pcl-filterbar select[b-9w7oqih3al] {
    height: 38px;
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    background: #fff;
    color: #5d7398;
    padding: 0 12px;
}

.pcl-search-btn[b-9w7oqih3al] {
    height: 38px;
    border: 1px solid var(--pcl-text);
    background: var(--pcl-text);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
}

.pcl-filter-actions[b-9w7oqih3al] {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(94px, auto);
    gap: 8px;
    align-items: center;
}

.pcl-clear-btn[b-9w7oqih3al] {
    height: 38px;
    border: 1px solid #cad9ec;
    background: #ffffff;
    color: var(--pcl-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
}

.pcl-table-wrap[b-9w7oqih3al] {
    overflow-x: auto;
}

.pcl-table[b-9w7oqih3al] {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.pcl-col-case-no[b-9w7oqih3al] { width: 5%; }
.pcl-col-case-name[b-9w7oqih3al] { width: 9%; }
.pcl-col-agency-letter[b-9w7oqih3al] { width: 10%; }
.pcl-col-inspection-type[b-9w7oqih3al] { width: 13.5%; }
.pcl-col-pacc-letter[b-9w7oqih3al] { width: 8.5%; }
.pcl-col-pacc-date[b-9w7oqih3al] { width: 6.5%; }
.pcl-col-delivery[b-9w7oqih3al] { width: 8.5%; }
.pcl-col-name-count[b-9w7oqih3al] { width: 6.5%; }
.pcl-col-opened-date[b-9w7oqih3al] { width: 7%; }
.pcl-col-owner[b-9w7oqih3al] { width: 7.5%; }
.pcl-col-status[b-9w7oqih3al] { width: 11.5%; }
.pcl-col-actions[b-9w7oqih3al] { width: 9%; }

.pcl-table th[b-9w7oqih3al] {
    background: var(--pcl-head);
    color: #60718e;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    line-height: 1.25;
    padding: 9px 7px;
    vertical-align: middle;
}

.pcl-table td[b-9w7oqih3al] {
    border-bottom: 1px solid #e8eef7;
    color: var(--pcl-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    overflow: hidden;
    padding: 10px 7px;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.pcl-case-name[b-9w7oqih3al],
.pcl-table td:nth-child(3)[b-9w7oqih3al] {
    color: #173a78;
}

.pcl-table th:nth-child(2)[b-9w7oqih3al],
.pcl-table td:nth-child(2)[b-9w7oqih3al] {
    padding-right: 4px;
}

.pcl-table th:nth-child(3)[b-9w7oqih3al],
.pcl-table td:nth-child(3)[b-9w7oqih3al] {
    padding-left: 4px;
}

.pcl-table th:nth-child(8)[b-9w7oqih3al],
.pcl-table td:nth-child(8)[b-9w7oqih3al] {
    text-align: center;
    white-space: nowrap;
}

.pcl-table th:nth-child(7)[b-9w7oqih3al] {
    word-break: keep-all;
}

.pcl-table th:nth-child(11)[b-9w7oqih3al],
.pcl-table td:nth-child(11)[b-9w7oqih3al] {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.pcl-chip[b-9w7oqih3al] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    min-width: 88px;
    min-height: 24px;
    overflow: visible;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 14%, white);
    color: color-mix(in srgb, var(--tone) 76%, #0b2b63);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 400;
    padding: 6px 8px;
    text-overflow: clip;
    white-space: normal;
}

.pcl-detail-btn[b-9w7oqih3al] {
    min-height: 30px;
    border: 1px solid #c9dcf5;
    background: #eaf3ff;
    color: var(--pcl-text);
    padding: 6px 12px;
}

.pcl-empty[b-9w7oqih3al] {
    text-align: center;
    color: var(--pcl-muted) !important;
    padding: 28px 12px !important;
}

.pcl-table-footer[b-9w7oqih3al] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 50px;
    padding: 12px 4px 0;
    color: var(--pcl-text);
    font-size: 14px;
    font-weight: 800;
}

.pcl-pager[b-9w7oqih3al] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pcl-pager button[b-9w7oqih3al] {
    border: 1px solid #c9dcf5;
    background: #fff;
    color: var(--pcl-text);
    min-height: 28px;
    padding: 5px 8px;
}

.pcl-pager strong[b-9w7oqih3al] {
    color: var(--pcl-text);
    font-size: 14px;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .pcl-kpis[b-9w7oqih3al] {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .pcl-filterbar[b-9w7oqih3al] {
        grid-template-columns: 1fr 1fr;
    }

    .pcl-search-btn[b-9w7oqih3al] {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .pcl-page[b-9w7oqih3al] {
        margin: -16px;
        padding: 20px 14px 28px;
    }

    .pcl-hero[b-9w7oqih3al],
    .pcl-list-actions[b-9w7oqih3al],
    .pcl-table-footer[b-9w7oqih3al] {
        flex-direction: column;
        align-items: stretch;
    }

    .pcl-hero h1[b-9w7oqih3al] {
        font-size: 28px;
    }

    .pcl-screen-code[b-9w7oqih3al] {
        padding-top: 0;
        text-align: left;
    }

    .pcl-kpis[b-9w7oqih3al],
    .pcl-filterbar[b-9w7oqih3al] {
        grid-template-columns: 1fr;
    }

    .pcl-tabs button[b-9w7oqih3al],
    .pcl-add-btn[b-9w7oqih3al] {
        flex: 1 1 140px;
        justify-content: center;
    }
}

/* ===== Manager approval / delivery action flow ===== */
.pcl-action-stack[b-9w7oqih3al] {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 7px;
    min-width: 0;
}

.pcl-action-stack .pcl-detail-btn[b-9w7oqih3al],
.pcl-action-stack .pcl-flow-btn[b-9w7oqih3al] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
}

.pcl-flow-btn[b-9w7oqih3al] {
    min-height: 34px;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tone) 54%, #ffffff);
    border-radius: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 18%, #ffffff), color-mix(in srgb, var(--tone) 8%, #ffffff));
    box-shadow: 0 1px 2px rgba(13, 27, 62, .12);
    color: color-mix(in srgb, var(--tone) 70%, #0b2b63);
    font-size: 14px;
    font-weight: 900;
    padding: 7px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pcl-flow-btn:hover:not(:disabled)[b-9w7oqih3al] {
    border-color: color-mix(in srgb, var(--tone) 70%, #ffffff);
    box-shadow: 0 2px 5px rgba(13, 27, 62, .18);
    transform: translateY(-1px);
}

.pcl-flow-btn.tone-orange[b-9w7oqih3al] {
    border-color: #f7d88e;
    background: #fff3ce;
    color: #9a5b00;
}

.pcl-flow-btn.tone-blue[b-9w7oqih3al] {
    border-color: #c9dcf5;
    background: #eaf3ff;
    color: #173a78;
}

.pcl-flow-btn.tone-violet[b-9w7oqih3al] {
    border-color: #d8c6ff;
    background: #f0e9ff;
    color: #5f2dbb;
}

.pcl-flow-btn.tone-green[b-9w7oqih3al] {
    border-color: #b8ebd8;
    background: #e2f9ef;
    color: #147a55;
}

.pcl-flow-btn.tone-complete[b-9w7oqih3al] {
    border-color: #b8ebd8;
    background: #e2f9ef;
    color: #147a55;
    cursor: default;
    opacity: .82;
}

.pcl-modal-backdrop[b-9w7oqih3al] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 27, 63, .34);
}

.pcl-modal-card[b-9w7oqih3al] {
    width: min(520px, 100%);
    border: 1px solid var(--pcl-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(8, 27, 63, .22);
    overflow: hidden;
}

.pcl-modal-head[b-9w7oqih3al] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e5edf7;
}

.pcl-modal-head h2[b-9w7oqih3al] {
    margin: 0;
    color: var(--pcl-text);
    font-size: 14px;
    font-weight: 900;
}

.pcl-modal-head p[b-9w7oqih3al] {
    margin: 5px 0 0;
    color: var(--pcl-muted);
    font-size: 14px;
    font-weight: 700;
}

.pcl-modal-close[b-9w7oqih3al] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    background: #fff;
    color: var(--pcl-text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.pcl-modal-body[b-9w7oqih3al] {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
}

.pcl-modal-body label[b-9w7oqih3al] {
    display: grid;
    gap: 7px;
}

.pcl-modal-body span[b-9w7oqih3al] {
    color: var(--pcl-text);
    font-size: 14px;
    font-weight: 900;
}

.pcl-modal-body select[b-9w7oqih3al],
.pcl-modal-body input[b-9w7oqih3al] {
    height: 40px;
    border: 1px solid var(--pcl-line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--pcl-text);
    font-size: 14px;
    font-weight: 700;
    outline: none;
}

.pcl-modal-actions[b-9w7oqih3al] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid #e5edf7;
}

/* ===== Rev: Sum cards แสดงครบ 8 สถานะ / 2 แถว พร้อม Step ===== */
.pcl-kpis[b-9w7oqih3al] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.pcl-kpi[b-9w7oqih3al] {
    min-height: 92px;
    padding: 12px 14px 13px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "step step"
        "title title"
        "value unit";
    align-items: end;
    column-gap: 8px;
    row-gap: 3px;
}

.pcl-kpi .pcl-kpi-step[b-9w7oqih3al] {
    grid-area: step;
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 13%, #ffffff);
    color: color-mix(in srgb, var(--tone) 72%, #0b2b63);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    padding: 4px 10px;
}

.pcl-kpi p[b-9w7oqih3al] {
    grid-area: title;
    min-height: 34px;
    margin: 3px 0 2px;
    color: var(--pcl-text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
}

.pcl-kpi strong[b-9w7oqih3al] {
    grid-area: value;
    font-size: 22px;
    line-height: 1;
}

.pcl-kpi span[b-9w7oqih3al] {
    grid-area: unit;
    margin-left: 0;
    align-self: center;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .pcl-kpis[b-9w7oqih3al] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .pcl-kpis[b-9w7oqih3al] {
        grid-template-columns: 1fr;
    }
}

/* ===== Rev3: Sum Card 2 แถว + Step อยู่บรรทัดเดียวกับสถานะ + สีไม่ซ้ำกัน ===== */
.tone-total[b-9w7oqih3al] { --tone: #0b2b63; }
.tone-step1[b-9w7oqih3al] { --tone: #f59e0b; }
.tone-step2[b-9w7oqih3al] { --tone: #2563eb; }
.tone-step3[b-9w7oqih3al] { --tone: #06b6d4; }
.tone-step4[b-9w7oqih3al] { --tone: #7c3aed; }
.tone-step5[b-9w7oqih3al] { --tone: #f97316; }
.tone-step6[b-9w7oqih3al] { --tone: #db2777; }
.tone-step7[b-9w7oqih3al] { --tone: #4f46e5; }
.tone-step8[b-9w7oqih3al] { --tone: #16a34a; }

.pcl-kpis[b-9w7oqih3al] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.pcl-kpi[b-9w7oqih3al] {
    min-height: 86px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title title"
        "value unit";
    align-items: end;
    column-gap: 8px;
    row-gap: 5px;
}

.pcl-kpi-title-line[b-9w7oqih3al] {
    grid-area: title;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-height: 42px;
}

.pcl-kpi .pcl-kpi-step[b-9w7oqih3al] {
    flex: 0 0 auto;
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 14%, #ffffff);
    color: color-mix(in srgb, var(--tone) 76%, #0b2b63);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    padding: 3px 8px;
}

.pcl-kpi p[b-9w7oqih3al] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 2px 0 0;
    color: var(--pcl-text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
}

.pcl-kpi strong[b-9w7oqih3al] {
    grid-area: value;
    font-size: 22px;
    line-height: 1;
}

.pcl-kpi span:not(.pcl-kpi-step)[b-9w7oqih3al] {
    grid-area: unit;
    margin-left: 0;
    align-self: center;
    white-space: nowrap;
}

.pcl-chip.tone-total[b-9w7oqih3al],
.pcl-chip.tone-step1[b-9w7oqih3al],
.pcl-chip.tone-step2[b-9w7oqih3al],
.pcl-chip.tone-step3[b-9w7oqih3al],
.pcl-chip.tone-step4[b-9w7oqih3al],
.pcl-chip.tone-step5[b-9w7oqih3al],
.pcl-chip.tone-step6[b-9w7oqih3al],
.pcl-chip.tone-step7[b-9w7oqih3al],
.pcl-chip.tone-step8[b-9w7oqih3al] {
    background: color-mix(in srgb, var(--tone) 14%, #ffffff);
    color: color-mix(in srgb, var(--tone) 76%, #0b2b63);
}

.pcl-flow-btn.tone-step6[b-9w7oqih3al] {
    border-color: color-mix(in srgb, var(--tone) 45%, #ffffff);
    background: color-mix(in srgb, var(--tone) 13%, #ffffff);
    color: color-mix(in srgb, var(--tone) 72%, #0b2b63);
}

.pcl-flow-btn.tone-step7[b-9w7oqih3al] {
    border-color: color-mix(in srgb, var(--tone) 45%, #ffffff);
    background: color-mix(in srgb, var(--tone) 13%, #ffffff);
    color: color-mix(in srgb, var(--tone) 72%, #0b2b63);
}

.pcl-flow-btn.tone-step8[b-9w7oqih3al] {
    border-color: color-mix(in srgb, var(--tone) 45%, #ffffff);
    background: color-mix(in srgb, var(--tone) 13%, #ffffff);
    color: color-mix(in srgb, var(--tone) 72%, #0b2b63);
}

@media (max-width: 1280px) {
    .pcl-kpis[b-9w7oqih3al] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .pcl-kpis[b-9w7oqih3al] {
        grid-template-columns: 1fr;
    }
}

/* ===== Rev4: จัด Step badge กับข้อความสถานะให้อยู่บรรทัดเดียวกันและระดับเดียวกัน ===== */
.pcl-kpi-title-line[b-9w7oqih3al] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 28px !important;
}

.pcl-kpi .pcl-kpi-step[b-9w7oqih3al] {
    flex: 0 0 auto !important;
    height: 24px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 9px !important;
    line-height: 1 !important;
}

.pcl-kpi p[b-9w7oqih3al] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 24px !important;
    display: block !important;
}

.pcl-kpi-title-line .pcl-kpi-step + p[b-9w7oqih3al] {
    padding-top: 0 !important;
}

/* ถ้าข้อความยาวมาก ให้ตัดบรรทัดแบบไม่ทำให้ Step เยื้อง */
.pcl-kpi p[b-9w7oqih3al] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ===== Rev5: ให้การ์ด Sum กดกรองสถานะได้ ===== */
.pcl-kpi[b-9w7oqih3al] {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pcl-kpi:hover[b-9w7oqih3al] {
    border-color: color-mix(in srgb, var(--tone) 58%, #ffffff);
    box-shadow: 0 6px 16px rgba(13, 27, 62, .12);
    transform: translateY(-1px);
}

.pcl-kpi.active[b-9w7oqih3al] {
    border-color: color-mix(in srgb, var(--tone) 70%, #ffffff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 16%, #ffffff), 0 7px 18px rgba(13, 27, 62, .14);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 9%, #ffffff), #ffffff);
}

.pcl-kpi.active[b-9w7oqih3al]::before {
    width: 6px;
}

.pcl-kpi:focus-visible[b-9w7oqih3al] {
    outline: 3px solid color-mix(in srgb, var(--tone) 36%, #ffffff);
    outline-offset: 2px;
}

/* ===== Rev: ปรับช่องค้นหาให้ยาวขึ้น และดันปุ่มค้นหาไปชิดขวาเท่าปุ่มเพิ่ม Case ===== */
.pcl-filterbar[b-9w7oqih3al] {
    grid-template-columns:
        minmax(460px, 2.35fr)
        minmax(210px, .95fr)
        minmax(230px, 1.05fr)
        minmax(190px, .9fr)
        minmax(220px, auto) !important;
}

.pcl-search-btn[b-9w7oqih3al] {
    width: 100% !important;
    min-width: 110px !important;
}

.pcl-clear-btn[b-9w7oqih3al] {
    width: 100% !important;
    min-width: 94px !important;
}

@media (max-width: 1180px) {
    .pcl-filterbar[b-9w7oqih3al] {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 720px) {
    .pcl-filterbar[b-9w7oqih3al] {
        grid-template-columns: 1fr !important;
    }
}

/* ===== Step Tone Colors for List Page ===== */
.pcl-page .tone-step1[b-9w7oqih3al] {
    --tone: #f59e0b;
}
.pcl-page .tone-step2[b-9w7oqih3al] {
    --tone: #2563eb;
}
.pcl-page .tone-step3[b-9w7oqih3al] {
    --tone: #06b6d4;
}
.pcl-page .tone-step4[b-9w7oqih3al] {
    --tone: #7c3aed;
}
.pcl-page .tone-step5[b-9w7oqih3al] {
    --tone: #f97316;
}
.pcl-page .tone-step6[b-9w7oqih3al] {
    --tone: #db2777;
}
.pcl-page .tone-step7[b-9w7oqih3al] {
    --tone: #4f46e5;
}
.pcl-page .tone-step8[b-9w7oqih3al] {
    --tone: #16a34a;
}
.pcl-page .tone-step9[b-9w7oqih3al] {
    --tone: #0891b2;
}
.pcl-page .tone-step10[b-9w7oqih3al] {
    --tone: #9333ea;
}
.pcl-page .tone-step11[b-9w7oqih3al] {
    --tone: #0d9488;
}

/* ===== Flow buttons and statuses overrides for Popup Modal ===== */
.psd-flow-btn[b-9w7oqih3al] {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.psd-flow-btn.tone-green[b-9w7oqih3al] {
    border-color: #b8ebd8 !important;
    background: #16a34a !important;
    color: #ffffff !important;
}

.psd-flow-btn:disabled[b-9w7oqih3al] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.psd-btn[b-9w7oqih3al] {
    border: 1px solid #c9dcf5 !important;
    border-radius: 8px !important;
    background: #0d2a5c !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.psd-btn-light[b-9w7oqih3al] {
    background: #ffffff !important;
    color: #0b2b63 !important;
    border-color: #d7e2f1 !important;
}

/* Upload label custom styles */
.psc-upload-btn-label[b-9w7oqih3al] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #0d2a5c !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background-color 0.2s, transform 0.1s !important;
    box-shadow: 0 4px 10px rgba(13, 42, 92, 0.15) !important;
    user-select: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.psc-upload-btn-label:hover[b-9w7oqih3al] {
    background-color: #1a4387 !important;
}

.psc-upload-btn-label:active[b-9w7oqih3al] {
    transform: scale(0.98) !important;
}

.psc-upload-btn-label input[type="file"][b-9w7oqih3al] {
    display: none !important;
}
/* /Pages/PersonScreen/PersonScreenDashboardPage.razor.rz.scp.css */
.psd-page[b-pz6rqh95dw] {
    --psd-bg: #eaf2fb;
    --psd-card: #ffffff;
    --psd-line: #d6e2f2;
    --psd-text: #0b2b63;
    --psd-muted: #6e82a3;
    --psd-blue: #214f9b;
    --psd-orange: #f5a623;
    --psd-green: #1fc989;
    --psd-red: #f25b5b;
    margin: -24px;
    min-height: calc(100vh - var(--header-h));
    padding: 28px 22px 30px;
    background: var(--psd-bg);
    color: var(--psd-text);
}

.psd-hero[b-pz6rqh95dw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.psd-kicker[b-pz6rqh95dw] {
    color: var(--psd-orange);
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 7px;
}

.psd-hero h1[b-pz6rqh95dw] {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--psd-text);
}

.psd-hero p[b-pz6rqh95dw] {
    margin: 8px 0 0;
    color: var(--psd-muted);
    font-size: 13px;
    font-weight: 700;
}

.psd-live-pill[b-pz6rqh95dw] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 250px;
    justify-content: center;
    border: 1px solid var(--psd-line);
    background: #fff;
    border-radius: 8px;
    padding: 9px 14px;
    color: #0b2b63;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
}

.psd-live-pill span[b-pz6rqh95dw] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--psd-green);
    box-shadow: 0 0 0 4px rgba(31, 201, 137, .12);
}

.psd-kpis[b-pz6rqh95dw] {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.psd-kpi[b-pz6rqh95dw] {
    position: relative;
    overflow: hidden;
    min-height: 78px;
    background: var(--psd-card);
    border: 1px solid var(--psd-line);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
}

.psd-kpi[b-pz6rqh95dw]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--tone);
}

.psd-kpi div[b-pz6rqh95dw] {
    font-size: 12px;
    font-weight: 800;
    color: var(--psd-text);
    margin-bottom: 5px;
}

.psd-kpi strong[b-pz6rqh95dw] {
    display: inline-block;
    min-width: 40px;
    color: var(--psd-text);
    font-size: 23px;
    line-height: 1;
    font-weight: 800;
}

.psd-kpi span[b-pz6rqh95dw] {
    color: var(--psd-muted);
    font-size: 11px;
    font-weight: 800;
    margin-left: 6px;
}

.tone-blue[b-pz6rqh95dw] { --tone: var(--psd-blue); }
.tone-orange[b-pz6rqh95dw] { --tone: var(--psd-orange); }
.tone-green[b-pz6rqh95dw] { --tone: var(--psd-green); }
.tone-red[b-pz6rqh95dw] { --tone: var(--psd-red); }

.psd-toolbar[b-pz6rqh95dw] {
    display: grid;
    grid-template-columns: minmax(260px, 1.8fr) repeat(3, minmax(150px, 1fr)) auto auto auto;
    gap: 10px;
    align-items: center;
    background: var(--psd-card);
    border: 1px solid var(--psd-line);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 16px;
}

.psd-search[b-pz6rqh95dw] {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    border: 1px solid var(--psd-line);
    border-radius: 8px;
    padding: 0 12px;
    color: #6f86ab;
    background: #fff;
}

.psd-search input[b-pz6rqh95dw],
.psd-toolbar select[b-pz6rqh95dw] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--psd-text);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.psd-toolbar select[b-pz6rqh95dw] {
    height: 38px;
    border: 1px solid var(--psd-line);
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    color: #567098;
}

.psd-btn[b-pz6rqh95dw] {
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--psd-line);
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.psd-btn-primary[b-pz6rqh95dw] {
    border-color: #0b2b63;
    background: #0b2b63;
    color: #fff;
}

.psd-btn-light[b-pz6rqh95dw],
.psd-btn-export[b-pz6rqh95dw] {
    background: #fff;
    color: var(--psd-text);
}

.psd-insights[b-pz6rqh95dw] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.psd-card[b-pz6rqh95dw] {
    background: var(--psd-card);
    border: 1px solid var(--psd-line);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04);
}

.psd-card-head h2[b-pz6rqh95dw] {
    margin: 0;
    color: var(--psd-text);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
}

.psd-card-head span[b-pz6rqh95dw] {
    display: block;
    margin-top: 3px;
    color: var(--psd-muted);
    font-size: 11px;
    font-weight: 700;
}

.psd-donut-wrap[b-pz6rqh95dw] {
    --donut-size: 184px;
    --donut-hole: 108px;
    --donut-center-width: 88px;
    position: relative;
    display: grid;
    grid-template-columns: var(--donut-size) max-content;
    gap: 18px;
    align-items: center;
    margin-top: 14px;
}

.psd-donut[b-pz6rqh95dw] {
    width: var(--donut-size);
    height: var(--donut-size);
    border-radius: 50%;
    background: conic-gradient(var(--psd-green) 0 55%, var(--psd-blue) 55% 77%, var(--psd-orange) 77% 94%, var(--psd-red) 94% 100%);
}

.psd-donut[b-pz6rqh95dw]::after {
    content: "";
    position: absolute;
    width: var(--donut-hole);
    height: var(--donut-hole);
    left: calc((var(--donut-size) - var(--donut-hole)) / 2);
    top: calc((var(--donut-size) - var(--donut-hole)) / 2);
    border-radius: 50%;
    background: #fff;
}

.psd-donut-center[b-pz6rqh95dw] {
    position: absolute;
    left: calc((var(--donut-size) - var(--donut-center-width)) / 2);
    top: 58px;
    width: var(--donut-center-width);
    text-align: center;
    color: var(--psd-text);
}

.psd-donut-center strong[b-pz6rqh95dw] {
    display: block;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
}

.psd-donut-center span[b-pz6rqh95dw] {
    display: block;
    margin-top: 5px;
    color: var(--psd-muted);
    font-size: 10px;
    font-weight: 800;
}

.psd-legend[b-pz6rqh95dw] {
    display: grid;
    gap: 8px;
    width: max-content;
    min-width: 126px;
}

.psd-legend div[b-pz6rqh95dw] {
    display: grid;
    grid-template-columns: 8px max-content max-content;
    align-items: center;
    justify-content: start;
    gap: 8px;
}

.psd-alert[b-pz6rqh95dw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.psd-legend b[b-pz6rqh95dw] {
    color: var(--psd-text);
    font-size: 11px;
    white-space: nowrap;
}

.psd-legend strong[b-pz6rqh95dw] {
    color: var(--psd-text);
    font-size: 11px;
    min-width: 32px;
    text-align: right;
}

.psd-dot[b-pz6rqh95dw] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tone);
    flex: 0 0 8px;
}

.psd-bars[b-pz6rqh95dw] {
    display: grid;
    gap: 13px;
    margin-top: 14px;
}

.psd-bar-row[b-pz6rqh95dw] {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(120px, 1.3fr) 28px;
    align-items: center;
    gap: 10px;
}

.psd-bar-row span[b-pz6rqh95dw] {
    color: var(--psd-text);
    font-size: 11px;
    font-weight: 800;
}

.psd-bar-row div[b-pz6rqh95dw] {
    height: 8px;
    border-radius: 99px;
    background: #e8eef7;
    overflow: hidden;
}

.psd-bar-row i[b-pz6rqh95dw] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f4794, #3768c8);
}

.psd-bar-row strong[b-pz6rqh95dw] {
    color: var(--psd-text);
    font-size: 11px;
    text-align: right;
}

.psd-alert-list[b-pz6rqh95dw] {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.psd-alert[b-pz6rqh95dw] {
    min-height: 44px;
    border-radius: 8px;
    background: #f7faff;
    padding: 8px 9px;
}

.psd-alert div[b-pz6rqh95dw] {
    flex: 1;
    min-width: 0;
}

.psd-alert strong[b-pz6rqh95dw],
.psd-alert small[b-pz6rqh95dw] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.psd-alert strong[b-pz6rqh95dw] {
    color: var(--psd-text);
    font-size: 11px;
    font-weight: 800;
}

.psd-alert small[b-pz6rqh95dw] {
    color: var(--psd-muted);
    font-size: 10px;
    font-weight: 700;
}

.psd-alert em[b-pz6rqh95dw],
.psd-status[b-pz6rqh95dw] {
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 14%, white);
    color: color-mix(in srgb, var(--tone) 78%, #0b2b63);
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    padding: 5px 10px;
}

.psd-table-card[b-pz6rqh95dw] {
    padding: 16px 16px 12px;
}

.psd-table-wrap[b-pz6rqh95dw] {
    margin-top: 14px;
    overflow-x: auto;
}

.psd-table[b-pz6rqh95dw] {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    color: var(--psd-text);
}

.psd-table th[b-pz6rqh95dw] {
    background: #e9f1fb;
    color: var(--psd-text);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    padding: 10px 12px;
}

.psd-table td[b-pz6rqh95dw] {
    border-bottom: 1px solid #edf2f8;
    color: var(--psd-text);
    font-size: 11px;
    font-weight: 700;
    padding: 10px 12px;
    vertical-align: middle;
}

.psd-table td:nth-child(2)[b-pz6rqh95dw] {
    color: #173a78;
}

.psd-status[b-pz6rqh95dw] {
    display: inline-flex;
    justify-content: center;
    min-width: 88px;
}

.psd-detail-btn[b-pz6rqh95dw] {
    border: 1px solid #c9dcf5;
    border-radius: 8px;
    background: #eaf3ff;
    color: var(--psd-text);
    font-size: 11px;
    font-weight: 800;
    padding: 6px 12px;
    white-space: nowrap;
}

.psd-table-note[b-pz6rqh95dw] {
    margin-top: 10px;
    color: var(--psd-text);
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .psd-kpis[b-pz6rqh95dw] {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .psd-toolbar[b-pz6rqh95dw] {
        grid-template-columns: 1fr 1fr;
    }

    .psd-insights[b-pz6rqh95dw] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .psd-page[b-pz6rqh95dw] {
        margin: -16px;
        padding: 20px 14px;
    }

    .psd-hero[b-pz6rqh95dw] {
        flex-direction: column;
    }

    .psd-hero h1[b-pz6rqh95dw] {
        font-size: 23px;
    }

    .psd-live-pill[b-pz6rqh95dw] {
        width: 100%;
        min-width: 0;
    }

    .psd-kpis[b-pz6rqh95dw],
    .psd-toolbar[b-pz6rqh95dw] {
        grid-template-columns: 1fr;
    }

    .psd-donut-wrap[b-pz6rqh95dw] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .psd-legend[b-pz6rqh95dw] {
        width: 100%;
    }
}

/* ===== Dashboard Fix 4: จัดการ์ดสรุปสถานะคำขอให้มาอยู่กลางการ์ด ===== */
.psd-donut-card[b-pz6rqh95dw] {
    min-height: 310px;
}

.psd-donut-card .psd-card-head[b-pz6rqh95dw] {
    margin-bottom: 6px;
}

.psd-donut-card .psd-donut-wrap[b-pz6rqh95dw] {
    --donut-size: 205px;
    --donut-hole: 116px;
    --donut-center-width: 92px;
    width: min(100%, 430px);
    margin: 18px auto 0;
    display: grid;
    grid-template-columns: var(--donut-size) 168px;
    gap: 34px;
    align-items: center;
    justify-content: center;
}

.psd-donut-card .psd-donut[b-pz6rqh95dw]::after {
    left: calc((var(--donut-size) - var(--donut-hole)) / 2);
    top: calc((var(--donut-size) - var(--donut-hole)) / 2);
}

.psd-donut-card .psd-donut-center[b-pz6rqh95dw] {
    left: calc((var(--donut-size) - var(--donut-center-width)) / 2);
    top: calc((var(--donut-size) - 52px) / 2);
    width: var(--donut-center-width);
}

.psd-donut-card .psd-legend[b-pz6rqh95dw] {
    width: 168px;
    min-width: 168px;
    max-width: 168px;
    gap: 10px;
}

.psd-donut-card .psd-legend div[b-pz6rqh95dw] {
    display: grid;
    grid-template-columns: 8px minmax(86px, 1fr) 36px;
    align-items: center;
    gap: 8px;
    width: 168px;
}

.psd-donut-card .psd-legend b[b-pz6rqh95dw] {
    min-width: 0;
    font-size: 11px;
}

.psd-donut-card .psd-legend strong[b-pz6rqh95dw] {
    min-width: 36px;
    text-align: right;
    font-size: 11px;
}

@media (max-width: 1180px) {
    .psd-donut-card .psd-donut-wrap[b-pz6rqh95dw] {
        width: min(100%, 430px);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 720px) {
    .psd-donut-card .psd-donut-wrap[b-pz6rqh95dw] {
        width: 100%;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 16px;
    }

    .psd-donut-card .psd-legend[b-pz6rqh95dw],
    .psd-donut-card .psd-legend div[b-pz6rqh95dw] {
        width: 190px;
        min-width: 190px;
        max-width: 190px;
    }
}

/* ===== Dashboard Grid Rows ===== */
.psd-row-1[b-pz6rqh95dw] {
    display: grid;
    grid-template-columns: minmax(300px, 360px) 1fr;
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}

.psd-row-3[b-pz6rqh95dw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}

.psd-card-flex-stretch[b-pz6rqh95dw] {
    margin-bottom: 0;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    box-sizing: border-box;
}

.psd-card-flex-donut[b-pz6rqh95dw] {
    margin-bottom: 0;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

/* ===== Predictive Analytics Styling ===== */
.psd-predictive-row[b-pz6rqh95dw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.psd-predictive-left[b-pz6rqh95dw] {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1.5px solid #bfdbfe;
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 2px 8px rgba(37,99,235,0.04);
}

.psd-predictive-left-title[b-pz6rqh95dw] {
    font-size: 12.5px;
    font-weight: 800;
    color: #1e40af;
    margin-bottom: 8px;
    letter-spacing: 0.2px;
}

.psd-predictive-left-val[b-pz6rqh95dw] {
    font-size: 42px;
    font-weight: 900;
    color: #1d4ed8;
    line-height: 1;
    margin-bottom: 12px;
}

.psd-predictive-left-val span[b-pz6rqh95dw] {
    font-size: 16px;
    font-weight: 800;
    color: #1e40af;
    margin-left: 2px;
}

.psd-predictive-left-pill[b-pz6rqh95dw] {
    background: #ffffff;
    border: 1.5px solid #bfdbfe;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 800;
    color: #1e3a8a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.psd-predictive-right[b-pz6rqh95dw] {
    border: 1.5px solid #d6e2f2;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}

.psd-predictive-right-title[b-pz6rqh95dw] {
    font-size: 13.5px;
    font-weight: 900;
    color: #0b2b63;
    display: flex;
    align-items: center;
    gap: 6px;
}

.psd-predictive-right-title span[b-pz6rqh95dw] {
    font-size: 16px;
}

.psd-predictive-right-list[b-pz6rqh95dw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

.psd-predictive-right-item[b-pz6rqh95dw] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #475569;
}

.psd-predictive-right-item span[b-pz6rqh95dw] {
    font-size: 13px;
    line-height: 1;
}

.psd-predictive-right-alert[b-pz6rqh95dw] {
    border: 1px solid #fde047;
    background-color: #fefce8;
    padding: 8px 12px;
    border-radius: 8px;
    color: #854d0e;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.psd-predictive-right-alert span[b-pz6rqh95dw] {
    font-size: 13px;
    line-height: 1;
}

.psd-predictive-right-alert div[b-pz6rqh95dw] {
    font-weight: 800;
}