/* Application styles. Keep page-specific rules under their page or component class. */

/* Account pages */
.account-page {
    background: var(--background-color);
    border-radius: var(--radius);
    padding: 40px;
    margin-bottom: 30px;
    color: var(--fx-steel-blue);
}

.account-access { max-width: 620px; margin-inline: auto; }
.account-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #657487; }
.account-page h1 { font-size: 28px; font-weight: 600; letter-spacing: -.6px; margin: 4px 0 12px; color: var(--page-background-color); }
.account-page h2 { font-size: 16px; line-height: 1.5; font-weight: 400; color: #657487; }
.account-page h3 { font-size: 22px; letter-spacing: -.4px; margin-bottom: 20px; }
.account-page p { font-size: 14px; }
.account-heading { margin-bottom: 28px; }
.account-heading p { color: #657487; margin: 0; }
.account-access > section { padding: 0; margin: 0; }
.account-access .row > [class*="col-"] { width: 100%; }
.account-page hr { border-color: #cbd1d7; margin-block: 22px; }
.account-page .form-control { border-color: #cbd1d7; border-radius: 5px; color: var(--fx-steel-blue); font-size: 14px; }
.account-page .btn { font-size: 14px; border-radius: 5px; padding: 10px 18px; white-space: normal; }
.account-page .btn-primary:hover { background: var(--fx-steel-blue); border-color: var(--fx-steel-blue); color: white; }
.account-page a { color: var(--fx-steel-blue); text-underline-offset: 3px; }
.account-page a:hover { color: #a54c00; }
.account-page a:focus-visible, .account-page button:focus-visible, .account-page input:focus-visible { outline: 3px solid var(--fx-orange); outline-offset: 3px; }
.account-settings-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.account-sidebar { background: white; border: 1px solid #dee2e6; border-radius: 7px; padding: 10px; }
.account-sidebar .nav { gap: 4px; }
.account-sidebar .nav-link { font-size: 14px; padding: 12px 14px; border-radius: 5px; border-left: 3px solid transparent; }
.account-sidebar .nav-link:hover { background: #f0f2f5; color: var(--fx-steel-blue); }
.account-sidebar .nav-link.active { background: var(--page-background-color); border-left-color: var(--fx-orange); color: white; }
.account-content { min-width: 0; padding: 28px; background: white; border: 1px solid #dee2e6; border-radius: 7px; overflow-wrap: anywhere; }
.account-content > .row > [class*="col-"] { width: 100%; max-width: 640px; }
.account-content .profile-page { background: transparent; padding: 0; margin: 0; }
.account-content .profile-page .profile-card { border: 0; padding: 0; background: transparent; }
.account-content .profile-heading .eyebrow { display: none; }
.account-content .table-responsive { max-width: 100%; }

@media (max-width: 991.98px) {
    .account-settings-grid { grid-template-columns: 1fr; gap: 20px; }
    .account-sidebar .nav { flex-direction: row !important; flex-wrap: wrap; }
}

@media (max-width: 640px) {
    .page:has(.account-page) main { padding-inline: 16px; }
    .account-page { padding: 24px 18px; }
    .account-content { padding: 20px 16px; }
    .account-sidebar .nav-link { padding: 10px; }
}

/* 1. Theme and base
   ----------------------------------------------------------------- */

:root {
    --page-background-color: #223046;
    --radius: 20px;
    --background-color: #f4f4f4;
    --fx-orange: #FF7A00;
    --fx-steel-blue: #1C3F68;
    --bs-body-color: var(--fx-steel-blue);
    --bs-heading-color: var(--fx-steel-blue);
    --bs-secondary-color: var(--fx-steel-blue);
    --bs-emphasis-color: var(--fx-steel-blue);
}

html,
body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--page-background-color);
    color: var(--page-background-color);
}

h1:focus {
    outline: none;
}

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

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

/* 2. Layouts
   ----------------------------------------------------------------- */

.tab-pane {
    opacity: 0;
    transition: opacity .15s ease-in-out;
}

.tab-pane.show.active {
    opacity: 1;
}

.topnav {
    background-color: var(--background-color);
    color: white;
    padding: 14px 20px;
    text-align: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-bottom: 30px;
}

.page {
    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    width: 100%;
    padding-left: 60px;
    padding-right: 60px;
}

.tenant-section {
    background-color: var(--background-color);
    margin-bottom: 30px;
    border-radius: 20px;
    padding: 40px;
}

section {
    background-color: var(--background-color);
    margin-bottom: var(--radius);
    border-radius: var(--radius);
    padding: 10px;
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #c6cfda;
    font-size: 12px;
    padding: 4px 10px 28px;
}

.tenant-page {
    position: relative;
    display: flex;
    flex-direction: column;
}

.tenant-page main {
    flex: 1;
}

@media (min-width: 641px) {
    .tenant-page {
        flex-direction: row;
    }
}

/* 3. Buttons and forms
   ----------------------------------------------------------------- */

.btn-error {
    background-color: transparent;
    border: 1px solid var(--fx-orange);
    color: var(--fx-orange);
}

.btn-error:hover,
.btn-error:focus {
    background-color: transparent;
    border-color: var(--fx-orange);
    color: var(--fx-orange);
}

.btn-error:disabled {
    opacity: 0.5;
}

.modal-backdrop {
    z-index: -1;
}

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

.btn-primary {
    color: white;
    background-color: var(--page-background-color);
    border-color: var(--page-background-color);
}

.btn:hover {
    background-color: #f4f4f4;
    color: var(--page-background-color);
    border-color: var(--page-background-color);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--page-background-color);
}

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

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

.validation-message {
    color: #e50000;
}

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

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

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}

.nav-underline .nav-link {
    color: var(--fx-steel-blue);
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-underline .nav-link:hover {
    color: var(--fx-orange);
    border-bottom-color: var(--fx-orange);
}

.nav-underline .nav-link.active {
    color: var(--fx-orange) !important;
    border-bottom-color: var(--fx-orange) !important;
}

/* 4. Catalog tables
   ----------------------------------------------------------------- */

.footing-catalog {
    margin-top: 1.5rem;
}

.footing-table {
    min-width: 750px;
}

.footing-table th {
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
}

.footing-table td {
    padding: .65rem .5rem;
}

.footing-table input {
    min-width: 75px;
}

.footing-table .catalog-code-column {
    width: 75px;
    max-width: 75px;
    padding-left: 4px;
    padding-right: 4px;
}

.footing-table .catalog-code-column input {
    width: 67px;
    min-width: 0;
    max-width: 67px;
    padding-left: 3px;
    padding-right: 3px;
}

.empty-catalog {
    padding: 2.5rem 1rem;
    text-align: center;
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    color: var(--bs-secondary-color);
}

.empty-catalog i {
    font-size: 2rem;
    display: block;
    margin-bottom: .75rem;
}

.empty-catalog p {
    margin-bottom: .25rem;
    font-weight: 500;
}

/* 5. Save indicators
   ----------------------------------------------------------------- */

.save-indicator {
    font-size: 1.25rem;
    transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.saving {
    color: #9ca3af;
    animation: pulse 1s infinite ease-in-out;
}

.saved {
    color: #22c55e;
    transform: scale(1.1);
}

@keyframes pulse {
    0%,
        100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.saving-indicator-slot {
    width: 48px;
    min-width: 48px;
    height: 48px;
}

/* 6. Top navigation
   ----------------------------------------------------------------- */

.site-nav .header-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.site-nav .navbar-brand {
    margin-right: 0;
    text-align: left;
}

.site-nav .section-links {
    gap: 12px;
}

.site-nav .account-links {
    gap: 12px;
}

.site-nav .nav-link {
    color: var(--fx-steel-blue);
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
    color: #bd5800;
}

@media (min-width: 992px) {
    .site-nav {
        display: grid;
        grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
        align-items: center;
    }

    .site-nav > .navbar-collapse {
        display: contents !important;
    }

    .site-nav .navbar-brand {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .site-nav .header-links {
        display: contents;
    }

    .site-nav .section-links {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }

    .site-nav .account-links {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
}

@media (max-width: 991.98px) {
    .site-nav .header-links {
        align-items: stretch;
        padding-top: 12px;
    }

    .site-nav .section-links,
    .site-nav .account-links {
        gap: 0;
    }

    .site-nav .account-links {
        border-top: 1px solid #dee2e6;
        padding-top: 6px;
    }
}

.site-nav .signed-in-account {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.site-nav .current-user {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--fx-steel-blue);
    text-decoration: none;
    text-align: left;
}

.site-nav .user-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e3e8ef;
}

.site-nav .user-details {
    min-width: 0;
}

.site-nav .user-details small {
    display: block;
    color: #657487;
    font-size: 11px;
}

.site-nav .user-name {
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

.site-nav .current-user:focus-visible {
    outline: 2px solid var(--fx-orange);
    outline-offset: 4px;
}

.site-nav .section-links .nav-link {
    color: var(--fx-steel-blue);
}

.site-nav .section-links .nav-link.active {
    color: #bd5800;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .site-nav .signed-in-account {
        justify-content: space-between;
        padding-top: 12px;
    }

    .site-nav .user-name {
        max-width: 230px;
        overflow-wrap: anywhere;
    }
}

/* 7. Home page and product carousel
   ----------------------------------------------------------------- */

.home-page .contact-status {
    margin-top: 14px;
}

.home-page {
    --navy: #223046;
    --steel: #1c3f68;
    --orange: #ff7a00;
    --paper: #f4f4f4;
    --muted: #657487;
    --border: #dce1e6;
}

.home-page a {
    color: inherit;
}

.home-page .btn {
    display: inline-block;
    border: 1px solid var(--navy);
    border-radius: 5px;
    background: var(--navy);
    color: white;
    padding: 10px 18px;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}

.home-page .btn.outline {
    background: transparent;
    color: var(--navy);
}

.home-page .btn:hover {
    background: var(--steel);
    color: white;
}

.home-page .btn:focus-visible,
.home-page a:focus-visible,
.home-page input:focus-visible,
.home-page textarea:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 4px;
}

.home-page section {
    background: var(--paper);
    border-radius: 20px;
    margin-bottom: 24px;
    padding: 44px;
}

.home-page .eyebrow {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
}

.home-page h1 {
    font-size: clamp(32px,3.6vw,50px);
    line-height: 1.14;
    letter-spacing: -1.8px;
    color: var(--navy);
    margin: 14px 0 20px;
    max-width: 600px;
}

.home-page h2 {
    font-size: 27px;
    line-height: 1.25;
    margin: 10px 0 14px;
    letter-spacing: -.5px;
    color: var(--navy);
}

.home-page h3 {
    font-size: 17px;
    margin: 0 0 10px;
}

.home-page p {
    color: var(--muted);
    margin: 0 0 20px;
}

.home-page .hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
    padding-top: 35px;
    padding-bottom: 35px;
}

.home-page .hero img {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
}

.home-page .actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 26px 0 16px;
}

.home-page .note {
    font-size: 12px;
    color: var(--muted);
}

.home-page .categories {
    border-top: 1px solid var(--border);
    margin-top: 26px;
    padding-top: 18px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--steel);
}

.home-page .section-intro {
    max-width: 630px;
}

.home-page .features {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 28px;
}

.home-page .card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 24px;
}

.home-page .card img {
    height: 32px;
    width: 36px;
    object-fit: contain;
    margin-bottom: 18px;
}

.home-page .card p {
    font-size: 14px;
    margin: 0;
}

.home-page .demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.home-page .demo-head p {
    margin-bottom: 0;
}

.home-page .preview {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.home-page .preview-bar {
    padding: 17px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.home-page .badge {
    background: #e9edf1;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 11px;
}

.home-page .preview-body {
    padding: 22px;
}

.home-page .preview-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 18px;
    font-size: 13px;
    overflow: auto;
}

.home-page .preview-tabs strong {
    color: #c85f00;
    position: relative;
}

.home-page .preview-tabs strong:after {
    content: '';
    position: absolute;
    height: 2px;
    background: var(--orange);
    bottom: -13px;
    left: 0;
    right: 0;
}

.home-page .scroll {
    overflow: auto;
}

.home-page table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
    font-size: 13px;
}

.home-page th {
    background: #e9ecef;
    text-align: left;
    font-weight: 600;
}

.home-page th,
.home-page td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.home-page .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.home-page .preview-total {
    text-align: right;
    padding-top: 20px;
    font-size: 13px;
}

.home-page .preview-total strong {
    font-size: 23px;
    display: block;
    color: var(--navy);
}

.home-page .plan-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 25px;
    align-items: center;
}

.home-page .plan-layout img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
}

.home-page .plans {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 25px;
}

.home-page .plan {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home-page .plan.featured {
    border-top: 3px solid var(--orange);
}

.home-page .price {
    font-size: 26px;
    color: var(--navy);
    font-weight: 650;
    line-height: 1.3;
    margin: 14px 0;
}

.home-page .price span {
    font-size: 12px;
    font-weight: 400;
}

.home-page .plan p {
    font-size: 12px;
    margin-bottom: 20px;
}

.home-page .plan .btn {
    font-size: 13px;
    margin-top: auto;
    width: 100%;
    text-align: center;
    padding: 8px;
}

.home-page .contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
}

.home-page label {
    display: block;
    font-size: 13px;
    margin-bottom: 15px;
}

.home-page  input,
.home-page  textarea {
    display: block;
    width: 100%;
    border: 1px solid #cbd1d7;
    border-radius: 5px;
    font: inherit;
    padding: 9px 12px;
    background: white;
    color: var(--steel);
    margin-top: 5px;
}

.home-page  textarea {
    resize: vertical;
}

.home-page .contact-copy {
    max-width: 380px;
}

.home-page .contact-copy .rule {
    height: 2px;
    background: var(--orange);
    width: 40px;
    margin: 28px 0;
}

.home-page .contact-copy ul {
    padding-left: 20px;
    color: var(--muted);
    font-size: 14px;
}

.home-page .contact-copy li {
    margin: 10px 0;
}

@media(max-width:1100px) {
    .home-page section {
        padding: 30px;
    }

    .home-page .plan-layout {
        grid-template-columns: 1fr;
    }

    .home-page .plan-layout>img {
        display: none;
    }

.home-page .contact {
        gap: 30px;
    }
}

@media(max-width:760px) {
.home-page nav .btn {
        padding: 6px 10px;
    }

    .home-page .hero,
    .home-page .contact {
        grid-template-columns: 1fr;
    }

    .home-page .hero {
        gap: 15px;
    }

    .home-page .hero img {
        max-height: 270px;
    }

    .home-page .features,
    .home-page .plans {
        grid-template-columns: 1fr;
    }

    .home-page .demo-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-page .preview-body {
        padding: 14px;
    }

    .home-page section {
        padding: 24px;
    }

    .home-page h1 {
        letter-spacing: -1px;
    }

    .home-page .plan .btn {
        width: auto;
    }
}

.home-page .pdf-handoff {
    margin-top: 20px;
}

.home-page {
    font: 15px/1.6 Inter,"Helvetica Neue",Arial,sans-serif;
    color: var(--steel);
}

.home-page section {
    scroll-margin-top: 24px;
}

.home-page input:focus-visible,
.home-page textarea:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 4px;
}

