/* Dark Mode Settings */
body {
  background-color: #333;
  color: #fff;
}

/* Paid-feature links — greyed out and unclickable when features are suspended */
a.paid-feature-disabled {
    pointer-events: none !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    text-decoration: none !important;
}

button#savedFilterBtn {
    margin-left: 0px;
}

.navbar {
  background-color: #222;
}
.navbar-light .navbar-nav .nav-link {
  color: rgb(255, 255, 255);
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
  color: rgb(255, 255, 255);
}
.navbar-light .navbar-brand {
  color: #fff;
}

.navbar-brand {
  max-width: 50px;
}

.tm-bg-primary-dark {
  background-color: #444 !important;
  color: #fff;
}

.tm-block-title {
  color: #fff;
}

.btn-primary {
  color: #fff;
}

.btn-primary:hover {
  background-color: #777;
  border-color: #777;
}

.dropdown-menu {
  background-color: #222;
}

.dropdown-item {
  color: #fff;
}

.dropdown-item:hover {
  background-color: #444;
}

.tm-footer {
  background-color: #222;
}

.modal-body {
  background-color: #333;
  color: #fff;
}
.modal-header {
  background-color: #444;
  color: #fff;
  border-bottom: none;
}

/* End Dark Mode Settings */


/* ########################################### */
/*           Forums.html                       */
/* ########################################### */
.container{
  margin: 20px;
  padding: 20px;
}

.subforum{
  margin-top:20px;
}

.subforum-title{
  background-color:#292B2E;
  padding: 5px;
  border-radius: 5px;
  margin:4px;
}

.subforum-row{
  display: grid;
  grid-template-columns: 7% 60% 13% 20%;
}

.subforum-column{
  padding: 10px;
  margin:4px;
  border-radius: 5px;
  background-color:#111314;
}

.subforum-description *{
  margin-block: 0;
}

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

.subforum-icon i{
  font-size: 45px;
}

.subforum-devider{
  display: none;   
}


.logout-link {
    position: absolute;
    top: 25px;
    right: 0;
    margin: 0;
    text-align: center;
}
.expFilterOption{
  margin-bottom: 0px;
}
.h-100{
    height: 100px;   
    flex: 0 0 auto;
}
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.page-title-container {
    flex-grow: 1; /* Allow the title container to grow and fill available space */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Ensure the height matches the logo */
    text-align: center;
    white-space: nowrap; /* Prevent text from wrapping */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
}
.logout-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Ensure the height matches the logo */
}

.login-container {
    background-color: #444;
    margin-left: 20px;
    margin-right: 20px;
}
/* Ensure the navbar is positioned relative to the viewport */
.navbar {
    position: relative;
    display: flex;
    justify-content: space-between; /* Space items evenly */
    align-items: center; /* Center the content vertically */
    height: auto; /* Ensure the navbar height is auto */
    padding: 0 15px; /* Add padding to the sides */
}

/* Ensure the logo and title are properly aligned */
.logo-img {
  max-width: 200px; /* Adjust the max width as needed */
  height: auto; /* Maintain aspect ratio */
}

.page-title-container h1 {
    font-size: 1.2rem; /* Initial font size */
    margin: 0;
    transition: font-size 0.3s ease; /* Smooth transition for font size changes */
}

.container.text-center.my-4 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Ensure the height matches the logo */
}

.dropdown-toggle::after {
    color: #ffffff; /* Change this to the desired color */
}
.profileForm {
    width: 30%;
}
/* Custom CSS to make the modal wider */
#referralModal .modal-dialog {
  max-width: 800px; /* Adjust the value as needed */
  width: 90%; /* Adjust the value as needed */
}

#referralModal .modal-content {
  /* Optional: Adjust content styles if needed */
  background-color: #333;
}

.modal-footer {
    background-color: #444;
}

/* Custom styles for compact watchlist modal */
#watchlistModal .modal-dialog {
    max-width: 400px;
    /* Much smaller width */
    width: 90%;
}

#watchlistModal .modal-body {
    padding: 15px;
    max-height: 60vh;
    /* Limit height */
}

#watchlistModal #watchlistContent {
    max-height: 350px;
    /* Scrollable content area */
    overflow-y: auto;
    padding-right: 5px;
    /* Space for scrollbar */
}

#watchlistModal .list-group-item {
    padding: 8px 12px;
    /* Reduced padding */
    font-size: 14px;
    /* Smaller font */
}

/* Extra small custom buttons for watchlist */
#watchlistModal .btn-xs {
    font-size: 10px !important;
    /* Very small text */
    padding: 1px 6px !important;
    /* Very small padding */
    margin-left: 2px !important;
    line-height: 1.2 !important;
    border-radius: 2px !important;
    min-width: auto !important;
}

/* Ensure button text doesn't wrap */
#watchlistModal .view-ticker-btn,
#watchlistModal .remove-ticker-btn {
    white-space: nowrap;
    display: inline-block;
}

#savedFiltersContent {
    font-size: medium;
}

#watchlistModal .list-group-item strong {
    font-size: 15px;
    /* Ticker symbol size */
}

#watchlistModal .list-group-item small {
    font-size: 11px;
    /* Even smaller date text */
}

#watchlistModal .d-flex {
    align-items: center;
    gap: 0;
}

/* Custom scrollbar styling */
#watchlistModal #watchlistContent::-webkit-scrollbar {
    width: 6px;
}

#watchlistModal #watchlistContent::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#watchlistModal #watchlistContent::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#watchlistModal #watchlistContent::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Saved Filters Modal Customization */

/* Custom styles for compact watchlist modal */
#savedFiltersModal .modal-dialog {
    max-width: 60%;
    /* Much smaller width */
    width: 90%;
}

#savedFiltersModal .modal-body {
    padding: 15px;
    /* Limit height */
}

#savedFiltersModal #watchlistContent {
    max-height: 350px;
    /* Scrollable content area */
    overflow-y: auto;
    padding-right: 5px;
    /* Space for scrollbar */
}

#savedFiltersModal .list-group-item {
    padding: 8px 12px;
    /* Reduced padding */
    font-size: 14px;
    /* Smaller font */
}

h2#historicMetricsTitle {
    font-size: xx-large;
}

/* Extra small custom buttons for watchlist */
#savedFiltersModal .btn-xs {
    font-size: 10px !important;
    /* Very small text */
    padding: 1px 6px !important;
    /* Very small padding */
    margin-left: 2px !important;
    line-height: 1.2 !important;
    border-radius: 2px !important;
    min-width: auto !important;
}

