/* =============================================================
   COMU Design System — Component CSS
   Ported from the Radzen UI prototype (/COMU/wwwroot/css/app.css).
   --rz-* variables resolve via the compatibility aliases in comu-theme.css.
   Radzen-specific .rz-* component overrides have been stripped.
   ============================================================= */

/* ---------------------------------------------------------------
   Global Layout
   --------------------------------------------------------------- */
.clean-layout-footer {
    display: none !important;
}

/* ---------------------------------------------------------------
   Shell Header
   --------------------------------------------------------------- */
.comu-header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 16px;
    background-color: var(--comu-header, #161616);
    color: var(--rz-white);
    overflow: visible;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.comu-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.comu-header-divider {
    width: 1px;
    height: 24px;
    background-color: var(--rz-base-500);
    flex-shrink: 0;
}

.comu-menu-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.comu-menu-right .comu-header-menu-popup {
    right: 0;
    left: auto;
}

.comu-header-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 16px;
    background: transparent;
    border: 0;
    color: var(--rz-base-100);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: var(--comu-font-family);
}

.comu-header-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Keep COMU header hover consistent when DxButton uses Text style mode. */
.comu-header .dxbl-btn.comu-header-menu-item {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--rz-base-100) !important;
    box-shadow: none !important;
}

.comu-header .dxbl-btn.comu-header-menu-item:hover,
.comu-header .dxbl-btn.comu-header-menu-item:focus-visible,
.comu-header .dxbl-btn.comu-header-menu-item:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: transparent !important;
    color: var(--rz-base-100) !important;
    box-shadow: none !important;
}

.comu-header-menu-item svg {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.comu-header-menu-item svg.rotated {
    transform: rotate(180deg);
}

.comu-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comu-header-menu-popup {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: var(--rz-base-800);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 1001;
}

.comu-header-menu-item-popup {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.16px;
    color: var(--rz-base-100);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.15s ease;
    font-family: var(--comu-font-family);
}

.comu-header-menu-item-popup:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.comu-header-menu-item-popup.comu-header-menu-item-active {
    background-color: rgba(255, 255, 255, 0.12);
    font-weight: 600;
}

.comu-header-menu-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.12);
    margin: 4px 0;
}

.comu-header-menu-item-primary {
    background-color: var(--rz-primary);
    color: var(--rz-white);
}

.comu-header-menu-item-primary:hover {
    background-color: color-mix(in srgb, var(--rz-primary) 85%, white);
}

