/* shottracker/assets/scss/shottracker.scss */
/* Basic styling for layout */
.st-form-group {
  margin-bottom: 1rem;
}
.st-form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.st-form-group input[type=text],
.st-form-group input[type=number] {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem;
}

#st-shooters-list {
  margin-top: 1rem;
}

.st-shooter-entry {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.st-shooter-entry input {
  flex-grow: 1;
}
.st-shooter-entry .st-remove-shooter {
  margin-left: 0.5rem;
  background-color: #dc3232;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}

#st-add-shooter-row.st-button {
  display: flex;
  justify-content: center;
  background-color: #333; /* Your desired dark color */
  color: #fff; /* White text for contrast */
  border: 1px solid #555;
  transition: background-color 0.2s ease, transform 0.1s ease;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
}
#st-add-shooter-row.st-button:hover {
  background-color: #555;
}
#st-add-shooter-row.st-button:active {
  background-color: #666;
}

#st-save-round.st-button {
  background-color: #dfdfdf;
}

#st-start-round-from-template.st-button {
  background-color: #dfdfdf;
}

/* --- Round Details Table Discipline --- */
#st-round-details-content {
  overflow-x: auto; /* The command to allow horizontal swiping */
  -webkit-overflow-scrolling: touch; /* Improves the swipe feel on mobile */
  /* The familiar styling to create our contained "window" */
  background-color: rgba(255, 255, 255, 0.85);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- New Table Styles --- */
.st-scoring-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}
.st-scoring-table th, .st-scoring-table td {
  padding: 8px 12px;
  text-align: center;
  border: 1px solid #ddd;
}
.st-scoring-table th {
  background-color: #f2f2f2;
}
.st-scoring-table td:first-child {
  text-align: left;
  font-weight: bold;
}
.st-scoring-table .st-score-input {
  width: 50px;
  text-align: center;
}

#st-scoring-grid-container {
  overflow-x: auto; /* This is the magic: allows horizontal scrolling/swiping */
  -webkit-overflow-scrolling: touch; /* Improves the swipe feel on iOS devices */
  /* This creates the semi-transparent background for the "window" */
  background-color: rgba(255, 255, 255, 0.75);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- Workflow Step Container Styling --- */
.st-workflow-step {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.st-workflow-step h2 {
  margin-top: 0;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

/* --- Round Workflow Selection Lists --- */
.st-selection-list ul {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-width: 500px;
}
.st-selection-list li {
  padding: 1rem;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 1.1rem;
}
.st-selection-list li:last-child {
  border-bottom: none;
}
.st-selection-list li:hover {
  background-color: #f9f9f9;
}

/* --- Focused View Styles --- */
#st-focused-view {
  max-width: 500px;
  margin: 0 auto;
}

.st-focused-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem 1.5rem;
}

#st-focused-station-title {
  margin: 0; /* Remove default margins */
}

.st-focused-scorer {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  text-align: center;
}

.st-shooter-nav {
  font-size: 3rem;
  color: #333;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}
.st-shooter-nav:hover {
  color: #555;
}

.st-current-shooter h3 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

/* --- Hit/Miss Button Styles --- */
.st-hit-miss-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

/* --- Quick Score Button Discipline --- */
.st-quick-score-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Allows them to wrap if there are too many */
  gap: 0.5rem; /* Space between buttons */
  margin-top: 1rem; /* Space below the Hit/Miss buttons */
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1); /* A subtle separator */
}

.st-quick-score-btn {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  color: #444;
  border-radius: 50%; /* Make them perfectly round */
  width: 2.5rem; /* A small, precise target */
  height: 2.5rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.st-quick-score-btn:hover {
  background-color: #e0e0e0;
  border-color: #bbb;
}

.st-quick-score-btn:active {
  background-color: #3e95cd;
  color: #fff;
  border-color: #3e95cd;
  transform: scale(0.95);
}

.st-score-btn {
  padding: 1.5rem 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 8px;
  border: 2px solid;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}
.st-score-btn:active {
  transform: translateY(2px);
}

.st-hit-btn {
  background-color: #dff0d8;
  border-color: #c4e3b4;
  color: #3c763d;
}

.st-miss-btn {
  background-color: #f2dede;
  border-color: #ebcccc;
  color: #a94442;
}

.st-button-container {
  display: flex;
  justify-content: center; /* This centers the button horizontally */
  align-items: center; /* This vertically aligns it, just in case */
  padding: 1rem 0; /* Adds some breathing room */
}
.st-button-container button {
  align-self: center;
  background-color: #333;
}
.st-button-container button:active {
  transform: translateY(2px);
  background-color: #666;
}

.st-dashboard-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

#st-save-round.st-button {
  align-self: center;
  background-color: #333;
}
#st-save-round.st-button:active {
  transform: translateY(2px);
  background-color: #666;
}

/* --- New Modal Styles --- */
.st-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
}
.st-modal .st-modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  position: relative;
}
.st-modal .st-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
}
.st-modal .st-modal-close:hover, .st-modal .st-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* --- Zoom Straitjacket --- */
body.st-no-zoom {
  touch-action: manipulation; /* Disables double-tap to zoom */
}