.home-page [hidden] {
    display: none!important;
}

.home-page .slide-caption {
    padding: 20px 0 8px;
}

.home-page .slide-caption p {
    margin: 0;
}

.home-page .carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 14px 0 20px;
}

.home-page .carousel-dots {
    display: flex;
    gap: 10px;
}

.home-page .carousel-dots button {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid var(--steel);
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.home-page .carousel-dots button[aria-current=true] {
    background: var(--orange);
    border-color: var(--orange);
}

.home-page button:focus-visible,
.home-page #demo-carousel:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 4px;
}

.home-page .catalog-rates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-top: 22px;
}

.home-page .catalog-rates>div {
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 16px;
}

.home-page .catalog-rates p {
    font-size: 13px;
    margin: 8px 0 0;
}

.home-page .pdf-stage {
    background: #e4e8ed;
    border-radius: 8px;
    padding: 26px;
}

.home-page .pdf-paper {
    background: white;
    max-width: 740px;
    margin: auto;
    padding: 30px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px #22304612;
}

.home-page .pdf-heading {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 12px;
    border-bottom: 2px solid var(--steel);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.home-page .pdf-heading strong {
    font-size: 22px;
}

.home-page .pdf-heading strong span {
    color: var(--orange);
}

.home-page .pdf-heading p {
    font-size: 10px;
    margin: 0;
}

.home-page .pdf-paper table {
    min-width: 0;
}

.home-page .pdf-paper .note {
    margin-top: 15px;
}

.home-page .signature {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-top: 30px;
    font-size: 12px;
}

.home-page .signature span {
    display: block;
    border-bottom: 1px solid #8994a3;
    margin-top: 24px;
}

@media(max-width:760px) {
    .home-page .pdf-stage {
        padding: 12px;
    }

    .home-page .pdf-paper {
        padding: 16px;
    }

    .home-page .catalog-rates {
        grid-template-columns: 1fr;
    }

    .home-page .carousel-controls {
        gap: 12px;
    }
}

.home-page .catalog-input {
    margin: 0;
    min-width: 80px;
    padding: 7px 9px;
    border: 1px solid #cbd1d7;
    border-radius: 5px;
    background: #fff;
    color: var(--steel);
    font-size: 13px;
}

.home-page .catalog-input[readonly] {
    cursor: default;
}

.home-page td:last-child .catalog-input {
    min-width: 180px;
}

/* 8. Account profile
   ----------------------------------------------------------------- */

.profile-page {
    background: var(--background-color, #f4f4f4);
    color: var(--fx-steel-blue, #1c3f68);
    border-radius: 20px;
    padding: 28px;
}

.profile-page .profile-heading {
    margin-bottom: 22px;
}

.profile-page .eyebrow {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #657487;
}

.profile-page h3 {
    font-size: 24px;
    font-weight: 600;
    margin: 4px 0 8px;
}

.profile-page p {
    color: #657487;
    font-size: 14px;
    margin: 0;
}

.profile-page .profile-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 7px;
    padding: 24px;
    max-width: 760px;
}

.profile-page .name-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.profile-page .form-label {
    font-size: 14px;
    font-weight: 500;
}

.profile-page .profile-card .form-control {
    border: 1px solid #cbd1d7;
    border-radius: 5px;
    padding: 9px 12px;
    color: #1c3f68;
}

.profile-page .profile-card .form-control:disabled {
    background: #e9ecef;
}

.profile-page .profile-card .form-control:focus {
    border-color: #1c3f68;
    box-shadow: 0 0 0 .2rem #1c3f681c;
}

.profile-page .profile-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
}

.profile-page .btn-primary {
    background: #223046;
    border-color: #223046;
    border-radius: 5px;
    padding: 9px 18px;
    font-size: 14px;
}

.profile-page .btn-primary:hover {
    background: #1c3f68;
    border-color: #1c3f68;
    color: white;
}

@media (max-width: 767.98px) {
    .profile-page {
        padding: 20px;
    }

    .profile-page .profile-card {
        padding: 18px;
    }

    .profile-page .name-fields {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* 9. Blazor reconnect dialog (runtime-managed states)
   ----------------------------------------------------------------- */

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
}

#components-reconnect-modal[open] {
    animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

#components-reconnect-modal button:hover {
    background-color: #3b6ea2;
}

#components-reconnect-modal button:active {
    background-color: #6b9ed2;
}