.comu-logo-link {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.comu-logo-link:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

.comu-logo {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.16px;
    color: white;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-style: italic;
}

.comu-logo:hover {
    opacity: 0.85;
}

.comu-logo-img {
    height: 12px;
    width: auto;
    padding-right: 16px;
    max-width: 180px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    object-fit: contain;
}

.comu-logo-img:hover {
    opacity: 0.85;
}

.comu-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.home-menu-icon {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Avatar Component
   --------------------------------------------------------------- */
.comu-avatar-button {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.comu-avatar-button:hover {
    opacity: 0.85;
}

.comu-avatar {
    border-radius: 50%;
    background-color: var(--rz-primary);
    color: var(--rz-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 500;
    font-family: var(--comu-font-family);
    user-select: none;
}

.comu-avatar--24 { width: 24px; height: 24px; font-size: 11px; }
.comu-avatar--32 { width: 32px; height: 32px; font-size: 14px; }
.comu-avatar--48 { width: 48px; height: 48px; font-size: 18px; }
.comu-avatar--56 { width: 56px; height: 56px; font-size: 20px; }
.comu-avatar--64 { width: 64px; height: 64px; font-size: 22px; }
.comu-avatar--80 { width: 80px; height: 80px; font-size: 26px; }

.comu-avatar--primary { background-color: var(--rz-primary); }
.comu-avatar--blue    { background-color: #3b82f6; }
.comu-avatar--teal    { background-color: #14b8a6; }
.comu-avatar--violet  { background-color: #8b5cf6; }
.comu-avatar--orange  { background-color: #f97316; }
.comu-avatar--green   { background-color: #22c55e; }
.comu-avatar--rose    { background-color: #f43f5e; }

/* ---------------------------------------------------------------
   Page Header
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   Page Header — application layout
   --------------------------------------------------------------- */
.comu-page-header {
    --comu-page-header-ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* Space for fixed breadcrumb row (padding 8+8 + min-height 40) — matches .comu-page-header__top-row */
    --comu-page-header-breadcrumb-height: 48px;
    background-color: var(--rz-white);
    margin: 0;
    border-bottom: 2px solid var(--rz-base-200, #e0e0e0);
    padding-top: var(--comu-page-header-breadcrumb-height);
}

.comu-page-header--no-bg {
    background-color: transparent;
    border-bottom-color: transparent;
}

.comu-page-header--title-scrolled {
    border-bottom: 2px solid var(--rz-base-200, #e0e0e0);
}

/* Row 1: breadcrumbs (left) + action bar (right) — always fixed below shell (.comu-header is 48px) */
.comu-page-header__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 40px 8px;
    min-height: 40px;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--rz-white, #ffffff);
    border-bottom: 2px solid transparent;
    transition: border-bottom-color 0.06s linear;
}

.comu-page-header--top-row-attached .comu-page-header__top-row {
    border-bottom-color: var(--rz-base-200, #e0e0e0);
}

.comu-page-header--no-bg .comu-page-header__top-row {
    background: var(--rz-base-50, #f4f6f9);
}

.comu-page-header__breadcrumb-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.comu-page-header__top-row .comu-breadcrumb {
    flex-shrink: 1;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.comu-page-header__action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Collapse toggle button */
.comu-page-header__collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--rz-base-200);
    cursor: pointer;
    color: var(--rz-base-600);
    transition: background-color 0.22s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1)),
                color 0.22s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.comu-page-header__collapse-btn:hover {
    background-color: var(--rz-base-100);
    color: var(--rz-base-900);
}

/* Row 2: title section (left) + page actions (right) — scrolls away naturally */
.comu-page-header__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 0 40px 20px;
    overflow: hidden;
    max-height: 300px;
    opacity: 1;
    border-bottom: none;
    transition:
        max-height 0.38s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1)),
        opacity 0.38s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1)),
        padding 0.38s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Button-driven collapse */
.comu-page-header__title-row--hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.comu-page-header__title-section {
    flex: 1;
    min-width: 0;
}

.comu-page-title {
    font-size: 28px;
    font-weight: 300;
    line-height: 36px;
    color: var(--rz-base-900);
    margin: 0;
}

.comu-page-subtitle {
    font-size: 14px;
    line-height: 20px;
    color: var(--rz-base-600);
    margin: 4px 0 0 0;
}

.comu-page-description {
    font-size: 14px;
    line-height: 20px;
    color: var(--rz-base-600);
    margin: 8px 0 0 0;
    max-width: 640px;
}

.comu-page-header__page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 0;
}

/* Row 3: tags */
.comu-page-header__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 40px 12px;
    max-height: 120px;
    overflow: hidden;
    opacity: 1;
    transition:
        max-height 0.38s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1)),
        opacity 0.38s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1)),
        padding 0.38s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.comu-page-header__tags--hidden {
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
    pointer-events: none;
}

/* Row 4: navigation / tabs — sticky below fixed breadcrumb row (scroll root is .clean-layout-main) */
.comu-page-header__navigation {
    padding: 0 40px;
    position: sticky;
    top: var(--comu-page-header-breadcrumb-height, 56px);
    z-index: 9;
    background: var(--rz-white, #ffffff);
}

/* Title shown inline in breadcrumb row when title row has scrolled away */
.comu-page-header__collapsed-title {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--rz-base-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    opacity: 0;
    transition:
        opacity 0.38s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1)),
        max-width 0.38s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1)),
        margin-left 0.38s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1)),
        padding-left 0.38s var(--comu-page-header-ease, cubic-bezier(0.4, 0, 0.2, 1));
    pointer-events: none;
}

/* Title shown when header is collapsed (via scroll or toggle) */
.comu-page-header--title-scrolled .comu-page-header__collapsed-title,
.comu-page-header--collapsed .comu-page-header__collapsed-title {
    max-width: 320px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--rz-base-300);
    opacity: 1;
    pointer-events: auto;
}

/* Legacy aliases kept for backwards compat */
.comu-page-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding: 0 40px;
}
.comu-page-header-title-section { flex: 1; }
.comu-page-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ---------------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------------- */
.comu-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.16px;
}

.comu-breadcrumb a,
.comu-breadcrumb__link {
    color: var(--rz-primary);
    text-decoration: none;
    cursor: pointer;
}

.comu-breadcrumb a:hover,
.comu-breadcrumb__link:hover {
    text-decoration: underline;
}

.comu-breadcrumb-separator,
.comu-breadcrumb__separator {
    color: var(--rz-base-600);
}

/* ---------------------------------------------------------------
   Object Page (detail pages with tabs)
   --------------------------------------------------------------- */
.comu-object-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.comu-object-header {
    border-bottom: 1px solid var(--rz-base-200);
    background-color: var(--rz-white);
    padding: 0;
    margin: 0;
}

.comu-object-header__content {
    padding: 24px 40px;
}

.comu-object-header__title-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.comu-object-header__title-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comu-object-header__title {
    font-size: 28px;
    font-weight: 300;
    line-height: 36px;
    margin: 0;
    color: var(--rz-text-primary);
}

.comu-object-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comu-object-header__details {
    display: flex;
    gap: 2rem;
    padding: 0;
    margin: 16px 0 0 0;
    flex-wrap: wrap;
}

.comu-object-header__detail-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comu-object-header__detail-item {
    display: flex;
    gap: 8px;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.16px;
}

.comu-object-header__detail-label {
    color: var(--rz-text-secondary);
    font-weight: 400;
}

