@media (max-width: 580px) {
    #passwordChangeSuccess{
        top: 8px;
        left: 8px;
        right: 8px;
        max-width: calc(100% - 16px);
        min-width: 0px;

    }

    .householdDetailHeader{
        font-size: 14px;
    }

    #alert-container{
        top: 8px;
        left: 8px;
        right: 8px;
        max-width: calc(100% - 16px);
        min-width: 0px;

    }
    .backArrow {
        margin-right: 0px !important;
    }

    .value-add-title{
        font-size: 14px !important;
    }

    #valueAddDropdownMenu{
        right: 0px !important;
    }

    #valueAddDropdownTrigger{
        font-size: 14px !important;
    }
    .value-add-icon{
        font-size: 14px !important;
    }


}



@media (max-width: 409px) {

    .notes-td{
        display: none;

    }

    .notes-th{
        display: none;

    }


    .sign-in-header{
        font-size: 24px;
    }

    #verify-email-form .card{
        width: 100%;
        padding: 16px !important;
    }

    .vHeadText{
        font-size: 24px;
    }

    .button-container-email{
        width: 100%;
    }

    .verifyEmailButton{
        width: 100%;
    }

    #verify-email-form {
        width: 100%;
    }

    .verify-digit {
        width: 24%;
    }

    .login-icon{
        width: 140px;
    }

    #login-card{
        padding: 20px;
    }

    #forgot-remember .form-check{
        display: none;

    }

    #forgot-remember{
        display: flex;
       
        align-items: right;
        margin-bottom: 16px;
        justify-content: flex-end;
    }





}

@media (max-width: 320px) {
    #login-container .nav-item{

    font-size: 12px;
    }

}

/* --- Sidebar overlay for ≤1305px --- */
:root {
    /* Use your expanded sidebar width here if different */
    --sidebar-w: 260px;
  }

  @media (max-width: 1240px) {
    .column-layout{
        margin-right: auto;
    margin-left: auto;
    width: 100%;
    }
    .left-column{
        width: 100%;
    }

    .value-add-action-buttons{
        margin-top: 0px !important;
    }


  }

  @media (max-width: 900px) {

 

  }
/* Shell reserves vertical space */
.paper-scale-shell { position: relative; width: 100%; overflow: visible; }

/* Container will *shrink* in width; no transforms on it */
.paper-container {
  width: 816px; /* base width; JS will override to scaled width */
}

/* Scale the inner wrapper visually */
.paper-container > .iframe-wrapper {
  display: block;
  width: 816px;                 /* fixed design width for correct scaling */
  transform-origin: top center;   /* keep positioning stable */
  will-change: transform;
}


.paper-container > .iframe-wrapper { will-change: transform; }  /* perf hint */