/* --- Header Layout --- */
.st-page-header {
  display: flex;
  flex-direction: column; /* Stacks the title and button vertically */
  align-items: center; /* Centers them horizontally */
  gap: 0.5rem; /* Adds a small space between them */
  margin-bottom: 2rem; /* Pushes the venue list down */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Adds a subtle separator line */
  padding-bottom: 1.5rem;
}

/* --- Main "Add New Venue" Button --- */
#st-dashboard-add-venue.st-button {
  background-color: #333; /* Your desired dark color */
  color: #fff; /* White text for contrast */
  border: 1px solid #555;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#st-dashboard-add-venue.st-button:hover {
  background-color: #555; /* A slightly lighter grey on hover */
}

#st-dashboard-add-venue.st-button:active {
  background-color: #666;
  transform: translateY(1px); /* The press-down effect */
}

#st-dashboard-add-shooter.st-button {
  display: flex;
  justify-content: center;
  background-color: #333; /* Your desired dark color */
  color: #fff; /* White text for contrast */
  border: 1px solid #555;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#st-dashboard-add-shooter.st-button:hover {
  background-color: #555; /* A slightly lighter grey on hover */
}

#st-dashboard-add-shooter.st-button:active {
  background-color: #666;
  transform: translateY(1px); /* The press-down effect */
}

.st-dashboard-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: 2rem auto;
}

.st-dashboard-nav a {
  display: block;
  padding: 2rem 1rem;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  transition: all 0.2s ease-in-out;
}

.st-dashboard-nav a:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #e9e9e9;
}

/* --- Shooter List Styles --- */
.st-shooter-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.st-shooter-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  transition: background-color 0.2s;
}
.st-shooter-list li:last-child {
  border-bottom: none;
}
.st-shooter-list li:hover {
  background-color: #f9f9f9;
}

.st-delete-btn {
  display: none;
  background-color: #dc3232;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.is-admin-view .st-delete-btn {
  display: inline-block;
}

.st-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- Workflow Control Discipline --- */
#st-start-round-from-template,
#st-save-round,
.st-shooter-select,
#st-create-new-shooter {
  display: block;
  width: 100%; /* Command them to fill their available space */
  box-sizing: border-box; /* Ensure padding does not break the layout */
  padding: 0.75rem 1rem; /* Give them a satisfying, chunky padding */
  font-size: 1.1rem; /* Increase the font size to a readable, confident weight */
  text-align: center;
  margin-top: 1rem; /* Ensure they have breathing room */
}

/* --- Dropdown Option Discipline --- */
.st-shooter-select option {
  /* Revert the font size for the options to a standard, readable size */
  font-size: 1rem;
  /* Give the options clean, but not bloated, padding */
  padding: 8px;
}

/* Specific adjustment for the text alignment in the select dropdown */
.st-shooter-select {
  text-align-last: center;
}

/* --- Round List Styles --- */
.st-rounds-container {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.75);
}

.st-round-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}
.st-round-list .round-date {
  font-weight: bold;
}
.st-round-list .round-course {
  color: #555;
}
.st-round-list .round-shooters {
  text-align: right;
  color: #333;
}

/* --- Disciplined List Styling --- */
.st-round-list li,
.st-selection-list li { /* This will style the Venue and Course selection lists as well */
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.st-round-list li:hover,
.st-selection-list li:hover {
  background-color: rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* --- Course List Styles --- */
.st-course-list-container {
  padding: 0 1rem 1rem 1rem;
}
.st-course-list-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.st-course-list-container li {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-top: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.st-course-list-container li:first-child {
  border-top: 1px solid #eee;
}
.st-course-list-container li:hover {
  background-color: #efefef;
}

/* --- Individual Venue Item Styling --- */
.st-venue-item {
  background-color: rgba(0, 0, 0, 0.1); /* A subtle dark tint to separate it from the main background */
  border: 1px solid #444; /* The dark border you wanted */
  border-radius: 8px;
  padding: 0.75rem 1.25rem; /* "Brings the text in from either side" */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* --- "Edit" and "Add Course" Buttons --- */
.st-venue-actions .st-button-secondary {
  background-color: #444;
  color: #eee;
  border: 1px solid #666;
  padding: 0.3rem 0.8rem; /* A bit smaller than the main button */
  font-size: 0.9em;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}

.st-venue-actions .st-button-secondary:hover {
  background-color: #666;
}

.st-venue-header h3 {
  color: #222; /* Ensures the venue name is dark and readable */
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); /* A slight glow to lift it off the background */
}

.st-venue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.st-venue-header:hover {
  background-color: #f9f9f9;
}

#st-course-details-content {
  display: flex;
  flex-direction: column;
  align-content: center;
  padding: 6px 12px;
}
#st-course-details-content .st-station-list {
  padding-inline-end: 40px;
}
#st-course-details-content .st-station-list li {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Force its children to opposite ends */
  align-items: center; /* Align them perfectly in the middle vertically */
}
#st-course-details-content .st-station-list li .st-station-target-input {
  max-width: 20px;
}

