/* Core styles and imports */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

@import 'components/accordion.css';
@import 'components/buttons.css';
@import 'components/card.css';
@import 'components/forms.css';
@import 'components/formsets.css';
@import 'components/help.css';
@import 'components/landing_page.css';
@import 'components/menu.css';
@import 'components/navbar.css';
@import 'components/table.css';
@import 'components/dropdown.css';
@import 'components/tabs.css';
@import 'components/legal.css';

@import 'partials/footer.css';

/* Colors */
:root {
  --flexup-dark-blue: #1F3F5F;
  --flexup-light-blue: #2a5c8e;
  --flexup-green: #70AD47;
  --flexup-light-green: #8DC578;
  --flexup-very-light-green: #aaddaa;
  --flexup-red: #dc3545;
  --flexup-orange: #ED7D31;
  --flexup-light-blue: #5B9BD5;
  /* background colors */
  --light-blue: #d7e1f0;
  --very-light-blue: #ebebf5;
  --ultra-light-blue: #f5f5fa;
  --light-red: #f28b91;
  --gray: #ccc;
  --light-gray: #ddd;
  --very-light-gray: #f5f5f5;
  --ultra-light-gray: #fafafa;
  /* Environment band colors */
  --demo: #f3e7cf;
  --sandbox: #9fcbf0;
}

.dropdown-item{
  cursor: pointer;
}

.text-success {
  color: var(--flexup-green) !important;
}
.text-danger {
  color: var(--flexup-red) !important;
}

.colored-background {
  color: var(--flexup-dark-blue);
}


p + ul, p + ol {
  margin-top: -1em;
  /* Reduce top margin of lists */
}

/* Fonts & Emojis */

/* Default Font for Body */
body {
    font-family: 'Open Sans', 'Inter', sans-serif;
    overflow-x: hidden;
}

/* Define Custom Emoji Font */
/* @font-face {
    font-family: 'FlexUpEmojiFont';
    src: url('/static/font/flexup_emoji.otf') format('truetype');
} */


/* Emoji Handling */
.emoji {
    /* font-family: 'FlexUpEmojiFont', 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol', sans-serif; */
    font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Symbol', sans-serif;
}



/* Typography */
html,
body {
  color: var(--flexup-dark-blue);
  scroll-padding-top: 100px; /* Adjust to match your header height or desired offset */
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 1.1rem;
  text-decoration: underline;
  font-weight: normal !important;
}

h4 {
  font-size: 1rem;
  text-decoration: underline;
  font-weight: normal !important;
}

.breadcrumb {
  font-size: 0.9rem;
}

h1,
h2 {
  font-weight: bold;
}

/* Responsive typography adjustments */
@media (max-width: 576px) {
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.2rem;
  }
  h3 {
    font-size: 1rem;
  }
}

/* Media */

/* Extra small devices (phones, below 576px) */
/* Default for mobile */

#mainContent.hidden { margin-left: 0; }
#mainContent.mini { margin-left: 48px; }
#mainContent.full { margin-left: 200px; }

.mainContent {
  padding-top: 80px; /* Adjust this value to match your navbar's height */
  transition: margin-left 0.3s ease-in-out; /* Added for smooth transition with sidebar */
}


/***** Styling page title *****/

.detail-title-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 0.5rem;
}

.detail-title-content {
    display: flex;
    align-items: center;
}

.detail-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
    align-self: flex-end;
}

.edit-button-container {
    margin-left: auto;
}

/* Medium screens and up (768px+) */
@media (min-width: 768px) {
    .detail-title-container {
        flex-direction: row;
        align-items: center;
    }
    
    .detail-buttons {
        align-self: center;
    }
}


/* Small screens (below md breakpoint) */
@media (max-width: 767.98px) {
  #mainContent.hidden,
  #mainContent.full {
    margin-left: 0 !important; /* Override any other margin settings */
  }
  
  #mainContent.mini {
      margin-left: 48px;
    }
    
  /* .left-menu.full { */
    /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
  /* } */
}

/* Medium screens and up */
@media (min-width: 768px) {
  #mainContent.hidden { margin-left: 0; }
  #mainContent.mini { margin-left: 48px; }
  #mainContent.full { margin-left: 200px; }
}


/* Small screens (<576px) */
@media (max-width: 575.98px) {
  /* Hide mini menu option completely */
  .left-menu.mini {
    width: 0;
    padding: 0;
  }
  
  /* Full menu overlays content */
  .left-menu.full {
    width: 250px;
    /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
  }
  
  /* #mainContent {
    padding: 1rem;
  } */
  /* No margin changes for main content */
  #mainContent.hidden,
  #mainContent.mini,
  #mainContent.full {
    margin-left: 0 !important;
  }
}

/* Medium screens (576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .left-menu.mini {
    width: 48px;
  }
  
  .left-menu.mini:hover {
    width: 250px;
    /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
  }
  
  .left-menu.full {
    width: 250px;
    /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
  }
  
  #mainContent.mini {
    margin-left: 48px;
  }
  
  #mainContent.full {
    margin-left: 0;
  }
}

/* Large screens (≥768px) */
@media (min-width: 768px) {
  .left-menu.mini {
    width: 48px;
  }
  
  .left-menu.mini:hover {
    width: 250px;
    /* box-shadow: 2px 0 5px rgba(0,0,0,0.1); */
  }
  
  .left-menu.full {
    width: 250px;
  }
  
  #mainContent.mini {
    margin-left: 48px;
  }
  
  #mainContent.full {
    margin-left: 250px;
  }
}

/* Bootstrap override */

.bg-dark {
  background-color: var(--flexup-dark-blue) !important;
  color: white;
}

.bg-light-gray {
  background-color: var(--very-light-gray) !important;
  /* color: var(--flexup-dark-blue); */

}

/* Sections & Blocks 
This is only used in development mode*/

/* div,
section,
main,
body,
header,
footer,
form {
  border: 0.5px solid rgba(194, 2, 252, 0.2) !important;
  background-color: rgba(129, 35, 252, 0.03) !important;
} */


/* Fix for full-width sections on small screens */
@media (max-width: 799px) {
  body {
    max-width: 100%;
  }
  
  .full-width-bg {
    width: 100%;
    max-width: 100%;
  }

  #heroCarousel {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  #heroCarousel .carousel-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

.bg-grey {
  background-color: #6c757d !important;
  color: white !important;
}

.bg-green {
  background-color: #008000 !important;
  color: white !important;
}

.bg-green-very-light {
  background-color: var(--flexup-very-light-green) !important;
  color: var(--flexup-dark-blue);
}

.bg-red {
  background-color: #ef233c !important;
  color: white !important;
}

.bg-yellow {
  background-color: #ffb700 !important;
  color: white !important;
}

.bg-orange {
  background-color: #ff7b00 !important;
  color: white !important;
}

.bg-blue {
  background-color: #219ebc !important;
  color: white !important;
}

.bg-blue-dark {
  background-color: #005f73 !important;
  color: white !important;
}

.bg-blue-very-dark {
  background-color: var(--flexup-dark-blue) !important;
  color: white !important;
}

.bg-blue-light {
  background-color: #2a5c8e !important;
  color: white !important;
}

.db-color{
  color: var(--flexup-dark-blue);
}
.db-color-bg{
  background-color:  var(--flexup-dark-blue);
}
.db-color-border{
  border:  var(--flexup-dark-blue);
}