/* ── NebrixService เพิ่มเติมจาก app.css กลางของตระกูล Nebrix ─────────────── */

/* Tab bar (แบบเดียวกับแนว GRC detail pages) */
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--gray-200); margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn {
    padding: 10px 14px; border: none; background: none; cursor: pointer;
    font-family: 'Sarabun', sans-serif; font-size: 14px; color: var(--gray-600);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-btn:hover  { color: var(--gray-800); }
.tab-btn.active { color: var(--blue-600); font-weight: 600; border-bottom-color: var(--blue-600); }

/* Detail info grid */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
.info-item .info-label { font-size: 12px; color: var(--gray-400); margin-bottom: 2px; }
.info-item .info-value { font-size: 14px; color: var(--gray-800); }

/* Days-to-expiry emphasis */
.days-num { font-weight: 700; }
.days-danger { color: var(--red-600); }
.days-warn   { color: var(--amber-600); }
.days-ok     { color: var(--green-600); }

/* ── ออกจากระบบ + สลับองค์กร (เพิ่มระยะ 2.1) ───────────────────────── */

/* ปุ่มออกจากระบบใน sidebar — เป็นข้อความเต็มบรรทัด มองเห็นได้ชัด ไม่ใช่ไอคอนจาง ๆ */
.sidebar-logout {
    display: flex; align-items: center; gap: 8px;
    width: 100%; margin: 8px 0 6px;
    padding: 8px 10px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.72);
    font-family: 'Sarabun', sans-serif; font-size: 13px;
    cursor: pointer; text-align: left;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.sidebar-logout:hover {
    background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.45); color: #fff;
}
.sidebar-logout-icon { font-size: 15px; line-height: 1; flex-shrink: 0; }
.grc-collapsed .sidebar-logout { justify-content: center; padding: 8px 0; }

