.chart-tab-fix {
    margin-top: 32px;
}
.station-tabs { display: none; }
.sn-current-box{
	font-size: .85rem;
	border: 1px solid #ccc;
	padding: 5px;
	margin: 5px 0;
	background-color: #f0faff;
	color : black;
	border-radius: 4px;
	}

.tide-box {
	font-size: .85rem;
	border: 1px solid #ccc;
	padding: 5px;
	margin: 5px 0;
	background-color: #fff7f2;
	color : black;
	border-radius: 4px;
	}


.sn-current-box table, .tide-box table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem !important;
    color: #000 !important;
}

.sn-current-box th, .sn-current-box td, .tide-box th, .tide-box td {
    padding: .2rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-family: monospace;
    font-size: 0.85rem !important;
    color: #000 !important;
}

.station-icon {
    font-size: 16px;
    margin-right: 8px;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
}

.current-icon {
    color: #cc6600; /* Orange to match chart popup */
}

.tide-icon {
    color: #0066cc; /* Blue to match chart popup */
}


.current-row-slack {
	background-color: rgb(232, 238, 248);
}
.current-row-ebb {
	background-color: rgb(252, 238, 236);
}
.current-row-flood {
	background-color: rgb(253, 250, 244);
}

.tide-row-high {
	background-color: rgb(240, 248, 234);
}
.tide-row-low {
	background-color: rgb(243, 255, 255);
}

.sn-current-caption, .tide-caption {
	 font-weight: bold;
	 font-size: 1.1rem;
	 color: #222;
	 margin-bottom: 5px;
}

.current-table-container, .tide-table-container {
	 max-height: 200px;
	 overflow-y: auto;
}

.currents-table, .tides-table {
    width: 100%;
    font-size: 0.8rem;
    color: #000;
}

.currents-table th, .currents-table td, .tides-table th, .tides-table td {
    font-size: 0.85rem;
    color: #000;
}

.fetch-currents-btn {
    background-color: #1e88e5;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.fetch-currents-btn:hover {
    background-color: #1565c0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}


.fetch-tides-btn {
    background-color: #e5781e;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.fetch-tides-btn:hover {
    background-color: #c07015;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.flx-row {
	display: flex;
	flex-direction: row;
	gap: .2rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.latlon {
	font-family: monospace;
	font-size: .9rem;
	color: #333;
}

.error{
	color: red;
}

/* Station Discovery Styles */
.station-discovery-box {
    border: 2px solid #0073aa;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.1);
}

.discovery-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.discovery-icon {
    font-size: 1.2em;
    margin-right: 8px;
}

.discovery-caption {
    font-weight: bold;
    color: #0073aa;
    font-size: 1.1em;
}

.discovery-btn {
    background: #0073aa;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.discovery-btn:hover {
    background: #005a87;
}

.discovery-help {
    font-size: 12px;
    color: #666;
    margin: 8px 0 0 0;
    font-style: italic;
}

.station-tabs {
    display: flex;
    margin-bottom: 6px;
}
.station-tab {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 13px;
    margin-right: 2px;
    border-radius: 4px 4px 0 0;
}
.station-tab.active {
    background: #fff;
    font-weight: bold;
    border-bottom: 1px solid #fff;
}
.station-tab-content {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    padding: 8px 4px;
}
.station-chart-container {
    width: 100%;
    height: 200px;
    min-height: 200px;
    background: #eaf6ff;
}