/* SMC Production Control — stylesheet
   ลำดับกฎในไฟล์มีผลต่อ cascade: อย่าย้ายกฎข้ามส่วน ถ้าจะแก้ค่าให้แก้ที่ส่วนท้ายสุดที่ประกาศ selector นั้น */
/* ==========================================================================
   1. โครงสร้างหลักและคอมโพเนนต์พื้นฐาน
   layout grid, topbar, sidebar, การ์ด, ตาราง, ฟอร์ม, pill, toast — เหลือเฉพาะ layout ที่ยังใช้ (สีถูกทับโดยส่วน 3–5)
   ========================================================================== */

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
.topbar { z-index: 1040; min-height: 72px; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #36413d; font-size: .77rem; font-weight: 900; letter-spacing: .08em; }
.brand-title { font-size: .94rem; line-height: 1.15; }
.brand-subtitle { font-size: .68rem; }
.avatar { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #375249; font-size: .72rem; font-weight: 800; }
.live-indicator { align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #1d4a39; font-size: .66rem; font-weight: 800; }
.live-indicator i, .live-dot { width: 7px; height: 7px; }
.menu-button { width: 41px; height: 41px; padding: 0; border: 1px solid var(--line); }
.btn-accent { font-weight: 800; }
.btn-ghost { border: 1px solid #303735; }
.layout-grid { display: grid; grid-template-columns: 274px minmax(0,1fr); min-height: calc(100vh - 72px); }
.sidebar { position: sticky; top: 72px; display: flex; flex-direction: column; height: calc(100vh - 72px); padding: 20px 14px; overflow-y: auto; }
.department-nav { display: grid; gap: 5px; }
.nav-group { border: 1px solid transparent; }
.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  text-align: left;
}
.nav-group-header strong, .nav-group-header small { display: block; }
.nav-group-header small { margin-top: 3px; }
.nav-group-header b { font-size: 1rem; font-weight: 400; }
.nav-subitems { display: grid; gap: 3px; }
.nav-subitem {
  display: grid;
  grid-template-columns: 33px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  background: transparent;
  text-align: left;
}
.nav-subitem > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #29302e; font-size: .59rem; font-weight: 900; }
.nav-subitem strong, .nav-subitem small { display: block; }
.nav-subitem small { margin-top: 2px; font-size: .6rem; }
.nav-subitem > span .nav-icon { width: 18px; height: 18px; }
.function-card > span .nav-icon { width: 23px; height: 23px; }
.main-content { min-width: 0; padding: 30px clamp(18px,3vw,48px) 60px; }
.content-heading { min-height: 58px; }
.eyebrow { font-weight: 900; }
.date-chip { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: .7rem; }
.view-stack { display: grid; gap: 23px; }
.panel-card, .dashboard-hero, .metric-card { overflow: hidden; border: 1px solid var(--line); }
.panel-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.panel-heading h2 { margin: 5px 0 0; font-size: 1rem; font-weight: 800; }
.panel-title { margin: 8px 0 18px; font-size: 1.2rem; font-weight: 800; }
.dashboard-hero { position: relative; }
.dashboard-hero::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -110px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(73,215,158,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(73,215,158,.018), 0 0 0 84px rgba(73,215,158,.012);
}
.dashboard-hero > * { position: relative; z-index: 1; }
.hero-performance { display: flex; align-items: center; gap: 24px; padding: 24px; border: 1px solid #27322e; }
.hero-performance > div:last-child small, .hero-performance > div:last-child strong, .hero-performance > div:last-child span { display: block; }
.hero-performance > div:last-child small { color: var(--muted); font-size: .68rem; }
.hero-performance > div:last-child strong { margin: 5px 0 0; font-size: 2.2rem; line-height: 1; }
.hero-performance > div:last-child span { color: #899490; }
.hero-performance p { margin: 13px 0 0; color: #81908a; font-size: .66rem; }
.progress-ring { display: grid; flex: 0 0 auto; place-items: center; width: 120px; height: 120px; border-radius: 50%; }
.progress-ring::before { content: ''; position: absolute; width: 94px; height: 94px; border-radius: 50%; }
.progress-ring > div { z-index: 1; text-align: center; }
.progress-ring strong, .progress-ring small { display: block; }
.progress-ring strong { font-size: 1.45rem; }
.progress-ring small { color: var(--muted); font-size: .6rem; }
.metric-card { position: relative; }
.metric-card::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; background: var(--accent, var(--green)); }
.metric-card small, .metric-card strong { display: block; }
.metric-card > strong { margin: 10px 0 7px; font-size: 1.75rem; }
.metric-card p { margin: 0; }
.chart-legend { display: flex; gap: 15px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 2px; }
.bar { width: min(24px,38%); min-height: 4px; transition: height .3s ease; }
.bar.plan { border: 1px solid #47504d; }
.activity-feed { display: grid; margin-top: 22px; }
.activity-feed > div { display: grid; grid-template-columns: 42px 10px 1fr; gap: 9px; position: relative; min-height: 58px; }
.activity-feed > div:not(:last-child)::after { content: ''; position: absolute; left: 56px; top: 22px; width: 1px; height: 34px; }
.activity-feed > div > span { color: #77817e; font-size: .62rem; }
.activity-feed i { z-index: 1; width: 8px; height: 8px; margin-top: 3px; }
.activity-feed p, .activity-feed strong, .activity-feed small { display: block; margin: 0; }
.activity-feed small { margin-top: 3px; color: var(--muted); font-size: .62rem; }
.line-card { position: relative; color: var(--text); text-align: left; transition: .2s ease; }
.line-card::before { content: ''; position: absolute; top: 0; background: var(--line-accent,var(--green)); }
.line-card:hover { border-color: #3b4541; transform: translateY(-2px); }
.line-card h3 { font-weight: 500; }
.line-card .progress { height: 5px; margin: 13px 0 10px; background: #1c2220; }
.line-card .progress-bar { background: var(--line-accent,var(--green)); }
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .59rem;
  font-weight: 800;
  white-space: nowrap;
}
.status-pill.running { color: #77e4b9; border-color: #245641; background: #11291f; }
.status-pill.ready { color: #79cde5; border-color: #294d57; background: #10252b; }
.status-pill.paused { color: #ff9ba3; border-color: #5c3035; background: #2a1518; }
.status-pill.complete { color: #d7f59e; border-color: #42572d; background: #1d2813; }
.dark-table > :not(caption) > * > * { padding: 14px 17px; background: transparent; box-shadow: none; }
.dark-table thead th { font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.dark-table tbody tr:last-child td { border-bottom: 0; }
.time-code { display: inline-flex; padding: 5px 8px; border: 1px solid #2b3330; font-family: ui-monospace,Consolas,monospace; }
.positive { font-weight: 800; }
.function-card {
  display: grid;
  grid-template-columns: 45px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  transition: .2s ease;
}
.function-card:hover { border-color: #405049; background: var(--panel-2); transform: translateY(-2px); }
.function-card > span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #2d443a; font-size: .67rem; font-weight: 900; }
.function-card strong, .function-card small { display: block; }
.function-card strong { font-size: .8rem; }
.function-card small { margin-top: 3px; color: var(--muted); font-size: .64rem; }
.boundary-badge { padding: 8px 11px; border: 1px solid #5b4722; border-radius: 999px; }
.dark-info { height: 100%; min-height: 75px; padding: 14px; border: 1px solid #202624; border-radius: 12px; background: #0e1110; }
.dark-info span, .dark-info strong { display: block; }
.dark-info span { margin-bottom: 7px; color: var(--muted); }
.stock-pair { display: flex; justify-content: space-between; color: var(--muted); font-size: .65rem; }
.dark-alert { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; padding: 16px; border: 1px solid; }
.dark-alert strong, .dark-alert small { display: block; }
.dark-alert small { margin-top: 3px; color: var(--muted); }
.home-panel { display: flex; flex-direction: column; }
.home-list { margin: 0; padding: 0 18px; list-style: none; }
.home-list li { padding: 11px 0; border-top: 1px solid var(--line); }
.home-list li > a, .home-list li > div { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.home-list strong { font-size: .8rem; }
.home-list span { color: var(--muted); font-size: .68rem; }
.home-list small { font-size: .64rem; }
.home-list a:hover strong { color: #3979a7; }
.home-panel-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding: 12px 18px 16px; }
.mr-group { margin: 0; }
.mr-group summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.mr-group summary::-webkit-details-marker { display: none; }
.mr-group summary h2 { margin: 4px 0 0; font-size: .95rem; }
.mr-group summary .mr-group-toggle { color: var(--muted); font-size: .68rem; }
.mr-group[open] summary .mr-group-toggle .closed-label, .mr-group:not([open]) summary .mr-group-toggle .open-label { display: none; }
.mr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 0 18px 18px; }
.mr-tile { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.mr-tile.is-short { border-color: #75444a; }
.mr-tile.is-action { border-color: #3979a7; }
.mr-tile.is-cancelled { opacity: .6; }
.mr-tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mr-tile-head strong { display: block; font-size: .86rem; }
.mr-tile-product small { display: block; margin-top: 2px; color: var(--muted); font-size: .64rem; }
.mr-tile-meta { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .64rem; }
.mr-tile-summary { font-size: .68rem; font-weight: 700; }
.mr-tile-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }
.mr-modal-meta { display: grid; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; color: var(--muted); font-size: .68rem; }
.page-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.page-nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.page-nav-links a, .page-nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
}
.page-nav-links span.current { color: #fff; border-color: #3979a7; background: #3979a7; }
.page-nav-links a.disabled { opacity: .45; pointer-events: none; }
.plan-materials { padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.plan-materials-title, .job-materials-title { margin: 4px 0 2px; font-size: .9rem; font-weight: 800; }
.plan-material-rows { display: grid; gap: 8px; }
.plan-material-unit { min-width: 48px; justify-content: center; font-size: .7rem; }
.job-materials { padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.stock-ok { color: var(--green); font-weight: 700; }
.stock-short { color: var(--red); font-weight: 700; }
.stock-low { color: var(--amber); font-weight: 700; }
.stock-count-input { width: 110px; text-align: right; }
.stock-count-form { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.stock-diff { font-family: ui-monospace,Consolas,monospace; font-size: .7rem; }

.responsibility-list > div { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #0e1110; }
.responsibility-list > div > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 36px;
  border: 1px solid #4b3d71;
  border-radius: 9px;
  font-size: .61rem;
  font-weight: 900;
}
.responsibility-list strong, .responsibility-list small { display: block; }
.responsibility-list strong { font-size: .73rem; }
.responsibility-list small { margin-top: 3px; color: var(--muted); font-size: .61rem; }
.production-grid { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.production-grid > div { padding: 16px; border-right: 1px solid var(--line); background: #0e1110; }
.production-grid > div:last-child { border-right: 0; }
.production-grid small, .production-grid strong { display: block; }
.production-grid small { color: var(--muted); font-size: .63rem; }
.production-grid strong { margin-top: 7px; font-size: .93rem; }
.manpower-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.manpower-lines > div { padding: 22px; background: var(--panel); }
.manpower-lines > div > span { color: var(--muted); font-size: .67rem; }
.manpower-lines p { margin: 8px 0 10px; }
.manpower-lines p strong { font-size: 1.4rem; }
.manpower-lines p small { color: var(--muted); }
.manpower-lines .progress { height: 5px; }
.stage-counter { padding: 9px 12px; border: 1px solid #315d4b; border-radius: 10px; font-size: .66rem; font-weight: 900; }

.current-step { display: flex; align-items: center; gap: 24px; }
.current-step > span { font-size: clamp(3.8rem,8vw,6rem); font-weight: 900; line-height: 1; }
.current-step small { color: var(--green); font-size: .62rem; font-weight: 900; }
.current-step h2 { margin: 4px 0 8px; font-size: 1.25rem; font-weight: 800; }
.current-step p { margin: 0; color: var(--muted); font-size: .76rem; }
.responsibility-list { display: grid; gap: 8px; }
.responsibility-list > div > span { color: var(--green); border-color: #315d4b; background: #10251e; }
.responsibility-list p { margin: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1199.98px) {
  .hero-performance { justify-content: center; }
}

@media (max-width: 991.98px) {
  .layout-grid { display: block; }
  .sidebar {
    position: fixed;
    z-index: 1060;
    top: 0;
    left: 0;
    width: min(320px,88vw);
    height: 100vh;
    transform: translateX(-105%);
    background: #060807;
    box-shadow: 24px 0 55px rgba(0,0,0,.45);
    transition: transform .22s ease;
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: 1050; inset: 0; border: 0; background: rgba(0,0,0,.68); backdrop-filter: blur(2px); }
  .main-content { padding-top: 24px; }
}

@media (max-width: 767.98px) {
  .production-grid { grid-template-columns: 1fr 1fr; }
  .production-grid > div:nth-child(2) { border-right: 0; }
  .production-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 575.98px) {
  .topbar { min-height: 66px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-subtitle { display: none; }
  .layout-grid { min-height: calc(100vh - 66px); }
  .main-content { padding: 19px 13px 45px; }
  .content-heading { align-items: flex-start !important; }
  .content-heading > div:last-child { width: 100%; }
  .content-heading .btn { flex: 1; }
  .panel-card, .dashboard-hero, .metric-card { border-radius: 15px; }
  .dashboard-hero { padding: 23px !important; }
  .dashboard-hero .display-5 { font-size: 2rem; }
  .hero-performance { display: block; text-align: center; }
  .progress-ring { margin: 0 auto 20px; }
  .manpower-lines { grid-template-columns: 1fr; }
  .current-step { display: block; }
  .current-step > span { display: block; margin-bottom: 12px; }
  .dark-table > :not(caption) > * > * { padding: 12px 14px; }
}

.executive-dashboard { --executive-blue: #2f739f; --executive-red: #bd5962; --executive-amber: #b7862f; }
.executive-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 30px 34px;
  overflow: hidden;
  border: 1px solid #c9d9e3;
  border-top: 4px solid var(--executive-blue);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(39,60,75,.08);
}
.executive-hero h2 { margin: 13px 0 7px; color: #172532; font-size: clamp(1.7rem,3vw,2.55rem); font-weight: 800; }
.executive-hero p { max-width: 720px; margin: 0; color: #60717d; font-size: .88rem; line-height: 1.75; }
.executive-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 21px; }
.executive-score {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 330px;
  padding: 20px 24px;
  border: 1px solid #cbd9e2;
  border-radius: 8px;
  background: rgba(255,255,255,.88);
}
.executive-score > div:last-child span, .executive-score > div:last-child strong, .executive-score > div:last-child small { display: block; }
.executive-score > div:last-child span { color: #758692; font-size: .72rem; }
.executive-score > div:last-child strong { margin: 5px 0 3px; color: #172532; font-size: 2rem; line-height: 1; }
.executive-score > div:last-child small { color: #758692; font-size: .68rem; }
.executive-kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.executive-kpi {
  position: relative;
  min-width: 0;
  padding: 20px 21px 18px;
  overflow: hidden;
  border: 1px solid #d5dee4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(39,60,75,.07);
}
.executive-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: #7e909b; }
.executive-kpi.primary::before { background: var(--executive-blue); }
.executive-kpi.warning::before { background: var(--executive-amber); }
.executive-kpi.danger::before { background: var(--executive-red); }
.executive-kpi span, .executive-kpi strong, .executive-kpi small { display: block; }
.executive-kpi span { color: #6f808b; font-size: .68rem; font-weight: 700; }
.executive-kpi strong { margin: 9px 0 6px; color: #152532; font-size: clamp(1.55rem,2.7vw,2.15rem); line-height: 1; }
.executive-kpi small { min-height: 30px; color: #7a8993; font-size: .64rem; line-height: 1.5; }
.executive-main-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.85fr); gap: 20px; }
.executive-attention, .executive-status-panel, .executive-line-overview { min-width: 0; }
.executive-alert-list { display: grid; gap: 10px; padding: 0 22px 22px; }
.executive-alert-list article {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid #e0d5bb;
  border-radius: 7px;
  background: #fffaf0;
}
.executive-alert-list article.critical { border-color: #e5c5c9; background: #fff6f7; }
.executive-alert-list article > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 40px;
  border-radius: 6px;
  color: #8c641f;
  background: #f7e8c8;
  font-size: .67rem;
  font-weight: 900;
}
.executive-alert-list article.critical > span { color: #9c3944; background: #f7dfe2; }
.executive-alert-list strong, .executive-alert-list small { display: block; }
.executive-alert-list strong { color: #263845; font-size: .78rem; }
.executive-alert-list small { margin-top: 4px; color: #71818c; font-size: .64rem; line-height: 1.45; }
.executive-alert-list b { color: #9a6c1f; font-size: .62rem; white-space: nowrap; }
.executive-alert-list .critical b { color: #a83f4a; }
.executive-all-clear { padding: 28px; border: 1px solid #cce3d8; border-radius: 7px; background: #f3fbf7; text-align: center; }
.executive-all-clear strong, .executive-all-clear small { display: block; }
.executive-all-clear small { margin-top: 4px; color: #6e8278; }
.executive-status-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0 22px;
  overflow: hidden;
  border: 1px solid #d9e2e7;
  border-radius: 7px;
  background: #d9e2e7;
}
.executive-status-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px; background: #fff; }
.executive-status-list span { display: flex; align-items: center; gap: 8px; color: #667984; font-size: .66rem; }
.executive-status-list strong { color: #20313d; font-size: 1.15rem; }
.executive-status-list i { width: 9px; height: 9px; border-radius: 50%; background: #8ba0ac; }
.executive-status-list i.running { background: #2f8d69; }
.executive-status-list i.complete { background: #4f8fbd; }
.executive-status-list i.paused { background: #bd5962; }
.executive-summary-note { margin: 18px 22px 22px; padding: 17px; border-left: 4px solid var(--executive-blue); background: #edf5fa; }
.executive-summary-note span { color: #56717f; font-size: .62rem; font-weight: 900; letter-spacing: .06em; }
.executive-summary-note p { margin: 7px 0 0; color: #536a77; font-size: .7rem; line-height: 1.6; }
.executive-summary-note strong { color: #1c3443; }
.executive-line-overview > .panel-heading > small { color: #748590; font-size: .65rem; }
.executive-line-list { display: grid; }
.executive-line-list article {
  display: grid;
  grid-template-columns: minmax(220px,.8fr) minmax(260px,1.2fr) 64px;
  gap: 22px;
  align-items: center;
  min-width: 0;
  padding: 16px 22px;
  border-top: 1px solid #e0e7eb;
}
.executive-line-name { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 12px; align-items: center; min-width: 0; }
.executive-line-name strong, .executive-line-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.executive-line-name strong { color: #263945; font-size: .78rem; }
.executive-line-name small { margin-top: 3px; color: #74858f; font-size: .63rem; }
.executive-line-progress > div:first-child { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 8px; color: #70818c; font-size: .62rem; }
.executive-line-progress .progress { height: 7px; margin: 0; }
.executive-line-percent { color: #2d668a; font-size: 1rem; text-align: right; }
.executive-line-percent.risk { color: #ad4651; }

@media (max-width: 1199.98px) {
  .executive-hero { grid-template-columns: minmax(0,1fr) 300px; gap: 22px; }
  .executive-score { min-width: 0; padding: 18px; }
  .executive-kpi-grid { grid-template-columns: 1fr 1fr; }
  .executive-main-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .executive-hero { grid-template-columns: 1fr; padding: 24px; }
  .executive-score { justify-content: center; }
  .executive-line-list article { grid-template-columns: 1fr 62px; gap: 14px; }
  .executive-line-progress { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 575.98px) {
  .executive-kpi-grid { grid-template-columns: 1fr; }
  .executive-score { justify-content: flex-start; }
  .executive-alert-list article { grid-template-columns: 44px minmax(0,1fr); }
  .executive-alert-list article > span { width: 42px; }
  .executive-alert-list article > b { grid-column: 2; }
  .executive-status-list { grid-template-columns: 1fr; }
  .executive-line-name { grid-template-columns: 70px minmax(0,1fr); }
  .executive-line-overview > .panel-heading > small { display: none; }
}

.role-boundary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid #27312d;
  border-radius: 15px;
  background: #0b0e0d;
}
.role-boundary > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #315d4b;
  border-radius: 50%;
  color: var(--green);
  background: #10251e;
}
.role-boundary > div span, .role-boundary > div strong, .role-boundary > div small { display: block; }
.role-boundary > div span { font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.role-boundary > div strong { margin-top: 5px; font-size: .8rem; }
.role-boundary > div small { margin-top: 4px; color: var(--muted); font-size: .64rem; }
.role-allocation { display: grid; gap: 12px; }
.role-allocation article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0e1110;
}
.role-allocation article > div:first-child { display: flex; align-items: center; gap: 13px; }
.role-code {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1px solid #315d4b;
  border-radius: 11px;
  color: var(--green);
  background: #10251e;
  font-size: .65rem;
  font-weight: 900;
}
.role-allocation strong, .role-allocation small { display: block; }
.role-allocation article > div:first-child strong { font-size: .8rem; }
.role-allocation article > div:first-child small { margin-top: 3px; color: var(--muted); font-size: .62rem; }
.stepper { display: grid; grid-template-columns: 38px 44px 38px; align-items: center; text-align: center; }
.stepper button { width: 38px; height: 38px; border: 1px solid #313a37; font-size: 1rem; }
.stepper > strong { display: grid; height: 38px; place-items: center; border-top: 1px solid #313a37; border-bottom: 1px solid #313a37; font-size: 1rem; }
.job-status { display: inline-flex; align-items: center; padding: 7px 11px; border: 1px solid; border-radius: 999px; font-size: .63rem; font-weight: 900; }
.job-status.ready { color: #79cde5; border-color: #294d57; background: #10252b; }
.job-status.running { color: #77e4b9; border-color: #245641; background: #11291f; }
.job-status.paused { color: #f6c05a; border-color: #5b4722; background: #2a2112; }
.job-status.complete { color: #d7f59e; border-color: #42572d; background: #1d2813; }
.timer-panel { overflow: hidden; border: 1px solid #2b3833; border-radius: 17px; }
.timer-schedule { padding: 22px; border-bottom: 1px solid #202724; }
.timer-schedule > strong, .timer-schedule > small { display: block; }
.timer-schedule > strong { margin: 12px 0 8px; font-family: ui-monospace,Consolas,monospace; font-size: clamp(1.7rem,4vw,2.7rem); letter-spacing: .06em; }
.timer-schedule > strong i { font-style: normal; }
.timer-schedule > small { color: var(--muted); font-size: .65rem; }
.timer-metrics { display: grid; grid-template-columns: repeat(3,1fr); }
.timer-metrics > div { min-width: 0; padding: 20px 22px; border-right: 1px solid #202724; }
.timer-metrics > div:last-child { border-right: 0; }
.timer-metrics span, .timer-metrics strong, .timer-metrics small { display: block; }
.timer-metrics span { color: var(--muted); font-size: .62rem; }
.timer-metrics strong {
  margin: 7px 0 5px;
  font-family: ui-monospace,Consolas,monospace;
  font-size: clamp(1.25rem,3vw,1.8rem);
  letter-spacing: .03em;
  white-space: nowrap;
}
.timer-metrics small { overflow: hidden; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.timer-metrics .overdue strong, .timer-metrics .overdue span { color: var(--red); }
.pause-box { height: 100%; padding: 16px; border: 1px solid #2b322f; border-radius: 14px; background: #0e1110; }
.pause-box > small { display: block; margin-top: 8px; color: var(--muted); font-size: .62rem; }
.notification-list { display: grid; gap: 10px; }
.notification-card { display: grid; grid-template-columns: 44px 1fr; gap: 15px; width: 100%; padding: 18px; border: 1px solid var(--line); text-align: left; }
.notification-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #315d4b; font-weight: 900; }
.notification-card > div strong { font-size: .79rem; }
.notification-card > div p { margin: 6px 0; font-size: .68rem; }
.notification-card > div small { font-size: .6rem; }
.notification-card > div i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.recipient-chip { display: inline-flex; padding: 5px 8px; border: 1px solid #2c3e36; border-radius: 999px; font-size: .58rem; font-weight: 800; white-space: nowrap; }
.audit-table { min-width: 980px; }
.audit-table .time-code { white-space: nowrap; }

@media (max-width: 767.98px) {
  .timer-metrics { grid-template-columns: 1fr; }
  .timer-metrics > div { border-right: 0; border-bottom: 1px solid #202724; }
  .timer-metrics > div:last-child { border-bottom: 0; }
  .role-boundary { grid-template-columns: 1fr; }
  .role-boundary > span { transform: rotate(90deg); }
}

@media (max-width: 575.98px) {
  .role-allocation article { align-items: flex-start; flex-direction: column; }
  .stepper { align-self: stretch; grid-template-columns: 42px 1fr 42px; }
  .stepper button { width: 42px; }
  .timer-schedule > strong { font-size: 1.7rem; }
  .notification-card { grid-template-columns: 36px 1fr; padding: 15px; }
  .notification-icon { width: 36px; height: 36px; }
}

.login-page { position: relative; display: grid; overflow: hidden; place-items: center; padding: 28px; }
.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom,black,transparent 90%);
}
.login-orbit { position: absolute; border: 1px solid rgba(73,215,158,.09); border-radius: 50%; pointer-events: none; }
.orbit-one { top: -220px; right: -130px; width: 620px; height: 620px; box-shadow: 0 0 0 70px rgba(73,215,158,.012),0 0 0 140px rgba(73,215,158,.008); }
.orbit-two { bottom: -170px; left: -110px; width: 400px; height: 400px; }
.login-shell { position: relative; z-index: 1; max-width: 1060px; }
.login-card { overflow: hidden; min-height: 650px; border: 1px solid #27312d; }
.login-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  min-height: 650px;
  border-right: 1px solid #27312d;
}
.login-intro::after {
  content: '';
  position: absolute;
  right: -110px;
  bottom: -120px;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(73,215,158,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(73,215,158,.018),0 0 0 110px rgba(73,215,158,.012);
}
.login-intro > * { position: relative; z-index: 1; }
.login-brand { width: 58px; height: 58px; font-size: .8rem; }
.login-intro h1 { margin: 20px 0 16px; font-size: clamp(2.8rem,6vw,4.7rem); font-weight: 900; line-height: .98; letter-spacing: -.055em; }
.login-intro p { max-width: 430px; margin: 0; font-size: .9rem; line-height: 1.8; }
.login-flow { display: flex; align-items: center; width: fit-content; padding: 12px; border: 1px solid #29352f; }
.login-flow span { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #315d4b; font-size: .65rem; font-weight: 900; }
.login-flow i { width: 35px; height: 1px; }
.login-form-side { display: grid; place-items: center; }
.login-form { width: min(100%,410px); }
.login-form h2 { margin: 12px 0 7px; font-size: 2rem; font-weight: 900; }
.login-form > div:first-child p { margin: 0; font-size: .72rem; }
.password-toggle { min-width: 66px; border-color: #303835 !important; color: #9da8a3 !important; background: #151918 !important; font-size: .65rem; }
.password-toggle:hover { color: var(--green) !important; }
.login-error { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #5c3035; border-radius: 10px; font-size: .66rem; }
.demo-credential { margin-top: 23px; padding: 15px; border: 1px dashed #304039; }
.demo-credential > span { font-size: .56rem; font-weight: 900; letter-spacing: .1em; }
.demo-credential p { margin: 7px 0 5px; font-size: .66rem; }
.demo-credential small { display: block; font-size: .58rem; line-height: 1.55; }
.user-chip { align-items: center; gap: 9px; padding-right: 4px; }
.user-chip span, .user-chip strong, .user-chip small { display: block; }
.user-chip strong { max-width: 110px; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.user-chip small { margin-top: 1px; color: var(--muted); font-size: .55rem; }
.btn-logout { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; border: 1px solid #3d292c; }
.btn-logout b { font-size: .72rem; transform: rotate(90deg); }

@media (max-width: 991.98px) {
  .login-page { padding: 18px; }
  .login-card { min-height: auto; }
  .login-intro { min-height: 310px; border-right: 0; border-bottom: 1px solid #27312d; }
  .login-intro h1 { font-size: 3rem; }
  .login-form-side { min-height: 520px; }
}

@media (max-width: 575.98px) {
  .login-page { align-items: start; padding: 0; }
  .login-card { border-width: 0; border-radius: 0; }
  .login-intro { min-height: 235px; padding: 28px !important; }
  .login-intro h1 { margin: 13px 0 9px; font-size: 2.35rem; }
  .login-intro p { font-size: .72rem; line-height: 1.55; }
  .login-flow { display: none; }
  .login-brand { width: 46px; height: 46px; }
  .login-form-side { min-height: calc(100vh - 235px); padding: 28px !important; }
  .btn-logout { width: 38px; justify-content: center; padding: 0; }
}

/* ==========================================================================
   2. หน้า Dashboard, กราฟ SVG, งานผลิต, ปฏิทิน Planning
   กฎ layout ของหน้าที่เพิ่มรอบสอง
   ========================================================================== */

/* Noto Sans Thai is loaded from Google Fonts in index.php / login.php; the rest of the stack is the offline fallback. */
body { font-family: "Noto Sans Thai","Leelawadee UI","Segoe UI",Tahoma,sans-serif; }
.live-indicator { letter-spacing: .03em; }
.live-indicator i, .live-dot { border-radius: 2px; }
.btn-accent { border-radius: 5px; }
.btn-ghost { border-radius: 5px; }
.date-chip, .boundary-badge, .stage-counter { border-radius: 4px; }
.panel-card, .dashboard-hero, .metric-card { border-color: #354451; border-radius: 8px; background: #172029; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.dashboard-hero::after { display: none; }
.metric-card::before { box-shadow: none; }
.bar { border-radius: 2px 2px 0 0; }
.bar.actual { box-shadow: none; }
.activity-feed i { border-radius: 2px; }
.line-card::before { left: 0; right: 0; height: 3px; box-shadow: none; }
.line-card:disabled { cursor: default; opacity: .92; }
.line-card:disabled:hover { border-color: var(--line); }
.status-pill, .job-status, .recipient-chip { border-radius: 4px; }
.time-code { border-radius: 3px; }
.function-card { border-radius: 6px; background: #172029; }
.function-card > span { border-color: #4b687d; border-radius: 5px; color: #c9dfed; background: #243d50; }
.planning-hourly-table { min-width: 860px; }
.planning-command-hero, .monthly-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 30px;
  border: 1px solid #485f70;
  border-left: 5px solid #5d95bc;
  border-radius: 8px;
  background: #17242d;
}
.planning-command-hero h2, .monthly-plan-header h2 { margin: 10px 0 7px; font-size: clamp(1.35rem,2.4vw,2rem); font-weight: 900; }
.planning-command-hero p, .monthly-plan-header p { max-width: 760px; margin: 0; color: #a0adb6; font-size: .74rem; line-height: 1.65; }
.monthly-revision-stamp { flex: 0 0 auto; min-width: 230px; padding: 20px; border: 1px solid #766641; border-radius: 6px; text-align: center; }
.monthly-revision-stamp span, .monthly-revision-stamp strong, .monthly-revision-stamp small { display: block; }
.monthly-revision-stamp span { color: #a9966e; font-size: .55rem; font-weight: 900; letter-spacing: .1em; }
.monthly-revision-stamp strong { margin: 7px 0 5px; font-size: 1.8rem; line-height: 1; }
.monthly-revision-stamp small { color: #8f856f; font-size: .57rem; }
.monthly-revision-stamp.compact { min-width: 105px; padding: 13px; }
.monthly-revision-stamp.compact strong { font-size: 1.15rem; }
.planning-next-list { display: grid; }
.planning-next-list > button {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  text-align: left;
}
.planning-next-list > button:last-child { border-bottom: 0; }
.planning-next-list strong, .planning-next-list small { display: block; }
.planning-next-list strong { font-size: .7rem; }
.planning-next-list small { margin-top: 4px; color: var(--muted); font-size: .6rem; }
.planning-next-list b { color: #7790a2; }
.dark-info, .responsibility-list > div, .pause-box { border-radius: 6px; }
.production-grid, .timer-panel { border-radius: 6px; }
.production-grid > div, .timer-panel { background: #131c23; }
.production-grid:has(> div:nth-child(5):last-child) { grid-template-columns: repeat(5,1fr); }
.role-boundary, .role-allocation article { border-radius: 6px; }
.role-boundary > span, .role-code { border-color: #526e82; border-radius: 4px; color: #d2e4ef; background: #29465b; }
.stepper button { border-radius: 0 !important; }
.stepper button:first-child { border-radius: 4px 0 0 4px !important; }
.stepper button:last-child { border-radius: 0 4px 4px 0 !important; }
.notification-card { border-radius: 6px; }
.completion-confirmed { display: flex; align-items: center; gap: 11px; min-height: 70px; padding: 13px; border: 1px solid #4b6d58; border-radius: 5px; }
.completion-confirmed > span { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 4px; font-weight: 900; }
.completion-confirmed strong, .completion-confirmed small { display: block; }
.completion-confirmed strong { font-size: .7rem; }
.completion-confirmed small { margin-top: 3px; font-size: .56rem; line-height: 1.4; }
.production-owner-badge { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #526f84; border-radius: 4px; font-size: .54rem; font-weight: 900; letter-spacing: .07em; }
.production-form-note { display: block; margin-top: 10px; font-size: .59rem; line-height: 1.5; text-align: center; }
.notification-icon { border-radius: 4px; color: #d7e7f1; border-color: #517089; background: #29465b; }

.login-page::before, .login-orbit { display: none; }
.login-card { border-radius: 8px; }
.login-intro::after { display: none; }
.login-flow { border-radius: 5px; }
.login-flow span { border-radius: 4px; }
.login-form > div:first-child p { color: #697884; }
.login-form .dark-control:focus { border-color: #3979a7 !important; box-shadow: 0 0 0 .18rem rgba(57,121,167,.15) !important; }
.demo-credential { border-radius: 5px; }

@media (max-width: 991.98px) {
  .sidebar { background: #121a22; }
  .login-intro { border-bottom-color: #435565; }
}

.admin-workspace { --admin-blue: #5d95bc; --admin-gold: #c6a45d; }
.admin-level-card { margin: 14px 4px 0; padding: 15px; border: 1px solid #566675; border-left: 4px solid #c6a45d; border-radius: 5px; background: #19242d; }
.admin-level-card span, .admin-level-card strong, .admin-level-card small { display: block; }
.admin-level-card span { font-size: .55rem; font-weight: 900; letter-spacing: .1em; }
.admin-level-card strong { margin: 6px 0 4px; color: #f0d69f; font-size: .78rem; }
.admin-level-card small { font-size: .58rem; line-height: 1.5; }
.admin-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  border: 1px solid #495d6c;
  border-left: 5px solid #c6a45d;
  border-radius: 8px;
  background: #18242d;
}
.admin-hero > div:first-child p { max-width: 650px; margin: 0; color: var(--muted); font-size: .8rem; }
.admin-rank {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 15px;
  min-width: 300px;
  padding: 18px;
  border: 1px solid #506475;
  border-radius: 6px;
  background: #111a21;
}
.admin-rank.highest { border-color: #766641; background: #211f19; }
.admin-rank > span { color: #50606c; font-size: 2.8rem; font-weight: 900; line-height: 1; }
.admin-rank.highest > span { color: #806d43; }
.admin-rank small, .admin-rank strong, .admin-rank p { display: block; }
.admin-rank small { color: #8997a1; font-size: .52rem; font-weight: 900; letter-spacing: .09em; }
.admin-rank strong { margin-top: 5px; color: #e7edf1; font-size: .9rem; }
.admin-rank.highest strong { color: #f0d69f; }
.admin-rank p { margin: 3px 0 0; color: #7f8d97; font-size: .61rem; }
.admin-metric { display: flex; align-items: center; gap: 15px; padding: 18px; border: 1px solid #384957; border-radius: 6px; background: #172029; }
.admin-metric > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #526f84;
  border-radius: 4px;
  color: #d8e7f1;
  background: #29465b;
  font-size: .63rem;
  font-weight: 900;
}
.admin-metric small, .admin-metric strong, .admin-metric p { display: block; }
.admin-metric small { color: var(--muted); font-size: .62rem; }
.admin-metric strong { margin: 3px 0; font-size: 1.45rem; line-height: 1; }
.admin-metric p { margin: 0; color: #71808b; font-size: .58rem; }
.admin-action-card {
  display: grid;
  grid-template-columns: 43px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 94px;
  padding: 16px;
  border: 1px solid #3a4b58;
  border-radius: 6px;
  color: var(--text);
  background: #172029;
  text-align: left;
}
.admin-action-card:disabled { cursor: not-allowed; opacity: .48; }
.admin-action-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #5b7284;
  border-radius: 4px;
  color: #cbdce7;
  background: #263d4e;
  font-size: .62rem;
  font-weight: 900;
}
.admin-action-card strong, .admin-action-card small { display: block; }
.admin-action-card strong { font-size: .75rem; }
.admin-action-card small { margin-top: 3px; color: var(--muted); font-size: .59rem; }
.admin-action-card b { color: #7790a2; }
.admin-form-hint { display: block; margin-top: 7px; color: #7d8a94; font-size: .58rem; line-height: 1.5; }
.admin-user-table { min-width: 850px; }
.admin-user-cell { display: flex; align-items: center; gap: 10px; }
.admin-user-cell > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #526c7f;
  border-radius: 4px;
  color: #dce8ef;
  background: #29465a;
  font-weight: 900;
}
.admin-user-cell strong, .admin-user-cell small { display: block; }
.admin-user-cell small { margin-top: 2px; color: var(--muted); font-size: .58rem; }
.admin-role-badge { display: inline-flex; padding: 5px 8px; border: 1px solid #465866; border-radius: 4px; font-size: .58rem; font-weight: 800; white-space: nowrap; }

@media (max-width: 1199.98px) {
  .production-grid:has(> div:nth-child(5):last-child) { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 991.98px) {
  .planning-command-hero, .monthly-plan-header { align-items: flex-start; flex-direction: column; }
  .monthly-revision-stamp:not(.compact) { width: 100%; min-width: 0; text-align: left; }
}

@media (max-width: 767.98px) {
  .admin-hero { align-items: flex-start; flex-direction: column; }
  .planning-command-hero, .monthly-plan-header { padding: 22px; }
  .production-grid:has(> div:nth-child(5):last-child) { grid-template-columns: 1fr 1fr; }
  .admin-rank { width: 100%; min-width: 0; }
}

/* ==========================================================================
   3. ธีมขาว Corporate
   สี ขอบ พื้นหลัง ของทุกคอมโพเนนต์ + หน้า planning/production/sales/store ที่เพิ่มภายหลัง
   ========================================================================== */

:root { color-scheme: light; }
html, body { color: var(--text); background: var(--bg); }
.app-shell { color: var(--text); }
.brand-mark { color: #fff; background: #2f739f; }
.menu-button { color: #21313d; background: #fff; }
.btn-close-white { filter: none; }
.btn-accent:disabled { color: #eef4f7; border-color: #91a9b8; }
.btn-logout:hover { color: #8c313a; border-color: #cd8990; background: #fdebed; }
.nav-group-header { color: #73828c; }
.nav-group-header b { color: #73838e; }
.nav-subitem small { color: #7a8993; }
.admin-level-card { color: #60717c; border-color: #d1dae0; background: #f7f9fb; }
.admin-level-card { border-left-color: #547f9c; }
.admin-level-card span { color: #71808a; }
.admin-level-card strong { color: #285f84; }
.admin-level-card small { color: #74848e; }
.panel-card, .dashboard-hero, .metric-card, .line-card, .function-card {
  color: var(--text);
  border-color: #d5dee4;
  background: #fff;
  box-shadow: 0 5px 16px rgba(39,60,75,.07);
}
.dashboard-hero { border-top-color: #2f739f; }
.hero-performance > div:last-child span, .hero-performance p { color: #6b7b86; }
.metric-card p { color: #71808a; }
.bar.plan { border-color: #8999a3; background: #aeb9c0; }
.bar.actual { background: #2f739f; }
.activity-feed > div:not(:last-child)::after { background: #d7e0e5; }
.line-card h3 { color: #566873; }
.line-card .progress, .progress { background: #e4eaee; }
.function-card > span { color: #285f84; border-color: #afc7d6; background: #e5f0f7; }
.function-card b { color: #587b91; }
.dark-table { --bs-table-bg: transparent; color: #344650; }
.dark-control option { color: #243640; background: #fff; }
.dark-info, .responsibility-list > div, .pause-box, .role-boundary, .role-allocation article, .production-grid > div {
  color: #263943;
  border-color: #d7e0e5;
  background: #f8fafb;
}
.dark-info, .responsibility-list > div, .pause-box { background: #f8fafb; }
.stock-pair strong { color: #30434e; }
.role-code, .role-boundary > span, .responsibility-list > div > span { color: #285f84; border-color: #acc5d5; background: #e4eff6; }
.role-boundary, .role-allocation article { background: #f8fafb; }
.role-boundary > div span { color: #2f739f; }
.production-grid, .timer-panel { border-color: #d4dee4; }
.timer-panel { background: #fff; }
.timer-schedule { border-bottom-color: #d8e2e7; background: #edf5f9; }
.timer-schedule > strong { color: #182b37; }
.timer-schedule > strong i { color: #2f739f; }
.timer-metrics > div { border-right-color: #dde4e8; background: #fff; }
.timer-metrics strong { color: #203440; }
.timer-metrics small { color: #72828c; }
.completion-confirmed { color: #2f5b3f; border-color: #a9ccb4; background: #eff8f2; }
.notification-card { color: #263943; border-color: #d5dfe5; background: #fff; }
.notification-card.unread { border-color: #9fc0d3; background: #f1f7fb; }
.notification-card.warning.unread { border-color: #dec28c; background: #fff9eb; }
.notification-icon, .recipient-chip { color: #286386; border-color: #b2cad9; background: #eaf3f8; }
.notification-card.warning .notification-icon { color: #946116; border-color: #ddc38f; background: #fff6df; }
.notification-card > div p { color: #5e707b; }
.notification-card > div small { color: #7a8993; }
.stage-counter { color: #286386; border-color: #abc6d7; background: #eaf3f8; }

.current-step > span { color: #dce5ea; }
.planning-command-hero, .monthly-plan-header { color: #213440; border-color: #b8cad5; border-left-color: #2f739f; background: linear-gradient(125deg,#fff,#edf5f9); }
.planning-command-hero p, .monthly-plan-header p { color: #667985; }
.monthly-revision-stamp { border-color: #d6bd87; background: #fff8e8; }
.monthly-revision-stamp span, .monthly-revision-stamp small { color: #816b42; }
.monthly-revision-stamp strong { color: #8b641e; }
.planning-next-list > button { color: #273a45; border-bottom-color: #e1e7eb; }
.planning-next-list > button:hover { background: #f3f7f9; }
.planning-next-list small { color: #71818b; }
.admin-hero { color: #263943; border-color: #c9d5dc; border-left-color: #b58a3d; background: #fff; }
.admin-hero > div:first-child p { color: #687985; }
.admin-rank, .admin-rank.highest { border-color: #d7c18f; background: #fff8e8; }
.admin-rank > span, .admin-rank.highest > span { color: #c5a865; }
.admin-rank strong, .admin-rank.highest strong { color: #74551c; }
.admin-rank p, .admin-rank small { color: #807257; }
.admin-metric, .admin-action-card { color: #2b3e49; border-color: #d3dde3; background: #fff; }
.admin-metric > span, .admin-action-card > span, .admin-user-cell > span { color: #286386; border-color: #afc8d8; background: #e8f2f7; }
.admin-metric p, .admin-action-card small, .admin-user-cell small, .admin-form-hint { color: #70808a; }
.admin-action-card:hover:not(:disabled) { border-color: #9fb6c4; background: #f5f9fb; }
.admin-role-badge { color: #526570; border-color: #cbd5db; background: #f2f5f7; }
.admin-role-badge.admin { color: #82601f; border-color: #d8c18e; background: #fff8e8; }
.login-page { color: #21323e; background: #e9eef2; }
.login-card { border-color: #b9c6ce; background: #fff; box-shadow: 0 18px 50px rgba(27,47,61,.16); }
.login-intro { color: #203544; border-right-color: #c5d1d8; background: linear-gradient(145deg,#e7f0f5,#dce7ee); }
.login-intro .brand-mark { color: #fff; border-color: #2f739f; background: #2f739f; }
.login-intro .eyebrow { color: #2f739f; }
.login-intro p { color: #596d79; }
.login-flow { border-color: #b9cbd6; background: rgba(255,255,255,.6); }
.login-flow span { color: #286386; border-color: #aac5d5; background: #fff; }
.login-flow i { background: #9bb3c1; }
.login-form-side { color: #21323e; background: #fff; }
.login-form .eyebrow { color: #2f739f; }
.login-form .form-label { color: #465a66; }
.login-form .dark-control { color: #21323e !important; border-color: #b9c6ce !important; background-color: #fff !important; }
.login-form .password-toggle { color: #3f5461 !important; border-color: #b9c6ce !important; background: #eef2f5 !important; }
.login-error { color: #9d3b44; border-color: #e0abb0; background: #fff1f2; }
.demo-credential { border-color: #bdc9d0; background: #f2f5f7; }
.demo-credential > span { color: #2f739f; }
.demo-credential p { color: #465a66; }
.demo-credential small { color: #70808a; }

@media (max-width: 991.98px) {
  .sidebar { background: #fff; box-shadow: 18px 0 45px rgba(26,46,60,.18); }
  .login-intro { border-bottom-color: #c5d1d8; }
}

.manpower-lines { background: #d5dde3; }
.production-owner-badge { color: #286386; border-color: #aec8d8; background: #e8f2f7; }
.production-form-note { color: #6e7f89; }
.completion-confirmed > span { color: #fff; background: #4c8960; }
.completion-confirmed small { color: #64836e; }
.activity-feed i { background: #2f739f; box-shadow: 0 0 0 4px #dceaf3; }

@media (max-width: 767.98px) {
  .timer-metrics > div { border-bottom-color: #dde4e8; }
}

a { text-decoration: none; }
.navbar-brand, .live-indicator { color: inherit; }
.nav-subitem, .function-card { text-decoration: none; }
.nav-subitems.is-collapsed { display: none; }
.sidebar-backdrop { display: none; }
.sidebar-backdrop.is-visible { display: block; }
.line-card { height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.line-card h3 { min-height: 42px; margin: 16px 0; font-size: 1rem; }
.line-card > small { display: block; margin-top: 10px; color: var(--muted); }
.line-code { color: var(--accent); font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.toast-message {
  position: fixed;
  z-index: 1200;
  right: 24px;
  bottom: 24px;
  max-width: min(420px,calc(100vw - 32px));
  padding: 14px 18px;
  color: #fff;
  background: #284f66;
  opacity: 0;
  transform: translateY(12px);
  transition: .25s ease;
}
.toast-message.show { opacity: 1; transform: translateY(0); }
.disabled { pointer-events: none; opacity: .45; }
.history-filter-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.history-empty-state { display: grid; gap: 5px; place-items: center; min-height: 150px; color: var(--text); text-align: center; }
.history-empty-state small { color: var(--muted); }
.sidebar-collapse-button {
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  margin-bottom: 12px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  color: #536875;
  background: var(--panel);
  font-size: .68rem;
  font-weight: 800;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.sidebar-collapse-button:hover, .sidebar-collapse-button:focus-visible { color: #245f85; border-color: #9dbdcc; background: #edf5f9; }
.sidebar-collapse-icon { display: grid; place-items: center; width: 22px; height: 22px; font-size: 1.45rem; font-weight: 400; line-height: 1; }
.brand-mark:has(.brand-logo) { overflow: hidden; padding: 2px; border-color: #d2d9dd; background: #fff; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.login-intro .brand-mark.login-brand:has(.brand-logo) { width: 96px; height: 88px; padding: 5px; border-radius: 14px; background: #fff; }

@media (max-width: 991.98px) {
  .sidebar-backdrop.is-visible { position: fixed; z-index: 1050; inset: 0; border: 0; background: rgba(0,0,0,.55); }
}

@media (min-width: 992px) {
  .layout-grid { transition: grid-template-columns .22s ease; }
  .layout-grid.sidebar-is-collapsed { grid-template-columns: 76px minmax(0,1fr); }
  .sidebar { transition: padding .22s ease; }
  .sidebar.is-collapsed { padding-inline: 9px; overflow-x: hidden; }
  .sidebar.is-collapsed .sidebar-collapse-button { padding-inline: 5px; }
  .sidebar.is-collapsed .sidebar-collapse-label { display: none; }
  .sidebar.is-collapsed .department-nav { gap: 8px; }
  .sidebar.is-collapsed .nav-group { padding: 2px; border-radius: 8px; }
  .sidebar.is-collapsed .nav-group-header { height: 8px; margin: 2px 6px 5px; padding: 0; border-top: 1px solid var(--line); pointer-events: none; }
  .sidebar.is-collapsed .nav-group:first-child .nav-group-header { border-top: 0; }
  .sidebar.is-collapsed .nav-group-header span, .sidebar.is-collapsed .nav-group-header b, .sidebar.is-collapsed .nav-subitem > div, .sidebar.is-collapsed .admin-level-card {
    display: none;
  }
  .sidebar.is-collapsed .nav-subitem { display: grid; grid-template-columns: 32px; justify-content: center; gap: 0; padding: 7px; }
  .sidebar.is-collapsed .nav-subitem.active { box-shadow: inset 3px 0 #2f739f; }
  .sidebar.is-collapsed .nav-subitem > span { margin-inline: auto; }
}

html, body { max-width: 100%; overflow-x: clip; }

@media (max-width: 575.98px) {
  .app-shell, .layout-grid, .main-content, .view-stack, .content-heading, .planning-command-hero, .monthly-plan-header { min-width: 0; max-width: 100%; }
  .topbar .container-fluid { min-width: 0; gap: 8px; }
  .topbar .container-fluid > div:first-child { flex: 1 1 0; min-width: 0; overflow: hidden; }
  .topbar .container-fluid > div:last-child { flex: 0 0 auto; min-width: 38px; }
  .menu-button, .brand-mark { flex: 0 0 auto; }
  .navbar-brand { flex: 1 1 auto; min-width: 0; margin-right: 0; overflow: hidden; }
  .navbar-brand > span:last-child { min-width: 0; overflow: hidden; }
  .brand-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .btn-logout { display: grid; place-items: center; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; overflow: hidden; white-space: nowrap; }
  .btn-logout .logout-label { display: none; }
  .btn-logout b { display: grid; place-items: center; width: 14px; height: 14px; line-height: 1; transform: rotate(90deg); }
  .content-heading > div:first-child, .planning-command-hero > div, .monthly-plan-header > div { min-width: 0; max-width: 100%; }
  .content-heading h1, .planning-command-hero h2, .monthly-plan-header h2, .planning-command-hero p, .monthly-plan-header p, .eyebrow { overflow-wrap: anywhere; }
  .date-chip { max-width: 100%; }
}

.calendar-panel { overflow: hidden; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.calendar-toolbar h2 { margin: 6px 0 2px; font-size: 1.35rem; font-weight: 900; }
.calendar-toolbar small { color: var(--muted); font-size: .66rem; }
.calendar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 18px; }
.calendar-month-navigation { display: flex; align-items: center; gap: 7px; }
.calendar-month-arrow {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #2d6d94;
  border: 1px solid #b8cbd6;
  border-radius: 6px;
  background: #f8fbfc;
  font-size: 1.2rem;
  font-weight: 800;
  text-decoration: none;
}
.calendar-month-arrow:hover { color: #fff; border-color: #2f739f; background: #2f739f; }
.calendar-month-picker { display: flex; overflow: hidden; border: 1px solid #b8cbd6; border-radius: 6px; background: #fff; }
.calendar-month-picker input, .calendar-month-picker button { min-height: 32px; border: 0; background: transparent; font-size: .62rem; }
.calendar-month-picker input { width: 132px; padding: 5px 8px; color: #445d6a; }
.calendar-month-picker button { padding: 5px 10px; color: #fff; background: #2f739f; font-weight: 800; }
.calendar-empty-month { padding: 22px; color: #496776; border-bottom: 1px solid #e7d8d8; background: #f2f8fb; text-align: center; }
.calendar-empty-month strong, .calendar-empty-month small { display: block; }
.calendar-empty-month strong { font-size: .82rem; }
.calendar-empty-month small { margin-top: 5px; color: #738691; font-size: .62rem; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .6rem; font-weight: 700; }
.calendar-legend i { width: 9px; height: 9px; border-radius: 2px; background: #3b7fa7; }
.calendar-legend i.sales { background: #c68c25; }
.calendar-legend i.delayed { background: #bf4f58; }
.calendar-legend i.done { background: #3fce47; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #edf3f6; }
.calendar-weekdays span { padding: 10px 8px; color: #587080; border-right: 1px solid var(--line); font-size: .62rem; font-weight: 900; text-align: center; }
.calendar-weekdays span:last-child { border-right: 0; }
.monthly-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; min-width: 0; background: var(--line); }
.calendar-day { min-width: 0; min-height: 132px; padding: 9px; background: var(--panel); }
.calendar-day-blank, .calendar-day.is-empty { background: #f7f9fa; }
.calendar-date { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; margin-bottom: 8px; }
.calendar-date small { display: none; color: var(--muted); font-size: .62rem; font-weight: 800; }
.calendar-date time { display: grid; place-items: center; width: 28px; height: 28px; color: #425966; border-radius: 50%; font-size: .72rem; font-weight: 900; }
.calendar-day.is-today .calendar-date time { color: #fff; background: #2f739f; }
.calendar-jobs { display: grid; min-width: 0; gap: 7px; }
.calendar-no-job { color: #a4b0b8; font-size: .58rem; text-align: center; }
/* Day cell summary: the jobs themselves are on the daily plan sheet, the cell only shows the totals. */
.calendar-day-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; color: #536c79; font-size: .52rem; font-weight: 800; }
.calendar-day-summary .is-issued { color: #427254; }
.calendar-day-summary i { width: 8px; height: 8px; border-radius: 2px; background: #c68c25; }
.calendar-day-summary i.delayed { background: #bf4f58; }
.calendar-day-summary i.done { background: #3fce47; }
/* A fully issued day gets a green tint so it stands out from days still holding drafts. */
.calendar-day.is-issued { background: #eefbf0; }
.calendar-status { color: #367394; font-size: .48rem; font-weight: 900; letter-spacing: .04em; }
.status-delayed .calendar-status { color: #a13c45; }
.calendar-carry { margin-left: 4px; padding: 1px 5px; color: #fff; border-radius: 3px; background: #bf4f58; font-size: .45rem; font-weight: 900; letter-spacing: .03em; }

@media (max-width: 1199.98px) {
  .calendar-weekdays { display: none; }
  .monthly-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; background: #f4f7f9; }
  .calendar-day { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; min-height: 0; padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
  .calendar-day.calendar-day-blank, .calendar-day.is-empty { display: none; }
  .calendar-date { align-content: start; justify-content: center; flex-direction: column; margin: 0; }
  .calendar-date small { display: block; }
}

@media (max-width: 991.98px) {
  .calendar-toolbar, .calendar-actions { align-items: flex-start; flex-direction: column; }
  .calendar-actions { width: 100%; }
  .calendar-month-navigation { width: 100%; }
  .calendar-month-picker { flex: 1; }
  .calendar-month-picker input { flex: 1; width: auto; min-width: 0; }
}

@media (max-width: 575.98px) {
  .calendar-toolbar { padding: 18px; }
  .calendar-actions .btn { width: 100%; }
  .monthly-calendar { grid-template-columns: 1fr; padding: 10px; }
  .calendar-month-picker button { padding-inline: 8px; font-size: .56rem; }
}

.planning-time-rule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  overflow: hidden;
  border: 1px solid #b9ccd7;
  border-radius: 8px;
  background: #eaf3f8;
}
.planning-time-rule > div { padding: 16px 18px; }
.planning-time-rule > div + div { border-left: 1px solid #b9ccd7; }
.planning-time-rule span, .planning-time-rule strong, .planning-time-rule small { display: block; }
.planning-time-rule span { color: #5a7483; font-size: .58rem; font-weight: 900; letter-spacing: .06em; }
.planning-time-rule strong { margin: 4px 0; color: #245f85; font-size: 1.05rem; }
.planning-time-rule small { color: #687d89; font-size: .6rem; }
.calendar-primary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.calendar-add-menu { position: relative; }
.calendar-add-menu summary { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; list-style: none; }
.calendar-add-menu summary::-webkit-details-marker { display: none; }
.calendar-add-menu summary::after { content: "▾"; font-size: .7em; }
.calendar-add-menu[open] summary::after { transform: rotate(180deg); }
.calendar-add-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 190px;
  padding: 6px;
  border: 1px solid #c9d7df;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(26, 53, 68, .16);
}
.calendar-add-menu-list a { display: block; padding: 9px 11px; color: var(--ink); border-radius: 4px; font-size: .72rem; font-weight: 800; text-decoration: none; }
.calendar-add-menu-list a:hover, .calendar-add-menu-list a:focus-visible { color: #126c9f; background: #eef7fc; }
.calendar-day-open { display: block; padding: 4px 7px; color: #286386; border: 1px dashed #a9c4d4; border-radius: 4px; background: #f4f9fc; font-size: .5rem; font-weight: 900; text-align: center; text-decoration: none; }
.calendar-day-open:hover { background: #e4f0f7; }
/* Daily plan sheet: one dense table for a whole production day (30+ jobs), grouped by work center.
   The modal width lives with the other .plan-modal widths further down, so it is not overridden. */
/* Full-screen sheet: the overlay drops its padding and the modal fills the viewport, so the table gets the height. */
.day-plan-overlay { padding: 0; }
.day-plan-head { padding: 12px 20px; }
.day-plan-head-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.day-plan-head-title .eyebrow { flex-basis: 100%; }
.day-plan-head-title h2 { margin: 0; }
.day-plan-layout { display: grid; flex: 1 1 auto; min-height: 0; grid-template-columns: 220px minmax(0, 1fr); }
.day-plan-nav { display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 14px 10px; overflow-y: auto; border-right: 1px solid #d9e3e8; background: #f7fbfd; }
.day-plan-nav-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; }
.day-plan-nav-item:hover { background: #edf4f8; }
.day-plan-nav-item.is-active { border-color: #a9c4d4; background: #fff; box-shadow: 0 1px 4px rgba(19,40,54,.08); }
.day-plan-nav-item.is-done .day-plan-nav-name { color: #427254; }
.day-plan-nav-name { color: #1e303c; font-size: .82rem; font-weight: 900; }
.day-plan-nav-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: #697d88; font-size: .66rem; font-weight: 700; }
.day-plan-nav-meta i { width: 8px; height: 8px; border-radius: 2px; background: #c68c25; }
.day-plan-nav-meta i.delayed { background: #bf4f58; }
.day-plan-nav-meta i.done { background: #3fce47; }
.day-plan-nav-idle { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; padding: 10px; border-top: 1px dashed #c9d8e0; color: #9aa9b2; font-size: .66rem; }
.day-plan-nav-idle strong { flex-basis: 100%; color: #697d88; }
.day-plan-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 14px 20px; }
.day-plan-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.day-plan-toolbar [data-sheet-search] { flex: 1 1 240px; min-width: 180px; }
.day-plan-toolbar select { flex: 0 1 170px; }
.day-plan-toolbar-gap { flex: 1 1 0; }
.day-plan-grouprow { cursor: pointer; user-select: none; }
.day-plan-caret { display: inline-block; width: 14px; margin-right: 2px; color: #587080; transition: transform .15s; }
.day-plan-grouprow.is-collapsed .day-plan-caret { transform: rotate(-90deg); }
.day-plan-count { margin-left: auto; color: #697d88; font-size: .68rem; font-weight: 800; white-space: nowrap; }
/* The table takes whatever height is left between the toolbar and the footer, and scrolls inside itself. */
.day-plan-tablewrap { flex: 1 1 auto; min-height: 180px; border: 1px solid #c9d8e0; border-radius: 8px; }
.day-plan-table { margin: 0; }
.day-plan-table thead th {
  position: sticky;
  z-index: 3;
  top: 0;
  padding: 8px 10px;
  border-bottom: 1px solid #c9d8e0;
  background: #eaf3f8;
  font-size: .62rem;
  white-space: nowrap;
}
.day-plan-table td { padding: 6px 10px; border-bottom: 1px solid #e6edf1; vertical-align: middle; }
.day-plan-table tbody tr:last-child td { border-bottom: 0; }
.day-plan-pick { width: 38px; text-align: center; }
.day-plan-pick .form-check-input { margin: 0; cursor: pointer; }
.day-plan-pick .form-check-input:disabled { opacity: .3; }
.day-plan-grouprow td { padding: 7px 10px; border-top: 1px solid #c9d8e0; background: #f1f7fb; }
.day-plan-grouprow strong { color: #1e303c; font-size: .78rem; font-weight: 900; }
.day-plan-grouprow span { margin-left: 10px; color: #3f5c6d; font-size: .64rem; font-weight: 800; }
.day-plan-grouprow small { margin-left: 10px; color: #697d88; font-size: .6rem; font-weight: 800; }
.day-plan-crewrow td { padding: 4px 10px; background: #fbfdff; color: #9b6916; font-size: .62rem; font-weight: 900; letter-spacing: .03em; }
.day-plan-row.is-issued { background: #fbfdfe; }
.day-plan-row.status-delayed .day-plan-product strong { color: #a13c45; }
.day-plan-row.status-complete { opacity: .74; }
.day-plan-row.is-picked { background: #eef4ff; }
.day-plan-time { white-space: nowrap; }
.day-plan-time small { display: block; margin-top: 1px; color: #697d88; font-size: .58rem; font-weight: 700; }
.day-plan-product { min-width: 200px; }
.day-plan-product strong { display: block; color: #243946; font-size: .74rem; }
.day-plan-product small { display: block; margin-top: 1px; color: #697d88; font-size: .58rem; font-weight: 700; }
.day-plan-table .day-plan-qty { color: #1e5e8a; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.day-plan-detail { max-width: 300px; }
.day-plan-tag { display: inline-block; margin: 1px 3px 0 0; padding: 1px 6px; border: 1px solid #bfd0d9; border-radius: 3px; background: #f4f9fc; color: #3f5c6d; font-size: .56rem; font-weight: 800; white-space: nowrap; }
.day-plan-note { display: block; margin-top: 3px; color: #75551c; font-size: .58rem; }
.day-plan-state { white-space: nowrap; }
.day-plan-state small { display: block; margin-top: 3px; }
.day-plan-actions { white-space: nowrap; }
.day-plan-actions .btn { margin-right: 6px; padding: 3px 9px; font-size: .58rem; }
.day-plan-actions a { margin-right: 8px; color: #286386; font-size: .58rem; font-weight: 800; text-decoration: none; }
/* delete_calendar_plan: drafts only (day sheet row and the edit modal); issued plans never show it. */
.day-plan-delete { color: #b42318; border-color: #f0c2bd; }
.day-plan-delete:hover { color: #fff; border-color: #b42318; background: #b42318; }
.day-plan-actions a:hover { text-decoration: underline; }
.day-plan-emptyrow td { padding: 22px; color: #697d88; font-size: .68rem; text-align: center; }
.plan-modal-foot { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid #d9e3e8; background: #f7fbfd; }
.day-plan-foot-info strong { display: block; color: #1e303c; font-size: .82rem; font-weight: 900; }
.day-plan-foot-info small { color: #697d88; font-size: .62rem; font-weight: 700; }
.day-plan-foot-actions { display: flex; flex-wrap: wrap; gap: 9px; }
@media (max-width: 767.98px) {
  .day-plan-count { margin-left: 0; }
  .day-plan-toolbar select { flex: 1 1 calc(50% - 4px); }
  .day-plan-foot-actions { flex: 1; }
  .day-plan-foot-actions .btn { flex: 1; }
  .plan-modal-header-actions .btn { white-space: nowrap; }
  /* On a phone the line navigation becomes a horizontal strip above the table. */
  .day-plan-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .day-plan-nav { flex-direction: row; gap: 6px; padding: 10px 12px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid #d9e3e8; }
  .day-plan-nav-item { flex: 0 0 auto; }
  .day-plan-nav-idle { display: none; }
  .day-plan-body { padding: 12px; }
}
.calendar-day-issue { display: flex; }
.btn-issue-day { width: 100%; padding: 5px 7px; color: #286386; border-color: #a9c4d4; background: #fff; font-size: .52rem; font-weight: 900; }
.calendar-day-issued {
  display: block;
  padding: 5px 7px;
  color: #427254;
  border: 1px solid #b7d0be;
  border-radius: 4px;
  background: #edf7f0;
  font-size: .5rem;
  font-weight: 900;
  text-align: center;
}
.issue-state { margin-right: auto; color: #7b6a4c; font-size: .48rem; font-weight: 900; }
.issue-state.issued { color: #427254; }
.sales-inbox-list { display: grid; gap: 10px; }
.sales-inbox-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid #c68c25;
  border-radius: 7px;
  background: #fffaf0;
}
.sales-inbox-list span, .sales-inbox-list strong, .sales-inbox-list small { display: block; }
.sales-inbox-list span { color: #9b6916; font-size: .55rem; font-weight: 900; }
.sales-inbox-list strong { margin-top: 3px; font-size: .72rem; }
.sales-inbox-list small { margin-top: 3px; color: var(--muted); font-size: .58rem; }
.sales-inbox-actions { display: grid; gap: 8px; justify-items: stretch; }
.sales-reject-form { display: flex; gap: 6px; }
.sales-reject-form .form-control { min-width: 150px; }
.sales-status-note { display: block; margin-top: 4px; color: var(--muted); font-size: .62rem; }
.calendar-plan-form { min-width: 0; }
.plan-source-display {
  min-height: 38px;
  padding: 9px 11px;
  color: #286386;
  border: 1px solid #b4ccda;
  border-radius: 4px;
  background: #edf6fa;
  font-size: .65rem;
  font-weight: 900;
}
.plan-source-display.sales { color: #936313; border-color: #e0c48b; background: #fff7e5; }
.calendar-check { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; color: #506672; font-size: .64rem; font-weight: 800; }
.calendar-check input, .audit-urgent-check input { width: 17px; height: 17px; accent-color: #2f739f; }
.audit-urgent-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  color: #75551c;
  border: 1px solid #dcc38f;
  border-radius: 6px;
  background: #fff8e8;
}
.audit-urgent-check strong, .audit-urgent-check small { display: block; }
.audit-urgent-check strong { font-size: .67rem; }
.audit-urgent-check small { margin-top: 3px; color: #8d7952; font-size: .58rem; }
.adjustment-origin { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #bdd1dc; border-radius: 7px; background: #eef6fa; }
.adjustment-origin > span { flex: 0 0 auto; padding: 7px 8px; color: #fff; border-radius: 4px; background: #2f739f; font-size: .55rem; font-weight: 900; }
.adjustment-origin strong, .adjustment-origin small { display: block; }
.adjustment-origin strong { font-size: .72rem; }
.adjustment-origin small { margin-top: 3px; color: var(--muted); font-size: .58rem; }
body.plan-modal-open { overflow: hidden; }
.plan-modal-overlay {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(19, 31, 40, .62);
  backdrop-filter: blur(4px);
}
.plan-modal {
  display: flex;
  flex-direction: column;
  width: min(980px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border: 1px solid #bdccd5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(19, 40, 54, .28);
}
.plan-entry-modal { width: min(1040px, 100%); }
.day-plan-modal { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
.plan-modal-header {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid #d9e3e8;
}
.plan-modal-header h2 { margin: 5px 0 0; color: #1e303c; font-size: 1.18rem; font-weight: 800; }
.plan-modal-header-actions { display: flex; align-items: center; gap: 10px; }
.plan-modal-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #cbd7de;
  border-radius: 7px;
  color: #526874;
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
}
.plan-modal-close:hover, .plan-modal-close:focus-visible { color: #9f3e47; border-color: #d9aeb3; background: #fff5f6; }
.plan-modal-body { min-height: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
.plan-adjustment-form { display: grid; grid-template-columns: 150px 150px minmax(260px, 1fr); gap: 16px; margin-top: 20px; }
.plan-adjustment-reason { min-width: 0; }
.plan-modal-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.plan-modal-actions form { margin: 0; }
.impact-preview-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.impact-preview-summary > div { padding: 14px; border-right: 1px solid var(--line); }
.impact-preview-summary > div:last-child { border-right: 0; }
.impact-preview-summary span, .impact-preview-summary strong { display: block; }
.impact-preview-summary span { color: var(--muted); font-size: .57rem; }
.impact-preview-summary strong { margin-top: 4px; font-size: .85rem; }
.impact-preview-list { display: grid; gap: 9px; }
.impact-preview-list article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(280px, .9fr);
  align-items: center;
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 4px solid #3b7fa7;
  border-radius: 6px;
  background: #f8fafb;
}
.impact-preview-list article.origin { border-left-color: #bf4f58; background: #fff4f5; }
.impact-preview-list article > span { color: #346e8f; font-size: .55rem; font-weight: 900; }
.impact-preview-list strong, .impact-preview-list small { display: block; }
.impact-preview-list article > div:nth-child(2) strong { font-size: .68rem; }
.impact-preview-list article > div:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: .56rem; }
.impact-time-change { text-align: right; }
.impact-time-change small { color: #748792; font-size: .53rem; }
.impact-time-change strong { margin-top: 3px; color: #2e607b; font-size: .57rem; }
.impact-time-change span { display: inline-block; margin-top: 5px; color: #9e3f47; font-size: .52rem; font-weight: 900; }

@media (max-width: 991.98px) {
  .planning-time-rule { grid-template-columns: 1fr; }
  .planning-time-rule > div + div { border-top: 1px solid #b9ccd7; border-left: 0; }
  .calendar-primary-actions, .calendar-add-menu, .calendar-primary-actions .btn { width: 100%; }
  .calendar-primary-actions .btn { flex: 1; }
  .impact-preview-list article { grid-template-columns: 52px minmax(0, 1fr); }
  .impact-time-change { grid-column: 2; text-align: left; }
  .plan-adjustment-form { grid-template-columns: 1fr 1fr; }
  .plan-adjustment-reason { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .sales-inbox-list article { grid-template-columns: 1fr; }
  .sales-inbox-list article .btn { width: 100%; }
}

@media (max-width: 575.98px) {
  .calendar-primary-actions { flex-direction: column; }
  .impact-preview-summary { grid-template-columns: 1fr; }
  .impact-preview-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .impact-preview-summary > div:last-child { border-bottom: 0; }
  .impact-preview-list article { grid-template-columns: 1fr; }
  .impact-time-change { grid-column: auto; }
  .plan-modal-overlay { align-items: end; padding: 0; }
  .plan-modal { width: 100%; max-height: 92dvh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 14px 14px 0 0; }
  .plan-modal-header, .plan-modal-body { padding: 18px; }
  .plan-adjustment-form { grid-template-columns: 1fr 1fr; gap: 12px; }
  .plan-modal-actions .btn, .plan-modal-actions form { flex: 1; }
  .plan-modal-actions form .btn { width: 100%; }
}

.line-detail-link { display: block; color: inherit; text-decoration: none; }
.line-detail-link:hover, .line-detail-link:focus { color: inherit; }
.line-detail-link:hover article, .line-detail-link:focus article { background: #f8fbfc; }
.line-card-link { display: block; text-decoration: none; color: var(--text); cursor: pointer; }
.line-card-link:hover, .line-card-link:focus { color: var(--text); }
.line-detail-status { display: grid; gap: 12px; margin-top: 8px; }
.line-detail-status .status-pill { justify-self: start; min-height: 32px; padding: 6px 12px; font-size: .72rem; }
.line-detail-status p { margin: 0; color: #56676f; font-size: .8rem; line-height: 1.5; }
.line-detail-contact { text-decoration: none; }
.line-detail-contact:hover, .line-detail-contact:focus { color: #255f87; text-decoration: underline; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.kpi-grid .metric-card > strong { font-size: 1.5rem; }
.chart-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.chart-heading h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.chart-heading small { display: block; margin-top: 3px; color: #71808a; font-size: .68rem; }
.chart-tag { padding: 4px 10px; border: 1px solid #bfdcc9; border-radius: 999px; font-size: .62rem; font-weight: 700; white-space: nowrap; }
.chart { display: block; width: 100%; height: auto; font-family: inherit; }
.chart-empty { display: grid; place-items: center; min-height: 220px; color: #71808a; font-size: .8rem; }
.chart-grid { stroke: #e6ecf0; stroke-width: 1; }
.chart-target { stroke: #9fb5c3; stroke-width: 1; stroke-dasharray: 4 4; }
.chart-axis { fill: #6b7b86; font-size: 11px; }
.chart-value { fill: #2f3f4a; font-size: 11px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.chart-value.plan { fill: #b9312b; }
.chart-line-plan { fill: none; stroke: #d9342b; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-line-plan.dashed { stroke-dasharray: 7 6; stroke-width: 2.5; }
.chart-line-actual { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot-plan { fill: #fff; stroke: #d9342b; stroke-width: 2.5; }
.chart-dot-actual { stroke: #fff; stroke-width: 2; }
.chart-band-warn { fill: #f0c419; }
.chart-band-bad { fill: #d9342b; }
.chart-donut .chart-donut-track { fill: none; stroke: #eef2f5; }
.chart-donut .donut-segment { fill: none; stroke-linecap: butt; transition: opacity .2s ease, stroke-width .2s ease; cursor: default; }
.chart-donut:hover .donut-segment { opacity: .45; }
.chart-donut .donut-segment:hover { opacity: 1; stroke-width: 30; }
.chart-donut .chart-band-warn { stroke: #f2b705; }
.chart-donut .chart-band-bad { stroke: #e5484d; }
.chart-donut-label-bg { fill: #fff; stroke: #e3e8ee; filter: drop-shadow(0 2px 4px rgba(15,23,42,.10)); }
.chart-donut-label { fill: #334155; font-size: 11px; font-weight: 800; letter-spacing: .01em; }
.chart-donut-label-good .chart-donut-label-dot { fill: #22a06b; }
.chart-donut-label-warn .chart-donut-label-dot { fill: #f2b705; }
.chart-donut-label-bad .chart-donut-label-dot { fill: #e5484d; }
.chart-donut-total { fill: #0f172a; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.chart-donut-caption { fill: #475569; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.donut-wrap { max-width: 300px; margin: 4px auto 0; }
.chart-legend { margin-top: 10px; color: #56676f; font-size: .68rem; }
.chart-legend i.plan { background: #d9342b; }
.chart-legend i.plan.ring { background: #fff; border: 2px solid #d9342b; border-radius: 50%; width: 10px; height: 10px; }
.production-detail-table { max-height: 520px; overflow: auto; }
.production-detail-table thead th { position: sticky; top: 0; z-index: 1; }

@media (max-width: 767.98px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.manpower-lines article.no-plan { opacity: .42; }
.manpower-lines article.no-plan .role-code { color: #7a8a94; border-color: #c8d2d8; background: #eef2f5; }

@media (min-width: 1200px) {
  .manpower-lines { grid-template-columns: 1fr 1fr; }
}

.manpower-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 9px;
  border: 1px solid #c8d2d8;
  color: #56676f;
  background: #8AFF8A;
  font-size: .62rem;
}
.manpower-plan-chip b { color: #203440; }
.manpower-plan-chip em { font-style: normal; font-weight: 700; color: #2c7a3d; }
.manpower-lines article.mismatch .manpower-plan-chip { border-color: #e51c23; background: #f69988; }
.manpower-lines article.mismatch .manpower-plan-chip em { color: #b9312b; }
.pause-log { padding: 16px 18px; border: 1px solid #dde4e8; border-radius: 8px; background: #fff; }
.pause-log .eyebrow { display: block; margin-bottom: 8px; }
.job-card .panel-heading h2 { font-size: .95rem; }
.job-percent { margin-left: 6px; font-style: normal; font-size: .7rem; }
.completion-summary { padding: 16px; border: 1px solid #bed1b1; border-radius: 8px; }
.completion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 14px; }
.completion-grid > div { padding: 10px 12px; border: 1px solid #d5dee4; border-radius: 6px; background: #fff; }
.completion-grid small, .completion-grid strong { display: block; }
.completion-grid small { color: #71808a; font-size: .62rem; }
.completion-grid strong { margin-top: 4px; font-size: .82rem; color: #203440; }
.line-daily-summary td, .line-daily-summary th { white-space: nowrap; }
.job-list tbody tr.ready td { background: #fffdf5; }
.job-list tbody tr.running td { background: #f4faf6; }
.job-list tbody tr.paused td { background: #fff6f7; }
.job-list tbody tr.complete td { color: #6b7b86; }
.pause-breakdown-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.pause-breakdown-row label { font-size: .72rem; color: #56676f; white-space: nowrap; }
.job-issue-list { margin-top: 8px; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: .72rem; color: #3b4a54; }
.job-issue-list .status-pill { margin-right: 4px; }

@media (max-width: 575.98px) {
  .pause-breakdown-row { grid-template-columns: 1fr; }
}

.confirm-backdrop { position: fixed; inset: 0; z-index: 1080; display: grid; place-items: center; padding: 20px; background: rgba(15, 25, 33, .55); }
.confirm-dialog { width: min(440px, 100%); padding: 22px 24px; border: 1px solid #d5dee4; background: #fff; }
.confirm-dialog h3 { margin: 8px 0 6px; font-size: 1.05rem; font-weight: 800; color: #1f2f3a; }
.confirm-message { margin: 0 0 12px; color: #56676f; line-height: 1.5; }
.confirm-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #e3eaef;
  border-radius: 8px;
  background: #f6f9fb;
  font-size: .74rem;
}
.confirm-details dt { margin: 0; color: #71808a; font-weight: 600; }
.confirm-details dd { margin: 0; color: #203440; font-weight: 700; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-actions .btn-success { color: #fff; background: #3f8f4e; border-color: #3f8f4e; }
.confirm-actions .btn-warning { color: #1f2f3a; }
body.confirm-open { overflow: hidden; }

/* ==========================================================================
   4. ธีมขาว Modern
   โทนสีปัจจุบัน (accent น้ำเงิน), radius, เงา
   ========================================================================== */

:root {
  --green: #3466f0;
  --green-dark: #e6edff;
  --cyan: #2fa3c9;
  --amber: #d99a2b;
  --red: #e0525d;
  --violet: #7c6be6;
  --accent: #3466f0;
  --accent-dark: #2a55cc;
  --accent-soft: #e9efff;
  --shadow-hover: 0 2px 4px rgba(16,24,40,.05), 0 16px 40px rgba(16,24,40,.10);
}
html, body, .app-shell { color: var(--text); background: var(--bg); }
.app-shell { background: transparent; }
.text-secondary { color: var(--muted) !important; }
.topbar { backdrop-filter: blur(14px); border-bottom: 1px solid rgba(15,23,42,.06); box-shadow: none; }
.brand-mark { border-radius: 12px; border-color: #e3e8f0; box-shadow: 0 4px 12px rgba(16,24,40,.06); }
.brand-title { color: #0f172a; letter-spacing: -.01em; }
.brand-subtitle { color: var(--muted); }
.avatar { color: var(--accent); border-color: #d6e0ff; background: var(--accent-soft); border-radius: 12px; }
.live-indicator { color: var(--accent-dark); border-color: #d6e0ff; background: var(--accent-soft); border-radius: 999px; }
.live-indicator i, .live-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(52,102,240,.15); }
.menu-button { border-radius: 10px; border-color: #e3e8f0; }
.btn-logout { border-radius: 10px; color: #c2414c; border-color: #f3d3d6; background: #fff5f6; }
.sidebar { backdrop-filter: blur(10px); border-right: 1px solid rgba(15,23,42,.06); box-shadow: none; }
.sidebar-collapse-button { border-radius: 10px; }
.nav-group { padding: 4px; border-radius: 14px; }
.nav-group.group-active { border-color: transparent; background: transparent; }
.nav-group-header strong { color: #94a3b8; font-size: .6rem; letter-spacing: .16em; }
.nav-group-header small { color: #a3aebc; }
.nav-subitem { border-radius: 12px; color: #1e293b; transition: background .15s ease, color .15s ease; }
.nav-subitem.active { color: var(--accent-dark); background: var(--accent-soft); box-shadow: none; }
.nav-subitem > span { border-radius: 10px; color: #64748b; }
.nav-subitem.active > span { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, #4a7bff, var(--accent)); }
.nav-subitem strong { font-weight: 700; }
.eyebrow { color: var(--accent); letter-spacing: .14em; }
.content-heading h1 { letter-spacing: -.02em; color: #0f172a; }
.page-hint { color: var(--muted); }
.date-chip, .boundary-badge, .stage-counter, .recipient-chip, .chart-tag, .status-pill, .job-status, .time-code { border-radius: 999px; }
.date-chip { border-color: #e3e8f0; background: #fff; color: #475569; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.boundary-badge { color: #475569; border-color: #e3e8f0; background: #f8fafd; }
.boundary-badge.danger { color: #b3323e; border-color: #f3d3d6; background: #fff5f6; }
.recipient-chip { background: #f1f4fa; border-color: #e3e8f0; color: #475569; }
.time-code { border-color: #e3e8f0; background: #f8fafd; color: #334155; }
.panel-card, .dashboard-hero, .metric-card, .line-card, .function-card, .job-card, .executive-kpi, .executive-hero, .notification-card, .calendar-day, .plan-modal, .confirm-dialog {
  border-color: rgba(15,23,42,.06);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow-card);
}
.dark-info, .role-boundary, .role-allocation article, .pause-box, .timer-panel, .pause-log, .completion-summary {
  border-color: rgba(15,23,42,.06);
  border-radius: 14px;
  background: var(--panel-2);
  box-shadow: none;
}
.completion-summary { border-color: #bbf7d0; background: #f0fdf4; }
.panel-heading { border-bottom-color: var(--line-soft); background: transparent; }
.panel-heading h2, .panel-title, .chart-heading h2 { color: #0f172a; letter-spacing: -.01em; }
.dashboard-hero { border-top: 0; }
.hero-performance { border-color: rgba(15,23,42,.06); border-radius: 16px; }
.metric-card::before { width: 4px; border-radius: 0 4px 4px 0; }
.metric-card.accent-green { --accent: var(--green); }
.metric-card.accent-cyan { --accent: var(--cyan); }
.metric-card.accent-amber { --accent: var(--amber); }
.metric-card.accent-red { --accent: var(--red); }
.metric-card > strong { color: #0f172a; letter-spacing: -.02em; }
.metric-card > small { color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.line-card:hover, .function-card:hover { border-color: rgba(52,102,240,.35); background: #fff; box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.function-card > span, .role-code { color: var(--accent); border-color: #d6e0ff; background: var(--accent-soft); border-radius: 12px; }
.progress { background: #eef2f8; border-radius: 999px; }
.progress-bar { border-radius: 999px; background: linear-gradient(90deg, #4a7bff, var(--accent)); }
.progress-ring { background: conic-gradient(var(--accent) var(--progress), #e6ebf5 0); }
.progress-ring::before { background: #fff; }
.btn { border-radius: 10px; font-weight: 600; }
.btn-accent { color: #fff; border-color: transparent; background: linear-gradient(135deg, #4a7bff, var(--accent)); box-shadow: 0 6px 16px rgba(52,102,240,.25); }
.btn-accent:hover, .btn-accent:focus {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #3d6cf5, var(--accent-dark));
  box-shadow: 0 8px 20px rgba(52,102,240,.32);
}
.btn-accent:disabled { background: #b9c8f5; box-shadow: none; }
.btn-ghost { color: #334155; }
.btn-ghost:hover, .btn-ghost:focus { color: var(--accent-dark); border-color: #c9d6ff; background: var(--accent-soft); }
.btn-success { background: #16a34a; border-color: #16a34a; }
.btn-warning { background: #fbbf24; border-color: #fbbf24; color: #1f2937; }
.btn-issue-day { border-radius: 999px; }
.dark-control { color: var(--text) !important; border-radius: 10px !important; }
.dark-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 .2rem rgba(52,102,240,.15) !important; }
.form-label { color: #475569; font-weight: 600; }
.stepper button { border-color: #e3e8f0; color: #334155; background: #fff; }
.stepper > strong { color: var(--accent); border-color: #e3e8f0; background: var(--accent-soft); }
.status-pill.running, .job-status.running { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.status-pill.ready, .job-status.ready { color: #1d4ed8; border-color: #c7d7ff; background: #eef3ff; }
.status-pill.paused, .job-status.paused { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.status-pill.complete, .job-status.complete { color: #3f6212; border-color: #d9f99d; background: #f7fee7; }
.status-pill.draft { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.status-pill.revision { color: #5b21b6; border-color: #ddd6fe; background: #f5f3ff; }
.dark-table { --bs-table-border-color: var(--line-soft); }
.dark-table thead th { color: #64748b; letter-spacing: .1em; }
.positive { color: #15803d !important; }
.achievement-good { color: #15803d; }
.achievement-warn { color: #b45309; }
.achievement-bad { color: #c2414c; }
.dark-alert { border-radius: 14px; }
.dark-alert.success { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.dark-alert.danger { color: #b3323e; border-color: #f3d3d6; background: #fff5f6; }
.dark-alert.warning { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.toast-message { border-radius: 12px; box-shadow: var(--shadow-hover); }
.executive-kpi.primary { border-color: #c9d6ff; background: linear-gradient(135deg, #f5f8ff, #ffffff); }
.executive-line-progress .progress-bar { background: linear-gradient(90deg, #4a7bff, var(--accent)); }
.executive-line-progress .progress-bar.risk { background: var(--red); }
.chart-bar-actual { fill: #4a7bff; }
.chart-line-actual { stroke: #3466f0; }
.chart-dot-actual { fill: #3466f0; }
.chart-value.actual { fill: #2a55cc; }
.chart-legend i.actual { background: #4a7bff; }
.chart-band-good { fill: #22a06b; }
.chart-donut .chart-band-good { stroke: #22a06b; }
.chart-legend i.good { background: #22a06b; }
.chart-legend i.warn { background: #f2b705; }
.chart-legend i.bad { background: #e5484d; }
.chart-legend i.good, .chart-legend i.warn, .chart-legend i.bad { width: 10px; height: 10px; border-radius: 50%; }
.chart-tag { color: var(--accent-dark); border-color: #d6e0ff; background: var(--accent-soft); }
.calendar-day { border-radius: 14px; box-shadow: none; }
.calendar-day.is-today { border-color: rgba(52,102,240,.45); box-shadow: 0 0 0 3px rgba(52,102,240,.10); }
.plan-modal-overlay, .confirm-backdrop { background: rgba(15,23,42,.45); backdrop-filter: blur(4px); }
.confirm-dialog { border-radius: 18px; box-shadow: 0 30px 80px rgba(15,23,42,.3); }
.line-detail-contact { color: var(--accent); }
.manpower-plan-chip { border-radius: 999px; }
.manpower-lines article.mismatch { border-color: #f3d3d6; background: #f69988; }
.job-percent { color: var(--accent); }

/* ==========================================================================
   5. Readability
   พื้นเทาอ่อน ขนาดฟอนต์ที่ใช้จริง และค่าตัวแปร :root ปัจจุบัน — แก้ค่าสี/ฟอนต์ที่นี่ก่อน
   ========================================================================== */

html { font-size: 16px; }
body { line-height: 1.5; }
:root {
  --bg: #e4e7ec;
  --panel: #f3f4f7;
  --panel-2: #eaedf2;
  --panel-3: #e0e4ea;
  --line: #d2d8e0;
  --line-soft: #dde2e9;
  --text: #16202b;
  --muted: #5b6776;
  --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.07);
}
body { background: radial-gradient(circle at 12% -10%, rgba(52,102,240,.07), transparent 32rem), var(--bg); }
.topbar { background: rgba(240,242,246,.9); border-bottom-color: rgba(15,23,42,.08); }
.sidebar { background: rgba(240,242,246,.85); border-right-color: rgba(15,23,42,.08); }
.nav-subitem > span { background: var(--panel-2); border-color: var(--line); }
.nav-subitem:hover { background: #e6eaf1; }
.dashboard-hero { background: linear-gradient(135deg, #f6f7fa 0%, #eceff8 100%); }
.executive-hero { background: linear-gradient(135deg, #f6f7fa, #e9eef8); }
.hero-performance { background: rgba(246,247,250,.9); }
.btn-ghost { background: var(--panel); border-color: var(--line); }
.dark-control { background-color: #fafbfc !important; border-color: var(--line) !important; }
.dark-table { --bs-table-color: var(--text); }
.dark-table thead th { background: var(--panel-2); }
.dark-table tbody tr:hover { background: #eceff4; }
.plan-modal, .confirm-dialog { background: var(--panel); }
.plan-modal-header { background: var(--panel-2); border-bottom-color: var(--line); }
.plan-modal-close { background: var(--panel); border-color: var(--line); }
.confirm-details { background: var(--panel-2); }
.mr-tile { background: var(--panel-2); }
.page-nav-links a, .page-nav-links span { background: var(--panel); }
.eyebrow { font-size: .7rem; }
.page-hint { font-size: .82rem; }
.date-chip, .brand-subtitle { font-size: .88rem; }
.nav-subitem strong { font-size: .88rem; }
.nav-group-header small { font-size: .88rem; }
.form-label { font-size: .8rem; }
.dark-table { font-size: .88rem; }
.dark-table thead th { font-size: .88rem; }
.status-pill, .job-status, .recipient-chip { font-size: .88rem; }
.metric-card > small { font-size: .88rem; }
.metric-card p { font-size: .88rem; }
.dark-info span { font-size: .88rem; }
.dark-info strong { font-size: .92rem; }
.dark-alert strong { font-size: .88rem; }
.dark-alert small { font-size: .88rem; }
.boundary-badge { font-size: .88rem; }
.sales-status-note, .mr-tile-meta, .mr-tile-summary, .mr-modal-meta, .home-list span, .home-list small, .stock-diff { font-size: .74rem; }
.mr-tile-product { font-size: .86rem; }
.mr-tile-head strong, .home-list strong { font-size: .9rem; }
.mr-tile-head .eyebrow { font-size: .88rem; }
.page-nav { font-size: .76rem; }
.panel-heading small, .job-materials small, .plan-materials small { font-size: .76rem; }
.job-issue-list, .pause-breakdown-row label, .confirm-details { font-size: .8rem; }
.confirm-message { font-size: .88rem; }
.activity-feed strong { font-size: .84rem; }
.activity-feed small, .activity-feed > div > span, .stock-pair, .chart-legend { font-size: .74rem; }
.progress-ring small, .hero-performance p, .hero-performance > div:last-child small { font-size: .78rem; }
.hero-performance > div:last-child span { font-size: .8rem; }

/* Daily plan sheet: theme colours and readable sizes, matching the rest of the refreshed UI. */
.day-plan-tablewrap { border-color: var(--line); }
.day-plan-table thead th { border-bottom-color: var(--line); }
.day-plan-table td { border-bottom-color: var(--line-soft); }
.day-plan-grouprow td { border-top-color: var(--line); background: var(--panel-2); }
.day-plan-crewrow td { background: var(--panel); }
.day-plan-row.is-issued { background: var(--panel); }
.day-plan-row.is-picked, .day-plan-table tbody tr.is-picked:hover { background: #e7efff; }
.plan-modal-foot { border-top-color: var(--line); background: var(--panel-2); }
.day-plan-count { font-size: .78rem; }
.day-plan-grouprow strong { font-size: .92rem; }
.day-plan-grouprow span { font-size: .78rem; }
.day-plan-grouprow small, .day-plan-crewrow td { font-size: .74rem; }
.day-plan-time small, .day-plan-product small, .day-plan-note { font-size: .74rem; }
.day-plan-product strong { font-size: .88rem; }
.day-plan-table .day-plan-qty { font-size: .86rem; }
.day-plan-tag { font-size: .72rem; }
.day-plan-actions .btn, .day-plan-actions a { font-size: .76rem; }
.day-plan-emptyrow td { font-size: .84rem; }
.day-plan-foot-info strong { font-size: .95rem; }
.day-plan-foot-info small { font-size: .78rem; }
.day-plan-modal, .day-plan-modal.plan-modal { height: 100dvh; max-height: 100dvh; border-radius: 0; }
.day-plan-nav { background: var(--panel-2); border-right-color: var(--line); }
.day-plan-nav-item.is-active { background: var(--panel); border-color: var(--line); }
.day-plan-nav-item:hover { background: #e6ebf2; }
.day-plan-nav-name { font-size: .9rem; }
.day-plan-nav-meta, .day-plan-nav-idle { font-size: .74rem; }

/* Admin > user directory: compact so 6 columns fit beside the create form without sideways scrolling. */
.admin-users-table { font-size: 13px; }
.admin-users-table th,
.admin-users-table td { padding: 8px 10px; vertical-align: middle; }
.admin-users-table th { white-space: nowrap; }
.admin-users-table .time-code { padding: 2px 6px; font-size: 12px; }
.admin-users-table .admin-role-badge { width: max-content; }
.admin-users-table .status-pill { white-space: nowrap; }
.admin-users-table .btn-sm { padding: 3px 9px; font-size: 12px; }

/* The confirm dialog (app.js) must sit above every plan modal, including the full-screen day sheet (.plan-modal-overlay z-index 2000). */
.confirm-backdrop { z-index: 2100; }

/* Combobox menu built by app.js for <input list> fields (product, machine): same look as the select controls. */
.combo-menu { position: fixed; z-index: 2200; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-hover); }
.combo-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; color: var(--text); cursor: pointer; font-size: .92rem; }
.combo-item small { flex: 0 0 auto; color: var(--muted); font-size: .76rem; }
.combo-item:hover, .combo-item.is-active { background: var(--accent-soft); color: var(--accent-dark); }
.combo-item.is-active small { color: var(--accent-dark); }
.combo-empty { padding: 10px 12px; color: var(--muted); font-size: .84rem; }

/* Executive dashboard: lines without a plan today are listed too, dimmed so the working lines stand out. */
.executive-line-list article.is-idle { opacity: .62; }
.executive-line-list article.is-idle:hover { opacity: 1; }

/* Production Jobs list: compact so a full day fits a laptop screen without sideways scrolling. */
.job-list { font-size: 13px; }
.job-list th, .job-list td { padding: 9px 10px; vertical-align: middle; }
.job-list th { white-space: nowrap; }
.job-list .time-code { padding: 2px 6px; font-size: 12px; }
.job-list .status-pill, .job-list .job-status { white-space: nowrap; font-size: 12px; }
.job-list .btn-sm { padding: 3px 9px; font-size: 12px; white-space: nowrap; }

/* Hourly log tables (Planning, line detail, job page): notes written before the length limits can run to several
   hundred characters. The short columns keep their natural width and the note wraps inside its own cell instead
   of pushing the others into narrow, broken lines. */
.hourly-log-table td, .hourly-log-table th { white-space: nowrap; vertical-align: top; }
.hourly-log-table td.note-cell { width: 34%; min-width: 220px; max-width: 360px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

/* Dashboard history: one collapsible row per day, plus risk highlights in the summary tables. */
.history-day summary { align-items: center; }
.history-day-head { display: grid; flex: 1 1 auto; grid-template-columns: 110px minmax(0,1fr) auto 64px; gap: 14px; align-items: center; min-width: 0; }
.history-day-head strong { display: block; font-size: .8rem; }
.history-day-head small { display: block; margin-top: 4px; color: var(--muted); font-size: .63rem; }
.history-day-head .progress { height: 7px; margin: 0; }
.history-day-head .progress-bar { background: var(--green); }
.history-day-head .progress-bar.risk { background: #ad4651; }
.history-day-percent { font-size: 1rem; font-weight: 800; text-align: right; }
.history-day-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.history-day-tags span { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: .6rem; font-weight: 700; white-space: nowrap; }
.history-risk { color: #ad4651; font-weight: 800; }
.history-breakdown-row td { font-size: .7rem; }
@media (max-width: 767.98px) {
  .history-day-head { grid-template-columns: 1fr 64px; }
  .history-day-head > div:nth-child(2), .history-day-tags { grid-column: 1 / -1; }
}
.password-field .password-eye { display: inline-flex; align-items: center; padding: 0 12px; border-radius: 0 10px 10px 0 !important; }
.password-field .password-eye.is-shown { color: var(--accent-dark, #1d4ed8); }
.confirm-details dd .password-eye { font-size: .78rem; font-weight: 700; vertical-align: baseline; }

.notification-card.unread { cursor: pointer; }
.notification-card.unread:hover { border-color: #3979a7; }
.notification-mark { margin-top: 8px; }

/* Photo attachments (close job / send FG / receive FG): field with preview, and the strip of stored photos */
.photo-field { text-align: left; }
.photo-required { color: #c0392b; font-weight: 700; }
.photo-field input[type="file"].is-shrinking { opacity: .6; }
.photo-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.photo-preview:empty { display: none; }
.photo-preview-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.photo-preview-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid #d5dee4; }
.photo-preview-item small { font-size: .62rem; color: #6c7a89; }
.photo-block { margin-top: 12px; }
.photo-block > small { display: block; margin-bottom: 6px; color: #6c7a89; }
.photo-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; }
.photo-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid #d5dee4; background: #fff; }
.photo-thumb small { font-size: .62rem; color: #6c7a89; max-width: 110px; text-align: center; line-height: 1.3; }
.photo-thumb:hover img { border-color: #3979a7; }

/* Photo thumbs inside table cells / issue lists, and the job history blocks (views/partials/job-history.php) */
.photo-strip.compact { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 6px; }
.photo-strip.compact .photo-thumb img { width: 44px; height: 44px; border-radius: 5px; }
.job-history-item summary .status-pill { vertical-align: middle; }
.job-history-body { padding: 0 18px 18px; }
.job-history-body .production-grid { margin-top: 0; }
/* Store: below-reorder-point rows and call-out, monthly count round (21 ก.ย. 2569) */
.dark-table tr.stock-row-low > td { background: #fff1f2; }
.dark-table tr.stock-row-low > td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.dark-table tr.stock-row-low:target > td { background: #ffe4e6; }
.low-stock-callout { border-color: #fecdd3; background: #fff7f7; }
.low-stock-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.low-stock-list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 12px; border: 1px solid #fecdd3; border-radius: 10px; background: #fff; color: var(--text); text-decoration: none; }
.low-stock-list a:hover { border-color: var(--red); }
.low-stock-list small { color: var(--muted); }

.count-round.is-open { border-color: #fde68a; background: #fffdf5; }
.count-round-progress { display: block; width: 100%; height: 8px; margin-top: 14px; accent-color: var(--amber); }

/* Notification centre: unread cards bright with an accent bar, read cards clearly darker and muted (21 ก.ย. 2569) */
.notification-card { border-color: #c9d2da; background: #e3e8ee; box-shadow: none; }
.notification-card > div strong { color: #55646f; }
.notification-card > div p { color: #6f7d87; }
.notification-card > div small { color: #85939d; }
.notification-card .notification-icon { color: #6f7d87; border-color: #c5cfd8; background: #d5dce4; }
.notification-card .recipient-chip { color: #55646f; border-color: #c5cfd8; background: #dae1e8; }
.notification-card.unread { border-color: #9fc0d3; background: #fff; box-shadow: var(--shadow-card), inset 5px 0 0 var(--accent); }
.notification-card.unread > div strong { color: #0f172a; font-size: .84rem; }
.notification-card.unread > div p { color: #334155; }
.notification-card.unread > div small { color: #64748b; }
.notification-card.unread .notification-icon { color: #286386; border-color: #b2cad9; background: #eaf3f8; }
.notification-card.unread .recipient-chip { color: #286386; border-color: #b2cad9; background: #eaf3f8; }
.notification-card.warning.unread { border-color: #dec28c; background: #fffbf0; box-shadow: var(--shadow-card), inset 5px 0 0 var(--amber); }
.notification-card.warning.unread .notification-icon { color: #946116; border-color: #ddc38f; background: #fff6df; }
.notification-state { font-size: .58rem; }