html {
    font-size: 15px;
    min-height: 100%;
}

body {
    background: #f5f6f4;
    color: #20252a;
    font-family: "Segoe UI", Arial, sans-serif;
    margin: 0;
}

a {
    color: #b2262d;
    text-decoration: none;
}

a:hover {
    color: #7f171d;
}

button,
.button-secondary,
.button-link,
.button-icon {
    background: #b2262d;
    border: 1px solid #b2262d;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    min-height: 34px;
    padding: 6px 12px;
}

.button-secondary,
.button-link:hover {
    background: #fff;
    color: #b2262d;
}

.button-link {
    color: #fff;
    display: inline-flex;
    align-items: center;
}

.button-icon {
    min-width: 54px;
    padding: 4px 8px;
}

input,
select,
textarea {
    border: 1px solid #cbd5df;
    border-radius: 6px;
    min-height: 34px;
    min-width: 0;
    padding: 5px 8px;
    width: 100%;
}

textarea {
    font-family: Consolas, "Courier New", monospace;
}

.app-layout {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns 180ms ease;
}

.brand {
    align-items: center;
    color: #20252a;
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
}

.brand img {
    flex: 0 1 auto;
    display: block;
    height: 32px;
    max-width: 104px;
    object-fit: contain;
}

.brand-title {
    border-left: 1px solid #d7d9dc;
    color: #505962;
    font-size: 0.82rem;
    line-height: 1;
    overflow: hidden;
    padding-left: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-nav {
    background: #ffffff;
    border-right: 1px solid #d9dcdf;
    box-shadow: 8px 0 24px rgba(32, 37, 42, 0.05);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 16px 14px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.side-nav-header,
.mobile-top-nav {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.side-nav nav {
    margin-top: 22px;
}

.nav-links {
    display: grid;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-nav {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
}

.user-nav form {
    margin: 0;
}

.nav-links a {
    align-items: center;
    border-radius: 7px;
    color: #444d56;
    display: grid;
    gap: 10px;
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 40px;
    padding: 7px 10px;
}

.nav-links a:hover {
    background: #f4ecec;
    color: #9f1d25;
}

.nav-icon {
    align-items: center;
    border: 1px solid #d2d6d9;
    border-radius: 7px;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    position: relative;
    width: 28px;
}

.nav-icon::before,
.nav-icon::after {
    content: "";
    display: block;
    position: absolute;
}

.nav-icon-dashboard::before {
    border: 2px solid #636d76;
    border-radius: 3px;
    height: 10px;
    width: 12px;
}

.nav-icon-dashboard::after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #636d76;
    top: 5px;
}

.nav-icon-oil::before {
    background: #636d76;
    border-radius: 50% 50% 50% 8px;
    height: 13px;
    transform: rotate(-45deg);
    width: 13px;
}

.nav-icon-warehouse::before,
.nav-icon-database::before {
    border: 2px solid #636d76;
    border-radius: 3px;
    height: 15px;
    width: 16px;
}

.nav-icon-warehouse::after {
    background: #636d76;
    box-shadow: 0 5px 0 #636d76;
    height: 2px;
    width: 16px;
}

.nav-icon-database::after {
    border: 2px solid #636d76;
    border-top: 0;
    border-radius: 0 0 50% 50%;
    height: 12px;
    top: 8px;
    width: 16px;
}

.nav-icon-hardware::before {
    border: 3px solid #636d76;
    border-radius: 50%;
    height: 13px;
    width: 13px;
}

.nav-icon-hardware::after {
    background: #636d76;
    box-shadow: 8px 0 0 #636d76, -8px 0 0 #636d76, 0 8px 0 #636d76, 0 -8px 0 #636d76;
    height: 4px;
    width: 4px;
}

.nav-icon-sensor::before {
    background: #636d76;
    border-radius: 999px;
    height: 14px;
    width: 5px;
}

.nav-icon-sensor::after {
    border: 2px solid #636d76;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    height: 12px;
    right: 6px;
    width: 7px;
}

.nav-icon-rules::before {
    border-bottom: 3px solid #636d76;
    border-left: 3px solid #636d76;
    height: 8px;
    transform: rotate(-45deg);
    width: 15px;
}

.nav-icon-allocation::before,
.nav-icon-users::before {
    border: 2px solid #636d76;
    border-radius: 50%;
    height: 8px;
    top: 5px;
    width: 8px;
}

.nav-icon-allocation::after,
.nav-icon-users::after {
    border: 2px solid #636d76;
    border-radius: 50% 50% 5px 5px;
    border-top: 0;
    height: 8px;
    top: 16px;
    width: 16px;
}

.user-name {
    color: #59636d;
    font-size: 0.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-toggle-input:checked ~ .app-layout {
    grid-template-columns: 76px minmax(0, 1fr);
}

.nav-toggle-input:checked ~ .app-layout .side-nav {
    padding-left: 10px;
    padding-right: 10px;
}

.nav-toggle-input:checked ~ .app-layout .brand-title,
.nav-toggle-input:checked ~ .app-layout .nav-label,
.nav-toggle-input:checked ~ .app-layout .user-name,
.nav-toggle-input:checked ~ .app-layout .user-nav button {
    display: none;
}

.nav-toggle-input:checked ~ .app-layout .brand img {
    height: 30px;
    max-width: 42px;
    object-fit: contain;
    object-position: left;
}

.nav-toggle-input:checked ~ .app-layout .side-nav-header,
.nav-toggle-input:checked ~ .app-layout .nav-links a {
    justify-content: center;
}

.nav-toggle-input:checked ~ .app-layout .nav-links a {
    grid-template-columns: 28px;
    padding-left: 8px;
    padding-right: 8px;
}

.app-shell {
    margin: 0;
    max-width: none;
    padding: 24px 20px 56px;
}

.app-footer {
    border-top: 1px solid #d8e0e8;
    color: #697887;
    padding: 14px 20px;
}

.app-footer > div {
    margin: 0;
}

.nav-toggle-input {
    display: none;
}

.burger-button {
    align-items: center;
    background: #fff;
    border: 1px solid #cbd5df;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex: 0 0 40px;
    flex-direction: column;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.burger-button span {
    background: #3a4148;
    display: block;
    height: 2px;
    margin: 3px 0;
    width: 18px;
}

.mobile-top-nav {
    background: #fff;
    border-bottom: 1px solid #d9dcdf;
    display: none;
    min-height: 56px;
    padding: 0 14px;
}

.page-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.page-heading h1 {
    font-size: 1.65rem;
    margin: 0 0 4px;
}

.page-heading p {
    color: #667789;
    margin: 0;
}

.summary-grid,
.dashboard-grid,
.two-column {
    display: grid;
    gap: 14px;
}

.summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

.dashboard-grid,
.two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.summary-tile,
.panel,
.rule-row {
    background: #fff;
    border: 1px solid #d9dcdf;
    border-radius: 8px;
}

.summary-tile {
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
}

.summary-value {
    font-size: 1.6rem;
    font-weight: 700;
}

.summary-label {
    color: #667789;
}

.panel {
    padding: 16px;
}

.panel-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.panel-heading h2 {
    font-size: 1.1rem;
    margin: 0;
}

.panel-subtitle {
    color: #667789;
    margin: 3px 0 0;
}

.compact-list,
.group-list,
.rule-list {
    display: grid;
    gap: 10px;
}

.compact-row,
.group-item {
    align-items: center;
    border-top: 1px solid #edf1f4;
    display: flex;
    justify-content: space-between;
    padding: 10px 0 0;
}

.process-device-row {
    align-items: center;
    border-top: 1px solid #edf1f4;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(180px, 1fr) auto;
    padding: 10px 0 0;
}

.process-device-row .job-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.process-machine-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sensor-grid-scroll {
    max-height: 520px;
    overflow: auto;
}

.sensor-monitor-table {
    min-width: 980px;
}

.sensor-monitor-table th {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

.sensor-monitor-table td,
.sensor-monitor-table th {
    white-space: nowrap;
}

.normalisation-history-scroll {
    max-height: 360px;
}

.process-machine-card {
    border: 1px solid #dce4ea;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 14px;
}

.process-machine-heading,
.process-job-heading {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.process-machine-heading h3,
.unassigned-processes h3 {
    font-size: 1rem;
    margin: 0;
}

.process-machine-meta {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.process-machine-meta div {
    background: #f7f9fb;
    border: 1px solid #e5ebf0;
    border-radius: 8px;
    padding: 8px;
}

.process-machine-meta dt {
    color: #667789;
    font-size: 0.75rem;
    margin: 0 0 2px;
}

.process-machine-meta dd {
    font-weight: 700;
    margin: 0;
}

.process-job-list {
    display: grid;
    gap: 10px;
}

.process-job-card {
    background: #fbfcfd;
    border: 1px solid #e5ebf0;
    border-radius: 8px;
    display: grid;
    gap: 5px;
    padding: 10px;
}

.process-job-card p {
    color: #43515f;
    margin: 0;
}

.inline-action-form {
    margin: 4px 0;
}

.process-job-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.process-detail-panel {
    border-top: 1px solid #edf1f4;
    margin-top: 4px;
    padding-top: 6px;
}

.process-detail-panel summary {
    color: #43515f;
    cursor: pointer;
    font-weight: 700;
    list-style-position: inside;
    min-height: 30px;
    padding: 4px 0;
}

.process-detail-panel summary:hover {
    color: #9f1d25;
}

.process-stage-list {
    display: grid;
    gap: 7px;
    margin-top: 6px;
}

.process-stage {
    align-items: flex-start;
    display: grid;
    gap: 8px;
    grid-template-columns: 14px 1fr;
}

.stage-marker {
    border: 2px solid #b8c4cf;
    border-radius: 999px;
    height: 12px;
    margin-top: 4px;
    width: 12px;
}

.process-stage strong,
.process-command-list strong {
    display: block;
    font-size: 0.86rem;
}

.process-stage span:not(.stage-marker),
.process-command-list span {
    color: #667789;
    display: block;
    font-size: 0.82rem;
}

.stage-current .stage-marker {
    background: #f4b400;
    border-color: #b88300;
}

.stage-done .stage-marker {
    background: #2d9b4c;
    border-color: #2d9b4c;
}

.stage-blocked .stage-marker {
    background: #c43f3f;
    border-color: #c43f3f;
}

.process-command-list {
    background: #fff;
    border: 1px solid #e5ebf0;
    border-radius: 8px;
    display: grid;
    gap: 7px;
    margin-top: 6px;
    padding: 8px;
}

.process-command-list em {
    color: #43515f;
    font-style: normal;
    font-weight: 700;
}

.process-live-panel {
    background: #fff;
    border: 1px solid #e5ebf0;
    border-radius: 8px;
    display: grid;
    gap: 8px;
    margin-top: 6px;
    padding: 8px;
}

.process-live-heading {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.process-live-heading span {
    color: #667789;
    font-size: 0.82rem;
}

.live-reading-metrics {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.live-reading-metrics div {
    background: #f7f9fb;
    border: 1px solid #e8eef3;
    border-radius: 7px;
    min-width: 0;
    padding: 7px;
}

.live-reading-metrics dt {
    color: #667789;
    font-size: 0.72rem;
}

.live-reading-metrics dd {
    font-weight: 700;
    margin: 0;
}

.reading-grid {
    border: 1px solid #edf1f4;
    border-radius: 7px;
    overflow: hidden;
}

.reading-row {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 5px 7px;
}

.reading-row:nth-child(odd) {
    background: #f8fafb;
}

.reading-row span {
    color: #526272;
    font-size: 0.78rem;
}

.process-command-summary {
    background: #f7f9fb;
    border: 1px solid #e8eef3;
    border-radius: 7px;
    padding: 7px 8px;
}

.process-command-row {
    align-items: flex-start;
    border-top: 1px solid #edf1f4;
    display: grid;
    gap: 8px;
    grid-template-columns: 10px minmax(0, 1fr);
    padding-top: 7px;
}

.process-command-row:first-of-type {
    border-top: 0;
}

.command-state-dot {
    background: #b8c4cf;
    border-radius: 999px;
    height: 9px;
    margin-top: 5px;
    width: 9px;
}

.command-pending .command-state-dot {
    background: #f4b400;
}

.command-running .command-state-dot {
    background: #2e78c7;
}

.command-succeeded .command-state-dot {
    background: #2d9b4c;
}

.command-failed .command-state-dot,
.command-cancelled .command-state-dot {
    background: #c43f3f;
}

.compact-empty {
    margin: 0;
}

.unassigned-processes {
    border-top: 1px solid #edf1f4;
    margin-top: 16px;
    padding-top: 16px;
}

.table-subtext {
    color: #667789;
    display: block;
    margin-top: 2px;
}

.profile-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rule-row {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.4fr);
    padding: 16px;
}

.rule-title {
    align-items: flex-start;
    display: flex;
    gap: 10px;
}

.rule-title h2,
.group-item h3 {
    font-size: 1rem;
    margin: 0 0 3px;
}

.rule-title p,
.group-item p {
    color: #667789;
    margin: 0;
}

.rule-meta {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 14px 0 0;
}

.rule-meta dt {
    color: #667789;
    font-size: 0.78rem;
    margin: 0;
}

.rule-meta dd {
    margin: 0;
}

.rule-controls {
    display: grid;
    gap: 12px;
}

.parameter-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.parameter-form label,
.toolbar-form label,
.group-form label {
    color: #526272;
    display: block;
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.input-row,
.toolbar-form,
.inline-form {
    align-items: center;
    display: flex;
    gap: 8px;
}

.job-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.job-actions form {
    margin: 0;
}

.input-row input {
    min-width: 0;
    width: 100%;
}

.toolbar-form {
    margin-bottom: 14px;
}

.group-form {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 120px 120px auto;
    margin-bottom: 16px;
}

.form-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.intake-form label {
    color: #526272;
    display: grid;
    gap: 5px;
    font-size: 0.88rem;
}

.wide-field {
    margin-top: 12px;
}

textarea {
    border: 1px solid #cbd5df;
    border-radius: 6px;
    padding: 8px;
    resize: vertical;
}

.checkbox-row {
    align-items: center;
    display: flex !important;
    flex-direction: row;
    gap: 8px !important;
    margin-top: 14px;
}

.checkbox-row input {
    min-height: auto;
}

.form-actions {
    margin-top: 16px;
}

.notice-success {
    background: #dff3e4;
    border: 1px solid #b8dfc1;
    border-radius: 8px;
    color: #236a36;
    margin-bottom: 14px;
    padding: 12px 14px;
}

.notice-error {
    background: #f8d7da;
    border: 1px solid #efb5bc;
    border-radius: 8px;
    color: #842029;
    margin-bottom: 14px;
    padding: 12px 14px;
}

.login-shell {
    display: grid;
    min-height: 55vh;
    place-items: center;
}

.login-panel {
    background: #fff;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    max-width: 380px;
    padding: 24px;
    width: 100%;
}

.login-panel h1 {
    font-size: 1.35rem;
    margin: 0;
}

.login-panel label,
.user-form label {
    color: #526272;
    display: grid;
    gap: 5px;
    font-size: 0.88rem;
}

.instruction-list {
    display: grid;
    gap: 10px;
}

.station-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hardware-list {
    display: grid;
    gap: 14px;
}

.station-config-form,
.assignment-form,
.command-form,
.user-form {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
    margin-bottom: 16px;
}

.assignment-form {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.command-form {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 16px;
}

.station-config-form label,
.assignment-form label,
.command-form label {
    color: #526272;
    display: grid;
    gap: 5px;
    font-size: 0.82rem;
}

.assignment-form button,
.command-form button {
    align-self: end;
}

.console-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
    margin-bottom: 16px;
}

.console-layout-wide {
    grid-template-columns: minmax(360px, 0.75fr) minmax(460px, 1.25fr);
}

.console-target-form {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.console-target-form label,
.set-node-form label {
    color: #526272;
    display: grid;
    gap: 5px;
    font-size: 0.86rem;
}

.node-warning {
    background: #fff0cc;
    border: 1px solid #ead28b;
    border-radius: 8px;
    color: #6d5200;
    display: grid;
    gap: 2px;
    margin-top: 14px;
    padding: 10px 12px;
}

.command-wait-panel {
    align-items: center;
    background: #fff;
    border: 1px solid #d9dcdf;
    border-left: 5px solid #b2262d;
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1fr) auto;
    margin-bottom: 16px;
    padding: 14px 16px;
}

.command-wait-panel div {
    display: grid;
    gap: 2px;
}

.command-wait-panel div span,
.command-wait-panel p {
    color: #526272;
}

.command-wait-panel p,
.command-wait-panel pre {
    grid-column: 1 / -1;
    margin: 0;
}

.command-wait-panel pre {
    background: #f4f6f8;
    border-radius: 6px;
    color: #20252a;
    overflow-x: auto;
    padding: 10px;
    white-space: pre-wrap;
}

.command-wait-panel.status-pending,
.command-wait-panel.status-running {
    border-left-color: #b88a13;
}

.command-wait-panel.status-succeeded {
    border-left-color: #2d9b4c;
}

.command-wait-panel.status-failed,
.command-wait-panel.status-cancelled {
    border-left-color: #b3262f;
}

.console-command-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.console-command-grid form {
    margin: 0;
}

.console-command-grid button {
    width: 100%;
}

.set-node-form {
    align-items: end;
    border-top: 1px solid #edf1f4;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(150px, 220px) auto;
    margin-top: 16px;
    padding-top: 14px;
}

.qse-console {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.console-section {
    background: #fff;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    overflow: hidden;
}

.console-section summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    list-style: none;
    padding: 14px 16px;
}

.console-section summary::-webkit-details-marker {
    display: none;
}

.console-section summary span {
    font-size: 1.03rem;
    font-weight: 700;
}

.console-section summary small {
    color: #667789;
    font-size: 0.82rem;
    font-weight: 400;
    text-align: right;
}

.console-section summary::after {
    color: #667789;
    content: "+";
    font-size: 1.2rem;
    font-weight: 700;
}

.console-section[open] summary {
    border-bottom: 1px solid #edf1f4;
}

.console-section[open] summary::after {
    content: "-";
}

.section-actions {
    align-items: center;
    border-bottom: 1px solid #edf1f4;
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    padding: 10px 14px;
}

.section-actions button {
    min-width: 116px;
}

.section-command-status {
    color: #526272;
    font-size: 0.84rem;
}

.qse-action-grid,
.advanced-command-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding: 14px;
}

.qse-action-card,
.advanced-command-form {
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 12px;
}

.qse-action-card span,
.qse-action-card label,
.advanced-command-form label {
    color: #526272;
    display: grid;
    gap: 5px;
    font-size: 0.84rem;
}

.qse-action-card button,
.advanced-command-form button {
    justify-self: start;
    margin-top: 4px;
}

.qse-command-list {
    display: grid;
    gap: 0;
    padding: 8px 14px 14px;
}

.qse-command-row {
    align-items: end;
    border-bottom: 1px solid #edf1f4;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1fr) 80px 80px;
    padding: 10px 0;
}

.qse-command-row:last-child {
    border-bottom: 0;
}

.qse-command-row label {
    color: #526272;
    display: grid;
    gap: 5px;
    font-size: 0.84rem;
}

.qse-command-row button {
    min-width: 0;
    width: 100%;
}

.inline-command-status {
    align-self: center;
    color: #526272;
    font-size: 0.82rem;
    grid-column: 1 / -1;
}

.inline-command-error {
    color: #842029;
    font-weight: 600;
}

.advanced-command-form {
    align-content: start;
}

.advanced-command-form .wide-field {
    margin-top: 0;
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
}

.sensor-tile-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.sensor-tile {
    border: 1px solid #d9dcdf;
    border-radius: 8px;
    color: #20252a;
    display: grid;
    gap: 5px;
    padding: 12px;
}

.sensor-tile:hover {
    background: #f4ecec;
}

.sensor-tile:focus-visible {
    outline: 3px solid rgba(178, 38, 45, 0.28);
    outline-offset: 2px;
}

.sensor-tile span:not(.status-pill) {
    color: #667789;
}

.panel-hint {
    color: #667789;
    font-size: 0.9rem;
    margin: 0 0 12px;
}

.station-config-form input:disabled {
    background: #eef1f4;
    color: #586879;
}

.station-card {
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 12px;
}

.station-card-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.station-card-header div {
    display: grid;
    gap: 2px;
}

.station-card-header span,
.station-meta {
    color: #667789;
}

.station-description {
    color: #526272;
    margin: 0;
}

.hardware-warning {
    color: #8a4518;
    font-weight: 600;
}

.observed-panel {
    border-top: 1px solid #edf1f4;
    margin-top: 16px;
    padding-top: 14px;
}

.observed-panel h3 {
    font-size: 1rem;
    margin: 0 0 8px;
}

.empty-state {
    color: #667789;
    margin: 0;
}

.station-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.instruction-item {
    border: 1px solid #d9dcdf;
    border-left: 5px solid #b2262d;
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 12px;
}

.instruction-item span {
    color: #526272;
}

.instruction-reassignduplicatenode,
.instruction-reviewfailedprofile {
    border-left-color: #b84a19;
}

.instruction-runnormalisationinair {
    border-left-color: #7a5a00;
}

.instruction-readytorun {
    border-left-color: #2d9b4c;
}

.data-table {
    border-collapse: collapse;
    table-layout: auto;
    width: 100%;
}

.data-table th,
.data-table td {
    border-top: 1px solid #edf1f4;
    padding: 9px 8px;
    text-align: left;
    vertical-align: middle;
    word-break: break-word;
}

.data-table th {
    color: #667789;
    font-size: 0.82rem;
    font-weight: 600;
}

.compact-table th,
.compact-table td {
    padding: 7px 6px;
}

.status-dot {
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: 10px;
    margin-top: 6px;
    width: 10px;
}

.status-on,
.status-active,
.status-online {
    background: #dff3e4;
    color: #236a36;
}

.status-off,
.status-inactive,
.status-offline,
.status-disabled {
    background: #eef1f4;
    color: #586879;
}

.status-dot.status-on {
    background: #2d9b4c;
}

.status-dot.status-off {
    background: #9aa8b5;
}

.status-pill {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 8px;
}

.status-available {
    background: #dff3e4;
    color: #236a36;
}

.status-assigned,
.status-inuse {
    background: #e6f0f7;
    color: #255c7a;
}

.status-cleaning {
    background: #fff0cc;
    color: #7a5a00;
}

.status-needsrenormalisation,
.status-suspect {
    background: #fde5d2;
    color: #8a4518;
}

.status-damaged,
.status-outofservice {
    background: #f8d7da;
    color: #842029;
}

.status-pending,
.status-queued,
.status-preparingsensor,
.status-waitingforsensor,
.status-readyforrun,
.status-waitingforsensor,
.status-assigning,
.status-pendingassignment,
.status-awaitingsensors,
.status-readytorun,
.status-processing,
.status-needsreview,
.status-retryrequested {
    background: #fff0cc;
    color: #7a5a00;
}

.status-assigned,
.status-running,
.status-processing,
.status-succeeded,
.status-passed {
    background: #e1f2dc;
    color: #2e6930;
}

.status-failed,
.status-cancelled {
    background: #f8d7da;
    color: #842029;
}

.operational-checks,
.audit-list {
    display: grid;
    gap: 8px;
}

.operational-check,
.audit-row {
    align-items: flex-start;
    background: #f6f8fa;
    border: 1px solid #d8e0e7;
    border-radius: 8px;
    display: grid;
    gap: 6px;
    padding: 10px 12px;
}

.operational-check {
    grid-template-columns: 82px minmax(0, 1fr);
}

.audit-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.audit-row > div {
    display: grid;
    gap: 4px;
}

.operational-check-info {
    background: #e6f0f7;
    border-color: #bdd7ea;
}

.operational-check-warning {
    background: #fff0cc;
    border-color: #f0cc6a;
}

.operational-check-blocking {
    background: #f8d7da;
    border-color: #efb6bd;
}

.profile-chart {
    background: #ffffff;
    border: 1px solid #d8e0e7;
    border-radius: 8px;
    display: block;
    height: auto;
    max-width: 100%;
}

.stage-legend {
    color: #5e6d7a;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 900px) {
    .summary-grid,
    .dashboard-grid,
    .two-column,
    .station-grid,
    .rule-row,
    .parameter-grid,
    .group-form,
    .station-config-form,
    .assignment-form,
    .command-form,
    .console-layout,
    .console-target-form,
    .set-node-form,
    .qse-command-row,
    .process-device-row,
    .advanced-command-grid,
    .user-form,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .process-device-row .job-actions {
        justify-content: flex-start;
    }

    .console-section summary {
        align-items: flex-start;
    }

    .console-section summary small {
        text-align: left;
    }

    .app-layout {
        grid-template-columns: 1fr;
    }

    .nav-toggle-input:checked ~ .app-layout {
        grid-template-columns: 1fr;
    }

    .burger-button,
    .mobile-top-nav {
        display: flex;
    }

    .side-nav {
        box-shadow: 0 10px 30px rgba(24, 34, 47, 0.18);
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        transform: translateX(-100%);
        transition: transform 160ms ease;
        width: 248px;
        z-index: 20;
    }

    .nav-toggle-input:checked ~ .app-layout .side-nav {
        padding: 16px 12px;
    }

    .nav-toggle-input:checked ~ .app-layout .brand-title,
    .nav-toggle-input:checked ~ .app-layout .nav-label,
    .nav-toggle-input:checked ~ .app-layout .user-name,
    .nav-toggle-input:checked ~ .app-layout .user-nav button {
        display: inline;
    }

    .nav-toggle-input:checked ~ .app-layout .brand img {
        height: 32px;
        max-width: 104px;
    }

    .nav-toggle-input:checked ~ .app-layout .nav-links a {
        grid-template-columns: 28px minmax(0, 1fr);
        justify-content: stretch;
        padding: 7px 10px;
    }

    .nav-toggle-input:checked ~ .app-layout .side-nav {
        transform: translateX(0);
    }

    .app-shell {
        padding-top: 18px;
    }
}