html,
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333333;
    background: #ffffff;
    font-size: 14px;
}

h1:focus {
    outline: none;
}

a {
    color: #2aa9b3;
}

.btn {
    border-radius: 4px;
}

.btn-primary {
    color: #ffffff;
    background-color: #2aa9b3;
    border-color: #2499a2;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #168c96;
    border-color: #168c96;
}

.btn-outline-secondary {
    color: #555555;
    border-color: #cccccc;
    background: #ffffff;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: #333333;
    background: #eeeeee;
    border-color: #adadad;
}

.form-control,
.form-select {
    border-radius: 4px;
    border-color: #cccccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
}

.btn:focus,
.form-control:focus,
.form-check-input:focus {
    border-color: #66afe9;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding-bottom: 9px;
    border-bottom: 1px solid #111111;
}

.page-heading h1 {
    margin: 0;
    color: #333333;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
}

.page-heading p,
.work-panel p {
    margin: 6px 0 0;
    color: #777777;
}

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

.login-hero {
    min-height: calc(100vh - 123px);
    background: #e8f4f8;
    border-top: 1px solid #d9edf3;
}

.login-hero-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 46px 15px 55px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 58px;
    align-items: center;
}

.login-copy h1 {
    margin: 0 0 12px;
    color: #2aa9b3;
    font-size: 40px;
    font-weight: 300;
}

.login-copy p {
    margin: 0 0 28px;
    color: #777777;
    font-size: 15px;
    letter-spacing: 0;
}

.login-copy img {
    max-width: 560px;
    width: 100%;
    height: auto;
    display: block;
}

