/* Common styles shared across the application */

html, body {
  height: 100%;
  margin: 0;
  background-color: #141414 !important;
  font-family: Arial, sans-serif;

}
.text-white {
  color: white;     
}

.control-group {
    margin: 20px 0;
}
.navbar {
  background-color: #141414 !important;
  padding: 12px 24px;
}

.navbar .nav-link {
  color: white !important;
  margin-right: 20px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

.navbar .nav-link-bold {
  font-family: 'Inter', sans-serif;
  font-weight: 600; /* bold only for this class */
  color: white !important;
}

.navbar .nav-link:hover {
  text-decoration: underline;
}

.navbar.custom-padding {
  padding-left: 50px;
  padding-right: 50px;
  
}

.btn-login {
  background: none;
  border: none;
  color: white;
  padding: 6px 12px;
  font-weight: 500;
  cursor: pointer;
}

.btn-login:hover {
  text-decoration: underline;
  background-color: transparent;
}

.btn-signup {
  background-color: #3861FB;
  color: white;
  border-radius: 6px;
  padding: 6px 16px;
  font-weight: 500;
  border: none;
  transition: background-color 0.2s ease;
  height: 42px;
}

.btn-signup:hover {
  background-color: #2f55d4;
}

.logo-img {
  height: 20px;  
  width: auto;   
  display: block;
  margin-right: 36px;
}

.filter-header-container {
  padding-left: 50px;
  padding-right: 50px;
}

.tag-bar {
  flex: 1 1 auto;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tag-bar::-webkit-scrollbar {
  display: none; /* hide scrollbar Chrome/Safari */
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 0px 12px;
  height: 44px;
  background-color: #222222;
  color: #ffffff;
  border: 1px solid #333333;
  font-family: 'Inter', sans-serif;
  font-weight:600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.tag-pill:hover {
  background-color: #333333;
}

.tag-pill.active {
  background-color: #E8E8E8;
  color: #161616;
}

.tag-pill.active .tag-icon {
  color: #161616;
}

.tag-icon {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  color: #CFD6E4;
  font-size: 18px;
  min-width: 20px;
  text-align: center;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  transition: color 0.3s ease;
}

.tag-scroll-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #141414;
  padding: 10px 0px;
  overflow: hidden;
  width:100%;
}

.scroll-arrow {
  visibility: visible;
  background-color: #222222;
  color: #ffffff;
  border: none;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  display: flex;
}

.scroll-arrow:hover {
  background-color: #333333;
}

.scroll-arrow .material-symbols-outlined {
  font-size: 20px;
}

.header-title{
  color:white;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  padding-bottom: 20px; 
}

.container-fluid.table-section {
  padding-left: 60px;
  padding-right: 60px;
}

/* === Search Bar === */
.search-bar {
  background-color: transparent !important; /* No fill */
  border: 1px solid #313131 !important; /* Stroke color */
  height: 48px !important;
  width: 800px !important;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.search-bar .input-group-text {
  background-color: transparent !important; /* Remove fill */
  border: none !important;
}

.search-bar .material-symbols-outlined {
  color: #F0F0F0 !important; /* Icon color */
}

.search-bar .form-control {
  background-color: transparent !important; /* No fill */
  border: none !important;
  color: #F0F0F0 !important;
  height: 100% !important;
  padding-left: 8px;
  font-family: 'Inter', sans-serif;
}

.search-bar .form-control::placeholder {
  color: #bbb !important;
}

/* === Filter Button === */
.filter-btn {
  background-color: #1E1E20 !important;
  border-radius: 6px !important;
  height: 48px !important; /* Match search bar */
  padding: 0 16px !important;
  border: none !important;
  color: #F0F0F0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 8px;
  
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

.filter-btn .material-symbols-outlined {
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  font-size: 22px;
}

/* === Clear Button === */
.clear-btn {
  height: 48px !important; /* Match search bar */
  border: none !important;
  color: #F0F0F0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 8px;
  margin-left: auto;  
}

.clear-btn .material-symbols-outlined {
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  font-size: 22px;
}

.clear-btn:hover 
{
  /* Color change when mouse is over the button */
 background-color: #222222 !important;
}

/* === Reset Button === */
.reset-btn {
  height: 48px !important; /* Match search bar */
  border: none !important;
  color: #F0F0F0 !important;  
  cursor: pointer; 
}

.reset-btn .material-symbols-outlined {
  margin: 0;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
  font-size: 22px;
}

.reset-btn:hover 
{
 background-color: #222222 !important;
}

/* === Cards Grid === */
.cards-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(320px, 480px)); */
  grid-template-columns: repeat(3, 1fr);
  gap:20px; 
  justify-content: center;
  align-content: center;
}

.table-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 0 10px;
  height: 32px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  background-color: #222222;
  border: 1px solid #333333;
  color: #ffffff;
}

.table-tag .tag-icon {
  font-size: 16px;
  margin-right: 6px;
  color: #CFD6E4;
}

.divider {
  height: 1px;
  background-color: #343438;
  margin: 8px 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's on top */            
}

.modal-content {
  background-color: #ffffff !important;
  padding: 2.5rem; /* Increased padding */
  border-radius: 1rem; /* More rounded corners */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Stronger shadow */
  max-width: 90%; /* Responsive width */
  width: 450px; /* Max width for larger screens */
  text-align: center; /* Center text within the modal */
  transform: translateY(-20px); /* Slight lift animation */
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 1 !important; /* Start hidden for animation */
  z-index: 10001;
}

.modal-backdrop.show .modal-content {
  transform: translateY(0);
  opacity: 1;
  color: black;
  background-color: #ffffff;
}

.modal-backdrop.hidden {
  display: none;
}      

.dropdown {
  position: relative; 
  display: inline-block; 
}

.dropbtn {
  color: white;
  padding: 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #dfdbdb;
  border-radius: 8px;
  overflow: hidden;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; 
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none; 
  display: block; 
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}  

.container {
  position: relative; 
  width: 12px; 
  height: 12px;
}

.top-right-span {
  position: absolute; 
  top: 0; 
  right: 0; 
  padding: 5px;
}

.pill-dropdown-container label {
  margin-bottom: 5px; 
}

.pill-dropdown-container
{
  display: flex;
  flex-direction: column; /* Stacks children vertically */
  margin-bottom: 15px; 
}

.pill-select 
{
  /* Basic styling */
  width: 200px;
  padding: 12px 20px;
  font-size: 14px;
  color: white;
  background-color: black;        
  /* Pill shape and shadow */
  border-radius: 50px; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);        
  /* Hide the default arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;      
}

/* Create a custom arrow using a pseudo-element */
.pill-dropdown-container::after {
 /* content: '▼'; */
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: #888;
  font-size: 12px;
  pointer-events: none; /* Allows clicks to pass through to the select element */
}

/* Focus state */
.pill-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.clickable-span {
  cursor: pointer;
  color: blue; /* Make it look like a link */
}

.button-container-grid {
  display: grid;  
  grid-template-columns: repeat(3, auto); 
  justify-content: center; /* Centers the grid within the div */
}

.left-div {
  width: 55%;
  padding: 15px;
}

.right-div {
  width: 45%;
  padding: 15px;
}

.filter_container {
  display: flex; /* Key: Enables the Flexbox layout */
  /* Optional: Aligns content vertically in the center */
  align-items: flex-start; 
  /* Optional: Sets a width for visualization */
  width: 100%;
  padding: 10px;
}

.empty-cards-div {
    margin-top: 100px;
    text-align: center;
}

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

.message-container 
{
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: 10px;
  border-radius: 4px;
}