/* Base Styles */
body {
	transition: background-color 0.4s ease, color 0.5s ease;
	font-family: 'Oxanium', -apple-system, BlinkMacSystemFont, sans-serif;
	background: #0f1923;
	color: #eaeaea;
	font-size: 14px;
    padding: 15px;
    margin: 0;
    min-width: auto; /* Remove fixed min-width */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/*Hiding "Show more" button */
.show-more-container {
	visibility: hidden;
}

#app {
    min-height: calc(100vh - 20px); /* Fill viewport minus small gap */
    display: flex;
    flex-direction: column;
    max-width: none; /* Remove max-width constraint */
    width: calc(100vw - 30px); /* Account for padding */
    height: calc(100vh - 30px); /* Account for padding */
    margin: 0;
    padding: 0;
}

/* Table Styles */
table {
    table-layout: fixed;
    overflow-x: auto;
    overflow-y: auto;
    display: block;
    max-width: 1000px;
    white-space: nowrap;
    min-width: 100%;
    flex-grow: 1; /* Makes table expand to fill available space */
    width: 100%;
    height: calc(100% - 40px); /* Adjust based on your header height */
    max-height: none; /* Remove max-height constraint */
    margin: 0;

}
thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #2a2f3d;
}


/* For modern browsers only */
@supports (overflow-x: clip) {
	table {
		overflow-x: clip;
	}
}

th,
td {
	padding: 5px 4px;
	text-align: left;
	border-bottom: -1px solid #2a2f3d;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

th:nth-child(1),
td:nth-child(1) {
	width: 1.2%;
}
/* Prevent first column from being highlighted during price updates */
/* More specific selector to override animations */
#data > tr.update-up > td:first-child,
#data > tr.update-down > td:first-child {
    animation: none !important;
    background-color: transparent !important;
    -webkit-animation: none !important;
   /* border: 2px solid red !important;*/
}

#data tr.update-up td:first-child,
#data tr.update-up td:first-child *,
#data tr.update-down td:first-child,
#data tr.update-down td:first-child * {
    animation: none !important;
    background-color: transparent !important;
}
th:nth-child(2),
td:nth-child(2) {
	padding-left: 5px;
	padding-right: 5px;
	width: 3%;
}


th:nth-child(3),
td:nth-child(3) {
	width: 3%;
}

th:nth-child(4),
td:nth-child(4) {
	padding-right: 12px;
	/* Extra space for indicator */
	width: 3%;
}

/* 2. Prevent the 5th column from collapsing */
th:nth-child(5),
td:nth-child(5) {
    min-width: 240px !important; /* Fixed minimum width */
    width: auto;
    overflow: visible !important;
}

/* Ensure dollar change and timer are aligned consistently */
.dollar-change {
    display: inline-block;
    min-width: 8ch; /* Adjusted for left-alignment */
    text-align: left;
}

th {
	background: #2a2f3d;
	position: sticky;
	top: 0;
	font-weight: 500;
}

tr:hover {
	background: #2a2f3b;
}

/* Color Classes */
.up {
	color: #0ecb81 !important;
}

.down {
	color: #fa0626 !important;
}


/* Start Sort indicator 24H % Change */
/* Replace your existing sort indicator styles with: */
#sortHeader,
#changeHeader {
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
}

#sortHeader:hover,
#changeHeader:hover {
	background-color: rgba(240, 185, 11, 0.1) !important;
}

.sort-indicator {
	display: inline-block;
	margin-left: 5px;
	font-size: 0.8em;
	opacity: 0.7;
	transition: opacity 0.2s;
}

#sortHeader:hover .sort-indicator,
#changeHeader:hover .sort-indicator {
	opacity: 1;
}

/* Active sort headers */
#sortHeader.sort-active,
#changeHeader.sort-active {
	color: #f0b90b !important;
}


/* End of Sort indicator 24H % Change */


/* Header Styles */
.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
        margin-bottom: 0.1px;
    min-height: auto;
}
/* Volume Header Container */
.volume-header-container {
    display: flex;
    gap: 10px; /* Reduced from 40px for better mobile behavior */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: max-content; /* Prevent collapsing */
    white-space: nowrap; /* Prevent text wrapping */
}
.header-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0; /* Prevent shrinking */
    margin-left: auto; /* Push to the right */
}

.header-button {
	background: none;
	color: #f0b90b;
	border: 1px solid #f0b90b;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	transition: all 0.2s;
}

.header-button:hover {
	background: #3a3f4d;
	transform: rotate(90deg);
}


/* Refresh Button Styling */
.refresh-button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #f0b90b;
    background: #2a2f3d;
    color: #f0b90b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0 2px;
    font-size: 14px;
}

.reload {
    font-family: "Lucida Sans Unicode", sans-serif;
    display: inline-block;
    transition: transform 0.3s ease;
}

.refresh-button:hover .reload {
    transform: rotate(90deg);
}

.refresh-button:hover {
	background: #3a3f4d;
	transform: rotate(90deg);
}

/* Refresh button states */
.refresh-button.refreshing .reload-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.refresh-button:active .reload-icon {
    transform: scale(1.2);
}

/* TradingView Button with Theme-Specific Icons */
.tv-screen {
    background: #2a2f3d;
    border: 1px solid #f0b90b;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.tv-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: opacity 0.3s ease;
    position: absolute;
}

/* Show white icon in dark theme */
body:not(.light-theme) .tv-icon.light-icon {
    opacity: 1;
}
body:not(.light-theme) .tv-icon.dark-icon {
    opacity: 0;
}

/* Show black icon in light theme */
body.light-theme .tv-icon.light-icon {
    opacity: 0;
}
body.light-theme .tv-icon.dark-icon {
    opacity: 1;
}

body:not(.light-theme) .theme-icon.light-icon {
    opacity: 1;
}
body:not(.light-theme) .theme-icon.dark-icon {
    opacity: 0;
}
body.light-theme .theme-icon.light-icon {
    opacity: 0;
}
body.light-theme .theme-icon.dark-icon {
    opacity: 1;
}

.tv-screen:hover {
    background: #3a3f4d;
    transform: scale(1.1);
}

.tv-screen:active {
    transform: scale(0.95);
}

/* Tooltip */
.tv-screen::after {
    content: "TradingView";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #2a2f3d;
    color: #f0b90b;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    white-space: nowrap;
}

.tv-screen:hover::after {
    opacity: 1;
}

/* Light theme adjustments */
body.light-theme .tv-screen {
    background: #e0e0e0;
    border-color: #333;
}

body.light-theme .tv-screen::after {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #d0d0d0;
}

.tv-screen:hover {
	background: #3a3f4d;
	transform: rotate(90deg);
}

/* Start of Connection Status */
.connection-status {
	min-width: 20px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	position: relative;
}

.connection-indicator {
	background: transparent;
	/* Default background */
	/*color: #f0b90b;*/
	/* Default text color */
	/*border: 1px solid #f0b90b;*/
	/* Default border */
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
	font-size: 12px;
	font-weight: bold;
	transition: all 0.2s;
	position: relative;
	line-height: 1;
}

/* Status colors */
.connection-indicator.connected {
	background: rgba(14, 203, 129, 0.2);
	color: #0ecb81;
	border-color: #0ecb81;
}

.connection-indicator.disconnected {
	background: rgba(246, 70, 93, 0.2);
	color: #f6465d;
	border-color: #f6465d;
}

.connection-indicator.connecting {
	color: #f8d347;
	border-color: #f8d347;
}

.connection-indicator.connecting,
.connection-indicator.reconnecting {
	background: rgba(248, 211, 71, 0.2);
	color: #f8d347;
	border-color: #f8d347;
}

.connection-indicator.error {
	background: rgba(255, 153, 0, 0.2);
	color: #ff9900;
	border-color: #ff9900;
}

.connection-indicator.paused {
	background: rgba(170, 170, 170, 0.2);
	/* Grey background */
	color: #aaaaaa;
	/* Grey text */
	border-color: #aaaaaa;
	/* Grey border */
}

/* Tooltip for connection indicator */
.connection-indicator::after {
	content: attr(data-tooltip);
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	background: #2a2f3d;
	color: #f0b90b;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 10px;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
	white-space: nowrap;
}

.connection-indicator:hover::after {
	opacity: 1;
}

/*End of Connection Status*/

.tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
}

.connection-status:hover .tooltip {
	opacity: 1;
}

/* Search Container */
.search-container {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    max-width: 80%;
    z-index: 1000;
    background: #2a2f3d;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    border: 1px solid #3a3f4d;
    display: none;
    max-height: 80vh;
    overflow: hidden;
}
/* Search button specific styles */
#searchButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
}
#searchButton:hover {
    background: transparent;
}
/* Make sure Font Awesome icons are properly sized */
#searchButton i {
    font-size: 12px;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Search Input */
#searchInput {
    width: 100%;
    padding: 10px 10px;
    font-size: 14px;
    background: #1a1e27;
    color: #eaeaea;
    border: 1px solid #3a3f4d;
    border-radius: 4px;
    box-sizing: border-box;
    transition: all 0.2s;
    margin-bottom: 8px;
}
#searchInput:focus {
    border-color: #f0b90b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(240, 185, 11, 0.2);
}

/* Search Results */
#searchResults {
    max-height: calc(80vh - 60px);
    overflow-y: auto;
    border-radius: 4px;
    background: #1a1e27;
    border: 1px solid #3a3f4d;
    display: none;
    scroll-behavior: smooth;
}
#searchButton::after {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #2a2f3d;
    color: #f0b90b;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    white-space: nowrap;
}

#searchButton:hover::after {
    opacity: 1;
}
/* Pair Name - Left aligned */
.pair-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    min-width: 80px; /* Prevent squeezing */
}
/* Coin Item Layout */
/* Replace existing .coin-item styles with: */
.coin-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px;
    padding: 8px 12px;
    align-items: center;
}

.price-section {
    display: flex;
    align-items: center;
    gap: 4px;
}

.platform-icons {
    display: flex;
    gap: 6px;
}

.pair-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px; /* Adjust as needed */
}

.coin-content {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0; /* Allows text truncation */
}
/* Price - Right aligned */
.price {
    font-family: 'Oxanium', monospace;
    color: #f0b90b;
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
    min-width: 80px; /* Prevent price from shifting */
    padding-left: 8px;
}
/* 5. Adjust for very small screens (below 920px) */
@media (max-width: 920px) {
    /* Ensure the 5th column stays wide enough */
    th:nth-child(5),
    td:nth-child(5) {
        min-width: 260px !important; /* Extra space for buttons */
    }

    /* Reduce gaps slightly */
    .volume-header-container {
        gap: 6px;
    }

    /* Shrink buttons if needed (but keep them visible) */
    .header-button,
    .connection-indicator,
    #fearGreedGauge {
        gap: 4px;
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}
/* Responsive adjustments */
@media (max-width: 600px) {
    .coin-item {
        grid-template-columns: 1fr auto;
    }
    .price {
        grid-column: 1 / -1;
        text-align: left;
        padding-left: 0;
    }
    .platform-icons {
        justify-content: flex-end;
    }
    th:nth-child(5),
    td:nth-child(5) {
    min-width: 280px !important; /* Even more space */
    }
	    /* Stack buttons if absolutely necessary */
    .header-buttons {
        flex-wrap: wrap;
        max-width: 100px; /* Prevent overflow */
	}
}
/* No Results */
.no-results {
    padding: 16px;
    text-align: center;
    color: #8a8a8a;
    font-size: 10px;
}
.no-results small {
    display: block;
    margin-top: 4px;
    font-size: 0.9em;
    opacity: 0.8;
}
/* Responsive adjustments */
@media (max-width: 500px) {
    .coin-item {
        grid-template-columns: 1fr auto;
    }
    .price {
        grid-column: 1 / -1;
        text-align: right;
        padding-left: 0;
    }
    .platform-icons {
        justify-content: center;
    }
}
/* Improve no-results styling */
.no-results {
    padding: 16px;
    text-align: center;
    color: #8a8a8a;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.no-results {
    padding: 12px;
    color: #8a8a8a;
    text-align: center;
}
.market-type {
	font-size: 10px;
	padding: 3px 6px;
	border-radius: 3px;
	margin-left: 12px;
}

.spot-type {
	color: #0ecb81;
	border: 1px solid #0ecb81;
	background: rgba(14, 203, 129, 0.1);
}

.futures-type {
	color: #f0b90b;
	border: 1px solid #f0b90b;
	background: rgba(240, 185, 11, 0.1);
}

/* Platform Icons */
.platform-icons {
    display: flex;
    gap: 2px;
    margin-left: 4px;
    justify-content: center;
    flex-wrap: nowrap;
    min-width: 100px; /* Fixed width for icon container */
}

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

.platform-icon:hover img {
    opacity: 1;
    transform: scale(1.1);
}

.platform-icons img {
    width: 18px;
    height: 18px;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.platform-icons img:hover {
    opacity: 1;
}


.platform-icon img {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	object-fit: contain;
	display: inline-block;
	transition: all 0.2s;
	opacity: 0.8;
}
/*
.platform-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: all 0.2s ease;
    opacity: 0.8;
}
*/

.platform-icon:hover img {
	opacity: 1;
	transform: scale(1.1);
}

/* Pair Detail Modal */
.pair-detail-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 2000;
}

.modal-content {
	width: 90%;
	max-width: 400px;
	height: auto;
	max-height: 80vh;
	overflow-y: auto;
	background: #2a2f3d;
	border: 1px solid #f0b90b;
	border-radius: 8px;
	padding: 20px;
	position: relative;
	margin: auto;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.modal-header h3 {
	margin: 0;
	color: #f0b90b;
}

.close-modal {
	color: #aaa;
	font-size: 28px;
	cursor: pointer;
}

.close-modal:hover {
	color: #fff;
}

.pair-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-bottom: 25px;
}

.stat-item {
	background: #2a2f3d;
	padding: 12px;
	border-radius: 6px;
}

.stat-label {
	display: block;
	color: #8a8a8a;
	font-size: 12px;
	margin-bottom: 5px;
}

.stat-value {
	display: block;
	font-weight: 500;
	font-size: 14px;
}


/* Fear & Greed Index Popup */
.fear-greed-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 25, 35, 0.85);
	z-index: 3000;
	display: none;
	backdrop-filter: blur(2px);
}

.fear-greed-popup-overlay.show {
	display: block;
}

.fear-greed-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 500px;
	background: #1a1e27;
	/* border: 1px solid #f0b90b; */
	border-radius: 6px;
	padding: 15px;
	z-index: 3001;
	display: none;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.fear-greed-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #f0b90b, #0ecb81, #f6465d);
  opacity: 0.7;
}

.fear-greed-popup.show {
	display: block;
}

.fear-greed-popup-header {
    display: flex;
    justify-content: center;  /* Center the content horizontally */
    align-items: center;      /* Align items vertically in the center */
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #2a2f3d;
    position: relative;
    width: 100%; /* Ensure the header takes up the full width */
}

.fear-greed-popup-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    position: absolute; /* Make the close button position absolute */
    right: 0;           /* Push it to the far right */
}



.fear-greed-popup-header h3 {
	margin: 0;
	color: #f0b90b;
	font-size: 1.1em;
	font-weight: 500;
	text-align: center;
}

.fear-greed-popup-close:hover {
	color: red;
}

.fear-greed-popup-value {
	text-align: center;
	margin-bottom: 15px;
}

#fearGreedValue {
	font-size: 2.5em;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}

#fearGreedLabel {
	font-size: 1em;
	display: block;
	color: #eaeaea;
}

.extreme-greed {
	color: #40e754;
}

.greed {
	color: #23925b;
}

.neutral {
	color: #eaeaea;
}

.fear {
	color: #f8d347;
}

.extreme-fear {
	color: #f6465d;
}

.fear-greed-popup-chart {
	height: 180px;
	margin-bottom: 15px;
}

.fear-greed-popup-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.fear-greed-popup-stat-item {
	background: #2a2f3d;
	padding: 10px;
	border-radius: 4px;
	font-size: 0.9em;
}

.fear-greed-popup-stat-label {
	display: block;
	color: #8a8a8a;
	font-size: 0.85em;
	margin-bottom: 3px;
}


.fear-greed-popup-stat-value {
	display: block;
	font-weight: 500;
	font-size: 0.95em;
}

/* Animation Styles */
:root {
	--up-color: rgba(14, 203, 129, 0.2);
	--down-color: rgba(246, 70, 93, 0.2);
	--animation-duration: 3000ms;
}

@keyframes price-up {
	0% {
		background-color: rgba(14, 203, 129, 0);
	}

	50% {
		background-color: var(--up-color);
	}

	100% {
		background-color: rgba(14, 203, 129, 0);
	}
}

@keyframes price-down {
	0% {
		background-color: rgba(246, 70, 93, 0);
	}

	50% {
		background-color: var(--down-color);
	}

	100% {
		background-color: rgba(246, 70, 93, 0);
	}
}

.update-up {
	animation: price-up var(--animation-duration) ease-out;
}

.update-down {
	animation: price-down var(--animation-duration) ease-out;
}

/* Volume Container Styles */
.volume-container {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.volume-value {
	min-width: 65px;
	display: inline-block;
	text-align: left;
}

.highlight-container {
	display: inline-block;
	color: #f8d347;
	margin-left: 6px;
}

.highlight-separator {
	color: #f0b90b;
	margin: 0 4px;
	opacity: 0.6;
}

.highlight-timer {
	color: #acabab;
	display: inline-block;
    min-width: 1ch; /* Matches JS padStart(9) */
    text-align: left;
	
}

.highlight-container .up {
	color: #0ecb81;
}

.highlight-container .down {
	color: #f6465d;
}

.temp-message.fade-out {
	animation: fadeOut 0.3s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		bottom: 10px;
	}

	to {
		opacity: 1;
		bottom: 20px;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
		bottom: 20px;
	}

	to {
		opacity: 0;
		bottom: 30px;
	}
}

.paused-state {
	color: #f0b90b;
	font-weight: bold;
}


/* TradingView Widget Styles */
.tradingview-widget-container {
    position: relative;
	left: 0;
	/* Adjust this value based on your header buttons width */
	z-index: 1;
	/* Start hidden by default */
	margin-top: 8px;
    width: calc(100% - 30px) !important;
    max-width: 1000px; /* Match your table's max-width */
    margin: 0 auto;
    height: 60;
    overflow: hidden;
    transition: opacity 0.3s ease;
    display: block;
}
.tradingview-widget-container.show {
    height: 65px;
    margin-bottom: 8px;
}

/* Visual Feedback */
.tv-screen.active {
    transform: scale(1.2);
    background: #3a3f4d;
    transition: all 0.2s ease;
}

.tradingview-widget-container__widget {
    width: 100% !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
}

/* Tooltip for TV button */
.header-button,
.refresh-button,
.tv-screen {
    width: 24px;
    height: 24px;
    font-size: 11px;
    margin: 0;
    padding: 0;
}
/* Ensure table header has enough space */
#sortHeader {
    min-width: 600px;
    position: relative;
}

.tv-screen::after {
	/*content: "Trading View";*/
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	background: #2a2f3d;
	color: #f0b90b;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 10px;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
	white-space: nowrap;
}

.tv-screen:hover::after {
	opacity: 1;
}

/*End of Tradinview Widget*/

/*Start of Fear & Greed Index*/
.update-info {
	display: flex;
	flex-direction: column;
	margin-top: 8px;
	font-size: 15px;
	color: #8a8a8a;
	gap: 2px;
}

.update-info span {
	display: block;
	text-align: center;
}

.fear-greed-popup-value {
	padding-bottom: 10px;
	border-bottom: 1px solid #2a2f3d;
	margin-bottom: 15px;
}

.update-info #nextUpdateTime {
	color: #ffffff;
}

.status-colored {
	transition: color 0.3s ease;
}

/*End of Fear & Greed Index*/


/*Click Highlight*/
.highlighted {
	outline: 1px solid #f0b90b;
}


/* Safe pinned row indicator */
#data tr.pinned-row td:first-child {
	position: relative;
	padding-left: 8px;
}

/* # */
#data tr.pinned-row td:first-child::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: mediumorchid;
}



/* Theme Toggle Button */
.theme-toggle-container {
    grid-column: span 2; /* Make theme toggle span full width */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #3a3f4d;
    margin-bottom: 10px;
}

.theme-toggle-container label {
    margin-right: 10px;
    color: #eaeaea;
}

.theme-toggle-button {
    background: #2a2f3d;
    border: 1px solid #f0b90b;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.theme-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: opacity 0.3s ease;
    position: absolute;
}

.theme-toggle-button:hover {
	background: #3a3f4d;
	transform: rotate(100deg);
}

/* System-aware default (before any JS runs) */
@media (prefers-color-scheme: light) {
	body:not([class*="-theme"]) {
		background: #f5f5f5;
		color: #333;
	}
}

/* Manual light theme */
body.light-theme {
	background: #f5f5f5;
	color: #333;
}

body.light-theme th {
	background: #e0e0e0;
	color: #333;
}

/* Icon states */
body:not(.light-theme) .fa-sun,
body.light-theme .fa-moon {
	display: none;
}

body.light-theme tr:hover {
	background: #e8e8e8 !important;
}

body.light-theme .header-button,
body.light-theme .refresh-button,
body.light-theme .tv-screen,
body.light-theme .theme-toggle-button {
	background: #e0e0e0;
	color: #333;
	border-color: #333;
}
/* Add these to your styles.css file */

/* Search Container - Theme Adjustments */
body.light-theme .search-container {
    background: #f0f0f0;
    border-color: #d0d0d0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light-theme #searchInput {
    background: #ffffff;
    color: #333;
    border-color: #d0d0d0;
}

body.light-theme #searchInput:focus {
    border-color: #f0b90b;
    box-shadow: 0 0 0 2px rgba(240, 185, 11, 0.2);
}

body.light-theme #searchResults {
    background: #ffffff;
    border-color: #d0d0d0;
}

body.light-theme .coin-item {
    border-bottom: 1px solid #eaeaea;
}

body.light-theme .coin-item:hover {
    background: #f5f5f5;
}

/* Fear & Greed Popup - Theme Adjustments */
body.light-theme .fear-greed-popup {
    background: #f5f5f5;
    border-color: #d0d0d0;
}

body.light-theme .fear-greed-popup-header {
    border-bottom-color: #e0e0e0;
}

body.light-theme .fear-greed-popup-stat-item {
    background: #e0e0e0;
    color: #333;
}

body.light-theme .fear-greed-popup-stat-label {
    color: #666;
}

body.light-theme .fear-greed-popup-value {
    border-bottom-color: #989797;
}

body.light-theme .update-info {
    color: #666;
}

/* Gauge - Theme Adjustments */
body.light-theme .gauge-container {
    background: transparent;
}

body.light-theme .value-text {
    fill: #333;
}

/* Modal - Theme Adjustments */
body.light-theme .pair-detail-modal .modal-content {
    background: #f5f5f5;
    border-color: #d0d0d0;
}

body.light-theme .pair-detail-modal .stat-item {
    background: #e0e0e0;
}

body.light-theme .pair-detail-modal .stat-label {
    color: #666;
}

/* Settings Panel - Theme Adjustments */
body.light-theme .settings-panel {
    background: #f5f5f5;
    border-color: #d0d0d0;
}

body.light-theme .settings-header {
    border-bottom-color: #e0e0e0;
}

body.light-theme .setting-item label {
    color: #333;
}

/* TradingView Widget - Theme Adjustment */
body.light-theme .tradingview-widget-container {
    background: #f5f5f5;
}

/* Mobile Controls - Theme Adjustments */
body.light-theme .mobile-controls-box {
    background: #f5f5f5;
    border-color: #d0d0d0;
}

body.light-theme .mobile-control-btn {
    background: #e0e0e0;
    color: #333;
    border-color: #333;
}

body.light-theme .mobile-arrow {
    background: #e0e0e0;
    color: #3a3f4d;
    border-color: #333;
}

/* Platform Icons - Theme Adjustments */
body.light-theme .platform-icons img {
    filter: brightness(0.8);
}

body.light-theme .platform-icons img:hover {
    filter: brightness(1);
}

/* No Results Text - Theme Adjustment */
body.light-theme .no-results {
    color: #666;
}
/* Icon states */
body:not(.light-theme) .fa-sun,
body.light-theme .fa-moon {
	display: none;
}

/* Gauge Styles */
.gauge-container {

	font-family: 'Oxanium', -apple-system, BlinkMacSystemFont, sans-serif;
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5px;
	cursor: pointer;
	padding: 5 5px;
            width: 60px !important;
        height: 40px !important;
        transform: none !important;
	/* Adjust left/right inner spacing (5px = example) */
}


/* Needle Style 
#needle {
    transition: all 0.5s ease;
    stroke: yellow;
    stroke-width: 1.75;
} */

.gauge-svg {
	width: 100%;
	height: auto;
}

.center-dot {
	fill: magenta;
}

.value-text {
	font-size: 1.5rem;
	fill: #000;
	font-weight: normal;
	text-anchor: middle;
	transition: fill 0.3s ease;
}

#fearGreedGauge {
    width: 50px;
    height: 28px;
}

#fearGreedGauge:hover {
	transform: scale(1.05);
}

#fearGreedGauge:active {
	transform: scale(0.95);
}

/* Color classes for the gauge */
.glow-low {
	fill: #e74c3c !important;
	filter: drop-shadow(0 0 2px #e74c3c);
}

.glow-medium {
	fill: #f1c40f !important;
	filter: drop-shadow(0 0 2px #f1c40f);
}

.glow-high {
	fill: #2ecc71 !important;
	filter: drop-shadow(0 0 2px #2ecc71);
}
/*End of GAUGE*/


/* Hide scrollbar but keep functionality */
html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

/* Apply the same to elements with scrollable content */
table, .search-container, #searchResults, .modal-content, .fear-greed-popup, .settings-panel {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

table::-webkit-scrollbar,
.search-container::-webkit-scrollbar,
#searchResults::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.fear-greed-popup::-webkit-scrollbar,
.settings-panel::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}
/* End of Hide scrollbar but keep functionality */


/* Touch feedback for mobile */
button.touch-active {
    transform: scale(0.95);
    opacity: 0.9;
    transition: transform 0.1s, opacity 0.1s;
}

/* Hover effects for desktop */
.desktop button:hover {
    background: #3a3f4d;
    transform: scale(1.05);
}

/* Remove tap highlight on mobile */
* {
    -webkit-tap-highlight-color: transparent;
}

.mobile-controls-box {
    display: flex;
    flex-direction: column;
    background: #2d323c;
    border-radius: 8px;
    border: 1px solid #4d3a3f;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}


/* Mobile Controls Container */
.mobile-controls-container {
    position: fixed;
    right: 10px;
    bottom: 1px;
    display: none;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}
/* Controls Box */


/* Arrows Box */
.mobile-arrows-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    align-items: flex-end;
}

/* Control Buttons */
.mobile-control-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #f0b90b;
    color: #f0b90b;
    display: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

/* Arrow Buttons */
.mobile-arrow {
    background: transparent;
    color: #f0b90b;
    border: 1px solid #f0b90b;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

/* Base styles for all views */
.volume-header-container {
  display: flex;
  align-items: center;
  gap: 12px; /* Default gap */
}

.header-buttons {
  display: flex;
  gap: 6px; /* Default button spacing */
  align-items: center;
}

/* Tablet/Small Desktop (1200px and below) */
@media (max-width: 1200px) {
  .volume-header-container {
    gap: 8px;
  }
  
  .header-buttons {
    gap: 4px;
    margin-left: 0;
          min-width: auto !important;
    flex-wrap: nowrap;
  }
  
  #fearGreedGauge {
        margin-left: 4px; /* Slight spacing adjustment */
  }
}

/* For very small screens */
/* For very small screens */
@media (max-width: 480px) {
    .header-buttons {
        gap: 2px;
    }

    /* Make buttons smaller if needed */
    .header-button,
    .refresh-button,
    .tv-screen,
    .connection-indicator {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    /* Adjust gauge size */
    #fearGreedGauge {
        width: 45px !important;
        height: 25px !important;
    }

    .gauge-container {
        width: 45px !important;
        height: 25px !important;
    }
}

/* iPad/Tablet (1024px and below) */
@media (max-width: 1024px) {
  .volume-header-container {
     margin-left: 3px;
    gap: 6px;
  }
  
  .header-buttons {
    gap: 3px;
  }
  
  #sortHeader {
    padding-right: 0;
  }
  
  /* Show mobile controls */
  .mobile-controls-container {
    display: flex !important;
    gap: 6px;
  }
  
  /* Hide non-essential desktop buttons */
  .header-buttons > *:not(#searchButton):not(#connectionIndicator):not(#fearGreedGauge) {
    display: none;
  }
    #fearGreedGauge {
    transform: translateY(-5%);
  }
  
  .gauge-container {
    width: 54px;
    height: 35px;
  }
}

/* Mobile Phones (768px and below) */
/* Mobile adjustments for header buttons */
@media (max-width: 768px) {
    .volume-header-container {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
    }
    
    .volume-text {
        display: none; /* Hide text on small screens */
    }

    .header-buttons {
        margin-left: 0;
        gap: 2px;
    }
        .current-price {
        min-width: 60px;
        font-size: 0.8em;
    }

    /* Bring gauge and status closer */
    #connectionIndicator,
    #fearGreedGauge {
        margin-left: 0;
    }

    /* Adjust gauge size if needed */
    #fearGreedGauge {
        width: 50px !important;
        height: 28px !important;
    }

    .gauge-container {
        width: 50px !important;
        height: 28px !important;
    }

  /* TradingView widget adjustment */
  .tradingview-widget-container {
    right: 250px;
  }
}

/* Small Mobile (600px and below) - Emergency measures */
@media (max-width: 600px) {
  .volume-text {
    display: none; /* Hide text if absolutely necessary */
  }
  
  .header-buttons {
    gap: 1px;
  }
  
  #fearGreedGauge {
    width: 40px;
    height: 40px;
  }
}


/* Crypto Icon Styles */
.crypto-icon {
    width: 21px;
    height: 21px;
    vertical-align: middle;
    margin-right: 2px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.pin-icon .crypto-icon {
    cursor: pointer;
}

.pin-icon:hover .crypto-icon {
    opacity: 1;
    transform: scale(1.1);
}

.pinned-icon {
    opacity: 1;
    border: 1px solid #ffc200;
    border-radius: 50%;
    padding: 1;
    box-shadow: 0 0 5px rgba(240, 185, 11, 0.5);
}

/* Stalling Pairs */
.stale-row {
    opacity: 0.7;
    background-color: #fff3cd !important; /* Light yellow */
    transition: all 0.3s ease;
}
.stale-row:hover {
    opacity: 1;
}
.pair-removed-alert {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #ff4444;
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    z-index: 1000;
    animation: fadeIn 0.3s;
}

/* Search Bar Pair Icons*/
.search-crypto-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin-right: 8px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.platform-link {
    display: inline-block;
    margin-left: 8px;
    text-decoration: none;
}

.platform-link img {
    opacity: 0.7;
    transition: opacity 0.2s;
}

.platform-link:hover img {
    opacity: 1;
}

/*Mobile Menu*/
.mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px
}

.mobile-menu-toggle {
    background: transparent;
    color: #f0b90b;
    border: 1px solid #f0b90b;
    border-radius: 4px;
    font-size: 26px;
    padding: 2px 7px;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(107, 98, 98, 0.4);
    transition: background 0.2s;
}
/* Add to styles.css */
.notes-icon {
    margin-left: 5px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s;
}

.notes-icon.has-notes {
    color: #f0b90b;
    opacity: 1;
    font-weight: bold;
}

.notes-icon:hover {
    opacity: 1;
    transform: scale(1.2);
}

.notes-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Keep the transparency but remove blur */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 2000;
    pointer-events: auto;
    /* Remove this line: backdrop-filter: blur(2px); */
}

.notes-modal {
    background: #2a2f3d;
    border: 1px solid #f0b90b;
    border-radius: 8px;
    width: 380px;
    max-width: 500px;
    max-height: 70vh;
    overflow: auto;
    position: absolute; /* Changed to absolute for draggable */
    top: 20px; /* Initial position */
    left: 50%;
    transform: translateX(-50%);
    cursor: grab;
}
.notes-modal:active {
    cursor: grabbing;
}
.current-price {
    margin-top: 1px;
    font-weight: 500;
    font-family: 'Oxanium', monospace;
    font-size: 0.9em;
    color: #f0b90b;
    min-width: 80px;
    text-align: right;
    margin-left: auto;
}
body.light-theme .notes-modal-overlay {
    background: rgba(255, 255, 255, 0.6); /* White with 60% opacity */
}

body.light-theme .current-price {
    color: #d0a000;
}
.notes-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #3a3f4d;
}
/* Light theme adjustments */
body.light-theme .modal-pair-icon {
    filter: brightness(0.8);
}
/* Adjust header spacing */
.notes-modal-header h3 {
    margin: 0;
    color: #f0b90b;
    font-size: 16px;
    white-space: nowrap;
}
/* Pair header styles */
.pair-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.modal-pair-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.notes-modal-header h3 {
    margin: 0;
    color: #f0b90b;
}

.close-notes-modal {
    background: none;
    border: none;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
}

.close-notes-modal:hover {
    color: #fff;
}

.notes-modal-body {
    padding: 10px 15px;
}

.pair-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #8a8a8a;
}

.notes-textarea {
    width: 90%; /* Reduced from 100% */
    min-height: 100px; /* About 5 lines tall */
    max-height: 100px; /* Fixed height */
    padding: 8px;
    margin: 10px auto; /* Centered with smaller margin */
    background: #1a1e27;
    color: #eaeaea;
    border: 1px solid #3a3f4d;
    border-radius: 4px;
    resize: none; /* Disable resizing */
    font-family: 'Oxanium', monospace;
    font-size: 13px;
    line-height: 1.4;
    overflow-y: auto; /* Scroll if content exceeds 5 lines */
}

.checkboxes-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.checkboxes-container label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkboxes-container input[type="checkbox"] {
    accent-color: #f0b90b;
}

/* Light theme adjustments */
body.light-theme .notes-modal {
    background: #f5f5f5;
    border-color: #d0d0d0;
}

body.light-theme .notes-modal-header {
    border-bottom-color: #e0e0e0;
}

body.light-theme .notes-textarea {
    background: #ffffff;
    color: #333;
    border-color: #d0d0d0;
}

body.light-theme .pair-info {
    color: #666;
}
/* Light theme adjustments */
body.light-theme .price-up {
    color: #0a8f5e !important;
}

body.light-theme .price-down {
    color: #d63031 !important;
}
.price-up {
    color: #0ecb81 !important;
}

.price-down {
    color: #f6465d !important;
}


/* Base font size - will be overridden by JS */
html {
    font-size: 14px;
}

/* Elements that should scale with font size */
body, table, th, td, .pair-name, .price, .change-percent, .volume-value {
    font-size: 1em;
}

/* Elements that should remain fixed size */
.header-button, .tv-screen, .theme-toggle-button,
.refresh-button, .connection-indicator,
.mobile-control-btn, .mobile-arrow {
    font-size: 12px !important;
}

/* Add this if you want the spinning effect in the page too */
.connection-status.connecting::after,
.connection-status.reconnecting::after {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Gauge Text Colors */
#valueText.extreme-fear {
    fill: #FF3131 !important;
}
#valueText.fear {
    fill: #f8d347 !important;
}
#valueText.neutral {
    fill: #eaeaea !important;
}
#valueText.greed {
    fill: rgba(57, 255, 20, 0.76) !important;
}
#valueText.extreme-greed {
    fill: #39FF14 !important;
}
@keyframes pricePulse {
    0% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0.6; transform: scale(1); }
}

.price-update {
    animation: pricePulse 0.5s ease;
    color: #0ecb81 !important;
}

.coin-item.selected {
    background-color: rgba(240, 185, 11, 0.2) !important;
    outline: 1px solid #f0b90b;
}

.coin-item:focus {
    outline: 2px solid #f0b90b;
}
/* Prevent focus on search container */
.search-container:focus {
    outline: none;
}