body {
  /* background: #2b3a4e; */
  background: linear-gradient(135deg, #63d0e3 0%, #9680ed 100%);
  background-attachment: fixed; /* Keeps gradient fixed during scroll */
  color: #f8f9fa; /* Light default text color */
  margin-top: 4rem; /* Keep for fixed navbar */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Example modern font */
}

@media (min-width: 768px) { /* md breakpoint and up */
  body {
    background-attachment: fixed; /* ADD: Apply fixed attachment only for larger screens */
  }
}


.input-narrow {
  display: flex;
}

.input-narrow .form-control {
  flex-grow: 1;
  /* makes the input field take up the remaining space */
  margin-right: 20px;
}

.bg-steel {
  /* background-color: #5f788a; */
  background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
  backdrop-filter: blur(8px); /* Glassmorphism blur */
  -webkit-backdrop-filter: blur(8px); /* Safari support */
}

.navbar-brand {
    background: linear-gradient(135deg,  #1E6378 0%, #7b58d1 100%); /* Your desired gradient */
  -webkit-background-clip: text; /* Clip the background to the text */
  background-clip: text; /* Standard property */
  color: transparent; /* Make the text color transparent */
  font-weight: bold;
}


.bg-steel-gradient {
  background: linear-gradient(to right, #5f788a, #434343);
}

.navbar-nav .nav-link {
  /* color: #cbd5db; */
  color: #ffffff; /* Slightly brighter nav link color */
}

/*.bg-darksteel {
  background-color: #2b3a4e;
}*/

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #ffffff;
}

.content-section { /* This is the general one, might be used by index.html if not overridden */
  background: rgba(255, 255, 255, 0.1);
  /*backdrop-filter: blur(10px);*/
  /*-webkit-backdrop-filter: blur(10px);*/
  padding: 20px 30px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  margin-bottom: 20px;
  box-sizing: border-box;
  color: #f0f0f0; /* Light text for transparent sections */
}

.content-panel-glass {
  background: rgba(255, 255, 255, 0.85); /* More opaque white */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 25px 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  color: #212529; /* Dark text for readable content */
}

.content-panel-glass h1,
.content-panel-glass h2,
.content-panel-glass h3,
.content-panel-glass h4,
.content-panel-glass h5,
.content-panel-glass p,
.content-panel-glass div,
.content-panel-glass span,
.content-panel-glass label,
.content-panel-glass small,
.content-panel-glass li {
  color: #212529 !important; /* Ensure text inside is dark */
}
.content-panel-glass .text-muted {
  color: #6c757d !important;
}

.table .actions {
  display: grid;
  /* Apply grid layout to the cell */
  grid-template-columns: repeat(2, auto);
  /* Define two columns */
  grid-gap: 5px;
  /* Add spacing between buttons */
}

.heading-image {
  margin-right: 10px;
  /* Adjust the value as needed */
  vertical-align: middle;
  /* Ensure the image aligns well with the text */
}

.btn-brand-gradient {
  background: linear-gradient(to right, #56b4d3, #8b62d7); /* Blue to purple gradient */
  color: white;
  border: none;
  padding: 12px 30px; /* Larger padding */
  border-radius: 30px; /* Rounded corners */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-brand-gradient:hover {
  color: white;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

body > .container > .row > .col-lg-10 .text-dark {
    color: #f8f9fa !important;
}

.card-feature {
  background: rgba(255, 255, 255, 0.12); /* Semi-transparent white */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px; /* More rounded corners */
  color: #212529; /* Light text color for card content */
  height: 100%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  display: flex; /* Added for flex layout */
  flex-direction: column; /* Added for flex layout */
}

.card-feature .card-header {
  background: transparent; /* No separate background for header */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: bold;
  text-align: left; /* As per image */
  padding: 1rem 1.25rem;
}

.card-feature .card-header img {
    width: 30px; /* Adjust icon size */
    height: 30px;
    margin-right: 0.75rem;
    vertical-align: middle;
}

.card-feature .card-body {
  background: transparent;
  font-size: 0.9rem;
  color: #ffffff; /* Slightly dimmer text for body */
  padding: 1.25rem;
  flex-grow: 1; /* Added for flex layout */
}

.table {
  /* Default table text color will be inherited or set based on context */
}


/* Styles for the 'Latest Earnings Calls' table on index.html */
.light-table-wrapper {
  background: #ffffff; /* White background for the table container */
  padding: 1rem; /* Add some padding inside the wrapper */
  border: 1px solid #dee2e6; /* Standard light border */
  /* shadow-sm and rounded-3 are already on the div via existing classes in index.html */
}

.light-table-wrapper .table thead.table-secondary {
  background-color: #e9ecef !important; /* Standard light grey for header */
  color: #212529 !important; /* Dark text for header */
  border-color: #dee2e6 !important;
}

.light-table-wrapper .table td,
.light-table-wrapper .table th {
  color: #212529 !important; /* Dark text for table cells */
  border-color: #dee2e6; /* Standard border color for cells (works with table-bordered) */
}

.light-table-wrapper .table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075) !important; /* Standard hover for light tables */
  color: #212529 !important; /* Dark text on hover */
}

.light-table-wrapper .table-hover tbody tr:hover td {
  color: #212529 !important; /* Ensure td text color on hover is also dark */
}


.content-panel-glass .table thead.table-secondary {
  background-color: #e9ecef !important; /* Standard light grey */
  color: #212529 !important; /* Standard dark text */
  border-color: #dee2e6 !important;
}
.content-panel-glass .table td,
.content-panel-glass .table th {
    color: #212529 !important; /* Dark text for tables in light panels */
    border-color: #dee2e6;
}
.content-panel-glass .table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075) !important; /* Standard hover for light tables */
  color: #212529 !important;
}
.content-panel-glass .table-hover tbody tr:hover td {
  color: #212529 !important;
}

tr.table-row:hover {
  cursor: pointer;
  /* The general table hover rules above should cover this.
     If more specific styling is needed, it can be added here,
     differentiating by context if necessary. */
}
/* Remove old specific hover if it conflicts */
/* .table-row tr:hover { background-color: #ce232399; } */

.content-panel-glass .table a {
    color: #0d6efd; /* Standard Bootstrap link blue for contrast */
}
.content-panel-glass .table a:hover {
    color: #0a58ca;
}


/* Forms inside .content-panel-glass */
.content-panel-glass .form-control {
    background-color: rgba(255, 255, 255, 0.7); /* Slightly transparent white */
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #212529; /* Dark text */
    border-radius: 0.3rem; /* Consistent rounding */
}
.content-panel-glass .form-control::placeholder {
    color: #6c757d; /* Muted placeholder text */
}
.content-panel-glass .form-control:focus {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: #8b62d7; /* Purple accent on focus */
    color: #212529;
    box-shadow: 0 0 0 0.25rem rgba(139, 98, 215, 0.25);
}
.content-panel-glass .input-group-text {
    background-color: rgba(233, 236, 239, 0.8); /* Light grey for input group addons */
    border: 1px solid rgba(0,0,0,0.1);
    color: #495057;
}

/* Search bar on show_calls.html (if it's inside content-panel-glass) */
.content-panel-glass .input-group .form-control { /* Be more specific if needed */
    /* Styles above should apply */
}
.content-panel-glass .input-group .btn { /* e.g. Search button */
    /* Styles for .btn-primary, .btn-secondary should apply */
}


/* Pagination for .content-panel-glass */
.content-panel-glass .pagination .page-link {
    background-color: transparent; /* Clear background */
    border: 1px solid #c5cae9; /* Light purple border */
    color: #5c6bc0; /* Purple text */
    margin: 0 3px;
    border-radius: 0.25rem;
}
.content-panel-glass .pagination .page-link:hover {
    background-color: rgba(122, 117, 232, 0.1); /* Light purple hover */
    border-color: #7a60d5;
}
.content-panel-glass .pagination .page-item.active .page-link {
    background-color: #7a60d5; /* Purple accent */
    border-color: #7a60d5;
    color: white;
}
.content-panel-glass .pagination .page-item.disabled .page-link {
    background-color: transparent;
    border-color: #e0e0e0;
    color: #aaa;
}

/* Nav tabs for dashboard within .content-panel-glass */
.content-panel-glass .nav-tabs {
    border-bottom: 1px solid #c5cae9; /* Light purple border */
}
.content-panel-glass .nav-tabs .nav-link {
    color: #5c6bc0; /* Purple text */
    background-color: transparent;
    border: 1px solid transparent;
    border-top-left-radius: .35rem;
    border-top-right-radius: .35rem;
    margin-bottom: -1px; /* Align with bottom border */
}
.content-panel-glass .nav-tabs .nav-link:hover,
.content-panel-glass .nav-tabs .nav-link:focus {
    border-color: #e8eaf6 #e8eaf6 #c5cae9; /* Lighter purple borders on hover */
    isolation: isolate; /* Fixes z-index issue with border */
}
.content-panel-glass .nav-tabs .nav-link.active {
    color: #3f51b5; /* Darker purple for active tab */
    background-color: rgba(255,255,255,0.9); /* Match panel bg, slightly more opaque */
    border-color: #c5cae9 #c5cae9 transparent; /* Active tab border */
    font-weight: 500;
}

/* The Loading Overlay */
#loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
z-index: 1000; /* Ensure it's on top */
display: none; /* Initially hidden */
backdrop-filter: blur(5px); /* Blur effect */
}

/* Spinner Container */
#loading-spinner-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}

/* Style the spinner */
.spinner-border {
width: 3rem;
height: 3rem;
}