.components-rejoining-animation {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div {
    position: absolute;
    border: 3px solid #0087ff;
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* 10. Shared presentation helpers and catalog column sizes
   ----------------------------------------------------------------- */

.section-icon {
    color: #F08328;
}

.company-logo-preview {
    max-width: 280px;
    max-height: 160px;
    object-fit: contain;
}

.catalog-min-140 {
    min-width: 140px;
}

.catalog-min-100 {
    min-width: 100px;
}

.catalog-min-160 {
    min-width: 160px;
}

.catalog-min-220 {
    min-width: 220px;
}

.catalog-action-column {
    width: 55px;
}

.catalog-min-180 {
    min-width: 180px;
}

.catalog-min-130 {
    min-width: 130px;
}

.catalog-min-110 {
    min-width: 110px;
}

.catalog-min-150 {
    min-width: 150px;
}

/* 11. Job contact selection
   ----------------------------------------------------------------- */

.selectable-card {
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
}

.selectable-card:hover {
    border-color: #ccc;
}

.selectable-card.selected {
    border-color: #ff7a00;
    background-color: #fff7ef;
}

/* 12. Client management
   ----------------------------------------------------------------- */

.client-management {
    color: var(--fx-steel-blue);
}

.client-management h1 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.6px;
    margin: 4px 0 8px;
}

.client-management h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.client-management p {
    color: #657487;
    margin: 0;
    font-size: 14px;
}

.client-eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .1em;
    color: #657487;
}