/* Ensure button text doesn't wrap */
#savedFiltersModal .apply-filter-btn,
#savedFiltersModal .remove-filter-btn {
    white-space: nowrap;
    display: inline-block;
}

#savedFiltersModal .list-group-item strong {
    font-size: 15px;
    /* Ticker symbol size */
}

#savedFiltersModal .list-group-item small {
    font-size: 11px;
    /* Even smaller date text */
}

#savedFiltersModal .d-flex {
    align-items: center;
    gap: 0;
}

/* Custom scrollbar styling */
#savedFiltersModal #watchlistContent::-webkit-scrollbar {
    width: 6px;
}

#savedFiltersModal #watchlistContent::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#savedFiltersModal #watchlistContent::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#savedFiltersModal #watchlistContent::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.title-watchlist-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.tm-block-title {
    margin: 0;
    flex-shrink: 0;
}

.header-controls {
    align-items: center;
    gap: 10px;
}

#watchlistBtn {
    margin: 0;
    white-space: nowrap;
}

#changeDateBtn {
    margin: 0;
    white-space: nowrap;
}

/**
 * i18n Loading Styles
 * Prevents flash of untranslated content (FOUC)
 */

/* Hide translatable elements until i18n is ready */
html.i18n-loading [data-i18n],
html.i18n-loading [data-i18n-placeholder],
html.i18n-loading [data-i18n-title],
html.i18n-loading [data-i18n-aria] {
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

/* Show elements after translation is complete */
html:not(.i18n-loading) [data-i18n],
html:not(.i18n-loading) [data-i18n-placeholder],
html:not(.i18n-loading) [data-i18n-title],
html:not(.i18n-loading) [data-i18n-aria] {
    opacity: 1;
}

.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

.modal-dialog {
    z-index: 1060 !important;
}

#insertLinkModal {
    z-index: 99999 !important;
}

#insertLinkModal + .modal-backdrop,
.modal-backdrop.insert-link-backdrop {
    z-index: 99998 !important;
}

#insertVideoModal {
    z-index: 99999 !important;
}

#insertVideoModal + .modal-backdrop,
.modal-backdrop.insert-video-backdrop {
    z-index: 99998 !important;
}

#expandableSectionModal {
    z-index: 99999 !important;
}

#expandableSectionModal + .modal-backdrop,
.modal-backdrop.expandable-section-backdrop {
    z-index: 99998 !important;
}

/* Navigation link styling improvements */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

/* Active state for navigation links - only for non-drilldown pages */
body#historicPage .nav-link[href="historic.html"] {
    background-color: #ff9900 !important;
    color: #fff !important;
    border-radius: 4px;
}

/* Drilldown page indicator - orange underline for historic (NO background color) */
body#historicDrilldownPage .nav-link[href="historic.html"]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #ff9900;
}

/* Remove any background coloring for drilldown pages */
body#historicDrilldownPage .nav-link[href="historic.html"] {
    background-color: transparent !important;
    color: inherit !important;
}

/* Other existing page indicators */
body#reportsPage .nav-link[href="index.html"],
body#metricsPage .nav-link[href="metrics.html"] {
    background-color: #ff9900 !important;
    color: #fff !important;
    border-radius: 4px;
}


/* Historic page active state */
body#historicPage .nav-link[href="historic.html"],
body#historicDrilldownPage .nav-link[href="historic.html"] {
    color: #fff !important;
    border-radius: 4px;
}

/* Historic page active state */
body#historicMetricsPage .nav-link[href="metrics.html"] {
    color: #fff !important;
    border-radius: 4px;
}

/* Drilldown page indicator - orange underline for historic */
body#historicDrilldownPage .nav-link[href="historic.html"]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #ff9900;
}

/* Other existing page indicators */
body#reportsPage .nav-link[href="index.html"],
body#metricsPage .nav-link[href="metrics.html"] {
    background-color: #ff9900 !important;
    color: #fff !important;
    border-radius: 4px;
}

.metrics-container {
    flex: 1;
}

body#metricsPage .tm-footer {
    margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .title-watchlist-row {
        width: 100%;
        justify-content: space-between;
    }
    .header-controls {
        width: 100%;
        justify-content: flex-end;
    }
    .tm-bg-primary-dark {
     margin-right: 0px; 
    }

    .tm-block {
      padding: 20px;
    }

    
}

.historicContainer {
    padding: 10px;
}

/* Historic page date selection responsive layout - tablet/mobile */
@media (max-width: 825px) {
    .date-selection-container .row.historic-date-heading {
        flex-direction: column;
        text-align: center;
    }

    .date-selection-container .col-md-6 {
        max-width: 100%;
        flex: 0 0 100%;
        text-align: center !important;
    }

    .historic-date-heading h4,
    .historic-date-heading small {
        text-align: center;
    }

    .historic-date-select {
        text-align: center !important;
        margin-top: 15px;
    }

    .historic-date-select .form-inline {
        flex-direction: column;
        align-items: stretch !important;
        justify-content: center !important;
    }

    .historic-date-select label {
        margin-bottom: 8px;
        margin-right: 0 !important;
        text-align: center;
    }

    .historic-date-select #historicDatePicker {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 10px;
    }

    .historic-date-select #loadHistoricData {
        width: 100%;
        margin-top: 5px;
    }

    .available-dates {
        text-align: center;
        padding-right: 40px;
    }
}

/* Historic page - responsive layout for title and buttons at 905px */
@media (max-width: 905px) {
    body#historicPage .title-watchlist-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 15px;
        width: 100%;
    }

    body#historicPage .tm-block-title {
        flex-basis: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
    
    body#historicPage #watchlistBtn,
    body#historicPage #savedFilterBtn,
    body#historicPage #changeDateBtn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .title-watchlist-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    #watchlistBtn {
        width: 100%;
    }

    #savedFilterBtn {
        width: 100%;
    }

    #changeDateBtn {
        width: 100%;
    }
    div#changeDateLink
    {
        width: 100%;
    }

    .historic-date-heading,.available-dates {
      text-align: center;
    }

    .col-md-6.text-right.historic-date-select {
      text-align-last: center;
    }

    button#loadHistoricData {
      width: -webkit-fill-available;
    }
}
/* Drilldown Logic 
.piechart-container {
  height: 100%;
  width: 30%;
}
.centerpiechart-container {
  height: 100%;
  width: 25%;
}
.centerlowerpiechart-container {
  height: 100%;
  width: 25%;
}
*/
.linechart-container {
  height: 100%;
  min-width: 452px;
  display: block; /* Ensure each chart takes up full width */
}
.top-chart-row{
  height: 400px;
  width: 100%; /* Make chart container full width */
  margin-bottom: 100px;
}
.two-chart-row{
  height: 400px;
  width: 100%; /* Make chart container full width */
}

