/*
 * Your global styles here
 */

 html,
 body {
     height: 100%;
 }
 
 h1 {
    font-size: 2.25rem; 
    font-weight: bold !important;
 }  
   
  /* Page headings */
  h2 {
     font-size: 1.5rem;
     font-weight: 400 !important;
  }
   
  /* questions */
  h3 {
     font-size: 1.25rem;
  }
   
  /* responses, search/input Fields */
  h4 {
     font-size: 1rem;
  }
  /* Form Labels */
  label {
     font-size: 1.125rem !important;
     white-space: nowrap; /* keeps label on single line but impacts mobile view */

  }
  /*Chevron Label*/
  header {
    font-family: 'Roboto' !important;    
    font-size: 2.8125rem; /* Converts to 45px if root font size is 16px */
    font-weight: bold !important; 
}

 
  .button-container {
    display: flex;
    gap: 10px; /* Adjust space between buttons */
    justify-content: center; /* Center buttons horizontally */
  
}

.slds-button--brand, .slds-button_brand, lightning-button[variant="brand"]::part(button),
.slds-button--neutral, .slds-button_neutral, lightning-button[variant="neutral"]::part(button) {
    min-width: 165px;
    height: 40px;
    font-size: 1rem !important;
    padding: 10px 20px;
    transition: var(--dxp-c-button-brand-transition) !important;
    flex: 1; /* Ensure both buttons take equal space */
}

.slds-button--neutral, .slds-button_neutral, lightning-button[variant="neutral"]::part(button) {
    background-color: white;
    border: 1px solid #2c598a;
    color: #2c598a;
}
.clearpadding {
    padding: 0px !important;
}

  /* colors */
  .slds-text-color_default {
     color: black;
  
  }
  .slds-text-color_error {
      color: #c23934;
      font-family: "Salesforce Sans";
      margin-top: 2px;
      font-size: 14px;
      line-height: 18px;
      font-weight: 400;
      font-style: normal;

  }
  .slds-c-link-color
  {
      color:blue;
  }
  /*Darths specific styling*/
   /* bold */
.darhts-bold {
    font-weight: bold;
}

.darhts-label{
    font-size: 1.125rem;
}

.mobile-label {
    font-size: 0.8rem;
}
.slds-form-element__help, lightning-alert p {
    font-size: 14px;
}
  
.slds-form-element_address .slds-form-element__row {
    align-items: normal;
}
  
.notification-widget {
    font-family: 'Arial', sans-serif;
    width: 100%;
    /* max-width: 750px;
    min-width: 600px; */
    /* margin: 20px auto; */
    margin-top:20px;
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
    background-color: #EEEEEE; /* Grey background */
    transition: width 0.3s ease;

}

/* .component-wrapper-spacer {
    margin-bottom: 0 !important;
} */

