:root {
    --mwf-primary: #e5aa00;
    --mwf-dark: #22272b;
    --mwf-light: #f5f6f8;
    --mwf-border: #dee2e6;
    --mwf-radius: 0.65rem;
    --mwf-navbar-height: 58px;
}

/* ==========================================================================
   Application shell
   ========================================================================== */

html,
body {
    height: 100%;
}

body {
    margin: 0;
    overflow: hidden;
    background: var(--mwf-light);
    color: var(--mwf-dark);
}

.mwf-app-shell {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mwf-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    flex: 0 0 auto;
}

.mwf-app-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.mwf-footer {
    flex: 0 0 auto;
}

/* ========================================================================== 
   Supplier workspace
   Full-width TFSHF layout: fixed tabs/actions, scrollable active pane.
   ========================================================================== */

.mwf-supplier-form-content {
    overflow: hidden;
}

.mwf-supplier-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.mwf-form-card.mwf-supplier-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 0;
}

.mwf-supplier-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.mwf-supplier-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.mwf-supplier-edit-card > .nav-tabs,
.mwf-supplier-edit-card > .mwf-form-actions {
    flex: 0 0 auto;
}

.mwf-supplier-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.mwf-supplier-tab-content > .tab-pane {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

@media (min-width: 992px) {
    #supplier-pane .row {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    #supplier-pane .row > * {
        width: auto;
        max-width: none;
    }

    #supplier-pane .row > :nth-child(1) { grid-column: span 6; order: 1; }
    #supplier-pane .row > :nth-child(2) { grid-column: span 3; order: 2; }
    #supplier-pane .row > :nth-child(12) { grid-column: span 3; order: 3; }
    #supplier-pane .row > :nth-child(3),
    #supplier-pane .row > :nth-child(4) { grid-column: span 6; order: 4; }
    #supplier-pane .row > :nth-child(4) { order: 5; }
    #supplier-pane .row > :nth-child(5),
    #supplier-pane .row > :nth-child(6),
    #supplier-pane .row > :nth-child(7),
    #supplier-pane .row > :nth-child(8) { grid-column: span 3; order: 6; }
    #supplier-pane .row > :nth-child(6) { order: 7; }
    #supplier-pane .row > :nth-child(7) { order: 8; }
    #supplier-pane .row > :nth-child(8) { order: 9; }
    #supplier-pane .row > :nth-child(9),
    #supplier-pane .row > :nth-child(10),
    #supplier-pane .row > :nth-child(11) { grid-column: span 4; order: 10; }
    #supplier-pane .row > :nth-child(10) { order: 11; }
    #supplier-pane .row > :nth-child(11) { order: 12; }
    #supplier-pane .row > :nth-child(13) { grid-column: 1 / -1; order: 13; }
}

@media (max-width: 767.98px) {
    .mwf-supplier-form-content {
        overflow: auto;
    }

    .mwf-supplier-container,
    .mwf-form-card.mwf-supplier-card,
    .mwf-supplier-form {
        height: auto;
        min-height: min-content;
    }

    .mwf-supplier-tab-content,
    .mwf-supplier-tab-content > .tab-pane {
        height: auto;
        overflow: visible;
    }
}

/* Inspection Template workspace — full-width builder with fixed actions. */
.mwf-template-filter {
    width: min(100%, 15rem);
}

.mwf-form-content.mwf-template-form-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.container-fluid.mwf-template-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: none;
    min-height: 0;
    overflow: hidden;
}

.mwf-form-card.mwf-template-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: none;
    min-height: 0;
    overflow: hidden;
}

.mwf-template-card > .nav-tabs,
.mwf-template-card > .mwf-form-actions {
    flex: 0 0 auto;
}

.mwf-template-tab-content,
.mwf-template-tab-content > .tab-pane {
    min-height: 0;
}

.mwf-template-tab-content {
    flex: 1 1 auto;
    overflow: hidden;
}

.mwf-template-tab-content > .tab-pane {
    height: 100%;
    overflow-y: auto;
}

.mwf-template-section {
    overflow: hidden;
    border: 1px solid var(--mwf-border);
    border-radius: 0.5rem;
    background: #fff;
}

.mwf-template-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--mwf-border);
    background: #f8f9fa;
}

.mwf-template-inactive {
    opacity: 0.7;
}

.mwf-template-items-table th,
.mwf-template-items-table td {
    vertical-align: middle;
}

.mwf-template-preview {
    width: 100%;
    max-width: none;
}

.mwf-template-result-cell {
    min-width: 9rem;
    height: 3rem;
}

.mwf-template-comment-cell {
    min-width: 14rem;
    color: #6c757d;
    font-size: 0.875rem;
}

@media (max-width: 767.98px) {
    .mwf-template-filter {
        width: 100%;
    }

    .mwf-form-content.mwf-template-form-content,
    .mwf-template-tab-content,
    .mwf-template-tab-content > .tab-pane {
        height: auto;
        overflow: visible;
    }

    .container-fluid.mwf-template-container,
    .mwf-form-card.mwf-template-card {
        height: auto;
        min-height: min-content;
        overflow: visible;
    }
}

.mwf-meter-frequency-control {
    width: 10rem;
}

.mwf-composition-tree {
    padding-left: 0;
}

.mwf-composition-tree ul {
    list-style: none;
    margin: 0;
}

.mwf-composition-root {
    padding-left: 0;
}

.mwf-composition-node > ul {
    padding-left: 1.5rem;
}

.mwf-composition-node > ul > .mwf-composition-node {
    position: relative;
    padding: 0.55rem 0 0 1.25rem;
}

.mwf-composition-node > ul > .mwf-composition-node::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 2px solid #0d6efd;
}

.mwf-composition-node > ul > .mwf-composition-node::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1.25rem;
    width: 1rem;
    border-top: 2px solid #0d6efd;
}

.mwf-composition-node > ul > .mwf-composition-node:last-child::before {
    bottom: auto;
    height: 1.25rem;
}

.mwf-composition-meta {
    margin-top: 0.15rem;
}

.mwf-composition-node-row {
    min-height: 1.75rem;
}

.mwf-composition-action-card {
    min-width: 17rem;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: #fff;
}

@media (max-width: 767.98px) {
    .mwf-meter-frequency-control {
        width: 8.75rem;
    }
}

.mwf-user-summary {
    font-size: 0.9rem;
    font-weight: 600;
}

.mwf-login-page {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.mwf-login-card {
    width: min(100%, 420px);
}

@media (max-width: 767.98px) {
    .mwf-users-table .mwf-hide-mobile {
        display: none;
    }
}

/* ==========================================================================
   Lightweight public meter-reading request
   ========================================================================== */

.mwf-request-delivery {
    border-color: #75b798;
}

.mwf-meter-view-alert {
    animation: mwf-meter-reply-alert 1.25s ease-in-out infinite;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
}

@keyframes mwf-meter-reply-alert {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mwf-meter-view-alert {
        animation: none;
    }
}

.mwf-public-request-body {
    min-height: 100%;
    overflow: auto;
    background: var(--mwf-light);
}

.mwf-public-request-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.mwf-public-request-card {
    width: min(100%, 560px);
    overflow: hidden;
    border: 1px solid var(--mwf-border);
    border-radius: var(--mwf-radius);
    background: #ffffff;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.mwf-public-request-header {
    padding: 0.85rem 1rem;
    background: var(--mwf-primary);
    color: #ffffff;
}

.mwf-public-meter-summary {
    display: grid;
    padding: 1rem;
    border: 1px solid #b6d4fe;
    border-radius: 0.5rem;
    background: #eef5ff;
}

@media (max-width: 767.98px) {
    #meter-operations-table .mwf-operations-hide-mobile {
        display: none;
    }

    #meter-operations-table th,
    #meter-operations-table td {
        padding: 0.6rem 0.45rem;
    }

    #meter-operations-table .mwf-icon-action {
        width: 34px;
        height: 34px;
    }

    .mwf-request-delivery .btn-success {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .mwf-public-request-page {
        place-items: start center;
        padding: 0;
    }

    .mwf-public-request-card {
        min-height: 100vh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.mwf-dashboard-card {
    height: 100%;
    min-height: 170px;
    border: 2px solid transparent;
    border-left: 4px solid var(--mwf-primary);
    border-radius: var(--mwf-radius);
    background: #ffffff;
    box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.08);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mwf-dashboard-link { display:block; height:100%; color:inherit; text-decoration:none; }
.mwf-dashboard-link:hover .mwf-dashboard-card,
.mwf-dashboard-link:focus .mwf-dashboard-card {
    transform: translateY(-3px);
    border-color: var(--mwf-primary);
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.16);
}
.mwf-dashboard-link:focus-visible {
    border-radius: var(--mwf-radius);
    outline: 3px solid rgba(229,170,0,.35);
    outline-offset: 3px;
}
.mwf-dashboard-icon {
    width:5.5rem; height:5.5rem; min-width:5.5rem; min-height:5.5rem;
    flex:0 0 5.5rem; display:inline-flex; align-items:center; justify-content:center;
    overflow:visible; border-radius:0; background:transparent;
    color:var(--mwf-primary); font-size:2.5rem;
}
.mwf-dashboard-icon-image {
    display:block; width:78px !important; height:78px !important;
    max-width:78px !important; max-height:78px !important; object-fit:contain;
}
.mwf-dashboard-content { min-width:0; padding-top:.15rem; }
.mwf-dashboard-content h2 { color:var(--mwf-dark); }
.mwf-dashboard-content .text-muted { color:#5f666d !important; }
.mwf-dashboard-icon > i { color:var(--mwf-primary); }

/* ==========================================================================
   List-page layout
   ========================================================================== */

.mwf-list-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.mwf-page-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--mwf-border);
    background: var(--mwf-light);
}

.mwf-list-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.mwf-list-content > .container-fluid {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ==========================================================================
   Add button
   ========================================================================== */

.mwf-add-button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border-color: var(--mwf-dark);
    background-color: var(--mwf-dark);
    color: #ffffff;
    font-size: 1.1rem;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.mwf-add-button:hover,
.mwf-add-button:focus {
    border-color: var(--mwf-primary);
    background-color: var(--mwf-primary);
    color: #171a1d;
}

.mwf-add-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(229, 170, 0, 0.25);
}

/* ==========================================================================
   Content cards and command bars
   ========================================================================== */

.mwf-content-card {
    border: 1px solid var(--mwf-border);
    border-radius: var(--mwf-radius);
    background: #ffffff;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}

.mwf-list-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mwf-command-bar {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--mwf-border);
    background: #ffffff;
}

.mwf-search-group {
    width: 100%;
    max-width: 420px;
}

.mwf-record-count {
    flex: 0 0 auto;
    color: #6c757d;
    font-size: 0.9rem;
    white-space: nowrap;
}







/* ==========================================================================
   Scrollable tables
   ========================================================================== */

.mwf-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.mwf-table {
    margin-bottom: 0;
}

.mwf-table th,
.mwf-table td {
    padding: 0.75rem 0.85rem;
}

.mwf-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 0;
    background: var(--mwf-dark);
    color: #ffffff;
    font-weight: 600;
    white-space: nowrap;
}

.mwf-table tbody tr:nth-child(odd) > * {
    background-color: #f4f4f4;
}

.mwf-table tbody tr:nth-child(even) > * {
    background-color: #ffffff;
}

.mwf-table tbody tr:hover > * {
    background-color: #eef5ff;
}