/* Ultra-Wide Screens Width */
@media (max-width: 1920px) {
  .navbar-brand {
    text-align: center;
    max-height: 150px;
  }
  .navbar-nav {
      flex-direction: column;
      align-items: center;
  }
  .logo-img{
    max-width: 150px;
    max-height: 150px;
  }
  .chart-container {
    height: auto;
  }
  /* Drilldown Logic */
 .piechart-container {
  height: 100%;
  width: 30%;
  }
  .centerpiechart-container {
    height: 100%;
    width: 30%;
  }
  .rightpiechart-container {
    margin-top: 30px;
    height: 100%;
    width: 30%;
  }
  .centerlowerpiechart-container {
    height: 100%;
    width: 25%;
  }
  .linechart-container {
    height: 100%;
    min-width: 452px;
    display: block; /* Ensure each chart takes up full width */
  }
  .top-chart-row{
    height: 400px;
    width: 100%; /* Make chart container full width */
    margin-bottom: 100px;
  }
  .two-chart-row{
    height: 400px;
    width: 100%; /* Make chart container full width */
  }
}

/* UltraWide Width */
@media (max-width: 1850px) {
  .navbar-brand {
    flex-grow: 1;
    text-align: center;
    max-height: 150px;
  }
  .navbar-nav {
      flex-direction: column;
      align-items: center;
  }
  .logo-img{
    max-width: 150px;
    max-height: 150px;
  }
  .chart-container {
    height: 100%;
    width: 100%;
  }
  .stockprice-container {
    height: auto;
    width: 100%;
  }
  /* Drilldown Logic */
 .piechart-container {
  height: 100%;
  width: 30%;
  }
  .centerpiechart-container {
    height: 100%;
    width: 30%;
  }
  .rightpiechart-container {
    margin-top: 30px;
    height: 100%;
    width: 30%;
  }
  .centerlowerpiechart-container {
    height: 100%;
    width: 40%;
  }
  .linechart-container {
    height: 100%;
    min-width: 452px;
    display: block; /* Ensure each chart takes up full width */
  }
  .top-chart-row{
    height: 400px;
    width: 100%; /* Make chart container full width */
    margin-bottom: 100px;
  }
  .two-chart-row{
    height: 400px;
    width: 100%; /* Make chart container full width */
  }
}
@media (max-width: 1780px) {
  .navbar-brand {
    flex-grow: 1;
    text-align: center;
    max-height: 150px;
  }
  .navbar-nav {
      flex-direction: column;
      align-items: center;
  }
  .logo-img{
    max-width: 150px;
    max-height: 150px;
  }
  .chart-container {
    height: 100%;
    width: 100%;
  }
  .stockprice-container {
    height: auto;
    width: 100%;
  }
 /* Drilldown Logic */
 .piechart-container {
  height: 100%;
  width: 30%;
  }
  .centerpiechart-container {
    height: 100%;
    width: 30%;
  }
  .rightpiechart-container {
    margin-top: 30px;
    height: 100%;
    width: 30%;
  }
  .centerlowerpiechart-container {
    height: 100%;
    width: 40%;
  }
  .linechart-container {
    height: 100%;
    min-width: 452px;
    display: block; /* Ensure each chart takes up full width */
  }
  .top-chart-row{
    height: 400px;
    width: 100%; /* Make chart container full width */
    margin-bottom: 100px;
  }
  .two-chart-row{
    height: 400px;
    width: 100%; /* Make chart container full width */
  }
}
@media (max-width: 1452px) {
  .navbar-brand {
    flex-grow: 1;
    text-align: center;
    max-height: 150px;
  }
  .navbar-nav {
      flex-direction: column;
      align-items: center;
  }
  .logo-img{
    max-width: 150px;
    max-height: 150px;
  }
  .chart-container {
    height: auto;
  }
  .top-chart-row{
    height: auto;
    width: 100%; /* Make chart container full width */
  }
  .two-chart-row{
    height: auto;
    width: 100%; /* Make chart container full width */
  }
  /* Drilldown Logic */
  .piechart-container {
    height: 100%;
    width: 30%;
  }
  .centerpiechart-container {
    height: 100%;
    width: 30%;
  }
  .rightpiechart-container {
    margin-top: 30px;
    height: 100%;
    width: 30%;
  }
  .centerlowerpiechart-container {
    height: 100%;
    width: 40%;
  }
  .linechart-container {
    height: 100%;
    min-width: 452px;
    display: block; /* Ensure each chart takes up full width */
  }
  .top-chart-row{
    height: 400px;
    width: 100%; /* Make chart container full width */
    margin-bottom: 100px;
  }
  .two-chart-row{
    height: 400px;
    width: 100%; /* Make chart container full width */
  }

  .filter-controls {
      font-size: small;
  }
}

/* Desktop Width */
@media (max-width: 1440px) and (min-width: 1041px) {
    .chart-container {
        width: 50%; /* Two charts per row */
        float: left; /* Float to align side by side */
        padding: 10px; /* Add some padding around charts */
        box-sizing: border-box; /* Include padding in width calculation */
    }
}

/* Small Laptop Width */
@media (max-width: 1280px) {
  .navbar-brand {
    flex-grow: 1;
    text-align: center;
    max-height: 150px;
  }
  .navbar-nav {
      flex-direction: column;
      align-items: center;
  }
  .logo-img{
    max-width: 150px;
    max-height: 150px;
  }
  .chart-container {
    max-width: 800px;
    height: auto;
  }
}


/* Tablet Width */
@media (max-width: 1040px) and (min-width: 481px) {
    .chart-container {
        width: 100%; /* One chart per row */
        float: left; /* Float to align side by side */
        padding: 10px; /* Add some padding around charts */
        box-sizing: border-box; /* Include padding in width calculation */
    }
}

/* Tablet Width */
@media (max-width: 1024px) {
  .navbar-brand {
      flex-grow: 1;
      text-align: center;
      max-height: 150px;
  }
  .navbar-nav {
      flex-direction: row;
      align-items: center;
  }
  .logo-img{
    max-width: 150px;
    max-height: 150px;
  }
  .chart-container {
    height: auto;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
      flex-basis: 100%; /* Override flex-basis to fix alignment */
      justify-content: space-between; /* Ensure proper spacing between logo, links, and dropdown */
  }

}

.collapse:not(.show) {
  display: block !important; /* Debugging: Force the navbar to stay visible */
}

/* Center the logo and navigation links */
.navbar-nav {
  flex-direction: row; /* Ensure links are side by side */
}