.comu-object-header__detail-value {
    color: var(--rz-text-primary);
    font-weight: 400;
}

.comu-object-header__tabs-nav {
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Tab content container */
.comu-object-tabs__content {
    padding: 32px 40px;
    background-color: var(--rz-base-100);
    flex: 1;
}

/* ---------------------------------------------------------------
   List Page
   --------------------------------------------------------------- */
.comu-list-page {
    padding: 24px 40px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.comu-list-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--rz-white);
    border-bottom: 1px solid var(--rz-base-200);
    z-index: 999;
}

.comu-list-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 16px;
    margin-left: auto;
}

.comu-list-grid {
    flex: 1;
    min-height: 0;
}

.comu-data-table {
    background: transparent;
    border: 0;
}

.comu-data-table .comu-data-table-body {
    background: transparent;
    border: 0;
    padding: 0;
}

/* DxGrid flat style (global for consistency across all table pages) */
.dxbl-grid,
.comu-data-table .dxbl-grid,
.comu-grid--flat-rows.dxbl-grid {
    border: 0;
    box-shadow: none;
    background-color: #fff;
}

.dxbl-grid .dxbl-grid-table,
.comu-data-table .dxbl-grid-table,
.comu-grid--flat-rows .dxbl-grid-table {
    border: 0;
    background-color: #fff;
}

.dxbl-grid .dxbl-grid-table > thead > tr > th,
.comu-data-table .dxbl-grid-table > thead > tr > th,
.comu-grid--flat-rows .dxbl-grid-table > thead > tr > th {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--rz-base-200, #dee2e6);
    background-color: #e0e0e0;
    min-height: 40px;
    height: 40px;
    vertical-align: middle;
}

/* Override: header row band (e.g. DevExpress / nested header layout) */
.dxbl-grid .dxbl-grid-table > thead > tr {
    background-color: #ffffff !important;
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td,
.comu-data-table .dxbl-grid-table > tbody > tr > td,
.comu-grid--flat-rows .dxbl-grid-table > tbody > tr > td {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid var(--rz-base-200, #dee2e6);
    background-color: #fff;
    min-height: 48px;    
    height: 48px;
    vertical-align: middle;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.dxbl-grid .dxbl-grid-table > tbody > tr:first-child > td,
.comu-data-table .dxbl-grid-table > tbody > tr:first-child > td,
.comu-grid--flat-rows .dxbl-grid-table > tbody > tr:first-child > td {
    border-top: 0;
}

/* Name link: primary when row not focused; matches row text when focused (class set via grid CustomizeElement) */
.dxbl-grid a.comu-customer-name-link,
.comu-grid--flat-rows a.comu-customer-name-link {
    color: var(--bs-link-color, var(--rz-primary, #0d6efd));
    text-decoration: none;
}

.dxbl-grid a.comu-customer-name-link:hover,
.comu-grid--flat-rows a.comu-customer-name-link:hover {
    text-decoration: underline;
}

.dxbl-grid tr.comu-grid-row-focused a.comu-customer-name-link,
.dxbl-grid tr.comu-grid-row-focused a.comu-customer-name-link:visited,
.dxbl-grid tr.comu-customer-grid-row-focused a.comu-customer-name-link,
.dxbl-grid tr.comu-customer-grid-row-focused a.comu-customer-name-link:visited,
.comu-grid--flat-rows tr.comu-grid-row-focused a.comu-customer-name-link,
.comu-grid--flat-rows tr.comu-grid-row-focused a.comu-customer-name-link:visited,
.comu-grid--flat-rows tr.comu-customer-grid-row-focused a.comu-customer-name-link,
.comu-grid--flat-rows tr.comu-customer-grid-row-focused a.comu-customer-name-link:visited {
    color: currentColor !important;
}

.dxbl-grid tr.comu-grid-row-focused a.comu-customer-name-link:hover,
.dxbl-grid tr.comu-customer-grid-row-focused a.comu-customer-name-link:hover,
.comu-grid--flat-rows tr.comu-grid-row-focused a.comu-customer-name-link:hover,
.comu-grid--flat-rows tr.comu-customer-grid-row-focused a.comu-customer-name-link:hover {
    color: currentColor !important;
    opacity: 0.92;
}

.dxbl-grid tr.comu-grid-row-focused a.comu-customer-name-link .bi,
.dxbl-grid tr.comu-customer-grid-row-focused a.comu-customer-name-link .bi,
.comu-grid--flat-rows tr.comu-grid-row-focused a.comu-customer-name-link .bi,
.comu-grid--flat-rows tr.comu-customer-grid-row-focused a.comu-customer-name-link .bi {
    color: currentColor !important;
}

.comu-grid-toolbar-search {
    min-width: 220px;
    width: min(100%, 320px);
}

.comu-list-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}

.comu-list-search-icon {
    color: var(--rz-base-600);
    font-size: 18px;
}

.comu-list-search-input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 14px;
    padding: 8px 0;
    outline: none;
    font-family: var(--comu-font-family);
    color: var(--rz-text-primary);
}

.comu-list-search-input::placeholder {
    color: var(--rz-base-400);
}

.comu-list-table-wrapper {
    background-color: var(--rz-white);
    border: 1px solid var(--rz-base-200);
    overflow-x: auto;
}

.comu-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: var(--comu-font-family);
}

.comu-list-table thead {
    background-color: var(--rz-base-50);
    border-bottom: 1px solid var(--rz-base-200);
}

.comu-list-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--rz-base-900);
    background-color: var(--rz-base-50);
}

.comu-list-table td {
    padding: 16px;
    border-bottom: 1px solid var(--rz-base-200);
    color: var(--rz-base-600);
}

.comu-list-table tbody tr:hover {
    background-color: var(--rz-base-50);
}

.comu-list-col-checkbox {
    width: 48px;
    padding: 12px;
    text-align: center;
}

.comu-list-col-checkbox input[type="checkbox"] {
    cursor: pointer;
}

.comu-list-row {
    transition: background-color 0.15s ease-in-out;
}

/* ---------------------------------------------------------------
   Home Page
   --------------------------------------------------------------- */
.comu-home-page {
    min-height: 100%;
    padding: 2rem;
    background-color: var(--rz-base-50);
}

.comu-home-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.comu-home-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comu-home-title {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--rz-base-900);
}

.comu-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.comu-favorites {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.comu-favorite-card {
    background-color: var(--rz-white);
    height: 130px;
    position: relative;
    padding: 16px 32px 16px 16px;
    border: 1px solid var(--rz-base-200);
    min-width: 160px;
    transition: box-shadow 0.15s ease;
}

.comu-favorite-card:hover {
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.08);
}

.comu-favorite-title {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.16px;
    color: var(--rz-base-900);
}

.comu-favorite-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: var(--rz-base-900);
}

.comu-favorite-icon {
    position: absolute;
    left: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    font-size: 32px;
    color: var(--rz-base-900);
}

.comu-resource-list {
    display: flex;
    gap: 16px;
    width: 100%;
}

.comu-resource-tile {
    flex: 1 1 0;
    background-color: var(--rz-white);
    display: flex;
    align-items: center;
    padding: 16px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.16px;
    color: var(--rz-base-900);
    gap: 12px;
}

.expressive-card-body {
    min-height: 96px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.expressive-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.expressive-card-title {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.16px;
}

.expressive-card-subtitle {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.32px;
    color: var(--bs-secondary-color);
}

.comu-quick-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.comu-quick-tile {
    background-color: var(--rz-white);
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: 1px solid var(--rz-base-200);
}

.comu-quick-tile:hover {
    background-color: var(--rz-base-50);
}

.comu-quick-text {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.comu-quick-title {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.16px;
    color: var(--rz-base-900);
}

.comu-quick-subtitle {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.32px;
    color: var(--rz-base-600);
}

.comu-quick-arrow {
    position: relative;
    left: 0;
    transition: transform 0.1s linear;
    color: var(--rz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: -24px;
    opacity: 1;
}

.comu-quick-tile:hover .comu-quick-arrow {
    transform: translateX(16px);
}

/* ---------------------------------------------------------------
   Workspace bar (secondary tab strip)
   --------------------------------------------------------------- */
.comu-workspace-bar {
    background-color: var(--rz-white);
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    gap: 8px;
    border-bottom: 1px solid var(--rz-base-200);
}

.comu-workspace-tabs {
    display: flex;
    align-items: center;
    gap: 1px;
}

.comu-workspace-tab {
    border: 0;
    background: transparent;
    padding: 11px 16px;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.16px;
    color: var(--rz-base-600);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-family: var(--comu-font-family);
    transition: color 0.15s ease;
}

.comu-workspace-tab.is-active {
    color: var(--rz-base-900);
    font-weight: 600;
    border-bottom-color: var(--rz-primary);
}

/* ---------------------------------------------------------------
   Notification Panel
   --------------------------------------------------------------- */
.notification-panel-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 999;
}

.notification-panel {
    position: fixed;
    top: 48px;
    right: 0;
    width: 360px;
    max-height: calc(100vh - 48px);
    background: var(--rz-white);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--rz-base-200);
    flex-shrink: 0;
}

.notification-panel-header h4 {
    margin: 0;
}

.notif-text-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--rz-primary);
    padding: 4px 0;
    font-weight: 500;
}

.notif-text-btn:hover {
    text-decoration: underline;
}

.notif-icon-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    color: var(--rz-base-600);
    border-radius: 4px;
}

.notif-icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.notification-panel-dnd {
    padding: 12px 0;
    border-bottom: 1px solid var(--rz-base-200);
    flex-shrink: 0;
    background-color: var(--rz-base-50);
}

.notification-panel-dnd-stack {
    gap: 8px;
    padding: 0 16px;
    display: flex;
    align-items: center;
}