/* Let the longest Asset Model identity size column one on desktop. */
@media (min-width: 768px) {
    .mwf-asset-model-identity {
        width: 1%;
        white-space: nowrap;
    }

    .mwf-asset-model-description {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

[hidden] {
    display: none !important;
}


/* ==========================================================================
   Primary record links
   ========================================================================== */

.mwf-primary-edit-link {
    color: var(--mwf-primary);
    text-decoration: none;
}

.mwf-primary-edit-link:hover,
.mwf-primary-edit-link:focus {
    color: #084298;
    text-decoration: underline;
}

.mwf-primary-edit-link:focus-visible {
    border-radius: 0.2rem;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}


/* ==========================================================================
   Borderless row actions
   ========================================================================== */

.mwf-icon-action {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--mwf-primary);
    font-size: 1.05rem;
    text-decoration: none;
    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.mwf-icon-action:hover,
.mwf-icon-action:focus {
    background: rgba(13, 110, 253, 0.12);
    color: #084298;
    outline: none;
}

.mwf-icon-action:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* ==========================================================================
   Forms
   ========================================================================== */

 .form-control,
.form-select {
    min-height: 44px;
}

.form-control:focus,
.form-select:focus {
    border-color: #d4a000;
    box-shadow: 0 0 0 0.25rem rgba(229, 170, 0, 0.18);
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 767.98px) {
    .mwf-dashboard-card {
        min-height: 0;
    }

    .mwf-page-header .container-fluid {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .mwf-page-header h1 {
        font-size: 1.5rem;
    }

    .mwf-command-bar {
        padding: 0.75rem !important;
    }

    .mwf-search-group {
        max-width: none;
    }


/* ==========================================================================
   Table
   ========================================================================== */

    .mwf-table th,
    .mwf-table td {
        padding: 0.65rem 0.7rem;
    }

    .mwf-footer .container-fluid {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}


/* ==========================================================================
   Form-page layout
   ========================================================================== */

.mwf-form-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.mwf-form-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.mwf-form-card {
    width: 100%;
    max-width: 760px;
    overflow: hidden;
}

.mwf-form-card.mwf-asset-model-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    max-width: 1200px;
    min-height: 0;
}

/* Asset Add and Edit use the full responsive working width. */
.mwf-form-card.mwf-asset-card {
    width: 100%;
    max-width: none !important;
}

/* Do not allow the inherited Asset Model workspace limit to narrow Asset Edit. */
.mwf-asset-model-container > .mwf-asset-card {
    align-self: stretch;
    max-width: none !important;
}

.mwf-asset-model-content {
    overflow: hidden;
}

.mwf-asset-model-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.mwf-asset-model-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.mwf-asset-model-form > .nav-tabs,
.mwf-asset-model-form > .mwf-form-actions {
    flex: 0 0 auto;
}

/* Add Asset has no tabs: only its form body scrolls; actions remain visible. */
.mwf-asset-add-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.mwf-asset-model-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.mwf-asset-model-tab-content > .tab-pane {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.mwf-asset-model-pane-content {
    height: 100%;
    overflow-y: auto;
}

.mwf-tags-pane-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Notes use the available middle workspace as writing/history space. */
.mwf-notes-pane-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.mwf-notes-pane-content > .mwf-note-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.mwf-note-new-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.mwf-note-new-form .mwf-note-editor {
    flex: 1 1 auto;
    min-height: 180px;
}


.mwf-note-history {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #ffe69c;
    border-radius: 0.375rem;
    background-color: #fff3cd;
}

.mwf-note-history:last-child {
    margin-bottom: 0;
}

.mwf-note-editor {
    width: 100%;
    min-height: 180px;
    padding: 0.75rem;
    overflow-y: auto;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: #ffffff;
    outline: none;
}

.mwf-note-editor:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.mwf-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--mwf-border);
    background: #ffffff;
}

.mwf-textarea {
    min-height: 120px;
    resize: vertical;
}


/* ==========================================================================
   Toast notifications
   ========================================================================== */

.mwf-toast-container {
    position: fixed;
    top: calc(var(--mwf-navbar-height) + 0.75rem);
    right: 0.75rem;
    z-index: 1090;
    width: auto;
    max-width: calc(100vw - 1.5rem);
}

.mwf-toast-container .toast {
    min-width: 320px;
    max-width: 100%;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
}


/* ==========================================================================
   Tag tooltips
   ========================================================================== */

.mwf-tag-tooltip {
    --bs-tooltip-bg: var(--bs-primary);
    --bs-tooltip-color: #ffffff;
}


/* ==========================================================================
   TFSHF row selection, highlight and fade
   ========================================================================== */

.mwf-data-row:focus {
    outline: none;
}

.mwf-data-row.mwf-row-highlight > * {
    animation: mwf-row-highlight-fade 5s ease-out;
}

@keyframes mwf-row-highlight-fade {
    0%,
    72% {
        background-color: #fff3cd;
    }

    100% {
        background-color: #ffffff;
    }
}

/* ========================================================================== 
   Compact, searchable relationship checklists
   ========================================================================== */

.mwf-tag-selector {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--mwf-border);
    border-radius: 0.375rem;
    background: #ffffff;
}

.mwf-tag-filter {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--mwf-border);
    background: #ffffff;
}