.navbar-toggler {
  border: none; /* Remove border around the hamburger icon */
}

.center-icon {
  align-self: anchor-center;
}
.navbar-toggler-icon {
  background-color: #fff; /* Change the color of the hamburger icon */
}

/* Prevent text wrapping and set minimum width for all columns */
.trade-list-table th,
.trade-list-table td {
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis (...) for overflowing text */
}

.tradeCT-column {
  min-width: 90px;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* Adjust spacing */
}

/* Adjust dropdown menu styling */
.dropdown-menu {
  min-width: 200px; /* Set a consistent width */
  text-align: left; /* Align text to the left */
}

/* General modal styling */
.modal-custom {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 10px;
  max-width: 90%; /* Ensure the modal doesn't exceed 90% of the screen width */
  max-height: 90%; /* Ensure the modal doesn't exceed 90% of the screen height */
  width: auto;
  height: auto;
  overflow-y: auto; /* Add scroll for overflowing content */
}

div#drilldownContent {
    height: -webkit-fill-available;
}

/* Close button styling */
.close-button-custom {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

/* Table inside the modal */
.trade-list-table-modal-custom {
  width: 100%;
  border-collapse: collapse;
}

.trade-list-table-modal-custom th,
.trade-list-table-modal-custom td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

/* Ensure the table is scrollable horizontally */
.table-container {
  overflow-x: auto; /* Enable horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile devices */
  width: 100%; /* Ensure the container takes up the full width */
}

.table-container table {
  min-width: 600px; /* Set a minimum width for the table */
  width: 100%; /* Allow the table to scale */
  border-collapse: collapse; /* Ensure proper table layout */
}

.table-container th, .table-container td {
  text-align: left;
  padding: 8px;
  border: 1px solid #ddd;
}

.trade-list-table thead th{
    position: sticky;
    top: 0;
}

.hidden {
    display: none !important;
}

.subMessage {
    padding-top: 40px;
    padding-right: 15px;
    padding-left: 15px;
}

/* Ensure dropdown menus behave properly on smaller screens */
@media (max-width: 992px) {
  .navbar-nav .dropdown-menu {
      position: absolute; /* Keep dropdown menus positioned properly */
      float: none; /* Prevent floating */
      width: auto; /* Adjust width as needed */
      background-color: #222; /* Match the navbar background */
      z-index: 1050; /* Ensure dropdown appears above other elements */
  }

  .navbar-nav .dropdown:hover .dropdown-menu {
      display: block; /* Ensure dropdown appears on hover */
  }

  .dropdown-item {
      text-align: left; /* Align dropdown items to the left */
      padding: 10px 15px; /* Add padding for better spacing */
  }

  .navbar-collapse {
      display: flex; /* Ensure navbar items are displayed in a row */
      flex-direction: column; /* Stack items vertically */
  }

  .navbar-toggler {
      border: none; /* Remove border around the hamburger icon */
  }

  .dropdown-toggle::after {
      margin-left: 0.5em;
      vertical-align: 0.1em;
      color: #fff; /* Match the text color */
  }

  body {
    font-size: small;
  }
  .h2, h2 {
    font-size: medium;
  }
  .h4, h4 {
      font-size: 1.0rem;
  }
  .h1, h1 {
    font-size: 1.5rem;
  }

}

@media (max-width: 800px) {
  .navbar-brand {
      flex-grow: 1;
      text-align: center;
      max-height: 150px;
  }
  .logout-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; 
}

  .row.address-row {
    padding-left: 0px; 
    padding-right: 0px; 
    flex-wrap: wrap;
    display: block;
  }
  
  /* Hide individual refresh displays but keep header-controls visible for help icon */
  .header-controls #auto-refresh-display,
  .header-controls #refresh-level-display {
      display: none;
  }

  .navbar-nav {
      flex-direction: row;
      align-items: center;
  }
  .logo-img{
    max-width: 150px;
    max-height: 150px;
  }
  .chart-row {
    height: auto;
    width: 100%; /* Make chart container full width */
    display: block; /* Ensure each chart takes up full width */
  }
  .chart-container {
    height: auto;
    width: 100%; /* Make chart container full width */
    display: block; /* Ensure each chart takes up full width */
  }
  .subforum-icon.subforum-column.center {
    display: none;
  }
  .subforum-stats.subforum-column.center.stat-item {
    display: none;
  }

  .modal-custom {
    width: 95%; /* Make the modal take up 95% of the screen width */
    max-width: 95%; /* Ensure it doesn't exceed 95% */
    padding: 15px; /* Reduce padding for smaller screens */
    justify-content: left;
  }

  .trade-list-table-modal-custom th,
  .trade-list-table-modal-custom td {
      font-size: 14px; /* Adjust font size for smaller screens */
      padding: 6px; /* Reduce padding for smaller screens */
  }
}

@media (max-height: 700px) {
  .navbar {
      transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition for hiding/showing */
  }
}

@media (max-height: 400px) and (max-width: 900px) {
  /* Ensure the table container fills the available screen height */
  .table-container {
    height: calc(100vh - 60px); /* Full viewport height minus the navbar height */
    overflow-y: auto; /* Enable vertical scrolling within the table */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile devices */
  }
  .tradelist-container {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}

  /* Hide the navbar when scrolling */
  .navbar-hidden {
    display: none !important; /* Completely hide the navbar */
  }

  .piechart-container {
    height: 300px;
    min-height: 300px;
    width: 300px;
    min-width: 300px;
  }

  .centerpiechart-container {
    height: 300px;
    min-height: 300px;
    width: 300px;
    min-width: 300px;
  }

  .rightpiechart-container {
    margin-top: 30px;
    height: 300px;
    min-height: 300px;
    width: 300px;
    min-width: 300px;
  }

  .centerlowerpiechart-container {
    height: 300px;
    min-height: 300px;
    width: 300px;
    min-width: 300px;
  }

  .linechart-container {
    max-height: 300px;
    min-width: 402px;
    justify-items: anchor-center;
  }

  .lowerbarchart-container {
    width: 50%;
    height: 300px;
    margin-bottom: 60px;
    justify-items: anchor-center;
  }
}

@media (max-width: 750px) {
 .navbar>.container, .navbar>.container-fluid {
    max-height: 80px;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navbar {
     padding: 0 0px; 
}
  
  .navbar-brand {
    position: absolute;
    left: 5px;
    flex-grow: 0;
    text-align: left;
    max-height: 70px;
    z-index: 10;
  }
  .tradelist-container {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}
  
  /* Center the navigation items between logo and user dropdown */
  .d-flex.justify-content-center {
    flex: 1;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
  }
  
  /* Position user dropdown on the right */
  .navbar .dropdown:last-child {
    top: 5px;
    right: 5px;
    z-index: 10;
  }
  
  .logo-img{
    max-width: 60px;
    height: auto;
    margin-left: 0px;
  }

  /* Make navigation icons smaller */
  .nav-link > i {
    font-size: 1rem;
    margin-bottom: 5px;
  }
  
  /* Make navigation links more compact */
  .nav-link {
    padding: 8px 8px; /* Reduce horizontal padding further */
    font-size: 0.5rem; /* Make text smaller */
    text-align: center;
  }
  
  /* User dropdown icon - make it smaller too */
  .dropdown .nav-link > i {
    font-size: 1rem;
    margin-bottom: 5px;
  }
  .chart-row {
    height: auto;
    width: 100%; /* Make chart container full width */
    display: block; /* Ensure each chart takes up full width */
  }
  .chart-container {
    height: auto;
    width: 100%; /* Make chart container full width */
    display: block; /* Ensure each chart takes up full width */
  }
  .subforum-icon.subforum-column.center {
    display: none;
  }
  .subforum-stats.subforum-column.center.stat-item {
    display: none;
  }

  .detailsbox {
    min-width: 400px;
  }

  .editbutton {
    width: 170px;
  }

  .editButtons {
    width: 150px;
  }

  .accountSettings {
    padding-right: 20px;
  }

  .p-6 {
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
  }

  /* Hide admin pin and lock buttons on mobile */
  .pin-link,
  .lock-link {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .navbar>.container, .navbar>.container-fluid {
    max-height: 80px;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .navbar-brand {
    position: absolute;
    left: 5px;
    flex-grow: 0;
    text-align: left;
    max-height: 70px;
    z-index: 10;
  }
  
  /* Center the navigation items between logo and user dropdown */
  .d-flex.justify-content-center {
    flex: 1;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
  }
  
  /* Position user dropdown on the right */
  .navbar .dropdown:last-child {
    top: 5px;
    right: 5px;
    z-index: 10;
  }
  
  .logo-img{
    max-width: 60px;
    height: auto;
    margin-left: 0px;
  }

  /* Make navigation icons smaller */
  .nav-link > i {
    font-size: 1rem;
    margin-bottom: 5px;
  }
  
  /* Make navigation links more compact */
  .nav-link {
    padding: 8px 8px; /* Reduce horizontal padding further */
    font-size: 0.5rem; /* Make text smaller */
    text-align: center;
  }
  
  /* User dropdown icon - make it smaller too */
  .dropdown .nav-link > i {
    font-size: 1rem;
    margin-bottom: 5px;
  }

  /* Clear floats to prevent layout issues */
  .row::after {
    content: "";
    display: table;
    clear: both;
  }

  /* Drilldown Logic */
  .piechart-container {
    height: 100%;
    width: 100%;
    display: block;
    margin-bottom: 40px;
  }
  .piechart-container-title {
    width: 348px;
  }
  .centerpiechart-container {
    height: 100%;
    width: 100%;
    display: block;
    margin-bottom: 40px;
  }
  .rightpiechart-container {
    margin-top: 30px;
    height: 100%;
    width: 100%;
  }
  .centerlowerpiechart-container {
    height: 100%;
    width: 100%;
  }
  .linechart-container {
    height: 100%;
    width: 100%; /* Ensure each chart takes up full width */
    min-width: 400px;
    display: block;
    margin-bottom: 40px;
  }
  .top-chart-row{
    height: auto;
    width: 100%; /* Make chart container full width */
    margin-bottom: 40px;
  }
  .two-chart-row{
    height: auto;
    width: 100%; /* Make chart container full width */
  }

  .modal-custom {
    width: 100%; /* Make the modal take up the full screen width */
    max-width: 100%; /* Ensure it doesn't exceed the screen width */
    border-radius: 0; /* Remove border radius for a full-screen modal */
    padding: 10px; /* Further reduce padding */
  }

  .close-button-custom {
      top: 5px;
      right: 5px;
      font-size: 18px; /* Adjust close button size */
  }
  .chart-row {
    height: auto;
    width: 100%; /* Make chart container full width */
    display: block; /* Ensure each chart takes up full width */
  }
  .chart-container {
    height: auto;
    width: 100%; /* Make chart container full width */
    display: block; /* Ensure each chart takes up full width */
    margin-bottom: 20px;
    box-sizing: border-box;
  }

  .trade-list-table-modal-custom th,
  .trade-list-table-modal-custom td {
      font-size: 12px; /* Further reduce font size for very small screens */
      padding: 4px; /* Further reduce padding */
  }
}

@media (max-width: 480px){
  .piechart-container,
  .centerpiechart-container,
  .lowerpiechart-container,
  .centerlowerpiechart-container {
      min-width: 50%;
      min-height: 50%;
  }

  .linechart-controller,
  .lowerbarchart-container {
      height: 100%;
      width: auto;
      display: block;
      margin-inline: auto;
  }

  .linechart-container {
      height: 100%;
      width: auto;
      display: block;
      padding-left: 20px;
  }

  .lowerbarchart-container {
      height: 100%;
      width: auto;
      display: block;
  }

  .dropdown-item, .nav-link {
      padding: 0px 10px;
  }

  .navbar>.container, .navbar>.container-fluid {
      display: -ms-flexbox;
      display: flex
  ;
      -ms-flex-wrap: wrap;
      flex-wrap: nowrap;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: justify;
      justify-content: space-between;
  }

  .subforum-row {
    display: grid;
    grid-template-columns: 100%;
  }

  .container {
    padding-right: 20px;
  }

  /* Fix sticky header positioning on mobile */
  .trade-list-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    padding: 6px 3px !important;
    line-height: 1.2 !important;
  }
  
  /* Ensure table container has proper positioning context */
  .table-container,
  .trade-list-container {
    position: relative !important;
  }
  
  /* Fix any margin/padding issues that could cause gaps */
  .trade-list-table {
    margin-top: 0 !important;
    border-collapse: collapse !important;
  }
  
  .trade-list-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }
  
  /* Ensure no gaps between header and content */
  .trade-list-table tbody tr:first-child td {
    border-top: none !important;
  }
  
  /* Reduce extra spacing in trades table for mobile */
  .trade-list-table th,
  .trade-list-table td {
    padding: 4px 2px !important;
    line-height: 1.1 !important;
    font-size: 0.75rem !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }
  
  /* Remove any potential margin/padding from table wrapper */
  .tradelist-top-bar {
    margin-bottom: 0 !important;
    padding-bottom: 5px !important;
  }

  .detailsbox {
    min-width: 420px;
    font-size: small;
  }
  .form-group {
    margin-bottom: 5px; 
    margin-right: 0px; 
  }
  .text-lg {
    font-size: 0.95rem;
    line-height: 1rem;
  }
  .PublicSwitches {
    width: 90%;
    justify-self: anchor-center;
  }
}

/* Additional fix for very small screens */
@media (max-width: 400px) {
  .trade-list-table thead th {
    top: 0 !important;
    position: sticky !important;
    background-color: #444 !important;
    border-bottom: 2px solid #666 !important;
  }

  .detailsbox {
    min-width: 350px;
    font-size: small;
    height: fit-content;
  }

  .detailsbox + .detailsbox {
    margin-top: 40px;
  }

  .detailsbox + .detailsbox + .detailsbox {
    margin-top: 0px;
  }
  .form-group {
    margin-bottom: 5px; 
    margin-right: 0px; 
  }
  .text-lg {
    font-size: 1.0rem;
    line-height: 1rem;
  }
}
/* Active navigation link styling */
.nav-link.active {
    background-color: #ff9900 !important;
    color: #ffffff !important;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-link.active:hover {
    background-color: #e68900 !important;
    color: #ffffff !important;
}

/* Ensure dropdown toggle also gets active styling */
.dropdown .nav-link.active {
    background-color: #ff9900 !important;
    color: #ffffff !important;
}

/* Drilldown active state - curved bottom line */
.navbar .nav-link.active-drilldown,
.navbar #forumsDropdown.active-drilldown,
.navbar .dropdown .nav-link.active-drilldown {
    position: relative !important;
    background-color: transparent !important;
    color: inherit !important;
}

.navbar .nav-link.active-drilldown::after,
.navbar #forumsDropdown.active-drilldown::after,
.navbar .dropdown .nav-link.active-drilldown::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80% !important;
    height: 3px !important;
    background-color: #ff9900 !important;
    border-radius: 3px 3px 0 0 !important;
    z-index: 10 !important;
    display: block !important;
    color: #ff9900
}

.navbar .nav-link.active-drilldown:hover,
.navbar #forumsDropdown.active-drilldown:hover,
.navbar .dropdown .nav-link.active-drilldown:hover {
    background-color: transparent !important;
    color: inherit !important;
}

/* Mobile responsive for metrics charts */
@media (min-width: 701px) {
  /* Desktop styles - ensure charts return to normal behavior */
  .metricsmidbarchart-container {
    height: 400px !important;
    min-height: 400px !important;
  }
  
  .metricsmidbarchart-container .chart-wrapper {
    width: 100%;
    height: 350px;
  }
  
  .metricsmidbarchart-container canvas {
    width: 100% !important;
    max-height: 350px !important;
  }
  
  .metrics-container .tm-block-title {
    font-size: 1rem;
  }
}

@media (max-width: 700px) {
  .metrics-container {
    padding: 10px;
  }

  #savedFiltersModal .modal-dialog {
      max-width: 80%;
  }
  
  .metrics-top-chart-row,
  .metrics-two-chart-row,
  .metrics-three-chart-row {
    height: auto;
    width: 100%;
    margin-left: 0px;
  }
  
  .metricstoppiechart-container,
  .metricstopbarchart-container,
  .metricsmidbarchart-container,
  .metricsbottomlinechart-container {
    height: 400px;
    width: 100%;
    display: block;
    margin-bottom: 40px;
    padding: 10px;
  }
  
  /* Increase height specifically for money spent and money down charts */
  .metricsmidbarchart-container {
    height: 600px !important;
    min-height: 600px !important;
  }
  
  /* Stack charts vertically on mobile */
  .metrics-top-chart-row .col-md-6,
  .metrics-two-chart-row .col-md-6,
  .metrics-three-chart-row .col-md-6 {
    width: 100%;
    margin-bottom: 30px;
  }
  
  /* Make chart titles smaller on mobile */
  .metrics-container .tm-block-title {
    font-size: 0.9rem;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.2;
  }
  
  /* Ensure canvas elements are responsive and fill container */
  .metrics-container canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Specific styling for money spent/down chart containers */
  .metricsmidbarchart-container .chart-wrapper {
    width: 100%;
    height: 550px;
  }
  
  .metricsmidbarchart-container canvas {
    width: 100% !important;
    max-height: 550px !important;
  }
}

@media (max-width: 480px) {
  /* Further adjustments for very small screens */
  .metricsmidbarchart-container {
    height: 700px !important;
    min-height: 700px !important;
    padding: 5px;
  }

  #savedFiltersModal .modal-dialog {
      max-width: 100%;
      width: 100%;
  }
  
  .metricsmidbarchart-container .chart-wrapper {
    height: 650px;
  }
  
  .metricsmidbarchart-container canvas {
    max-height: 650px !important;
  }
  
  .metrics-container .tm-block-title {
    font-size: 0.8rem;
  }
  .watchlist-toggle {
      font-size: 10px;
  }

}

/* Forums dropdown hover functionality - works with any class name */
.forums-dropdown:hover .dropdown-menu,
.forumsDropdown:hover .dropdown-menu,
.forum-dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

/* Ensure forums dropdown menu has proper styling */
.forums-dropdown .dropdown-menu,
.forumsDropdown .dropdown-menu,
.forum-dropdown .dropdown-menu {
    min-width: 200px;
    text-align: left;
    background-color: #222;
}

/* Forums dropdown items styling */
.forums-dropdown .dropdown-item,
.forumsDropdown .dropdown-item,
.forum-dropdown .dropdown-item {
    color: #fff;
}

.forums-dropdown .dropdown-item:hover,
.forumsDropdown .dropdown-item:hover,
.forum-dropdown .dropdown-item:hover {
    background-color: #444;
}

/* Custom styles for compact My Contacts modal - matching watchlist modal */
#contactsModal .modal-dialog {
    max-width: 400px;
    /* Much smaller width */
    width: 90%;
}

#contactsModal .modal-body {
    padding: 15px;
    max-height: 60vh;
    /* Limit height */
}

#contactsModal #contactsContent {
    max-height: 350px;
    /* Scrollable content area */
    overflow-y: auto;
    padding-right: 5px;
    /* Space for scrollbar */
}

#contactsModal .list-group-item {
    padding: 8px 12px;
    /* Reduced padding */
    font-size: 14px;
    /* Smaller font */
}

/* Extra small custom buttons for contacts modal */
#contactsModal .btn-xs {
    font-size: 10px !important;
    /* Very small text */
    padding: 1px 6px !important;
    /* Very small padding */
    margin-left: 2px !important;
    line-height: 1.2 !important;
    border-radius: 2px !important;
    min-width: auto !important;
}

/* Medium-small buttons for contact actions - bigger than btn-xs */
#contactsModal .btn-sm {
    font-size: 12px !important;
    padding: 3px 8px !important;
    margin-left: 3px !important;
    line-height: 1.3 !important;
    border-radius: 3px !important;
    min-width: auto !important;
}

/* Ensure button text doesn't wrap and buttons stay on same line */
#contactsModal .message-contact-btn,
#contactsModal .remove-contact-btn {
    white-space: nowrap;
    display: inline-block;
    margin-left: 5px !important;
}

/* Ensure the button container stays horizontal */
#contactsModal .list-group-item .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
}



#forumPage .text-right .btn-xs {
    margin-left: 5px !important;
    white-space: nowrap;
}

/* Custom styles for compact New Message modal */
#newMessageModal .modal-dialog {
    width: 95%;
    margin: 10px auto;
}

#newMessageModal .modal-body {
    padding: 15px;
    max-height: 70vh;
    overflow-y: auto;
}

#newMessageModal .form-group {
    margin-bottom: 15px;
}

#newMessageModal .form-control {
    font-size: 14px;
}

#newMessageModal #messageContent {
    min-height: 120px;
    resize: vertical;
}

/* Mobile responsive adjustments for New Message modal */
@media (max-width: 768px) {
    #newMessageModal .modal-dialog {
        width: 98%;
        margin: 5px auto;
    }
    
    #newMessageModal .modal-body {
        padding: 10px;
        max-height: 75vh;
    }
    
    #newMessageModal .form-group {
        margin-bottom: 10px;
    }
    
    #newMessageModal .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    #newMessageModal #messageContent {
        min-height: 100px;
    }
    
    #newMessageModal .modal-footer {
        padding: 10px;
    }
    
    #newMessageModal .modal-footer .btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    #newPostModal .modal-dialog {
        width: 98%;
        margin: 5px auto;
    }

    #newPostModal .modal-body {
        padding: 10px;
        max-height: 75vh;
    }

    #newPostModal .form-group {
        margin-bottom: 10px;
    }

    #newPostModal .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    #newPostModal #messageContent {
        min-height: 100px;
    }

    #newPostModal .modal-footer {
        padding: 10px;
    }

    #newPostModal .modal-footer .btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    body {
      font-size: small;
    }
    .h2, h2 {
      font-size: medium;
    }

    /* Full-screen Reply Modal */
    #replyModal .modal-dialog {
        width: 100vw;
        height: 100vh;
        margin: 0;
        max-width: none;
        max-height: none;
    }

    #replyModal .modal-content {
        height: 100vh;
        border-radius: 0;
        border: none;
    }

    #replyModal .modal-body {
        flex: 1;
        padding: 15px;
        overflow-y: auto;
    }

    #replyModal .modal-header {
        flex-shrink: 0;
        border-bottom: 1px solid #dee2e6;
    }

    #replyModal .modal-footer {
        flex-shrink: 0;
        border-top: 1px solid #dee2e6;
    }

    #replyModal #replyContent {
        min-height: 300px;
        resize: vertical;
    }

    /* Ensure Summernote editor fills available space */
    #replyModal .note-editor {
        border: 1px solid #ced4da;
    }

    #replyModal .note-editing-area {
        min-height: 250px;
    }

    #forumPage .btn-xs {
        font-size: 10px !important;
        /* Very small text */
        padding: 1px 6px !important;
        /* Very small padding */
        margin-left: 2px !important;
        line-height: 1.2 !important;
        border-radius: 2px !important;
        min-width: auto !important;
    }

    /* Full-screen Delete Conversation Modal */
    #deleteConversationModal .modal-dialog {
        width: 100vw;
        height: 100vh;
        margin: 0;
        max-width: none;
        max-height: none;
    }

    #deleteConversationModal .modal-content {
        height: 100vh;
        border-radius: 0;
        border: none;
    }

    #deleteConversationModal .modal-body {
        flex: 1;
        padding: 15px;
        overflow-y: auto;
    }

    #deleteConversationModal .modal-header {
        flex-shrink: 0;
        border-bottom: 1px solid #dee2e6;
    }

    #deleteConversationModal .modal-footer {
        flex-shrink: 0;
        border-top: 1px solid #dee2e6;
    }
    .btn{
      padding: 5px 5px;
      font-size: small;
      margin-right: 8px;
    }

    .note-editor .note-editing-area .note-editable {
      min-height: 150px;
  }

}

@media (max-width: 480px) {
    #newMessageModal .modal-dialog {
        width: 100%;
        margin: 0;
        height: 100vh;
        max-width: none;
    }
    
    #newMessageModal .modal-content {
        height: 100vh;
        border-radius: 0;
    }
    
    #newMessageModal .modal-body {
        flex: 1;
        max-height: none;
        padding: 15px;
    }
    
    #newMessageModal #messageContent {
        min-height: 150px;
    }

    #newPostModal .modal-dialog {
        width: 100%;
        margin: 0;
        max-width: none;
    }
    
    #newPostModal .modal-content {
        height: 100vh;
        border-radius: 0;
    }

    #newPostModal .modal-body {
        flex: 1;
        max-height: none;
        padding: 15px;
    }

    #newPostModal #messageContent {
        min-height: 150px;
    }

    .container {
      margin: 5px;
      padding: 5px;
    }
    body {
      font-size: xx-small;
    }
    .h2, h2 {
      font-size: small;
    }

    .btn-xs {
      font-size: 10px !important;
      /* Very small text */
      padding: 1px 6px !important;
      /* Very small padding */
      margin-left: 2px !important;
      line-height: 1.2 !important;
      border-radius: 2px !important;
      min-width: auto !important;
    }
}
@media (max-width: 370px) {
  #contactsModal .remove-contact-btn {
      display: none;
  }

}

@media (max-width: 550px) {
    /* Forum posts page mobile layout adjustments */
    #forumPage .d-flex.justify-content-between.align-items-center.mb-2 {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px !important;
        padding-right: 5px;
    }

    .move-post-button {
        display: none;
    }
    
    /* Move buttons above search bar and spread them apart */
    #forumPage .text-right {
        order: -1; /* Move buttons above search */
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Make search bar full width */
    #forumPage .search-left {
        width: 100%;
        order: 1; /* Move search below buttons */
    }
    
    #forumPage #postSearchInput {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        font-size: small;
    }
    
    /* Ensure buttons don't wrap and stay in corners */
    #forumPage .text-right .btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Add some spacing between elements */
    #forumPage .search-left input {
        margin: 0;
    }
}

/* Referral modal content styling to replace Bootstrap container/row conflicts */
.referral-modal-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.referral-modal-row {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Ensure referral message is centered */
#referralModal #referralMessage {
    text-align: center !important;
    margin-bottom: 15px !important;
}

/* Referral modal responsive adjustments */
#referralModal .modal-dialog {
    max-width: 50% !important;
    width: auto !important;
    margin: 15px auto !important;
}

#referralModal .modal-content {
    overflow-x: hidden !important;
    word-wrap: break-word !important;
}

#referralModal .modal-body {
    padding: 20px 15px !important;
    overflow-x: hidden !important;
}

/* Referral codes container styling */
#referralCodes {
    word-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

#referralCodes p {
    word-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.5 !important;
}

#referralCodes span {
    display: inline-block !important;
    margin-right: 10px !important;
    margin-bottom: 5px !important;
    word-break: break-all !important;
    max-width: calc(50% - 10px) !important;
}

/* Mobile responsive adjustments for referral modal */
@media (max-width: 768px) {
    #referralModal .modal-dialog {
        max-width: 98% !important;
        margin: 5px auto !important;
    }
    
    #referralModal .modal-body {
        padding: 15px 10px !important;
    }
    
    #referralCodes span {
        max-width: 100% !important;
        display: block !important;
        margin-right: 0 !important;
        text-align: center !important;
    }
    
    #referralModal .btn {
        font-size: 14px !important;
        padding: 8px 16px !important;
    }
}

@media (max-width: 480px) {
    #referralModal .modal-dialog {
        width: 100% !important;
        margin: 0 !important;
        height: 100vh !important;
        max-width: none !important;
    }
    
    #referralModal .modal-content {
        height: 100vh !important;
        border-radius: 0 !important;
    }
    
    #referralModal .modal-body {
        flex: 1 !important;
        padding: 15px !important;
        overflow-y: auto !important;
    }
}

/* Historic warning banner responsive styles */
#historicWarningBanner {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    flex-shrink: 0;
    z-index: 2500 !important;
}

/* Mobile adjustments for warning banner */
@media (max-width: 768px) {
    #historicWarningBanner {
        font-size: 12px !important;
        padding: 6px 10px !important;
        line-height: 1.3 !important;
        position: sticky !important;
        top: 0 !important;
    }
}

@media (max-width: 480px) {
    #historicWarningBanner {
        font-size: 11px !important;
        padding: 5px 8px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
    .navbar-brand {
    width: 50px;
    height: 50px;
    }

    .custommodal {
        width: 100%;
        margin: 30px auto;
    }

    .navbar .dropdown:last-child {
        top: 0px; 
        right: 0px;
        z-index: 10;
    }

    .linechart-container {
        margin-left: 10px;
        min-width: 400px;
    }

    .custom-modal-width {
    max-width: 100%;
  }
  .dropdown-menu {
    font-size: large;
  }

}

#registrationMessage {
    text-align: center;
}

@media (max-width: 900px) and (orientation: landscape) {
    #historicWarningBanner {
        font-size: 11px !important;
        padding: 5px 8px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
    .navbar-brand {
    width: 50px;
    height: 50px;
    }

    .custommodal {
        width: 100%;
        margin: 30px auto;
    }

    .navbar .dropdown:last-child {
        top: 0px; 
        right: 0px;
        z-index: 10;
    }

    .linechart-container {
        margin-left: 10px;
        min-width: 400px;
    }

    #newMessageModal .modal-dialog {
        width: 98%;
        margin: 5px auto;
    }
    
    #newMessageModal .modal-body {
        padding: 10px;
        max-height: 75vh;
    }
    
    #newMessageModal .form-group {
        margin-bottom: 10px;
    }
    
    #newMessageModal .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    #newMessageModal #messageContent {
        min-height: 100px;
    }
    
    #newMessageModal .modal-footer {
        padding: 10px;
    }
    
    #newMessageModal .modal-footer .btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    #newPostModal .modal-dialog {
        width: 98%;
        margin: 5px auto;
    }

    #newPostModal .modal-body {
        padding: 10px;
        max-height: 75vh;
    }

    #newPostModal .form-group {
        margin-bottom: 10px;
    }

    #newPostModal .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    #newPostModal #messageContent {
        min-height: 100px;
    }

    #newPostModal .modal-footer {
        padding: 10px;
    }

    #newPostModal .modal-footer .btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    body {
      font-size: small;
    }
    .h2, h2 {
      font-size: medium;
    }

    .navbar-brand {
        width: 50px;
        height: 50px;
    }

    body {
        font-size: small;
    }

    .col-12\.tm-block-col {
      height: 100vh;
    }
    .navbar-hidden {
      display: none !important; /* Completely hide the navbar */
    }
}

@media (max-width: 400px) {
    .linechart-container {
        margin-left: 15px;
        min-width: 350px;
    }
}

@media (max-width: 350px) {
    .linechart-container {
        margin-left: 10px;
        min-width: 300px;
    }
}

/* Ensure chart containers have proper responsive behavior */
@media (max-width: 768px) {
    .linechart-container {
        padding: 0px !important;
        margin-bottom: 20px !important;
    }
    
    .linechart-container canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Disable hover effects on touch devices for watchlist icons */
@media (hover: none) and (pointer: coarse) {
    /* This targets touch devices specifically */
    .watchlist-toggle:hover,
    .watchlist-toggle:active,
    .watchlist-toggle:focus {
        /*color: inherit !important;*/
        background-color: transparent !important;
        outline: none !important;
    }
    
    /* Force icons to show ONLY their current state based on class */
    .watchlist-toggle.watched,
    .watchlist-toggle.watched:hover,
    .watchlist-toggle.watched:active,
    .watchlist-toggle.watched:focus {
        color: #28a745 !important; /* Always green for watched */
    }
    
    
    /* Completely disable all pointer events temporarily after click */
    .watchlist-toggle.clicking {
        pointer-events: none !important;
    }
}

/* Alternative: Remove all hover effects on mobile screens */
@media (max-width: 768px) {
    .watchlist-toggle:hover,
    .watchlist-toggle:active,
    .watchlist-toggle:focus {
        color: inherit !important;
        background-color: transparent !important;
        outline: none !important;
    }
    
    .watchlist-watched:hover{
        color: #28a745 !important;
    }

    .watchlist-unwatched:hover{
        color: #6c757d !important;
    }
}