:root {
    --cms-color-active: #166534;
    --cms-color-active-bg: #DCFCE7;
    --cms-color-warning: #F97316;
    --cms-color-onloan: #92400E;
    --cms-color-onloan-bg: #FEF3C7;
    --cms-color-expired: #991B1B;
    --cms-color-expired-bg: #FEE2E2;
    --cms-color-expired-border: #FCA5A5;
    --cms-color-expired-row: #FFF1F0;
}

html[data-theme="dark"] {
    --cms-color-expired-row: #2d1f1f;
}

html, body, #app {
    height: 100%;
    margin: 0;
    font-family: Roboto, sans-serif;
}

#app *,
#app svg text,
#blazor-error-ui {
    font-family: inherit;
}

.mud-input > input.mud-input-root,
.mud-input > textarea.mud-input-root,
.mud-input div.mud-input-slot {
    font-weight: 400;
}

.boot {
    padding: 2rem;
    color: #5c6b7a;
}

.cms-logo {
    width: 148px;
    height: auto;
    display: block;
    object-fit: contain;
}

.cms-login-logo {
    width: 300px;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.cms-login-form .mud-input-outlined {
    background-color: var(--mud-palette-gray-default);
    border-radius: 8px;
}

.cms-login-form .mud-input-outlined .mud-input-outlined-border {
    border-radius: 8px;
    pointer-events: none;
}

.cms-login-form .mud-input > input.mud-input-root-outlined,
.cms-login-form div.mud-input-slot.mud-input-root-outlined {
    padding-top: 14px;
    padding-bottom: 14px;
    font-weight: 400;
}

.cms-main {
    height: 100vh;
    overflow: hidden;
}

.dash-expire-list {
    flex: 1 1 auto;
    min-height: 0;
}

.dash-expire-row.mud-button-root {
    flex: 1 1 0;
    min-height: 56px;
    padding: 0 16px !important;
    justify-content: flex-start;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    background-color: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
}

.dash-expire-row.mud-button-root:hover {
    background-color: var(--mud-palette-primary-hover) !important;
}

.dash-expire-count {
    min-width: 1.75rem;
    margin: 0 8px;
    text-align: right;
}

.cms-nav .mud-nav-link {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    min-height: 36px;
    margin-bottom: 2px;
    border-radius: 2px;
    color: rgba(200, 210, 220, 0.7);
}

.cms-nav .mud-nav-link.active {
    background: rgba(0, 129, 195, 0.22);
    color: #0081c3;
    font-weight: 500;
}

.cms-page-tabs {
    background: var(--mud-palette-surface);
}

.cms-page-tabs .mud-tabs-tabbar,
.cms-fill-tabs .mud-tabs-tabbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cms-page-tabs .mud-tabs-tabbar .mud-tabs-tabbar-inner,
.cms-page-tabs .mud-tab,
.cms-fill-tabs .mud-tabs-tabbar .mud-tabs-tabbar-inner,
.cms-fill-tabs .mud-tab {
    min-height: 0;
}

.cms-page-tabs .mud-tab,
.cms-fill-tabs .mud-tab {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 400 !important;
    text-transform: none;
    letter-spacing: normal;
}

.cms-page-tabs .mud-tab.mud-tab-active,
.cms-fill-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary) !important;
    font-weight: 500 !important;
}

.mud-button-root {
    border-radius: 4px;
}

.mud-chip {
    font-weight: 500;
}

.cms-color-active {
    color: var(--cms-color-active) !important;
}

.cms-color-warning {
    color: var(--cms-color-warning) !important;
}

.cms-color-expired {
    color: var(--cms-color-expired) !important;
}

.cms-tag-active {
    color: var(--cms-color-active) !important;
    background-color: var(--cms-color-active-bg) !important;
}

.cms-tag-expired {
    color: var(--cms-color-expired) !important;
    background-color: var(--cms-color-expired-bg) !important;
}