.mwf-tag-filter .input-group {
    width: min(100%, 420px);
}

.mwf-tag-count {
    margin-left: auto;
    color: #6c757d;
    font-size: 0.875rem;
    white-space: nowrap;
}

.mwf-tag-list {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.mwf-tag-filter-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mwf-tag-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--mwf-border);
    cursor: pointer;
}

.mwf-tag-row[hidden] {
    display: none;
}

.mwf-tag-row:last-of-type {
    border-bottom: 0;
}

.mwf-tag-row:hover {
    background: #f8f9fa;
}

.mwf-tag-row:has(.form-check-input:checked) {
    background: #eef5ff;
}

.mwf-tag-row .form-check-input {
    margin: 0;
}

.mwf-tag-name {
    font-weight: 600;
}

.mwf-tag-no-results {
    padding: 1rem;
    color: #6c757d;
    text-align: center;
}

.mwf-tag-add {
    flex: 0 0 auto;
    padding: 0.75rem;
    border-top: 1px solid var(--mwf-border);
    background: #f8f9fa;
}

.mwf-tag-pending {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid #9ec5fe;
    border-radius: 0.375rem;
    background: #eef5ff;
}

/* ==========================================================================
   Small-screen form and toast adjustments
   ========================================================================== */

@media (max-width: 767.98px) {
    #meter-readings-table col.mwf-meter-hide-mobile {
        visibility: collapse;
        width: 0 !important;
    }

    #meter-readings-table th.mwf-meter-hide-mobile,
    #meter-readings-table td.mwf-meter-hide-mobile,
    .mwf-meter-hide-mobile {
        display: none;
    }

    #meter-readings-table col.mwf-meter-col-asset {
        width: 34% !important;
    }

    #meter-readings-table col.mwf-meter-col-type {
        width: 36% !important;
    }

    #meter-readings-table col.mwf-meter-col-current {
        width: 30% !important;
    }

    .mwf-form-actions {
        padding: 1rem;
    }

.mwf-form-actions .btn {
        flex: 1 1 auto;
    }

    .mwf-toast-container .toast {
        min-width: 0;
    }

    .mwf-tag-filter {
        align-items: stretch;
        flex-direction: column;
        gap: 0.75rem;
    }

    .mwf-tag-filter .input-group {
        width: 100%;
    }

    .mwf-tag-count {
        margin-left: 0;
    }

    .mwf-tag-filter-actions {
        width: 100%;
    }

    .mwf-tag-filter-actions .btn {
        flex: 1 1 auto;
    }

    .mwf-tag-pending {
        align-items: flex-start;
    }
}

/* Supplier workspace cascade guard — keep these final in app.css. */
.mwf-form-content.mwf-supplier-form-content {
    overflow: hidden;
}

.container-fluid.mwf-supplier-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

@media (max-width: 767.98px) {
    .mwf-form-content.mwf-supplier-form-content {
        overflow: auto;
    }

    .container-fluid.mwf-supplier-container {
        height: auto;
        min-height: min-content;
    }
}

/* Parts and Materials workspace — fixed actions with a scrollable form body. */
.mwf-form-content.mwf-part-form-content {
    overflow: hidden;
}

.container-fluid.mwf-part-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.mwf-form-card.mwf-part-card,
.mwf-part-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 0;
}