#st-save-course-details.st-button {
  display: flex;
  justify-content: center;
  background-color: #333; /* Your desired dark color */
  color: #fff; /* White text for contrast */
  border: 1px solid #555;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#st-save-course-details.st-button:hover {
  background-color: #555; /* A slightly lighter grey on hover */
}

#st-save-course-details.st-button:active {
  background-color: #666;
  transform: translateY(1px); /* The press-down effect */
}

body {
  background-image: url("https://sportingclays.douglasmccann.com/wp-content/uploads/sites/2/2025/10/rabbitpoofbig.png");
  background-size: cover; /* This makes the image cover the whole screen */
  background-position: center center; /* This centers the image */
  background-repeat: no-repeat; /* This prevents the image from tiling */
  background-attachment: fixed; /* This makes the background stay in place when you scroll */
}

#st-final-scorecard-view {
  background-color: rgba(255, 255, 255, 0.75);
}

.st-dashboard-container {
  background-color: rgba(255, 255, 255, 0.75);
}

#st-new-round-workflow {
  background-color: rgba(255, 255, 255, 0.75);
}

/* --- Styling the WordPress Login Form Elements (Forceful Version) --- */
.st-welcome-container {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0 12px;
}
.st-welcome-container .st-welcome-hero {
  background-color: rgba(255, 255, 255, 0.75);
  font-size: 1.25rem;
  color: #111;
  padding: 6px 12px;
}

.st-welcome-login #loginform p {
  margin-bottom: 1rem;
}

.st-welcome-login #loginform label {
  display: block;
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #444;
}

/* We target the specific input IDs for undeniable control */
.st-welcome-login #loginform #user_login,
.st-welcome-login #loginform #user_pass {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem; /* Ensures the text is a readable size */
}

/* --- Styling the Login Button with Absolute Specificity --- */
.st-welcome-login #loginform .login-submit #wp-submit {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem; /* Adds a little space above the button */
  border: 1px solid #555;
  background-color: #333;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.st-welcome-login #loginform .login-submit #wp-submit:hover {
  background-color: #555;
}

.st-welcome-login #loginform .login-submit #wp-submit:active {
  background-color: #666;
  transform: translateY(1px);
}

.st-welcome-login #loginform .login-remember {
  text-align: left;
  font-size: 0.9em;
  margin-top: 1rem;
}

/* --- Stats Page Container & Table Styling --- */
/* This styles the box that will contain our stats table */
#st-overall-stats-table {
  background-color: rgba(0, 0, 0, 0.1); /* A subtle dark tint */
  border: 1px solid #444; /* The dark border you requested */
  border-radius: 8px;
  padding: 1rem 1.5rem; /* Pushes the content off the edge */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* This styles the table itself once it's populated with data */
.st-stats-table {
  width: 100%;
  border-collapse: collapse; /* Makes the borders clean and sharp */
  color: #333; /* Dark text for readability */
}

/* Styling for all table cells, header and body */
.st-stats-table th,
.st-stats-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Styling for the header row */
.st-stats-table thead th {
  background-color: rgba(0, 0, 0, 0.2);
  font-weight: bold;
  color: #111;
}

/* This creates the alternating "striped" effect on the data rows */
.st-stats-table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05);
}

/* --- Responsive Styles for the Stats Table --- */
@media screen and (max-width: 768px) {
  /* 1. The old header is no longer needed. It will be hidden. */
  .st-stats-table thead {
    display: none;
  }
  /* 2. Each row will become its own distinct, card-like block. */
  .st-stats-table tr {
    display: block;
    margin-bottom: 1rem;
    border-bottom: 2px solid #333;
    padding-bottom: 1rem;
  }
  .st-stats-table tr:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
  }
  /* 3. Each cell will stack vertically. */
  .st-stats-table td {
    display: block;
    text-align: right; /* The data will align to the right. */
    font-size: 1.1em;
    padding: 0.5rem 0;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
  }
  .st-stats-table td:last-child {
    border-bottom: none;
  }
  /* 4. This is the act of creation. The hidden data-label
        will now appear as a pseudo-element on the left. */
  .st-stats-table td::before {
    content: attr(data-label);
    float: left; /* The label will align to the left. */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    color: #111;
  }
}
/* --- Stats Section Discipline --- */
.st-stats-section {
  background-color: rgba(255, 255, 255, 0.85); /* The familiar container style */
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 2rem; /* Creates clean separation between sections */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.st-stats-header {
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* A sharp dividing line */
  text-align: center;
  color: #333;
}

/* --- Chart Discipline --- */
#st-date-stats-chart-container {
  position: relative;
  /* We give it a defined, disciplined height */
  height: 450px;
  /* We command it to scroll, not to spill */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  /* A subtle inner border */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/*# sourceMappingURL=shottracker.css.map */