/* Global Theme Settings */
@font-face {
  font-family: 'Inter';
  src: url("../theme/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url("../theme/fonts/Inter-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

:root {
  --bs-body-bg: #F5F5F5;
  --bs-body-color: #212121;
  --bs-primary: #212121;
  --bs-secondary: #1D89FF;
  --bs-success: #1D89FF;
  --bs-font-monospace: 'Inter', sans-serif;
  --bs-font-sans-serif: 'Inter', sans-serif;
  --bs-heading-font: 'Inter', sans-serif;
  --bs-font-size:small;
  --bs-blue: #0d6efd;
}

/* General Body and Text */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-font-sans-serif);
  margin: 0;
  padding: 0;
}

hr{
    margin: 1rem 0;
    color: var(--bs-primary);
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
}


.shiny-input-container>div>select:not(.selectized) {
  font-size: var(--bs-font-size);
}

/* Base button styling */
  /* Inactive buttons: Light background, darker text */
 .radio-group-buttons.shiny-bound-input .btn {
      background: #F5F5F5 !important; /* Light gray */
      color: #0A4DA2 !important; /* Dark blue text */
      font-size: small;
      padding: 8px 16px;
      border: none; /* No internal button borders */
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      text-align: center;
  }

  /* Hover effect for inactive buttons */
  .radio-group-buttons.shiny-bound-input .btn:hover {
      background: #E0E0E0 !important; /* Slightly darker gray */
  }

  /* Active (selected) button: Original blue gradient */
  .radio-group-buttons.shiny-bound-input input[type='radio']:checked + .btn,
  .radio-group-buttons.shiny-bound-input input[type='checkbox']:checked + .btn {
      background: linear-gradient(135deg, #1D89FF, #0A4DA2) !important;
      color: #F5F5F5 !important; /* White text */
      text-decoration: underline;
  }

  /* Add subtle border around the entire button group */
  .radio-group-buttons.shiny-bound-input {
      border: 1px solid #E0E0E0 !important; /* Light gray outer border */
      border-radius: 8px; /* Rounded corners for smooth look */
      padding: 4px; /* Space between border and buttons */
      display: inline-block;
  }

  /* Remove internal spacing to avoid inner button borders */
  .radio-group-buttons.shiny-bound-input .btn-group {
      margin: -1px; /* Ensures buttons stay snug */
  }
  
  /* this is to override how the drop down looks on the mobile.*/
  .shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.saveflyrbtn {
            background: linear-gradient(135deg, #0A4DA2, #1D89FF);
            color: #F5F5F5;
            font-size: small;
            padding: 8px 16px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            display: inline-block;
            text-align: center;
            text-decoration: none;
        }

.saveflyrbtn:hover {
            filter: brightness(1.1);
        }
        
/*Drop downs        
/* Dropdown Styling */
.shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input {
    background: #F5F5F5 !important; /* Light gray background */
    color: #0A4DA2 !important; /* Dark blue text */
    font-size: small;
    padding: 8px 12px;
    border: 1px solid #D0D0D0 !important; /* Keep border fixed */
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover effect */
.shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input:hover {
    background: #E0E0E0 !important; /* Slightly darker gray */
}

/* Focus effect: No border expansion, only subtle scaling */
.shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input:focus {
    background: #FFFFFF !important;
    border: 1px solid #1D89FF !important; /* Keep border width constant */
    box-shadow: 0px 0px 3px rgba(29, 137, 255, 0.3); /* Softer blue glow */
}

/* Dropdown options allow wrapping */
.shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input option {
    background: #F5F5F5 !important;
    color: #0A4DA2 !important;
    white-space: normal !important; /* Allow text wrapping */
    word-wrap: break-word;
}

/* Hover effect for dropdown options */
.shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input option:hover {
    background: #E0E0E0 !important;
    color: #0A4DA2 !important;
}

/* Keep selected option visible */
.shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input option:checked {
    background: #1D89FF !important;
    color: #F5F5F5 !important;
}

/* Prevent dropdown from overflowing on mobile */
@media (max-width: 768px) {
    .shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input {
        max-width: 100%;
        width: 100% !important;
    }
}

/* 🌟 Smooth Scrollbar Styling 🌟 */
.shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input::-webkit-scrollbar {
    width: 6px;
}

.shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 8px;
}

.shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input::-webkit-scrollbar-thumb {
    background: #1D89FF;
    border-radius: 8px;
}

.shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input::-webkit-scrollbar-thumb:hover {
    background: #0A4DA2;
}

/* Firefox scrollbar */
.shiny-input-select.form-control.shinyjs-resettable.shiny-bound-input {
    scrollbar-width: thin;
    scrollbar-color: #1D89FF #F5F5F5;
}

/*for the feature images data table */

#featured_images_table {
  background-color: transparent !important;
}

#featured_images_table table.dataTable tbody tr {
  background-color: transparent !important;
}

#featured_images_table tbody td.highlighted-cell {
  border: 1px solid #1D89FF !important; /* Blue border */
  background-color: rgba(0, 123, 255, 0.2) !important; /* Light blue background */
}