.client-page-heading, .client-jobs-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.client-page-heading > .btn {
    white-space: nowrap;
}

.client-management .btn {
    border-radius: 5px;
    font-size: 13px;
}

.client-management .btn-primary:hover {
    background: #1c3f68;
    border-color: #1c3f68;
    color: white;
}

.client-management .form-control, .client-management .form-select {
    border-color: #cbd1d7;
    border-radius: 5px;
    color: var(--fx-steel-blue);
}

.client-management .form-label {
    font-size: 13px;
    font-weight: 500;
}

.client-management .form-text {
    font-size: 12px;
    color: #657487;
}

.client-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 28px 0 18px;
    align-items: end;
}

.client-search {
    flex: 1;
    max-width: 530px;
}

.client-list-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #657487;
    font-size: 12px;
    margin-bottom: 12px;
}

.client-list-head, .client-list-item > summary {
    display: grid;
    grid-template-columns: 28px minmax(0, 1.3fr) minmax(0, 1fr) 130px;
    gap: 16px;
}

.client-list-head {
    padding: 10px 20px;
    background: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 6px 6px 0 0;
    font-size: 12px;
    font-weight: 600;
}

.client-list-item {
    background: white;
    border: 1px solid #dee2e6;
    border-top: 0;
}

.client-list-item:last-child {
    border-radius: 0 0 6px 6px;
}

.client-list-item > summary {
    padding: 20px;
    cursor: pointer;
    list-style: none;
    align-items: center;
}

.client-list-item > summary::-webkit-details-marker {
    display: none;
}

.client-list-item > summary:hover {
    background: #f8f9fb;
}

.client-list-item > summary:focus-visible {
    outline: 2px solid var(--fx-orange);
    outline-offset: -2px;
}

.client-list-item[open] > summary {
    background: #f8f9fb;
    border-bottom: 1px solid #dee2e6;
}

.client-chevron {
    font-size: 20px;
    width: 20px;
    text-align: center;
    transition: transform .15s;
}

.client-list-item[open] .client-chevron {
    transform: rotate(90deg);
}

.client-business {
    display: block;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.client-secondary {
    display: block;
    font-size: 12px;
    color: #657487;
    margin-top: 3px;
}

.client-contact {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.client-job-count {
    justify-self: end;
    border-radius: 4px;
    background: #edf1f5;
    padding: 4px 9px;
    font-size: 12px;
    white-space: nowrap;
}

.client-detail-body {
    padding: 20px 24px 24px 64px;
}

.client-contact-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    margin-bottom: 20px;
    color: #657487;
    overflow-wrap: anywhere;
}

.client-contact-actions a {
    color: var(--fx-steel-blue);
}

.client-jobs-heading {
    margin-bottom: 16px;
}

.client-jobs-table {
    min-width: 530px;
    font-size: 13px;
    margin: 0;
}

.client-jobs-table th {
    background: #f0f2f5;
    font-size: 12px;
    font-weight: 600;
    color: var(--fx-steel-blue);
}

.client-jobs-table th, .client-jobs-table td {
    padding: 11px 12px;
}

.client-jobs-table a {
    color: var(--fx-steel-blue);
}

.client-empty {
    padding: 28px;
    border: 1px dashed #dee2e6;
    border-radius: 6px;
    text-align: center;
}

.client-empty p {
    margin: 8px 0 16px;
}

.client-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: #657487;
    font-size: 12px;
    margin-bottom: 22px;
}

.client-breadcrumb a {
    color: var(--fx-steel-blue);
}

.client-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 24px;
    margin-top: 28px;
    align-items: start;
}

.client-form-layout form, .client-form-layout fieldset {
    min-width: 0;
}

.client-form-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 7px;
    margin-bottom: 20px;
    overflow: hidden;
}

.client-form-section-heading {
    padding: 15px 22px;
    border-bottom: 1px solid #dee2e6;
    background: #f0f2f5;
}

.client-form-section-heading p {
    font-size: 12px;
    margin-top: 3px;
}

.client-form-body {
    padding: 22px;
}

.client-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.client-preview {
    padding: 22px;
    border: 1px solid #dee2e6;
    border-radius: 7px;
    background: white;
    overflow-wrap: anywhere;
}

.client-preview p {
    font-size: 13px;
    margin-top: 8px;
}

.client-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff0e3;
    color: #ad5100;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.client-preview-label {
    color: #657487;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 22px;
}

.client-save-bar {
    display: flex;
    justify-content: end;
    gap: 12px;
    border-top: 1px solid #dee2e6;
    padding-top: 22px;
}

@media (max-width: 1050px) {
    .client-list-head, .client-list-item > summary {
        grid-template-columns: 20px minmax(0, 1.2fr) minmax(0, 1fr) 90px;
        gap: 10px;
    }

    .client-detail-body {
        padding-left: 25px;
    }

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

    .client-preview {
        display: none;
    }

}

@media (max-width: 700px) {
    .client-page-heading, .client-jobs-heading {
        flex-direction: column;
        align-items: start;
    }

    .client-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .client-search {
        max-width: none;
    }

    .client-list-meta {
        flex-wrap: wrap;
    }

    .client-list-head {
        display: none;
    }

    .client-list-item {
        border-top: 1px solid #dee2e6;
        border-radius: 6px;
        margin-bottom: 12px;
    }

    .client-list-item > summary {
        grid-template-columns: 20px minmax(0, 1fr) auto;
        padding: 16px;
    }

    .client-contact {
        grid-column: 2;
        grid-row: 2;
    }

    .client-job-count {
        grid-column: 3;
        grid-row: 1;
    }

    .client-detail-body, .client-form-body {
        padding: 18px;
    }

    .client-field-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .client-save-bar .btn {
        flex: 1;
    }

}

