/* ————————————————
   Cards: title + content + footer
   ———————————————— */


.panelouterrim{
    box-shadow              : -0px 0px 19px 0px rgba(0, 0, 0, 0.1)       !important   ;
    padding                 : 20px;
    display                 : flex;
    flex-direction          : column;
    border-radius           : 8px;
    overflow                : hidden;
}

.paneltitle,
.cardfooter{
    flex                    : 0 0 auto ;
    padding                 : 0.5rem 1rem;
    background              : #f5f5f5;
    display                 : flex;
    align-items             : center;
    justify-content         : space-between;
  }


.panelcontent{
  overflow                  : auto;
  padding                   : 1rem;
  background                : #fff;
  display                   : flex;
  flex-direction            : column;
  }

.panelcontent > .innerpanel{
  display                   : flex;
  align-items               : center;
  justify-content           : center;
}


.card {
    width                   : 190px;
    height                  : 110px;
    margin                  : 5px;
    border                  : 1px solid #ccc;
    border-radius           : 4px;
    overflow                : hidden;
    display                 : flex;
    flex-direction          : column;
    margin-top              : 20px;
    margin-left             : 10px;
    transition              : all 0.2s ease-in-out;

}

.footer-card-simple{
    height                  : 100px;
    width                   : auto;100%;
}



.card-title {
    font-weight             : 400;
    text-align              : left;
    font-size               : 14px;
    padding                 : 5px;
    height                  : 30px           !important;
    background-color        : #06b6d4;
}

.card-description {
    flex-grow               : 1;
    text-align              : left;
    font-size               : 12px;
    overflow-y              : auto;
    Padding                 : 5px;
}

.card-image {
    height                  : 45px;
    object-fit              : cover;
}



.carddiv {
    box-shadow             : -0px 0px 19px 0px rgba(0, 0, 0, 0.1)      !important   ;
    padding                : 20px                                       !important;
    border-radius          : 8px;
  /*  border                  : 1px solid red; */
}


.slider-header-div{
    display             : flex;
    flex-direction      : row;
    top                 : 0;
    width               : 100%;
    height              : 50px;
    flex-wrap           : wrap;
    align-content       : center;
    justify-content     : space-between;
    align-items         : center;
    padding             : 10px;
    position            : sticky !important;
    z-index             : 1000 !important;
    background          : white;
    border-bottom       : 1px solid #06b6d4;
    box-shadow          : 0 3px 19px 0px rgba(0, 0, 0, 0.1);
}


/* When the slider is open in 'push' mode, shift the main area by the panel width */
.app-pushed-by-slider {
  margin-right                 : var(--slider-width, 435px) !important;
  transition                   : margin-right 0.3s ease-in-out;
}


.sidemenu {
 /* order                     : 0                                     !important;
  flex-shrink               : 0                                     !important;
  flex-grow                 : 0                                     !important;
  position                  : relative                              !important;
  */
  box-shadow                    : 0 0px 5px 3px rgba(0, 0, 0, 0.1) !important;
  overflow                      : hidden;
  border-radius                 : 8px;
  border-top-left-radius        : 0;
  border-bottom-left-radius     : 0;
  border-top-right-radius       : 8px;
  border-bottom-right-radius    : 8px;
  display                       : flex                                  !important;
  height                        : 100%                                  !important;
  margin-right                  : 0px                                  !important;
  margin-top                    : 10px;
}

.sidebar {
    height                  : 100%                                      !important;
}

  /*
.carddiv{

     padding                : 20px;
     border-radius          : 8px;
     box-shadow             : -0px 0px 19px 0px rgba(0, 0, 0, 0.1)      !important   ;
     position               : relative                                  !important;

     margin                 : 0                                         !important;
     width                  : 100%                                      !important;
     top                    : 0                                         !important;
     margin-bottom          : 20px;
     display                : flex;
     flex-direction         : row;
     flex-shrink            : 0;
}   */

.cardtitlediv{
    height                  : 43px                                      !important;
    top                     : auto                                      !important;
    left                    : auto                                      !important;
    position                : relative                                  !important;
    margin                  : 0                                         !important;
    border-top-left-radius  : 8px;
    border-top-right-radius : 8px;
    background-color        : #87ceeb;
    padding                 : 10px;

}

/*
.carddiv:first-child {
  height         : 370px;
  flex-shrink    : 0;
}

.carddiv:last-child {
  flex           : 1 1 auto;
  overflow       : hidden;
}
*/



