/* --------------------------------------------------
   GLOBAL
-------------------------------------------------- */

body {
    margin: 0;
    padding: 0;
    background-image: url("dist_dark.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: #ddd;
    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; */
    font-family: "Inter", system-ui, sans-serif;
}

/* Optional: keep Bootstrap navbar visually clean over background */
.navbar {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

/* --------------------------------------------------
   STICKY STACK WRAPPER
   (banner + sql-message + table)
-------------------------------------------------- */

.sticky-stack {
	margin-top: var(--bs-navbar-height) -10px; /* space below navbar */
    background-color: rgba(22, 22, 19, 0.95);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sql-message {
    background-color: rgba(0, 0, 0, 1);
    padding: 10px 15px;
    margin: 0;

    min-height: 60px;
    height: auto;
    overflow: visible;
    position: relative;
    z-index: 30;
	border-bottom: 1px solid #111; /* closes the seam */
}

.sticky-stack > div:nth-child(2) {
  background-color: rgba(22, 22, 19, 0.95);
  border-top: 1px solid #111; /* meets the sql-message border */
}


/* --------------------------------------------------
   TABLE BASE STYLES
-------------------------------------------------- */

table {
    width: 100%;
    border-collapse: separate;
	border-spacing: 1px;
}

table th,
table td {
    border-color: rgb(54, 59, 50);
    font-size: 16px;
    white-space: nowrap;
}

/* Header row sticky at top */
table thead {
	min-height: 40px;
    position: sticky;
    top: 10;
    z-index: 25;
    background: rgba(22, 22, 19, 0.95);
}

table thead th {
	min-height: 60px;
    background: rgba(22, 22, 19, 0.95);
    color: grey;
}

/* --------------------------------------------------
   FROZEN FIRST TWO COLUMNS
-------------------------------------------------- */

/* Freeze column 1 */
table td:nth-child(1),
table th:nth-child(1) {
	position: sticky;
    left: -1px; /* slight overlap to hide border */
  /* Creates a 1px solid 'shield' on the right side of the column */
  	z-index: 3;
    background: black;
	background-color: black; /* or your dark theme color */
}

/* Freeze column 2 — JS sets left offset dynamically
table td:nth-child(2),
table th:nth-child(2) {
    position: sticky;
	left: calc(var(--firstColWidth) - 1px);
    z-index: 2;
    background: black;
	background-color: black;
}
*/

/* Make frozen column headers ALSO sticky at the top */
table th:nth-child(1)/*,
table th:nth-child(2)*/ {
    top: 0;
    z-index: 1; /* above body cells */
    background: black;
}

/* --------------------------------------------------
   SCROLLBAR STYLING
   (applies to div.scrollbar ...)
-------------------------------------------------- */

.scrollbar {
    scrollbar-color: #444 #111; /* Firefox */
    scrollbar-width: thin;
}

/* WebKit-based browsers */
.scrollbar::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.scrollbar::-webkit-scrollbar-track {
    background: #111;
}

.scrollbar::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 6px;
    border: 2px solid #111; /* contrast against track */
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Bottom-right corner where vertical & horizontal scrollbars meet */
.scrollbar::-webkit-scrollbar-corner {
    background: #111;
}

/* --------------------------------------------------
   SMALL TWEAKS
-------------------------------------------------- */

/* Make table text color consistent with your theme */
table tbody td {
    color: rgb(161, 159, 159);
}

/* Ensure links in headers stay visible */
table thead th a {
    color: grey;
    text-decoration: none;
}

/* Mobile Only Styles */
/* This targets mobile and forces it to 10px */
@media screen and (max-width: 600px) {
    table th,
    table td {
        font-size: 11px !important;
        color: #f9f9fa !important; 
        padding: .28rem .28rem !important;
    }
}