/* ========================================================
   General Body Styles
======================================================== */
body {
  margin: 0;
  background-color: #f8f9fa;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

/* ========================================================
   Button Section Styles
======================================================== */
.button-section {
  background-color: #fff;
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.button-container a {
  margin: 0 5px;
  padding: 10px 10px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
  width: 200px;
}

.button-container a:hover {
  background-color: #d6d6d6;
  color: #000;
}

/* ========================================================
   Main Content Section
======================================================== */
.main-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 20px;
}

/* ========================================================
   Logo Styles
======================================================== */
.logo {
  max-width: 150px;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

/* ========================================================
   Table Styles
======================================================== */
.table {
  margin: 20px auto;
  width: 80%;
  border-collapse: collapse;
}

.table th, .table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

.table th {
  background-color: #f1f1f1;
}

.table tbody tr:hover {
  background-color: #dcdcdc;
}

.table tbody tr.separator-row {
  background-color: #f5f5f5;
  height: 10px;
}

/* ========================================================
   Buttons
======================================================== */
.btn-sm-custom {
  padding: 4px 8px;
  font-size: 0.875rem;
  color: #000000;
  background-color: #a1a1a1;
  border: none;
  border-radius: 4px;
  width: 80px;
  margin: 2px;
}

.btn-sm-custom:hover {
  background-color: #5a6268;
}

.btn,
.btn-episode-action,
.btn-continue-episode {
  padding: 5px 15px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  margin-top: 10px;
  margin-right: 10px;
  width: 150px;
  display: inline-block;
  border: none;
  background-color: #d3d3d3;
  color: rgb(0, 0, 0);
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
}

.btn:hover,
.btn-episode-action:hover,
.btn-continue-episode:hover {
  background-color: #878787;
}

.btn:disabled,
.btn-episode-action:disabled {
  background-color: #6c6c6c;
  color: #c0c0c0;
  cursor: not-allowed;
  opacity: 0.7;
}

.btn-warning {
  background-color: #999999;
  color: #212529;
}

.btn-warning:hover {
  background-color: #808080;
}

.btn-danger {
  background-color: #a1a1a1;
}

.btn-danger:hover {
  background-color: #878787;
}

/* Adjust width for edit, delete, and search buttons */
.btn-sm-custom.btn-edit,
.btn-sm-custom.btn-delete,
.btn.btn-primary {
  width: 100px;
}

.btn-sm-custom.btn-log,
.btn-sm-custom.btn-finish {
  width: 150px;
}

.btn-sm-custom.btn-details {
  width: 200px;
}

/* ========================================================
   Pagination Controls
======================================================== */
.pagination-controls {
  margin-top: 20px;
}

.pagination-controls .page-link {
  color: #333;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.pagination-controls .page-link:hover {
  background-color: #d6d6d6;
  color: #000;
}

.pagination-controls .page-item.active .page-link {
  background-color: #a1a1a1;
  color: #fff;
  border-color: #a1a1a1;
}

.pagination-controls .page-item.disabled .page-link {
  background-color: #f1f1f1;
  color: #ccc;
  cursor: not-allowed;
}

/* Dark Mode Pagination Controls */
body.dark-mode .pagination-controls .page-link {
  color: #bcbcbc;
  background-color: #2a2a2a;
  border-color: #444;
}

body.dark-mode .pagination-controls .page-link:hover {
  background-color: #333333;
  color: #8c8c8c;
}

body.dark-mode .pagination-controls .page-item.active .page-link {
  background-color: #4a4a4a;
  color: #d0d0d0;
  border-color: #4a4a4a;
}

body.dark-mode .pagination-controls .page-item.disabled .page-link {
  background-color: #2a2a2a;
  color: #8c8c8c;
  cursor: not-allowed;
}

/* ========================================================
   Forms and Tips Containers
======================================================== */
.form-tips-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  margin: 0 auto;
  max-width: 1200px;
  padding: 1rem;
}

.tips-container,
.feedback-container,
.episode-info-container,
.playsheet-input-container,
.playsheet-container {
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px;
}

.playsheet-container {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  margin-top: 30px;
  background-color: #ffffff;
  width: 100%;
  max-width: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.large-textarea {
  height: 300px;
  width: 300px;
}

/* ========================================================
   Date Separator
======================================================== */
.date-separator {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 25px;
}

.date-separator h3 {
  margin: 0;
  padding-right: 10px;
  margin-top: 40px;
}

.date-line {
  flex-grow: 1;
  height: 1px;
  background-color: #ddd;
}

/* ========================================================
   Scroll Buttons
======================================================== */
.scroll-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scroll-buttons .btn {
  width: 100px;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  color: white;
  background-color: #666;
  border-radius: 5px;
}

.scroll-buttons .btn:hover {
  background-color: #444;
}

/* ========================================================
   Navbar
======================================================== */
.navbar {
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f1f1f1;
  border-bottom: 1px solid #ccc;
}

.navbar .nav-link {
  color: #333;
  font-weight: bold;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

.navbar .nav-link:hover {
  color: #000;
  background-color: #d6d6d6;
  border-color: #bcbcbc;
  text-decoration: none;
}

/* ========================================================
   Toggle Switch
======================================================== */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
  margin-left: 15px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 5px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 3px;
}

input:checked + .slider {
  background-color: #666;
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/* ========================================================
   Dark Mode
======================================================== */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode a {
  color: #bcbcbc;
}

body.dark-mode a:hover {
  color: #8c8c8c;
}

body.dark-mode .navbar {
  background-color: #1e1e1e;
  border-bottom: 1px solid #333;
}

body.dark-mode .navbar .nav-link {
  color: #bcbcbc;
}

body.dark-mode .navbar .nav-link:hover {
  color: #8c8c8c;
  background-color: #333333;
  border-color: #444444;
}

body.dark-mode .table {
  background-color: #1e1e1e;
  color: #bcbcbc;
  border-color: #444;
}

body.dark-mode .table th,
body.dark-mode .table td {
  background-color: #2a2a2a;
  color: #bcbcbc;
}

body.dark-mode .table tbody tr:hover {
  background-color: #333333;
}

body.dark-mode .btn-sm-custom {
  color: #000000;
  background-color: #4a4a4a;
}

body.dark-mode .btn-sm-custom:hover {
  background-color: #5a5a5a;
}

body.dark-mode .btn,
body.dark-mode .btn-episode-action,
body.dark-mode .btn-continue-episode {
  background-color: #333;
  color: #bcbcbc;
  border: 1px solid #444;
}

body.dark-mode .btn:hover,
body.dark-mode .btn-episode-action:hover,
body.dark-mode .btn-continue-episode:hover {
  background-color: #444;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #2a2a2a;
  color: #bcbcbc;
  border: 1px solid #444;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #888888;
}

body.dark-mode h3,
body.dark-mode .playsheet-header,
body.dark-mode .date-separator h3 {
  color: #bcbcbc;
}

body.dark-mode .alert {
  background-color: #2a2a2a;
  border-color: #444;
}

body.dark-mode .card {
  background-color: #1e1e1e;
  color: #bcbcbc;
}

body.dark-mode .playsheet-container,
body.dark-mode .playsheet-input-container,
body.dark-mode .tips-container {
  background-color: #1e1e1e;
  color: #bcbcbc;
}

/* Dark mode styles for feedback container */
body.dark-mode .feedback-container {
  background-color: #333; /* Dark background */
  color: #bcbcbc;           /* Light text color */
  border: 1px solid #555; /* Subtle border for feedback container */
}

/* Dark mode styles for form inputs inside feedback container */
body.dark-mode .feedback-container .form-control {
  background-color: #444; /* Darker input field background */
  color: #fff;            /* Input text color */
  border: 1px solid #666; /* Input field border color */
}

/* Dark mode styles for feedback container buttons */
body.dark-mode .feedback-container .btn-secondary {
  background-color: #555; /* Darker button background */
  color: #bcbcbc;            /* Button text color */
  border-color: #666;     /* Button border */
}

body.dark-mode .feedback-container .btn-secondary:hover {
  background-color: #666; /* Slightly lighter background on hover */
  border-color: #777;     /* Hover border color */
}

/* Dedicated class for PRERECORDED checkbox alignment */
.prerecorded-group {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  gap: 10px; /* Space between checkbox and label */
  margin-top: 10px; /* Optional spacing above the group */
}

.prerecorded-checkbox {
  margin: 0; /* Remove default margins */
}

.prerecorded-label {
  margin: 0; /* Remove default margins */
  font-weight: bold; /* Optional: Make text bold */
}

/* Center the PRERECORDED checkbox */
.prerecorded-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Space between checkbox and label */
}
 
 .manage-btn-equal {
  width: 100px;
  display: block;
  margin-bottom: 10px;
 }
 .form-control-container {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.prerecorded-spacing {
  gap: 10px;
}

.user-playsheet-table {
  margin: 20px auto;
  width: 80%; /* Keep it at 80% */
  border-collapse: collapse;
  table-layout: fixed; /* Fixed layout for consistent column widths */
}

.user-playsheet-table th, .user-playsheet-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure Cancon column has sufficient width */
.user-playsheet-table th:nth-child(7), .user-playsheet-table td:nth-child(7) {
  min-width: 50px; /* Prevent squishing */
}

.page-link {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.page-item.disabled .page-link {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary);
}

.page-link:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}