/*
 * SPDX-FileCopyrightText: Copyright Corsinvest Srl
 * SPDX-License-Identifier: AGPL-3.0-only
 */

/* ========================================
   RadzenPanel - icon/text spacing fix
   ======================================== */

.rz-panel-titlebar > div {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ========================================
   Side dialog layout — sticky action bar
   ======================================== */

/* Resize bar floated outside Blazor DOM to survive re-renders */
.cv4pve-side-dialog-resizer {
    position: fixed !important;
    width: var(--rz-dialog-resize-bar-thickness, 12px) !important;
    /* height set by JS via positionBar() */
    z-index: 10000;
    cursor: col-resize;
    opacity: .4;
    background-color: var(--rz-dialog-resize-bar-background-color, var(--rz-base-background-color)) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--rz-border-radius) 0 0 var(--rz-border-radius);
}

.cv4pve-side-dialog-resizer:hover {
    opacity: var(--rz-dialog-resize-bar-hover-opacity, 1);
}

.cv4pve-side-dialog-resizer > .rz-resize {
    height: var(--rz-dialog-resize-bar-handle-size, 40px) !important;
    border: 1px solid var(--rz-dialog-resize-bar-color, var(--rz-border-color)) !important;
    border-radius: 1px;
}

.cv4pve-side-dialog {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    min-width: 300px;
}

.cv4pve-side-dialog .rz-dialog-content {
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.cv4pve-side-dialog .rz-dialog-content > form {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cv4pve-side-dialog .rz-dialog-content > form > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ========================================
   Confirm danger dialog — red confirm button
   ======================================== */

.cv4pve-confirm-danger-dialog .rz-primary {
    background-color: var(--rz-danger) !important;
    border-color: var(--rz-danger) !important;
}

/* ========================================
   Dashed sub-section box (used in forms)
   ======================================== */

.cv4pve-dashed-box {
    border: 2px dashed var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    padding: 12px;
}

/* ========================================
   Thumb-details widget — health icon + severity dots
   Used by WidgetThumbDetailsBase. The icon scales with
   the widget size via container queries; severity dots
   appear only when there are issues to highlight.
   ======================================== */

.cv4pve-thumb-widget {
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0.5rem;
    gap: 0.5rem;
}

.cv4pve-thumb-widget-icon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cv4pve-thumb-widget-icon .rzi {
    font-size: clamp(2.5rem, 35cqmin, 12rem);

    --rz-icon-fill: 1;
}

.cv4pve-thumb-widget-icon.ok      .rzi { color: var(--rz-success); }
.cv4pve-thumb-widget-icon.ko      .rzi { color: var(--rz-danger);  }
.cv4pve-thumb-widget-icon.neutral .rzi { color: var(--rz-text-tertiary-color); }

.cv4pve-thumb-widget-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 4cqmin, 2rem);
    min-height: 0;
}

.cv4pve-thumb-widget-row .cv4pve-thumb-widget-icon {
    flex: 0 1 auto;
}

.cv4pve-thumb-widget-dot {
    border-radius: 50%;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    width:  clamp(2rem, 10cqmin, 4rem);
    height: clamp(2rem, 10cqmin, 4rem);
    font-size: clamp(0.85rem, 4cqmin, 1.5rem);
}

.cv4pve-thumb-widget-dot.critical { background: var(--rz-danger); }

.cv4pve-thumb-widget-message {
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
    text-align: center;
}

.cv4pve-thumb-widget-popup {
    padding: 0;
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-panel-border-color);
    border-radius: var(--rz-border-radius);
    box-shadow: var(--rz-panel-shadow);
}

.cv4pve-thumb-widget-tooltip-scroll {
    max-height: 13rem;
    overflow-y: auto;
}

.cv4pve-thumb-widget-tooltip {
    padding: 0.25rem;
}

.cv4pve-thumb-widget-tooltip table {
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 240px;
    color: var(--rz-text-color);
}

.cv4pve-thumb-widget-tooltip table td {
    padding: 0.3rem 0.6rem;
}

.cv4pve-thumb-widget-tooltip table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--rz-base-300);
}

.cv4pve-thumb-widget-tooltip-link,
.cv4pve-thumb-widget-tooltip-link:link,
.cv4pve-thumb-widget-tooltip-link:visited {
    color: var(--rz-primary) !important;
    text-decoration: none;
    font-weight: 500;
}

.cv4pve-thumb-widget-tooltip-link:hover {
    text-decoration: underline;
}