.notification-header {
    background-color: #708AA9; /* Widget Header Background */
    color: #FFFFFF; /* Widget Header Text */
    padding: 15px;
    border-radius: 8px 8px 0 0;
    text-align: center;
    font-size: 1.75em;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.notification-content {
    background: linear-gradient(to bottom, #EEEEEE, #EEEEEE);
    padding: 20px;
    border-radius: 0 0 10px 10px;
    position: relative; /* Ensures shadow positioning */
    font-family:"Roboto";
    min-height:170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center; /* ensures any text aligns centrally too */
}

.responsive-datatable {
    width: 100%;
    height: 100%;
    min-height: 200px;
    transition: width 0.3s ease;
}

/* Adding vertical borders to cells */
.slds-table thead tr th,
.slds-table tbody tr td {
    border-left: 1px solid #d8dde6 !important; /* Adding left border to cells */
    border-right: 1px solid #d8dde6 !important; /* Adding right border to cells */
}

.slds-table thead tr th:first-child,
.slds-table tbody tr td:first-child {
    border-left: none !important; /* Remove left border from the first cell */
}

.slds-table thead tr th:last-child,
.slds-table tbody tr td:last-child {
    border-right: none !important; /* Remove right border from the last cell */
}

/* Styling the header row */
.slds-th__action {
    background-color:#C0CCDB !important; /* Setting background color for header row */
}

.slds-table thead tr th {
    color: #112E51 !important; /* Setting text color with high specificity */
}

/* Allowing text to wrap in table cells */
.slds-truncate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important;
}


/* Setting fixed table size */
.lightning-datatable {
    /* max-width: 400px; */
    /* min-width: 580px; */
    /* max-height: 400px; */
    width: 100%; /* Adjust to your desired fixed width */
}


.slds-table td, .slds-table th{
    padding: .25rem .5rem;
    white-space: normal !important;
    position: relative;

}

.lightning-datatable .wrap-text {
    white-space: normal !important;
    white-space-collapse: collapse !important;
    text-wrap-mode: wrap !important;    
    word-wrap: break-word !important;
    
}
slds-scrollable--x, .slds-scrollable_x {
     overflow-x: hidden !important; 
}


.slds-radio__label {
  white-space: normal !important;
  display: block !important;
  width: 95%;
  text-indent: -25px;
  padding-left: 20px;
}

.slds-checkbox__label {
  white-space: normal !important;
  display: block !important;
  width: 95%;
  text-indent: -25px;
  padding-left: 20px;
}

.slds-m-left--medium, .slds-m-left_medium {
    padding-top: 9px !important;
}


/* Ensure the button column content is centered */
.slds-table tbody tr td[data-label="Navigation"] {
    text-align: center;
    vertical-align: middle;
}

/* Ensure buttons inside the cells are centered */
.slds-table tbody tr td[data-label="Navigation"] lightning-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fine-tune button size */

slds-table tbody tr td[data-label="Navigation"] .slds-button {
    border-radius: 6px;
    border-color: #2c598a;
    min-width: 165px;
    height: 40px;
    font-size: 1rem !important;
    padding: 10px 20px !important;
    transition: var(--dxp-c-button-brand-transition) !important;
    flex: 1;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.primary-widget .notification-header h2{
    font-weight: bold !important;
    font-size: 2.75rem !important;
    font-weight: bold !important;
    margin: 0;
    text-align: center;
}

.primary-widget .notification-header{
    border-radius: 0.5rem;
    font-size: 2.25rem !important;
    font-weight: bold !important;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: none;      
}

.secondary-widget .notification-header {
    background-color: #C0CCDB;
    padding: 1rem;
    color: #112E51;
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: 1px solid #d8dde6;
}

.secondary-widget .notification-header h2 {
    color: #112E51;
    font-weight: bold !important;
    font-size: 1.75rem !important;
    margin: 0;
    text-align: center;
}

.secondary-widget lightning-button {
    --slds-c-button-brand-color-background: white;
    --slds-c-button-brand-text-color: #0176d3;
}


.custom-textarea {
    --sds-c-textarea-sizing-min-height: 150px; /* Set your desired minimum height */
}

.required-field::before{
    content:'*';
    color:red;
    float: left;
    margin-right: 4px;
}

.slds-spinner_container{
  background-color: rgba(255, 255, 255, 0.75);
}

.alert{
    color: #A30000;
}

.alert-container {
    display: flex;
    align-items: center;
    text-align: left;
    line-height: 1.0; /* tighter line spacing */
}

.alert-text {
    color: #A30000;
    font-weight: bold !important;
}


/* Android */
@media screen and (max-width: 376px) {
    .slds-button--brand, .slds-button_brand, lightning-button[variant="brand"]::part(button),
    .slds-button--neutral, .slds-button_neutral, lightning-button[variant="neutral"]::part(button) {
        min-width: auto;
        padding: 0rem 1rem;
        height:auto;
    }
    label {
        white-space: normal;
    }
    
    h1 {
       font-size: 1.5rem; 
    }  
    
    /* Page headings */
    h2 {
        font-size: 1.25rem;
    }
    
    /* questions */
    h3 {
        font-size: 1rem;
    }
    
    /* responses, search/input Fields */
    h4 {
        font-size: 1rem;
    }
    /*Chevron Label*/
    header {
        font-size: 2.25rem; /* Converts to 45px if root font size is 16px */
    }

    .slds-popover_tooltip{
        width: 80%;
    }
}

/* iPhones */
@media screen and (max-width: 391px) {
    .slds-button--brand, .slds-button_brand, lightning-button[variant="brand"]::part(button),
    .slds-button--neutral, .slds-button_neutral, lightning-button[variant="neutral"]::part(button) {
        min-width: auto;
        padding: 0rem 1rem;
        height:auto;
    }
    label {
        white-space: normal;
    }
    
    h1 {
       font-size: 1.5rem; 
    }  
    
    /* Page headings */
    h2 {
        font-size: 1.25rem;
    }
    
    /* questions */
    h3 {
        font-size: 1rem;
    }
    
    /* responses, search/input Fields */
    h4 {
        font-size: 1rem;
    }
    /*Chevron Label*/
    header {
        font-size: 2.25rem; /* Converts to 45px if root font size is 16px */
    }

    .slds-popover_tooltip{
        width: 80%;
    }
}

/* Tablets */
@media (max-width: 769px) {
    .container {
        flex-direction: column;
        gap: 10px;
    }

    .notification-widget {
        flex: 1 1 110%;
    }
    
    h1 {
       font-size: 1.5rem; 
    }  
    
    /* Page headings */
    h2 {
        font-size: 1.25rem;
    }
    
    /* questions */
    h3 {
        font-size: 1rem;
    }
    
    /* responses, search/input Fields */
    h4 {
        font-size: 1rem;
    }
    /*Chevron Label*/
    header {
        font-size: 2.25rem; /* Converts to 45px if root font size is 16px */
    }
}

/* Laptop */
@media screen and (max-width: 993px) {
}

/* Desktop */
@media (max-width: 1025px) {
    .container {
        gap: 15px;
    }

    .notification-widget {
        flex: 1 1 calc(50% - 20px);
    }

    .responsive-datatable {
        min-height: 200px;
    }

    
}