/*
 * Telerik report viewer: quieter validation and status messages that don't move the layout.
 */

/* The server lays reports out in Liberation Sans (Arial's character widths, see Helpers/ReportFonts.cs) and the
   preview names it, so the browser needs the same face: its own Liberation Sans or Arial, otherwise ours. */
@font-face {
    font-family: "Liberation Sans";
    src: local("Liberation Sans"), local("LiberationSans"), local("Arial"), local("ArialMT"),
         url("/fonts/Liberation/LiberationSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Liberation Sans";
    src: local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arial Bold"), local("Arial-BoldMT"),
         url("/fonts/Liberation/LiberationSans-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Liberation Sans";
    src: local("Liberation Sans Italic"), local("LiberationSans-Italic"), local("Arial Italic"), local("Arial-ItalicMT"),
         url("/fonts/Liberation/LiberationSans-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Liberation Sans";
    src: local("Liberation Sans Bold Italic"), local("LiberationSans-BoldItalic"), local("Arial Bold Italic"), local("Arial-BoldItalicMT"),
         url("/fonts/Liberation/LiberationSans-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

/* The viewer lays out in a splitter that fills its element (height: 100%), so the element needs a definite height or the
   report pages collapse under the parameters. A percentage of an auto-height parent or a min-height isn't enough. */
#rptViewer {
    height: max(480px, calc(100vh - 140px));
}

/* In a popup window the placeholder around the viewer gets a pixel height from setReportDivHeight(). */
.k-window #rptViewer {
    height: 100%;
}

/* A parameter with an error gets a red outline on its field; the message is a small tooltip shown while the pointer is
   over the parameter or its field has focus, so it never takes space in the layout. The tooltip covers the card's own
   label row, since the parameters panel scrolls and would clip anything outside the card. */
.trv-parameter-container {
    position: relative;
}

.trv-parameter-error {
    position: absolute !important;
    top: 5px;
    left: 10px;
    z-index: 20;
    max-width: calc(100% - 20px);
    min-height: 0;
    margin: 0 !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #3d4852 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

/* Small arrow pointing down at the field */
.trv-parameter-error::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 12px;
    border: 5px solid transparent;
    border-top-color: #3d4852;
}

.trv-parameter-container:hover .trv-parameter-error,
.trv-parameter-container:focus-within .trv-parameter-error {
    opacity: 1;
    visibility: visible;
}

.trv-parameter-error .k-icon,
.trv-parameter-error .k-svg-icon {
    display: none;
}

.trv-parameter-error-message {
    color: #fff !important;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
}

/* The viewer hides a cleared error with an inline display:none */
.trv-parameter-container:has(.trv-parameter-error:not([style*="none"])) .k-input,
.trv-parameter-container:has(.trv-parameter-error:not([style*="none"])) .k-picker,
.trv-parameter-container:has(.trv-parameter-error:not([style*="none"])) .k-checkbox {
    border-color: #d92d20 !important;
    box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.3) !important;
}

/* Status over the report area ("missing parameters", "may now be previewed"): a slim bar along the top instead of a
   large box in the middle. The viewer marks every one of these as an error, so the bar stays neutral. */
.trv-pages-area .trv-notification {
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 0 !important;
    border-left: 3px solid #67727c !important;
    border-radius: 4px !important;
    background: #f4f6f8 !important;
    box-shadow: none !important;
    transform: none !important;
    justify-content: flex-start !important;
}

.trv-pages-area .trv-notification .k-notification-wrap {
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
}

.trv-pages-area .trv-notification .k-notification-content {
    color: #3d4852 !important;
    font-size: 12.5px;
    line-height: 18px;
    text-align: left;
}

.trv-pages-area .trv-notification .k-notification-content br {
    display: none;
}

.trv-pages-area .trv-notification .k-icon {
    color: #67727c;
    font-size: 14px;
}

/* The Preview button that runs the report once parameters are filled in: a clear primary action in the brand color. */
.trv-parameters-area-footer .k-button {
    border-color: #3f7569 !important;
    background: #3f7569 !important;
    color: #fff !important;
    font-weight: 600;
}

.trv-parameters-area-footer .k-button:hover,
.trv-parameters-area-footer .k-button:focus-visible {
    border-color: #2f5a50 !important;
    background: #2f5a50 !important;
}