:root {
  /* The "Cloud Dancer" Palette */
  --bg-primary: #06244a;       
  --bg-secondary: #EBEBE4;     /* Slightly darker for cards/sections */
  --text-main: #2D2D2D;        /* Soft Charcoal (Better than pure black) */
  --text-muted: #62625D;       /* For descriptions and labels */
  --accent-primary: #0d6efd;   /* Slate Blue for buttons/links */
  --accent-hover: #364958;     /* Darker Slate for hover states */
  --border-color: #D1D1CB;     /* Subtle borders */
  
  /* Layout Constants */
  --radius-lg: 16px;           /* For your square logo container */
  --radius-sm: 8px;            /* For the login button */
}

/* Global Styles */
body {
  background-color: white;
  color: var(--text-main);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto; /* Defines rows: auto-sized header, growing main content, auto-sized footer */
  min-height: 100vh; /* Ensures the body is at least the height of the viewport */
}

.head-back {
	background-color: #06244a;
	color:white;
	width:100%;
	
}
.head-back p {
	color:white;
}

.g_id_signin {width:176px;}

/* Desktop / Tablet Settings */
.main-banner {
    float: right;
    height: 13rem;
    margin-top: -.9rem;
    margin-right: 2rem;
}

#site-nav {
  background-color: #06244a;
  margin-top: 0;
  position: relative;
  left: -0.5rem;

  padding: 0;
}

#site-nav .nav-link,
#site-nav .navbar-nav a {
  color: #0d6efd;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
}

#site-nav .nav-link:hover { color: white; }

#site-nav .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.75);
}
#site-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#site-nav .dropdown-menu {
  background-color: #06244a;
  border: 1px solid white;
  z-index: 1000;
}
#site-nav .dropdown-item {
  color: #0d6efd;
  font-weight: bold;
  font-size: 0.9rem;
}
#site-nav .dropdown-item:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

#site-nav .dropdown-toggle::after {
  border-top-color: #0d6efd;
}

.lead {line-height: 1.2;}

/* Mobile Settings (Screens 400px and smaller) */
@media screen and (max-width: 400px) {
    .main-banner {
        float: none;      /* Remove the float so it doesn't squish text */
        display: inherit;  /* Allows centering */
        margin: 0.5rem auto; /* Centers the logo */
    /* Much more reasonable height for mobile */
        padding-right: 0;
		max-width:252px;
		text-align:center;

    }
	.table-container {max-width:350px;}
	p {max-width:300px;}
	
	.dt-search {
			flex-wrap: wrap;       /* Allows items to move to the next line */
			justify-content: center; /* Centers items once they wrap */
		}

	#sourceFilterContainer {
		justify-content: center;
		width: 100%;           /* Forces filters to take their own line if needed */
		margin-right: 0;       /* Removes the gap on the right for better centering */
		margin-bottom: 10px;   /* Adds space between filters and search box */
	}

	div.dt-container .dt-search input {
		width: 100% !important; /* Makes the search bar full width on mobile */
		margin-left: 5px 0 !important;
	}	
	

}


footer {
	background-color: #06244a;
	color:white;
	padding:2rem;
}
footer a:hover, footer a:visited {color:white;}

h1 {color:white;}
/* Typography */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.02em; /* Tighter spacing for a modern look */
  margin-bottom: 1rem;
}

h2, h3, h4 {
	color:#06244a;
}

h4 {
font-size:1.2rem;}

p {
  color: var(--text-muted);
  line-height: 1.3rem;
  margin-top:.5rem;
  max-width:700px; 
}

ul, ol {
	margin-top:.5rem;
}

.text-back{
	font-size:.85rem;
	background-color: #06244a;
	border: 1px solid #06244a;
	border-radius: 12px;
	padding: 1px 4px;
	margin:0 1px;
	color:white;
}

/* Links */
a, li a {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

a:hover, li a:hover {
  color: #00008B;
  text-decoration: underline;
}
a:visited, li a:visited {
	color:#00008B;
}

#magic-link-section a {color:white;}
#magic-link-section a:hover {color:white;}
.requiredfield {color:red;}

div.dt-container .dt-search input {border: 2px solid #5456b7 !important; width:200px !important;}

h1, h2, h3 {
	margin-top:10px;
	margin-bottom:0;
}
table.dataTable > tbody > tr > td {
	padding:.2rem 1rem;
}
.dt-length > label:nth-child(2) {margin-left:1rem;}
div.dt-container .dt-paging .dt-paging-button {
	padding:0 !important;
}
table.dataTable tbody td, .dtr-data {
    word-break: break-word;
    white-space: normal;

}


.source-icon {
	height: 1rem;
	margin: .4rem -.5rem -2.5rem 0;
	float: left;	
	
}

.fa-edit:hover {
	cursor:pointer;
}
@keyframes highlight-fade {
    0% { background-color: #6495ed; } /* Soft blue highlight */
    100% { background-color: transparent; }
}

.row-highlight {
    animation: highlight-fade 6s ease-out forwards;
}

#recentspots_wrapper {margin-top:3rem;}

/* Subtly highlight POTA spots */
.row-pota {
    background-color: #e8f5e9 !important; /* Very light green */
}

/* Optional: Highlight manual spots to make them pop */
.row-manual {
    border-left: 4px solid #007bff; /* Blue "Verified" stripe on the left */
}
	
/* The Background Overlay */
.modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align:center;

  align-items: center; /* Centers vertically */
  background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */

}

/* The Modal Box */
.modal-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);

  margin:auto;

}

/* Close Button (X) */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}


/* Make the search container a flex row */
.dt-search {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

/* The container for our buttons */
#sourceFilterContainer {
    display: flex !important;
    gap: 5px;
    margin-right: 10px;
}

/* Turn the labels into small, clickable "pill" buttons */
.filter-btn-label {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #444;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1.2;
}

/* Hide the actual checkbox input completely */
.source-filter {
    display: none !important;
}



/* Manual / Spotted Ham (Yellow) */
#filter-manual:checked + .filter-btn-label {
    background-color: #e6b800;
    color: white;
    border-color: #cca300;
}

/* POTA (Green) */
#filter-pota:checked + .filter-btn-label {
    background-color: #1b5e20;
    color: white;
    border-color: #1b5e20;
}

/* SOTA (Blue) */
#filter-sota:checked + .filter-btn-label {
    background-color: #0d6efd;
    color: white;
    border-color: #0b5ed7;
}

/* DX Cluster (Purple) */
#filter-dxcluster:checked + .filter-btn-label {
    background-color: #6f42c1;
    color: white;
    border-color: #59359a;
}

/* --- HOVER STATES (Specific Colors) --- */

.filter-btn-label:hover {
    background-color: #e2e2e2;
    cursor: pointer;
}

#filter-manual:checked + .filter-btn-label:hover { background-color: #cc9900; }
#filter-pota:checked + .filter-btn-label:hover { background-color: #144b19; }
#filter-sota:checked + .filter-btn-label:hover { background-color: #0b5ed7; }
#filter-dxcluster:checked + .filter-btn-label:hover { background-color: #59359a; }

/* --- ROW HIGHLIGHTS --- */

.manual-row-highlight {
    border-left: 6px solid #e6b800 !important;
}

.pota-row-highlight {
    border-left: 6px solid #1b5e20 !important;
}

.sota-row-highlight {
    border-left: 6px solid #0b5ed7 !important;
}

.dxcluster-row-highlight {
    border-left: 6px solid #6f42c1 !important;
}



.member {
    border-right: 6px solid #e6b800 !important;
}


/* Restore DataTables alternating row colors */
table.dataTable.stripe tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Or any light color from your palette */
}

table.dataTable.stripe tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* Ensure your custom highlights still work but play nice with striping */
.row-pota {
    background-color: #e8f5e9 !important; 
}

/* If you want the 'odd' pota rows to be slightly darker to maintain striping: */
table.dataTable.stripe tbody tr.row-pota:nth-child(odd) {
    background-color: #dceddc !important;
}

table.dataTable.stripe tbody tr:hover{
    background-color: #e8e8e8; /* Or any light color from your palette */
}

/*adding button to right of filter*/
.dataTables_filter {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Keeps it on the right */
}

.dataTables_filter label {
    margin-bottom: 0; /* Fixes alignment for Bootstrap */
}

#bellFollowBtn {
    height: 38px; /* Matches standard Bootstrap input height */
    padding: 0 3px;
	cursor:pointer;
	border:0;
}
#bellFollowBtn:hover {
	height:38px;
	border:0;
}