/* ปุ่มออกจากระบบซ้ำบน topbar — จุดที่ผู้ใช้มองหาเป็นที่แรก */
.topbar-logout {
    padding: 6px 14px; border-radius: 6px;
    border: 1px solid var(--gray-200); background: #fff;
    color: var(--gray-600); font-family: 'Sarabun', sans-serif; font-size: 13px;
    cursor: pointer; white-space: nowrap;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.topbar-logout:hover { background: var(--red-100, #FEE2E2); border-color: #FCA5A5; color: #991b1b; }

/* ตัวสลับองค์กร (SuperAdmin) — วางแทนชื่อ tenant บน topbar */
.tenant-switch { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tenant-switch-label { font-size: 12px; color: var(--gray-400); white-space: nowrap; }
.tenant-switch-select {
    max-width: 320px; padding: 5px 10px; border-radius: 6px;
    border: 1px solid var(--gray-200); background: #fff;
    font-family: 'Sarabun', sans-serif; font-size: 13px; color: var(--gray-800);
    cursor: pointer;
}
.tenant-switch-select:disabled { opacity: .6; cursor: progress; }

.empty-state .empty-hint { font-size: 12px; color: var(--gray-400); max-width: 620px; text-align: center; line-height: 1.6; }

/* ── ทะเบียนกฎหมายและข้อกำหนด (ระยะ A.2) ──────────────────────────── */

.row-click { cursor: pointer; }
.row-click:hover { background: var(--gray-50); }
.table-foot { padding: 10px 16px; border-top: 1px solid var(--gray-100); font-size: 12.5px; color: var(--gray-400); }
.nowrap { white-space: nowrap; }

/* ตัวนับเล็ก ๆ ในตาราง/บนแถวข้อกำหนด */
.count-pill {
    display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 10px;
    background: var(--gray-100); color: var(--gray-600);
    font-size: 12px; font-variant-numeric: tabular-nums; text-align: center;
}

.check-line {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 13.5px; color: var(--gray-700); margin: 10px 0 14px;
}
.check-line input { flex-shrink: 0; }

.crumb { font-size: 12.5px; color: var(--gray-400); margin-bottom: 4px; }
.crumb a { color: var(--blue-600); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.hdr-meta { font-size: 13px; color: var(--gray-400); margin-left: 8px; }

/* แถบเตือนสำหรับตัวบทที่ถูกแก้ไข/ยกเลิก — ยังต้องอ่านย้อนหลังได้เสมอ */
.notice-strip {
    background: var(--amber-100); color: #92400e;
    border-left: 3px solid var(--amber-600);
    padding: 10px 16px; border-radius: 4px; font-size: 13.5px;
    margin-bottom: 16px;
}

.modal-box.modal-wide { max-width: 820px; }
.section-rule {
    margin: 18px 0 12px; padding-top: 12px; border-top: 1px solid var(--gray-200);
    font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-400);
}

/* ── บัญชีสาธิตบนหน้า login ────────────────────────────────────────── */
.demo-panel { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gray-200); }
.demo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.demo-title { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.demo-tenant { font-size: 12px; color: var(--gray-400); }
.demo-note { font-size: 12px; color: var(--gray-400); margin: 4px 0 12px; }

.demo-list { display: flex; flex-direction: column; gap: 6px; }
.demo-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border-radius: 6px; cursor: pointer; text-align: left;
    border: 1px solid var(--gray-200); background: #fff;
    font-family: 'Sarabun', sans-serif;
    transition: border-color 140ms ease, background 140ms ease;
}
.demo-item:hover:not(:disabled) { border-color: var(--blue-600); background: var(--blue-50); }
.demo-item:disabled { opacity: .55; cursor: progress; }

.demo-avatar {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    background: var(--blue-800); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
}
.demo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.demo-name { font-size: 13.5px; color: var(--gray-800); }
.demo-role {
    font-size: 11.5px; color: var(--gray-400);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo-go { color: var(--gray-300); flex-shrink: 0; }
.demo-item:hover:not(:disabled) .demo-go { color: var(--blue-600); }

.demo-warn { font-size: 11px; color: var(--gray-400); line-height: 1.6; margin: 12px 0 0; }
.demo-warn code { font-size: 11px; }

/* ── ทะเบียนผู้ถือ (ระยะ B) ────────────────────────────────────────── */
.row-muted { opacity: .55; }

/* ปุ่มที่ดูเหมือนลิงก์ — ใช้เปิดรายการใบอนุญาตของผู้ถือรายนั้น */
.link-btn {
    border: none; background: none; padding: 0; cursor: pointer;
    font-family: 'Sarabun', sans-serif; font-size: 13.5px;
    color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: var(--blue-800); }

/* ── Gap Matrix (ระยะ C) ───────────────────────────────────────────── */
.gap-group { border-bottom: 1px solid var(--gray-200); }
.gap-group:last-child { border-bottom: none; }

.gap-group-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}
.gap-group-name { font-size: 14.5px; font-weight: 600; color: var(--gray-800); }
.gap-group-meta { font-size: 12.5px; color: var(--gray-400); }

.gap-rows { display: flex; flex-direction: column; }
.gap-row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 16px; border-bottom: 1px solid var(--gray-100);
}
.gap-row:last-child { border-bottom: none; }
.gap-row:hover { background: var(--gray-50); }

/* ป้ายสถานะ: สีบอกว่าต้องลงมือแค่ไหน ไม่ใช่ตกแต่ง */
.gap-chip {
    flex-shrink: 0; min-width: 116px; text-align: center;
    padding: 4px 10px; border-radius: 4px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.gap-breach  { background: #7F1D1D; color: #fff; }
.gap-missing { background: var(--red-100, #FEE2E2); color: #991B1B; }
.gap-warn    { background: var(--amber-100); color: #92400E; }
.gap-ok      { background: var(--green-100); color: #065F46; }
.gap-unknown { background: var(--gray-100); color: var(--gray-600); }

.gap-body { flex: 1; min-width: 0; }
.gap-title { font-size: 14px; color: var(--gray-800); }
.gap-meta { font-size: 12.5px; color: var(--gray-400); margin-top: 2px; }
.gap-penalty { font-size: 12.5px; color: var(--red-600); margin-top: 4px; max-width: 88ch; }

.gap-right { flex-shrink: 0; text-align: right; min-width: 116px; }
.gap-days { font-size: 12px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.gap-action { font-size: 12.5px; color: var(--gray-400); }
a.gap-action { color: var(--blue-600); text-decoration: none; }
a.gap-action:hover { text-decoration: underline; }

@media (max-width: 700px) {
    .gap-row { flex-wrap: wrap; }
    .gap-right { text-align: left; min-width: 0; }
}

/* ── เอกสารแนบ + ประวัติ (ระยะ D) ─────────────────────────────────── */
.upload-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px; border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.upload-input { font-size: 13px; max-width: 320px; }
.upload-bar .form-hint { margin: 0; flex: 1; min-width: 240px; }

/* ประวัติแบบไทม์ไลน์ — เวลาซ้าย เส้นกลาง เนื้อหาขวา */
.timeline { padding: 8px 16px 4px; }
.timeline-row { display: grid; grid-template-columns: 92px 18px 1fr; gap: 10px; }
.timeline-when { text-align: right; padding-top: 10px; }
.timeline-date { font-size: 12.5px; color: var(--gray-800); white-space: nowrap; }
.timeline-time { font-size: 11.5px; color: var(--gray-400); font-variant-numeric: tabular-nums; }

/* เส้นต่อเนื่องวาดจาก ::before ของจุด เพื่อไม่ต้องมี element เปล่าเพิ่ม */
.timeline-dot { position: relative; }
.timeline-dot::before {
    content: ""; position: absolute; left: 6px; top: 14px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--blue-600); z-index: 1;
}
.timeline-dot::after {
    content: ""; position: absolute; left: 9px; top: 14px; bottom: -6px;
    width: 1px; background: var(--gray-200);
}
.timeline-row:last-child .timeline-dot::after { display: none; }

.timeline-body { padding: 8px 0 16px; min-width: 0; }
.timeline-action { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.timeline-detail { font-size: 13px; color: var(--gray-700); margin-top: 2px; max-width: 84ch; }
.timeline-by { font-size: 11.5px; color: var(--gray-400); margin-top: 3px; }

@media (max-width: 640px) {
    .timeline-row { grid-template-columns: 74px 18px 1fr; }
}

/* ── ผังโครงสร้างองค์กร ────────────────────────────────────────────── */
.org-tree { display: flex; flex-direction: column; }
.org-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px 11px 14px;
    border-bottom: 1px solid var(--gray-100);
}
.org-row:last-child { border-bottom: none; }
.org-row:hover { background: var(--gray-50); }
.org-row:hover .org-actions { opacity: 1; }

/* แถบสีประจำหน่วยงาน — ทำให้เห็นสาขาเดียวกันได้จากหางตา */
.org-bar { width: 4px; height: 32px; border-radius: 2px; flex-shrink: 0; }
.org-main { flex: 1; min-width: 0; }
.org-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.org-name { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.org-meta { font-size: 12.5px; color: var(--gray-400); margin-top: 2px; }

.org-counts { display: flex; gap: 8px; flex-shrink: 0; }
.org-count {
    font-size: 12px; color: var(--gray-600); background: var(--gray-100);
    padding: 2px 9px; border-radius: 10px; white-space: nowrap;
}
.org-actions { display: flex; gap: 6px; flex-shrink: 0; opacity: 0; transition: opacity 140ms ease; }
@media (hover: none), (max-width: 900px) {
    .org-actions { opacity: 1; }
    .org-counts { display: none; }
}

/* ── กระดิ่งแจ้งเตือน + กล่องข้อความ (ระยะ E) ──────────────────────── */
.bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    color: var(--gray-600); text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}
.bell:hover { background: var(--gray-100); color: var(--gray-800); }
.bell-icon { font-size: 17px; line-height: 1; }
.bell-count {
    position: absolute; top: 1px; right: 0;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--red-600); color: #fff;
    font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center;
    font-variant-numeric: tabular-nums;
}

.notif-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 16px; border-bottom: 1px solid var(--gray-100);
    text-decoration: none; color: inherit;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--gray-50); }
/* ยังไม่อ่าน = พื้นอ่อน + แถบซ้าย ไม่ใช้ตัวหนาอย่างเดียว เพราะสแกนหาไม่เจอเวลามีหลายสิบรายการ */
.notif-unread { background: var(--blue-50); }
.notif-unread:hover { background: var(--blue-50); }
.notif-strip { width: 3px; align-self: stretch; border-radius: 2px; background: transparent; flex-shrink: 0; }
.notif-unread .notif-strip { background: var(--blue-600); }

.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 14px; color: var(--gray-800); }
.notif-unread .notif-title { font-weight: 600; }
.notif-msg { font-size: 13px; color: var(--gray-700); margin-top: 2px; }
.notif-meta { font-size: 11.5px; color: var(--gray-400); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.notif-actions { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════════ */
/* ── NebrixService — Service Desk (Batch 1) ตาม Mockup v0.1        ── */
/* ═══════════════════════════════════════════════════════════════════ */

/* เมนูที่ยังไม่เปิดใช้ (แสดงโครงตาม mockup แต่กดไม่ได้) */
.nav-soon { opacity: .38; cursor: default; }
.nav-soon:hover { background: transparent; color: rgba(255,255,255,.7); }
.nav-soon .nav-label::after { content: " · เร็ว ๆ นี้"; font-size: 10px; opacity: .8; }
.grc-collapsed .nav-soon .nav-label::after { content: ""; }

/* สถานะงาน (TicketState) */
.st-new       { background: var(--blue-50);   color: var(--blue-800); }
.st-triaged   { background: var(--gray-100);  color: var(--gray-600); }
.st-assigned  { background: #EDE9FE;          color: #7C3AED; }
.st-progress  { background: var(--blue-100);  color: var(--blue-800); }
.st-pending   { background: var(--amber-100); color: var(--amber-600); }
.st-resolved  { background: var(--green-100); color: var(--green-600); }
.st-closed    { background: var(--gray-200);  color: var(--gray-600); }
.st-cancelled { background: var(--gray-100);  color: var(--gray-400); text-decoration: line-through; }

/* ประเภทเรกคอร์ด (TicketType) */
.tt-inc { background: var(--red-100);   color: var(--red-600); }
.tt-sr  { background: var(--blue-50);   color: var(--blue-800); }
.tt-prb { background: #EDE9FE;          color: #7C3AED; }
.tt-chg { background: var(--amber-100); color: var(--amber-600); }

/* ความสำคัญ — จุดสีนำหน้า สีจริงมาจาก Priority.Color ผ่าน inline style */
.pri { font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.pri::before { content: "●"; margin-right: 5px; }

/* SLA bar (Batch 5 ใช้จริง — ประกาศไว้ให้หน้ากล่องงานใช้ตั้งแต่ Batch 2) */
.sla { min-width: 120px; }
.sla .sla-t { font-size: 11.5px; color: var(--gray-600); }
.sla .sla-bar { height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.sla .sla-fill { height: 100%; background: var(--green-600); }
.sla.warn .sla-fill { background: var(--amber-600); }
.sla.over .sla-fill { background: var(--red-600); }
.sla.over .sla-t { color: var(--red-600); font-weight: 600; }
.sla.paused .sla-fill { background: var(--gray-400); }

/* เลขงาน */
.ticket-no { font-family: Consolas, monospace; font-size: 12.5px; color: var(--blue-800); white-space: nowrap; }
.ticket-legacy { font-size: 11px; color: var(--gray-400); }

/* pipeline สถานะในหน้ารายละเอียด */
.pipe { display: flex; gap: 4px; margin: 12px 0 16px; }
.pipe .step { flex: 1; text-align: center; padding: 6px 4px; background: #fff; border: 1px solid var(--gray-200); font-size: 12px; color: var(--gray-400); }
.pipe .step:first-child { border-radius: 8px 0 0 8px; }
.pipe .step:last-child  { border-radius: 0 8px 8px 0; }
.pipe .step.done { background: var(--green-100); color: var(--green-600); border-color: #a7f3d0; }
.pipe .step.cur  { background: var(--blue-600); color: #fff; border-color: var(--blue-600); font-weight: 600; }

/* สวอตช์สีใน master */
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: 6px; border: 1px solid rgba(0,0,0,.08); }

/* ── Batch 2b: layout ร่วมหน้ารายละเอียด/แจ้งงาน ── */
.grid2 { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
@media (max-width: 1100px) { .grid2 { grid-template-columns: 1fr; } }

/* คุณสมบัติงาน (dt/dd) ในแผงขวา */
.prop-grid { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 13px; margin: 0; }
.prop-grid dt { color: var(--gray-400); }
.prop-grid dd { margin: 0; color: var(--gray-800); word-break: break-word; }

/* Service Catalog — การ์ดเลือกบริการในหน้าแจ้งงานใหม่ */
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cat-card { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 12px; cursor: pointer; background: #fff; transition: border-color .12s; }
.cat-card:hover { border-color: var(--blue-400); }
.cat-card.on { border-color: var(--blue-600); background: var(--blue-50); box-shadow: 0 0 0 2px var(--blue-100); }
.cat-card .cat-i { font-size: 20px; }
.cat-card .cat-n { font-weight: 600; font-size: 13.5px; margin-top: 4px; }
.cat-card .cat-d { font-size: 11.5px; color: var(--gray-600); margin-top: 2px; }
.cat-card .cat-sla { font-size: 11px; color: var(--gray-400); margin-top: 6px; }

/* กล่องเสนอความสำคัญจาก Impact × Urgency */
.suggest { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: #f5f3ff; border: 1px solid #ddd6fe; color: #4c1d95; font-size: 12.5px; }
.suggest b { color: #3b0764; }

/* ปุ่มเลือกระดับ (Impact / Urgency) */
.level-btns { display: flex; gap: 6px; }
.level-btn { flex: 1; padding: 8px 6px; font-size: 12.5px; border: 1px solid var(--gray-200); background: #fff; border-radius: 8px; cursor: pointer; color: var(--gray-700); line-height: 1.3; }
.level-btn:hover { border-color: var(--blue-400); }
.level-btn.on { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-800); font-weight: 600; }
.level-btn small { display: block; font-weight: 400; color: var(--gray-400); font-size: 11px; }

/* ตัวเลือกสีใน master modal */
.color-pick { width: 44px; height: 36px; border: 1px solid var(--gray-200); border-radius: 6px; padding: 2px; background: #fff; cursor: pointer; }

/* KPI card ที่เป็นลิงก์ (Dashboard) */
a.kpi-card { display: block; text-decoration: none; color: inherit; }
a.kpi-card:hover { border-color: var(--blue-400); }

/* ── Batch 4: ลูกค้า · สัญญา · ทะเบียนติดตั้ง ─────────────────────────── */
.card-body { padding: 16px; }
.check-list { display: flex; flex-wrap: wrap; gap: 4px 18px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 10px 12px; }
.check-list .check-line { margin: 0; }
.cust-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gray-200); border-radius: 14px;
             padding: 2px 10px; font-size: 12px; background: #fff; }
.cust-chip.on { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-800); font-weight: 600; }
.auto-hint { font-size: 11.5px; color: var(--green-600); margin-top: 3px; }
.ctx-box { border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; background: var(--gray-50); font-size: 12.5px; }
.ctx-box .ctx-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.ctx-box .ctx-row span:first-child { color: var(--gray-600); }

/* ── Batch 5: นาฬิกา SLA · ปฏิทินทำการ ──────────────────────────────── */
.sla2 { min-width: 190px; }
.sla-line { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin-bottom: 2px; }
.sla-line .cap { color: var(--gray-400); width: 26px; flex-shrink: 0; }
.sla-line .val { font-weight: 600; }
.sla-line.ok .val { color: var(--green-600); }
.sla-line.warn .val { color: var(--amber-600); }
.sla-line.breach .val { color: var(--red-600); }
.sla-line.paused .val { color: var(--gray-400); }
.sla-line.none .val { color: var(--gray-400); font-weight: 400; }
.sla-bar2 { height: 5px; background: var(--gray-200); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.sla-fill2 { height: 100%; background: var(--green-600); }
.sla-bar2.warn .sla-fill2 { background: var(--amber-600); }
.sla-bar2.breach .sla-fill2 { background: var(--red-600); }
/* ลายทแยง = นาฬิกาหยุดอยู่ — ต่างจากสีเทาธรรมดาที่อาจอ่านเป็น "ไม่มีข้อมูล" */
.sla-bar2.paused .sla-fill2 {
    background: var(--gray-400);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,.55) 3px, rgba(255,255,255,.55) 6px);
}
.sla-box { display: flex; gap: 10px; }
.sla-box .s { flex: 1; border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; }
.sla-box .s .l { font-size: 11.5px; color: var(--gray-600); }
.sla-box .s .v { font-weight: 700; font-size: 16px; line-height: 1.3; }
.sla-box .s .sub { font-size: 11px; color: var(--gray-600); margin-top: 2px; }
.sla-box .s.ok { border-color: #a7f3d0; background: #f0fdf4; }
.sla-box .s.ok .v { color: var(--green-600); }
.sla-box .s.warn { border-color: #fcd34d; background: #fffbeb; }
.sla-box .s.warn .v { color: var(--amber-600); }
.sla-box .s.breach { border-color: #fca5a5; background: #fef2f2; }
.sla-box .s.breach .v { color: var(--red-600); }
.sla-box .s.paused { background: var(--gray-50); }
.sla-box .s.paused .v { color: var(--gray-400); }
.sla-box .s.none .v { color: var(--gray-400); font-size: 14px; font-weight: 500; }

.week-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; padding: 5px 0; }
.week-day { font-size: 13px; color: var(--gray-600); }
.week-slots { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.time-in { max-width: 92px; text-align: center; }
.slot-chip { background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-800);
             border-radius: 8px; padding: 3px 10px; font-size: 12.5px; }
.slot-chip.off { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-400); }

.calc-box { background: linear-gradient(135deg, #F5F3FF, #EEF2FF); border: 1px solid #DDD6FE;
            border-radius: var(--radius-lg); padding: 12px 14px; font-size: 13px; margin-top: 14px; }
.calc-h { font-weight: 600; color: var(--purple-600); font-size: 12.5px; margin-bottom: 6px; }
.calc-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px dashed #DDD6FE; }
.calc-row:first-of-type { border-top: none; }
.calc-hi { color: var(--blue-600); }
.mono-cell { font-family: Consolas, monospace; font-size: 12.5px; color: var(--blue-800); }

/* ═══ Batch 6 — รายงาน ═══════════════════════════════════════════════
   แถบแนวนอนสีเดียว ไล่ความยาวตามขนาด (ไม่ใช้หลายสีให้อ่านเป็น "คนละพวก")
   ตัวเลขติดปลายแถบเสมอ ไม่ต้องกวาดสายตาไปหาแกน */
.report-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px; margin-bottom: 16px;
}
.report-card {
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
    padding: 12px 14px; cursor: pointer; font-family: inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.report-card:hover { border-color: var(--blue-400); box-shadow: var(--shadow-sm); }
.report-card.on { border-color: var(--blue-600); box-shadow: inset 0 0 0 1px var(--blue-600); background: var(--blue-50); }
.report-card .ic { font-size: 17px; line-height: 1; color: var(--blue-600); }
.report-card .nm { font-weight: 600; font-size: 13.5px; color: var(--gray-800); }
.report-card .ds { font-size: 11.5px; color: var(--gray-600); line-height: 1.45; }
.report-card .bs { font-size: 11px; color: var(--gray-400); margin-top: 2px; }

.report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.report-title { font-size: 16px; font-weight: 700; color: var(--gray-800); }

.rbars { display: flex; flex-direction: column; gap: 2px; }   /* ช่อง 2px คั่นแถบ = เส้นแบ่งที่ไม่ต้องวาดเส้น */
.rbar-row { display: grid; grid-template-columns: 180px 1fr 92px; gap: 10px; align-items: center; }
.rbar-label {
    font-size: 12.5px; color: var(--gray-600);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rbar-track { background: var(--gray-100); border-radius: 4px; height: 18px; overflow: hidden; }
.rbar-fill  { display: block; height: 100%; background: var(--blue-600); border-radius: 0 4px 4px 0; min-width: 2px; }
.rbar-val   { font-size: 12.5px; font-weight: 600; color: var(--gray-800); text-align: right; font-variant-numeric: tabular-nums; }

.cell-hi { font-weight: 600; color: var(--gray-800); }
.tone-ok   { border-left: 4px solid var(--green-600); }
.tone-warn { border-left: 4px solid var(--amber-600); }
.tone-bad  { border-left: 4px solid var(--red-600); }

.range-in { max-width: 150px; }
.text-right { text-align: right; font-variant-numeric: tabular-nums; }
.sub-head { font-size: 12.5px; font-weight: 600; color: var(--gray-600); margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--gray-200); }

@media (max-width: 900px) {
    .rbar-row { grid-template-columns: 120px 1fr 74px; }
}

/* ═══ Batch 7 — multi-tenant · ตั้งค่า · รหัสผ่าน ════════════════════ */
.wiz-steps { display: flex; margin-bottom: 18px; }
.wiz-step {
    flex: 1; padding: 10px 14px; background: var(--gray-50);
    border: 1px solid var(--gray-200); border-right: none;
    font-size: 12.5px; color: var(--gray-600);
}
.wiz-step:first-child { border-radius: 8px 0 0 8px; }
.wiz-step:last-child  { border-right: 1px solid var(--gray-200); border-radius: 0 8px 8px 0; }
.wiz-step.on   { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-800); font-weight: 600; }
.wiz-step.done { background: #fff; color: var(--green-600); }
.wiz-step .n {
    display: inline-flex; width: 18px; height: 18px; border-radius: 50%;
    background: var(--gray-200); color: var(--gray-600);
    align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-right: 7px;
}
.wiz-step.on .n   { background: var(--blue-600); color: #fff; }
.wiz-step.done .n { background: var(--green-600); color: #fff; }

.kv-grid { display: grid; grid-template-columns: 190px 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv-grid .k { color: var(--gray-600); }

.seed-list { list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--gray-600); margin: 0 0 14px; }
.seed-list li::before { content: "● "; color: var(--green-600); }

.color-dot { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--gray-200); display: inline-block; flex-shrink: 0; }

/* ความแข็งแรงของรหัสผ่าน — แถบสี่ช่องพร้อมรายการกฎที่ติ๊กทีละข้อ ไม่ใช่สีอย่างเดียว */
.pw-meter { display: flex; gap: 3px; margin-top: 6px; }
.pw-meter i { height: 5px; flex: 1; background: var(--gray-200); border-radius: 3px; }
.pw-meter i.on { background: var(--green-600); }
.rule-list { list-style: none; font-size: 12.5px; color: var(--gray-600); margin-top: 8px; display: grid; gap: 3px; }
.rule-list li::before { content: "○ "; color: var(--gray-400); }
.rule-list li.ok::before { content: "● "; color: var(--green-600); }

/* ── ผู้ช่วย AI (Batch 17a) — สีม่วงแยกจากสีแบรนด์ของ tenant ให้รู้ทันทีว่า "AI เสนอ ยังไม่ใช่ค่าที่เลือก" ── */
:root { --ai: #5B3FB0; --ai-wash: #F1EDFB; --ai-line: #D9D0F3; }
.ai-mark { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: var(--ai); color: #fff; align-items: center; justify-content: center; vertical-align: middle; }
.ai-mark .nx-i { width: 14px; height: 14px; }
.btn-ai { background: #fff; border: 1px solid var(--ai-line); color: var(--ai); }
.btn-ai:hover:not([disabled]) { background: var(--ai-wash); }
.btn-ai-solid { background: var(--ai); border: 1px solid var(--ai); color: #fff; }
.btn-ai-solid:hover:not([disabled]) { filter: brightness(.92); }
.ai-assist { margin: -4px 0 16px; }
.ai-wait { display: flex; align-items: center; gap: 8px; border: 1px dashed var(--ai-line); background: #fff; color: var(--ai); border-radius: 9px; padding: 8px 12px; font-size: 13px; }
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ai); display: inline-block; animation: ai-pulse 1s infinite; }
@keyframes ai-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ai-dot { animation: none; } }
.ai-box { border: 1px solid var(--ai-line); background: var(--ai-wash); border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-top: 8px; }
.ai-box-h { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ai); margin-bottom: 8px; flex-wrap: wrap; }
.ai-box-s { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--ink-3, #8A94A0); }
.ai-sugg { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; }
.ai-sugg .k { color: var(--ink-3, #8A94A0); }
.ai-why { font-size: 12.5px; color: var(--ink-2, #4F5B67); border-top: 1px dashed var(--ai-line); padding-top: 7px; margin-top: 8px; }
.ai-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cat-card.ai-sug { border-color: var(--ai); box-shadow: 0 0 0 2px var(--ai-wash); }
.cat-card.ai-sug.on { border-color: var(--ai); }
@media (max-width: 640px) { .ai-sugg { grid-template-columns: 1fr; } .ai-sugg .k { margin-top: 4px; } }

/* หน้า ผู้ช่วย AI */
.ai-note { font-size: 12px; color: var(--ink-3, #8A94A0); }   /* ไม่ใช้ .item-desc — ตัดบรรทัดเดียว 300px สำหรับตาราง */
.ai-card .card-foot .btn { margin-left: 0; }                  /* .card-foot .btn ดันทุกปุ่มด้วย margin-left:auto ปุ่มจึงกระจายกลางแถว */
.ai-card .card-foot .ai-spacer { flex: 1; }
.ai-card .card-title { display: inline-flex; align-items: center; gap: 8px; }
.ai-state { font-size: 13px; color: var(--ink-3, #8A94A0); }
.ai-state.on > span:first-child { color: var(--pos, #18936A); font-weight: 600; }
.ai-stats { display: flex; gap: 24px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2, #4F5B67); }
.ai-stats b { display: block; font-size: 16px; color: var(--ink, #15202B); }
.ai-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ai-lists > div { border: 1px solid var(--line, #E3E7EC); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; }
.ai-lists b { display: block; font-size: 13px; margin-bottom: 4px; }
.ai-lists ul { margin: 0; padding-left: 16px; }
.ai-lists .y { border-color: #BFE3CF; background: var(--pos-wash, #E3F2EB); }
.ai-lists .n { border-color: #F1C9C3; background: var(--crit-wash, #FBE9E7); }
/* Batch 17b — การ์ดผู้ช่วย AI ในหน้ารายละเอียดงาน */
.ai-sum { margin-top: 10px; background: #fff; }
.ai-sum h4 { margin: 8px 0 3px; font-size: 12.5px; color: var(--ai); font-weight: 600; }
.ai-sum h4:first-child { margin-top: 0; }
.ai-sum ul { margin: 0; padding-left: 18px; }
.ai-sum li { margin: 2px 0; line-height: 1.5; }
.ai-stale { margin-top: 4px; color: var(--caution, #9A6700); font-weight: 600; }
.ai-stale .link-btn { font-weight: 600; }
.badge-ai { background: var(--ai-wash); color: var(--ai); border: 1px solid var(--ai-line); }
/* Batch 17c — งานคล้ายกันที่เคยแก้แล้ว */
.ai-sim { background: #fff; }
.ai-sim-item { border-top: 1px dashed var(--ai-line); padding: 8px 0; }
.ai-box-h + .ai-sim-item { border-top: 0; padding-top: 2px; }
.ai-sim-subj { margin-top: 3px; font-weight: 600; color: var(--ink, #15202B); line-height: 1.45; }
.ai-sim-fix { margin-top: 3px; font-size: 12.5px; color: var(--ink-2, #4F5B67); line-height: 1.5; white-space: pre-wrap; }
@media (max-width: 760px) { .ai-lists { grid-template-columns: 1fr; } }