/* 13. Pricing catalog management
   ----------------------------------------------------------------- */

.catalog-management {
    color: var(--fx-steel-blue);
}

.catalog-management h1 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.6px;
    margin: 4px 0 8px;
}

.catalog-management p {
    margin: 0;
    color: #657487;
    font-size: 14px;
}

.catalog-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #657487;
}

.catalog-page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.catalog-management .btn {
    border-radius: 5px;
    font-size: 13px;
    white-space: nowrap;
}

.catalog-management .btn-primary:hover {
    background: #1c3f68;
    border-color: #1c3f68;
    color: white;
}

.catalog-workflow-note {
    display: flex;
    gap: 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 16px 18px;
    margin: 26px 0 24px;
}

.catalog-workflow-note .bi {
    color: #bd5800;
    font-size: 19px;
}

.catalog-workflow-note p {
    font-size: 13px;
}

.catalog-workflow-note strong {
    color: var(--fx-steel-blue);
}

.catalog-status-tabs {
    gap: 28px;
    border-bottom: 1px solid #dee2e6;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.catalog-status-tabs .nav-link {
    white-space: nowrap;
    padding: 10px 0;
}

.catalog-tab-count {
    display: inline-block;
    background: #e7ebf0;
    color: #657487;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 7px;
    min-width: 20px;
    font-size: 11px;
    text-align: center;
}

.catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin: 22px 0 18px;
}

.catalog-search {
    flex: 1;
    max-width: 510px;
}

.catalog-management .form-label, .catalog-access-note {
    font-size: 12px;
    color: #657487;
}

.catalog-table-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 7px;
    overflow: hidden;
}

.catalog-management-table {
    min-width: 850px;
    font-size: 13px;
    margin: 0;
}

.catalog-management-table th {
    background: #e9ecef;
    font-size: 12px;
    color: var(--fx-steel-blue);
    font-weight: 600;
}

.catalog-management-table th, .catalog-management-table td {
    padding: 16px;
    vertical-align: middle;
}

.catalog-management-table .catalog-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--fx-steel-blue);
    text-decoration: none;
}

.catalog-management-table .catalog-name:hover {
    text-decoration: underline;
}

.catalog-secondary {
    display: block;
    color: #657487;
    font-size: 12px;
    margin-top: 4px;
}

.catalog-status {
    display: inline-block;
    font-size: 11px;
    border-radius: 4px;
    padding: 4px 8px;
    white-space: nowrap;
}

.catalog-status.draft {
    background: #fff0e3;
    color: #a94e00;
}

.catalog-status.active {
    background: #e7efe9;
    color: #356143;
}

.catalog-status.archived {
    background: #edf0f3;
    color: #657487;
}

.catalog-menu {
    min-width: 45px;
    text-align: right;
}

.catalog-menu summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 5px 11px;
    font-size: 16px;
}

.catalog-menu summary::-webkit-details-marker {
    display: none;
}

.catalog-menu[open] summary {
    background: #edf1f5;
}

.catalog-menu summary:focus-visible {
    outline: 2px solid var(--fx-orange);
    outline-offset: 3px;
}

.catalog-menu-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 6px;
    margin-top: 8px;
    max-width: 250px;
}

.catalog-menu-actions button {
    font-size: 12px;
    padding: 5px 8px;
    border: 1px solid #cbd1d7;
    border-radius: 4px;
    background: white;
    color: var(--fx-steel-blue);
}

.catalog-menu-actions button:hover {
    background: #e9edf2;
}

.catalog-menu-actions button:disabled {
    opacity: .5;
}

.catalog-menu-actions .catalog-archive-action {
    color: #a94e00;
    border-color: #e6b990;
}

.catalog-table-footer {
    padding: 14px 16px;
    font-size: 12px;
    color: #657487;
}

.catalog-empty {
    padding: 36px;
    text-align: center;
}

.catalog-empty p {
    margin-bottom: 14px;
}

.catalog-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    color: #657487;
    font-size: 12px;
    margin-top: 18px;
}

.catalog-legend strong {
    color: var(--fx-steel-blue);
    font-weight: 500;
}

.catalog-management .catalog-notice {
    color: var(--fx-steel-blue);
    font-size: 13px;
    margin-top: 16px;
}

@media (max-width: 700px) {
    .catalog-page-heading, .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .catalog-search {
        max-width: none;
    }

    .catalog-status-tabs {
        gap: 20px;
    }

    .catalog-legend {
        gap: 10px;
    }

}

/* 14. Job management */

.job-management {
    color: var(--fx-steel-blue);
}

.job-management h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 4px 0 8px;
    letter-spacing: -.6px;
}

.job-management p {
    margin: 0;
    color: #657487;
    font-size: 14px;
}

.job-eyebrow {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #657487;
}

.job-page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.job-management .btn {
    border-radius: 5px;
    font-size: 13px;
    white-space: nowrap;
}

.job-toolbar {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 220px 180px;
    gap: 18px;
    align-items: end;
    margin: 28px 0 18px;
}

.job-toolbar .form-label {
    font-size: 12px;
    color: #657487;
}

.job-table-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 7px;
    overflow: hidden;
}

.job-management-table {
    min-width: 1050px;
    margin: 0;
    font-size: 13px;
}

.job-management-table th {
    background: #e9ecef;
    color: var(--fx-steel-blue);
    font-size: 12px;
    font-weight: 600;
}

.job-management-table td, .job-management-table th {
    padding: 14px 16px;
    vertical-align: middle;
}

.job-management-table a {
    color: var(--fx-steel-blue);
}

.job-name {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.job-name:hover {
    text-decoration: underline;
}

.job-secondary {
    display: block;
    color: #657487;
    font-size: 12px;
    margin-top: 4px;
}

.job-missing {
    display: inline-block;
    background: #fff0e3;
    color: #a94e00;
    font-size: 11px;
    border-radius: 4px;
    padding: 3px 7px;
}

.job-row-actions {
    display: flex;
    gap: 7px;
}

.job-table-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    color: #657487;
    font-size: 12px;
}

.job-empty {
    padding: 36px;
    text-align: center;
}

.job-empty p {
    margin-bottom: 14px;
}

.job-management .job-access-note {
    color: #657487;
    font-size: 12px;
    margin-top: 18px;
}