.notification-panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.notification-group-header {
    padding: 12px 16px;
    font-weight: 600;
    color: var(--rz-base-900);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--rz-base-50);
}

.notification-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.notification-empty-icon {
    font-size: 48px;
    color: var(--rz-base-500);
    margin-bottom: 12px;
}

.notification-empty-text {
    color: var(--rz-base-600);
    font-size: 14px;
    margin: 0;
}

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--rz-base-100);
    transition: background-color 0.2s;
    cursor: pointer;
    position: relative;
}

.notification-item:hover {
    background-color: var(--rz-base-100);
}

.notification-item-unread {
    background-color: var(--rz-secondary-lighter);
}

.notification-item-transparent {
    background-color: transparent;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--rz-primary);
    flex-shrink: 0;
}

.notification-time {
    font-weight: 600;
    color: var(--rz-base-600);
    font-size: 12px;
}

.notification-title {
    margin: 0;
    color: var(--rz-base-900);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-message {
    margin: 0;
    font-size: 12px;
    color: var(--rz-base-600);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification-dnd-icon {
    font-size: 18px;
    color: var(--rz-base-600);
}

.notification-dnd-text {
    font-size: 13px;
    color: var(--rz-base-600);
    flex: 1;
}

.notification-panel-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--rz-base-200);
    flex-shrink: 0;
}