.innercarddiv{
   /* top                     : auto                                      !important; */
    position                : relative                                  !important;
    width                   : 100%                                      !important;
    height                  : 100%                                      !important;
    padding-top             : 0px;
    bottom                  : 0;
    display                 : flex;
    left                    : 0;


}

     /*
.carddiv .innercarddiv {
  position                  : absolute                                  !important;
  top                       : 35px                                      !important;
  left                      : 0                                         !important;
  right                     : 0                                         !important;
  bottom                    : 41px                                      !important;
  overflow                  : auto                                      !important;
}

    */


/* left panel wrapper */
.leftinnercarddiv {
  margin                    : 0;
  position                  : relative ;
  width                     : 250px                                 !important;
  height                    : 100%  ;
  box-sizing                : border-box;
  padding-bottom            : 10px;
  border-radius             : 8px;
}

/* left panel wrapper */
.leftcarddiv {
  margin                    : 0;
  position                  : relative ;
  width                     : 350px                                 !important;
  height                    : 100%  ;
  box-sizing                : border-box;
  padding-bottom            : 10px;
  border-radius             : 8px;
  display                   : flex;
  flex-direction            : column;
  flex-wrap                 : wrap;
  justify-content           : center;
  align-content             : stretch;
  gap                       : 10px;

}

/* left panel wrapper */
.rightcarddiv {
  margin                    : 0;
  position                  : relative ;
  width                     : 350px                                 !important;
  height                    : 100%  ;
  box-sizing                : border-box;
  padding-bottom            : 10px;
  border-radius             : 8px;
  display                   : flex;
  flex-direction            : column;
  flex-wrap                 : wrap;
  justify-content           : center;
  align-content             : stretch;
  gap                       : 10px;

}




.rightcardstack{
    display                 : flex;
    flex-direction          : column;
    flex-grow               : 1;
    height                  : 100%;
    width                   : 100%                                      !important;
    gap                     : 20px;
    box-sizing              : border-box;
    overflow                : hidden;
    padding-left            : 10px;
    padding-right           : 10px;
    padding-top             : 20px;
    padding-bottom          : 10px;
}

/*
.mainhorizontalcontainer {
  display                   : flex                                      !important;
  flex-direction            : row                                       !important;
  height                    : 100%                                      !important;
  max-height                : 100%                                      !important;
  width                     : 100%                                      !important;
  position                  : relative                                  !important;
  box-sizing                : border-box                                !important;
  padding-left              : 30px;
  padding-bottom            : 10px;
  gap                       : 30px;
  overflow                  : hidden;
}
*/

.centerdivcontainer {
    top             : 0px                   !important;
    left            : 0px                   !important;
    width           : 100%                  !important;
    height          : calc(100% - 180px)    !important;
    position        : relative              !important;
    box-sizing      : border-box            !important;
    display         : flex                  !important;
    flex-direction  : row                   !important;
    align-items     : center                !important;
    justify-content : center                !important;
    gap             : 10rem;
}



.centeredcontainer{
    top                     : 0                                         !important;
    left                    : 0                                         !important;
    width                   : 400px                                     !important;
    height                  : 500px                                     !important;
    position                : relative                                  !important;
    display                 : flex                                      !important;
    flex-direction          : column                                    !important;
    justify-content         : space-between                             !important;
    align-items             : center                                    !important;
    }






.shadedframecontainer {
  width                             : 100%;
  margin                            : 0 auto;
  padding                           : 0 1rem;
  display                           : flex;
  flex-direction                    : column;
  position                          : relative          !important;
  overflow-y                        : auto          !important;
  background-color                  : #f8fafc;
  align-items                       : center;
  height                            : 100%;

}


.chartheaderdiv{
    display                         : flex;
    flex-direction                  : row;
    flex-wrap                       : wrap;
    justify-content                 : space-between;
    padding-bottom                  : 10px;

}

/*
.shadedframecontainer {
    top             : 0px                   !important;
    left            : 0px                   !important;
    width           : 100%                  !important;
    height          : calc(100% - 180px)    !important;
    position        : relative              !important;
    box-sizing      : border-box            !important;
    display         : flex                  !important;
    flex-direction  : row                   !important;
    align-items     : center                !important;
    justify-content : center                !important;
    gap             : 10rem;
    background-color: #f8fafc;
}    */


.list-item-block{
    display                         : flex;
    flex-wrap                       : wrap;
    flex-direction                  : row;
    align-content                   : center;
    align-items                     : center;
    justify-content                 : flex-start;


}


.horizcenterdivcontainer{
    top             : 0px                   !important;
    left            : 0px                   !important;
    width           : 100%                  !important;
    height          : 100%                  !important;
    position        : relative              !important;
    box-sizing      : border-box            !important;
    display         : flex                  !important;
    flex-direction  : row                   !important;
    align-items     : stretch               !important;
    justify-content : space-between         !important;
    padding         : 0 ;

}