#featured_images_table table {
  width: 100% !important;
}

#featured_images_table td {
  text-align: center !important;
  vertical-align: middle !important;
  background-color: transparent !important;
}

#featured_images_table th {
  background-color: transparent !important;
}

#featured_images_table img {
  max-width: 200px;
  height: auto;
  display: block;
  margin: auto;
}
        
.card-header {
  /*background: var(--bs-body-bg);*/
  background: linear-gradient(135deg, #EBF2FA 0%, #D7E3FC 30%, #B0C4EE 60%, #8BA8E0 85%, #5E89C5 100%);
  animation: gradientshift 30s infinite ease-in-out;
  transition: all 10s ease-in-out;
  background-size: 400% 400%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bs-heading-font);
}

/* Link Styles */
a {
  color: var(--bs-primary);
  text-decoration: none;
}

a:hover {
  color: var(--bs-secondary);
}

/* Navbar Styles */
.navbar-brand {
  font-size: medium;
}
.navbar {
  background-color: #F5F5F5;
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--bs-primary);
}

.navbar a {
  color: var(--bs-body-color);
}

.navbar a:hover {
  color: var(--bs-secondary);
}

.navbar-toggler {
  border-color: var(--bs-primary);
}

.navbar-toggler-icon {
  background-color: var(--bs-primary);
}



.bslib-sidebar-layout > .sidebar {
  background-color: transparent !important;
  box-shadow: none; /* Remove any shadow if applicable */
  border-right: none; /* Remove any border if applicable */
}

.bslib-sidebar-layout > .main {
    padding: var(--_padding);  /* Default padding */
}

@media (max-width: 768px) {  /* For mobile devices */
    .bslib-sidebar-layout > .main {
        padding: 10px;
    }
}

/* Sidebar Styles */
.page-sidebar {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  padding: 20px;
  border-right: 2px solid var(--bs-primary);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 250px;
  z-index: 1040;
  display: none; /* Initially hidden */
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
}

/* Sidebar Header */
.page-sidebar .sidebar-header {
  font-family: var(--bs-font-monospace);
  font-weight: bold;
  font-size: 20px;
  color: var(--bs-primary);
  margin-bottom: 20px;
}

/* Sidebar Menu Links */
.page-sidebar .sidebar-menu a {
  display: block;
  padding: 10px 15px;
  color: var(--bs-body-color);
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  border-bottom: 1px solid var(--bs-primary);
}

.page-sidebar .sidebar-menu a:hover {
  background-color: var(--bs-primary);
  color: var(--bs-body-bg);
}

/* Sidebar Buttons */
.page-sidebar .sidebar-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 30px;
}

.page-sidebar .sidebar-buttons .btn-primary {
  width: 100%;
  padding: 10px;
  background-color: var(--bs-primary);
  color: var(--bs-body-bg);
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  border: none;
  cursor: pointer;
}

.page-sidebar .sidebar-buttons .btn-primary:hover {
  background-color: var(--bs-secondary);
  color: var(--bs-body-bg);
}

/* Sidebar Controls */
.page-sidebar .sidebar-controls {
  position: absolute;
  top: 10px;
  right: -50px;
  z-index: 1100;/* Ensured sidebar controls remain on top */
  background-color: var(--bs-primary);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.page-sidebar .sidebar-controls:hover {
  background-color: var(--bs-secondary);
}

/* Sidebar active state (when opened) */
.page-sidebar.open {
  display: block;
}

/* Mobile Adaptation for Sidebar */
@media screen and (max-width: 768px) {
  .page-sidebar {
    width: 100%;
    display: flex;
    flex-direction: column-reverse; /* Moves sidebar to the bottom */
    height: auto;
  }

  .page-sidebar .sidebar-header {
    font-size: 18px;
  }

  .page-sidebar .sidebar-menu a {
    padding: 10px 20px;
    font-size: 14px;
  }

  .page-sidebar .sidebar-buttons .btn-primary {
    font-size: 14px;
    padding: 12px;
  }

  /* Ensures the sidebar stays at the bottom */
  .sidebar {
    order: 2;
    width: 100%;
  }

  /* Ensures main content stays at the top */
  #social_dapr_how_it_works_main_div {
    order: 1;
  }
}

/* Mobile Sidebar Controls */
@media screen and (max-width: 768px) {
  .page-sidebar .sidebar-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    top: 20px;
    right: 10px;
  }
}

/* Tab Panels */
.nav-tabs {
  border-bottom: 2px solid var(--bs-primary);
}

.nav-tabs .nav-item .nav-link {
  color: var(--bs-body-color);
  border: none;
}

.nav-tabs .nav-item .nav-link.active {
  background-color: var(--bs-secondary);
  color: var(--bs-body-bg);
}

.nav-tabs .nav-item .nav-link:hover {
  background-color: var(--bs-primary);
  color: var(--bs-body-bg);
}
.nav-underline {
  font-size: 0.65rem;
}

