@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* fallback */

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v109/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

.flex-fill {
-ms-flex: 1 1 auto !important;
flex: 1 1 auto !important;
}

.cursor-pointer {
cursor: pointer !important;
}

.rz-tabview-top > .rz-tabview-nav {
flex-wrap: wrap;
}

.rz-legend-bottom {
bottom: -1rem;
}

.rz-dialog-wrapper {
z-index: 1002;
}

.rz-dialog-side {
z-index: 1003;
}

.w-1rem {
width: 1rem;
text-align: right
}

.w-3rem {
width: 3rem;
text-align: right
}

.w-4rem {
width: 4rem;
text-align: right
}

.w-7rem {
width: 7rem;
text-align: right
}

.w-10 {
width: 10% !important;
}

.w-15 {
width: 15% !important;
}

.w-20 {
width: 20% !important;
}

.w-25 {
width: 25% !important;
}

.w-30 {
width: 30% !important;
}

.w-35 {
width: 35% !important;
}

.w-40 {
width: 40% !important;
}

.w-45 {
width: 45% !important;
}

.w-50 {
width: 50% !important;
}

.w-55 {
width: 55% !important;
}

.w-60 {
width: 60% !important;
}

.w-65 {
width: 65% !important;
}

.w-70 {
width: 70% !important;
}

.w-75 {
width: 75% !important;
}

.w-80 {
width: 80% !important;
}

.w-85 {
width: 85% !important;
}

.w-90 {
width: 90% !important;
}

.w-95 {
width: 95% !important;
}

.w-100 {
width: 100% !important;
}

.w-100-md-75 {
width: 100% !important;
}

.w-100-md-50 {
width: 100% !important;
}

.rz-separator {
margin: 2px 0;
border: 0;
border-top: 1px solid var(--rz-border-color,#d0d0d0);
}

.rz-context-menu .active-preset {
background: var(--rz-secondary-light) !important;
font-weight: 600;
}

.rz-context-menu .active-preset .rz-navigation-item-text {
color: var(--rz-white) !important;
}

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}



.filled-icon {
font-variation-settings: 'FILL' 1;
}

/* .rz-body padding — now via --rz-layout-body-padding in sisu-theme-overrides.css */

h1:focus {
outline: none;
}

.ammount-suffix {
margin-right: 0.5rem;
margin-bottom: 0rem;
text-align: right;
font-weight: 600;
}

.balance-warning-wrapper {
background-color: var(--rz-danger);
border-radius: 6px;
display: flex;
align-items: center;
padding: 0 8px;
}

.balance-warning-text {
color: white !important;
font-weight: 600;
margin-right: 0px !important;
}

.numeric-right input {
text-align: right;
}

.invalid-column {
text-decoration: spelling-error !important;
}

.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;
}

.tabicon {
padding: 0.125rem 0.25rem;
height: 0.9rem;
line-height: 1rem;
min-height: 0.75rem;
min-width: 0.75rem;
font-size: 0.75rem;
font-weight: 600;
}

.tabicon .rzi {
font-size: calc(0.5* var(--rz-icon-size)) !important;
line-height: calc(0.5* var(--rz-icon-size)) !important;
width: calc(0.5* var(--rz-icon-size)) !important;
height: calc(0.5* var(--rz-icon-size)) !important;
}

.sub-account-component .rz-form-field-label {
right: auto;
top: var(--rz-form-field-label-floating-top);
padding-top: 0;
padding-bottom: 0;
transform: translate(0, 0);
color: var(--rz-input-placeholder-color);
background-color: var(--rz-form-field-label-floating-background-color);
font-size: 0.75rem;
line-height: 1rem;
max-width: calc(100% - 1.5rem);
}

.content {
padding-top: 1.1rem;
}

.valid:not([type="checkbox"]):not(.rz-switch):not(.rz-state-empty):not(.rz-numeric-input) {
outline: 1px solid #26b050;
}

.invalid {
outline: 1px solid red !important;
}

.required.rz-state-empty:not(.modified):not(.invalid) {
outline: 0.5px solid orange !important;
}

.validation-message {
color: red;
}

.rz-switch {
zoom: 0.6 !important;
}

#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}

#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}

.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0Lj01NjFhIDIgMiAwIDAgMCAyNzAuMDg4N0wyNjcuODIxIDY5Ljc0NzVhMiAyIDAgMCAwIC0uMDIgLjk4OTQgMiAyIDAgMCAxIC0xLjk4OSAxLjI0NjQgMiAyIDAgMCAxIC0xLjk4OSAtMS4yNDY0Wk0yNjMuNTc2IDg2LjA1NDdDMjYxLjA0OSA4Ni4wNTQ3IDI1OS43ODYgODcuMzAwNSAyNTkuNzg2IDg5Ljc5MjEgMjU5Ljc4NiA5Mi4yODM3IDI2MS4wNDkgOTMuNTI5NSAyNjMuNTc2IDkzLjUyOTUgMjY2LjExNiA5My41Mjk1IDI2Ny4zODcgOTIuMjgzNyAyNjcuMzg3IDg5Ljc5MjEgMjY3LjM4NyA4Ny4zMDA1IDI2Ni4xMTYgODYuMDU0NyAyNjMuNTc2IDg2LjA1NDdaIiBmaWxsPSIjRkZFNTAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L2c+PC9zdmc+=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}

.blazor-error-boundary::after {
content: "An error has occurred."
}

.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
}

.loading-progress circle {
fill: none;
stroke: #e0e0e0;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}

.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
position: absolute;
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}

.panel-menu-separator {
border-bottom: 1px solid #ccc;
margin: 10px 0;
}

/*
 * Popup validator scroll-anchoring + positioning fix.
 *
 * .tab-form-row marks a horizontal label+input field row that owns a
 * Radzen popup validator. Two effects:
 *
 *   1. position:relative makes the row the containing block for
 *      .rz-message-popup (position:absolute), so the popup anchors to
 *      the row and scrolls out of view with it — no JS required.
 *
 *   2. top:100%; right:0; left:auto places the popup flush below the
 *      row's right edge (= the input's right edge in the label+input
 *      flex pattern). translateY(2px) adds a small visual gap.
 *
 * Scope is intentionally narrow: only rows explicitly marked with
 * .tab-form-row are affected. Toolbar stacks, footer stacks, grid
 * rows, and any other nested flex layouts are untouched.
 */
.tab-form-row {
    position: relative;
}

.tab-form-row .rz-message-popup {
    top: 100%;
    right: 0;
    left: auto;
    transform: translateY(2px);
    z-index: 1;
}

.mr-auto {
margin-right: auto;
}

.nav-item {
cursor: pointer;
}

.invert-icon {
-webkit-transform: scaleY(-1);
}

.filter-bar .value-field {
flex: 0 0 6rem;
max-width: 6rem;
}

.filter-bar .filter-col {
flex: 1 1 100%;
min-width: 100%;
display: flex;
align-items: center;
}

.fieldset-check .rz-fieldset-legend {
padding-left: 0rem !important;
padding-right: 0rem !important;
margin-left: 0.75rem !important;
}

.fieldset-check .rz-fieldset-content {
padding-top: 0.5rem !important;
padding-bottom: 0.75rem !important;
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}

.rz-text-subtitle2.disabled {
font-weight: 300 !important;
}

/******Loading animation*****/
.dot {
margin: 0 1.5rem;
width: 35px;
height: 35px;
border-radius: 50%;
opacity: 0;
}

.dot-1 {
background-color: var(--rz-info-light);
animation-name: animacion1;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 0.15s;
}

.dot-2 {
background-color: var(--rz-info-darker);
animation-name: animacion2;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 0.30s;
}

.dot-3 {
margin-left: 2.5rem;
background-color: var(--rz-primary-light);
animation-name: animacion3;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 0.45s;
}

.dot-4 {
background-color: var(--rz-primary-darker);
animation-name: animacion4;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 0.60s;
}

@keyframes animacion1 {
from {
transform: scale(1,1) translateX(0);
opacity: 0;
}

to {
transform: scale(1,1) translateX(0);
opacity: 0;
}

50% {
transform: scale(.8,.8) translateX(80px);
opacity: 1;
}

75% {
transform: scale(.8,.8) translateX(80px);
opacity: 1;
}
}

@keyframes animacion2 {
from {
transform: scale(1,1) translateX(0);
opacity: 0;
}

to {
transform: scale(1,1) translateX(0);
opacity: 0;
}

50% {
transform: scale(.8,.8) translateX(30px);
opacity: 1;
}

75% {
transform: scale(.8,.8) translateX(30px);
opacity: 1;
}
}

@keyframes animacion3 {
from {
transform: scale(1,1) translateX(0);
opacity: 0;
}

to {
transform: scale(1,1) translateX(0);
opacity: 0;
}

50% {
transform: scale(.8,.8) translateX(-30px);
opacity: 1;
}

75% {
transform: scale(.8,.8) translateX(-30px);
opacity: 1;
}
}

@keyframes animacion4 {
from {
transform: scale(1,1) translateX(0);
opacity: 0;
}

to {
transform: scale(1,1) translateX(0);
opacity: 0;
}

50% {
transform: scale(.8,.8) translateX(-80px);
opacity: 1;
}

75% {
transform: scale(.8,.8) translateX(-80px);
opacity: 1;
}
}

.rz-progressbar {
height: 5px;
margin: 10px 0px;
}

/**************SCROLLBAR******************/
.rz-data-grid-data::-webkit-scrollbar-thumb, .rz-dialog-content::-webkit-scrollbar-thumb, .scrollbar-primary-dark::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: var(--rz-primary-dark);
}

.scrollbar-primary-dark, .rz-data-grid-data {
scrollbar-color: var(--rz-primary-dark) #F5F5F5;
}

.rz-dialog-content {
scrollbar-color: #f5f5f5;
}

.rz-data-grid-data::-webkit-scrollbar-track, .rz-dialog-content::-webkit-scrollbar-track, .scrollbar-primary-dark::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid #F5F5F5;
}

.sidebar .scrollbar-primary-dark::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid transparent;
}

.rz-data-grid-data::-webkit-scrollbar-thumb, .rz-dialog-content::-webkit-scrollbar-thumb, .scrollbar-primary-dark::-webkit-scrollbar-thumb {
-webkit-box-shadow: none;
}

.rz-data-grid-data, .rz-dialog-content::-webkit-scrollbar-track, .scrollbar-primary-dark::-webkit-scrollbar-track {
border-radius: 0 !important;
}

.rz-data-grid-data::-webkit-scrollbar-thumb, .rz-dialog-content::-webkit-scrollbar-thumb, .scrollbar-primary-dark::-webkit-scrollbar-thumb {
border-radius: 0 !important;
}

.rz-data-grid-data::-webkit-scrollbar, .rz-dialog-content::-webkit-scrollbar, .scrollbar-primary-dark::-webkit-scrollbar {
width: 6px;
}

.rz-data-grid-data::-webkit-scrollbar, .rz-dialog-content::-webkit-scrollbar, .scrollbar-primary-dark::-webkit-scrollbar {
height: 6px;
}

.rz-data-grid-data, .rz-dialog-content, .scrollbar-primary-dark {
overflow-x: auto;
}

.form-group {
margin-bottom: 1rem;
}

/**************************sidebar favorites*/
.sidebar-fav-btn .rz-button-icon-left {
display: none;
}

.sidebar-fav-btn:hover .rz-button-icon-left {
display: flex;
}

.sidebar-fav-listbox {
background-color: transparent !important;
border: var(--rz-listbox-border) !important;
opacity: 100 !important;
color: var(--rz-text-color) !important;
width: 100%;
height: calc(50vh);
}

.sidebar-fav-listbox .rz-multiselect-item:hover {
background-color: transparent !important;
color: var(--rz-text-color) !important;
}

/***************margins***************************/
.m-0 {
margin: 0 !important
}

.mt-0, .my-0 {
margin-top: 0 !important
}

.mr-0, .mx-0 {
margin-right: 0 !important
}

.mb-0, .my-0 {
margin-bottom: 0 !important
}

.ml-0, .mx-0 {
margin-left: 0 !important
}

.m-1 {
margin: .25rem !important
}

.mt-1, .my-1 {
margin-top: .25rem !important
}

.mr-1, .mx-1 {
margin-right: .25rem !important
}

.mb-1, .my-1 {
margin-bottom: .25rem !important
}

.ml-1, .mx-1 {
margin-left: .25rem !important
}

.m-2 {
margin: .5rem !important
}

.mt-2, .my-2 {
margin-top: .5rem !important
}

.mr-2, .mx-2 {
margin-right: .5rem !important
}

.mb-2, .my-2 {
margin-bottom: .5rem !important
}

.ml-2, .mx-2 {
margin-left: .5rem !important
}

.m-3 {
margin: 1rem !important
}

.mt-3, .my-3 {
margin-top: 1rem !important
}

.mr-3, .mx-3 {
margin-right: 1rem !important
}

.mb-3, .my-3 {
margin-bottom: 1rem !important
}

.ml-3, .mx-3 {
margin-left: 1rem !important
}

.m-4 {
margin: 1.5rem !important
}

.mt-4, .my-4 {
margin-top: 1.5rem !important
}

.mr-4, .mx-4 {
margin-right: 1.5rem !important
}

.mb-4, .my-4 {
margin-bottom: 1.5rem !important
}

.ml-4, .mx-4 {
margin-left: 1.5rem !important
}

.m-5 {
margin: 3rem !important
}

.mt-5, .my-5 {
margin-top: 3rem !important
}

.mr-5, .mx-5 {
margin-right: 3rem !important
}

.mb-5, .my-5 {
margin-bottom: 3rem !important
}

.ml-5, .mx-5 {
margin-left: 3rem !important
}

.p-0 {
padding: 0 !important
}

.pt-0, .py-0 {
padding-top: 0 !important
}

.pr-0, .px-0 {
padding-right: 0 !important
}

.pb-0, .py-0 {
padding-bottom: 0 !important
}

.pl-0, .px-0 {
padding-left: 0 !important
}

.p-1 {
padding: .25rem !important
}

.pt-1, .py-1 {
padding-top: .25rem !important
}

.pr-1, .px-1 {
padding-right: .25rem !important
}

.pb-1, .py-1 {
padding-bottom: .25rem !important
}

.pl-1, .px-1 {
padding-left: .25rem !important
}

.p-2 {
padding: .5rem !important
}

.pt-2, .py-2 {
padding-top: .5rem !important
}

.pr-2, .px-2 {
padding-right: .5rem !important
}

.pb-2, .py-2 {
padding-bottom: .5rem !important
}

.pl-2, .px-2 {
padding-left: .5rem !important
}

.p-3 {
padding: 1rem !important
}

.pt-3, .py-3 {
padding-top: 1rem !important
}

.pr-3, .px-3 {
padding-right: 1rem !important
}

.pb-3, .py-3 {
padding-bottom: 1rem !important
}

.pl-3, .px-3 {
padding-left: 1rem !important
}

.p-4 {
padding: 1.5rem !important
}

.pt-4, .py-4 {
padding-top: 1.5rem !important
}

.pr-4, .px-4 {
padding-right: 1.5rem !important
}

.pb-4, .py-4 {
padding-bottom: 1.5rem !important
}

.pl-4, .px-4 {
padding-left: 1.5rem !important
}

.p-5 {
padding: 3rem !important
}

.pt-5, .py-5 {
padding-top: 3rem !important
}

.pr-5, .px-5 {
padding-right: 3rem !important
}

.pb-5, .py-5 {
padding-bottom: 3rem !important
}

.pl-5, .px-5 {
padding-left: 3rem !important
}

.m-n1 {
margin: -0.25rem !important
}

.mt-n1, .my-n1 {
margin-top: -0.25rem !important
}

.mr-n1, .mx-n1 {
margin-right: -0.25rem !important
}

.mb-n1, .my-n1 {
margin-bottom: -0.25rem !important
}

.ml-n1, .mx-n1 {
margin-left: -0.25rem !important
}

.m-n2 {
margin: -0.5rem !important
}

.mt-n2, .my-n2 {
margin-top: -0.5rem !important
}

.mr-n2, .mx-n2 {
margin-right: -0.5rem !important
}

.mb-n2, .my-n2 {
margin-bottom: -0.5rem !important
}

.ml-n2, .mx-n2 {
margin-left: -0.5rem !important
}

.m-n3 {
margin: -1rem !important
}

.mt-n3, .my-n3 {
margin-top: -1rem !important
}

.mr-n3, .mx-n3 {
margin-right: -1rem !important
}

.mb-n3, .my-n3 {
margin-bottom: -1rem !important
}

.ml-n3, .mx-n3 {
margin-left: -1rem !important
}

.m-n4 {
margin: -1.5rem !important
}

.mt-n4, .my-n4 {
margin-top: -1.5rem !important
}

.mr-n4, .mx-n4 {
margin-right: -1.5rem !important
}

.mb-n4, .my-n4 {
margin-bottom: -1.5rem !important
}

.ml-n4, .mx-n4 {
margin-left: -1.5rem !important
}

.m-n5 {
margin: -3rem !important
}

.mt-n5, .my-n5 {
margin-top: -3rem !important
}

.mr-n5, .mx-n5 {
margin-right: -3rem !important
}

.mb-n5, .my-n5 {
margin-bottom: -3rem !important
}

.ml-n5, .mx-n5 {
margin-left: -3rem !important
}

.m-auto {
margin: auto !important
}

.mt-auto, .my-auto {
margin-top: auto !important
}

.mr-auto, .mx-auto {
margin-right: auto !important
}

.mb-auto, .my-auto {
margin-bottom: auto !important
}

.ml-auto, .mx-auto {
margin-left: auto !important
}

/*******fonts********/
.rz-text-display-h5 {
font-weight: 400;
}

.icon-2x {
font-size: 2rem;
}

/* ============================
   MOBILE-FIRST FIXES (PHONES)
   Add missing default behavior
   ============================ */

/* Grid: give phone-safe max height + scrolling (desktop overrides keep working) */
.rz-data-grid {
height: auto;
width: 100%;
max-height: calc(100vh - 120px);
overflow: auto;
}

/* Grid/Tree height helpers: provide base behavior for phones */
.grid-full-height {
height: calc(100vh - 130px) !important;
}

.tree-full-height {
height: calc(100vh - 160px) !important;
}

.grid-medium-height {
height: calc(60vh) !important;
}

.tree-medium-height {
height: calc(60vh) !important;
}

.grid-small-height {
height: calc(40vh) !important;
}

.tree-small-height {
height: calc(40vh) !important;
}

.grid-embebed-lines {
height: calc(70vh) !important;
}

.grid-embebed-lines-summary {
height: calc(50vh) !important;
}

.grid-auto {
max-height: calc(100vh - 120px)
}

/* Tab form: ensure height + scroll on phones */
.tab-form {
width: 100%;
overflow: auto;
}

/* Tab form column: stack by default on phones */
.tab-form-col {
flex: 0 0 100%;
max-width: 100%;
}

/* Modal sizing: ensure modal-* classes do something on phones */
.modal-sm,
.modal-md,
.modal-lg,
.modal-xl,
.modal-xxl,
.modal-max {
width: 100%;
max-width: 100%;
max-height: 100vh;
margin: 0;
}

/* Improve dialog scrolling behavior on phones */
.rz-dialog-content {
max-height: calc(100vh - 56px);
overflow: auto;
}

/* Compact cell padding for grids — now via --rz-grid-cell-padding in sisu-theme-overrides.css */

/***********Dialog**************/
.rz-dialog.party-selector-dialog {
width: min(90vw, 1140px) !important;
}

.party-selector-dialog .rz-dialog-content {
display: flex;
flex: 1 1 auto;
min-height: 0;
}

/* Full-width dialogs only on mobile; desktop respects DialogOptions.Width */
@media (max-width: 768px) {
.rz-dialog {
width: 100% !important;
}

.rz-dialog.party-selector-dialog {
width: 100% !important;
}

.party-selector-dialog .autocomplete-list-dialog {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
}

.party-selector-dialog .autocomplete-list-dialog-grid {
width: 100% !important;
max-width: 100%;
min-width: 0;
overflow-x: auto;
}
}

/*******TabNavigation*/
/* Standard/Default/Dark: reinforce top-border indicator on selected tab.
   Material uses bottom-border indicators (border-top-width:0), so this rule
   is harmless there but we scope it to avoid future confusion. */
.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
border-top-color: var(--rz-tabs-tab-selected-top-border-color, darkgrey) !important;
}

/* Material theme: selected-tab bottom indicator inherits from the theme.
   Reset the base-CSS margin-bottom:-1px (designed for Standard card-tab overlap)
   which causes a 1px misalignment on Material's flat tab strip.
   Scoped via data-theme attribute set by setTheme() in Index.js. */
html[data-theme="material"] .rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
margin-bottom: 0;
}

html[data-theme="material"] .tab-navigation-container .rz-tabview-top > .rz-tabview-nav {
background-color: var(--rz-base-background-color);
}

html[data-theme="material"] .tab-navigation-container .rz-tabview-top > .rz-tabview-nav li a {
color: var(--rz-tabs-tab-color);
}

html[data-theme="material"] .tab-navigation-container .rz-tabview-top > .rz-tabview-nav li {
opacity: 0.7;
}

html[data-theme="material"] .tab-navigation-container .rz-tabview-top > .rz-tabview-nav li.rz-tabview-selected {
opacity: 1;
border-bottom: 2px solid var(--rz-primary);
}

html[data-theme="material"] .tab-navigation-container .rz-tabview-top > .rz-tabview-nav li.rz-tabview-selected a {
color: var(--rz-tabs-tab-selected-color);
font-weight: 500;
}

html[data-theme="material"] .tab-navigation-container {
background-color: var(--rz-base-background-color);
}

html[data-theme="material"] .tab-navigation-container > .rz-tabview,
html[data-theme="material"] .tab-navigation-container > .rz-tabview > .rz-tabview-panels,
html[data-theme="material"] .tab-navigation-container > .rz-tabview > .rz-tabview-panels > .rz-tabview-panel {
background-color: var(--rz-base-background-color);
}

html[data-theme="material"] .appfilter-label {
color: white;
}

.modal-console {
width: 100%;
height: 80vh;
min-height: 80vh;
display: flex;
flex-direction: column;
}

.console-wrapper {
flex: 1 1 auto;
overflow: auto;
font-family: monospace;
font-size: 0.85rem;
background: #111;
color: #cfcfcf;
padding: 0.75rem;
height: 100vh;
}

/* --------------------------
   Moved OUT of media queries
   (validation/behavior + non-responsive)
   -------------------------- */

.rz-tabview:has(> .rz-tabview-panels > .rz-tabview-panel:nth-of-type(1) .invalid)
> .rz-tabview-nav > li:nth-of-type(1).tab-validation {
border-top-color: red !important;
}

.rz-tabview:has(> .rz-tabview-panels > .rz-tabview-panel:nth-of-type(2) .invalid)
> .rz-tabview-nav > li:nth-of-type(2).tab-validation {
border-top-color: red !important;
}

.rz-tabview:has(> .rz-tabview-panels > .rz-tabview-panel:nth-of-type(3) .invalid)
> .rz-tabview-nav > li:nth-of-type(3).tab-validation {
border-top-color: red !important;
}

.rz-tabview:has(> .rz-tabview-panels > .rz-tabview-panel:nth-of-type(4) .invalid)
> .rz-tabview-nav > li:nth-of-type(4).tab-validation {
border-top-color: red !important;
}

.rz-tabview:has(> .rz-tabview-panels > .rz-tabview-panel:nth-of-type(5) .invalid)
> .rz-tabview-nav > li:nth-of-type(5).tab-validation {
border-top-color: red !important;
}

.rz-tabview:has(> .rz-tabview-panels > .rz-tabview-panel:nth-of-type(6) .invalid)
> .rz-tabview-nav > li:nth-of-type(6).tab-validation {
border-top-color: red !important;
}

.rz-tabview:has(> .rz-tabview-panels > .rz-tabview-panel:nth-of-type(7) .invalid)
> .rz-tabview-nav > li:nth-of-type(7).tab-validation {
border-top-color: red !important;
}

.rz-tabview:has(> .rz-tabview-panels > .rz-tabview-panel:nth-of-type(8) .invalid)
> .rz-tabview-nav > li:nth-of-type(8).tab-validation {
border-top-color: red !important;
}

.rz-tabview:has(> .rz-tabview-panels > .rz-tabview-panel:nth-of-type(9) .invalid)
> .rz-tabview-nav > li:nth-of-type(9).tab-validation {
border-top-color: red !important;
}

.rz-tabview:has(> .rz-tabview-panels > .rz-tabview-panel:nth-of-type(10) .invalid)
> .rz-tabview-nav > li:nth-of-type(10).tab-validation {
border-top-color: red !important;
}

.rz-tabview:has(> .rz-tabview-panels > .rz-tabview-panel:last-child .additional-field-entry .invalid)
> .rz-tabview-nav > li:last-child.tab-validation {
border-top-color: red !important;
}

/* ...repeat up to N */

/* .rz-tabview-panel padding — now via --rz-tabs-padding in sisu-theme-overrides.css */

/****Grid Loading*/
.rz-datatable-loading {
background-color: var(--rz-base-light) !important;
}

.form-group .rz-text-subtitle2 {
margin-bottom: .1rem;
}

.dialog-footer {
display: flex;
justify-content: end;
margin-top: 1rem;
}

.rz-dialog-titlebar {
display: flex;
align-items: center;
padding: 1rem;
}

.rz-dialog-titlebar-close {
margin-left: auto;
}

.rz-dialog-confirm-buttons button:last-of-type {
box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-danger);
color: var(--rz-danger) !important;
background-color: transparent !important;
}

.rz-fileupload-row {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.text-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/****Form field margin — now via --rz-form-field-margin-block in sisu-theme-overrides.css *****/

.export-data {
border-left: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
background-color: transparent !important;
}

.copy-account {
height: 22px;
}

.export-data .rz-navigation-item-icon-children {
color: #fff !important;
margin-left: -20px;
}

.pdfviewer {
width: 9in !important;
}

.pdfviewer .rz-dialog-content {
padding: 0 !important;
}

/*******Grid Header*******/
.rz-data-grid .rz-group-header {
justify-content: end !important;
z-index: 4; /* above grid head*/
}

.rz-data-grid .rz-group-header .rz-custom-header {
width: 100% !important;
}

.rz-data-grid .checkbox-column {
max-width: 30px !important;
min-width: 30px !important;
width: 30px !important;
word-break: break-all;
}

.tab-form-label {
flex: 0 0 100px;
text-align: left;
}

.party-switch-label {
flex: 0 0 160px;
text-align: left;
}

.tab-form-input {
flex: 1 1 auto;
}

.weekday-selector-wrapper {
position: relative;
width: 100%;
z-index: 1002;
}

.weekday-backdrop {
position: fixed;
inset: 0;
background: transparent;
z-index: 1001;
}

.weekday-popup-surface {
position: absolute;
z-index: 1003;
top: 100%;
left: 0;
margin-top: 0.125rem;
background-color: var(--rz-base-background-color, #ffffff);
border: 1px solid var(--rz-border-color, #d0d0d0);
border-radius: var(--rz-border-radius, 4px);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
min-width: 270px;
}

/*******Setting Explorer*******/

/**Breadcrumbs**/
.breadcrumb-btn-text:hover,
.breadcrumb-btn-text:focus,
.breadcrumb-btn-text:active,
.breadcrumb-btn-text:focus-visible {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}

.settings-tree-wrapper {
height: calc(100vh - 150px);
overflow-y: hidden;
display: flex;
flex-direction: column;
min-width: 12rem
}

/**Tree**/
.settings-tree {
width: 100%;
flex: 1;
}

.settings-tree:focus-visible {
background-color: transparent !important;
}

.settings-tree .rz-treenode-content-selected .rz-treenode-label {
background-color: transparent;
color: var(--rz-text-color);
}

.settings-tree .rz-treenode-content-selected .rz-treenode-label:hover {
background-color: var(--rz-tree-node-hover-background-color);
color: var(--rz-tree-node-hover-color);
border-radius: var(--rz-tree-node-selected-border-radius);
}

.settings-tree-node:active,
.breadcrumb-btn-text:focus-visible {
background-color: transparent !important;
}

.rz-fieldset-content {
padding: .5rem;
}

.pt-fieldset-notitle {
padding-top: 1.3rem !important;
}

.noborder {
border: none !important;
}

/*Tabs Dialogs*/
/* Host container must participate in flex so children can scroll correctly */
.tab-navigation-container {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
}

/* Radzen TabView must be allowed to shrink inside flex parents */
.tab-navigation-container > .rz-tabview {
flex: 1 1 auto;
min-height: 0;
}

/* Panels must inherit full height so overlay can cover the whole surface */
.tab-navigation-container > .rz-tabview,
.tab-navigation-container > .rz-tabview > .rz-tabview-panels,
.tab-navigation-container > .rz-tabview > .rz-tabview-panels > .rz-tabview-panel {
height: 100%;
min-height: 0;
}

/* rz-tabview-panels must clip to its explicit height; without overflow:hidden
   it can expand past 100% when panels have content and break the child
   height:100% chain for the active panel. */
.tab-navigation-container > .rz-tabview > .rz-tabview-panels {
overflow: hidden;
}

/* Panel container where the overlay is positioned */
.sisu-tab-panel-container {
position: relative;
min-height: 0;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}


/* Overlay + dialog surface */
.sisu-tab-dialog-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
z-index: 1200; /* above tab content, below Radzen side dialog wrappers */
}

/*
  For medium and large dialogs, align to flex-start (top of overlay) with
  vertical padding so the dialog header is never pushed above the overlay
  boundary when the dialog is taller than half the available space.
  Small dialogs (modal-sm) keep the default centered layout.
*/
.sisu-tab-dialog-overlay:has(.modal-md),
.sisu-tab-dialog-overlay:has(.modal-lg),
.sisu-tab-dialog-overlay:has(.modal-xl),
.sisu-tab-dialog-overlay:has(.modal-xxl),
.sisu-tab-dialog-overlay:has(.modal-max) {
align-items: flex-start;
padding-top: 1rem;
padding-bottom: 1rem;
}

.sisu-tab-dialog .dialog-footer {
display: flex;
justify-content: end;
margin-top: 0.5rem !important;
}

.sisu-tab-dialog-overlay--behind {
background: transparent !important;
pointer-events: none;
}

.sisu-tab-dialog-overlay--behind .sisu-tab-dialog:not(.sisu-tab-dialog--draggable) {
opacity: 0.98;
transform: scale(0.995);
}

.sisu-tab-dialog--draggable {
transform: translate3d(var(--sisu-dx, 0px), var(--sisu-dy, 0px), 0);
will-change: transform;
}

.sisu-tab-dialog--draggable .sisu-tab-dialog-header {
cursor: move;
user-select: none;
touch-action: none;
}

.sisu-tab-dialog--resizable:not(.sisu-tab-dialog--draggable) {
position: relative;
}

.sisu-tab-dialog--resizable .sisu-tab-dialog-body {
min-height: 0;
}

.sisu-tab-dialog--resizable.sisu-tab-dialog--user-sized {
width: var(--sisu-w, auto) !important;
height: var(--sisu-h, auto) !important;
max-width: none !important;
max-height: none !important;
box-sizing: border-box;
}

.sisu-tab-dialog-resize-handle {
position: absolute;
right: 0px;
bottom: 0px;
width: 14px;
height: 14px;
cursor: nwse-resize;
opacity: 0.65;
user-select: none;
touch-action: none;
}

.sisu-tab-dialog {
width: 100%;
max-height: calc(100% - 48px);
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--rz-base-background-color, #fff);
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.rz-dialog {
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.sisu-tab-dialog.rz-dialog {
animation: none !important;
transition: none !important;
}

.sisu-tab-dialog-overlay--behind .sisu-tab-dialog {
animation: none !important;
transition: none !important;
}

.sisu-tab-dialog-header {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
}

.sisu-tab-dialog-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 1rem;
padding-top: 0rem;
container: sisu-form-dialog / inline-size;
}

/* ============================================================================
   MODAL SIZES (consistent across breakpoints)
   - mobile-first: full width
   - lg and xl are the same size
   ============================================================================ */

/* Ensure .sisu-tab-dialog respects modal-* sizing (base/mobile) */
.sisu-tab-dialog.modal-sm,
.sisu-tab-dialog.modal-md,
.sisu-tab-dialog.modal-lg,
.sisu-tab-dialog.modal-xl,
.sisu-tab-dialog.modal-xxl,
.sisu-tab-dialog.modal-max {
width: 100%;
max-width: 100%;
max-height: calc(100% - 10px);
}

/* Keep modal-max always near-fullscreen */
.sisu-tab-dialog.modal-max {
max-width: calc(100% - 16px);
max-height: calc(100% - 10px);
}

.table-auto-col .rz-grid-table {
table-layout: auto !important;
}

/* =============================================================================
   MEDIA QUERIES (GROUPED BY BREAKPOINT)
   ============================================================================= */

/* ========576px======== */
@media (min-width: 576px) {
.modal-sm {
max-width: 500px;
}

.sisu-tab-dialog.modal-sm {
max-width: 500px;
}
}

/* ========768px======== */
@media (min-width: 768px) {
.filter-bar .value-field {
flex: 0 0 8rem;
max-width: 8rem;
}

.filter-bar .filter-col {
flex: 1 1 clamp(28rem, 48%, 36rem);
min-width: clamp(28rem, 48%, 36rem);
}

/* REMOVED: .rz-data-grid { height: calc(100vh - 130px); }
   Viewport-based global grid height. Grids are now sized by their mode class
   (grid-tab-fill, grid-embedded-sm/md/lg, grid-dialog). */

.brandimg {
height: calc(100vh - 82px) !important;
}

.table-auto-height {
height: auto !important;
}

/* ── LEGACY viewport-height grid classes ──────────────────────────────────────
   Kept for backward compatibility. New code should use the canonical classes:
     Full-page tab grid  → grid-tab-page  +  grid-tab-fill
     Bounded child grid  → grid-embedded-sm / -md / -lg
     Auto-height grid    → grid-auto
   Do not add new usages of the classes below.
   ──────────────────────────────────────────────────────────────────────────── */
.grid-full-height {
height: calc(100vh - 120px) !important;
}

.tree-full-height {
height: calc(100vh - 160px) !important;
}

.grid-medium-height {
height: calc(50vh - 72px) !important;
}

.grid-100-height {
height: 100% !important;
}

.grid-embebed-lines {
height: calc(60vh - 25px) !important;
}

.grid-embebed-lines-summary {
height: calc(50vh - 30px) !important;
}

.tree-medium-height {
height: calc(50vh - 72px) !important;
}

.grid-small-height {
height: calc(25vh) !important;
}

.tree-small-height {
height: calc(25vh) !important;
}

.tab-error-message {
height: calc(100vh - 130px) !important;
}

/* LEGACY: .tab-form viewport height — kept for existing tabbed forms (BankAccountForm, etc.).
   New forms should use .sisu-form + .sisu-form-body inside a sisu-tab-dialog whose body
   already controls height via flex. Do not add new usages. */
.tab-form {
width: 100%;
height: calc(100vh - 260px);
}

.tab-form-label {
flex: 0 0 150px;
text-align: left;
}

/* md */
.modal-md {
max-width: 720px;
max-height: 95vh;
}

.sisu-tab-dialog.modal-md {
max-width: 720px;
max-height: calc(100% - 0.3rem);
}
}

/* ========992px======== */
@media (min-width: 992px) {
.w-100-md-75 {
width: 75% !important;
}

.w-100-md-50 {
width: 50% !important;
}

/* lg == xl */
.modal-lg, .modal-xl {
max-width: 800px;
max-height: 95vh;
}

.sisu-tab-dialog.modal-lg, .sisu-tab-dialog.modal-xl {
max-width: 800px;
max-height: calc(100% - 0.3rem);
}

/* Treatment execution — wider two-column dialog */
/* Overlay: top-align so tall dialogs are never clipped above the header */
.sisu-tab-dialog-overlay:has(.treatment-execution-dialog) {
align-items: flex-start;
padding-top: 1rem;
padding-bottom: 1rem;
}

.sisu-tab-dialog.treatment-execution-dialog {
max-width: min(95vw, 1400px);
max-height: calc(100% - 0.3rem); /* relative to overlay minus padding */
display: flex;
flex-direction: column;
overflow: hidden; /* dialog surface clips; body scrolls */
}

.sisu-tab-dialog.treatment-execution-dialog .sisu-tab-dialog-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}

/* MAPA usos scroll container */
.mapa-usos-scroll {
max-height: 360px;
overflow-y: auto;
overflow-x: auto;
}

/* xxl + max */
.modal-xxl {
max-width: 80vw;
max-height: 100vh;
}

.sisu-tab-dialog.modal-xxl {
max-width: 80vw;
max-height: calc(100% - 0.3rem);
}

.modal-max {
max-width: 95vw;
max-height: 100vh;
}

.sisu-tab-dialog.modal-max {
max-width: 95vw;
max-height: calc(100% - 0.3rem);
}

/* REMOVED: .rz-data-grid { height: calc(100vh - 130px); }
   Viewport-based global grid height. Replaced by grid-tab-fill flex pattern. */

.brandimg {
height: calc(100vh - 82px) !important;
}

/* ── LEGACY viewport-height grid classes — see 768px block for guidance ── */
.grid-full-height {
height: calc(100vh - 120px) !important;
}

.tree-full-height {
height: calc(100vh - 160px) !important;
}

.grid-medium-height {
height: calc(50vh - 72px) !important;
}

.grid-embebed-lines {
height: calc(60vh - 25px) !important;
}

.grid-embebed-lines-summary {
height: calc(50vh - 30px) !important;
}

.tree-medium-height {
height: calc(50vh - 72px) !important;
}

.grid-small-height {
height: calc(25vh) !important;
}

.tree-small-height {
height: calc(25vh) !important;
}

.tab-error-message {
height: calc(100vh - 130px) !important;
}

.filter-bar .value-field {
flex: 0 0 12rem;
max-width: 12rem;
}

.sisu-tab-dialog.modal-sm {
max-height: calc(100% - 10px);
}

/* REMOVED: .tab-form-label { flex: 0 0 150px } — identical to the 768px rule above, redundant. */
}

/* ========1200px======== */
@media (min-width: 1200px) {
/* lg == xl */
.modal-lg, .modal-xl {
max-width: 1140px
}

.sisu-tab-dialog.modal-lg, .sisu-tab-dialog.modal-xl {
max-width: 1140px
}

/* Treatment execution wider on large screens */
.sisu-tab-dialog.treatment-execution-dialog {
max-width: min(95vw, 1500px);
}

.mapa-usos-scroll {
max-height: 420px;
}
}

@media (max-width: 1200px) {
.tab-form-col {
flex: 0 0 100% !important;
max-width: 100% !important;
}

.mapa-usos-scroll {
max-height: 300px;
overflow:auto;
}
}

/* Tablet: treatment dialog stacks guidance below form, controls max-height */
@media (max-width: 1024px) {
.sisu-tab-dialog.treatment-execution-dialog {
max-width: min(98vw, 900px);
max-height: calc(100% - 0.3rem);
}
}

@media (max-width: 768px) {
.sisu-tab-dialog-overlay:has(.sl-sales-order-dialog) {
position: fixed;
}

.sisu-tab-dialog.sl-sales-order-dialog {
max-width: calc(100% - 16px);
}

.mapa-usos-scroll {
max-height: 260px;
}

/* Treatment execution — edge-to-edge on mobile */
.sisu-tab-dialog-overlay:has(.treatment-execution-dialog) {
padding: 0;
}

.sisu-tab-dialog.treatment-execution-dialog {
max-width: 100%;
max-height: 100%;
width: 100% !important;
border-radius: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}

.sisu-tab-dialog.treatment-execution-dialog .sisu-tab-dialog-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
}

/* ============================================================================
   TAB PANEL FLEX CONTAINER
   Make the active Radzen tab panel a flex column so grid-tab-page children
   can stretch to fill it. Scoped to .tab-navigation-container to avoid
   affecting dialogs or other tabview instances.
   ============================================================================ */

.tab-navigation-container > .rz-tabview > .rz-tabview-panels > .rz-tabview-panel:not([aria-hidden="true"]) {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
}

.tab-navigation-container > .rz-tabview > .rz-tabview-panels > .rz-tabview-panel:not([aria-hidden="true"]) > .grid-tab-page,
.tab-navigation-container > .rz-tabview > .rz-tabview-panels > .rz-tabview-panel:not([aria-hidden="true"]) > .sisu-tab-panel-container {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}

/* ============================================================================
   CANONICAL GRID LAYOUT CLASSES
   Four modes; choose the one that matches the layout context:

     MODE 1 — grid-tab-page / grid-tab-fill
              Full-page tab grid. Fills the entire available tab panel height.
              Use on pages opened inside TabNavigationComponent.

     MODE 2 — grid-auto
              Auto-height grid. Sizes to content. No fixed or flex height.
              Use for small inline grids, wizard steps, or nested detail panels
              where the surrounding container controls scroll.

     MODE 3 — grid-embedded-sm / grid-embedded-md / grid-embedded-lg
              Embedded grid with a bounded max-height. Scrolls inside its box.
              Use for child line-item grids inside a form or dialog.

     MODE 4 — grid-dialog
              Grid that fills its dialog body. Dialog controls the height.

   erp-grid-* aliases are kept for backward compatibility with FieldNotebook.
   ============================================================================ */

/* MODE 1: Full-page tab grid — fills available tab panel height */
.grid-tab-page,
.erp-grid-page {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
}

.grid-tab-toolbar,
.erp-grid-toolbar {
flex: 0 0 auto;
}

.grid-tab-fill,
.erp-grid-fill {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}

.grid-tab-fill .rz-data-grid,
.erp-grid-fill .rz-data-grid {
flex: 1 1 auto;
min-height: 0;
height: auto !important;
max-height: 100%;
display: flex;
flex-direction: column;
}

.grid-tab-fill .rz-data-grid-data,
.erp-grid-fill .rz-data-grid-data {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow: auto;
}

/* MODE 2: Auto-height grid — sizes to content, no fixed or flex height.
   Use for small inline grids, wizard steps, or detail panels where the
   surrounding container is responsible for scroll. */
.grid-auto {
height: auto;
}

.grid-auto .rz-data-grid {
height: auto !important;
max-height: none;
}

/* MODE 3: Embedded grids with fixed bounded height */
.grid-embedded-sm {
max-height: 18rem;
overflow: auto;
}

.grid-embedded-md {
max-height: 28rem;
overflow: auto;
}

.grid-embedded-lg {
max-height: 36rem;
overflow: auto;
}

/* MODE 4: Grid inside a bounded dialog */
.grid-dialog {
height: 100%;
max-height: 100%;
min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIELD MOBILE — shared button design system (PBI UX harmonization)
   Three variants:
     .field-btn-cta       — Primary CTA  (full-width, major actions)
     .field-btn-utility   — Secondary    (small inline, neutral)
     .field-btn-destruct  — Destructive  (full-width, stacked clear/reset)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Primary CTA ── */
.field-btn-cta {
width: 100%;
height: 2.75rem;
padding: 0 1rem;
border-radius: var(--rz-border-radius, 4px);
margin-bottom: 0.5rem;
}

.field-btn-cta .rz-button-box {
justify-content: center;
}

/* ── Secondary utility ── */
.field-btn-utility {
height: 2rem;
padding: 0 0.65rem;
border-radius: var(--rz-border-radius, 4px);
}

/* ── Destructive (stacked full-width) ── */
.field-btn-destruct {
width: 100%;
height: 2.75rem;
padding: 0 1rem;
border-radius: var(--rz-border-radius, 4px);
}

.field-btn-destruct .rz-button-box {
justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIELD MOBILE — shared list / card design system
   Used by: FieldIrrigationList, FieldTreatmentList, FieldNotebookMobile

   Layout layers inside every card:
     .field-list-header      — badge (left) + date (right)
     .field-list-prominent   — bold primary-data row  (icon + text, flex)
     .field-list-title       — bold title row         (block, truncated)
     .field-list-meta        — secondary-data rows    (icon + text stack)
     .field-list-notes       — notes footer           (italic, clamped)

   Container helpers:
     .field-list-cards       — gap wrapper for a bare card loop
     .field-list-search      — search bar spacing wrapper
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card shell ── */
.field-list-card {
padding: 0.75rem;
border-radius: var(--rz-border-radius, 4px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

/* ── Header row: badge left, date right ── */
.field-list-header {
margin-bottom: 0.4rem;
}

/* ── Badge inside header ── */
.field-list-badge {
flex-shrink: 0;
font-size: 0.7rem;
}

/* ── Prominent secondary row (icon + bold text, flex) ── */
.field-list-prominent {
display: flex;
align-items: center;
gap: 0.25rem;
margin-bottom: 0.3rem;
font-weight: 600;
color: var(--rz-text-color, inherit);
}

/* ── Title row (block element, truncated) ── */
.field-list-title {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 0 0.3rem 0;
}

/* ── Meta rows stack ── */
.field-list-meta {
margin-bottom: 0.3rem;
}

.field-list-meta .rz-text {
margin: 0;
line-height: 1.4;
}

/* ── Notes footer ── */
.field-list-notes {
margin-top: 0.4rem;
font-style: italic;
color: var(--rz-text-secondary-color, #5f6368);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* ── Card gap wrapper (for bare foreach loops without RadzenStack) ── */
.field-list-cards {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

/* ── Search bar wrapper — mirrors GenericMobileList .gml-search-bar ── */
.field-list-search {
padding: 0.25rem 0;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

/*******Compliance Reports*******/
.tab-report-item-panel {
display: flex;
flex-direction: column;
height: 60vh;
}

/* ============================================================================
   FORM DIALOG RESPONSIVENESS
   Keep form content constrained by the usable dialog width. Data-grid layout
   is intentionally excluded: embedded grids retain their own local scrollers.
   ============================================================================ */
.sisu-tab-dialog-body :is(.sisu-form, .tab-form),
.sisu-tab-dialog-body :is(.sisu-form, .tab-form) :is(.rz-row, .rz-column, .rz-card, .rz-fieldset, fieldset) {
min-width: 0;
max-width: 100%;
}

.sisu-tab-dialog-body .tab-form {
height: auto;
overflow: visible;
}

.sisu-tab-dialog-body .tab-form .rz-tabview,
.sisu-tab-dialog-body .tab-form .rz-tabview-panels,
.sisu-tab-dialog-body .tab-form .rz-tabview-panel,
.sisu-tab-dialog-body .tab-form-row,
.sisu-tab-dialog-body .tab-form-input {
width: 100%;
min-width: 0;
max-width: 100%;
}

.sisu-tab-dialog-body .tab-form .rz-tabview-nav {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
}

.sisu-tab-dialog-body .tab-form .rz-tabview-nav > li {
flex: 0 0 auto;
}

@container sisu-form-dialog (max-width: 75rem) {
.sisu-tab-dialog-body .tab-form .rz-row:has(> .tab-form-col:nth-child(3)):not(:has(> .tab-form-col:nth-child(4))) > .tab-form-col {
flex: 0 0 50% !important;
max-width: 50% !important;
}

.sisu-tab-dialog-body .tab-form .rz-row:has(> .tab-form-col:nth-child(3)):not(:has(> .tab-form-col:nth-child(4))) > .tab-form-col:nth-child(3) {
flex-basis: 100% !important;
max-width: 100% !important;
}
}

@container sisu-form-dialog (max-width: 66rem) {
.sisu-tab-dialog-body .gf-two-column-layout > [class*="rz-col-"],
.sisu-tab-dialog-body .tab-form-col {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}

@container sisu-form-dialog (max-width: 54rem) {
.sisu-tab-dialog-body :is(.sisu-form, .tab-form) :is(.tab-form-row, .rz-stack.rz-flex-row:has(> .tab-form-label)) {
flex-wrap: wrap !important;
align-items: flex-start;
}

.sisu-tab-dialog-body .tab-form-label {
flex: 1 1 100%;
text-align: left;
min-width: 0;
overflow-wrap: anywhere;
}

.sisu-tab-dialog-body .tab-form-input {
flex: 1 1 100%;
}
}