.containerdiv{
/*    margin                  : 40px; */
    padding                 : 0;
  /*  left                    : 250px; */
/*    width                   : calc(100% - 320px);*/

    display                 : flex;
    flex-direction          : row;
    width                   : 100%;
    height                  : 100%;
    box-sizing              : border-box;
    gap                     : 0;
}

/*
div.containerdiv{
    height                  : 100%                                      !important;
    }
    */


.cardholderdiv {
 /* display                   : flex                                      !important; */
  flex-direction            : column                                    !important;
  position                  : relative                                  !important;
  box-sizing                : border-box                                !important;
  height                    : calc(100% - 140px)                        !important;
  margin-left               : 30px;
  margin-right              : 30px;
  margin-top                : 30px;
  width                     : 100%;

}


.fullwidthcardholderdiv{
  flex-direction            : column                                    !important;
  position                  : relative                                  !important;
  box-sizing                : border-box                                !important;

  padding-left              : 20px;
  padding-right              : 20px;
/*  height                    : 100%                                      !important;

  width                     : 100%                                      !important;    */
}



.fullrowcardholderdiv{
    display                 : flex;
    flex-direction            : column                                    !important;
    position                  : relative                                  !important;
    box-sizing                : border-box                                !important;
    height                    : 100%                                      !important;
    padding                   : 30px;
    width                     : 100%                                      !important;
}

.cardheaderdiv{
    position                    : relative;
    width                       : 100%;
    display                     : flex;
    flex-direction              : column;
    align-items                 : center;
    flex-wrap                   : wrap;
    align-content               : center;
}



.pagetitlediv {
  position                      : relative                                  !important;
 /* flex                          : 0 0 auto                                  !important;
  box-sizing                    : border-box                                !important; */
/*  margin-top                    : 10px;
  margin-bottom                 : 10px; */
/*  width                         : 100%                                      !important; */
/*  display                       : flex;
  flex-direction                : column;
  align-items                   : flex-end;
  */
}

/*
.innercardfooterdiv{
    display                     : flex;
    flex-direction              : row-reverse;
    z-index                     : 100;
    position                    : absolute                                  !important;
    top                         : auto;
    bottom                      : 0;
    padding-right               : 20px;
}
*/



/*
.carddiv .cardtitlediv {
  position                  : absolute                                  !important;
  top                       : 0                                         !important;
  left                      : 0                                         !important;
  width                     : 100%                                      !important;
  height                    : 35px                                      !important;
}

*/


/* Only apply flex layout to divs and spans with this class */
div.verticalgridpanel {
    height                  : 100%                                  !important;
    display                 : flex;
    flex-direction          : column;
    align-items             : stretch;
    justify-content         : flex-start;
    padding                 : 10px;
    box-sizing              : border-box;
}

/* Reset table layout if they also use the same class */
/*table.verticalgridpanel {
    height                  : 100%;
    width                   : 100%;
    display                 : table !important;
    border-collapse         : collapse;
    box-sizing              : border-box;
}
*/

/*
.verticalgridpanel{
    height                  : 100%                                      !important;
    display                 : flex;
    flex-direction          : column;
    align-items             : stretch;
    justify-content         : space-between  ;
    padding                 : 10px                                      ;
    box-sizing              : border-box;
}

*/
/*
span.verticalgridpanel {
    display                 : block                                     !important;
    height                  : 100%                                      !important;
    box-sizing              : border-box;
    overflow                : hidden;
}
*/


/*
.verticalgridpanel table {
    height                  : auto                                     !important;
    width                   : 100%                                      ;
    table-layout            : fixed                                     ;
    border-collapse         : collapse                                  ;
}

.verticalgridpanel tr {
    height                  : 100%                                      !important;
}

.verticalgridpanel td {
    height                  : 100%                                      ;
    vertical-align          : top                                       ;
}

canvas {
    max-height              : 100%                                      !important;
    height                  : 100%                                      !important;
}
*/

/*
.verticalgridpanel > table {
  height                    : 100%;
  width                     : 100%;

  box-sizing                : border-box;
}  */

/*
.verticalgridpanel td {
  height                    : 100%;
  vertical-align            : top;
  box-sizing                : border-box;
}  */

/*
.verticalgridpanel > span{
    display                 : flex                                      !important;
    flex-direction          : column                                    !important;
    justify-content         : space-between                             !important;
    height                  : 100%                                      !important;
}     */


 /*
.carddiv .innercardfooterdiv {
  top                       : 35px                                      !important;
  position                  : relative                                  !important;
  bottom                    : 41px                                      !important;
  overflow                  : auto                                      !important;
  left                      : 0                                         !important;
  width                     : 100%                                      !important;
  height                    : 41px                                      !important;
}
*/


