/* pms.css — ธีมเดียวกับ ManuLink (navy / steel blue · Prompt + Chakra Petch) */
:root {
    --mfg-bg: #f5f7fa;
    --mfg-card: #ffffff;
    --mfg-border: rgba(30, 41, 59, 0.11);
    --mfg-cyan: #2c5282;
    --mfg-cyan-deep: #1e3a5f;
    --mfg-blue: #3b6ea5;
    --mfg-violet: #5a67a8;
    --mfg-emerald: #2f855a;
    --mfg-amber: #b7791f;
    --mfg-red: #c53030;
    --mfg-text: #1a2433;
    --mfg-muted: #64748b;
}
body {
    font-family: 'Prompt', system-ui, sans-serif;
    background: var(--mfg-bg);
    color: var(--mfg-text);
    font-size: 15px;
}
h1, h2, h3, h4, .navbar-brand, .section-title { font-family: 'Chakra Petch', 'Prompt', sans-serif; }
.text-grad {
    background: linear-gradient(90deg, var(--mfg-cyan-deep), var(--mfg-blue) 55%, var(--mfg-violet));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar { background: #fff; border-bottom: 1px solid var(--mfg-border); }
.brand-badge {
    display: inline-flex; width: 34px; height: 34px; border-radius: 9px; align-items: center;
    justify-content: center; color: #fff;
    background: linear-gradient(135deg, var(--mfg-cyan-deep), var(--mfg-blue));
}
.badge-role {
    font-size: .7rem; padding: 2px 8px; border-radius: 999px; margin-left: 6px;
    background: rgba(44, 82, 130, .1); color: var(--mfg-cyan);
}
.card { border: 1px solid var(--mfg-border); border-radius: 14px; background: var(--mfg-card); }
.section-chip {
    display: inline-flex; gap: 6px; align-items: center; font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
    background: rgba(44, 82, 130, .08); color: var(--mfg-cyan); font-family: 'Chakra Petch';
}
.btn-primary { background: var(--mfg-cyan); border-color: var(--mfg-cyan); }
.btn-primary:hover { background: var(--mfg-cyan-deep); border-color: var(--mfg-cyan-deep); }

/* สถานะ */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 3px 10px;
      border-radius: 999px; font-weight: 500; white-space: nowrap; }
.st .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-ontrack, .st-done  { background: rgba(47, 133, 90, .12); color: var(--mfg-emerald); }
.st-delay              { background: rgba(197, 48, 48, .12); color: var(--mfg-red); }
.st-process, .st-notstarted { background: rgba(183, 121, 31, .12); color: var(--mfg-amber); }
.st-muted              { background: rgba(100, 116, 139, .12); color: var(--mfg-muted); }

/* ตัวเลขใหญ่ */
.kpi { font-family: 'Chakra Petch'; font-size: 1.9rem; font-weight: 700; line-height: 1; }
.kpi-label { font-size: .75rem; color: var(--mfg-muted); letter-spacing: .06em; text-transform: uppercase; }

/* ============ Gantt ============ */
.gantt-wrap { overflow-x: auto; }
.gantt { display: grid; min-width: 760px; font-size: .82rem; }
.gantt > div { border-bottom: 1px solid var(--mfg-border); padding: 5px 6px; display: flex; align-items: center; }
.gantt .g-head { background: rgba(44, 82, 130, .06); font-weight: 600; justify-content: center; min-height: 44px;
                 flex-direction: column; line-height: 1.15; text-align: center; }
.gantt .g-head small { font-weight: 400; color: var(--mfg-muted); font-size: .68rem; }
.gantt .g-name { justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt .g-main .g-name { font-weight: 600; background: rgba(44, 82, 130, .04); }
.gantt .g-sub .g-name { padding-left: 22px; color: #334155; }
.gantt .g-meta { justify-content: center; font-variant-numeric: tabular-nums; color: var(--mfg-muted); }
.gantt .g-cell { padding: 3px 1px; justify-content: stretch; }
.gantt .g-cell.cw { background: rgba(183, 121, 31, .08); }
.gantt .g-cell.ms { border-left: 2px dashed rgba(44, 82, 130, .35); }
.bar { flex: 1; height: 16px; border-radius: 4px; background: rgba(44, 82, 130, .18); position: relative; }
.g-main .bar { height: 10px; background: rgba(30, 58, 95, .35); }
.bar.b-first { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.bar.b-last  { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.bar .fill { position: absolute; inset: 0; border-radius: inherit; background: var(--mfg-emerald); }
.bar.b-delay .fill { background: var(--mfg-red); }
.bar.b-process .fill { background: var(--mfg-amber); }
.gantt .g-cell.cw .bar { outline: 1px solid rgba(183, 121, 31, .5); }

/* progress form */
.prog-row td { vertical-align: middle; }
.prog-row select, .prog-row input { min-width: 110px; }
input.pct { width: 84px; text-align: right; }

/* dashboard */
.meter { height: 8px; border-radius: 999px; background: rgba(30, 41, 59, .08); overflow: hidden; position: relative; }
.meter > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.meter .plan { background: rgba(44, 82, 130, .35); }
.meter .act  { background: var(--mfg-emerald); }
.meter.delay .act { background: var(--mfg-red); }
.table-dash td, .table-dash th { vertical-align: middle; }
.rank-1 { color: #b7791f; font-weight: 700; }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .78rem; color: var(--mfg-muted); }
.legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

@media (max-width: 575.98px) {
    body { font-size: 14px; }
    .kpi { font-size: 1.5rem; }
    main { padding-left: 12px !important; padding-right: 12px !important; }
}