@media print {
  .paper-scale-shell { height: auto !important; }
  .paper-container { width: 816px !important; }
  .paper-container > .iframe-wrapper { transform: none !important; }
}

  
  @media (max-width: 1305px) {
    /* Keep header above overlay and sidebar so the menu icon is clickable */
    .content .header {
      position: relative;
      z-index: 1046; /* above overlay (1040) and sidebar (1045) */
    }
  
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: var(--sidebar-w);
      max-width: 85vw;
      height: 100vh;
      transform: translateX(-100%);           /* hidden off-canvas */
      transition: transform 250ms ease;       /* slide animation */
      z-index: 9999999;                          /* below header, above backdrop */
      /* Optional: keep your current background if inherited isn't correct */
      /* background: #fff; */
      box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.2);
    }
  
    /* On mobile, ignore "collapsed width" — overlay always uses full width */
    .sidebar.collapsed { width: var(--sidebar-w); }
  
    .sidebar.is-mobile-open {
      transform: translateX(0);
    }

    .stats-banner-container{
        margin-left: 0px !important;
        width: 100%;
    }

    .households-container{
        min-width: 0px !important;
        width: 100% !important;
       
    }

    .exports-container{
        min-width: 0px !important;
        width: 100% !important;

    }

    .surge-content{
        width: 100% !important;
        max-width: 100% !important; 
        min-width: 0px !important;
    }

    .import-container{
        min-width: 0px !important;
        width: 100% !important;

    }
    .stats-banner-container .dropdown{
        width: 100%;
        padding-right: 8px;
        padding-left: 8px;
    }

    .stats-banner-container{
        flex-direction: column;
        padding-top: 4px;
        gap: 8px;
    
    }

    .stats-row{
        max-width: 100% !important;
        width: 100% !important;
    }

    .stats-item{
        flex: 1;
        align-items: center;
    justify-content: center;
    padding: 8px !important;
    }

    .stats-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    #advisorFilterBtn{
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
    }

    .stats-group{
        margin: 0px !important;
    }

    .stats-group-header{
        font-size: 16px !important;
    }

    .stats-item{
        font-size: 14px !important;
    }

   
  
    /* Content should not shift at mobile sizes */
    .content .header,
    .content .main-content {
      margin-left: 0 !important;
    }
  
    /* Backdrop that closes the sidebar on outside click */
    .sidebar-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.35);
      opacity: 0;
      visibility: hidden;
      transition: opacity 200ms ease;
      z-index: 999999; /* below header and sidebar */
    }
    body.sidebar-open .sidebar-backdrop {
      opacity: 1;
      visibility: visible;
    }
  
    /* Optional: prevent body scroll when the drawer is open */
    body.sidebar-open {
      overflow: hidden;
    }
  }
  


  @media (max-width: 600px) {
    .household-name-cell{
        width: 67% !important;
    }




    .household-value-cell{
        width: 33% !important;
    }

    .stats-label{
        display: none;
    }

    .headHouseholdHeader{
        width: 67% !important;
    }

    .accountValueHeader{
        width: 33% !important;
    }

    .main-content{
        padding: 24px 20px !important;
    }

    #company-info-form{
        width: 100% !important;
    }

    #password-form{
        width: 100% !important;
    }

    .connect-redtail-button{
        display: none;

    }

    .settings-container input{
        min-width: 0px !important;
        width: 100% !important;
    }

    .pageHeaderText {
        font-size: 24px !important;
    }

    .mainButton{
        padding: 6px 12px;
        font-size: 12px;
    }

    .search-bar-container input{
        width: 100%;
    }

    #add-household-dropdown.show{
        margin-left: -90px !important;
    }

    #savedValueAddsTbody td{
        width: 20% !important;
    }
    .value-add-th{
        width: 20% !important;
        padding-left: 4px !important;
    }

    .header-tr-saved-value-adds th{
        width: 20%;
    }

    #vaCardDeck{
        flex-wrap: wrap;
    }

    .button-actions-surge{
        flex-direction: column;
        width: 100%;
        gap: 4px;
    }

    #editSurgeBtn{
        display: flex
        ;
            align-content: center;
            justify-content: flex-end;
            align-items: center;
            margin-top: -45px;
            max-width: 40px;
            margin-left: auto !important;
    }

    #chooseVABtn{
        margin-top:16px;

    }

    .button-actions-surge button{
        width: 100%;
    }


    .date-range-container{
        display: none;
    }

    .table-and-pagination-container{
        overflow: scroll;
    }

    .va-card{
        height: 150px;
        width: 110px;
    }
    .value-adds-card {
        height: 150px;
        width: 110px;
    }

    .tabs-wrap{
        width: 100%;
    }




  }
@media (max-width: 1085px) {
    .modal-dialog{
        max-width: none !important;
    }
    .top-surge-action{
        gap: 16px;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    }

  .household-detail-container{
    max-width: 100% !important;
    min-width: 0px !important;
    width: 100% !important;
  }

  #vaCardDeck{
    gap: 8px;

  }

  .topContainer{
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  .household-member-card{
    max-width: 100% !important;
}
.selectionText{
    font-size: 12px !important
    ;

}

.selection-actions{
    font-size: 12px !important

}

.selection-actions a {
    font-size: 12px !important
}

.selection-actions .btn{
    font-size: 12px !important
}

.selection-container.visible{
    padding: 10px 14px 76px !important;
}

.selection-container{
    flex-direction: column;
    gap: 8px;
}



}


@media (max-width: 800px) {

    .household-advisors-container{
        max-width: 100% !important;
    }



    .tabs{
        width: 100% !important;
    }

    .tab-link {
        font-size: 12px !important;
        flex-grow: 1;
    }

    .dashboard-main{
        width: 100% !important;
        padding: 0px !important;
    }

    .tabsHeaderGroup{
        padding: 0px !important;
    }

    .tab-content{
        padding: 0px !important;
    }

    .settings-container .mb-3{
        flex-direction: column;
    }

    .value-adds-container{
        flex-wrap: wrap !important;

    }

    .onboarding-steps{
        gap: 4px !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
    }

    .step-container {
        margin: 0px !important;
    }






}

/* mobile label swap fixes */
@media (max-width: 768px) {
    /* Keep the tabs container behaving the same */
    .tabs {
      display: flex;            /* if you already had flex, this keeps it */
      flex-wrap: wrap;
      gap: 0px;                 /* whatever gap you like */
    }
    .value-adds-container{
        flex-wrap: wrap !important;

    }
    .tabs-wrap{
        width: 100%;
    }

    #openCreateSurgeBtn{
        width: 100%;
    }

    #wSurgeTable{
        overflow: scroll;
    }


    #wSurgeTable th{
        width: 100%;
  
        font-size: 12px;
    }

    #wSurgeTable td{
        width: 100%;
  
        font-size: 12px;
    }

    th{
        font-size: 12px !important;
        flex: 1;
    }
    td{
        font-size: 12px !important;
        flex: 1;
    }

    #households-table td{
        flex: auto !important;
    }
    #households-table th{
        flex: auto !important;
    }


  
    /* Keep each tab button’s visual size even though the inner text is font-size:0 */
    .tabs .tab-link {
      font-size: 0 !important;  /* hides original label */
      display: inline-flex;      /* preserves height/vertical centering */
      align-items: center;
      min-height: 36px;          /* ensures the tab stays visible height-wise */
      line-height: 1.2;          /* avoid zero-height line box side effects */
      padding: 0px !important;
    }
  
    /* Show the short label, sized normally */
    .tabs .tab-link::after {
      content: attr(data-short);
      font-size: 14px;
      display: inline-block;
    }
  
    /* If you have icons inside the button, re-enable their size */
    .tabs .tab-link .material-icons,
    .tabs .tab-link .material-symbols-outlined,
    .tabs .tab-link i,
    .tabs .tab-link svg {
      font-size: 18px !important;
      margin-right: 6px;
    }

    .settings-container h2 {
        font-size: 16px !important;
    }

    .options-container-data{
        flex-direction: column;
    }

    .modal-footer button{
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 14px !important;
        max-width: 100% !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        width: 100% !important;
    }

    #nextStepBtn{
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 14px !important;
        max-width: 100% !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    
    }
    #nextStepBtn{
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 14px !important;
        max-width: 100% !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        width: 100% !important;
     
    }

    .account-row .col-md-4{
        width: auto !important;
    }

    #cancelImportBtn{
        margin-right: 0px !important;
    }

    #prevStepBtn{
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 14px !important;
        width: 100% !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;

    }

    #universal-import-modal{
      
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;



    }

    .button-group-primary{
        width: 100% !important;
        display: flex
        ;
            gap: 4px;
  
            /* justify-content: flex-end; */
            flex-direction: column;
    }

    .button-group-primary button{
        width: 100% !important;
    }

    .modal-dialog{
    margin-left: auto !important;
    margin-right: auto !important;

    }

    .modal-footer{
        display: flex;
        flex-direction: column;

    }
        
    
    
  }
  
  @media (max-width: 521px) {

    .main-content{
        padding: 32px !important;
    }
    #login-container .nav-link{
        width: 100%;
    }

    #login-container .nav-item{
        width: 50%;
        display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    }

    .data-option {
        width: 100% !important;
    }
    .account-row .col-md-4{
        width: 100% !important;
    }

    .account-option{
        max-width: 100% !important;
    }

}

@media (max-width: 574px) {
    .tabHeader{
        flex-direction: column;
        gap: 8px;
    }

    .settings-container .form-actions {
        display: flex
    ;
        gap: 4px;
        width: 100%;
    }

    .settings-container .form-actions button{
        width: 100% !important;
    }

    .profile-avatar-container{
        flex-direction: column;
    }

    .company-logo-wrapper {
        display: flex
    ;
        align-items: center;
        gap: 20px;
        flex-direction: column;
    }

    .tabs { display: none !important; }
    .tabs-dropdown { display: block; }
    .tabs-wrap{
        width: 100% !important;
      }
    
      .tabs-dropdown{
        width: 100% !important;
      }
      .household-member-card{
        padding: 16px !important;
      }

      .card-left{
        display: none !important;
      }

      .household-members-container{
        flex-direction: column !important;
      }

      .monthlyDistCell{
        display: none !important;
      }
      .monthly-dist-cell{
        display: none !important;
      }
      .updated-cell{
        display: none !important;
      }

      .updatedCell{
        display: none !important;
      }

      #accounts-table td{
        width: 25% !important;
        max-width: none !important;
        
      }
      #accounts-table th{
        width: 25% ;
        max-width: none !important;
      }

      .total-cell{
        width: 65% !important;
      }


  }


  
  /* Optional a11y helper if you used the label above */
  .visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
      .summary-more-button{
        display: none !important;
      }

      .summary-sub-header{
        font-size: 14px !important;
      }

    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; border: 0; padding: 0; margin: -1px;
  }

@media (max-width: 500px) {
    .notes-td{
        display: none !important;

    }

    .notes-th{
        display: none;

    }

    .icon-td{
        display: none !important;
    }

    .icon-head-va{
        display: none !important;
    }


    #savedValueAddsTable th{
        width: 33% !important;
    }
    #savedValueAddsTable td{
        width: 33% !important;
    }

    .main-content{
        padding: 16px !important;
    }
    
    

}

@media (max-width: 466px) {

    .accountNumberCell{
        display: none !important;
    }

    .account-number-cell{
        display: none !important;
    }

    .households-controls {
        height: auto !important;
        flex-direction: column !important;
    }

    .households-controls .search-bar-container{
        width: 100% !important;
    }

    .households-controls .search-bar-container input{
        width: 100% !important;
    }

    .households-controls button{
        width: 100% !important;
        margin-top: 8px !important;
    }

    .inputTh{
        display: none !important;
    }

    #households-table .inputTh{
   
            display: block !important;
     

    }

    .total-cell {
        width: 50% !important;
    }

    .pagination-container{
        flex-direction: column-reverse;
    }

    .typeCell{
        display: none !important;
    }
    .type-cell{
        display: none !important;
    }
    .liability-type-cell{
        display: none !important;
    }

    .liabilities th{
        width: 25% !important;
    }

    .liabilities td{
        width: 25% !important;
    }

    .liabilities .balance-cell{
        width: 50% !important;
    }

    .insurance th{
        width: 33% !important;
    }

    .insurance td{
        width: 33% !important;
    }

    .insurance .period-cell {
        width: 33% !important;
    }



}

/* Default: show tabs, hide dropdown */
.tabs-dropdown { display: none; }

/* Swap at 574px and below */
@media (max-width: 574px) {
  .tabs { display: none; }
  .tabs-dropdown { display: block; }
}

/* A11y helper */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}



#progress-container .tab-pane { 
    display: none !important;          /* beat Bootstrap's .tab-pane.active { display:block } */
  }
  #progress-container .tab-pane.pc-active {
    display: block !important;
    opacity: 100;
  }
  
    
  @media (max-width: 675px) {

    .selectionText {
        display: flex !important;
        gap: 4px !important;
        flex-direction: column !important;
}
.selection-container.visible {
    padding: 10px 14px 105px !important;
}


  }

  @media (max-width: 340px) {
    .pageHeaderSection{
        flex-direction: column;
        gap: 8px;
    }

    .pageHeaderSection button{
        width: 100% !important;
    }

    .pageHeaderSection .btn{
        width: 100% !important;
    }

    .pageHeaderSection .btn-group{
        width: 100% !important;
    }

    .selection-actions{
        flex-direction: column;
    }

    .selection-container.visible {
        padding: 10px 14px 153px !important;
    }

    .selection-actions a {
        margin-right: 0px !important;
    }

  }

  @media (max-width: 320px) {
    .selection-container.visible {
        padding: 10px 14px 165px !important;
    }


  }

/* Ensure this CSS is loaded after Bootstrap's CSS */