.cms-tag-onloan {
    color: var(--cms-color-onloan) !important;
    background-color: var(--cms-color-onloan-bg) !important;
}

.cms-text-active {
    color: var(--cms-color-active) !important;
    font-weight: 500;
}

.cms-text-expired {
    color: var(--cms-color-expired) !important;
    font-weight: 500;
}

.cms-text-onloan {
    color: var(--cms-color-onloan) !important;
    font-weight: 500;
}

.cms-loan-panel-overdue {
    background-color: var(--cms-color-expired-bg) !important;
    border: 1px solid var(--cms-color-expired-border);
}

html[data-theme="dark"] .cms-loan-panel-overdue .mud-typography-body2:not(.cms-loan-panel-title):not(.cms-text-expired):not(.cms-color-expired) {
    color: #374151 !important;
}

.cms-loan-panel-onloan {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.cms-loan-panel-title {
    font-weight: 700;
}

.mud-button-root.mud-button-outlined.mud-button-outlined-default {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.list-screen {
    height: 100%;
    overflow: hidden;
}

.cms-fill-tabs .mud-tabs-panels,
.cms-fill-tabs .mud-tab-panel {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.list-filters .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.list-filters div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-dialog .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-dialog .mud-input > textarea.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-dialog div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 0.8125rem;
}

.report-toolbar .mud-picker.report-date,
.report-toolbar .report-date.mud-picker,
.report-toolbar .mud-picker:has(.report-date) {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}

.report-date.mud-input-control,
.report-toolbar .report-date {
    margin-top: 0;
    margin-bottom: 0;
}

.report-date .mud-input-control-helper-container,
.report-date .mud-input-helper-text {
    display: none;
}

.details-pane {
    height: 100%;
    overflow-wrap: anywhere;
}

.details-pane .mud-grid-item {
    min-width: 0;
}

.psp-table {
    width: 100%;
}

.psp-table table {
    table-layout: fixed;
    width: 100%;
}

.portfolio-groups-table table {
    table-layout: fixed;
    width: 100%;
}

.psp-col-client {
    width: calc((100% - 33.75rem) * 0.44);
}

.psp-col-model {
    width: calc((100% - 33.75rem) * 0.42);
}

.psp-col-location {
    width: 7rem;
}

.psp-col-serial {
    width: calc((100% - 33.75rem) * 0.14);
}

.psp-col-date {
    width: 6.5rem;
}

.psp-col-start,
.psp-col-expiry {
    width: 9.5rem;
}

.psp-col-price {
    width: 7rem;
}

.psp-table table th.psp-col-price,
.psp-table table td.psp-col-price,
.psp-table table th.support-col-value,
.psp-table table td.support-col-value,
.psp-table table th.dealreg-col-price,
.psp-table table td.dealreg-col-price,
.psp-table table th.dealreg-col-buy,
.psp-table table td.dealreg-col-buy {
    text-align: right;
}

.psp-table table th.dealreg-col-disc,
.psp-table table td.dealreg-col-disc,
.psp-table table th.dealreg-col-add,
.psp-table table td.dealreg-col-add {
    text-align: center;
}

.psp-col-status {
    width: 6.75rem;
}

.support-col-client {
    width: calc((100% - 50.75rem) * 0.55);
}

.support-col-type {
    width: calc((100% - 50.75rem) * 0.45);
}

.support-col-value {
    width: 9rem;
}

.dealreg-col-part {
    width: calc((100% - 48rem) * 0.34);
}

.dealreg-col-category {
    width: calc((100% - 48rem) * 0.33);
}

.dealreg-col-sub {
    width: calc((100% - 48rem) * 0.33);
}

.dealreg-col-price {
    width: 9rem;
}

.dealreg-col-disc {
    width: 8rem;
}

.dealreg-col-buy {
    width: 9.5rem;
}

.dealreg-col-add {
    width: 8rem;
    min-width: 8rem;
}

.mud-table.dealreg-groups-empty .mud-table-container {
    overflow: hidden;
}

.mud-table.dealreg-groups-empty .mud-table-root {
    height: 100%;
}

.demo-col-model {
    width: calc((100% - 24.5rem) * 0.32);
}

.demo-col-serial {
    width: calc((100% - 24.5rem) * 0.28);
}

.demo-col-owner {
    width: calc((100% - 24.5rem) * 0.20);
}

.demo-col-client {
    width: calc((100% - 24.5rem) * 0.20);
}

.demo-col-status {
    width: 8rem;
}

.psp-table .mud-table-container {
    overflow: visible;
}

.psp-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--mud-palette-gray-default);
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.psp-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.psp-table:has(col.dealreg-col-add) table {
    min-width: 56rem;
}

.psp-table th.dealreg-col-add,
.psp-table td.dealreg-col-add {
    min-width: 8rem;
    overflow: visible;
    text-overflow: clip;
}

.psp-table table tbody > tr:last-child > td {
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.psp-pm-dot {
    font-size: 18px !important;
    width: 18px;
    height: 18px;
}

.psp-pm-date .mud-input > input.mud-input-root-outlined,
.psp-pm-date div.mud-input-slot.mud-input-root-outlined {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.8125rem;
}

.psp-pm-date input::placeholder,
.psp-pm-date .mud-input-slot::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 1;
}

.psp-expired td {
    background-color: var(--cms-color-expired-row) !important;
}

.cms-overdue td {
    border-bottom: 1px solid var(--cms-color-expired-border) !important;
}

.psp-selected td {
    background-color: var(--mud-palette-primary-hover) !important;
}

.psp-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.psp-group {
    cursor: default;
}

.psp-group td {
    background-color: var(--mud-palette-background) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.psp-group-client {
    flex: 0 0 calc((100% - 39.75rem) * 0.40 + 0.75rem);
    width: calc((100% - 39.75rem) * 0.40 + 0.75rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

.psp-table tbody tr:has(+ tr.psp-model-cont) > td {
    border-bottom-color: transparent;
}

.report-sheet {
    width: 794px;
    min-height: 1123px;
    background: #fff !important;
    color: #111827;
    padding: 36px 40px 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.report-logo {
    width: 148px;
    max-width: 148px;
    max-height: 48px;
    min-width: 0;
    height: auto;
    display: block;
    object-fit: contain;
}

.report-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    color: #111827;
}

.report-table th {
    font-size: 0.5rem;
    font-weight: 600;
    color: #111827;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #e5e7eb;
    border-bottom: 2px solid #6b7280;
    padding: 6px 5px;
}

.report-table td {
    font-size: 0.65rem;
    padding: 5px 5px;
    border-bottom: 1px solid #eef2f6;
    vertical-align: middle;
    color: #111827;
    overflow: hidden;
}

.report-table:has(tfoot) tbody tr:last-child td {
    border-bottom: none;
}

.report-table tfoot td {
    border-top: 2px solid #6b7280;
    border-bottom: none;
    font-weight: 600;
    padding-top: 8px;
}

.report-table .report-num {
    text-align: right;
}

.report-table td.report-status {
    font-weight: 700;
}

.report-table th.report-nowrap,
.report-table td.report-nowrap {
    white-space: nowrap;
}

.report-empty {
    text-align: center;
    color: #64748b;
    padding: 24px 4px !important;
}

.report-expired {
    color: var(--cms-color-expired);
}

.report-table td.report-expired {
    color: var(--cms-color-expired);
}

.report-active {
    color: var(--cms-color-active);
}

.report-table td.report-active {
    color: var(--cms-color-active);
}

.report-table-summary th {
    font-size: 0.62rem;
    padding: 8px 6px;
}

.report-table-summary td {
    font-size: 0.8rem;
    padding: 7px 6px;
}

#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