/* Modern smooth spinner */
.circular-loading-spinner {
    position         : absolute;
    top              : 10px                      !important;
    left             : 10px                      !important;
    transform        : translate(-50%, -50%);
    width            : 30px                     !important;
    height           : 30px                     !important;
    border           : 4px solid #ccc;
    border-top       : 4px solid #007bff;
    border-radius    : 50%;
    animation        : spin 1s linear infinite;
    z-index          : 10000;
}

@keyframes spin {
    0%   { transform: translate(-50%, -50%) rotate(0deg);   }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


.title-wrapper-div{
    width           : 30%;
    position        : static;
    top             : 0px;
    left            : 0px;
    height          : 25px;
    position        : absolute;
    box-sizing      : border-box;
    user-select     : none;
    -webkit-tap-highlight-color: transparent;
    display         : flex;
    flex-direction  : column;
    align-items     : flex-start;
    justify-content : space-between;
    margin          : 5px;
}

.linear-loading-spinner{
    position            : relative;
    width               : 40px              !important;
    height              : 5px               !important;
    background          : #f8fafc;
    overflow            : hidden;
    border-radius       : 2px;
    overflow            : hidden;
    margin-left         : 3px;
    align-self          : flex-start;
    flex-shrink         : 0;
    display             : block;
    border              : none;
}

.linear-loading-spinner.loading::before {
    content             : "";
    display             : block;
    width               : 10px;
    background          : none          !important;
    background-color    : #28a745       !important;
    border-radius       : 2px;
    animation           : bounce-line 1.4s ease-in-out infinite;
    transform           : translateX(0);
    height              : 4px;
    border              : 1px solid #e0e0e0 ;

}


.linear-loading-spinner.paused::before {
    content             : "";
    display             : block;
    width               : 100%;
    background-color    : #ff6100;
    border-radius       : 2px;
    animation           : none;
    transform           : translateX(0);
    height              : 4px;
    border              : 1px solid #e0e0e0 ;
    background          : #ffbb39               !important;
}

.linear-loading-spinner.stopped::before {
    content             : "";
    display             : block;
    width               : 100%;
    background-color    : red;
    border-radius       : 2px;
    animation           : none;
    transform           : translateX(0);
    height              : 4px;
    border              : 1px solid #e0e0e0 ;
    background          : #f11800               !important;
}



@keyframes bounce-line {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(30px); }
    100% { transform: translateX(0); }
}


/* Loading overlay for dashboard canvas */
.dashboard-loading-overlay {
    position            : absolute;
    top                 : 0;
    left                : 0;
    width               : 100%                 !important;
    height              : 100%                !important;
    background          : rgba(255, 255, 255, 0.9);
    display             : flex;
    flex-direction      : column;
    justify-content     : center;
    align-items         : center;
    z-index             : 9999;
    backdrop-filter     : blur(2px);
}

.dashboard-loading-spinner {
    width               : 50px                  !important;
    height              : 50px                  !important;
    border              : 4px solid #e8e8e8;
    border-top          : 4px solid #2e54a7;
    border-radius       : 50%;
    animation           : spin 1s linear infinite;
    margin-bottom       : 20px;
    position            : relative          !important;
}

.dashboard-loading-text {
    font-size           : 16px;
    color               : #2e54a7;
    font-weight         : 600;
    margin-bottom       : 10px;
    position            : relative          !important;
}

.dashboard-loading-subtext {
    font-size           : 14px;
    color               : #666;
    text-align          : center;
    position            : relative          !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Alternative pulse animation */
.dashboard-loading-pulse {
    width: 20px;
    height: 20px;
    background: #2e54a7;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    animation: pulse 1.4s ease-in-out infinite both;
}

.dashboard-loading-pulse:nth-child(1) { animation-delay: -0.32s; }
.dashboard-loading-pulse:nth-child(2) { animation-delay: -0.16s; }
.dashboard-loading-pulse:nth-child(3) { animation-delay: 0s; }

@keyframes pulse {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Hide loading when cards are ready */
.dashboard-container.cards-loaded .dashboard-loading-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

.dashboard-container.cards-loaded .dashboard-loading-overlay.hidden {
    display: none;
}


/* Hide loading when cards are ready */
.form-container.container-loaded .dashboard-loading-overlay {
    opacity                         : 0;
    pointer-events                  : none;
    transition                      : opacity 0.3s ease-out;
}

.form-container.container-loaded .dashboard-loading-overlay.hidden {
    display                         : none;
}