.navbar-nav .nav-link {
  font-size: 0.65rem; /* Made navbar menu items smaller */
}
/* Accordion Panels */
.accordion-icon {
  font-size: x-small;
  color: var(--bs-body-color);
  font-weight: 900;
  color: #1D89FF;
}
.accordion-title {
  color: var(--bs-body-color);
  font-size: small;
}
.accordion-button {
  background: linear-gradient(135deg, #EBF2FA 0%, #D7E3FC 30%, #B0C4EE 60%, #8BA8E0 85%, #5E89C5 100%);
  background-size: 400% 400%;
  color: var(--bs-body-bg);
  border: none;
  padding:10px;
}

.accordion-button:focus {
  /*box-shadow: 0 0 0 0.25rem rgba(29, 137, 255, 0.25);*/
  outline: none !important;
  box-shadow: none !important; /* Remove any box shadow (if any) */
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, #EBF2FA 0%, #D7E3FC 30%, #B0C4EE 60%, #8BA8E0 85%, #5E89C5 100%);
  background-size: 400% 400%;
  color:   var(--bs-primary);
}

.accordion-body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
    background: linear-gradient(135deg, #EBF2FA 0%, #D7E3FC 30%, #B0C4EE 60%, #8BA8E0 85%, #5E89C5 100%);
    animation: gradientshift 30s infinite ease-in-out;
    transition: all 10s ease-in-out;
    background-size: 400% 400%;
}

/* Slider Input */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: var(--bs-primary);
  border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--bs-secondary);
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]:hover {
  background-color: var(--bs-secondary);
}

/* Custom Style for Control Inputs */
input, select, textarea {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-primary);
  padding: 10px;
  border-radius: 5px;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--bs-success);
  outline: none;
}

/* Button Customization */
.btn-primary {
  background-color: var(--bs-primary);
  color: var(--bs-body-bg);
  border-radius: 5px;
  padding: 10px 20px;
}

.btn-primary:hover {
  background-color: var(--bs-secondary);
}

/* Container */
.container {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Utility Classes */
.text-muted {
  color: var(--bs-body-color) !important;
}

.text-center {
  text-align: center;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

/* Mobile Body Adjustments */
@media screen and (max-width: 768px) {
  .text-center {
    font-size: 18px;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }
}

/* Navbar - Clean and Minimal (Mobile-Friendly) */
/* Navbar - Clean and Minimal (Mobile-Friendly) */
.navbar {
    background: #F5F5F5 !important; /* Subtle off-white background */
    border-bottom: 1px solid #BBD6FF;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
}

/* Navbar Links - Slim & Sleek */
.navbar-nav .nav-link {
    font-weight: 500;
    font-size: 0.85rem;
    color: #1D89FF !important;
    padding: 10px 15px;
    transition: all 0.2s ease-in-out;
}

/* Hover Effect - Soft Blue */
.navbar-nav .nav-link:hover {
    color: #125EC5 !important;
    opacity: 0.8;
}

/* Active Tab - Subtle Indicator */
.navbar-nav .active {
    background: transparent; /* Remove highlight on mobile */
    border-bottom: 2px solid #1D89FF;
    border-radius: 0;
}

/* Mobile-Specific Adjustments */
@media (max-width: 768px) {
    /* Make navbar links stack vertically on mobile */
    .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Align items to flex-end */
        padding: 0;
        margin-right: 10px; /* Add some right padding */
        margin-top: 15px; /* Prevent overlap with hamburger */
    }

    /* Adjust navbar link sizes for better mobile readability */
    .navbar-nav .nav-link {
        font-size: 0.9rem; /* Keep text small */
        padding: 12px 20px;
        width: 100%;
        text-align: right; /* Align text to the right */
        border-radius: 15px; /* Rounded corners for selected items */
    }

    /* Ensure navbar links are spaced out correctly */
    .navbar-nav .nav-link + .nav-link {
        border-top: 1px solid #BBD6FF;
    }

    /* Mobile version of active state: no background highlight */
    .navbar-nav .active {
        background: transparent;
        border-radius: 15px; /* Border radius for active items */
        border-bottom: none;
    }

    /* Mobile dropdown transparency */
    .navbar-nav .dropdown-menu {
        background: transparent !important; /* Make dropdown transparent */
        border: none; /* Remove dropdown border */
        margin-top: 15px; /* Prevent overlap with hamburger icon */
    }

    /* Adjust dropdown items for smaller text size and alignment */
    .navbar-nav .dropdown-item {
        font-size: 0.8rem; /* Smaller text for dropdown items */
        color: #1D89FF;
        padding: 8px 15px;
    }

    /* Mobile version of navbar toggler button */
    .navbar-toggler {
        border-color: #1D89FF;
    }
}



/* Navbar Customization */
.navbar-custom {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link {
  color: var(--bs-body-color);
}

.navbar-custom .navbar-toggler {
  border-color: var(--bs-primary);
}

.navbar-custom .navbar-toggler-icon {
  background-color: var(--bs-primary);
}

.navbar-toggler, .navbar-toggle {
  background-color:transparent;
}

/* Main content area */
.container h1, .container h2, .container h3 {
  font-family: var(--bs-heading-font);
  color: var(--bs-primary);
}