html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

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

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

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+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."
    }

.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;
}
#blazor-error-ui { display: none; }

body { margin: 0; background: #f5f7fa; color: #182b3f; }
.container-fluid { max-width: 1600px; }
.workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 1.5rem; }
.workspace-heading h1 { margin: 0; font-size: 1.7rem; font-weight: 650; }
.heading-subtitle { margin: .3rem 0 0; color: #607286; }
.eyebrow { margin: 0 0 .25rem; color: #32668e; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.orders-workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.clients-panel, .orders-panel { min-width: 0; background: white; border: 1px solid #dfe5eb; border-radius: 10px; box-shadow: 0 2px 9px rgb(21 49 73 / 5%); }
.clients-panel { padding: 1rem; }
.panel-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: .8rem; }
.panel-header h2 { font-size: 1rem; margin: 0; font-weight: 650; }
.panel-header small { color: #6c7885; }
.client-search { margin-bottom: .8rem; }
.client-list { display: flex; flex-direction: column; gap: .3rem; max-height: 70vh; overflow-y: auto; }
.client-item { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 7px; text-align: left; padding: .7rem .75rem; color: #25384a; }
.client-item strong, .client-item span { display: block; }
.client-item strong { font-size: .9rem; font-weight: 600; }
.client-item span { color: #768492; font-size: .78rem; }
.client-item:hover { background: #f3f7fa; }
.client-item.selected { background: #e9f2fb; border-color: #b8d2e9; color: #125989; }
.orders-panel { padding: 0 1.2rem 1.2rem; }
.order-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid #dfe5eb; margin-bottom: 1.2rem; }
.order-tabs button { border: 0; border-bottom: 3px solid transparent; padding: 1rem .2rem .75rem; background: transparent; color: #627487; font-weight: 600; }
.order-tabs button.active { border-color: #1b6ec2; color: #174f80; }
.section-heading { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.1rem; }
.section-heading h2 { font-size: 1.3rem; font-weight: 650; margin: 0; }
.section-heading p { margin: .3rem 0 0; color: #657789; font-size: .88rem; }
.period-controls { display: flex; gap: .6rem; }
.period-controls label { color: #526578; font-size: .8rem; }
.period-controls .form-select { min-width: 120px; margin-top: .2rem; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; padding: .75rem 0; border-top: 1px solid #edf0f3; }
.list-toolbar strong { font-size: .88rem; color: #526578; }
.list-filters { display: flex; gap: .5rem; }
.list-filters .form-select { width: 190px; }
.list-filters .form-control { width: 220px; }
.orders-grid { width: 100%; }
.row-actions { display: flex; flex-wrap: nowrap; gap: .35rem; }
.row-actions .btn { white-space: nowrap; }
.status-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .3rem .6rem; white-space: nowrap; font-size: .78rem; font-weight: 650; }
.status-badge.finished { background: #e5f5eb; color: #166534; }
.status-badge.sent { background: #e7eefb; color: #194f9a; }
.status-badge.draft { background: #fff1d8; color: #8a5700; }
.empty-orders { text-align: center; border: 1px dashed #cbd5df; border-radius: 8px; padding: 3rem 1rem; color: #607286; }
.empty-orders h3 { font-size: 1rem; color: #263d51; }
.loading-note { color: #607286; padding: 1rem 0; }
.action-panel { display: flex; align-items: end; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; padding: 1rem; border: 1px solid #c9ddec; border-radius: 8px; background: #f4f9fd; }
.action-panel h3 { margin: 0; font-size: 1rem; }
.action-panel p { margin: .2rem 0 0; color: #627487; font-size: .85rem; }
.action-panel label { font-size: .8rem; color: #526578; }
.action-panel .form-control { margin-top: .2rem; }
.login-card { max-width: 420px; margin: 5vh auto; padding: 2rem; border: 1px solid #dfe5eb; border-radius: 10px; background: white; box-shadow: 0 4px 20px rgb(21 49 73 / 7%); }
.login-card h1 { font-size: 1.5rem; }
.login-card p { color: #647687; }
.login-card label { display: block; font-size: .85rem; font-weight: 600; margin: 1rem 0 .3rem; }
.login-card .btn { width: 100%; margin-top: 1rem; }

@media (max-width: 900px) {
    .orders-workspace { grid-template-columns: 1fr; }
    .client-list { max-height: 180px; }
    .list-filters { width: 100%; }
    .list-filters .form-control { flex: 1; min-width: 0; }
}

@media print {
    header, .no-print, #blazor-error-ui { display: none !important; }
    main { padding: 0 !important; }
    .card { break-inside: avoid; }
}

/* Command workspace */
:root { --en-ink: #1d282c; --en-teal: #087f8d; --en-line: #dfe5e5; --en-muted: #617075; }
html, body { font-family: Inter, "Segoe UI", Arial, sans-serif; }
body { background: #f5f7f6; color: var(--en-ink); }
.container-fluid { max-width: 1680px; }
.app-shell { padding: 0 0 1.5rem; }
.app-topbar { height: 68px; background: #080a0b; color: #fff; }
.topbar-inner { width: 100%; max-width: 1680px; height: 100%; margin: 0 auto; padding: 0 1.8rem; display: flex; align-items: center; justify-content: space-between; }
.app-content { padding: 1rem 1.8rem 0; }
.brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; color: #fff; line-height: 1; }
.brand:hover { color: #fff; opacity: .85; }
.brand-logo { display: block; width: 72px; height: 56px; object-fit: contain; filter: invert(1); }
.brand-section { padding-left: .85rem; border-left: 1px solid #596063; color: #e5e9e9; font-size: .84rem; font-weight: 600; letter-spacing: .035em; }
.topbar-context { color: #d0d4d5; font-size: .8rem; letter-spacing: .035em; }
.btn-primary { background: #151b1d; border-color: #151b1d; }
.btn-primary:hover, .btn-primary:focus { background: #343e42; border-color: #343e42; }
.order-tabs button.active { border-color: #161d20; color: #161d20; }
.client-item.selected { background: #edf3f2; border-color: #b9d2d0; color: #1c4144; }
.btn-outline-primary { color: var(--en-teal); border-color: #9fcbd0; }
.btn-outline-primary:hover { background: var(--en-teal); border-color: var(--en-teal); }
.eyebrow { color: var(--en-teal); }
.workspace-heading { margin-bottom: .9rem; }
.workspace-heading h1 { font-size: 1.4rem; }
.orders-workspace { gap: .8rem; grid-template-columns: 250px minmax(0, 1fr); }
.clients-panel, .orders-panel, .detail-panel { border-color: var(--en-line); box-shadow: 0 2px 12px rgb(18 67 78 / 4%); }
.clients-panel { padding: .8rem; }
.orders-panel { padding: 0 .9rem .9rem; }
.client-item { padding: .55rem .6rem; }
.order-tabs { margin-bottom: .8rem; }
.order-tabs button { padding: .7rem .15rem .55rem; }
.section-heading { margin-bottom: .75rem; }
.list-toolbar { padding: .55rem 0; }

.return-link { display: inline-block; color: var(--en-teal); font-size: .82rem; font-weight: 600; margin: 0 0 .75rem; text-decoration: none; }
.return-link:hover { text-decoration: underline; }
.detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.detail-heading .eyebrow { margin-bottom: .15rem; }
.detail-title-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.detail-title-row h1 { font-size: 1.55rem; line-height: 1.25; margin: 0; font-weight: 700; }
.detail-meta { margin: .15rem 0 0; color: var(--en-muted); font-size: .8rem; }
.detail-meta span { padding: 0 .2rem; }
.detail-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.detail-actions .btn { white-space: nowrap; }
.detail-alert { padding: .55rem .8rem; margin-bottom: .65rem; font-size: .85rem; }
.duplicate-source { font-size: .86rem; margin-bottom: .45rem; }
.duplicate-explanation { color: var(--en-muted); font-size: .81rem; margin-bottom: .9rem; }
.duplicate-date-label { display: block; font-size: .78rem; font-weight: 650; margin-bottom: .25rem; }
.duplicate-popup-actions { width: 100%; display: flex; justify-content: flex-end; gap: .45rem; }
.detail-panel { min-width: 0; background: white; border: 1px solid var(--en-line); border-radius: 10px; padding: .8rem; margin-bottom: .75rem; }
.detail-section-title { display: flex; align-items: start; justify-content: space-between; gap: .8rem; margin-bottom: .65rem; }
.detail-section-title h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.detail-section-title p { margin: .15rem 0 0; color: var(--en-muted); font-size: .76rem; }
.compact-grid { width: 100%; font-size: .82rem; }
.compact-grid table td, .compact-grid table th { padding-top: .35rem; padding-bottom: .35rem; }
.grid-quantity { width: 76px; height: 30px; border: 1px solid #b7cbd0; border-radius: 6px; padding: 2px 7px; color: var(--en-ink); background: white; font-size: .82rem; }
.grid-quantity:focus { outline: 2px solid #9ad4d9; outline-offset: 1px; }
.grid-quantity:disabled { color: var(--en-muted); background: #f2f5f5; }
.numeric-cell { font-variant-numeric: tabular-nums; }
.grid-delete { border: 0; background: transparent; color: #ad4850; font-size: 1.25rem; line-height: 1; width: 28px; height: 28px; border-radius: 6px; }
.grid-delete:hover { background: #fceced; }
.order-totals { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .4rem .7rem; padding-top: .7rem; border-top: 1px solid var(--en-line); margin-top: .35rem; }
.order-totals > div { display: flex; align-items: center; gap: .65rem; padding: .42rem .7rem; border-radius: 7px; background: #f4f8f8; min-width: 180px; justify-content: space-between; }
.order-totals span { color: var(--en-muted); font-size: .76rem; }
.order-totals strong { font-size: .89rem; font-variant-numeric: tabular-nums; }
.order-totals .grand-total { background: #dff1f0; color: #0c5962; }
.order-totals .grand-total span { color: #0c5962; font-weight: 650; }
.article-popup-intro { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin: 0 0 .7rem; }
.article-popup-intro p { margin: 0; color: var(--en-muted); font-size: .82rem; }
.catalog-filters { display: flex; align-items: end; gap: .65rem; flex-wrap: wrap; padding: .6rem .7rem; margin-bottom: .65rem; border: 1px solid var(--en-line); border-radius: 7px; background: #f4f7f6; }
.catalog-filters label { display: grid; gap: .2rem; min-width: 190px; font-size: .75rem; font-weight: 650; }
.catalog-filters .form-select { min-width: 190px; }
.catalog-filter-count { margin-left: auto; color: var(--en-muted); font-size: .76rem; white-space: nowrap; }
.article-popup .dxbl-popup-body { min-width: 0; overflow-x: auto; }
.article-picker-grid { min-width: 930px; }
.article-picker-grid .dxbl-grid-filter-row td { background-color: #eef3f2 !important; }
.article-check { width: 1.05rem; height: 1.05rem; cursor: pointer; border-color: #8aaeb4; }
.article-check:checked { background-color: var(--en-teal); border-color: var(--en-teal); }
.catalog-footer { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .83rem; }
.catalog-footer span { color: var(--en-muted); }
.catalog-footer-actions { display: flex; gap: .35rem; align-items: center; }
.detail-lower-grid { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: .75rem; align-items: start; }
.budget-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: .1rem .5rem; border-top: 1px solid #edf2f3; padding: .55rem 0; font-size: .8rem; }
.budget-row span { color: var(--en-muted); }
.budget-row strong { font-weight: 650; }
.budget-row small { grid-column: 2; color: var(--en-muted); }
.muted-note { color: var(--en-muted); font-size: .8rem; margin: 0; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.contact-fields label { min-width: 0; font-size: .74rem; font-weight: 600; color: var(--en-muted); }
.contact-fields .form-control { margin-top: .15rem; font-weight: 400; color: var(--en-ink); }
.contact-fields .full-width { grid-column: 1 / -1; }
.detail-danger { display: flex; justify-content: flex-end; }

@media (max-width: 900px) {
    .orders-workspace, .detail-lower-grid { grid-template-columns: 1fr; }
    .detail-heading { flex-direction: column; }
    .article-popup-intro { align-items: start; }
}
@media (max-width: 600px) {
    .app-shell { padding-bottom: 1rem; }
    .topbar-inner { padding: 0 .8rem; }
    .app-content { padding: .8rem; }
    .topbar-context { display: none; }
    .detail-title-row h1 { font-size: 1.3rem; }
    .order-totals > div { flex: 1 1 100%; }
    .contact-fields { grid-template-columns: 1fr; }
    .article-popup-intro { flex-wrap: wrap; }
    .catalog-filters label { flex: 1 1 100%; }
    .catalog-filter-count { margin-left: 0; }
}