.notification-footer-stack {
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ---------------------------------------------------------------
   Profile Panel
   --------------------------------------------------------------- */
.profile-panel {
    position: fixed;
    top: 48px;
    right: 0;
    width: 320px;
    max-height: calc(100vh - 48px);
    background: var(--rz-base-800);
    border-left: 1px solid var(--rz-base-700);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow-y: auto;
    padding: 16px;
}

.profile-name {
    font-weight: 400;
    font-size: 20px;
    color: var(--rz-base-100);
    margin: 0;
}

.profile-meta {
    font-size: 12px;
    color: var(--rz-base-500);
    margin: 0;
}

.profile-divider {
    margin: 0;
    border: none;
    border-top: 1px solid var(--rz-base-700);
}

.profile-menu-item {
    padding: 8px 0;
    cursor: pointer;
    color: var(--rz-base-100);
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-menu-item:hover {
    opacity: 0.8;
}

.profile-menu-item span {
    font-size: 14px;
    font-weight: 500;
}

.profile-menu-item--button {
    font-family: inherit;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
}

@media (max-width: 767.98px) {
    .comu-header {
        padding: 0 8px 0 16px;
    }

    .comu-logo-img {
        padding-right: 8px;
    }

    .comu-header-menu-item {
        padding: 0 10px;
    }
}

@media (max-width: 1180px) {
    .comu-page-header__top-row {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .comu-page-header__title-row {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .comu-page-header__navigation {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ---------------------------------------------------------------
   General Link
   --------------------------------------------------------------- */
.comu-link {
    color: var(--rz-primary);
    text-decoration: none;
}

.comu-link:hover {
    text-decoration: underline;
}

.form-label {
    margin-bottom: .1rem;
    font-size: 12px;
}

.dxbl-splitter {
    --dxbl-splitter-bg: transparent;
}

.shadow-sm {
    box-shadow: none !important;
}

.card {
    background: transparent !important;
    border: 0 !important;
}

.card-body {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* ExpressiveCard: restore Bootstrap card chrome (global .card/.card-body reset targets layout shells) */
.expressive-card.card {
    background: var(--bs-card-bg, var(--rz-white)) !important;
    border-radius: var(--bs-card-border-radius, none) !important;
    color: inherit !important;
}

.expressive-card.card .expressive-card-title,
.expressive-card.card .expressive-card-subtitle {
    color: inherit !important;
}

.expressive-card .card-body.expressive-card-body {
    padding: 1rem !important;
}

.expressive-card .card-footer {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1rem !important;
}

.expressive-card-footer {
    display: flex;
    align-items: center;
}

.expressive-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--comu-text);
    transform: translateX(0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.expressive-card:hover .expressive-card-arrow {
    transform: translateX(24px);
}


/* Material Symbols mapping for legacy ms-Icon classes */
.ms-Icon,
[class*="ms-Icon--"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ms-Icon::before,
[class*="ms-Icon--"]::before {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* DevExpress editor trigger icons (combo/date/spin): use lighter Material look. */
.dxbl-combobox .dxbl-btn .ms-Icon::before,
.dxbl-combobox .dxbl-btn [class*="ms-Icon--"]::before,
.dxbl-date-edit .dxbl-btn .ms-Icon::before,
.dxbl-date-edit .dxbl-btn [class*="ms-Icon--"]::before,
.dxbl-spin-edit .dxbl-btn .ms-Icon::before,
.dxbl-spin-edit .dxbl-btn [class*="ms-Icon--"]::before {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* Popup style: flat container, no borders, white header. */
.dxbl-popup.comu-modal,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup,
.dxbl-popup.comu-modal .dxbl-popup-content,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-popup-content,
.dxbl-popup.comu-modal .dxbl-popup-root,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-popup-root {
    border-radius: 0 !important;
    border: none !important;
    background-color: #ffffff !important;
    box-shadow: var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
}

.dxbl-popup.comu-modal .dxbl-popup-header,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-popup-header {
    background-color: #ffffff !important;
    border-bottom: none !important;
    border-radius: 0 !important;
}

.dxbl-popup.comu-modal .dxbl-popup-body,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-popup-body {
    background-color: #ffffff !important;
}

/* Force modal popup colors even when DevExpress uses alternate wrappers. */
.dxbl-modal .dxbl-popup-header,
.dxbl-modal .dxbl-popup-title {
    background-color: #ffffff !important;
}

.dxbl-modal .dxbl-popup-body,
.dxbl-modal .dxbl-popup-content,
.dxbl-modal .dxbl-popup-root {
    background-color: #ffffff !important;
}

/* Popup responsive behavior: keep medium width and adapt on mobile. */
.dxbl-popup.comu-modal .dxbl-popup-root,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-popup-root {
    max-width: 92vw !important;
}

.dxbl-popup.comu-modal,
.dxbl-modal.comu-modal > .dxbl-modal-root > .dxbl-popup,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup {
    width: min(900px, 92vw) !important;
    max-width: 92vw !important;
}

@media (max-width: 768px) {
    .dxbl-popup.comu-modal,
    .dxbl-modal.comu-modal > .dxbl-modal-root > .dxbl-popup,
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .dxbl-popup.comu-modal .dxbl-popup-root,
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-popup-root {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
    }

    .dxbl-popup.comu-modal .dxbl-popup-content,
    .dxbl-popup.comu-modal .dxbl-popup-body,
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-popup-content,
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup .dxbl-popup-body {
        max-height: calc(100vh - 56px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.ms-Icon--Add::before { content: "add"; }
.ms-Icon--Back::before { content: "arrow_back"; }
.ms-Icon--Calendar::before { content: "calendar_month"; }
.ms-Icon--CalendarPlus::before { content: "calendar_add_on"; }
.ms-Icon--Cancel::before { content: "close"; }
.ms-Icon--CheckMark::before { content: "check"; }
.ms-Icon--ChevronDown::before { content: "expand_more"; }
.ms-Icon--ChevronRight::before { content: "chevron_right"; }
.ms-Icon--ChevronUp::before { content: "expand_less"; }
.ms-Icon--CircleRing::before { content: "radio_button_unchecked"; }
.ms-Icon--CityNext::before { content: "location_city"; }
.ms-Icon--Clock::before { content: "schedule"; }
.ms-Icon--Contact::before { content: "person"; }
.ms-Icon--ContactCardSettings::before { content: "manage_accounts"; }
.ms-Icon--ContactInfo::before { content: "badge"; }
.ms-Icon--Delete::before { content: "delete"; }
.ms-Icon--DeveloperTools::before { content: "construction"; }
.ms-Icon--Download::before { content: "download"; }
.ms-Icon--Edit::before { content: "edit"; }
.ms-Icon--ExcelDocument::before { content: "table_view"; }
.ms-Icon--Flag::before { content: "flag"; }
.ms-Icon--FullScreen::before { content: "fullscreen"; }
.ms-Icon--GridViewMedium::before { content: "apps"; }
.ms-Icon--Help::before { content: "help"; }
.ms-Icon--Home::before { content: "home"; }
.ms-Icon--Info::before { content: "info"; }
.ms-Icon--InfoSolid::before { content: "info"; }
.ms-Icon--PDF::before { content: "picture_as_pdf"; }
.ms-Icon--PageList::before { content: "list_alt"; }
.ms-Icon--Pause::before { content: "pause_circle"; }
.ms-Icon--PlaySolid::before { content: "play_circle"; }
.ms-Icon--RedEye::before { content: "visibility"; }
.ms-Icon--Ringer::before { content: "notifications"; }
.ms-Icon--Search::before { content: "search"; }
.ms-Icon--Settings::before { content: "settings"; }
.ms-Icon--SignOut::before { content: "logout"; }
.ms-Icon--SkypeCircleCheck::before { content: "check_circle"; }
.ms-Icon--StatusErrorFull::before { content: "error"; }
.ms-Icon--Sync::before { content: "sync"; }
.ms-Icon--Table::before { content: "table_chart"; }
.ms-Icon--Upload::before { content: "upload_file"; }
.ms-Icon--ViewDashboard::before { content: "dashboard"; }
.ms-Icon--Warning::before { content: "warning"; }

.agreement-attachment-actions {
    align-items: center;
}

.agreement-attachment-action {
    min-height: 40px;
    min-width: 170px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

label.agreement-attachment-action {
    cursor: pointer;
}

.agreement-attachment-action .ms-Icon {
    line-height: 1;
}

.comu-header-tabs {
    width: 100%;
    --dxbl-tabs-bg: #ffffff;
    --dxbl-tabs-separator-border-color: transparent;
}

/* Customer detail tabs style: line tabs like reference */
.comu-page-header__navigation .comu-header-tabs .dxbl-tabs,
.comu-page-header__navigation .comu-header-tabs .dxbl-tabs-content {
    border-bottom: 1px solid var(--rz-base-300, #c6c6c6);
    background: var(--dxbl-tabs-bg, #ffffff) !important;
}

.comu-page-header__navigation .comu-header-tabs .dxbl-tabs-item {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: 0;
    background: transparent !important;
    border-radius: 0 !important;
}

.comu-page-header__navigation .comu-header-tabs .dxbl-tabs-item .dxbl-tabs-item-text {
    color: var(--rz-text-secondary, #6f6f6f);
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
}

.comu-page-header__navigation .comu-header-tabs .dxbl-tabs-item.dxbl-active {
    border-bottom-color: var(--rz-primary, #0f62fe) !important;
}

.comu-page-header__navigation .comu-header-tabs .dxbl-tabs-item.dxbl-active .dxbl-tabs-item-text {
    color: var(--rz-text-primary, #161616);
    font-weight: 700 !important;
}

.comu-page-header__navigation .comu-header-tabs .dxbl-tabs-item[aria-selected="true"] .dxbl-tabs-item-text,
.comu-page-header__navigation .comu-header-tabs .dxbl-active .dxbl-tabs-item-text,
.comu-page-header__navigation .comu-header-tabs [aria-selected="true"] .dxbl-tabs-item-text,
.comu-page-header__navigation .comu-header-tabs .dxbl-tabs-item-text[aria-selected="true"],
.comu-page-header__navigation .comu-header-tabs .dxbl-active,
.comu-page-header__navigation .comu-header-tabs [aria-selected="true"] {
    font-weight: 700 !important;
}

/* Customer detail: wider Add new dropdown menu */
.comu-customer-detail-add-new-dropdown-popup,
.comu-customer-detail-add-new-dropdown-popup > .dxbl-dropdown-body {
    width: 240px !important;
    min-width: 240px !important;
}

/* ---------------------------------------------------------------
   List Card (list-card) — reusable list card component
   --------------------------------------------------------------- */
.list-card {
    position: relative;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--rz-base-200);
    background: #ffffff;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    cursor: pointer;
}

.list-card:hover {
    background: var(--rz-base-100);
}

.list-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.list-card-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 0;
    min-width: 0;
}

.list-card-title {
    font-size: 1rem;
    font-weight: 500;
    color: #161616;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-card-client {
    font-size: 0.82rem;
    color: #6f6f6f;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-card-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.list-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.list-card-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.list-card-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
}

.list-card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6f6f6f;
    line-height: 1.2;
}

.list-card-value {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #161616;
    line-height: 1.35;
    word-break: break-word;
}

/* ---------------------------------------------------------------
   Tech Workspace — hide fixed top-row (breadcrumb bar)
   --------------------------------------------------------------- */
body:has(#tech-workspace-page) .comu-page-header__top-row {
    display: none;
}

body:has(#tech-workspace-page) .comu-page-header {
    padding-top: 0;
    background-color: transparent;
    border-bottom-color: transparent;
}

body:has(#tech-workspace-page) .comu-page-header__title-row {
    padding-top: 20px;
}

/* ---------------------------------------------------------------
   Admin Dashboard — hide fixed top-row (breadcrumb bar)
   --------------------------------------------------------------- */
body:has(#admin-dashboard-page) .comu-page-header__top-row {
    display: none;
}

body:has(#admin-dashboard-page) .comu-page-header {
    padding-top: 0;
    background-color: transparent;
    border-bottom-color: transparent;
}

body:has(#admin-dashboard-page) .comu-page-header__title-row {
    padding-top: 20px;
}

body:has(#tech-jobplans-page) .comu-page-header.comu-page-header--collapsed {
    --comu-page-header-breadcrumb-height: 40px;
    border-bottom: 1px solid var(--rz-base-200, #e0e0e0);
}

body:has(#tech-jobplan-detail-page) .comu-page-header.comu-page-header--collapsed {
    --comu-page-header-breadcrumb-height: 40px;
    border-bottom: 1px solid var(--rz-base-200, #e0e0e0);
}

body:has(#tech-audit-report-page) .comu-page-header.comu-page-header--collapsed {
    --comu-page-header-breadcrumb-height: 40px;
    border-bottom: 1px solid var(--rz-base-200, #e0e0e0);
}

body:has(#tech-jobplans-page) .comu-page-header--collapsed .comu-page-header__top-row,
body:has(#tech-jobplan-detail-page) .comu-page-header--collapsed .comu-page-header__top-row,
body:has(#tech-audit-report-page) .comu-page-header--collapsed .comu-page-header__top-row {
    background-color: #f4f4f4;
}

/*
 * Audit Report: panels use #f4f4f4; global comu-theme sets editors to the same gray — inputs disappear.
 * Override only on this route so fields stay white on gray surfaces (matches prior UX expectation).
 */
body:has(#tech-audit-report-page) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
body:has(#tech-audit-report-page) select,
body:has(#tech-audit-report-page) textarea,
body:has(#tech-audit-report-page) .form-control,
body:has(#tech-audit-report-page) .form-select,
body:has(#tech-audit-report-page) .dxbl-text-edit,
body:has(#tech-audit-report-page) .dxbl-spin-edit,
body:has(#tech-audit-report-page) .dxbl-date-edit,
body:has(#tech-audit-report-page) .dxbl-combobox,
body:has(#tech-audit-report-page) .dxbl-dropdown-edit,
body:has(#tech-audit-report-page) .dxbl-tagbox,
body:has(#tech-audit-report-page) .dxbl-memo {
    background-color: #ffffff !important;
}

body:has(#tech-audit-report-page) .dxbl-text-edit .form-control,
body:has(#tech-audit-report-page) .dxbl-spin-edit .form-control,
body:has(#tech-audit-report-page) .dxbl-date-edit .form-control,
body:has(#tech-audit-report-page) .dxbl-combobox .form-control,
body:has(#tech-audit-report-page) .dxbl-dropdown-edit .form-control,
body:has(#tech-audit-report-page) .dxbl-tagbox .form-control,
body:has(#tech-audit-report-page) .dxbl-memo textarea,
body:has(#tech-audit-report-page) .dxbl-memo .form-control {
    background-color: #ffffff !important;
}

body:has(#tech-audit-report-page) .dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown {
    background-color: #ffffff !important;
}

body:has(#tech-audit-report-page) .dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown:hover,
body:has(#tech-audit-report-page) .dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown:focus-visible {
    background-color: #ffffff !important;
}

/* ---------------------------------------------------------------
   Tech Workspace Cards  (tw-* = tech workspace)
   --------------------------------------------------------------- */
.dxbl-chart-legend-text {
    font-size: 14px !important;
}


.tw-card {
    background: #fff;
    padding: 16px;
    margin-bottom: 0;
}

.tw-card-label {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.16px;
    color: #161616;
    margin-bottom: 4px;
}

.tw-card-value {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 40px;
    color: #161616;
    margin-bottom: 8px;
}

.tw-countdown {
    font-feature-settings: "tnum";
}

.tw-card-divider {
    height: 1px;
    background: var(--rz-base-200);
    margin-bottom: 12px;
}

.tw-meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tw-meter-label {
    font-size: 12px;
    color: #161616;
    letter-spacing: 0.32px;
}

.tw-meter-status {
    font-size: 12px;
    color: #161616;
    letter-spacing: 0.32px;
}

.tw-progress {
    height: 16px !important;
    border-radius: 0 !important;
    background: #f4f4f4 !important;
    margin-bottom: 12px;
}

.tw-progress .dxbl-progress-bar-fill {
    background: #6929c4 !important;
    border-radius: 0 !important;
}

.tw-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.tw-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6f6f6f;
    letter-spacing: 0.32px;
}

.tw-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 1px;
    flex-shrink: 0;
}

.tw-card-link {
    margin-top: 16px;
}

.tw-link-btn,
.tw-link-btn.dxbl-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #0f62fe !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    text-decoration: none;
    cursor: pointer;
}

.tw-link-btn:hover,
.tw-link-btn.dxbl-btn:hover {
    text-decoration: underline;
    background: transparent !important;
}

/* ---------------------------------------------------------------
   Global completion banner
   --------------------------------------------------------------- */
.comu-completion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    margin: 0 16px 0;
    border-left: 4px solid #198754;
    background: #f4fdf7;
    color: #161616;
}

.comu-completion-banner--error {
    border-left-color: #da1e28;
    background: #fff1f1;
}

.comu-completion-banner--neutral {
    border-left-color: #0f62fe;
    background: #edf5ff;
}

.comu-completion-banner--warning {
    border-left-color: #f1c21b;
    background: #fcf4d6;
}

.comu-completion-banner__main {
    display: inline-flex;
    align-items: start;
    gap: 12px;
    min-width: 0;
}

.comu-completion-banner__icon {
    font-size: 20px;
    line-height: 1;
    color: #198754;
    flex-shrink: 0;
}

.comu-completion-banner--error .comu-completion-banner__icon {
    color: #da1e28;
}

.comu-completion-banner--neutral .comu-completion-banner__icon {
    color: #0f62fe;
}

.comu-completion-banner--warning .comu-completion-banner__icon {
    color: #8a6a00;
}

.comu-completion-banner__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.comu-completion-banner__message {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.comu-completion-banner__status {
    font-size: 12px;
    line-height: 1.3;
    color: #525252;
}

.comu-completion-banner__actions {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.comu-completion-banner__back-button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #0f62fe;
    background: #ffffff;
    color: #0f62fe;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
}

.comu-completion-banner__back-button:hover {
    background: #edf5ff;
}