body { font-family: Sarabun, sans-serif; }

.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; }
.dot-online { background: #2e7d32; box-shadow: 0 0 0 3px rgba(46, 125, 50, .18); }
.dot-offline { background: #d32f2f; box-shadow: 0 0 0 3px rgba(211, 47, 47, .18); }
.dot-unknown { background: #9e9e9e; }

.branch-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.branch-grid > * { min-width: 0; }

.printer-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #eee; cursor: pointer; }
.printer-row:last-child { border-bottom: none; }
.printer-row.hidden-printer { opacity: .45; }
.printer-main { flex: 1; min-width: 0; }
.printer-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.printer-meta { font-size: .8rem; color: #666; }

/* คอลัมน์ตัวเลข: header กับ cell ชิดขวาเหมือนกัน (ต้องชนะ CSS ของ MudSimpleTable) */
.mud-simple-table table th.num, .mud-simple-table table td.num { text-align: right; }

.login-box { max-width: 360px; margin: 10vh auto 0; }
.login-box input { width: 100%; padding: 10px; margin: 6px 0 14px; border: 1px solid #bbb; border-radius: 4px; font: inherit; box-sizing: border-box; }
.login-box button { width: 100%; padding: 10px; border: 0; border-radius: 4px; background: #594ae2; color: #fff; font: inherit; cursor: pointer; }
.login-error { color: #d32f2f; margin-bottom: 12px; }

#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }