@CHARSET "ISO-8859-1";

.groupboxbtn {
    border-radius: 2px;
    padding: 6px 14px;
    padding: 0px 8px !important;
    background-color: var(--color-bg-white);
    border-color: var(--color-border-gray-1);
    text-decoration: none;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: var(--color-text-named-blue);
}

.actionbtn {
    padding: 3px 3px 3px 8px;
    margin-bottom: 0;
    font-stretch: normal;
    font-weight: 400;
    font-style: normal;
    line-height: 18px;
    letter-spacing: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: var(--color-bg-white);
    background-color: var(--color-accent-purple);
    border-radius: 2px;
    text-decoration: none;
}

.actionbtnC {
    border-radius: 2px;
    padding: 6px 14px;
    padding: 3px 10px !important;
    background-color: var(--color-bg-white);
    border-color: var(--color-border-gray-1);
    text-decoration: none;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
    color: var(--color-accent-pink);
}

.actionbtn2 {
    border-radius: 2px;
    padding: 6px 14px;
    padding: 3px 6px !important;
    background-color: var(--color-bg-white);
    border-color: var(--color-border-gray-1);
    text-decoration: none;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
    color: var(--color-primary);
}

.actiongridhbox {
    margin-top: 19px;
}

.actionbtngrid {
    padding: 4px 0px 3px 3px;
    margin-bottom: 0;
    font-stretch: normal;
    font-weight: 400;
    font-style: normal;
    line-height: 18px;
    letter-spacing: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: var(--color-bg-white);
    background-color: var(--color-accent-purple);
    border-radius: 2px;
    text-decoration: none;
}

/* ----------------------------------------------------------------------------------------------------------------------- */
/* Images
/* ----------------------------------------------------------------------------------------------------------------------- */
.fimageclearall {
    width: 25px;
    margin-left: 10px;
    margin-top: 35px;
    background-image: url('../images/clearall24.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
}

.nodatafound {
    background-image: url('../images/nodatafound.jpg');
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
}

.photoimgcenter {
    border: 0 none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.toplinks {
    padding-right: 6px;
    cursor: pointer;
}

.soapedit {
    margin-top: -6px;
    cursor: pointer;
}

.soapimage {
    margin-top: -6px;
    padding-right: 10px;
}

.fimageerror {
    width: 55px;
    background-image: url('../images/apperror.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
}

.fimageeventlog {
    background-image: url('../images/eventlog24.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 25px;
    margin-top: 7px;
}

.fimagecancelappt {
    background-image: url('../images/cancelappt24.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 25px;
    margin-top: 7px;
}

.apptimg.img {
    margin-top: 6px;
}

.fImagecsvlist {
    background-image: url('../images/csv24.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 25px;
}

.fImageexcellist {
    background-image: url('../images/excel24.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 23px;
}

.fImagecheckin {
    background-image: url('../images/checkin.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 32px;
}

.fImagecheckin20 {
    background-image: url('../images/checkin20.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 20px;
}

.fImageInsEligi20 {
    background-image: url('../images/insuranceelig24.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 20px;
}

.fImageCSV {
    width: 55px;
    background-image: url('../images/csv-32.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 35px;
}

.fimageAllowed {
    width: 28px;
    height: 28px;
    background-image: url('../images/allowed24.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
}

.fimagewriteoff {
    width: 28px;
    height: 28px;
    background-image: url('../images/writeoff24.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
}

.fimageallowpayment {
    width: 28px;
    height: 28px;
    background-image: url('../images/allowpayment24.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
}

.fimageinsadj {
    width: 28px;
    height: 28px;
    background-image: url('../images/insadj24.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
}

/* ----------------------------------------------------------------------------------------------------------------------- */
/* Only for Main.zul
/* ----------------------------------------------------------------------------------------------------------------------- */
.topcontainer {
    width: 100%;
}

.topleftdiv {
    float: left;
    width: 100px;
}

.toprightdiv {
    float: right;
    padding-top: 10px;
    padding-bottom: 7px;
}

.toprightdiv1 {
    position: absolute;
    top: 30px;
    right: 100px;
}

.topcenterdiv1 {
    margin: 0 auto;
    width: 630px;
    text-align: center;
    background: transparent;
    padding-top: 2px;
}

.Mainmenudiv {
    background-image: none;
    background-position: top center;
}

.page-content {
    padding: 5px 12px 1px;
}

.mygroupbox {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    border-radius: 0px;
    border: none;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 2px;
    margin-right: 26px;
    margin-left: 27px;
}

.mygroupbox > .panel-heading {
    border-color: var(--color-border-light) !important;
    font-size: 12px;
    padding: 4px 5px;
    color: var(--color-bg-white);
}

.panelmbtm {
    background-color: var(--color-bg-white);
    border: 1px solid transparent;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    border-radius: 0px;
    border: none;
    box-shadow: 0px 1px 2px 0px #3a6798;
    margin-bottom: 7px;
}

.panelmbtm > .panel-heading {
    border-color: var(--color-border-light) !important;
    font-size: 15px;
    padding: 7px 8px;
}


.portlet {
    background: var(--color-bg-white) none repeat scroll 0 0;
    box-shadow: none;
    margin-bottom: 20px;
    transition: all 0.4s ease 0s;
}

.portlet .portlet-body {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 15px;
}

.dirtypos {
    margin-top: -4px;
    color: var(--color-text-named-green);
}

.dirtyposcrd {
    margin-top: -4px;
    color: var(--color-text-named-red);
    float: right;
}

.screenheaderbuts {
    float: right;
    margin-top: 6px;
}

.open-true {
    float: right;
    background: url('img/UP201.png') no-repeat right 0;
    height: 16px;
    padding-right: 20px;
    font-weight: bold;
}

.pull-left {
    float: left !important;
}

.sectionSeperator {
    margin-bottom: 18px;
    padding-bottom: 0.25em;
    margin-left: 20px;
    border-bottom: 4px solid;
}

.sectionSeperator5 {
    margin-bottom: 18px;
    padding-bottom: 0.25em;
    margin-left: 20px;
    border-bottom: 3px solid;
    color: var(--color-primary);
}

.sectionSeperator5a {
    margin-bottom: 18px;
    padding-bottom: 0.25em;
    border-bottom: 3px solid;
}

.sectionSeperator3 {
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-left: 20px;
    border-bottom: 4px solid;
}

.sectionSeperator2 {
    margin-bottom: 18px;
    padding-bottom: 0.25em;
    border-bottom: 2px solid;
}

.sectionSeperator4 {
    margin-bottom: 0px;
    padding-bottom: 0px;
    border-bottom: 2px solid;
}

.pull-right {
    float: right !important;
}

.alignleft {
    float: left;
    width: 33.33333%;
    text-align: left;
}

.alignright {
    float: left;
    width: 33.33333%;
    text-align: right;
}

​ .screenheader2 {
    float: left;
}

.fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
}

.fa-2x {
    font-size: 1.5em;
}

.clearboth {
    clear: both;
}

.divrounded2 {
    border: 1px solid var(--color-border-medium);
    border-radius: 5px;
    height: 27px;
    margin-top: 7px;
    padding-left: 4px;
    padding-top: 7px;
}

.divrounded {
    border: 1px solid var(--color-border-medium);
    border-radius: 5px;
    height: 26px;
    margin-top: 1px;
    padding-left: 4px;
    padding-top: 2px;
}


.divsearch {
    /* border: 2px solid var(--color-forest-green); */
    border-radius: 5px;
    margin-top: -13px;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 7px;
    overflow-y: auto;
    border: 2px solid var(--color-border-divider-light);
}

.floatcenter {
    margin: 0 auto;
    width: 60%;
    margin: 0 auto;
}

.floatright {
    float: right;
}

.floatleft {
    float: left;
}

.floatleftmargin {
    float: left;
    margin-top: 6px;
    margin-left: 9px;
}

.floatleftspacing {
    float: left;
    padding-left: 20px
}

.divright {
    float: right;
    width: 40%;
}

.divleft {
    float: left;
    width: 58%;
}

.divrighthalf {
    float: right;
    width: 49%;
}

.divleft50 {
    float: left;
    width: 49%;
}

.divright50 {
    float: right;
    width: 49%;
}

.divlefthalf {
    float: left;
    width: 49%;
}

.divright201 {
    float: right;
    width: 5%;
}

.divleft801 {
    float: left;
    width: 95%;
}

.divleft80 {
    float: left;
    width: 95%;
}

.divright20 {
    float: right;
    width: 5%;
}

.divleft60 {
    float: left;
    width: 59%;
}

.divright40 {
    float: right;
    width: 29%;
    margin-right: 22px;
}

.divleft10 {
    float: left;
    width: 10%;
}

.divright90 {
    float: right;
    width: 90%;
}

.divleftchart {
    float: left;
    width: 75%;
}

.divrightchart {
    float: right;
    width: 24%;
    padding-right: 15px
}

.aligncenter {
    float: left;
    width: 100%;
    text-align: center;
}

.sectionpadding {
    padding-left: 17px;
    padding-right: 12px;
}

.sectionpaddingbottom {
    padding-top: 40px;
    padding-bottom: 60px;
}

.sectionpaddingbottom2 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.sectionpadding36 {
    padding-left: 3px;
    padding-right: 6px;
}

.sectionpadding3 {
    padding-left: 26px;
    padding-right: 25px;
}

.sectionpadding2326 {
    padding-left: 21px;
    padding-right: 28px;
}

.sectionpadding4 {
    padding-left: 24px;
    padding-right: 24px;
}

.sectionpadding10 {
    padding-left: 10px;
}

.highlightcellText {
    color: var(--color-text-named-blue);
    cursor: pointer;
    text-decoration: underline;
}

.groupboxExOpen {
    float: right;
    background: url('../images/plus16.png') no-repeat right 0;
    height: 16px;
    font-weight: bold;
    top: 3px;
    clear: right;
    width: 16px;
}

.groupboxExClose {
    float: right;
    background: url('../images/minus20.png') no-repeat right 0;
    height: 16px;
    font-weight: bold;
    top: 3px;
    clear: right;
    width: 16px;
}

.groupboxExOpenTrans {
    float: right;
    background: url('../images/minus20.png') no-repeat right 0;
    height: 16px;
    font-weight: bold;
    top: 3px;
    clear: right;
    width: 16px;
}

.groupboxExCloseTrans {
    float: right;
    background: url('../images/plus16.png') no-repeat right 0;
    height: 16px;
    font-weight: bold;
    top: 3px;
    clear: right;
    width: 16px;
}

.rightIcon {
    float: right;
    background: url('../images/right.png') no-repeat right 0;
    font-weight: bold;
    top: 3px;
    clear: right;
    height: 15px;
    width: 15px;
}


.myhtml h4 {
    padding-left: 40px;
    font-size: 14px
}

.myhtml p {
    padding-left: 40px;
    font-size: 14px
}

.top5 {
    margin-top: 5px;
}

.blinkme {
    animation: blinker 1s linear infinite;
    color: var(--color-highlight-red);
    font-weight: 900;
    size: 25px;
}


.childheader {
    float: left;
    margin-left: 4px;
}

.childseperator {
    margin-bottom: 3px;
    padding-bottom: 0.25em;
    border-bottom: 2px solid;
    margin-left: 3px;
    margin-right: 6px;
}

.childactions {
    float: right;
    margin-top: 5px;
    margin-right: 5px;
}

.fa {
    text-decoration: none;
}

.card {
    padding-top: 20px;
    margin: 10px 0 20px 0;
    background-color: rgba(214, 224, 226, 0.2);
    border-top-width: 0;
    border-bottom-width: 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.card.hovercard .avatarimg {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.5);
}

.card.people .card-info {
    position: absolute;
    top: 150px;
    display: inline-block;
    width: 100%;
    height: 101px;
    overflow: hidden;
    background: var(--color-bg-white);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.card.people .card-info .desc {
    display: block;
    margin: 8px 14px 0 14px;
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-text-gray-dim);
    text-overflow: ellipsis;
}

.card.hovercard {
    position: relative;
    padding-top: 0;
    overflow: hidden;
    text-align: center;
    background-color: rgba(214, 224, 226, 0.2);
    height: 185px;
}

.card.hovercard .cardheader {
    background-color: var(--color-primary-darker);
    background-size: cover;
    height: 85px;
}

.card.hovercard .bottom {
    padding: 0 10px;
    margin-bottom: 17px;
}

/* TOGGLE BOX */
.switch input {
    display: none;
}

.cmn-toggle-round > label:before,
.cmn-toggle-round > label:after {
    width: 120px;
    height: 20px;
    background-color: #dddddd;
    position: absolute;
    top: 1px;
    content: "";
}

.cmn-toggle-round > label:before {
    background-color: #A9A9A9;
    border-radius: 60px;
    transition: background 0.3s;
    width: 46px;
}

.cmn-toggle-round > label:after {
    width: 27px;
    background-color: var(--color-bg-white);
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.3s;
}

.cmn-toggle-round > input:checked + label:before {
    background-color: #2196F3;
}

.cmn-toggle-round > input:checked + label:after {
    margin-left: 22px;
}

.customlabel {
    color: var(--color-text-black);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.03em;
    margin-bottom: 0;
    margin-top: 0;
}

.customSave {
    border-radius: 6px;
    padding: 6px 14px;
    padding: 5px 8px !important;
    background-color: var(--color-accent-purple);
    border-color: var(--color-bg-off-white);
    text-decoration: none;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
    color: var(--color-bg-near-white);
    margin-right: 12px;
}

.rectangle {
    width: 90px;
    border: 1px solid var(--color-named-gray);
    padding-top: 3px;
    padding-bottom: 4px;
}

.nosep .z-hbox-separator {
    width: 0em;
}

.screenheaderlabel {
    color: var(--color-bg-white);
}

.grbbuttonred {
    color: var(--color-text-named-red);
    padding-left: 22px;
}

.grbbuttonred > .labellink.z-label {
    color: var(--color-text-named-red);
    cursor: pointer;
    text-decoration: underline;
}

.grbbuttonblue {
    color: var(--color-text-named-blue);
    padding-left: 22px;
}

.grbbuttonblue > .labellink.z-label {
    color: var(--color-text-named-blue);
    cursor: pointer;
    text-decoration: underline;
}

.grbbutton > .labellink.z-label {
    color: var(--color-text-named-blue);
    cursor: pointer;
    text-decoration: underline;
}

.grbbutton {
    float: right;
    color: var(--color-text-named-blue);
    padding-left: 14px;
}

.grbbutton > .buttonlink.z-button {
    color: var(--color-text-named-blue);
    cursor: pointer;
    text-decoration: underline;
    letter-spacing: 0.03em;
    margin-bottom: 0;
    margin-top: 0;
    background: none;
    font-family: Arial, Sans-serif;
    font-size: 12px;
    font-weight: normal;
    display: inline-block;
    line-height: 24px;
    padding-left: 8px;
}

.facesheetsection {
    padding-left: 42px;
    padding-bottom: 25px;
    padding-top: 12px;
    width: 90%;
}

.facesheetsection2 {
    padding-bottom: 25px;
    width: 88%;
    padding-left: 8px;
}

.soapheading2.z-label {
    font-size: 14px;
    font-weight: bolder;
    color: var(--color-text-named-blue);
    margin-top: -2px;
    padding-bottom: 10px;
}


/*
.slide-panel {
    position: absolute;
    top: 0;
    right: -370px;
    width: 370px;
    height: 100%;
    background: var(--color-bg-white);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: right 0.3s ease;
}

.slide-panel.open {
    right: 0;
}

.overlay-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    display: none;
}

.overlay-mask.show {
    display: block;
}
*/

.popup-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    margin-bottom: 2px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
    transition: background-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    color: var(--color-text-named-green);
    /* label text color */
}

.popup-link:hover {
    background-color: var(--color-bg-gray-1);
    color: var(--color-info-light);
}

.popup-link .z-icon {
    color: var(--color-success);
    /* ✅ green icon color (material green 800) */
    font-size: 14px;
}

/* Optional: make icons darker var(--color-text-named-green) on hover */
.popup-link:hover .z-icon {
    color: var(--color-success-dark);
}

.flex-line-align {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.left-buttons {
    /* Optional: style or spacing for left side */
}

.right-buttons button {
    margin-left: 8px;
    /* spacing between right-side buttons */
}


.slide-panel {
    position: absolute;
    top: 0;
    right: -370px;
    /* hidden */
    width: 370px;
    height: 100%;
    background: var(--color-bg-white);
    z-index: 1000;
    transition: right 0.3s ease;
    box-shadow: none;
    /* default no shadow */
}

.slide-panel.open {
    right: 0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
}

.overlay-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    display: none;
}

.overlay-mask.show {
    display: block;
}


/* Card container */
.encounter-card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px 12px; /* Compact padding inside the card */
    margin-bottom: 12px;
    background-color: var(--color-bg-gray-6);
    font-size: 13px;

    width: 100%; /* ✅ full width */
    box-sizing: border-box; /* ✅ padding included */
}

.onhold-card {
    border-left: 3px solid #B45309;
    background-color: #FFFBEB;
    border-radius: 0 8px 8px 0;
}

.onhold-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    font-size: 11px;
    font-weight: 600;
    color: #B91C1C;
    background-color: #FEE2E2;
    padding: 2px 10px;
    border-radius: 999px;
}

.onhold-badge-inline {
    position: static;
    display: inline-block;
}

.onhold-banner {
    background-color: #FCEBEB;
    border: 1px solid #F09595;
    border-left: 3px solid #A32D2D;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    margin-top: 14px;
    margin-bottom: 12px;
}

.onhold-banner-icon {
    margin-right: 6px;
    color: #791F1F;
}

.onhold-banner-title {
    font-size: 13px;
    font-weight: 500;
    color: #791F1F;
    white-space: nowrap;
}

.onhold-banner-notes {
    font-size: 12px;
    color: #791F1F;
    display: block;
    margin-top: 4px;
}

.onhold-banner-btn {
    margin-left: 16px;
}

.onhold-banner-warning {
    font-size: 12px;
    color: #791F1F;
    display: block;
    margin-top: 6px;
    font-style: italic;
}

/* ===== INACTIVE REFERENCED ENTITIES — info-only badge + banner (amber) ===== */
/* Colors are token-driven (theme.css) for React-portability — no hardcoded literals. */

/* Subtle amber "soft pill": fill #fff3cd / text #854f0b / border #ffeeba (token-driven). AA contrast ~7:1. */
.inactive-badge-inline {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--color-text-amber);
    background-color: var(--color-bg-warning-subtle);
    border: 1px solid var(--color-border-orange-warn);
    border-radius: 10px;
    white-space: nowrap;
    vertical-align: middle;
}

.inactive-banner {
    display: block;
    background-color: var(--color-bg-warning-subtle);
    border: 1px solid var(--color-border-orange-warn);
    border-left: 5px solid var(--color-warning);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    margin-top: 14px;
    margin-bottom: 12px;
}

.inactive-banner-icon {
    margin-right: 6px;
    color: var(--color-warning);
}

.inactive-banner-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-amber);
}

/* ZK adds .z-label to these labels; .crud-page .z-label (zkstyle.css) would otherwise win on
   specificity and override the color/weight. Match a higher specificity to keep our styling. */
span.inactive-badge-inline.z-label {
    color: var(--color-text-amber);
    font-weight: 700;
}

span.inactive-banner-title.z-label {
    color: var(--color-text-amber);
    font-weight: 700;
}

/* Each row of field-pairs (auto-stretch across full row) */
.card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* ✅ reduced (72px was wasting width) */
    margin-bottom: 2px;
}

/* Each label-value pair (fills row evenly, with a bigger min width) */
.field-pair {
    display: flex;
    align-items: center;

    flex: 1 1 320px; /* ✅ grows, wraps, min width ~320 */
    min-width: 320px;
    margin-bottom: 0;
}

/* Left-side label */
.field-label {
    display: inline-block;
    width: 110px;
    font-weight: bold;
    color: var(--color-text-blue-darker);
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.field-pair label + label {
    color: var(--color-text-blue-dark);
}

/* Value label next to it (ellipsis inside flex) */
.field-pair label + label {
    flex: 1;
    min-width: 0; /* ✅ required for ellipsis to work in flex */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action button row */
.action-row {
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .card-row {
        flex-direction: column;
    }

    .field-pair {
        width: 100%;
        min-width: 0; /* ✅ allow full shrink on mobile */
    }

    .field-label {
        width: 100px;
    }
}

.field-full-summary {
    width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.image-actions {
    display: flex;
    justify-content: left;
    gap: 12px;
    /* space between icons */
    margin-top: 8px;
    margin-left: 58px;
}


/* Make the upload <button> behave and look like a plain hyperlink */
.uploadbuttonlink.z-button {
    background: none !important;
    border: none !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 4px 0 0 0 !important;

    /* kill native button look (important part) */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    color: var(--color-info-blue) !important;
    /* same as normal link */
    text-decoration: underline !important;

    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    text-align: left !important;

    cursor: pointer;
}

/* 5 column layout override (only when applied) */
.card-row.five-col .field-pair {
    flex: 1 1 19%; /* roughly 5 columns */
    min-width: 220px; /* prevents collapsing too much */
}


/* Hover effect */
.uploadbuttonlink.z-button:hover {
    color: var(--color-info-dark) !important;
    text-decoration: underline;
}

/* Remove focus ring */
.uploadbuttonlink.z-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.note-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-neutral-3);
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.note-title {
    font-weight: 600;
    font-size: 14px;
    color: #2a4f9d;
    /* nice blue */
    margin-bottom: 4px;
}

.note-text {
    color: var(--color-text-tertiary);
    font-size: 13px;
    margin-bottom: 10px;
    line-height: 1.4;
}

.note-attachments {
    margin-top: 5px;
    margin-bottom: 8px;
    margin-left: -5px;
}

.clickable {
    cursor: pointer;
    text-decoration: underline;
}

.note-attach-title {
    font-weight: 500;
    color: var(--color-text-muted);
}

.note-attach-pill {
    background: #e8f0ff;
    color: #2a4f9d;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
}

.note-footer {
    margin-top: 5px;
}

.note-meta {
    color: var(--color-text-gray-2);
    font-size: 11px;
}

.system-auto-field {
    color: var(--color-text-gray-6);
    /* grey text */
    font-style: italic;
    /* optional */
}


.menuSearchWrap {
    padding: 8px;
    background: #C6EBDC;
}

.menuSearchList .z-listitem {
    cursor: pointer;
}

/* container */
.menuSearchItem {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    width: 100%;
}

/* main title */
.menuSearchTitle {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* separator */
.menuSearchSep {
    opacity: .6;
    font-size: 12px;
    padding: 0 2px;
}

/* parent / group */
.menuSearchGroup {
    font-size: 11px;
    opacity: .65;
    white-space: nowrap;
    overflow: visible;
    /* ✅ IMPORTANT */
    text-overflow: clip;
    /* no ellipsis */
    flex-shrink: 0;
    /* ✅ never collapse */
}


/* Ensure padding doesn't create weird width math */
.reportRoot, .reportRoot * {
    box-sizing: border-box;
}

/* ===== PAGE ===== */
/* Reference: page/content area is var(--color-text-named-white) */
.reportRoot {
    background: var(--color-bg-white);
    padding: 22px 26px 34px 26px;
    min-height: 100%;
}

/* Keep container full-width so no huge blank space */
.reportContainer {
    width: 100%;
}

/* ===== HEADER ===== */
.reportHeader {
    margin-bottom: 16px;
}

.reportPageTitle {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text-dark-2);
    line-height: 1.1;
}

/* ===== GROUP PANEL ===== */
/* Reference: group panels are LIGHT GREY */
.reportGroupPanel {
    background: var(--color-bg-gray-3);
    border-radius: 14px;
    padding: 18px 18px 20px 18px;
    margin-bottom: 18px;
    border: 1px solid var(--color-border-eef0f4);
}

.reportGroupTitle {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text-dark-1);
    display: block;
    margin: 0 0 14px 0;
}

/* ===== GRID ===== */
/*
  This fixes “lot spaces on right”:
  - auto-fit fills available width
  - cards stretch naturally
  - becomes 1/2/3 columns based on space
*/
.reportCardGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
}

/* Optional: cap at 2 columns if you prefer (uncomment)
@media (min-width: 1300px) {
    .reportCardGrid {
        grid-template-columns: repeat(2, minmax(420px, 1fr));
    }
}
*/

/* ===== CARD ===== */
/* Reference: cards are var(--color-text-named-white) inside the grey panel */
.reportCard {
    display: flex;
    gap: 16px;
    align-items: center;

    background: var(--color-bg-white);
    border: 1px solid var(--color-border-e8ebf1);
    border-radius: 14px;
    padding: 18px 18px;

    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    min-height: 92px;
    width: 100%;
}

.reportCard:hover {
    border-color: var(--color-border-gray-2);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

/* Icon box */
.reportCardIcon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
}

/* Icon itself */
.reportCardIcon span {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
}

/* ===== THEMES ===== */
.reportCardIcon.theme-blue {
    background: var(--color-bg-blue-1);
}

.reportCardIcon.theme-blue span {
    color: var(--color-link);
}

.reportCardIcon.theme-green {
    background: var(--color-bg-green-1);
}

.reportCardIcon.theme-green span {
    color: #15803d;
}

.era-claim-icon-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-bg-green-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
}

.era-claim-icon-badge .z-a {
    color: #15803d;
    text-decoration: none;
}

.reportCardIcon.theme-teal {
    background: var(--color-bg-teal-light);
}

.reportCardIcon.theme-teal span {
    color: var(--color-bg-icon-teal);
}

.reportCardIcon.theme-yellow {
    background: var(--color-bg-yellow-1);
}

.reportCardIcon.theme-yellow span {
    color: var(--color-bg-icon-yellow);
}

.reportCardIcon.theme-grey {
    background: var(--color-bg-icon-grey);
}

.reportCardIcon.theme-grey span {
    color: var(--color-text-icon-grey);
}


/* Text */
.reportCardBody {
    flex: 1;
    min-width: 0;
}

.reportCardTitle {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text-dark-1);
    display: block;
}

.reportCardDesc {
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-text-gray-1);
    line-height: 1.35;
}

/* Empty */
.reportEmpty {
    padding: 18px;
    color: var(--color-text-gray-1);
}


/* ================================
   GROUP CHILD SCREEN (Screenshot)
   Use these classes in ReportsGroupChilds.zul
================================ */

/* Breadcrumb line: Reports > Claim Summary */
.reportBreadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-gray-1);
    margin-bottom: 10px;
}

.reportBreadcrumb .crumbActive {
    font-weight: 700;
    color: #374151;
}

/* Title + subtitle block (bigger like screenshot) */
.reportHeader2 {
    margin-bottom: 18px;
}

.reportPageTitle2 {
    font-size: 28px;
    font-weight: 900;
    color: var(--color-text-dark-1);
    line-height: 1.1;
    display: block;
}

.reportPageSubTitle2 {
    font-size: 14px;
    color: var(--color-text-gray-1);
    margin-top: 6px;
    display: block;
}

/* "Group By" section heading */
.reportSectionTitle {
    margin: 14px 0 10px 0;
}

.reportSectionTitle label {
    font-size: 18px;
    font-weight: 900;
    color: var(--color-text-dark-1);
}


/* Tip bar at bottom (light grey strip) */
.reportTipBox {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--color-bg-gray-3);
    border: 1px solid var(--color-border-eef0f4);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-gray-1);
    font-size: 13px;
}

.reportTipBox .z-icon-lightbulb-o {
    font-size: 16px;
    color: var(--color-text-gray-1);
}

/* ==================================================
   CHILD SCREEN STYLING (Match reference screenshot)
================================================== */

.reportChild {
    /* Keep it similar to your overview padding (not too wide) */
    padding: 22px 26px 34px 26px;
}

/* Breadcrumb */
.reportChild .reportBreadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-gray-1);
    margin-bottom: 10px;
}

.reportChild .reportBreadcrumb .crumbActive {
    font-weight: 800;
    color: #374151;
}

/* Header + divider line */
.reportChild .reportHeader2 {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light-alt);
}

.reportChild .reportPageTitle2 {
    font-size: 28px;
    font-weight: 900;
    color: var(--color-text-dark-1);
    line-height: 1.1;
    display: block;
}

.reportChild .reportPageSubTitle2 {
    font-size: 14px;
    color: var(--color-text-gray-1);
    margin-top: 6px;
    display: block;
}

/* Group By */
.reportChild .reportSectionTitle {
    margin-top: 18px;
    margin-bottom: 12px;
}

.reportChild .reportSectionTitle label {
    font-size: 18px;
    font-weight: 900;
    color: var(--color-text-dark-1);
}

/* Grid: match overview look (don’t make cards huge) */
.reportChild .reportCardGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
}

/* Card: same as overview */
.reportChild .reportCard {
    display: flex;
    gap: 16px;
    align-items: center;

    background: var(--color-bg-white);
    border: 1px solid var(--color-border-e8ebf1);
    border-radius: 14px;
    padding: 18px 18px;

    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    min-height: 92px;
    width: 100%;
}

/* Important: keep title SMALL (your issue in screenshot 1) */
.reportChild .reportCardTitle {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text-dark-1);
    display: block;
}

.reportChild .reportCardDesc {
    margin-top: 4px;
    font-size: 13px;
    color: var(--color-text-gray-1);
    line-height: 1.35;
}

/* Tip bar */
.reportChild .reportTipBox {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--color-bg-gray-3);
    border: 1px solid var(--color-border-eef0f4);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-gray-1);
    font-size: 13px;
}

.reportChild .reportTipBox .z-icon-lightbulb-o {
    font-size: 16px;
    color: var(--color-text-gray-1);
}


/* FORCE child styles to override any base theme / zk defaults */
.reportRoot.reportChild {
    padding: 22px 26px 34px 26px !important;
}

.reportRoot.reportChild .reportPageTitle2 {
    font-size: 28px !important;
    font-weight: 900 !important;
}

.reportRoot.reportChild .reportCardGrid {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important;
    gap: 18px !important;
}

.reportRoot.reportChild .reportCardTitle {
    font-size: 18px !important;
    font-weight: 800 !important;
}

.reportRoot.reportChild .reportCardDesc {
    display: block !important;
    font-size: 13px !important;
    color: var(--color-text-gray-1) !important;
}


/* ======================================================
   REPORT RUN SCREEN
====================================================== */

.reportRunRoot {
    background: var(--color-bg-white);
    height: 100%;
}

/* ===== TOP BAR ===== */
.reportRunTopbar {
    height: 56px;
    background: #5f86b5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
}

.reportRunTitle {
    color: var(--color-bg-white);
    font-size: 20px;
    font-weight: 800;
}

.reportRunClose {
    color: var(--color-bg-white);
    font-size: 20px;
    cursor: pointer;
}

/* ===== BODY ===== */
.reportRunBody {
    height: calc(100% - 56px);
}

.reportRunLeft {
    padding: 18px 18px 12px 18px;
}

.reportRunRight {
    width: 360px;
    border-left: 1px solid var(--color-border-light-alt);
    background: var(--color-bg-gray-4);
}

/* ===== SECTION BLOCK ===== */
.reportBlock {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light-alt);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
}

.reportBlockHeader {
    margin-bottom: 10px;
}

.reportBlockTitle {
    font-weight: 900;
    font-size: 16px;
    color: var(--color-text-dark-2);
}

.reportLbl {
    color: var(--color-text-icon-grey);
    font-weight: 700;
}

/* ===== FOOTER ACTIONS ===== */
.reportRunFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
}

/* ===== BUTTONS ===== */
.reportBtnPrimary {
    background: var(--color-bg-button-primary);
    color: var(--color-bg-white);
    border-radius: 8px;
    padding: 10px 18px;
}

.reportBtnSecondary {
    background: var(--color-border-light-alt);
    color: var(--color-text-dark-1);
    border-radius: 8px;
    padding: 10px 18px;
}

.reportBtnPrimaryGhost {
    background: var(--color-bg-blue-highlight);
    color: var(--color-link);
    border-radius: 8px;
    padding: 10px 14px;
}

/* ===== LAST RUN PANEL ===== */
.reportLastRunPanel {
    padding: 14px;
}

.reportLastRunTitle {
    font-size: 16px;
    font-weight: 900;
    color: var(--color-text-dark-1);
    margin-bottom: 10px;
}

.reportLastRunTitle2 {
    font-size: 14px;
    font-weight: 900;
    color: var(--color-text-dark-1);
    margin: 12px 0 10px;
}

.reportLastRunBox {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light-alt);
    border-radius: 12px;
    padding: 12px;
}

.reportLastRunRow {
    margin-bottom: 8px;
}

.reportLastRunLbl {
    width: 90px;
    color: var(--color-text-gray-1);
    font-weight: 800;
}

/* ===== STATUS BADGES ===== */
.reportBadge {
    padding: 4px 10px;
    border-radius: 10px;
    font-weight: 900;
    display: inline-block;
}

.reportBadgeSuccess {
    background: var(--color-bg-success-badge);
    color: #065f46;
}

.reportBadgeFailed {
    background: var(--color-bg-danger-badge);
    color: #991b1b;
}

.reportBadgeRunning {
    background: var(--color-bg-info-badge);
    color: var(--color-link);
}

.reportBadgeQueued {
    background: var(--color-border-light-alt);
    color: #374151;
}

/* ===== FILE CARDS ===== */
.reportFileCard {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light-alt);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.reportFileIcon {
    font-size: 18px;
    color: var(--color-link);
}

.reportFileType {
    font-weight: 900;
}

.reportFileMeta {
    color: var(--color-text-gray-1);
    font-size: 12px;
}

.z-button.reportBtnDownload,
.z-button.reportBtnDownload:active,
.z-button.reportBtnDownload:focus {
    background: var(--color-bg-button-teal);
    color: var(--color-bg-white);
    border-radius: 8px;
    padding: 8px 14px;
    width: 100%;
    margin-top: 10px;
}

/* ===== MINI SEARCH BUTTON ===== */
.reportMiniIconBtn {
    background: var(--color-bg-blue-highlight-alt);
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}


/* =========================================
   LOOKUP ICON CLEAN ALIGNMENT
========================================= */

.reportLookupRow {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reportLookupBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    cursor: pointer;
    border-radius: 4px;

    background: transparent;
    color: var(--color-link);

    text-decoration: none !important;
}

/* Hover */
.reportLookupBtn:hover {
    background: var(--color-bg-blue-highlight-alt);
}

/* Icon size */
.reportLookupBtn i,
.reportLookupBtn span {
    font-size: 16px;
    line-height: 1;
}

/* Hide any unexpected left icon rendered by ZK inside the textbox */
.reportLookupRow .z-textbox + i,
.reportLookupRow .z-textbox + span,
.reportLookupRow .z-textbox i,
.reportLookupRow .z-textbox span {
    display: none !important;
}

/* ZK may render input as: <span class="z-textbox"> <input ...> </span> */
.reportLookupRow .z-textbox > i,
.reportLookupRow .z-textbox > span {
    display: none !important;
}

/* If ZK wraps differently */
.reportLookupRow .z-textbox-icon {
    display: none !important;
}

/* ===== Popup Container ===== */
.datePopup-pop {
    padding: 0 !important;
    border: 1px solid var(--color-border-subtle-1);
    border-radius: 10px;
    background: var(--color-bg-white);
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.18);
    overflow: hidden;
    min-width: 170px;
}

.datePopup-pop .z-popup-content {
    padding: 6px !important;
}

/* box layout */
.datePopup-box {
    padding: 2px;
}

/* ===== Menu Item ===== */
.datePopup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--color-text-dark-2);
    text-decoration: none !important;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.datePopup-item:link,
.datePopup-item:visited,
.datePopup-item:active {
    color: var(--color-text-dark-2);
    text-decoration: none !important;
}

.datePopup-item:hover {
    color: var(--color-text-dark-2);
    text-decoration: none !important;
    background: #f3f6fb;
}

/* icon */
.datePopup-icon {
    font-size: 13px; /* was 14px */
    opacity: 0.78; /* was 0.85 */
}

/* label */
.datePopup-item .z-label {
    font-size: 13px;
    line-height: 18px;
}

/* active */
.datePopup-item:active {
    background: var(--color-bg-blue-active);
}

/* separator */
.datePopup-sep {
    height: 1px;
    margin: 4px 8px;
    background: var(--color-border-subdued);
}

/* danger */
.datePopup-item-danger {
    color: var(--color-danger) !important;
}


.datePopup-item-danger:hover {
    background: var(--color-bg-danger-subtle);
}

/* ===== Trigger icon ===== */
.datePopup-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-gray-1);
    transition: background 0.15s ease;
}

.datePopup-trigger:hover {
    background: #f3f6fb;
    color: var(--color-text-dark-1);
}

.reportStatusSuccess {
    color: var(--color-success);
    font-weight: 600;
}

.reportStatusFailed {
    color: var(--color-danger);
    font-weight: 600;
}

.reportStatusRunning {
    color: var(--color-warning);
    font-weight: 600;
}

.reportStatusQueued {
    color: var(--color-info);
    font-weight: 600;
}

.reportStatusNoData {
    /* pick your theme */
    color: #856404;
    background: var(--color-bg-warning-subtle);
    border: 1px solid var(--color-border-orange-warn);
}

.filterBadge {
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 12px;
    border: 1px solid var(--color-border-light-alt);
}

.reportFilterDrawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    height: 100%;
    background: var(--color-bg-white);
    border-left: 1px solid var(--color-border-light-alt);
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.10);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.reportFilterDrawerHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border-light-alt);
}

.reportFilterDrawerBody {
    padding: 12px 14px;
    overflow: auto;
}

.filterBtnWrapper {
    padding: 12px 0; /* top and bottom padding */
}


.search-claim-shell {
    position: relative;
    min-height: 900px;
}

.search-claim-main {
    position: relative;
    z-index: 1;
}

.quick-edit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.10);
    z-index: 20;
}

.quick-edit-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 72%;
    height: 100%;
    z-index: 30;
    background: var(--color-bg-white);
    border-left: 2px solid var(--color-bg-dark-entity);
    box-shadow: -10px 0 26px rgba(0, 0, 0, 0.16);
    overflow: auto;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    transition: all 0.20s ease-in-out;
}

.quick-edit-shell {
    min-height: 100%;
    background: var(--color-bg-white);
}

.quick-edit-header {
    background: var(--color-bg-white);
    border-bottom: 0px solid #dde3ea;
    padding: 16px 16px 5px 16px;
    position: sticky;
    top: 0;
    z-index: 5;
}

.quick-edit-header .listpage-heading {
    padding-bottom: 14px;
}

.quick-edit-body {
    padding: 1px 16px 18px 16px;
    background: var(--color-bg-white);
}

.quick-edit-content-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-gray-4);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.quick-edit-tabpanel {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-gray-5);
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
}

.quick-section {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-gray-3) !important;
    border-radius: 8px;
    margin-bottom: 14px;
    padding: 8px 10px 12px 10px;
}

.quick-section > .z-groupbox-header,
.quick-section > .z-caption {
    background: var(--color-bg-gray-5);
    border-bottom: 1px solid var(--color-border-gray-5);
    border-radius: 6px 6px 0 0;
    padding: 8px 10px;
}

.quick-edit-tabs .z-tab {
    border-radius: 8px 8px 0 0;
    margin-right: 8px;
}

.quick-listbox {
    border: 1px solid var(--color-border-neutral-2);
    border-radius: 6px;
    overflow: hidden;
}

.quick-listbox .z-listhead th,
.quick-listbox .z-listheader {
    background: var(--color-bg-gray-5);
    border-bottom: 1px solid #dde3ea;
    font-weight: 600;
}

.quick-listbox .z-listcell {
    border-bottom: 1px solid #edf2f7;
}

.quick-edit-window .z-textbox,
.quick-edit-window .z-decimalbox,
.quick-edit-window .z-datebox-input,
.quick-edit-window .z-combobox-input {
    border-radius: 6px;
}

.quickedit-lineitem-moreinfo {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--color-border-gray-medium);
    border-radius: 8px;
    background: var(--color-bg-gray-7);
}

.quickedit-moreinfo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quick-edit-window-small {
    width: 760px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.quick-edit-content-card-small {
    width: 700px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.quick-one-field-form {
    width: 100%;
}

.quick-one-field-form .z-textbox,
.quick-one-field-form .z-combobox,
.quick-one-field-form .z-datebox,
.quick-one-field-form .z-decimalbox,
.quick-one-field-form .z-intbox {
    width: 100%;
}

/* Claim "more actions" popup menu (claim details + transmission history) —
   modernized to match the .action-menu look, sharing the same semantic
   .act-* color classes. Plain <div> in a popup, so it carries its own
   surface/row rules. The danger (Delete) variant stays red. */
.claim-more-menu {
    min-width: 210px;
    padding: 6px;
    background: var(--color-bg-white);
    border: 1px solid var(--border-strong, #d5dce7);
    border-radius: 12px;
    box-shadow: 0 14px 34px -12px rgba(15, 28, 51, .28), 0 2px 6px rgba(15, 28, 51, .06);
}

.claim-more-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 11px;
    border-radius: 9px;
    color: var(--color-text-dark-menu);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .13s ease, color .13s ease;
}
.claim-more-menu-item i {
    transition: color .13s ease;
}

.claim-more-menu-item:hover {
    background: var(--color-bg-menu-hover);
}

.claim-more-menu-item-danger {
    color: var(--color-danger);
}

.claim-more-menu-item-danger:hover {
    background: var(--color-bg-danger-menu);
}

.claim-more-menu-separator {
    height: 1px;
    margin: 6px 4px;
    background: var(--color-border-subtle-1);
}

/* semantic per-action color — reuses the shared .act-* palette */
.claim-more-menu-item.act-download i { color: var(--color-text-named-blue, #2563eb); }
.claim-more-menu-item.act-json i     { color: #7c3aed; }  /* violet */
.claim-more-menu-item.act-view i     { color: #4f46e5; }  /* indigo */
.claim-more-menu-item.act-log i      { color: #64748b; }  /* slate  */

.claim-more-menu-item.act-download:hover { background: rgba(37, 99, 235, .10);   color: var(--color-text-named-blue, #2563eb); }
.claim-more-menu-item.act-json:hover     { background: rgba(124, 58, 237, .10);  color: #7c3aed; }
.claim-more-menu-item.act-view:hover     { background: rgba(79, 70, 229, .10);   color: #4f46e5; }
.claim-more-menu-item.act-log:hover      { background: rgba(100, 116, 139, .12); color: #64748b; }

.claim-more-menu-item.act-download:hover .z-label,
.claim-more-menu-item.act-json:hover .z-label,
.claim-more-menu-item.act-view:hover .z-label,
.claim-more-menu-item.act-log:hover .z-label { color: inherit; }

.edi-action-wrap {
    align-items: center;
}

.actioniconbtn {
    color: var(--color-link);
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.actioniconbtn:hover {
    opacity: 0.85;
}


/*Side Bar Container */


/* Overlay */
.app-sidepanel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.10);
    z-index: 1000;
}

/* Main panel */
.app-sidepanel {
    background: var(--color-bg-white);
    border-left: 4px solid var(--color-border-blue-sidebar);
    box-shadow: -8px 0 18px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 1;
    z-index: 1010;
}

/* Position */
.app-sidepanel-right {
    right: 0;
}

.app-sidepanel-left {
    left: 0;
}

/* Slide animation states */
.app-sidepanel-right.app-sidepanel-open {
    transform: translateX(0);
    opacity: 1;
}

.app-sidepanel-right.app-sidepanel-closed {
    transform: translateX(100%);
    opacity: 0;
}

.app-sidepanel-left.app-sidepanel-open {
    transform: translateX(0);
    opacity: 1;
}

.app-sidepanel-left.app-sidepanel-closed {
    transform: translateX(-100%);
    opacity: 0;
}

/* Header */
.app-sidepanel-header {
    min-height: 52px;
    padding: 10px 14px;
    border-bottom: 1px solid #d8dde3;
    background: #f3f6f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-sidepanel-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-success);
}

.app-sidepanel-close {
    color: #6f6f6f;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}

.app-sidepanel-close:hover {
    background: #f1f1f1;
    color: var(--color-text-secondary);
}

.sidepanel-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-neutral-4);
    border-radius: 6px;
    padding: 8px;
}

/* Body */
.app-sidepanel-body {
    flex: 1;
    overflow: auto;
    padding: 16px; /* increase from 10px */
    background: var(--color-bg-gray-5);
    font-size: 13px;
}

/* Optional helper sections inside side content */
.app-sidepanel-section-title {
    color: var(--color-accent-magenta); /* purple tone matching buttons */
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

.app-sidepanel-footer {
    padding-top: 10px;
    border-top: 1px solid #ececec;
    margin-top: 10px;
}

/* 999 Ack summary sub-tabs: give each tab glyph its own colour so the tab row
   reads at a glance. Scoped to .summary-page so only this screen's tab strip is
   affected; HTML and EDI File share the file-lines glyph and are split by the
   solid/regular weight. Colours use theme tokens (no hardcoded hex). */
.summary-page .tabs-underline .z-icon-circle-info            { color: var(--color-info); }            /* Details */
.summary-page .tabs-underline .z-icon-table                  { color: var(--color-success); }         /* Transactions */
.summary-page .tabs-underline .z-icon-file-lines.z-icon-solid   { color: var(--color-warning); }      /* HTML */
.summary-page .tabs-underline .z-icon-file-lines.z-icon-regular { color: var(--color-bg-button-teal); }/* EDI File */
.summary-page .tabs-underline .z-icon-file-code              { color: var(--color-accent-purple); }   /* Parsed JSON */

.ediViewerWrap {
    overflow: auto;
    background: #f3f3f3;
    border: 1px solid var(--color-border-dark-gray);
    padding: 6px 8px;
}

.ediViewerText {
    display: block;
    font-family: "Courier New", monospace;
    font-size: 16px; /* increased */
    line-height: .50; /* reduced spacing */
    white-space: pre; /* keep EDI format */
    color: var(--color-text-darkest);
}


/* ============================= */
/* ERA VIEW - CLAIM LIST */
/* ============================= */

.eraview-claim-card {
    padding: 8px;
    border-bottom: 1px solid var(--color-border-eee);
    cursor: pointer;
}

.eraview-claim-card:hover {
    background-color: var(--color-bg-gray-2);
}

.era-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    text-transform: capitalize;
    text-decoration: none;
}

.era-badge-unmatched,
.era-badge-unmatched .z-a,
.era-badge-unmatched .z-a:visited,
.era-badge-unmatched .z-icon {
    background-color: #FEF2F2;
    color: #B91C1C;
    text-decoration: none;
}

.era-badge-matched,
.era-badge-matched .z-a,
.era-badge-matched .z-a:visited,
.era-badge-matched .z-icon {
    background-color: #F0FDF4;
    color: #15803D;
    text-decoration: none;
}

.era-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 8px;
    line-height: 1.6;
}

.era-status-pill .z-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: capitalize;
}

.era-status-pill-red {
    background-color: #FEF2F2;
}

.era-status-pill-red .z-label,
.era-status-pill-red .z-a,
.era-status-pill-red .z-icon {
    color: #B91C1C !important;
}

.era-status-pill-green {
    background-color: #F0FDF4;
}

.era-status-pill-green .z-label,
.era-status-pill-green .z-a,
.era-status-pill-green .z-icon {
    color: #15803D !important;
}

.era-claim-icon-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: #dcfce7 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
}

.era-claim-icon-badge .z-a,
.era-claim-icon-badge .z-icon {
    color: #15803D !important;
    font-size: 15px !important;
}

.era-columnlayout-clean {
    border: none !important;
    background: transparent !important;
}

.era-listbox-clean.z-listbox {
    border: none !important;
}

.eraview-claim-selected {
    padding: 10px;
    border-bottom: 1px solid var(--color-border-eee);
    cursor: pointer;
    background-color: var(--color-bg-selection);
    border-left: 4px solid var(--color-text-blue-highlight);
}


/* ============================= */
/* TEXT STYLES */
/* ============================= */

.eraview-claim-title {
    font-weight: 600;
    font-size: 13px;
}

.eraview-claim-sub {
    font-size: 12px;
    color: var(--color-text-muted);
}

.eraview-claim-amt {
    font-size: 12px;
    font-weight: 500;
}


/* ============================= */
/* STATUS */
/* ============================= */

.eraview-status-unmatched {
    color: var(--color-danger);
    font-weight: bold;
}

.eraview-status-matched {
    color: var(--color-success);
    font-weight: bold;
}


/* ============================= */
/* RIGHT PANEL */
/* ============================= */

.eraview-claim-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-darkest);
}


/* ============================= */
/* REASON CODES */
/* ============================= */

.eraview-reason-item {
    padding: 6px 8px;
    margin-bottom: 4px;
    background: var(--color-bg-gray-6);
    border-left: 4px solid var(--color-border-ddd);
    color: var(--color-text-muted);
}

.z-button.eraview-filter,
.z-button.eraview-filter:active,
.z-button.eraview-filter:focus {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-button-outline);
    color: var(--color-text-button-outline);
    border-radius: 6px;
    padding: 0 14px;
    height: 26px;
    font-size: 12px;
    line-height: 1;
    text-shadow: none;
}

.z-button.eraview-filter-active,
.z-button.eraview-filter-active:active,
.z-button.eraview-filter-active:focus {
    background-color: var(--color-bg-button-teal);
    border: 1px solid var(--color-bg-button-teal);
    color: var(--color-bg-white);
    border-radius: 6px;
    padding: 0 14px;
    height: 26px;
    font-size: 12px;
    line-height: 1;
    text-shadow: none;
}

.eraview-left-panel {
    border-top: 1px solid var(--color-border-ddd);
}

.exportCSVDataModal {
    border-radius: 8px;
}

.exportCSVDataBody {
    padding: 22px 28px;
}

.exportCSVDataLeft {
    min-height: 420px;
    padding-right: 10px;
}

.exportCSVDataConfigBox {
    padding: 18px 24px 22px 24px;
}

.exportCSVDataLinkRow {
    margin-top: 8px;
    margin-left: 20px;
}

.exportCSVDataButtonRow {
    margin-top: 14px;
}

.exportCSVDataButtonRow .z-button {
    width: 130px !important;
    min-width: 130px !important;
}

.exportCSVDataLastRun {
    border-left: 1px solid var(--color-border-ddd);
    padding-left: 28px;
}


/* "More actions" popup menu (search_ins_payment) — modernized to match the
   .action-menu look, with the same semantic .act-* color classes per item.
   This is a plain <popup> (not a ZK menupopup), so it carries its own
   surface/row rules but shares the palette. */
.z-popup.more-menu-pop {
    border: 1px solid var(--border-strong, #d5dce7);
    border-radius: 12px;
    box-shadow: 0 14px 34px -12px rgba(15, 28, 51, .28), 0 2px 6px rgba(15, 28, 51, .06);
    padding: 0;
    overflow: hidden;
}
.more-menu-popup {
    min-width: 210px;
    padding: 6px;
    background: var(--color-bg-white);
}

.more-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 11px;
    border-radius: 9px;
    color: var(--color-text-dark-menu);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .13s ease, color .13s ease;
}
.more-menu-item i {
    transition: color .13s ease;
}

.more-menu-item:hover {
    background: var(--color-bg-menu-hover);
}

.more-menu-item-danger {
    color: var(--color-danger);
}

.more-menu-item-danger:hover {
    background: var(--color-bg-danger-menu);
}

.more-menu-separator {
    height: 1px;
    margin: 6px 4px;
    background: var(--color-border-subtle-1);
}

/* semantic per-action color — reuses the .action-menu palette, plus
   .act-export (green) for CSV exports */
.more-menu-item.act-download i { color: var(--color-text-named-blue, #2563eb); }
.more-menu-item.act-export i   { color: #059669; }  /* green  */
.more-menu-item.act-view i     { color: #4f46e5; }  /* indigo */
.more-menu-item.act-log i      { color: #64748b; }  /* slate  */

.more-menu-item.act-download:hover { background: rgba(37, 99, 235, .10);   color: var(--color-text-named-blue, #2563eb); }
.more-menu-item.act-export:hover   { background: rgba(5, 150, 105, .10);   color: #059669; }
.more-menu-item.act-view:hover     { background: rgba(79, 70, 229, .10);   color: #4f46e5; }
.more-menu-item.act-log:hover      { background: rgba(100, 116, 139, .12); color: #64748b; }

/* label follows the row's hover color */
.more-menu-item.act-download:hover .z-label,
.more-menu-item.act-export:hover .z-label,
.more-menu-item.act-view:hover .z-label,
.more-menu-item.act-log:hover .z-label { color: inherit; }


.inline-add-icon {
    color: var(--color-text-named-blue);
    font-size: 12px;
    margin-left: 4px;
    position: relative;
    top: 2px;
    text-decoration: none;
}

.inline-lookup-icon {
    color: var(--color-text-named-blue);
    font-size: 12px;
    margin-left: 4px;
    position: relative;
    top: 4px;
    text-decoration: none;
}


/* ===== Generic info card ===== */
.info-card {
    background: var(--color-background-primary, #fff);
    border: 1px solid var(--color-bg-toggle-gray);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.info-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.info-card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-blue-darker);
}

.info-card-links {
    display: flex;
    gap: 16px;
}

.info-card-link {
    font-size: 13px;
    color: var(--color-text-blue-info);
    text-decoration: underline;
    cursor: pointer;
}

/* ===== Tile grid (small label/value pairs inside a card) =====
   CSS grid rather than flex: auto-fit gives every tile an identical column
   track, so values align vertically down the whole card. The previous flex
   layout sized each tile to its own content, which left columns ragged and
   drifting as the viewport changed.

   Flat by design - no border, fill or radius. The label/value contrast plus
   the grid gap carries the separation, so the tiles stop competing with the
   boxed .metric-tile row above them. Do not reintroduce a box here; add a
   scoped variant class if one screen genuinely needs a framed tile. */
.info-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px 24px;
}

/* min-width: 0 is required on a grid child - the default of auto refuses to
   shrink below its content, so a long unbroken value would push the column
   past its track and overflow the card. */
.info-tile {
    min-width: 0;
}

/* Compound .z-label so ZK base label rules cannot flatten label/value sizes
   into the same body font (Batch Information must read as micro-label over value). */
.info-tile-label,
.info-tile-label.z-label {
    display: block;
    width: 100%;
    font-size: 10.5px !important;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--color-text-gray-1);
    margin: 0 0 3px;
}

.info-tile-value,
.info-tile-value.z-label {
    display: block;
    width: 100%;
    font-size: 14px !important;
    line-height: 1.35;
    font-weight: 600;
    color: var(--color-text-dark-1);
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

.info-tile-value-warning,
.info-tile-value-warning.z-label {
    color: var(--color-text-amber);
}

.info-tile-value-danger,
.info-tile-value-danger.z-label {
    color: var(--color-text-red-muted);
}

/* Wide variant of .info-tile — spans two normal columns. Used for long
   single-line values (addresses, code descriptions).

   .info-tile-grid is now CSS grid, so grid-column is the live declaration
   and the flex one is inert. The flex line is kept only so the class still
   behaves if some future container lays these out with flex. */
.info-tile-grid > .info-tile-wide {
    flex: 2 1 480px;
    grid-column: span 2;
}

/* Below the two-column breakpoint the grid may resolve to a single track,
   where span 2 would create an implicit second column and overflow the card.
   Reset to a single span, matching how .card-grid-4 / .card-grid-5 handle
   their own spanning cells. */
@media (max-width: 768px) {
    .info-tile-grid > .info-tile-wide {
        grid-column: span 1;
    }
}

/* ===== Metric tile row (larger standalone stat tiles) ===== */
.metric-tile-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.metric-tile {
    background: var(--color-bg-off-white);
    border: 1px solid var(--color-bg-toggle-gray);
    border-radius: 8px;
    padding: 12px 16px;
    flex: 1;
    min-width: 140px;
}

.metric-tile-label,
.metric-tile-label.z-label {
    display: block;
    width: 100%;
    font-size: 13px !important;
    line-height: 1.3;
    font-weight: 500;
    color: var(--color-text-brown-neutral);
    margin: 0 0 4px;
    text-transform: none;
    letter-spacing: normal;
}

.metric-tile-value,
.metric-tile-value.z-label {
    display: block;
    width: 100%;
    font-size: 24px !important;
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-text-dark-1);
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

/* Secondary financial metrics (Adjustments / Write-offs / Pat Resp / Denied) */
.metric-tile-value.muted,
.metric-tile-value.muted.z-label {
    font-size: 20px !important;
    font-weight: 600;
    color: #64748b;
}

/* ===== Plain table (borderless, for use inside .info-card) ===== */
.info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.info-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--color-text-brown-neutral);
    font-weight: 500;
    border-bottom: 1px solid var(--color-bg-toggle-gray);
}

.info-table td {
    padding: 8px;
    border-bottom: 1px solid var(--color-bg-tile);
}

.info-table-link {
    color: var(--color-text-blue-info);
    text-decoration: underline;
    font-weight: 600;
}

.info-status-pill {
    background: #faeeda;
    color: var(--color-text-amber);
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 8px;
}

.info-form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.info-form-field {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-form-label {
    font-size: 13px;
    color: var(--color-text-secondary, #5f5e5a);
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-card-subtitle {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-info, #185fa5);
    text-align: center;
}

.info-tabs {
    display: inline-flex;
    background: var(--color-bg-tile);
    border-radius: var(--border-radius-md, 8px);
    padding: 4px;
    gap: 4px;
    border: none !important;
}

.info-tabs .info-tab {
    background: transparent;
    border: none !important;
    border-radius: var(--border-radius-md, 8px);
    padding: 6px 16px;
    font-size: 14px;
    color: var(--color-text-secondary, #5f5e5a);
    cursor: pointer;
}

.info-tabs .info-tab.z-tab-selected {
    background: var(--color-background-primary, #fff);
    border: 0.5px solid var(--color-border-tertiary, #e0e0e0) !important;
    color: var(--color-text-primary, #2c2c2a);
    font-weight: 500;
}

.queued-badge {
    color: var(--color-bg-white);
    background-color: var(--color-success);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
}

/* ===== Group By feature ===== */

.group-by-banner {
    background-color: #eaf2fb;
    border: 1px solid var(--color-border-blue-light);
    border-radius: 4px;
    padding: 8px 14px;
    margin: 10px 0;
}

.group-by-banner-text {
    font-size: 12px;
    color: var(--color-text-blue-dark);
}

.group-by-banner-field {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-text-blue-darker);
}

.btn-clear-group {
    background-color: var(--color-bg-danger-dark);
    color: var(--color-bg-white);
    border: none;
    border-radius: 3px;
    font-size: 11px;
    padding: 5px 12px;
    cursor: pointer;
}

.btn-clear-group:hover {
    background-color: var(--color-bg-danger-darker);
}

.group-by-panel {
    width: 210px;
    min-width: 210px;
    flex-shrink: 0;
    border: 1px solid var(--color-border-cool);
    border-radius: 4px;
    margin-right: 12px;
    background-color: var(--color-bg-white);
    overflow: hidden;
}

.group-by-panel-header {
    font-size: 11px;
    font-weight: bold;
    color: var(--color-text-brown-dark);
    background-color: var(--color-bg-panel-header);
    border-bottom: 1px solid var(--color-border-cool);
    padding: 8px 12px;
    text-transform: uppercase;
}

.group-by-panel-body {
    max-height: 420px;
    overflow-y: auto;
}

.group-by-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    font-size: 12.5px;
    border-top: 1px solid #ececec;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-by-row:first-child {
    border-top: none;
}

.group-by-row:hover {
    background-color: var(--color-bg-row-hover);
}

.group-by-row-active {
    background-color: #eaf2fb;
    border-left: 3px solid #2c7be5;
    font-weight: bold;
}

.group-by-row-name {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-by-row-count {
    font-size: 11px;
    color: var(--color-text-gray-3);
    margin-left: 6px;
    flex-shrink: 0;
}

.group-by-panel-footer {
    font-size: 10.5px;
    color: var(--color-text-gray-6);
    background-color: var(--color-bg-panel-header);
    border-top: 1px solid var(--color-border-cool);
    padding: 6px 12px;
}

/* =======================================================================
   TASK DETAIL SCREEN — add these to mystyle.css
   ======================================================================= */

/* ---- Header bar ---- */
.screenheaderdiv {
    background-color: var(--color-bg-dark-entity);
    padding: 6px 12px;
    border-bottom: 2px solid var(--color-forest-green);
}

.warninglabel.z-label {
    color: var(--color-warning-orange);
    font-weight: bold;
    font-size: 13px;
}

.greylabel.z-label {
    color: var(--color-text-gray-2);
    font-size: 12px;
}

/* ---- Status badges ---- */
.badge-status-open.z-label {
    background-color: var(--color-bg-status-open);
    color: var(--color-bg-white);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
}

.badge-status-in_progress.z-label {
    background-color: var(--color-bg-status-progress);
    color: var(--color-bg-white);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
}

.badge-status-completed.z-label {
    background-color: var(--color-success);
    color: var(--color-bg-white);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
}

.badge-status-cancelled.z-label {
    background-color: var(--color-bg-status-cancelled);
    color: var(--color-bg-white);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
}

.badge-status-on_hold.z-label {
    background-color: var(--color-bg-purple);
    color: var(--color-bg-white);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ---- Priority badges ---- */
.badge-priority-low.z-label {
    background-color: var(--color-bg-priority-low);
    color: var(--color-success-dark);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
}

.badge-priority-medium.z-label {
    background-color: var(--color-bg-priority-medium);
    color: var(--color-text-orange-dark);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
}

.badge-priority-high.z-label {
    background-color: var(--color-bg-priority-high);
    color: var(--color-text-red-dark);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
}

.badge-priority-urgent.z-label {
    background-color: var(--color-bg-priority-urgent);
    color: var(--color-bg-white);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ---- Entity type badge (linked record) ---- */
.task-badge-entity.z-label {
    background-color: var(--color-bg-dark-entity);
    color: var(--color-bg-white);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ---- Overdue due date datebox ---- */
.overdue-field .z-datebox-input {
    border-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
    font-weight: bold;
}

/* ---- Note type badges (inside feed) ---- */
.task-note-badge-note.z-label {
    background-color: var(--color-bg-green-2);
    color: var(--color-success);
    font-size: 11px;
    font-weight: bold;
    padding: 1px 7px;
    border-radius: 8px;
}

.task-note-badge-query.z-label {
    background-color: var(--color-bg-yellow-2);
    color: #f57f17;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 7px;
    border-radius: 8px;
}

.task-note-badge-reply.z-label {
    background-color: var(--color-bg-blue-2);
    color: var(--color-info);
    font-size: 11px;
    font-weight: bold;
    padding: 1px 7px;
    border-radius: 8px;
}

/* ---- Notes feed listbox — remove listbox chrome ---- */
.task-notes-feed.z-listbox {
    border: none;
    background: transparent;
}

.task-notes-feed .z-listbox-body {
    border: none;
}

.task-note-listitem.z-listitem {
    border: none;
    background: transparent;
    padding: 0;
}

.task-note-listitem.z-listitem:hover {
    background: transparent;
}

.task-note-listitem .z-listcell {
    border: none;
    padding: 4px 0;
}

/* ---- Note type toggle buttons ---- */
.task-note-toggle {
    padding: 3px 10px;
    background-color: var(--color-bg-toggle-gray);
    color: var(--color-text-secondary);
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}

.task-note-toggle .z-label {
    color: var(--color-text-secondary);
}

.task-note-toggle-active {
    padding: 3px 10px;
    background-color: var(--color-bg-button-teal);
    color: var(--color-bg-white);
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}
.task-note-toggle-active .z-label {
    color: var(--color-bg-white);
}

/* ---- Quick Action buttons ---- */
.actionbtngrid-success {
    padding: 4px 0px 3px 3px;
    margin-bottom: 0;
    font-stretch: normal;
    font-weight: 400;
    font-style: normal;
    line-height: 18px;
    letter-spacing: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: var(--color-bg-white);
    background-color: var(--color-success);
    border-radius: 2px;
    text-decoration: none;
    display: block;
}

.actionbtngrid-danger {
    padding: 4px 0px 3px 3px;
    margin-bottom: 0;
    font-stretch: normal;
    font-weight: 400;
    font-style: normal;
    line-height: 18px;
    letter-spacing: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: var(--color-bg-white);
    background-color: var(--color-danger);
    border-radius: 2px;
    text-decoration: none;
    display: block;
}

.actionbtngrid {
    display: block;
}

/* ----------------------------------------------------------------------------------------------- */
/*     Import Job Schedule screen — card treatment for left-column groupboxes
/* ----------------------------------------------------------------------------------------------- */
.import-job-card.z-groupbox-3d {
    border: 1px solid var(--color-border-eef0f4);
    border-radius: 10px;
    background: var(--color-bg-white);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.import-job-breadcrumb.z-label {
    font-size: 12.5px;
    color: var(--color-text-gray-1);
    font-weight: 400;
    margin-top: 2px;
}

.import-job-instr-card.z-groupbox-3d {
    border: 1px solid var(--color-border-eef0f4);
    border-radius: 10px;
    background: var(--color-bg-white);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.import-job-instr-card.z-groupbox-3d .z-listheader,
.import-job-instr-card.z-groupbox-3d .z-listheader-content {
    background-color: var(--color-bg-button-navy) !important;
    color: var(--color-bg-white) !important;
    font-weight: 700;
}

.import-job-dropzone.z-button {
    display: block;
    width: 100%;
    min-height: 90px;
    background: var(--color-bg-gray-4) !important;
    border: 1.5px dashed var(--color-border-gray-1) !important;
    border-radius: 9px;
    color: var(--color-text-blue-dark) !important;
    font-weight: 500;
    font-size: 13px;
    text-shadow: none;
    white-space: normal;
    padding: 18px 12px !important;
}

.import-job-dropzone.z-button:hover {
    border-color: var(--color-bg-button-teal) !important;
    background: var(--color-bg-teal-light) !important;
}

.import-job-file-hint.z-label {
    font-size: 12px;
    color: var(--color-text-gray-1);
    margin-top: 4px;
    display: block;
}

.import-job-dot.z-label {
    color: var(--color-bg-button-teal);
    font-size: 8px;
    vertical-align: middle;
    margin-right: 2px;
}

.import-job-card-title .z-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-blue-darker);
}

.import-job-hint-text.z-label {
    font-size: 12px;
    color: var(--color-text-gray-1);
    font-weight: 400;
    margin-top: 4px;
    display: block;
}

.import-job-instr-card.z-groupbox-3d .z-listbox .z-listheader-content,
.import-job-instr-card.z-groupbox-3d .z-listbox .z-listcell-content {
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.import-job-description,
.import-job-description * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
}

/* ----------------------------------------------------------------------------------------------- */
/* 	Application styles (moved from zkstyle.css)
/* ----------------------------------------------------------------------------------------------- */
.header {
    text-align: center;
    color: var(--color-bg-white);
    font-size: 30px;
}

.panel > .panel-heading {
    border-color: var(--color-border-light) !important;
    font-size: 15px;
    padding: 7px 8px;
}

.gridbutton {
    margin-top: 16px;
}

.searchbtn {
    margin-top: 28px;
}

input[type="radio"] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    margin: 0 5px 2px;
}

.grppadding {
    padding-right: 1px !important;
}

.mandatory-label:after {
    content: "*";
    color: var(--color-text-named-red);
}

.mandatory-label {
    color: var(--color-text-dark-1);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.03em;
    margin-bottom: 0;
    margin-top: 0;
}

.highlightexclude {
    color: var(--color-text-tertiary);
    font-weight: normal;
    cursor: pointer;
}

.highlightexclude-on {
    color: var(--color-named-crimson);
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.field-link {
    color: var(--color-text-link);
    text-decoration: underline;
    cursor: pointer;
}

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

.patientfishmenu {
    margin: 5px 40px;
    position: relative;
}

.divline {
    border-bottom: 1px solid var(--color-border-dark);
    padding-top: 10px;
}

.editicon {
    color: var(--color-text-named-green);
}

.readicon {
    color: var(--color-text-named-black);
}

.delicon {
    color: var(--color-text-named-red);
}

.auditicon {
    color: var(--color-text-gray-5);
}

.actiicon {
    color: var(--color-text-named-blue);
}

.deacticon {
    color: var(--color-text-named-blue);
}

.listpage {
    box-shadow: 0px 1px 0px -1px var(--color-named-palevioletred);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border-divider-light);
    border-radius: 3px;
}

.listpage > .listpage-heading {
    border-color: var(--color-border-light) !important;
    font-size: 15px;
    padding: 7px 1px;
}

.listpagebutton {
    border-radius: 2px;
    padding: 6px 14px;
    padding: 3px 10px !important;
    background-color: var(--color-bg-white);
    border-color: var(--color-border-gray-1);
    text-decoration: none;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
}

.modalsection {
    float: left;
    padding-left: 20px;
}

.crudpage {
    color: var(--color-forest-green);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin-bottom: 0;
}

.crudpage > .crud-heading {
    border-color: var(--color-border-light) !important;
    font-size: 15px;
    padding: 7px 17px;
}

.tabbedpage {
    color: var(--color-bg-white);
    border-color: var(--color-primary);
    background-color: var(--color-bg-header-dark);
    border-radius: 0px;
    border: none;
    box-shadow: 0px 0px 0px 0px var(--color-bg-header-dark);
    margin-bottom: 7px;
}

.tabbedpage > .tabbedpage-heading {
    border-color: var(--color-border-light) !important;
    font-size: 15px;
    padding: 4px 5px;
}

.mypage {
    color: var(--color-bg-white);
    border-color: var(--color-primary);
    background-color: var(--color-bg-page-dark);
    border-radius: 0px;
    border: none;
    box-shadow: 0px 0px 0px 0px var(--color-bg-header-dark);
    margin-bottom: 20px;
}

.mypage > .mypage-heading {
    border-color: var(--color-border-light) !important;
    font-size: 15px;
    padding: 7px 8px;
}

.dropOverlay {
    position: absolute;
    z-index: 1;
    width: inherit;
    height: inherit;
    padding: 0;
    border-radius: 0;
    opacity: 0.7;
}

.dropOverlay > div {
    background-color: var(--color-bg-white);
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    color: var(--color-text-gray-3);
    padding-top: 20px;
    border: 2px dotted var(--color-text-gray-3);
    text-align: center;
}

.editdot:after {
    content: '\2807';
    font-size: 25px;
    float: right;
    color: var(--color-text-named-black);
    padding-top: 10px;
}

.crudfield {
    color: var(--color-text-named-black);
    font-weight: bold;
    font-size: 14px;
}

.crudvalues {
    color: var(--color-accent-purple);
    font-size: 13px;
}

.sectionpadding4320 {
    padding-left: 43px;
    padding-right: 20px;
}

.sectionpadding2020 {
    padding-left: 20px;
    padding-right: 20px;
}

.sectionSeperator22 {
    margin-bottom: 18px;
    padding-bottom: 0.25em;
    margin-left: 1px;
    border-bottom: 1px solid;
}

.image--cover {
    width: 191px;
    height: 191px;
    border-radius: 50%;
    margin: 20px;
    object-fit: cover;
    object-position: center right;
}

.image--cover2 {
    width: 154px;
    height: 157px;
    border-radius: 50%;
    margin: 10px;
    margin-left: 36px;
    object-fit: cover;
    object-position: center right;
}

.divcenteralign {
    text-align: center;
}

.divleftalign {
    text-align: left;
}

.divrightalign {
    text-align: right;
}

.encounter-fullrow {
    width: 100%;
    border: 1px solid var(--color-bg-toggle-gray);
    background: var(--color-bg-off-white);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.encounter-id {
    font-weight: bold;
    color: var(--color-text-primary-dark);
}

.summarypage {
    box-shadow: 0px 1px 0px -1px var(--color-named-palevioletred);
    margin-bottom: 2px;
    border-bottom: transparent;
    border-radius: 3px;
}

.summarypage > .summarypage-heading {
    border-color: var(--color-border-light) !important;
    font-size: 15px;
    padding: 7px 1px;
}

/* ---- Event Log Side Panel (custom classes) ---- */
.event-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.event-log-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-dark-1);
}

.event-log-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.event-log-divider {
    height: 1px;
    background: var(--color-border-divider-light);
    margin: 14px 0 0;
}

.event-log-subtitle {
    padding: 10px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-log-row {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 14px 0;
}

.event-log-item:not(:last-child) .event-log-row::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 32px;
    bottom: -14px;
    width: 1px;
    background: var(--color-border-divider-light);
}

.event-log-node {
    flex-shrink: 0;
    padding-top: 6px;
}

.event-log-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7fa87f;
}

.event-log-body {
    flex: 1;
    min-width: 0;
}

.event-log-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.global-event-log-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1500;
}

.global-event-log-panel {
    position: absolute;
    top: 10px;
    right: 0;
    width: 400px;
    background: var(--color-bg-white);
    border: 1px solid #9aa5b1;
    padding: 10px 22px 20px 22px;
    overflow: hidden;
    z-index: 1501;
    animation: eventLogSlideIn 0.18s ease-out;
}
.event-log-flex-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ---- Confirm Action Modal (Activate/Deactivate) — start ---- */
.confirm-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 16px;
}

.confirm-modal-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg-selection);
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal-icon-glyph {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-blue-darker);
}

.confirm-modal-titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.confirm-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-dark-1);
}

.confirm-modal-subtitle {
    font-size: 13px;
    color: var(--color-text-blue-dark);
}

.confirm-modal-divider {
    height: 1px;
    background: var(--color-border-divider-light);
}

.confirm-modal-body {
    padding: 20px 22px 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.confirm-modal-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-dark-1);
}

.confirm-modal-char-count {
    align-self: flex-end;
    font-size: 12px;
    color: #8892a0;
}

.confirm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 22px 22px;
}

/* ---- Confirm Action Modal (Activate/Deactivate) — end ---- */

/* ---- Modal CRUD section caption (Referrals-style small popups) — start ---- */
.crud-modal-section {
    padding: 4px 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---- Modal CRUD section caption (Referrals-style small popups) — end ---- */

/* ---- Modal CRUD dirty-indicator row — start ---- */
/* ---- Modal CRUD dirty-indicator row — start ---- */
.crud-modal-dirty-row {
    position: absolute;
    top: 20px;
    right: 52px;
    z-index: 10;
}

.crud-modal-dirty-row .readonly {
    margin-left: 8px;
}

/* ---- Modal CRUD dirty-indicator row — end ---- */
/* ---- Modal CRUD dirty-indicator row — end ---- */

/* ---- Edit Tag dialog — centered content block — start ---- */
.edit-tags-content-wrap {
    max-width: 380px;
    margin: 0 auto;
}

/* ---- Edit Tag dialog — centered content block — end ---- */


/* ---------------------------------------------------------------------- */
/* 	CRUD screen tabs (full-page CRUD screens with tabbed content, e.g. Practice Setup)
/* ---------------------------------------------------------------------- */
.crud-page-tabs .z-tabs-content {
    border-top: none !important;
    border-bottom: 1px solid var(--color-border-gray-4);
    padding-top: 0 !important;
}

.crud-page-tabs .z-tab {
    margin-right: 24px;
    border: none;
    background: none;
    box-shadow: none;
}

.crud-page-tabs .z-tab-text {
    background: transparent;
    color: var(--color-text-gray-1);
    text-decoration: none !important;
    border-radius: 0;
    padding: 9px 2px 2px 2px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
    border-bottom: 2px solid transparent;
}

.crud-page-tabs .z-tab-selected .z-tab-text {
    background: transparent;
    color: var(--color-text-blue-darker);
    text-decoration: none !important;
    font-weight: 600;
    box-shadow: none;
    border-bottom: 2px solid var(--color-bg-button-teal);
}

/* ---------------------------------------------------------------------- */
/*     Summary Pages (Patient Summary, Patient Insurance Summary, Task Summary, etc.)
/* ---------------------------------------------------------------------- */
.patient-summary-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-bg-button-teal);
    color: var(--color-bg-white);
    font-weight: 700;
    font-size: 15px;
}

.quick-action-block {
    display: block;
    width: 100%;
}

.quick-rail {
    position: fixed;
    top: 160px;
    right: 24px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-bg-toggle-gray);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 500;
}

.rail-icon {
    font-size: 22px;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.rail-icon:hover {
    background: var(--color-bg-off-white);
    transform: scale(1.15);
}

/* Rail icon color variants — Variant A: persistent per-icon color, not hover-only */
.rail-icon-blue   { color: var(--color-text-blue-highlight); }
.rail-icon-teal   { color: var(--color-bg-button-teal); }
.rail-icon-green  { color: var(--color-success); }
.rail-icon-amber  { color: var(--color-text-amber); }
.rail-icon-purple { color: var(--color-accent-purple); }
.rail-icon-pink   { color: var(--color-accent-pink); }

.rail-icon-placeholder {
    color: var(--color-text-gray-2);
    cursor: default;
}

.rail-icon-placeholder:hover {
    color: var(--color-text-gray-2);
    background: transparent;
    transform: none;
}

.rail-divider {
    width: 28px;
    height: 2px;
    background: var(--color-border-gray-1);
    margin: 2px 0;
    border-radius: 1px;
}

.rail-handle {
    width: 28px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--color-text-gray-3);
    font-size: 14px;
    margin-bottom: 2px;
}

.rail-handle:hover {
    color: var(--color-text-blue-darker);
}

.rail-dragging {
    opacity: 0.85;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.rail-toggle {
    color: var(--color-text-gray-3);
    font-size: 15px;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.rail-toggle:hover {
    color: var(--color-bg-button-teal);
}

.quick-rail.rail-horizontal {
    flex-direction: row;
    top: 95px;
}

.quick-rail.rail-horizontal .rail-divider {
    width: 2px;
    height: 28px;
    margin: 0 2px;
}

.quick-rail.rail-horizontal .rail-handle {
    width: 14px;
    height: 28px;
    margin-bottom: 0;
    margin-right: 2px;
    transform: rotate(90deg);
}

.quick-rail:not(.rail-horizontal) {
    width: 60px;
    box-sizing: border-box;
}

.rail-edit-btn {
    background: var(--color-bg-button-navy);
    color: var(--color-bg-white);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.2;
    transition: filter 0.15s ease;
    box-sizing: border-box;
}

.rail-edit-btn:hover {
    filter: brightness(1.12);
    color: var(--color-bg-white);
}

.rail-edit-btn .z-icon {
    font-size: 16px;
    line-height: 1;
}

.rail-edit-btn .rail-edit-label {
    color: var(--color-bg-white);
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    display: none;
}

/* Vertical (default): icon-only circle, same footprint as .rail-icon */
.quick-rail:not(.rail-horizontal) .rail-edit-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    gap: 0;
}

/* Horizontal: full pill with visible label */
.quick-rail.rail-horizontal .rail-edit-btn {
    width: auto;
    height: auto;
    border-radius: 999px;
    padding: 6px 14px;
    gap: 6px;
}

.quick-rail.rail-horizontal .rail-edit-btn .rail-edit-label {
    display: inline;
}

/* ===== Facility/Summary redesign — record header + avatar ===== */
.summary-page .crud-heading { align-items: center; }

.summary-avatar {
    width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto;
    margin-right: 14px;
    background: linear-gradient(135deg, var(--color-bg-button-teal), #0c8f91);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(10,168,170,.25);
}
.summary-avatar .z-label {
    color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .5px;
}

/* Two info-cards side by side (Address + Billing Credentials) */
.summary-two-col { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.summary-two-col > .info-card { flex: 1; min-width: 320px; }

/* Tile polish removed: the base .info-tile-label now carries the uppercase
   micro-label treatment on every screen, and the hover box-shadow no longer
   applies now that tiles are borderless. */

/* ============================================================
   MASTER SUMMARY PAGE KIT — shared by every *_summary.zul
   Scope: sclass="summary-page cleanwindow" on the <window>.
   Entity-agnostic; add once, reuse on every master summary.
   (crud-heading / avatar / two-col / tile-label rules above are
   part of this kit, added during the facility-summary pass.)
   ============================================================ */

/* Three-up variant for wider records */
.summary-three-col { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.summary-three-col > .info-card { flex: 1; min-width: 260px; }

/* Always-visible, styled scrollbar for the summary content region */
.summary-scroll { overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #c2ccda #eef1f6; }
.summary-scroll::-webkit-scrollbar { width: 12px; }
.summary-scroll::-webkit-scrollbar-track { background: #eef1f6; border-radius: 8px; }
.summary-scroll::-webkit-scrollbar-thumb { background: #c2ccda; border-radius: 8px; border: 3px solid #eef1f6; }
.summary-scroll::-webkit-scrollbar-thumb:hover { background: #a7b3c4; }

/* Insurance Payment Summary — selected claim row in batch claims list */
.summary-page .listboxplain .z-listitem.ins-pay-claim-selected {
    background: #eef9f9;
}
.summary-page .listboxplain .z-listitem.ins-pay-claim-selected > .z-listcell:first-child {
    box-shadow: inset 3px 0 0 var(--color-bg-button-teal);
}
.summary-page .ins-pay-selected-claim {
    border-color: #9adede;
    background: #f7fcfc;
}

/* Claims in Batch — client-side filter strip */
.summary-page .ins-pay-claims-filter {
    background: var(--color-bg-off-white);
    border: 1px solid var(--color-bg-toggle-gray);
    border-radius: 8px;
    padding: 12px;
    margin: 0 0 12px;
}

.summary-page .ins-pay-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.summary-page .ins-pay-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
    min-width: 140px;
}

.summary-page .ins-pay-filter-field.narrow {
    flex: 0 1 150px;
    min-width: 130px;
}

.summary-page .ins-pay-filter-field.wide {
    flex: 1 1 100%;
    min-width: 220px;
}

.summary-page .ins-pay-filter-label,
.summary-page .ins-pay-filter-label.z-label {
    font-size: 11px !important;
    font-weight: 600;
    color: var(--color-text-brown-neutral);
    line-height: 1.2;
}

.summary-page .ins-pay-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 1px;
}

.summary-page .ins-pay-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.summary-page .ins-pay-filter-chip-label,
.summary-page .ins-pay-filter-chip-label.z-label {
    font-size: 11px !important;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-right: 2px;
}

.summary-page .ins-pay-filter-chip,
.summary-page a.ins-pay-filter-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px !important;
    font-weight: 600;
    border: 1px solid var(--color-border-button-outline);
    background: var(--color-bg-white);
    color: var(--color-text-dark-1) !important;
    text-decoration: none !important;
    cursor: pointer;
}

.summary-page .ins-pay-filter-chip.on,
.summary-page a.ins-pay-filter-chip.on {
    background: #e8f7f7;
    border-color: #9adede;
    color: #0f766e !important;
}

.summary-page .ins-pay-filter-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.summary-page .ins-pay-filter-more {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border-divider-light);
}

/* Compact EOB strip under Line Item Postings — denser than page-level
   Financial Summary metric tiles (which stay full-size). */
.summary-page .ins-pay-selected-claim .metric-tile-row {
    gap: 8px;
    margin-bottom: 10px;
}

.summary-page .ins-pay-selected-claim .metric-tile {
    padding: 6px 10px;
    min-width: 90px;
    border-radius: 6px;
    flex: 1 1 90px;
}

.summary-page .ins-pay-selected-claim .metric-tile-label,
.summary-page .ins-pay-selected-claim .metric-tile-label.z-label {
    font-size: 11px !important;
    margin: 0 0 2px;
}

.summary-page .ins-pay-selected-claim .metric-tile-value,
.summary-page .ins-pay-selected-claim .metric-tile-value.z-label {
    font-size: 15px !important;
    line-height: 1.25;
}



/* ============================================================
   TOP SUMMARY STRIP — reusable compact record header
   A dense two-row summary strip for record headers (encounter Notes,
   claim, etc.). Keeps information density (no oversized padding) so the
   working area (Notes) stays the focus. Entity-agnostic; tokens
   only, per the React-portable design contract.
   ============================================================ */
.top-summary-strip {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-divider-light);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 37, 64, .05), 0 4px 14px rgba(16, 37, 64, .05);
    margin-bottom: 10px;
}
.top-summary-idrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}
.top-summary-avatar {
    width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--color-bg-button-teal), #0c8f91);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 8px rgba(10, 168, 170, .25);
}
.top-summary-avatar .z-label {
    color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .4px;
}
.top-summary-name.z-label {
    font-size: 14.5px; font-weight: 700; color: var(--color-text-dark-1);
}
.top-summary-metarow {
    display: flex; flex-wrap: wrap; align-items: center;
    padding: 6px 12px; border-top: 1px solid var(--color-border-divider-light);
}
.top-summary-meta {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 2px 12px 2px 0; margin-right: 12px;
    border-right: 1px solid var(--color-border-divider-light);
}
.top-summary-meta:last-child { border-right: 0; margin-right: 0; }
.top-summary-meta-l.z-label {
    font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--color-text-blue-darker); opacity: .72;
}
.top-summary-meta-v.z-label {
    font-size: 12.5px; font-weight: 600; color: var(--color-text-blue-dark);
}

/* Patient account-balance emphasis on summary pages (pat/ins/unapplied).
   A subtle "focus" chip so the balances stand out next to the patient code. */
.balance-focus.z-label {
    display: inline-block;
    font-weight: 600;
    color: var(--color-text-blue-darker);
    background: #eef4fb;
    border: 1px solid #d7e6f6;
    border-radius: 6px;
    padding: 2px 8px;
}
.balance-focus-label.z-label {
    color: var(--color-text-blue-dark);
    font-weight: 600;
}

/* ============================================================
   Variant A — row action icons (patient list pilot)
   Colored glyph + hover circle + larger hit area. Each action
   is applied as sclass="actionicon actionicon-<kind>" on the
   list-row action <a> links.
   ============================================================ */
.actionicon.z-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background-color .15s ease;
    text-decoration: none;
}
.actionicon.z-a:hover {
    background-color: rgba(0, 0, 0, .06);
    text-decoration: none;
}

.actionicon-view.z-a          { color: var(--color-text-named-blue); }
.actionicon-view.z-a:hover    { background-color: rgba(37, 99, 235, .10); }

.actionicon-task.z-a          { color: #d97706; }
.actionicon-task.z-a:hover    { background-color: rgba(217, 119, 6, .12); }

.actionicon-quickedit.z-a       { color: #7c3aed; }
.actionicon-quickedit.z-a:hover { background-color: rgba(124, 58, 237, .12); }

.actionicon-edit.z-a          { color: #059669; }
.actionicon-edit.z-a:hover    { background-color: rgba(5, 150, 105, .12); }

.actionicon-delete.z-a        { color: var(--color-text-named-red); }
.actionicon-delete.z-a:hover  { background-color: rgba(220, 38, 38, .12); }

.actionicon-log.z-a           { color: var(--color-text-gray-5); }
.actionicon-log.z-a:hover     { background-color: rgba(0, 0, 0, .06); }

/* Variant A — additional row-action colors used by claim/encounter lists */
.actionicon-notes.z-a         { color: #0891b2; }   /* teal  */
.actionicon-notes.z-a:hover   { background-color: rgba(8, 145, 178, .12); }

.actionicon-add.z-a           { color: #4f46e5; }   /* indigo */
.actionicon-add.z-a:hover     { background-color: rgba(79, 70, 229, .12); }

.actionicon-more.z-a          { color: var(--color-text-gray-5); }
.actionicon-more.z-a:hover    { background-color: rgba(0, 0, 0, .06); }

/* ============================================================
   Modern action menu — shared across list "More Actions" dropdowns
   Rounded surface + soft shadow, a semantic color per action kind, and
   a per-row hover that tints to that action's own hue. Hues reuse the
   app's action-icon palette. Applied via sclass="action-menu" on the
   menupopup and sclass="act-<kind>" on each menuitem; add "group-start"
   to the item that begins a new group to draw a divider above it.
   (ZK 10 menu DOM: .z-menuitem-content row, .z-menuitem-text label,
   icon rendered as an <i>.)
   ============================================================ */
.z-menupopup.action-menu {
    border: 1px solid var(--border-strong, #d5dce7);
    border-radius: 12px;
    box-shadow: 0 14px 34px -12px rgba(15, 28, 51, .28), 0 2px 6px rgba(15, 28, 51, .06);
    padding: 6px;
    background: #ffffff;
}
.action-menu .z-menupopup-content {
    padding: 0;
    background: transparent;
    border: 0;
}

/* rows */
.action-menu .z-menuitem > .z-menuitem-content {
    border-radius: 9px;
    padding: 8px 14px 8px 11px;
    margin: 1px 2px;
    gap: 10px;
    transition: background-color .13s ease, color .13s ease;
}
.action-menu .z-menuitem-text {
    font-size: 13.5px;
    font-weight: 500;
}
.action-menu .z-menuitem i {
    transition: color .13s ease;
}

/* per-action icon color (always on) */
.action-menu .act-download i { color: var(--color-text-named-blue, #2563eb); }
.action-menu .act-json i     { color: #7c3aed; }  /* violet */
.action-menu .act-html i     { color: #0891b2; }  /* teal   */
.action-menu .act-pdf i      { color: var(--color-text-named-red, #dc2626); }
.action-menu .act-view i     { color: #4f46e5; }  /* indigo — view / preview / job */
.action-menu .act-log i      { color: #64748b; }  /* slate  */

/* per-action hover tint (row highlights in its own hue) */
.action-menu .act-download > .z-menuitem-content:hover { background: rgba(37, 99, 235, .10);  color: var(--color-text-named-blue, #2563eb); }
.action-menu .act-json     > .z-menuitem-content:hover { background: rgba(124, 58, 237, .10); color: #7c3aed; }
.action-menu .act-html     > .z-menuitem-content:hover { background: rgba(8, 145, 178, .10);  color: #0891b2; }
.action-menu .act-pdf      > .z-menuitem-content:hover { background: rgba(220, 38, 38, .10);   color: var(--color-text-named-red, #dc2626); }
.action-menu .act-view     > .z-menuitem-content:hover { background: rgba(79, 70, 229, .10);   color: #4f46e5; }
.action-menu .act-log      > .z-menuitem-content:hover { background: rgba(100, 116, 139, .12); color: #64748b; }

/* label follows the row's hover color */
.action-menu .z-menuitem > .z-menuitem-content:hover .z-menuitem-text { color: inherit; }

/* group divider — a border on the item that starts a new group, so it
   never depends on ZK's separator DOM */
.action-menu .group-start {
    border-top: 1px solid var(--border, #e4e9f1);
    margin-top: 5px;
    padding-top: 4px;
}

.filter-btn {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #555;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    cursor: pointer;
}

.filter-btn:hover {
    background-color: #e6e6e6;
}

.filter-btn-active {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    background-color: #2c7a7b;
    border: 1px solid #2c7a7b;
    cursor: pointer;
}

.job-warn-row {
    background-color: #fff4e5 !important;
    color: #b45309 !important;
}

.job-warn-row .z-listcell-content {
    color: #b45309 !important;
}

/* ===================================================================
   5-column card grid — opt-in layout used by the payment search screens
   (search_claim_payments.zul, search_procedure_payments.zul).
   Scoped under .card-grid-5 so that .card-row / .field-pair /
   .field-label behaviour is unchanged for every other card screen.
   =================================================================== */
.card-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 4px;
    width: 100%;
}

.card-grid-5 .field-pair {
    flex: none;
    min-width: 0;
    margin-bottom: 0;
    min-height: 22px;
}

.card-grid-5 .field-label {
    width: 88px;
    flex: none;
}

.card-grid-5 .field-actions {
    grid-column: span 2;
}

/* Keep the action icon within the card's value-row height (~22px) so the
   Actions cell aligns with the WriteOff/PatResp row above it. The default
   30px action-icon box was taller than the value rows, pushing the Actions
   row out of alignment. */
.card-grid-5 .field-actions .actionicon.z-a {
    width: 22px;
    height: 22px;
}

@media (max-width: 1200px) {
    .card-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .card-grid-5 .field-actions {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .card-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-grid-5 .field-label {
        width: 100px;
    }
}

/* ===================================================================
   4-column card grid — opt-in layout used by search_line_items.zul.
   Keeps the standard 110px .field-label width; only the column count is
   fixed. Scoped under .card-grid-4 so .card-row / .field-pair /
   .field-label behaviour is unchanged for every other card screen.
   =================================================================== */
.card-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 4px;
    width: 100%;
}

.card-grid-4 .field-pair {
    flex: none;
    min-width: 0;
    margin-bottom: 0;
    min-height: 22px;
}

.card-grid-4 .field-label {
    flex: none;
}

@media (max-width: 1100px) {
    .card-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A cell that must occupy a whole grid row (long free-text values such as
   the Denial line on the follow-up screens). */
.card-grid-4 .field-full-row {
    grid-column: 1 / -1;
}

/* Action icons on insurance payment card rows — match value-row height so icons
   stay on one line with the Actions label (same fix as card-grid-5). */
.card-grid-4 .field-actions {
    align-items: center;
    min-height: 30px;
}

.card-grid-4 .field-actions .actionicon.z-a {
    width: 22px;
    height: 22px;
}

/* ===================================================================
   Scroll context for the content column inside a .screen-host wrapper.
   .screen-host is overflow:hidden (so it clips, not scrolls); this makes
   the inner content div the scrolling ancestor, which a position:sticky
   .list-footer-totals resolves against so it keeps pinning to the bottom
   once the list is wrapped for the side-panel host.
   =================================================================== */
.screen-scrollport {
    overflow: auto;
}

/* ===================================================================
   Sticky totals footer — shared by the search/list screens.
   Migrated from dashboard.css; hardcoded hex values replaced with
   theme.css tokens. Weight reduced from 800 to 700 and an explicit
   colour token added, so the footer matches the rest of the type scale
   now that it renders a full amount breakdown rather than a short count.
   =================================================================== */
.list-footer-totals {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border-light);
    padding: 10px 16px;
    margin-top: 10px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

.totals-row {
    align-items: center;
}

.totals-label {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.totals-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-blue-darker);
}

.totals-note {
    font-size: 12px;
    color: #6b7280;
}

/* ===================================================================
   Status pill — generic accepted / rejected / neutral pill for list
   cells and detail fields. Same treatment as the .era-status-pill rules,
   which are named after the screen they originated on; prefer
   .status-pill in new markup.
   =================================================================== */
.status-pill.z-label {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.status-pill-green.z-label {
    background-color: var(--color-bg-success-badge);
    color: var(--color-success-dark);
}

.status-pill-red.z-label {
    background-color: var(--color-bg-danger-badge);
    color: var(--color-danger);
}

/* No --color-bg-warning-badge / --color-warning-dark token exists; using the
   nearest existing warning tokens (subtle warning fill + deep amber text). */
.status-pill-amber.z-label {
    background-color: var(--color-bg-warning-subtle);
    color: var(--color-warning-deep);
}

.status-pill-neutral.z-label {
    background-color: var(--color-bg-gray-3);
    color: var(--color-text-gray-1);
}

/* ===================================================================
   CLAIM TIMELINE — vertical milestone rail on the claim summary.
   Structure mirrors the .event-log-* side-panel rail: each item is a
   flex row with a dot column, and a 1px connector is drawn with an
   ::after on every item except the last.

   Dot colour is driven by the DTO's semantic tone (NEUTRAL / INFO /
   POSITIVE / WARNING / NEGATIVE) mapped to a modifier class by
   ClaimSummaryVM.getToneSclass. The backend never sends a colour.
   =================================================================== */
.claim-timeline-row {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 10px 0;
}

.claim-timeline-item:not(:last-child) .claim-timeline-row::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 22px;
    bottom: -10px;
    width: 1px;
    background: var(--color-border-divider-light);
}

.claim-timeline-node {
    flex-shrink: 0;
    padding-top: 5px;
}

.claim-timeline-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.claim-timeline-body {
    flex: 1;
    min-width: 0;
}

.claim-timeline-label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-dark-1);
}

.claim-timeline-meta {
    display: flex;
    gap: 12px;
    margin-top: 2px;
}

.claim-timeline-date,
.claim-timeline-user {
    font-size: 11.5px;
    color: var(--color-text-gray-2);
}

/* Semantic tone -> colour. Tone names come from ClaimMilestoneTone. */
.claim-timeline-dot-neutral  { background: var(--color-text-gray-2); }
.claim-timeline-dot-info     { background: var(--color-text-blue-darker); }
.claim-timeline-dot-positive { background: var(--color-success); }
.claim-timeline-dot-warning  { background: var(--color-warning); }
.claim-timeline-dot-negative { background: var(--color-danger); }

/* ===================================================================
   Quick rail inside the Claim Followup wrapper.

   claim_followup.zul is a borderlayout whose north region carries its own
   navigation bar, so there is ~92px more chrome above the embedded Claim
   Summary than there is when that screen opens in its own tab. The shared
   .quick-rail.rail-horizontal top of 95px therefore lands inside that nav
   bar and the horizontal rail renders over the header inputs.

   Scoped to .claim-followup-shell so every other screen using the rail -
   facility, patient, patient insurance, task and standalone claim summary -
   keeps the shared position. Do not fold this back into .quick-rail.

   Vertical mode is deliberately not overridden: it is 60px wide and sits
   clear at the right edge in both contexts.
   =================================================================== */
.claim-followup-shell .quick-rail.rail-horizontal {
    top: 190px;
}

/* ===================================================================
   PINNED NOTIFICATIONS PANEL
   Dedicated classes for /zk/commonzul/pinned_notifications_panel.zul.

   Deliberately NOT reusing .slide-panel / .overlay-mask: those are shared
   with every Advance Search panel in the app, and this panel needs
   position:fixed while those currently use position:absolute. Keeping the
   two separate means this panel can be fixed without changing search
   behaviour anywhere else. If the Advance Search panels are later migrated
   to position:fixed too, these rules can be folded back in.

   position:fixed (not absolute): an absolutely-positioned mask sizes itself
   against its nearest positioned ancestor, which differs per host screen —
   on a screen whose body is an inner overflow:auto div it covered the whole
   region and swallowed every click including scrolling.

   top:96px = .ecp-topbar (56px) + .ecp-utilitybar (32px min-height + 8px
   padding). Both live in main.zul and are on every screen, so the offset is
   constant. This keeps the panel and mask clear of the app's own navigation.
   =================================================================== */
/* bottom:0 rather than height:calc(100vh - 96px). The app shell is not the full
   viewport height — main.zul's borderlayout has a <south> footer strip below the
   content area, and on the summary screen that region is percentage-sized, so no
   fixed subtraction is correct on every screen. Anchoring top and bottom lets the
   browser resolve the height, with no arithmetic to keep in sync if the chrome
   changes. Matches how .pinned-panel-mask is already anchored. */
/* bottom: 3vh clears main.zul's <south size="3%"> footer region. South is 3% of the
   borderlayout height, and the borderlayout is the viewport minus the 96px of top
   chrome, so 3vh is that height to within ~3px. Anchoring by bottom rather than
   setting a height means the browser resolves the panel height with no arithmetic to
   keep in sync. */
.pinned-panel {
    position: fixed;
    top: 96px;
    bottom: 3vh;
    right: -370px;
    /* hidden */
    width: 370px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    /* The last child sits flush against the scroll container's bottom edge and
       renders half-clipped. Padding on the scroll container itself (not on the
       inner vlayout) is what actually extends the scrollable area. */
    padding-bottom: 28px;
    background: var(--color-bg-white);
    border-left: 1px solid var(--color-border-divider-light);
    z-index: 1000;
    transition: right 0.3s ease;
    box-shadow: none;
}

.pinned-panel.open {
    right: 0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
}

.pinned-panel-mask {
    position: fixed;
    top: 96px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    display: none;
}

.pinned-panel-mask.show {
    display: block;
}

/* ============================================================
   ASSIGNED TASKS CARD — shared by every *_summary.zul
   Entity-agnostic: Claim, Encounter, Patient, Insurance, etc.
   Never scope or rename these per entity.
   ============================================================ */
.assigned-task-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border-neutral-3);   /* match .note-card border colour */
}
.assigned-task-row-closed { opacity: .65; }

.assigned-task-avatar {
    width: 29px; height: 29px; border-radius: 50%; flex: 0 0 auto;
    background: var(--color-bg-button-teal);
    display: flex; align-items: center; justify-content: center;
}

.assigned-task-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.assigned-task-title { font-size: 13px; font-weight: 600; }
.assigned-task-meta  { font-size: 12px; color: #6b7280; }
.assigned-task-meta-alert { color: #b42318; font-weight: 600; }

.assigned-task-footer { padding-top: 9px; border-top: 1px solid var(--color-border-neutral-3); }

/* Header chip — sits beside the record status badge on any summary header */
.assignee-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 600;
    background: #fef3e2; color: #854f0b; text-decoration: none;
}
.assignee-chip-alert { background: #fceaea; color: #a32d2d; }

/* ===================================================================
   Apply Insurance Payment Detail — keyboard-first layout
   Compact claim meta strip + sticky Posting Balance metric cards.
   Reuses metric-tile-* / list-footer-totals ideas; scoped under
   apply-ins-detail-* so other screens are unaffected.
   =================================================================== */
.apply-ins-detail-meta {
    text-align: center;
    padding: 5px 14px;
    color: #3b6ea5;
    font-size: 11px;
    background: #eef5fb;
    border-bottom: 1px solid #d5e4f3;
    margin: 0 0 8px;
}

.apply-ins-detail-meta .z-label,
.apply-ins-detail-meta .z-hbox {
    color: #3b6ea5;
    font-size: 11px;
}

.apply-ins-detail-meta-sep.z-label {
    color: #8aa4c0;
    padding: 0 4px;
}

/* Flex child that fills leftover height so Posting Balance can pin to the
   viewport bottom when Line Items are short (matches mockup). Scrolls when
   content is taller than the viewport. */
.apply-ins-detail-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Flex footer — stays at bottom of the window; not sticky-in-flow after Grand Total */
.apply-ins-detail-balance {
    flex: 0 0 auto;
    z-index: 5;
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border-light);
    padding: 8px 14px 10px;
    margin-top: 0;
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
}

.apply-ins-detail-balance-title.z-label {
    display: block;
    margin: 0 0 6px;
    font-size: 11px !important;
    font-weight: 700;
    color: #1e3a5f;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.apply-ins-detail-balance .metric-tile-row {
    margin-bottom: 0;
    gap: 6px;
}

.apply-ins-detail-balance .metric-tile {
    padding: 5px 7px;
    min-width: 90px;
    border-radius: 4px;
    background: #f8fafc;
    border: 1px solid var(--color-border-light, #d7dee7);
}

.apply-ins-detail-balance .metric-tile.emphasis {
    border-color: #5eead4;
    background: #f0fdfa;
}

.apply-ins-detail-balance .metric-tile-label,
.apply-ins-detail-balance .metric-tile-label.z-label {
    font-size: 10px !important;
    margin-bottom: 1px;
}

.apply-ins-detail-balance .metric-tile-value,
.apply-ins-detail-balance .metric-tile-value.z-label {
    font-size: 13px !important;
    font-weight: 700;
}

.apply-ins-detail-balance .metric-tile-value.pos,
.apply-ins-detail-balance .metric-tile-value.pos.z-label {
    color: #0f766e;
}

.apply-ins-detail-balance .metric-tile-value.neg,
.apply-ins-detail-balance .metric-tile-value.neg.z-label {
    color: #b42318;
}

.apply-ins-matched-templates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
}

/* Detail-only side panels (Notes + Posting Template). Panels use visible= when
   closed so they are not in the DOM. Closed right:-370px absolute positioning
   left the Posting Template on-screen beside an open Notes panel. */
.z-window.apply-ins-detail-window .apply-ins-detail-side-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 370px;
    height: 100%;
    background: var(--color-bg-white);
    z-index: 1000;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.z-window.apply-ins-detail-window .apply-ins-detail-side-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    display: none;
}

.z-window.apply-ins-detail-window .apply-ins-detail-side-overlay.show {
    display: block;
}