/*
===============================================================================
 GLOBAL HOVER CLASSES & COLORS (common across most templates)
===============================================================================
*/

.fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
}

.pulse:hover,
.pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

.close:hover,
.close:focus {
  box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}

.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  -webkit-transform: translateY(-0.25em);
  transform: translateY(-0.25em);
}

.up:hover,
.up:focus {
  box-shadow: inset 0 -3.25em 0 0 var(--hover);
}

.slide:hover,
.slide:focus {
  box-shadow: inset 6.5em 0 0 0 var(--hover);
}

.offset {
  box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
}

.offset:hover,
.offset:focus {
  box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
}

/* Color variables for each button style */
.fill {
  --color: #a972cb;
  --hover: #cb72aa;
}

.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e;
}

.close {
  --color: #ff7f82;
  --hover: #ffdc7f;
}

.raise {
  --color: #ffa260;
  --hover: #e5ff60;
}

.up {
  --color: #e4cb58;
  --hover: #94e458;
}

.slide {
  --color: #8fc866;
  --hover: #66c887;
}

.offset {
  --color: #19bc8b;
  --hover: #1973bc;
}

/* Buttons (common) */
button,
.button {
  display: inline-block;
  text-decoration: none;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  background: none;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
  color: var(--color);
}

button:hover,
button:focus,
.button:hover,
.button:focus {
  border-color: var(--hover);
  color: #fff;
}

/* Code color highlight */
code {
  color: #e4cb58;
  font: inherit;
}

/*
===============================================================================
 (1) HOME PAGE
===============================================================================
*/

/* 
  Originally from the first template (the "index" or main page with "🛒 <%= name %>").
  Additional note: This page had a flex-centered body.
*/
.home-page-body {
  color: #fff;
  background: #17181c;
  font: 300 1em "Fira Sans", sans-serif;
  -webkit-box-pack: center;
  justify-content: center;
  align-content: center;
  -webkit-box-align: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  display: -webkit-box;
  display: flex;
}

/* Center the links below the title */
.link-container {
  margin-top: 1em;
}

.buttons h1 {
  font-weight: 400;
}

/*
===============================================================================
 (2) LOGIN PAGE (Enter Password)
===============================================================================
*/

/* 
  Body from the "Enter Password" template 
  – if you don’t want separate body classes, note that whichever style 
    appears last can override earlier duplicates. 
*/
.login-body {
  margin: 0;
  padding: 2em;
  font: 300 1em "Fira Sans", sans-serif;
  background: #17181c;
  color: #fff;
  text-align: center;
}

/* Use a consistent link color across the site, if desired */
a.edit {
  color: #dfdf13;
}

a.view {
  color: green;
}

a.header {
  color: inherit;
  text-decoration: none;
}

.login-body h1 {
  font-weight: 400;
  margin-bottom: 0.4em;
}

/* Form & input styles */
form {
  margin-top: 2em;
}

input[type="password"] {
  padding: 0.5em;
  font: inherit;
  margin-right: 1em;
  border: 2px solid #3a3d41;
  background: #2c2f33;
  color: #ffffff;
}

input[type="password"]:focus {
  outline: none;
  border-color: #dfdf13;
}

/*
===============================================================================
 (3) SALES REPORT PAGE
===============================================================================
*/

.sales-page-body {
  margin: 0;
  padding: 2em;
  font: 300 1em "Fira Sans", sans-serif;
  background: #17181c;
  color: #fff;
  text-align: center;
}

.sales-page-body h1 {
  font-weight: 400;
  margin-bottom: 0.4em;
}

/* Global subtitle style */
.global-subtitle {
  font-weight: 300;
  color: #cccccc;
  margin-bottom: 3em;
}

/* Table container and headings */
.table-block {
  max-width: 100%; 
  margin: 0 auto 4em;
  text-align: left;
}

.table-block h2 {
  font-weight: 300;
  margin-bottom: 1em;
  color: #cccccc;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table thead {
  background-color: #2c2f33;
}

table th,
table td {
  text-align: left;
  padding: 0.75em 1em;
  border: 1px solid #3a3d41;
}

table th {
  font-weight: 400;
}

/*
===============================================================================
 (4) SOURCE REPORT PAGE
===============================================================================
*/

.source-report-body {
  margin: 0;
  padding: 2em;
  font: 300 1em "Fira Sans", sans-serif;
  background: #17181c;
  color: #fff;
  text-align: center;
}

.source-report-body h1 {
  font-weight: 400;
  margin-bottom: 0.4em;
}

/*
===============================================================================
 (5) WRONG PASSWORD PAGE
===============================================================================
*/

.wrong-password-body {
  margin: 0;
  padding: 2em;
  font: 300 1em "Fira Sans", sans-serif;
  background: #17181c;
  color: #fff;
  text-align: center;
}

.wrong-password-body h1 {
  font-weight: 400;
  margin-bottom: 0.4em;
}

/* Reuse .link-container or define anew if needed */

/* Example link container for "Try Again" button */
.link-container {
  margin-top: 1em;
}

/* ----------------------------------
   Sticky Table Header
-------------------------------------*/
/* Make sure the body (or any container) can scroll freely.
   Do NOT set overflow: hidden/auto on the table’s parent. */
body {
  margin: 0;
  padding: 0;
  /* if you already have something like `overflow-y: scroll;`
       or the default page scrolling, that's fine. */
}

/* Your table styles remain the same:
     border-collapse, width, background, etc. */
table {
  width: 100%;
  border-collapse: collapse;
}

/* Sticky header on each <th> */
thead th {
  position: sticky;
  top: 0;
  background-color: #2c2f33; /* match your dark header color */
  z-index: 10; /* ensure it stays above the table rows */
}

/* Sticky first column for BOTH header and body cells */
thead th:first-child,
tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 11; /* ensure it appears above non-sticky cells */
}

tbody.freeze-color td:first-child {
  background-color: #2c2f33;
}


/* If you find the top-left header cell needs a higher z-index 
   (sometimes to avoid overlapping issues), bump it up: */
thead th:first-child {
  z-index: 12;
}

/* Smooth background-color transition */
tbody tr {
  transition: background-color 0.3s ease;
}

/* Change background (and maybe text color) on hover */
tbody tr:hover {
  background-color: #27292d;
  /* Optional: color: #fff; */
  /* Optional: cursor: pointer; (if rows are clickable) */
}

/* Active row highlight for mobile when pressed down */
tbody tr:active {
  background-color: #27292d; /* same highlight as :hover if you wish */
}