/* Quick pop-in animation for modal appearance (scale and opacity) */
.modal.fade .modal-dialog {
    opacity: 0;
    transform: scale(0.95); /* Start slightly smaller for subtle pop */
    transition: opacity 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Final state when modal is shown */
.modal.fade.show .modal-dialog {
    opacity: 1;
    transform: scale(1); /* Full size */
}

/* Ensure modal returns to initial state when hidden */
.modal.fade:not(.show) .modal-dialog {
    opacity: 0;
    transform: scale(0.95);
}

/* Restore Bootstrap’s default modal positioning */
.modal {
    position: fixed; /* Ensure modal stays in viewport */
    top: 50%; /* Bootstrap default vertical centering */
    left: 0;
    right: 0;
    transform: translateY(-50%); /* Center vertically */
    margin: 0 auto; /* Center horizontally */
}

/* Responsive positioning for modal-dialog */
.modal-dialog {
    margin: 0 auto; /* Bootstrap default horizontal centering */
    position: relative; /* Allow top positioning */
    top: 24px; /* Desktop: 40px from top */
}

/* Mobile: Hug the top (10px margin for slight breathing room) */
@media (max-width: 576px) {

    .connected-redtail-container{
       display: none !important;
    }
    .modal-dialog {
        top: 10px; /* Mobile: Close to top edge */
        margin: 0 10px; /* Add small horizontal margin for mobile */
    }
}

/* Quick fade for backdrop */
.modal-backdrop.fade {
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.modal-backdrop.fade.show {
    opacity: 0.5; /* Adjust opacity as needed */
}

/* Optional: Adjust modal content for better visuals */
.modal-content {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    border: none; /* Remove default border for cleaner look */
}



.mapping-tabpanes{
    width: 100%;
}

/* public/css/zoho-mapping.css */
/* Sleek, organized, and readable – scoped to the Zoho Mapping modal */

.mapping-modal { --mm-border: #E5E7EB; --mm-muted: #6B7280; --mm-bg: #F9FAFB; --mm-head: #111827; }
.mapping-modal .modal-content { border-radius: 12px; border: 1px solid var(--mm-border); }
.mapping-modal__header { align-items: center; border-bottom: 1px solid var(--mm-border); }
.mapping-modal__header .modal-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--mm-head); }

.mapping-intro { background: var(--mm-bg); border: 1px solid var(--mm-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }

.mapping-tabs { gap: 6px; }
.mapping-tabs .nav-link {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--mm-border); color: #374151; background: #fff;
  padding: .5rem .75rem; border-radius: 999px; font-weight: 500;
}
.mapping-tabs .nav-link .step-dot {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--mm-border); font-size: 12px; color: #374151; background: #fff;
}
.mapping-tabs .nav-link.active {
  color: #0f766e; border-color: #0f766e33; background: #f0fdfa;
}
.mapping-tabs .nav-link.active .step-dot { border-color: #0f766e; color: #0f766e; background: #ecfeff; }

.mapping-tabpanes .tab-pane { padding-bottom: 4px; }

/* Card sections */
.map-card {
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: #fff;
  padding: 14px 14px 10px;
  margin-bottom: 14px;
}
.map-card__header { margin-bottom: 8px; }
.map-card__title { margin: 0; font-size: 1rem; font-weight: 600; color: #111827; }
.map-card__desc { margin: 4px 0 0; font-size: .875rem; color: var(--mm-muted); }
.map-card__divider { border-top: 1px dashed var(--mm-border); margin: 14px 0; }

/* Keep native Bootstrap spacing/look for inputs; tighten label spacing slightly */
.map-card label.form-label { font-weight: 500; color: #111827; margin-bottom: 6px; }

/* Required asterisk chip */
span.required {
  display: inline-block; margin-left: 6px; font-size: .75rem;
  color: #dc2626; font-weight: 700;
}

/* Tooltips icon alignment */
.mapping-modal .material-symbols-outlined.align-text-bottom { font-size: 18px; vertical-align: -3px; cursor: help; color: #6b7280; }
.mapping-modal .material-symbols-outlined.align-text-bottom:hover { color: #374151; }

/* Dynamic AA rows */
.aa-group .aa-rows > [data-role="aa-row"] {
  border: 1px dashed var(--mm-border); border-radius: 8px; padding: 10px; margin-bottom: 8px;
}
.aa-group .btn.btn-outline-secondary { border-color: #94a3b8; }
.aa-group .btn.btn-outline-danger.btn-sm { padding: .25rem .5rem; }

/* Footer */
.mapping-modal__footer { border-top: 1px solid var(--mm-border); }

/* Small help text tone */
.mapping-modal .form-text.text-muted { color: var(--mm-muted) !important; }

/* Scrollbar nicety inside scrollable dialog */
.modal-dialog-scrollable .modal-body { scrollbar-gutter: stable; }