.job-management .job-notice {
    color: var(--fx-steel-blue);
    font-size: 13px;
    margin-top: 16px;
}

@media (max-width: 1050px) {
    .job-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .job-search {
        grid-column: 1 / -1;
    }

}

@media (max-width: 700px) {
    .job-page-heading {
        flex-direction: column;
        align-items: start;
    }

    .job-toolbar {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .job-table-footer {
        flex-direction: column;
        gap: 4px;
    }

}

/* Add job form */
.job-create-card {
    max-width: 680px;
    margin-top: 28px;
    padding: 28px;
    background: white;
    border: 1px solid #dce1e6;
    border-radius: 7px;
}
.job-create-card .form-label { font-size: 13px; font-weight: 600; }
.job-create-card .form-control, .job-create-card .form-select { font-size: 14px; color: var(--fx-steel-blue); }
.job-create-card .form-text { font-size: 12px; color: #657487; }
@media (max-width: 700px) { .job-create-card { padding: 20px 16px; } }

/* 15. Dashboard
   ----------------------------------------------------------------- */
.dashboard-page { color: var(--fx-steel-blue); }
.dashboard-heading, .dashboard-toolbar, .dashboard-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dashboard-eyebrow { text-transform: uppercase; font-size: 11px; letter-spacing: .1em; color: #657487; }
.dashboard-page h1 { font-size: 28px; letter-spacing: -.6px; color: var(--page-background-color); margin: 4px 0 8px; }
.dashboard-page h2 { font-size: 18px; margin: 0; }
.dashboard-page p { color: #657487; font-size: 14px; margin: 0; }
.dashboard-page .btn { font-size: 13px; padding: 9px 14px; border-radius: 5px; }
.dashboard-page .btn-primary { background: var(--page-background-color); border-color: var(--page-background-color); }
.dashboard-page .btn-outline-secondary { color: var(--page-background-color); border-color: var(--page-background-color); }
.dashboard-page .btn:hover { background: var(--fx-steel-blue); border-color: var(--fx-steel-blue); color: white; }
.dashboard-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 28px 0 34px; }
.dashboard-shortcut { background: white; border: 1px solid #dce1e6; border-radius: 7px; padding: 22px; display: flex; flex-direction: column; }
.dashboard-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dashboard-card-heading h2 { font-size: 16px; }
.dashboard-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; background: #fff0e3; color: #b95400; border-radius: 7px; font-size: 21px; }
.dashboard-shortcut p { font-size: 13px; margin-bottom: 18px; }
.dashboard-card-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.dashboard-page a { color: var(--fx-steel-blue); }
.dashboard-page a.btn-primary { color: white; }
.dashboard-text-link { font-size: 13px; text-underline-offset: 4px; }
.dashboard-jobs { background: white; border: 1px solid #dce1e6; border-radius: 7px; overflow: hidden; }
.dashboard-toolbar { padding: 20px; flex-wrap: wrap; }
.dashboard-toolbar p { font-size: 12px; margin-top: 4px; }
.dashboard-search { width: 230px; max-width: 100%; font-size: 13px; }
.dashboard-jobs-table { width: 100%; min-width: 570px; margin: 0; }
.dashboard-jobs-table th { background: #e9ecef; font-size: 12px; font-weight: 600; }
.dashboard-jobs-table th, .dashboard-jobs-table td { padding: 14px 20px; border-color: #dce1e6; color: var(--fx-steel-blue); vertical-align: middle; }
.dashboard-jobs-table td { font-size: 13px; }
.dashboard-job-name { font-weight: 600; text-decoration: none; }
.dashboard-job-name:hover { text-decoration: underline; }
.dashboard-table-footer { padding: 14px 20px; font-size: 12px; color: #657487; flex-wrap: wrap; }
.dashboard-empty { text-align: center; padding: 30px; }
.dashboard-page a:focus-visible, .dashboard-page button:focus-visible, .dashboard-page input:focus-visible { outline: 3px solid var(--fx-orange); outline-offset: 3px; }
@media (max-width: 1150px) { .dashboard-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .dashboard-heading { align-items: flex-start; flex-direction: column; }
    .dashboard-shortcuts { grid-template-columns: 1fr; }
    .dashboard-search { width: 100%; }
}

/* 16. Company profile
   ----------------------------------------------------------------- */
.company-profile-page { color: var(--fx-steel-blue); }
.company-profile-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.company-profile-eyebrow { text-transform: uppercase; font-size: 11px; letter-spacing: .1em; color: #657487; }
.company-profile-page h1 { font-size: 28px; letter-spacing: -.6px; margin: 4px 0 8px; color: var(--page-background-color); }
.company-profile-page h2 { font-size: 16px; margin: 0; }
.company-profile-page p { font-size: 14px; color: #657487; margin: 0; }
.company-profile-page .btn { font-size: 13px; border-radius: 5px; padding: 9px 14px; }
.company-profile-page .btn-primary { background: var(--page-background-color); border-color: var(--page-background-color); }
.company-profile-page .btn-outline-secondary { color: var(--page-background-color); border-color: var(--page-background-color); }
.company-profile-page .btn-primary:hover, .company-profile-page .btn-outline-secondary:hover { background: var(--fx-steel-blue); border-color: var(--fx-steel-blue); color: white; }
.company-profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-top: 28px; }
.company-profile-page fieldset, .company-profile-layout > * { min-width: 0; }
.company-profile-card { background: white; border: 1px solid #dee2e6; border-radius: 7px; margin-bottom: 20px; overflow: hidden; }
.company-profile-card-heading { background: #f0f2f5; border-bottom: 1px solid #dee2e6; padding: 15px 22px; }
.company-profile-card-heading p { font-size: 12px; margin-top: 3px; }
.company-profile-card-body { padding: 22px; }
.company-profile-card-body > .mb-3:last-child { margin-bottom: 0 !important; }
.company-profile-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.company-profile-page .form-label { font-size: 13px; font-weight: 600; }
.company-profile-page .form-control { font-size: 14px; color: var(--fx-steel-blue); }
.company-profile-page .form-text { font-size: 12px; color: #657487; }
.company-profile-logo-box { min-height: 160px; display: grid; place-items: center; background: #f7f8fa; border: 1px dashed #cbd1d7; border-radius: 5px; padding: 16px; margin-bottom: 20px; }
.company-profile-logo-box img { max-width: 100%; object-fit: contain; }
.company-profile-logo-empty { text-align: center; color: #657487; }
.company-profile-logo-empty i { font-size: 36px; }
.company-profile-logo-empty p { font-size: 12px; margin-top: 8px; }
.company-profile-actions { display: flex; justify-content: flex-end; gap: 10px; }
.company-profile-page .company-profile-access { font-size: 13px; margin-top: 20px; }
.company-profile-page a:focus-visible, .company-profile-page button:focus-visible, .company-profile-page input:focus-visible { outline: 3px solid var(--fx-orange); outline-offset: 3px; }
@media (max-width: 1000px) { .company-profile-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
    .company-profile-heading { flex-direction: column; align-items: flex-start; }
    .company-profile-field-grid { grid-template-columns: 1fr; }
    .company-profile-card-body, .company-profile-card-heading { padding: 18px; }
}

/* 17. Company members
   ----------------------------------------------------------------- */
.company-members-page { color: var(--fx-steel-blue); }
.company-members-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.company-members-eyebrow { text-transform: uppercase; font-size: 11px; letter-spacing: .1em; color: #657487; }
.company-members-page h1 { font-size: 28px; letter-spacing: -.6px; margin: 4px 0 8px; color: var(--page-background-color); }
.company-members-page h2 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 8px; }
.company-members-page p { color: #657487; font-size: 14px; margin: 0; }
.company-members-page .btn { font-size: 13px; padding: 9px 14px; border-radius: 5px; }
.company-members-page .btn-sm { padding: 6px 10px; font-size: 12px; }
.company-members-page .btn-primary { background: var(--page-background-color); border-color: var(--page-background-color); }
.company-members-page .btn-outline-secondary { color: var(--page-background-color); border-color: var(--page-background-color); }
.company-members-page .btn-primary:hover, .company-members-page .btn-outline-secondary:hover { background: var(--fx-steel-blue); border-color: var(--fx-steel-blue); color: white; }
.company-members-actions, .company-members-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.company-members-card { background: white; border: 1px solid #dee2e6; border-radius: 7px; overflow: hidden; margin-bottom: 24px; }
.company-members-card-heading { padding: 15px 22px; background: #f0f2f5; border-bottom: 1px solid #dee2e6; }
.company-members-card-heading p { font-size: 12px; margin-top: 4px; }
.company-members-count { background: #e3e8ef; border-radius: 4px; padding: 3px 8px; font-size: 12px; }
.company-members-invite-body { padding: 22px; max-width: 640px; }
.company-members-page .form-label { font-size: 13px; font-weight: 600; }
.company-members-page .form-control, .company-members-page .form-select { font-size: 14px; color: var(--fx-steel-blue); }
.company-members-table { margin: 0; min-width: 620px; }
.company-members-table th { background: #e9ecef; font-size: 12px; font-weight: 600; }
.company-members-table th, .company-members-table td { padding: 14px 22px; border-color: #dee2e6; color: var(--fx-steel-blue); vertical-align: middle; }
.company-members-table td { font-size: 13px; }
.company-members-table .form-select { max-width: 190px; font-size: 13px; }
.company-members-email { font-weight: 600; overflow-wrap: anywhere; }
.company-members-role { display: inline-block; background: #e9edf1; border-radius: 4px; font-size: 12px; padding: 4px 9px; }
.company-members-confirm { margin: 20px 22px; }
.company-members-confirm p { color: inherit; margin-bottom: 10px; }
.company-members-page a:focus-visible, .company-members-page button:focus-visible, .company-members-page input:focus-visible, .company-members-page select:focus-visible { outline: 3px solid var(--fx-orange); outline-offset: 3px; }
@media (max-width: 700px) {
    .company-members-heading { flex-direction: column; align-items: flex-start; }
    .company-members-card-heading, .company-members-invite-body { padding: 18px; }
}

/* 18. Job estimate and footing workspace
   ----------------------------------------------------------------- */
.job-estimate-page { color: var(--fx-steel-blue); }
.job-estimate-heading, .estimate-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.job-estimate-heading { align-items: flex-start; margin-bottom: 24px; }
.estimate-eyebrow { text-transform: uppercase; font-size: 11px; letter-spacing: .1em; color: #657487; }
.job-estimate-page h1 { font-size: 26px; letter-spacing: -.6px; color: var(--page-background-color); margin: 4px 0 8px; }
.job-estimate-page p { color: #657487; font-size: 14px; margin: 0; }
.estimate-heading-actions, .estimate-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.job-estimate-page .btn { border-radius: 5px; font-size: 13px; padding: 8px 13px; }
.job-estimate-page .btn-primary { background: var(--page-background-color); border-color: var(--page-background-color); }
.job-estimate-page .btn-outline-secondary { color: var(--page-background-color); border-color: var(--page-background-color); }
.job-estimate-page .btn-primary:hover, .job-estimate-page .btn-outline-secondary:hover { background: var(--fx-steel-blue); color: white; border-color: var(--fx-steel-blue); }
.job-contact-strip { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 20px; padding: 18px 20px; border: 1px solid #dee2e6; border-radius: 7px; background: white; margin-bottom: 24px; }
.job-contact-strip h2 { font-size: 12px; font-weight: 500; color: #657487; margin: 0 0 6px; }
.job-contact-strip strong { display: block; font-size: 14px; }
.job-contact-strip a { display: block; font-size: 14px; color: var(--fx-steel-blue); overflow-wrap: anywhere; }
.job-contact-strip p { margin-top: 3px; }
.job-estimate-tabs > .nav { flex-wrap: nowrap; overflow-x: auto; gap: 32px; border-bottom: 1px solid #dee2e6; margin-bottom: 24px; }
.job-estimate-tabs > .nav .nav-link { color: var(--fx-steel-blue); font-size: 16px; white-space: nowrap; padding: 10px 0; }
.job-estimate-tabs > .nav .nav-link.active { border-bottom-color: var(--fx-orange); color: #b95400; }
.footing-estimate-page { min-width: 0; }
.estimate-section { background: white; border: 1px solid #dee2e6; border-radius: 7px; margin-bottom: 24px; overflow: hidden; }
.estimate-section-heading { padding: 20px; flex-wrap: wrap; }
.estimate-section-heading h2 { font-size: 18px; margin: 0; }
.estimate-collapsible > summary { cursor: pointer; list-style: none; flex-wrap: nowrap; }
.estimate-collapsible > summary::-webkit-details-marker { display: none; }
.estimate-collapsible > summary::after { content: ""; width: 9px; height: 9px; flex-shrink: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 4px; }
.estimate-collapsible[open] > summary::after { transform: rotate(225deg); }
.estimate-collapsible > summary:hover { background: #f8f9fa; }
.estimate-collapsible > summary:focus-visible { outline: 2px solid #0d6efd; outline-offset: -3px; }
.estimate-section-actions { display: flex; justify-content: flex-end; padding: 0 20px 20px; }
.estimate-section-heading p { font-size: 12px; margin-top: 4px; }
.estimate-table { min-width: 1000px; margin: 0; }
.estimate-table th { background: #e9ecef; font-size: 12px; font-weight: 600; white-space: nowrap; }
.estimate-table th, .estimate-table td { color: var(--fx-steel-blue); padding: 11px 12px; border-color: #dee2e6; vertical-align: middle; font-size: 13px; }
.estimate-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.estimate-table .form-control, .estimate-table .form-select { font-size: 13px; min-width: 85px; color: var(--fx-steel-blue); }
.footing-concrete-table td:first-child { width: 26%; min-width: 230px; }
.footing-concrete-table td:nth-child(2) { min-width: 155px; }
.footing-concrete-table td:nth-child(3) { min-width: 115px; }
.estimate-subtotal { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 30px; padding: 18px 20px; font-size: 14px; }
.estimate-muted { color: #657487; font-size: 12px; font-weight: 400; }
.estimate-layer-tabs { padding: 0 20px; border-bottom: 1px solid #dee2e6; gap: 24px; }
.estimate-layer-tabs .nav-link { font-size: 14px; color: var(--fx-steel-blue); }
.estimate-layer-tabs .nav-link.active { color: #b95400; border-bottom-color: var(--fx-orange); }
.estimate-rebar-group { padding-top: 20px; }
.estimate-rebar-group h3 { font-size: 14px; margin: 0; padding: 0 20px 14px; }
.estimate-rebar-table td:first-child { min-width: 220px; }
.estimate-rebar-table td:has(select[aria-label="Reinforcing pricing method"]) { min-width: 190px; }
.estimate-dowel-table { min-width: 1200px; }
.estimate-other-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0 20px 20px; }
.estimate-allowance { border: 1px solid #dee2e6; border-radius: 6px; padding: 18px; min-width: 0; }
.estimate-allowance h3 { font-size: 16px; margin: 0 0 18px; }
.estimate-allowance .form-label { font-size: 13px; }
.estimate-allowance .form-control, .estimate-allowance .form-select { font-size: 14px; color: var(--fx-steel-blue); }
.estimate-cost-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-top: 12px; }
.estimate-summary { background: #e9ecef; border: 1px solid #dee2e6; border-radius: 7px; padding: 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.estimate-breakdown { display: flex; gap: 36px; flex-wrap: wrap; }
.estimate-summary span { display: block; font-size: 12px; color: #657487; margin-bottom: 4px; }
.estimate-total { text-align: right; }
.estimate-total strong { font-size: 28px; color: var(--page-background-color); }
.footing-estimate-page .estimate-empty { padding: 24px 20px; font-size: 13px; }
.footing-estimate-page .estimate-access-note { font-size: 12px; margin-bottom: 18px; }
.job-estimate-page a:focus-visible, .job-estimate-page button:focus-visible, .job-estimate-page input:focus-visible, .job-estimate-page select:focus-visible { outline: 3px solid var(--fx-orange); outline-offset: 3px; }
@media (max-width: 1150px) { .job-estimate-heading { flex-direction: column; } .estimate-other-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .job-contact-strip { grid-template-columns: 1fr; } .estimate-summary { flex-direction: column; align-items: stretch; } .estimate-total { text-align: left; } }
@media (max-width: 600px) { .estimate-heading-actions { width: 100%; } .estimate-heading-actions .btn { flex: 1; white-space: nowrap; } .estimate-breakdown { gap: 18px; } }

/* Estimate loading feedback */
.estimate-loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    min-height: 320px;
    padding: 48px 24px;
    border: 1px solid #dee2e6;
    border-radius: 7px;
    background: white;
    text-align: center;
    color: var(--fx-steel-blue);
}
.estimate-loading strong { display: block; font-size: 18px; font-weight: 600; }
.estimate-loading p { margin: 8px 0 0; font-size: 14px; color: #657487; }
.estimate-loading-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid #e3e8ef;
    border-top-color: var(--fx-orange);
    border-radius: 50%;
    animation: estimate-loading-spin .9s linear infinite;
}
@keyframes estimate-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .estimate-loading-spinner { animation: none; } }

/* 19. Wall estimate workspace (shared estimate cards and tables above) */
.wall-estimate-page { min-width: 0; }
.wall-estimate-page .estimate-empty { padding: 24px 20px; font-size: 13px; }
.wall-estimate-page .estimate-access-note { font-size: 12px; margin-bottom: 18px; }
.wall-concrete-table td:first-child, .wall-extras-table td:first-child { min-width: 230px; width: 26%; }
.wall-concrete-table td:nth-child(2) { min-width: 155px; }
.wall-concrete-table td:nth-child(3), .wall-extras-table td:nth-child(4) { min-width: 115px; }
.wall-rebar-table { min-width: 1100px; }
.wall-rebar-table td:first-child { min-width: 220px; }
.wall-rebar-table td:has(select[aria-label="Wall reinforcing pricing method"]) { min-width: 190px; }

/* 20. Pad estimate workspace (shared estimate cards and tables above) */
.pad-estimate-page { min-width: 0; }
.pad-estimate-page .estimate-empty { padding: 24px 20px; font-size: 13px; }
.pad-estimate-page .estimate-access-note { font-size: 12px; margin-bottom: 18px; }
.pad-concrete-table td:first-child { min-width: 230px; width: 26%; }
.pad-concrete-table td:nth-child(2) { min-width: 155px; }
.pad-concrete-table td:nth-child(3) { min-width: 100px; }
.pad-rebar-table { min-width: 1200px; }
.pad-rebar-table td:first-child { min-width: 220px; }
.pad-rebar-table td:has(select[aria-label="Pad reinforcing pricing method"]) { min-width: 190px; }

/* 21. Column and pier estimate workspaces */
.column-estimate-page, .pier-estimate-page { min-width: 0; }
.column-estimate-page .estimate-empty, .pier-estimate-page .estimate-empty { padding: 24px 20px; font-size: 13px; }
.column-estimate-page .estimate-access-note, .pier-estimate-page .estimate-access-note { font-size: 12px; margin-bottom: 18px; }
.column-concrete-table td:first-child, .pier-concrete-table td:first-child { min-width: 230px; width: 26%; }
.column-concrete-table td:nth-child(2), .pier-concrete-table td:nth-child(2) { min-width: 155px; }
.column-concrete-table td:nth-child(3), .pier-concrete-table td:nth-child(3) { min-width: 100px; }
.upright-rebar-table { min-width: 1050px; }
.upright-rebar-table td:first-child { min-width: 220px; }
.upright-rebar-table td:has(select[aria-label="Reinforcing pricing method"]) { min-width: 190px; }