.mwf-part-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    .mwf-form-content.mwf-part-form-content {
        overflow: auto;
    }

    .container-fluid.mwf-part-container,
    .mwf-form-card.mwf-part-card,
    .mwf-part-form {
        height: auto;
        min-height: min-content;
    }
}


/* ==========================================================================
   Machine Workspace - Dealer industrial identity
   ========================================================================== */
.mwf-topbar .navbar,
.mwf-topbar .bg-primary {
    background-color:#22272b !important;
    border-bottom:3px solid var(--mwf-primary);
}
.mwf-topbar .navbar-brand,
.mwf-topbar .nav-link,
.mwf-topbar .navbar-text { color:#fff !important; }

.mwf-topbar .btn-outline-light:hover,
.mwf-topbar .btn-outline-light:focus,
.mwf-topbar .btn-light {
    border-color:var(--mwf-primary);
    background-color:var(--mwf-primary);
    color:#171a1d;
}

.btn-primary {
    /* Productive commands: Save, Save and Exit, Add, etc. */
    --bs-btn-color:#ffffff;
    --bs-btn-bg:var(--mwf-dark);
    --bs-btn-border-color:var(--mwf-dark);
    --bs-btn-hover-color:#171a1d;
    --bs-btn-hover-bg:var(--mwf-primary);
    --bs-btn-hover-border-color:var(--mwf-primary);
    --bs-btn-focus-shadow-rgb:229,170,0;
    --bs-btn-active-color:#171a1d;
    --bs-btn-active-bg:#cc9700;
    --bs-btn-active-border-color:#cc9700;
    --bs-btn-disabled-color:#ffffff;
    --bs-btn-disabled-bg:#6c757d;
    --bs-btn-disabled-border-color:#6c757d;
}

/* Secondary navigation/abandon commands: Exit, Cancel, Back. */
.btn-secondary {
    --bs-btn-color:var(--mwf-dark);
    --bs-btn-bg:#ffffff;
    --bs-btn-border-color:#6c757d;
    --bs-btn-hover-color:var(--mwf-dark);
    --bs-btn-hover-bg:#e9ecef;
    --bs-btn-hover-border-color:#6c757d;
    --bs-btn-focus-shadow-rgb:108,117,125;
    --bs-btn-active-color:var(--mwf-dark);
    --bs-btn-active-bg:#dee2e6;
    --bs-btn-active-border-color:#6c757d;
}

/* Keep outline-secondary commands visually consistent with Exit/Cancel. */
.btn-outline-secondary {
    --bs-btn-color:var(--mwf-dark);
    --bs-btn-border-color:#6c757d;
    --bs-btn-hover-color:var(--mwf-dark);
    --bs-btn-hover-bg:#e9ecef;
    --bs-btn-hover-border-color:#6c757d;
    --bs-btn-active-color:var(--mwf-dark);
    --bs-btn-active-bg:#dee2e6;
    --bs-btn-active-border-color:#6c757d;
    --bs-btn-focus-shadow-rgb:108,117,125;
}

.mwf-primary-edit-link,.mwf-icon-action { color:#9a7200; }
.mwf-primary-edit-link:hover,.mwf-primary-edit-link:focus,
.mwf-icon-action:hover,.mwf-icon-action:focus { color:#5f4700; }
.mwf-icon-action:hover,.mwf-icon-action:focus { background:rgba(229,170,0,.14); }
.mwf-primary-edit-link:focus-visible,.mwf-icon-action:focus-visible {
    box-shadow:0 0 0 .2rem rgba(229,170,0,.28);
}


/* MW-D switches / check controls */
.form-check-input:checked {
    background-color: var(--mwf-primary);
    border-color: var(--mwf-primary);
}

.form-check-input:focus {
    border-color: #d4a000;
    box-shadow: 0 0 0 0.25rem rgba(229, 170, 0, 0.25);
}

.form-switch .form-check-input:checked {
    background-color: var(--mwf-primary);
    border-color: var(--mwf-primary);
}