html, body {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMyAtNTEpIj48cGF0aCBkPSJN26MuNTA6IDUxQzI26NC43MTcgNTAgMjY1LjgxMyA1MS40ODM3IDI2Ni42MDA2IDUyLjI2NTg8MjY3LjA1MjUgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNFA2NC4xMTQgOTJDNjEuMTg4IDkyLjc1MiA1Mi4yNjU4IDkxLjA2NjMgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTcuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODFaTSIyNjMuNTc2IDg2LjA1NDdDNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI26y41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODc3IDg5Ljc5MjE2IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Basic IMAPS-like theming */
.layout-root { display:flex; flex-direction:column; height:100vh; }
.topbar { background:#0b3a56; color:#fff; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; box-shadow:0 1px 0 rgba(0,0,0,0.1); }
.topbar .brand { font-weight:600; letter-spacing:0.2px; }
.top-actions a { color:#cfe3f5; margin-left:16px; text-decoration:none; }
.top-actions a:hover { color:#fff; }

.content-wrapper { display:block; height:calc(100vh - 56px); }

/* NOTE: removed global sidebar layout styles to avoid showing a sidebar on every page */
.sidebar { display:none !important; width:0 !important; padding:0 !important; border:0 !important; overflow:hidden !important; }
.main { flex:1; overflow:auto; padding:24px; height:auto; }

.side-nav .section { margin-bottom:24px; }
.side-nav .section-title { font-weight:600; color:#636e72; margin-bottom:8px; }
.side-nav ul { list-style:none; padding-left:0; }
.side-nav li { margin:6px 0; }
.side-nav a { color:#0b3a56; text-decoration:none; }
.side-nav a:hover { text-decoration:underline; }

.side-nav a.active {
    position: relative;
    color: #0b3a56;
}

.side-nav a.active::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 100%;
    top: 0;
    left: 0;
    background: #0b3a56;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* New Project */
.bms-select h5, .templates-section h5 { color:#2d3436; font-weight:600; }
.bms-logos { display:flex; gap:24px; align-items:center; padding:12px 0; }
.bms-logo { background:none; border:none; padding:0; cursor:pointer; filter:grayscale(100%); opacity:0.75; }
.bms-logo img { height:36px; }
.bms-logo.selected { filter:none; opacity:1; }

.search-row { display:flex; align-items:center; gap:12px; margin:8px 0 16px; }
.templates-table-wrap { max-height:68vh; overflow:auto; border:1px solid #e0e0e0; }
.templates-table { border-collapse:separate; border-spacing:0; }
.templates-table thead th { position:sticky; top:0; background:#fafafa; z-index:1; border-bottom:1px solid #ddd !important; }
.templates-table td, .templates-table th { font-size:14px; border:none !important; }
/* .templates-table tbody tr { border-bottom:1px solid #eee; } */
/* .templates-table tbody tr:last-child { border-bottom: none; } */
.templates-table tbody tr:hover { background:#f5f9fd; }
/* Buttons */
.btn-primary.btn-sm { background:#0b3a56; border-color:#0b3a56; }
.btn-primary.btn-sm:hover { background:#094062; border-color:#094062; }

.btn-outline-primary {
    position: relative;
    overflow: hidden;
    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

.btn-outline-primary::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(13, 59, 102, 0.1);
    transition: opacity 0.3s;
    z-index: 1;
    opacity: 0;
}

.btn-outline-primary:hover::after {
    opacity: 1;
}

.btn-outline-primary:focus {
    outline: none;
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Utility */
hr { border-top:1px solid #e0e0e0; }

.pre-scrollable {
    position: relative;
    height: auto;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
}

.scrollable {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Table look */
.table thead th { position:sticky; top:0; background:#fafafa; }

.table td, .table th {
    padding: 12px 15px;
    vertical-align: middle;
    border-top: 1px solid #e9ecef;
}

.table caption {
    padding: 0.75rem 1.25rem;
    color: #6c757d;
    caption-side: bottom;
}

/* Protocol buttons */
.btn-outline-primary.active { background:#0d3b66; color:#fff; border-color:#0d3b66; }

.btn-secondary, .btn-secondary:hover, .btn-secondary:focus {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* highlight selected row */
.selected-row { background:#0b3a56 !important; color:#fff; }
.selected-row td { color:#fff; }
.templates-table tbody tr { cursor: pointer; }
/* New Project page */
.np-page { display:flex; flex-direction:column; gap:16px; align-items:stretch; }
.np-hero { width:100%; max-width:none; display:flex; justify-content:space-between; align-items:flex-end; }
.np-heading { margin:4px 0 0; }
.np-kicker { text-transform:uppercase; letter-spacing:0.4px; font-size:12px; color:#5c6b73; font-weight:600; }
.np-subtext { color:#6b7280; margin:4px 0 0; }
.np-card { width:100%; max-width:none; background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:16px; box-shadow:0 2px 6px rgba(0,0,0,0.04); }
.np-search-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.np-search { flex:1; padding:8px 10px; border:1px solid #d0d7de; border-radius:4px; }
.np-count { color:#6b7280; font-size:14px; }
.np-table-wrap { max-height:520px; overflow:auto; border:1px solid #e5e7eb; border-radius:6px; }
.np-table { width:100%; border-collapse:separate; border-spacing:0; }
.np-table th { background:#f8fafc; font-weight:600; text-align:left; padding:10px; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:1; }
.np-table td { padding:10px; border-bottom:1px solid #f1f5f9; }
.np-table tbody tr:hover { background:#f5f9fd; cursor:pointer; }
/* Selected row: light-blue border highlight */
.np-row-selected { background:#f0f7ff; }
.np-row-selected td { border-top:2px solid #66a7ff; border-bottom:2px solid #66a7ff; }
.np-row-selected td:first-child { border-left:2px solid #66a7ff; border-top-left-radius:6px; border-bottom-left-radius:6px; }
.np-row-selected td:last-child { border-right:2px solid #66a7ff; border-top-right-radius:6px; border-bottom-right-radius:6px; }

.np-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
@media (max-width: 1100px) { .np-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .np-grid { grid-template-columns:repeat(1, minmax(0, 1fr)); } }

.np-tile {
  display:block;
  text-decoration:none;
  color:inherit;
  border:2px solid #d1d5db;
  background:#f8fafc;
  border-radius:12px;
  padding:14px 16px;
  transition:all .12s ease;
}
.np-tile:hover { border-color:#0b3a56; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.np-tile-selected { border-color:#66a7ff !important; background:#f0f7ff; box-shadow:0 4px 12px rgba(102,167,255,0.25); }

.np-tile-title { font-weight:800; color:#0b3a56; font-size:16px; }
.np-tile-sub { margin-top:4px; color:#374151; }
.np-tile-meta { margin-top:8px; color:#6b7280; font-size:13px; }
/* MAPS shell (Configuration/Signals) */
.maps-shell { width:100%; }
.maps-top-tabs { display:flex; gap:18px; align-items:flex-end; padding:10px 0 14px; border-bottom:1px solid #e5e7eb; }
.maps-top-tab { text-decoration:none; color:#4b5563; padding:8px 10px; border-radius:6px; font-weight:600; }
.maps-top-tab:hover { background:#f3f4f6; }
.maps-top-tab-active { color:#0b3a56; background:#e8f1f8; }

.maps-body { display:flex; gap:18px; padding-top:14px; }
.maps-left-tabs { width:180px; border-right:1px solid #e5e7eb; padding-right:12px; }
.maps-left-title { font-weight:800; color:#111827; margin-bottom:10px; }
.maps-left-tab { display:block; text-decoration:none; color:#6b7280; padding:8px 10px; border-radius:6px; margin-bottom:6px; font-weight:600; }
.maps-left-tab:hover { background:#f3f4f6; color:#111827; }
.maps-left-tab-active { color:#0b3a56; background:#e8f1f8; }

.maps-content { flex:1; }
.maps-h2 { font-size:18px; font-weight:800; color:#111827; margin:6px 0 14px; }

.maps-grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start; }
@media (max-width: 1100px) { .maps-grid-2 { grid-template-columns: 1fr; } .maps-left-tabs { display:none; } }

.maps-panel { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px; overflow:hidden; }
.maps-panel-title { font-weight:800; color:#374151; margin-bottom:10px; }

.maps-form { display:flex; flex-direction:column; gap:10px; min-width:0; }
.maps-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
/* Inline rows: label + control(s) that don't overflow */
.maps-inline { display:grid; grid-template-columns: 220px 1fr auto; align-items:center; gap:10px; }
.maps-inline label { margin:0; }
.maps-inline input[type="checkbox"] { justify-self:start; }

.maps-input, .maps-textarea {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0;
  border:1px solid #d1d5db;
  border-radius:6px;
  padding:8px 10px;
  font-size:14px;
}

.maps-input-readonly { background:#f3f4f6; color:#6b7280; }
/* Conversions Manager (WinForms-like) */
.conv-manager { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px; }
.conv-section { }
.conv-section-header { font-weight:800; color:#111827; margin-bottom:10px; }
.conv-grid { display:grid; grid-template-columns: 260px 1fr; gap:18px; align-items:start; }
@media (max-width: 1100px) { .conv-grid { grid-template-columns: 1fr; } }

.conv-left { display:flex; flex-direction:column; gap:10px; }
.conv-list { border:1px solid #d1d5db; border-radius:4px; min-height:170px; max-height:260px; overflow:auto; background:#fff; padding:6px; }
.conv-item { display:block; width:100%; text-align:left; border:none; background:transparent; padding:6px 8px; border-radius:2px; font-size:14px; }
.conv-item:hover { background:#f3f4f6; }
.conv-item-active { background:#2b78d0; color:#fff; }
.conv-item-active:hover { background:#2b78d0; color:#fff; }

select.conv-list { width: 100%; padding: 6px; }
select.conv-list option { padding: 6px 8px; }

.conv-list-actions { display:flex; gap:10px; }
.conv-mini-btn { width:42px; height:28px; padding:0; border:1px solid #d1d5db; }

.conv-right { min-width:0; }
.conv-form { display:flex; flex-direction:column; gap:10px; }
.conv-row { display:grid; grid-template-columns: 140px 1fr; gap:12px; align-items:center; }
.conv-row label { margin:0; font-weight:600; color:#374151; }

.conv-range { display:grid; grid-template-columns: 120px 1fr 120px; gap:10px; align-items:center; margin-top:4px; }
.conv-range-label { text-align:center; color:#111827; font-weight:600; }

.conv-scale-grid { display:flex; flex-direction:column; gap:8px; }
.conv-scale-row { display:grid; grid-template-columns: auto 120px auto 120px; gap:8px 10px; align-items:center; }
.conv-scale-row label { font-weight:600; color:#374151; margin:0; }

.conv-divider { height:1px; background:#e5e7eb; margin:14px 0; }

.conv-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }

/* Config ribbon */
.config-ribbon { display:flex; align-items:center; justify-content:space-between; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:8px; padding:10px 16px; margin-bottom:18px; }
.config-ribbon-left { display:flex; align-items:flex-start; gap:18px; }
.config-ribbon-link { display:flex; flex-direction:column; align-items:center; text-decoration:none; color:#4b5563; font-weight:600; padding:6px 10px; border-radius:6px; min-width:98px; transition:background .15s ease, color .15s ease, filter .15s ease; }
.config-ribbon-link img { height:32px; width:auto; filter: grayscale(100%) brightness(30%) contrast(95%); /* ~#4d4c4c */ }
.config-ribbon-link span { margin-top:6px; font-size:14px; }
.config-ribbon-link:hover { background:#e8edf3; color:#1f2937; }
.config-ribbon-link.active { background:#dde9f5; color:#043c5d; box-shadow:inset 0 -2px 0 #043c5d; }
.config-ribbon-link.active img {
    filter: invert(10%) sepia(95%) saturate(4500%) hue-rotate(195deg) brightness(70%) contrast(120%);
}
    .config-ribbon-logo { height:40px; width:auto; }

/* Prevent horizontal overflow coming from wide grids/tables/forms */
.layout-root,
.content-wrapper,
.main,
.maps-shell,
.maps-body,
.maps-content,
.maps-panel,
.conv-manager,
.conv-grid,
.np-card {
  max-width: 100%;
  box-sizing: border-box;
}

/* Allow flex children to shrink instead of forcing overflow */
.maps-body > *,
.conv-grid > *,
.maps-grid-2 > * {
  min-width: 0;
}

/* Make tables behave on small widths without forcing page scroll */
table {
  max-width: 100%;
}

.templates-table-wrap,
.np-table-wrap {
  max-width: 100%;
}

:root, html, body { height: 100%; }
body { overflow: hidden; }
.layout-root { min-height: 100vh; display: flex; flex-direction: column; }
.content-wrapper { flex: 1; display: flex; overflow: hidden; }
.main { flex: 1; overflow: auto; padding:24px; height:auto; }
.np-page { min-height: 100%; display: flex; flex-direction: column; }
.templates-section { flex: 1; display: flex; flex-direction: column; }
.templates-table-wrap { flex: 1; overflow: auto; }
/* Wiring diagram page */
.wiring-page { display:flex; gap:24px; height:100%; box-sizing:border-box; }
.wiring-left { flex:1; display:flex; flex-direction:column; gap:12px; min-width:0; align-items:flex-start; }
.wiring-title { margin:0; color:#0b3a56; font-weight:700; }
.wiring-image-wrap { flex:1; display:flex; align-items:flex-start; justify-content:center; overflow:auto; border:1px solid #e0e0e0; border-radius:8px; padding:12px; background:#fff; max-height:75vh; }
.wiring-image-wrap img { max-width:720px; max-height:72vh; height:auto; width:auto; display:block; }
.wiring-right { width:260px; display:flex; flex-direction:column; gap:16px; }
.wiring-window { max-width: 1200px; margin: 8px auto; background: #fff; border: 1px solid #d0d7de; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 12px; height: calc(100vh - 88px); display:flex; flex-direction:column; box-sizing:border-box; }
.wiring-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e5e7eb; padding-bottom:8px; margin-bottom:12px; }
.wiring-header h2 { margin:0; font-size:18px; color:#0b3a56; font-weight:700; }
.wiring-close { color:#0b3a56; font-weight:700; text-decoration:none; border:none; background:none; font-size:18px; padding:4px 8px; }
.wiring-close:hover { color:#092c44; }
.wiring-page { display:flex; gap:12px; flex:1; overflow:hidden; }
.wiring-left { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; align-items:flex-start; }
.wiring-image-wrap { flex:1; display:flex; align-items:flex-start; justify-content:center; overflow:auto; border:1px solid #e0e0e0; border-radius:8px; padding:8px; background:#fff; }
.wiring-image-wrap img { max-width:600px; max-height:64vh; height:auto; width:auto; display:block; }
.wiring-right { width:240px; display:flex; flex-direction:column; gap:12px; }
.wiring-box { border:1px solid #d0d7de; border-radius:8px; padding:12px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.wiring-box p { margin:0 0 8px 0; color:#2d3436; font-size:14px; }
.wiring-root { height:calc(100vh - 56px); overflow:hidden; padding:8px 0; }
/* USB modal */
.usb-modal { max-width: 560px; margin: 24px auto; background:#fff; border:1px solid #d0d7de; border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,0.16); padding:16px; }
.usb-modal__header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e5e7eb; padding-bottom:8px; }
.usb-modal__header h3 { margin:0; font-size:18px; color:#0b3a56; }
.usb-modal__close { color:#0b3a56; font-weight:700; text-decoration:none; border:none; background:none; font-size:18px; padding:4px 8px; }
.usb-modal__body { padding:12px 0 8px 0; display:flex; flex-direction:column; gap:16px; }
.usb-section { border-top:1px solid #e7e7eb; padding-top:12px; }
.usb-section h5 { margin:0 0 8px 0; color:#2d3436; font-weight:600; }
.usb-field { display:grid; grid-template-columns: 240px 32px auto; align-items:center; column-gap:10px; row-gap:6px; padding:4px 0; }
.usb-field--nested { padding-left:24px; grid-template-columns: 216px 32px auto; }
.usb-field--debug { grid-template-columns: 200px 80px auto; }
.usb-field span { display:block; }
.usb-field label { margin:0; color:#333; }
.usb-field input[type="checkbox"] { margin:0; justify-self:start; }
.usb-debug { width:80px; justify-self:start; }
.usb-modal__footer { display:flex; justify-content:flex-end; gap:8px; padding-top:12px; border-top:1px solid #e7e7eb; }
/* Security modal */
.sec-modal { max-width: 600px; margin: 24px auto; background:#fff; border:1px solid #d0d7de; border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,0.16); padding:16px; }
.sec-modal__header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e5e7eb; padding-bottom:8px; }
.sec-modal__header h3 { margin:0; font-size:18px; color:#0b3a56; }
.sec-modal__close { color:#0b3a56; font-weight:700; text-decoration:none; border:none; background:none; font-size:18px; padding:4px 8px; }
.sec-modal__body { padding:12px 0 8px 0; display:flex; flex-direction:column; gap:12px; }
.sec-section { border-top:1px solid #e7e7eb; padding-top:12px; }
.sec-section h5 { margin:0 0 8px 0; color:#2d3436; font-weight:600; }
.sec-field { display:grid; grid-template-columns: 240px 32px auto; align-items:center; column-gap:10px; row-gap:6px; padding:4px 0; }
.sec-field--nested { padding-left:24px; grid-template-columns: 216px 120px auto; }
.sec-field label { margin:0; color:#333; }
.sec-field input[type="checkbox"] { margin:0; justify-self:start; }
.sec-port { width:100px; justify-self:start; }
.sec-period { width:160px; justify-self:start; text-align:left; min-width:160px; }
.sec-help { margin:0 0 8px 0; color:#666; font-size:14px; padding-left:4px; }
.sec-modal__footer { display:flex; justify-content:flex-end; gap:8px; padding-top:12px; border-top:1px solid #e7e7eb; }

/* Ensure number inputs keep the same sizing as text inputs inside these modals */
.sec-modal input[type="number"].maps-input {
    width: 100%;
    box-sizing: border-box;
}

/* Suffix inside the same field (input + "hours") */
.sec-input-suffix {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
}

.sec-input-suffix .sec-suffix {
    color: #333;
    white-space: nowrap;
}

/* Connection page styles */
.connection-panel { }
.connection-title { font-weight: 700; color: #0b3a56; margin-bottom: 12px; }
.connection-grid { display: flex; gap: 24px; justify-content: flex-start; }
.connection-left { flex: 0 0 auto; min-width: 280px; }
.connection-right { 
    flex: 0 0 auto;
}

.connection-table {
    width: 100%;
    max-width: 450px;
    border-collapse: collapse;
    font-size: 12px;
}

.connection-table thead th {
    background: #9a9a9a;
    color: #000;
    font-weight: 600;
    padding: 4px 8px;
    text-align: left;
    border: 1px solid #7a7a7a;
}

.connection-table td {
    padding: 3px 8px;
    border: 1px solid #d9d9d9;
    font-size: 12px;
}

.connection-table td.connection-desc {
    width: 160px;
    max-width: 160px;
    font-weight: 600;
    background: #f8f8f8;
}

.connection-table td.connection-val {
    width: 280px;
    max-width: 280px;
}

.connection-row { margin-bottom: 10px; }
.connection-label { font-weight: 600; color: #374151; margin-bottom: 4px; display: block; }
.connection-radios { display: flex; gap: 16px; }
.connection-radio { display: flex; align-items: center; gap: 4px; }
.connection-list-wrap { }
.connection-list { width: 100%; border: 1px solid #d1d5db; border-radius: 4px; }
.connection-pwd { max-width: 300px; }
.connection-refresh { }
.connection-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e5e7eb; }
.connection-footer-left { display: flex; align-items: center; gap: 10px; }
.connection-footer-right { display: flex; gap: 8px; }
.connection-com { width: 180px; }
.connection-btn { min-width: 100px; }
.connection-statusbar { padding: 8px 12px; border-radius: 4px; margin-top: 12px; }
.connection-statusbar.connected { background: #d4edda; color: #155724; }
.connection-statusbar.waiting { background: #fff3cd; color: #856404; }
.connection-statusbar.disconnected { background: #f8d7da; color: #721c24; }
.connection-status-error { margin-left: 12px; font-weight: 600; }

.serial-firstuse-banner { background: #e7f3ff; border: 1px solid #b6d4fe; border-radius: 6px; padding: 12px; margin-bottom: 12px; }
.serial-firstuse-text { margin-bottom: 8px; color: #084298; }
.serial-firstuse-btn { }

.connection-info { }

@media (max-width: 900px) {
    .connection-grid { flex-direction: column; }
    .connection-right { width: 100%; max-width: 100%; }
    .connection-table { max-width: 100%; }
}

/* Signals table (WinForms-like) */
.signals-table-wrap {
  overflow: auto;
  max-height: calc(100vh - 220px);
}

.table.signals-table {
  margin: 0;
  border-collapse: collapse;
}

/* Column header row */
.table.signals-table thead tr:not(.signals-superhead) th {
  background-color: #f2f2f2 !important;
  color: #000 !important;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 8px;
  border-bottom: 1px solid #8a8a8a;
}

/* Super header row (protocol groups) - base row style */
.table.signals-table thead tr.signals-superhead th {
  font-weight: 400;
  font-size: 13px;
  padding: 4px 8px;
  border-bottom: 1px solid #7a7a7a !important;
}

/* Empty header cells (first 3 columns: #, Active, Description) - no background */
.table.signals-table thead tr.signals-superhead th.signals-empty-header {
  background-color: transparent !important;
  border-bottom: none !important;
}

/* Protocol header cells (Modbus Slave, KNX) - lighter gray background with black text */
.table.signals-table thead tr.signals-superhead th.signals-protocol-header {
  background-color: #9a9a9a !important;
  color: #000 !important;
  text-align: center;
  font-weight: 400;
  border-bottom: 1px solid #7a7a7a !important;
}

/* Vertical separator line between protocol groups (left border on KNX) */
.table.signals-table thead tr.signals-superhead th.signals-protocol-header-knx {
  border-left: 2px solid #5b5b5b !important;
}

.table.signals-table td {
  font-size: 12px;
  padding: 3px 8px;
  border-top: 1px solid #d9d9d9;
  color: #000;
}

.table.signals-table tbody tr:hover {
  background: #eef5ff;
}

.signals-flag {
  text-align: center;
}

/* Signals Viewer in Diagnostic page */
.signals-viewer-body {
    padding: 0 !important;
}

.signals-viewer-table-wrap {
    overflow: auto;
    max-height: 280px;
}

.table.signals-viewer-table {
    margin: 0;
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}

.table.signals-viewer-table thead th {
    background-color: #e8e8e8 !important;
    color: #000 !important;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 6px;
    border-bottom: 1px solid #8a8a8a;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

.table.signals-viewer-table td {
    font-size: 11px;
    padding: 2px 6px;
    border-top: 1px solid #d9d9d9;
    color: #000;
    vertical-align: middle;
}

.table.signals-viewer-table tbody tr:hover {
    background: #eef5ff;
}

.table.signals-viewer-table tbody tr.signals-row-alt {
    background-color: #f5f5f5;
}

.table.signals-viewer-table tbody tr.signals-row-alt:hover {
    background: #e8f0fa;
}

/* Signal value columns */
.signals-col-num {
    width: 32px;
    text-align: center;
}

/* Priority dropdown in signals table */
.signals-priority-select {
    width: 100%;
    padding: 2px 4px;
    font-size: 12px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

.signals-priority-select:focus {
    outline: none;
    border-color: #0b3a56;
    box-shadow: 0 0 2px rgba(11, 58, 86, 0.3);
}

.signals-row-selected .signals-priority-select {
    background: #fff;
    color: #000;
}

/* Address input in signals table */
.signals-address-input {
    width: 100%;
    max-width: 80px;
    padding: 2px 4px;
    font-size: 12px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    background: #fff;
    text-align: right;
}

.signals-address-input:focus {
    outline: none;
    border-color: #0b3a56;
    box-shadow: 0 0 2px rgba(11, 58, 86, 0.3);
}

.signals-row-selected .signals-address-input {
    background: #fff;
    color: #000;
}

/* Hide spinner buttons on number inputs for cleaner look */
.signals-address-input::-webkit-outer-spin-button,
.signals-address-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.signals-address-input[type=number] {
    -moz-appearance: textfield;
}

.signals-col-value {
    width: 70px;
    text-align: right;
    padding-right: 4px !important;
}

/* Disabled cell (gray background) */
.signals-cell-disabled {
    background-color: #d9d9d9 !important;
}

/* Updated cell (highlight color) */
.signals-cell-updated {
    background-color: #ffcc66 !important;
    transition: background-color 0.3s ease;
}

/* Value input in signals viewer */
.signals-value-input {
    width: 100%;
    max-width: 60px;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 1px 4px;
    font-size: 11px;
    text-align: right;
    background: #fff;
}

.signals-value-input:focus {
    outline: none;
    border-color: #0b3a56;
    box-shadow: 0 0 2px rgba(11, 58, 86, 0.3);
}

.signals-value-readonly {
    display: block;
    text-align: right;
    color: #666;
}

/* Edit Columns Modal */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.edit-columns-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    min-width: 580px;
    max-width: 620px;
    z-index: 1001;
}

.edit-columns-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.edit-columns-header h4 {
    margin: 0;
    font-size: 16px;
    color: #0b3a56;
}

.edit-columns-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.edit-columns-close:hover {
    color: #333;
}

.edit-columns-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 450px;
    overflow-y: auto;
}

.edit-columns-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.edit-columns-item:hover {
    background: #f3f4f6;
}

.edit-columns-item input[type="checkbox"] {
    margin: 0;
}

.edit-columns-item span {
    font-size: 14px;
    color: #333;
}

.edit-columns-footer {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
}

/* Signals page toolbar and controls */
.signals-panel {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 300px);
    min-height: 200px;
    overflow: hidden;
}

.signals-panel .signals-table-wrap {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.signals-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #f5f5f5;
    border-top: 1px solid #d9d9d9;
    gap: 12px;
    flex-wrap: wrap;
}

.signals-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.signals-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.signals-toolbar-btn {
    padding: 3px 10px;
    font-size: 12px;
    min-width: auto;
    white-space: nowrap;
}

.signals-font-btn {
    font-weight: 700;
    min-width: 32px;
}

.signals-arrow-btn {
    min-width: 28px;
    padding: 3px 6px;
}

.signals-delete-btn {
    min-width: 28px;
    padding: 3px 8px;
    font-weight: 700;
}

.signals-add-count {
    width: 50px;
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    text-align: center;
}

.signals-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.signals-check input {
    margin: 0;
}

.signals-count {
    font-size: 12px;
    color: #555;
    font-weight: 600;
}

.signals-statusbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: #8b1f1f;
    color: #fff;
    font-size: 11px;
}

.signals-statusbar.connected {
    background: #0b3a56;
}

.signals-statusbar.disconnected {
    background: #8b1f1f;
}

.signals-statusbar-sep {
    font-size: 8px;
    opacity: 0.7;
}

/* Selected row in signals table */
.table.signals-table tbody tr.signals-row-selected {
    background: #0b3a56 !important;
    color: #fff;
}

.table.signals-table tbody tr.signals-row-selected td {
    color: #fff;
}

.table.signals-table tbody tr.signals-row-selected:hover {
    background: #0a4d6e !important;
}

/* Font size toggle */
.signals-table-wrap.signals-font-large .table.signals-table td,
.signals-table-wrap.signals-font-large .table.signals-table th {
    font-size: 14px;
    padding: 5px 10px;
}

/* Edit columns modal for signals page */
.signals-edit-columns-modal {
    min-width: 580px;
    max-width: 620px;
}

.signals-edit-columns-modal .edit-columns-body {
    max-height: 450px;
    padding: 20px;
}

.signals-edit-columns-modal .edit-columns-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.signals-edit-columns-modal .edit-columns-section-title {
    font-weight: 700;
    font-size: 13px;
    color: #0b3a56;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}

.signals-edit-columns-modal .edit-columns-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.signals-edit-columns-modal .edit-columns-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.signals-edit-columns-modal .edit-columns-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0b3a56;
}

@media (max-width: 900px) {
    .signals-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .signals-toolbar-right {
        width: 100%;
        justify-content: flex-start;
    }
    
    .signals-edit-columns-modal {
        min-width: auto;
        max-width: 95vw;
    }
    
    .signals-edit-columns-modal .edit-columns-grid {
        grid-template-columns: 1fr;
    }
}

/* Multi-selection styles for signals table */
.signals-multiselect-table {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.signals-selectable-row {
    cursor: pointer;
}

.signals-selectable-row:active {
    background: #cce5ff !important;
}

/* Selection count indicator */
.signals-selection-count {
    font-size: 12px;
    color: #0b3a56;
    font-weight: 600;
    margin-left: 8px;
}

/* Ensure selected rows maintain their style during drag */
.table.signals-table tbody tr.signals-row-selected.signals-selectable-row {
    background: #0b3a56 !important;
    color: #fff;
}

.table.signals-table tbody tr.signals-row-selected.signals-selectable-row td {
    color: #fff;
}

.table.signals-table tbody tr.signals-row-selected.signals-selectable-row:hover {
    background: #0a4d6e !important;
}

/* Hint text for multi-selection */
.signals-multiselect-hint {
    font-size: 11px;
    color: #888;
    margin-left: 12px;
}

/* --- Column Resize Styles (global for JS-created elements) --- */
.signals-viewer-table.resizable {
    table-layout: auto;
    width: auto;
    min-width: 100%;
}

.signals-viewer-table.resizable th {
    position: relative !important;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.signals-viewer-table.resizable td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Signals table (Signals page) resizable styles */
.signals-table.resizable {
    table-layout: auto;
    width: auto;
    min-width: 100%;
}

.signals-table.resizable th {
    position: relative !important;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.signals-table.resizable td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.column-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 100;
}

.column-resizer:hover {
    background: rgba(11, 90, 120, 0.4);
}

.column-resizer.active {
    background: #0b5a78;
}

.signals-viewer-table.resizing,
.signals-table.resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

.signals-viewer-table.resizing *,
.signals-table.resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.signals-viewer-table.resizing .column-resizer,
.signals-table.resizing .column-resizer {
    background: #0b5a78;
}

/* ===== POC: Login page ===== */
.login-shell {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #f0f2f5;
}

.login-card {
    width: 360px;
    max-width: 90vw;
    background: #fff;
    border: 1px solid #d9dee3;
    border-radius: 8px;
    padding: 32px 28px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.login-logo {
    height: 40px;
    object-fit: contain;
    align-self: center;
    margin-bottom: 16px;
}

.login-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
    text-align: center;
    color: #1f2a37;
}

.login-label {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    margin: 10px 0 4px;
}

.login-card .login-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
}

.login-btn {
    margin-top: 18px;
}

.login-error {
    background: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #f8b4b4;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 8px;
}

/* ===== POC: IBOX list / provisioning ===== */
.ibox-shell {
    max-width: 980px;
    margin: 24px auto;
    padding: 0 16px;
}

.ibox-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ibox-header h2 {
    margin: 0;
    font-size: 20px;
    color: #1f2a37;
}

.ibox-user {
    font-size: 13px;
    color: #6b7280;
}

.ibox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ibox-card {
    border: 1px solid #d9dee3;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}

.ibox-card:hover {
    border-color: #9ca3af;
}

.ibox-card.selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.ibox-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ibox-name {
    font-weight: 600;
    color: #111827;
}

.ibox-serial {
    font-size: 12px;
    color: #6b7280;
    font-family: monospace;
}

.ibox-state {
    font-size: 12px;
    margin-top: 6px;
}

.ibox-state.idle { color: #6b7280; }
.ibox-state.sending,
.ibox-state.waiting { color: #b45309; }
.ibox-state.ready { color: #047857; }
.ibox-state.error { color: #b91c1c; }

.ibox-status-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.ibox-status-badge.idle { background: #f3f4f6; color: #6b7280; }
.ibox-status-badge.waiting { background: #fef3c7; color: #92400e; }
.ibox-status-badge.ready { background: #d1fae5; color: #047857; }
.ibox-status-badge.error { background: #fee2e2; color: #b91c1c; }

.ibox-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 8px;
    font-size: 12.5px;
    color: #374151;
}

.ibox-meta-item {
    white-space: nowrap;
}

.ibox-meta-label {
    color: #9ca3af;
    margin-right: 4px;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: .03em;
}

.ibox-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.ibox-empty {
    color: #6b7280;
    padding: 24px;
    text-align: center;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
}

.ibox-progress {
    margin-top: 10px;
    height: 8px;
    width: 100%;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.ibox-progress-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 999px;
    transition: width 1s linear;
}

.ibox-provisioning-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 8px;
    font-size: 14px;
}

.ibox-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #f59e0b;
    border-top-color: transparent;
    border-radius: 50%;
    flex: 0 0 auto;
    animation: ibox-spin 0.8s linear infinite;
}

@keyframes ibox-spin {
    to { transform: rotate(360deg); }
}

.topbar-logout {
    margin-left: 12px;
    background: transparent;
    border: 1px solid #64748b;
    color: #e2e8f0;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 13px;
    cursor: pointer;
}

.topbar-logout:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Delete IBOX button (trash icon inside card header) */
.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1;
    color: #64748b;
}
.btn-icon:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #dc2626;
}

/* Delete confirmation modal */
.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    min-width: 360px;
    max-width: 480px;
    z-index: 1001;
    padding: 0;
    /* Bootstrap's .modal-dialog sets pointer-events:none (it only re-enables
       clicks on .modal-content, which this modal doesn't use). Re-enable here
       so the header/body/footer buttons receive hover and clicks. */
    pointer-events: auto;
}
.modal-header {
    padding: 14px 18px 10px;
    border-bottom: 1px solid #e5e7eb;
}
.modal-title {
    font-weight: 600;
    font-size: 16px;
    color: #0b3a56;
}
.modal-body {
    padding: 16px 18px;
}
.modal-body p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #374151;
}
.modal-warning {
    color: #92400e !important;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 6px 10px !important;
    font-size: 13px !important;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #e5e7eb;
}

/* Danger button */
.btn-danger {
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 6px 16px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}
.btn-danger:hover {
    background: #b91c1c;
}