.auth-panel {
    padding: 24px;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.auth-panel h2 {
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
    font-size: 24px;
    font-weight: 400;
}

.public-home {
    min-height: 100vh;
    background: #ffffff;
    color: #333333;
}

.public-home-nav {
    min-height: 76px;
    padding: 0 48px;
    border-bottom: 1px solid #e5e5e5;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.public-home-logo img {
    width: 150px;
    height: auto;
    display: block;
}

.public-home-nav nav {
    display: flex;
    align-items: center;
    gap: 24px;
    text-transform: uppercase;
    font-size: 13px;
}

.public-home-nav a {
    color: #111111;
    text-decoration: none;
}

.public-home-nav a:hover {
    color: #20aab4;
}

.public-home-hero {
    min-height: 520px;
    padding: 56px 70px 0;
    background: #e8f4f8;
    overflow: hidden;
}

.public-home-hero p {
    margin: 0 0 12px;
    color: #5f6970;
    text-transform: uppercase;
}

.public-home-hero h1 {
    margin: 0;
    color: #202833;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}

.public-home-hero h1 span,
.public-home-section h2,
.public-home-products h2,
.public-home-contact h2 {
    color: #20aab4;
}

.public-home-hero img {
    width: min(100%, 980px);
    margin: 32px auto 0;
    display: block;
}

.public-home-section,
.public-home-products,
.public-home-contact {
    max-width: 1120px;
    margin: 0 auto;
    padding: 54px 32px;
    text-align: center;
}

.public-home-kicker {
    margin: 0 0 8px;
    color: #777777;
    text-transform: uppercase;
}

.public-home-features {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
}

.public-home-features article {
    text-align: center;
}

.public-home-features img {
    height: 74px;
    margin-bottom: 16px;
}

.public-home-features h3 {
    margin: 0 0 10px;
    text-transform: uppercase;
}

.public-home-band {
    min-height: 170px;
    padding: 58px 32px;
    background: #111111 url("/img/advertise_banner.jpg") center/cover no-repeat;
    color: #ffffff;
    text-align: center;
}

.public-home-band h2 {
    max-width: 820px;
    margin: 0 auto;
    text-transform: uppercase;
}

.public-home-products {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: center;
    gap: 36px;
    text-align: left;
}

.public-home-products img {
    max-width: 100%;
    justify-self: center;
}

.public-home-contact {
    background: #eef4f9;
    max-width: none;
}

.public-home-footer {
    min-height: 110px;
    padding: 28px 48px;
    background: #000000;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.public-home-footer img {
    width: 155px;
}

.locker-dashboard {
    display: grid;
    grid-template-columns: 185px minmax(0, 1fr);
    gap: 20px;
}

.locker-filter {
    padding-top: 8px;
}

.locker-filter label {
    display: block;
    margin-bottom: 7px;
    color: #555555;
    font-weight: 700;
}

.cabinet-type-strip {
    min-height: 88px;
    margin-bottom: 18px;
    padding: 12px 15px;
    border: 1px solid #e5e5e5;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
}

.cabinet-type-strip img {
    max-width: 84px;
    max-height: 64px;
    object-fit: contain;
    display: block;
}

.locker-grid {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.locker-card {
    min-height: 318px;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    background: #f7f9fb;
    color: #333333;
    text-decoration: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.locker-card:hover {
    border-color: #2aa9b3;
    color: #333333;
    text-decoration: none;
}

.locker-card-image {
    min-height: 172px;
    padding: 16px 12px 10px;
    background: #dde8ee;
    display: grid;
    place-items: center;
}

.locker-card-image img {
    max-width: 100%;
    max-height: 145px;
    object-fit: contain;
}

.locker-card-body {
    padding: 14px 15px 16px;
    background: #ffffff;
    flex: 1;
}

.locker-card h2 {
    margin: 0 0 9px;
    color: #2aa9b3;
    font-size: 18px;
    font-weight: 500;
}

.locker-card dl {
    margin: 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    row-gap: 4px;
    color: #666666;
    font-size: 13px;
}

.locker-card dt {
    color: #555555;
    font-weight: 700;
}

.locker-card dd {
    margin: 0;
}

.occupancy {
    margin-top: 12px;
    color: #777777;
    font-size: 12px;
}

.occupancy-track {
    height: 9px;
    margin-top: 5px;
    border-radius: 10px;
    background: #eeeeee;
    overflow: hidden;
}

.occupancy-track div {
    height: 100%;
    border-radius: 10px;
    background: #2aa9b3;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.metric-tile,
.work-panel,
.toolbar-panel,
.data-panel {
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #ffffff;
}

.metric-tile {
    min-height: 118px;
    padding: 16px;
    color: #333333;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
}

.metric-tile:hover {
    border-color: #2aa9b3;
}

.metric-label,
.muted-line {
    color: #777777;
    font-size: 12px;
}

.muted-line {
    display: block;
}

.work-panel,
.toolbar-panel {
    margin-bottom: 18px;
    padding: 15px;
}

.work-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.work-panel h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 400;
}

.toolbar-panel {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.search-group {
    flex: 1;
}

.search-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

.split-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 18px;
    margin-bottom: 18px;
}

.data-panel {
    margin-bottom: 18px;
}

.panel-heading {
    min-height: 48px;
    padding: 10px 15px;
    border-bottom: 1px solid #dddddd;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.panel-heading h2 {
    margin: 0;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
}

.panel-heading span {
    color: #777777;
    font-size: 12px;
    text-transform: uppercase;
}

.table-responsive {
    padding: 0 15px 15px;
}

.data-table {
    margin: 15px 0 0;
    border: 1px solid #dddddd;
    color: #333333;
    font-size: 13px;
}

.data-table > thead > tr > th {
    border-bottom: 2px solid #dddddd;
    color: #333333;
    background: #ffffff;
    font-weight: 700;
}

.data-table > tbody > tr:nth-child(odd) > td {
    background: #f9f9f9;
}

.data-table > tbody > tr > td,
.data-table > thead > tr > th {
    border-top: 1px solid #dddddd;
    vertical-align: middle;
}

.action-cell .btn,
.compact-row .btn {
    padding: 3px 8px;
    font-size: 12px;
}

.action-cell .btn-outline-secondary {
    color: #ffffff;
    border-color: #2aa9b3;
    background: #2aa9b3;
}

.action-cell .btn-outline-danger {
    color: #ffffff;
    border-color: #d9534f;
    background: #d9534f;
}

.link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #2aa9b3;
    text-align: left;
}

.status-pill {
    padding: 3px 7px;
    border-radius: 10px;
    color: #ffffff;
    background: #999999;
    font-size: 11px;
    white-space: nowrap;
}

.status-pill.active {
    background: #5cb85c;
}

.status-pill.inactive {
    background: #777777;
}

.empty-state {
    padding: 22px 15px;
    color: #777777;
}

.form-grid {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.span-2 {
    grid-column: span 2;
}

.form-actions {
    padding: 0 15px 15px;
    display: flex;
    gap: 8px;
}

.compact-list {
    padding: 15px;
}

.compact-row {
    padding: 8px 0;
    border-bottom: 1px solid #eeeeee;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

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

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

.validation-message {
    color: #b42318;
}

.test-heading .heading-actions .btn {
    padding: 5px 10px;
    font-size: 12px;
}

.test-toolbar {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #f7f9fb;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto auto;
    gap: 10px;
    align-items: end;
}

.test-toolbar label {
    display: block;
    margin-bottom: 5px;
    color: #555555;
    font-weight: 700;
}

.test-shell,
.test-board-shell {
    margin-bottom: 22px;
}

.test-rail-shell {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.test-record-rail,
.test-detail-stage,
.test-tab-workspace,
.test-board-main,
.test-full-accordion,
.test-board-list {
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #ffffff;
}

.test-record-rail {
    position: sticky;
    top: 86px;
    max-height: calc(100vh - 110px);
    overflow: auto;
}

.test-rail-head {
    padding: 12px;
    border-bottom: 1px solid #dddddd;
    background: #f5f5f5;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.test-rail-row,
.test-selector-bar button,
.test-board-card {
    border: 0;
    background: #ffffff;
    text-align: left;
}

.test-rail-row {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border-bottom: 1px solid #eeeeee;
    color: #333333;
}

.test-rail-row span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.test-rail-row:hover,
.test-selector-bar button:hover,
.test-board-card:hover {
    background: #eef8fa;
}

.test-rail-row.is-selected,
.test-selector-bar button.is-selected,
.test-board-card.is-selected {
    background: #dff4f7;
    box-shadow: inset 3px 0 0 #2aa9b3;
}

.test-detail-stage,
.test-tab-workspace,
.test-board-main {
    min-height: 620px;
}

.test-selected-summary {
    padding: 16px;
    border-bottom: 1px solid #dddddd;
    background: #ffffff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.test-selected-summary h2 {
    margin: 0;
    color: #333333;
    font-size: 22px;
    font-weight: 400;
}

.test-selected-summary p,
.test-muted {
    margin: 5px 0 0;
    color: #777777;
}

.test-selected-summary dl,
.test-kv-grid {
    margin: 0;
    display: grid;
    gap: 8px;
}

.test-selected-summary dl {
    grid-template-columns: repeat(4, minmax(70px, auto));
}

.test-selected-summary dt,
.test-kv-grid dt {
    color: #777777;
    font-size: 11px;
    text-transform: uppercase;
}

.test-selected-summary dd,
.test-kv-grid dd {
    margin: 0;
    color: #333333;
    font-weight: 700;
}

.test-accordion-stack {
    padding: 12px;
}

.test-detail-accordion {
    margin-bottom: 9px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    overflow: hidden;
}

.test-detail-accordion > button,
.test-accordion-record-head {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid #dddddd;
    background: #f5f5f5;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.test-detail-accordion-body,
.test-accordion-record-body {
    padding: 14px;
}

.test-full-accordion {
    padding: 12px;
}

.test-accordion-record {
    margin-bottom: 10px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    overflow: hidden;
}

.test-accordion-record.is-open {
    border-color: #2aa9b3;
}

.test-accordion-record-head small {
    color: #777777;
    flex: 1;
    text-align: left;
}

.test-tabs-shell {
    display: grid;
    gap: 14px;
}

.test-selector-bar {
    padding: 10px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #ffffff;
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.test-selector-bar button {
    min-width: 160px;
    padding: 8px 10px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    white-space: nowrap;
}

.test-tab-strip {
    padding: 10px 12px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.test-tab-strip button {
    padding: 7px 12px;
    border: 1px solid #cccccc;
    border-radius: 4px 4px 0 0;
    background: #f7f7f7;
}

.test-tab-strip button.is-active {
    border-color: #2aa9b3;
    background: #ffffff;
    color: #168c96;
    font-weight: 700;
}

.test-info-panel {
    padding: 14px;
}

.test-info-panel h3 {
    margin: 0 0 12px;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
}

.test-kv-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.test-compartment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
}

.test-compartment-grid button {
    min-height: 66px;
    padding: 8px;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    background: #f7f9fb;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.test-compartment-grid span {
    color: #777777;
    font-size: 11px;
}

.test-metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.test-metric-row div {
    min-height: 86px;
    padding: 14px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #f7f9fb;
}

.test-metric-row strong {
    display: block;
    color: #2aa9b3;
    font-size: 26px;
    font-weight: 500;
}

.test-metric-row span {
    color: #777777;
}

.test-event-feed {
    display: grid;
    gap: 8px;
}

.test-event-feed article {
    padding: 10px;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    background: #ffffff;
}

.test-event-feed span {
    margin-left: 8px;
    color: #777777;
    font-size: 12px;
}

.test-event-feed p {
    margin: 5px 0 0;
}

.test-board-shell {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 14px;
}

.test-board-list {
    padding: 10px;
    display: grid;
    gap: 8px;
    align-content: start;
}

.test-board-card {
    min-height: 82px;
    padding: 12px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.test-board-card span,
.test-board-card small {
    color: #777777;
}

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

.test-dependent-grid > section {
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #ffffff;
}

.test5-shell {
    min-height: 720px;
    margin-bottom: 22px;
    border: 1px solid #dfe5e8;
    border-radius: 6px;
    background: #f8fafc;
    overflow: hidden;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
}

.test5-master {
    border-right: 1px solid #dfe5e8;
    background: #eef2f4;
    display: flex;
    flex-direction: column;
}

.test5-master-head {
    padding: 18px 16px 12px;
    display: grid;
    gap: 3px;
}

.test5-master-head span,
.test5-spec-grid dt {
    color: #53616b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.test5-master-head strong {
    color: #243036;
    font-size: 13px;
    text-transform: uppercase;
}

.test5-search {
    padding: 0 14px 14px;
}

.test5-search .form-control {
    border-color: #d4dde2;
    background: #ffffff;
    box-shadow: none;
}

.test5-master-list {
    flex: 1;
    overflow: auto;
}

.test5-master-list button {
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: #4b5962;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.test5-master-list button:hover {
    background: #e6edef;
}

.test5-master-list button.is-selected {
    border-left-color: #00796b;
    background: #e4f3f1;
    color: #00796b;
    font-weight: 700;
}

.test5-register {
    margin: 14px;
    min-height: 38px;
    border: 0;
    border-radius: 2px;
    background: #00796b;
    color: #ffffff;
    font-weight: 700;
}

.test5-workspace {
    background: #f8fafc;
}

.test5-empty {
    padding: 32px;
    color: #53616b;
}

.test5-titlebar {
    padding: 24px 28px 18px;
    border-bottom: 1px solid #dfe5e8;
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.test5-titlebar h2 {
    margin: 0;
    color: #172126;
    font-size: 26px;
    font-weight: 700;
}

.test5-titlebar p {
    margin: 5px 0 0;
    color: #53616b;
    font-family: Consolas, "Courier New", monospace;
}

.test5-status {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #d8eee8;
    color: #00796b;
    font-size: 12px;
    vertical-align: middle;
}

.test5-actions {
    display: flex;
    gap: 9px;
}

.test5-actions button,
.test5-panel header button,
.test5-table button {
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid #d4dde2;
    border-radius: 2px;
    background: #ffffff;
    color: #243036;
    font-weight: 700;
}

.test5-actions .danger {
    border-color: #c81e2a;
    background: #c81e2a;
    color: #ffffff;
}

.test5-tabs {
    min-height: 48px;
    padding: 0 28px;
    border-bottom: 1px solid #dfe5e8;
    background: #ffffff;
    display: flex;
    align-items: flex-end;
    gap: 28px;
}

.test5-tabs button {
    height: 48px;
    padding: 0;
    border: 0;
    border-bottom: 4px solid transparent;
    background: transparent;
    color: #53616b;
    font-weight: 700;
}

.test5-tabs button.is-active {
    border-bottom-color: #00796b;
    color: #00796b;
}

.test5-editor {
    padding: 18px 24px;
    border-bottom: 1px solid #dfe5e8;
    background: #f8fafc;
}

.test5-editor form {
    border: 1px solid #d9e1e5;
    border-radius: 4px;
    background: #ffffff;
    overflow: hidden;
}

.test5-editor-head {
    min-height: 54px;
    padding: 12px 16px;
    border-bottom: 1px solid #d9e1e5;
    background: #f3f6f8;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.test5-editor-head strong,
.test5-editor-head span {
    display: block;
}

.test5-editor-head strong {
    color: #243036;
    font-size: 15px;
}

.test5-editor-head span {
    margin-top: 3px;
    color: #53616b;
    font-size: 12px;
}

.test5-switch {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #243036;
    font-weight: 700;
}

.test5-form-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.test5-form-grid label {
    display: block;
    margin-bottom: 5px;
    color: #53616b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.test5-editor-actions {
    padding: 0 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.test5-editor-actions button {
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid #d4dde2;
    border-radius: 2px;
    background: #ffffff;
    color: #243036;
    font-weight: 700;
}

.test5-editor-actions button[type="submit"] {
    border-color: #00796b;
    background: #00796b;
    color: #ffffff;
}

.test5-content {
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
}

.test5-content.is-compartments,
.test5-content.is-events-sync,
.test5-content.is-maintenance {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.test5-main,
.test5-side {
    display: grid;
    gap: 18px;
}

.test5-main-wide {
    min-width: 0;
}

.test5-panel {
    border: 1px solid #d9e1e5;
    border-radius: 4px;
    background: #ffffff;
    overflow: hidden;
}

.test5-panel header {
    min-height: 45px;
    padding: 0 15px;
    border-bottom: 1px solid #d9e1e5;
    background: #f3f6f8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.test5-panel h3 {
    margin: 0;
    color: #243036;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.test5-spec-grid {
    margin: 0;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 34px;
}

.test5-spec-grid div {
    min-height: 48px;
    border-bottom: 1px solid #e8edf0;
}

.test5-spec-grid dd {
    margin: 6px 0 0;
    color: #243036;
    font-weight: 700;
}

.test5-tags {
    display: flex;
    gap: 8px;
}

.test5-tags span {
    padding: 4px 8px;
    border-radius: 3px;
    background: #e8edf0;
    color: #53616b;
    font-size: 12px;
}

.test5-tags .warn {
    background: #f8dadd;
    color: #c81e2a;
}

.test5-table {
    width: 100%;
    border-collapse: collapse;
}

.test5-table th,
.test5-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e3e9ec;
    color: #243036;
    text-align: left;
}

.test5-table th {
    color: #53616b;
    font-size: 11px;
    text-transform: uppercase;
}

.test5-table tr.is-selected td {
    background: #e4f3f1;
    box-shadow: inset 3px 0 0 #00796b;
}

.test5-dot {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #00796b;
    display: inline-block;
    vertical-align: middle;
}

.test5-link-action {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-top: 1px solid #e3e9ec;
    background: #f3f6f8;
    color: #00796b;
    font-weight: 800;
}

.test5-grid-map {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.test5-grid-map.large {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
}

.test5-grid-map button {
    aspect-ratio: 1;
    border: 1px solid #ffffff;
    border-radius: 2px;
    color: #243036;
    font-size: 12px;
    font-weight: 700;
}

.test5-grid-map button.is-selected {
    border-color: #00796b;
    box-shadow: 0 0 0 2px #00796b;
}

.test5-grid-map .available,
.test5-legend .available {
    background: #bdd7d5;
}

.test5-grid-map .occupied,
.test5-legend .occupied {
    background: #c9aaa0;
}

.test5-grid-map .maintenance,
.test5-legend .maintenance {
    background: #dd999e;
}

.test5-legend {
    padding: 0 16px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.test5-legend span {
    color: #53616b;
    font-size: 11px;
}

.test5-legend i {
    width: 11px;
    height: 11px;
    margin-right: 5px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: -1px;
}

.test5-events {
    padding: 16px;
    display: grid;
    gap: 12px;
}

.test5-events article {
    padding-left: 12px;
    border-left: 3px solid #00796b;
}

.test5-events strong {
    display: block;
    color: #243036;
}

.test5-events span {
    color: #53616b;
    font-size: 12px;
}

.test5-events p {
    margin: 4px 0 0;
    color: #243036;
}

.test5-sync-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.test5-sync-grid div {
    min-height: 88px;
    padding: 14px;
    border: 1px solid #e3e9ec;
    border-radius: 4px;
    background: #f8fafc;
}

.test5-sync-grid strong {
    display: block;
    color: #00796b;
    font-size: 24px;
}

.test5-sync-grid span {
    color: #53616b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.test5-flow {
    margin: 0;
    padding: 16px 16px 16px 34px;
    display: grid;
    gap: 14px;
}

.test5-flow li::marker {
    color: #00796b;
    font-weight: 800;
}

.test5-flow strong,
.test5-flow span {
    display: block;
}

.test5-flow strong {
    color: #243036;
}

.test5-flow span {
    margin-top: 3px;
    color: #53616b;
    font-size: 12px;
}

.test5-maintenance-list {
    padding: 16px;
    display: grid;
    gap: 12px;
}

.test5-maintenance-list article {
    padding: 12px;
    border: 1px solid #e3e9ec;
    border-radius: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
}

.test5-maintenance-list strong {
    color: #243036;
}

.test5-maintenance-list span {
    color: #53616b;
    font-size: 12px;
}

.test5-maintenance-list button {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 30px;
    border: 1px solid #d4dde2;
    border-radius: 2px;
    background: #ffffff;
    color: #243036;
    font-weight: 700;
}

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

.test5-control-grid.compact {
    padding-top: 0;
}

.test5-control-grid button {
    min-height: 36px;
    border: 1px solid #d4dde2;
    border-radius: 2px;
    background: #ffffff;
    color: #243036;
    font-weight: 700;
}

.test5-selected-division .test5-spec-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.test5-selected-division .test5-spec-grid div {
    min-height: 42px;
}

#blazor-error-ui {
    color-scheme: light only;
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #dbe2ea;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #2aa9b3;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 700;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

@media (max-width: 1100px) {
    .locker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .login-hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 30px;
    }

    .login-copy h1 {
        font-size: 30px;
    }

    .locker-dashboard {
        grid-template-columns: 1fr;
    }

    .locker-grid {
        grid-column: 1;
        grid-template-columns: 1fr;
    }

    .toolbar-panel,
    .work-panel,
    .page-heading {
        display: block;
    }

    .heading-actions,
    .page-heading .btn,
    .work-panel .btn,
    .toolbar-panel .btn {
        margin-top: 12px;
    }

    .metric-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .span-2 {
        grid-column: span 1;
    }
}

/* ============================================================
   Test pages — scale (filters, counts, virtualized lists)
   and CRUD (shared editor, modal) additions
   ============================================================ */
.test-toolbar {
    grid-template-columns: minmax(220px, 1fr) minmax(130px, auto) minmax(150px, auto) auto auto;
}

.test-toolbar .form-select {
    min-width: 130px;
}

.test-count {
    margin: -6px 0 16px;
    color: #667;
    font-size: 13px;
}

.test-count strong {
    color: #333333;
}

.test-count-note {
    display: block;
    margin-top: 3px;
    color: #999999;
    font-size: 12px;
}

.test-rail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    height: 52px;
    min-height: 52px;
    justify-content: center;
}

.test-rail-sub {
    color: #888888;
    font-size: 11px;
}

.test-summary-actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.test-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.test-panel-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
}

/* board */
.test-board-new {
    width: 100%;
    min-height: 40px;
    margin-bottom: 8px;
    border: 1px dashed #2aa9b3;
    border-radius: 4px;
    background: #f0fafb;
    color: #168c96;
    font-weight: 700;
}

.test-board-new:hover {
    background: #e2f5f7;
}

.test-board-scroll {
    max-height: calc(100vh - 220px);
    overflow: auto;
}

/* tabs picker (scale replacement for a long horizontal strip) */
.test-picker {
    padding: 14px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #ffffff;
}

.test-picker-field label {
    display: block;
    margin-bottom: 5px;
    color: #555555;
    font-weight: 700;
}

.test-picker-field .form-select {
    max-width: 520px;
}

.test-picker-hint {
    margin: 8px 0 0;
    color: #888888;
    font-size: 12px;
}

/* compartments scale + selection */
.test-compartment-scroll {
    max-height: 340px;
    overflow: auto;
    padding-right: 4px;
}

.test-compartment-grid button.is-selected {
    border-color: #2aa9b3;
    box-shadow: inset 0 0 0 2px #2aa9b3;
    background: #eef8fa;
}

.test-division-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eeeeee;
    flex-wrap: wrap;
}

.test-division-actions span {
    color: #777777;
    margin-right: auto;
}

/* shared editor (rail / accordion / tabs / board / modal) */
.test-editor {
    margin: 0 0 16px;
    border: 1px solid #d9e1e5;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
}

.test-detail-stage .test-editor,
.test-tab-workspace .test-editor {
    margin: 16px;
}

.test-editor-head {
    padding: 12px 16px;
    border-bottom: 1px solid #e3e9ec;
    background: #f5f9fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.test-editor-head strong {
    display: block;
    color: #243036;
    font-size: 15px;
}

.test-editor-head span {
    display: block;
    margin-top: 2px;
    color: #7a8b93;
    font-size: 12px;
}

.test-switch {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #243036;
    font-weight: 700;
    white-space: nowrap;
}

.test-editor-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.test-editor-grid label {
    display: block;
    margin-bottom: 5px;
    color: #53616b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.test-editor-actions {
    padding: 0 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* modal editor (board + tabs variants) */
.test-modal-scrim {
    position: fixed;
    inset: 0;
    background: rgba(23, 33, 38, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px;
    z-index: 1000;
}

.test-modal {
    width: min(760px, 100%);
    max-height: 88vh;
    overflow: auto;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.test-modal-head {
    position: sticky;
    top: 0;
    padding: 14px 18px;
    border-bottom: 1px solid #e3e9ec;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.test-modal-head strong {
    color: #243036;
    font-size: 16px;
}

.test-modal-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: #eef2f4;
    color: #53616b;
    font-size: 20px;
    line-height: 1;
}

.test-modal-close:hover {
    background: #e0e7ea;
    color: #243036;
}

.test-modal-body .test-editor {
    margin: 16px;
    border: 0;
}

/* test5 additions: compartment scroll + row actions + tag button */
.test5-grid-scroll {
    max-height: 320px;
    overflow: auto;
}

.test5-row-actions {
    display: flex;
    gap: 6px;
}

.test5-tags button {
    padding: 4px 10px;
    border: 1px solid #00796b;
    border-radius: 3px;
    background: #ffffff;
    color: #00796b;
    font-size: 12px;
    font-weight: 700;
}

.test5-tags button:hover:not(:disabled) {
    background: #e4f3f1;
}

.test5-tags button:disabled {
    opacity: 0.5;
}

@media (max-width: 1100px) {
    .test-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .test-toolbar {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   Armarios home dashboard: master tree + type strip + grid
   ============================================================ */
.home-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.home-master {
    position: sticky;
    top: 86px;
    max-height: calc(100vh - 150px);
    border: 1px solid #dfe5e8;
    border-radius: 6px;
    background: #eef2f4;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.home-master-head {
    padding: 16px 16px 10px;
    display: grid;
    gap: 3px;
}

.home-master-head span {
    color: #53616b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.home-master-head strong {
    color: #243036;
    font-size: 13px;
    text-transform: uppercase;
}

.home-master-search {
    padding: 0 14px 12px;
}

.home-master-search .form-control {
    border-color: #d4dde2;
    background: #ffffff;
    box-shadow: none;
}

.home-tree {
    flex: 1;
    overflow: auto;
    padding: 6px 6px 12px;
}

.home-tree-empty {
    padding: 14px;
    color: #53616b;
}

.home-tree-row {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    border-radius: 4px;
}

.home-tree-row:hover {
    background: #e2e9ec;
}

.home-tree-row.is-filter-active {
    background: #dff4f7;
    box-shadow: inset 3px 0 0 #2aa9b3;
}

.home-tree-caret {
    width: 22px;
    height: 30px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.home-tree-caret span {
    width: 0;
    height: 0;
    border-left: 5px solid #8a99a1;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}

.home-tree-caret span.open {
    transform: rotate(90deg);
}

.home-tree-label {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 6px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: inherit;
}

.home-tree-label:disabled {
    cursor: default;
}

.home-tree-name {
    color: #243036;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lvl-cust .home-tree-name {
    font-weight: 700;
}

.home-tree-agent,
.home-tree-count,
.home-tree-sub {
    color: #7a8b93;
    font-size: 11px;
}

.home-tree-children {
    padding-left: 14px;
}

.home-tree-leaf {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 6px 8px 6px 26px;
    cursor: pointer;
    font-family: inherit;
}

.home-tree-leaf.is-open {
    background: #dff4f7;
    box-shadow: inset 3px 0 0 #168c96;
}

/* type strip tiles */
.type-tile {
    min-width: 96px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.type-tile img {
    max-width: 84px;
    max-height: 56px;
    object-fit: contain;
    display: block;
}

.type-tile span {
    max-width: 96px;
    color: #53616b;
    font-size: 11px;
    text-align: center;
    line-height: 1.2;
}

.type-tile.is-active:hover {
    background: #eef8fa;
    border-color: #cfe6e9;
}

.type-tile.is-selected {
    border-color: #2aa9b3;
    background: #dff4f7;
}

.type-tile.is-inactive {
    cursor: not-allowed;
    opacity: 0.55;
}

.type-tile.is-inactive img {
    filter: grayscale(1);
    opacity: 0.7;
}

/* filter chips + count */
.home-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid #2aa9b3;
    border-radius: 999px;
    background: #e7f4f5;
    color: #127b83;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.filter-chip:hover {
    background: #d4edef;
}

.filter-chip span {
    font-weight: 700;
}

.filter-clear {
    border: 0;
    background: transparent;
    color: #777777;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.home-count {
    margin-bottom: 12px;
    color: #667;
    font-size: 13px;
}

/* cabinet grid (cards are buttons here) */
.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}

.home-grid .locker-card {
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.home-card-foot {
    margin-top: 12px;
    color: #777777;
    font-size: 12px;
}

/* detail panel reuses the test5 shell but without its master column */
.home-detail-shell {
    grid-template-columns: 1fr;
    min-height: 0;
}

.home-detail-manage {
    align-self: center;
    padding: 5px 12px;
    border: 1px solid #d4dde2;
    border-radius: 2px;
    color: #168c96;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}

.home-detail-manage:hover {
    background: #e4f3f1;
}

.phonevault-detail {
    display: grid;
    gap: 16px;
}

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

.phonevault-secret {
    display: grid;
    gap: 6px;
}

.phonevault-secret code {
    overflow-wrap: anywhere;
    font-size: 1rem;
}

.phonevault-node-summary,
.phonevault-node-list button {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #fff;
    text-align: left;
}

.phonevault-node-summary + .phonevault-node-summary,
.phonevault-node-list button + button {
    margin-top: 10px;
}

.phonevault-node-list button {
    width: 100%;
    cursor: pointer;
}

.phonevault-node-list button.is-selected,
.phonevault-target-grid article.is-selected {
    border-color: #177f73;
    box-shadow: 0 0 0 2px rgba(23, 127, 115, .14);
}

.phonevault-state {
    justify-self: start;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef2f5;
    color: #52606d;
    font-size: .78rem;
    font-weight: 700;
}

.phonevault-state.is-online {
    background: #dff5ec;
    color: #126c54;
}

.phonevault-state.is-offline {
    background: #fff1d9;
    color: #8a5a00;
}

.phonevault-actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.phonevault-actions-grid button,
.phonevault-capabilities button,
.phonevault-open-panel button {
    border: 0;
    border-radius: 7px;
    padding: 9px 13px;
    background: #177f73;
    color: #fff;
    font-weight: 650;
}

.phonevault-actions-grid button.danger {
    background: #a83c45;
}

.phonevault-actions-grid button:disabled,
.phonevault-capabilities button:disabled,
.phonevault-open-panel button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.phonevault-capabilities {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
}

.phonevault-capabilities label,
.phonevault-confirm {
    display: flex;
    gap: 8px;
    align-items: center;
}

.phonevault-capabilities button {
    justify-self: start;
    margin-top: 6px;
}

.phonevault-target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding: 16px;
}

.phonevault-target-grid article {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #dbe3ea;
    border-radius: 9px;
}

.phonevault-target-select {
    display: grid;
    gap: 3px;
    border: 0;
    background: transparent;
    text-align: left;
}

.phonevault-target-grid label {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: .82rem;
}

.phonevault-open-panel {
    display: grid;
    gap: 12px;
    padding-bottom: 16px;
}

.phonevault-open-panel > label,
.phonevault-open-panel > button,
.phonevault-open-panel > p {
    margin-inline: 16px;
}

.phonevault-open-panel > button {
    justify-self: start;
}

@media (max-width: 900px) {
    .phonevault-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .home-layout {
        grid-template-columns: 1fr;
    }

    .home-master {
        position: static;
        max-height: 320px;
    }
}

/* drag-and-drop reparenting */
.home-tree-leaf[draggable="true"],
.home-tree-row[draggable="true"] {
    cursor: grab;
}

.home-tree-leaf[draggable="true"]:active,
.home-tree-row[draggable="true"]:active {
    cursor: grabbing;
}

.home-tree-row.droppable {
    outline: 1px dashed #2aa9b3;
    outline-offset: -2px;
}

.home-tree-row.drop-over {
    background: #cdeef1;
    box-shadow: inset 0 0 0 2px #2aa9b3;
}

/* location rows: cabinet count sits next to the name, not below it */
.lvl-loc .home-tree-label {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.lvl-loc .home-tree-name {
    min-width: 0;
    flex: 0 1 auto;
}

.lvl-loc .home-tree-count {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: #dfe6e9;
    color: #53616b;
    font-size: 11px;
    font-weight: 600;
}

/* ============================================================
   Sourcing catalog pages (Vendors, Components)
   ============================================================ */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 9px 12px; border-bottom: 1px solid #e3e9ec; text-align: left; vertical-align: top; }
.table th { color: #53616b; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; background: #f7f9fb; }
.table .num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.row-actions { text-align: right; white-space: nowrap; }

.component-list { max-height: calc(100vh - 230px); overflow: auto; }
.component-list table tbody tr { cursor: pointer; }
.component-list table tbody tr:hover { background: #f2f8f9; }
.component-list table tbody tr.is-selected td { background: #dff4f7; box-shadow: inset 3px 0 0 #2aa9b3; }

.split-workspace:has(.component-detail) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); }

.component-detail-head { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-bottom: 1px solid #e3e9ec; flex-wrap: wrap; }
.component-detail-head h2 { margin: 0; font-size: 20px; font-weight: 500; }
.component-detail-head p { margin: 4px 0 0; color: #7a8b93; font-size: 13px; }
.component-cost { margin-left: auto; text-align: right; }
.component-cost span { display: block; font-size: 11px; text-transform: uppercase; color: #7a8b93; }
.component-cost strong { font-size: 22px; color: #168c96; }
.component-cost small { display: block; color: #7a8b93; }
.component-detail-actions { display: flex; gap: 8px; }
.component-section { padding: 16px; border-top: 1px solid #eef2f3; }
.component-section header h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; color: #53616b; }
.component-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.component-add-row .form-control, .component-add-row .form-select { max-width: 220px; }
.component-add-row .num { max-width: 110px; }

/* ============================================================
   Native tool-cabinet editor (/sdl-editor)
   ============================================================ */
.editor-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.editor-col { padding: 14px; }
.editor-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.editor-col-head h3 { margin: 0; font-size: 15px; }
.editor-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.editor-field label { font-size: 11px; text-transform: uppercase; color: #53616b; font-weight: 700; }
.editor-accessories { border-top: 1px solid #eef2f3; padding-top: 10px; }
.editor-accessories .test-switch { display: flex; gap: 8px; margin: 6px 0; }

.editor-cabinet { border: 1px solid #dfe5e8; border-radius: 6px; background: #f7f9fb; padding: 10px; margin-bottom: 14px; }
.cabinet-top-visual { background: #34495e; color: #fff; text-align: center; font-size: 12px; padding: 6px; border-radius: 4px 4px 0 0; }
.drawers-stack { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; }
.vdrawer { border: 1px solid #c9a24a; background: #f4d47a; border-radius: 3px; display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; cursor: pointer; text-align: left; font-size: 11px; }
.vdrawer.selected { outline: 2px solid #2aa9b3; }
.vdrawer.grid { background: #fff3cd; border-color: #ffeeba; }
.vdrawer-ref { color: #6b5a1e; font-size: 10px; }
.fill-gauge { text-align: center; font-weight: 700; font-size: 12px; color: #27ae60; padding: 4px; }
.fill-gauge.over { color: #c0392b; }
.cabinet-ref { text-align: center; color: #7a8b93; font-size: 12px; }

.drawer-rows { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; margin-bottom: 12px; }
.drawer-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #e3e9ec; border-radius: 4px; cursor: pointer; }
.drawer-row:hover { background: #f2f8f9; }
.drawer-row.selected { background: #dff4f7; box-shadow: inset 3px 0 0 #2aa9b3; }
.drawer-row-idx { color: #7a8b93; font-size: 12px; width: 28px; }
.drawer-row-main { flex: 1; }
.drawer-row-info { color: #7a8b93; font-size: 11px; }
.drawer-row-actions { display: flex; gap: 3px; }

.drawer-editor { border-top: 1px solid #eef2f3; padding-top: 12px; }
.drawer-editor h4 { margin: 0 0 10px; font-size: 14px; }
.editor-rowcol { display: flex; gap: 10px; }
.editor-rowcol .editor-field { flex: 1; }
.drawer-refbox { background: #f7f9fb; border-radius: 4px; padding: 8px; font-size: 12px; margin: 8px 0; }
.est-note { color: #e67e22; font-style: italic; margin-top: 3px; }
.grid-preview-area { margin: 10px 0; }
/* Constant drawer-interior footprint: the box is always the same size (the
   dense 9x9 case); cells scale via 1fr rows/cols, so a 1x1 fills the whole box. */
.grid-preview { display: grid; gap: 3px; width: 100%; max-width: 720px; aspect-ratio: 1000 / 700; }
.grid-cell { background: #eef4f6; border: 1px solid #d4dde2; border-radius: 3px; font-size: 9px; color: #53616b; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; min-height: 0; padding: 1px; }
.grid-system-editor { background: #fff8e6; border: 1px solid #ffeeba; border-radius: 4px; padding: 10px; }
.grid-system-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.grid-dividers { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.grid-divider-col { background: #fff; border: 1px solid #ccc; border-radius: 3px; text-align: center; padding: 3px 1px; }
.grid-divider-count { font-weight: 700; padding: 3px 0; }
.delete-drawer { width: 100%; margin-top: 10px; color: #c0392b; }

.price-col .price-table td { padding: 6px 10px; font-size: 13px; }
.price-table .price-section td { font-weight: 700; border-top: 2px solid #e3e9ec; }
.price-table .price-sub td { padding-left: 22px; font-size: 12px; color: #667; }
.price-totals { padding: 12px; border-top: 2px solid #dfe5e8; }
.price-totals > div { display: flex; justify-content: space-between; padding: 4px 0; }
.price-totals strong { font-variant-numeric: tabular-nums; }
.price-totals .grand { border-top: 1px solid #e3e9ec; margin-top: 6px; padding-top: 8px; font-size: 16px; }
.price-totals .grand strong { color: #168c96; }
.price-warning { margin: 12px; padding: 10px; border: 1px solid #f5c6cb; background: #fdecea; border-radius: 4px; font-size: 12px; }
.price-warning ul { margin: 6px 0 0; padding-left: 18px; }
.price-warning li.estimated { color: #e67e22; }

@media (max-width: 1200px) { .editor-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Native optimizer (/sdl-optimizer)
   ============================================================ */
.opt-toolbar { flex-wrap: wrap; align-items: flex-end; }
.opt-toolbar .editor-field { margin-bottom: 0; }
.opt-stats { margin-bottom: 18px; }
.metric-tile.warn { border-color: #eccf9a; background: #faf0dc; }
.metric-tile.warn strong { color: #c47d1a; }
.metric-tile strong { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.opt-cabinets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.opt-cabinet { padding: 12px; }
.opt-cabinet-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.opt-cabinet-head span { color: #7a8b93; font-size: 12px; }
.opt-drawers { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.opt-drawer { border: 1px solid #c9a24a; background: #f4d47a; border-radius: 3px; display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; font-size: 11px; }
.opt-drawer-fill { color: #6b5a1e; font-family: var(--font-mono, monospace); }

/* ============================================================
   Status pills (production / operations)
   ============================================================ */
.status-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef2f4; color: #53616b; }
.status-pill.s-draft { background: #eef2f4; color: #53616b; }
.status-pill.s-planned { background: #e7f0fb; color: #2b6cb0; }
.status-pill.s-inproduction { background: #fef3d7; color: #b7791f; }
.status-pill.s-completed { background: #e6f5ee; color: #1f9d6b; }
.status-pill.s-cancelled { background: #fbe7e5; color: #d24338; }
.status-pill.s-online { background: #e6f5ee; color: #1f9d6b; }
.status-pill.s-offline { background: #fbe7e5; color: #d24338; }
.status-pill.s-degraded { background: #fef3d7; color: #b7791f; }
.status-pill.s-unknown { background: #eef2f4; color: #7d8c95; }

/* ---- editor drawer reorder + delete + reserved space (2026-07-28 tweaks) ---- */
.vdrawer { position: relative; cursor: grab; }
.vdrawer:active { cursor: grabbing; }
.vdrawer.dragging { opacity: .4; }
.vdrawer.drag-over { box-shadow: inset 0 3px 0 0 #2aa9b3; }
.vdrawer-del { border: 0; background: transparent; color: #a33; font-size: 15px; line-height: 1; padding: 0 2px; opacity: .55; cursor: pointer; }
.vdrawer-del:hover { opacity: 1; color: #c0392b; }
.add-drawer-btn { width: 100%; margin: 0 0 14px; }
.editor-center .drawer-editor { min-height: 640px; }
.drawer-refbox { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }

/* ---- grid-system preview: 9 fixed channels, same footprint as the compartment view ---- */
.gridsys-preview { grid-template-columns: repeat(9, 1fr); grid-template-rows: 1fr; }
.gridsys-channel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.gridsys-cells { flex: 1; display: flex; flex-direction: column; gap: 0; border: 1px solid #d4dde2; border-radius: 3px; overflow: hidden; background: #eef4f6; min-height: 0; }
.gridsys-cell { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #53616b; text-align: center; overflow: hidden; min-height: 0; padding: 0 1px; }
/* divider between cells, styled by material */
.gridsys-cell.div-galv { border-top: 3px solid #7d8c95; }
.gridsys-cell.div-acri { border-top: 3px solid rgba(120, 190, 210, .85); }
.gridsys-ctrl { display: flex; align-items: center; justify-content: center; gap: 2px; height: 26px; flex: 0 0 auto; }
.gridsys-ctrl button { width: 18px; height: 18px; padding: 0; line-height: 1; border: 1px solid #cdd8db; border-radius: 3px; background: #fff; color: #243036; font-size: 11px; cursor: pointer; }
.gridsys-ctrl button:hover:not(:disabled) { background: #e4f3f1; border-color: #2aa9b3; }
.gridsys-ctrl button:disabled { opacity: .4; cursor: default; }
.gridsys-ctrl span { min-width: 14px; text-align: center; font-size: 11px; font-weight: 700; color: #243036; }
.gridsys-summary { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; padding: 8px 10px; background: #f7f9fb; border-radius: 4px; font-size: 12px; color: #53616b; }

/* ============================================================
   Standard list/detail workspace (MasterDetailPanel)
   One panel at a time: list, or detail with a Back action.
   ============================================================ */
.master-detail { display: block; margin-bottom: 18px; }
.master-detail > .data-panel { margin-bottom: 0; }
.md-back-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.md-back-title { color: #53616b; font-size: 13px; }

/* ============================================================
   Related-list convention: a child entity shown inside a parent's
   detail panel, mirroring its own standalone page.
   ============================================================ */
.related-list { margin-top: 18px; padding-top: 14px; border-top: 2px solid #e3e9ec; }
.related-list > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.related-list > header h3 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: #53616b; }
.related-actions { display: flex; align-items: center; gap: 8px; }
.related-actions span { color: #7a8b93; font-size: 12px; }

/* cabinet-type row: small thumbnail next to the name */
.type-cell { display: flex; align-items: center; gap: 10px; }
.type-cell img { width: 40px; height: 32px; object-fit: contain; }

/* simple key/value grid used in detail panels */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; margin: 0 0 4px; padding: 14px; }
.kv-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #7a8b93; margin-bottom: 3px; }
.kv-grid dd { margin: 0; font-weight: 600; color: #243036; }

/* long source paths in the slides table should not stretch the layout */
.src-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }