:root {
  --css-version: "2.1.3"; /* Incremented CSS version */
}
/* Importing the Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
.rules {
	line-height: 1.5;
	font-size: 12px;
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
	margin-bottom: 5px;
}
.style0 {
	line-height: 1.5;
	font-size: 12px;
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
	margin-bottom: 0px;
	vertical-align: middle;
}
.style1 {
	line-height: 1.5;
	font-size: 16px;
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
	margin-bottom: 0px;
	vertical-align: middle
}
.style2 {
	line-height: 1.5;
	font-size: 20px;
	margin-bottom: 5px;
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
}
.style3 {
	line-height: 1.5;
	font-size: 28px;
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
	text-transform: uppercase; /* Make all text uppercase */
	margin-bottom: 0px;
}	
.style3 sup {
	font-size: 0.5em; /* Make the superscript smaller */
    vertical-align: super; /* This makes it appear as a superscript */
}
.style4 {
	font-size: 30px;
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
}
.first-letter {
    font-size: 1.25em; /* Make the first letter larger */
}
body,td,th {
	line-height: 1.5;
	color: #FFF;
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
}
body {
	line-height: 1.5;
	background-color: var(--theme-brand);
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	margin-top: 0px;
}
a:link {
	color: #FFF;
}
a:visited {
	color: #FFF;
}
a:hover {
	color: #FFF;
}
a:active {
	color: #FFF;
}
.songbook-container-title {
    background-color: var(--app-panel-deep); /* Black background */
	line-height: 1.5;
    color: white; /* White text */
    font-size: 28px; /* Adjust the font size */
    /*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
    padding: 0px; /* Space around the text */
    text-align: center; /* Center the text */
    border: 5px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
	text-transform: uppercase; /* Make all text uppercase */
	margin-top: 5px;
	margin-bottom: 2px;
}
.songbook-container-title sup2 {
	font-size: 0.5em; /* Make the superscript smaller */
    vertical-align: super; /* This makes it appear as a superscript */
}
.songbook-container-header {
    background-color: var(--app-panel-deep); /* Black background */
	line-height: 1.5;
    color: white; /* White text */
    font-size: 16px; /* Adjust the font size */
    /*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
    padding: 0px; /* Space around the text */
    text-align: center; /* Center the text */
    border: 5px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
}
.songbook-container {
    background-color: var(--app-panel-deep); /*Black background */
	line-height: 1.5;
    color: white; /* White text */
    font-size: 16px; /* Adjust the font size */
    /*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
    padding: 0px; /* Space around the text */
    text-align: left; /* Center the text */
    border: 5px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
	margin-bottom: 5px;
	margin-top: 0px;
}
.songbook-container-right {
    background-color: var(--theme-brand); /* Black background */
	line-height: 1.5;
    color: white; /* White text */
    font-size: 16px; /* Adjust the font size */
    /*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
    padding: 0px; /* Space around the text */
    text-align: right; /* Center the text */
    border: 5px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
}
.browse-container-title {
    background-color: var(--app-panel-deep); /* Black background */
	line-height: 1.5;
    color: white; /* White text */
    font-size: 28px; /* Adjust the font size */
    /*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
    padding: 0px; /* Space around the text */
    text-align: center; /* Center the text */
    border: 5px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
	text-transform: uppercase; /* Make all text uppercase */
	margin-bottom: -2px;
}
.browse-container {
    background-color: var(--theme-brand); /* Black background */
	line-height: 1.5;
    color: white; /* White text */
    font-size: 30px; /* Adjust the font size */
    /*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
    padding: 0px; /* Space around the text */
    text-align: left; /* Center the text */
    border: 5px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
	margin-bottom: 2px;
}
.browse-container-title sup3 {
	font-size: 0.5em; /* Make the superscript smaller */
    vertical-align: super; /* This makes it appear as a superscript */
}
.browse-container-header {
    background-color: var(--theme-brand); /* Black background */
	line-height: 1.5;
    color: white; /* White text */
    font-size: 18px; /* Adjust the font size */
    /*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
    padding: 0px; /* Space around the text */
    text-align: left; /* Center the text */
    border: 5px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
}
.browse-style {
	line-height: 1.5;
	font-size: 16px;
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
}
.browse-style make-bigger {
	line-height: 1.5;
	font-size: 30px;
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
}
.browse-detail-style {
	line-height: 1.5;
	font-size: 16px;
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
	border: 5px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
}
.kamikaze-body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 2px;
	background-color: var(--theme-brand);
	background-image: url(perryoke-kamikaze.png);
	background-repeat: no-repeat;
}
.kamikaze-style {
	line-height: 1.5;
	font-size: 16px;
	/*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
}
.songbook-stats {

    display: block;

    width: 100%;

    box-sizing: border-box;

    font-size: 12px;

    line-height: 1.2;

    color: var(--app-muted);

    background-color: #000; /* Adds the black background */

    text-align: center !important;

    margin: -10px auto 4px auto; /* Negative top margin pulls stats closer to title */

    padding: 4px 8px 9px 8px; /* Top: 4px, Right: 8px, Bottom: 9px (+5px), Left: 8px */

    opacity: 0.8;

    font-family: 'Poppins', sans-serif;

    font-weight: 400;

} 


/* Remove default paragraph margins inside forms/sections */
p {
	margin-top: 2px;
	margin-bottom: 2px;
}
#add-to-home-screen {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 15px 30px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
}

#add-to-home-screen:hover {
  background-color: #0056b3;
}
.main-container {
    background-color: var(--theme-brand); /* Black background */
	line-height: 1.5;
    color: white; /* White text */
    font-size: 16px; /* Adjust the font size */
    /*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
    padding: 0px; /* Space around the text */
    text-align: left; /* Center the text */
    border: 2px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
	margin-bottom: 0px;
	margin-top: 0px;
}
.tip-container {
    background-color: var(--theme-brand); /* Black background */
	line-height: 1.5;
    color: white; /* White text */
    font-size: 16px; /* Adjust the font size */
    /*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
    padding: 0px; /* Space around the text */
    text-align: left; /* Center the text */
    border: 2px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
	margin-bottom: 2px;
	margin-top: -8px;
}
.add-container-header {
    background-color: var(--app-panel-deep); /* Black background */
	line-height: 1.5;
    color: white; /* White text */
    font-size: 16px; /* Adjust the font size */
    /*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
    padding: 0px; /* Space around the text */
    text-align: center; /* Center the text */
    border: 5px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
}
.show-container {
    background-color: var(--app-panel-deep); /*Black background */
	line-height: 1.5;
    color: white; /* White text */
    font-size: 16px; /* Adjust the font size */
    /*font-family: Geneva, Arial, Helvetica, sans-serif;*/
	font-family: 'Poppins', sans-serif;
    padding: 0px; /* Space around the text */
    text-align: left; /* Center the text */
    border: 5px var(--theme-brand); /* TSU Purple border around the text */
    border-radius: 0px; /* Optional: rounded corners */
	margin-bottom: 5px;
	margin-top: 0px;
}
/* Base Button Style */
button, .btn {
  background: linear-gradient(135deg, var(--theme-brand), var(--theme-brand)); /* Gradient from lighter to darker purple */
  color: white; /* Text color */
  border: 2px solid white; /* White stroke around the button */
  border-radius: 12px; /* Rounded corners */
  padding: 4px 12px; /* Reduced vertical and horizontal padding for thinner buttons */
  font-size: 14px; /* Slightly smaller text size */
  font-family: 'Poppins', sans-serif; /* Font family */
  font-weight: bold; /* Bold text */
  cursor: pointer; /* Pointer cursor on hover */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  text-decoration: none;
}

/* Button Hover Effect */
button:hover, .btn:hover {
  background: linear-gradient(135deg, var(--app-border), var(--theme-brand)); /* Lighter purple to more vibrant purple */
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
  border-color: var(--app-border); /* Change border color on hover for better contrast */
}

/* Button Focus (when clicked) */
button:focus, .btn:focus {
  outline: none; /* Remove default outline */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 60%, transparent); /* Soft purple glow effect */
  border-color: var(--app-border); /* Maintain focus border color */
}

/* Button Disabled Style */
button:disabled, .btn:disabled {
  background: linear-gradient(135deg, var(--app-text), var(--app-text)); /* Muted gradient for disabled button */
  color: #aaa; /* Light gray text */
  cursor: not-allowed; /* Disabled cursor */
  box-shadow: none; /* Remove shadow */
  border-color: var(--app-text); /* Light border for disabled state */
}

/* Active Button (on click) */
button:active, .btn:active {
  background: linear-gradient(135deg, var(--theme-brand), var(--theme-brand)); /* Darker purple when clicked */
  transform: translateY(2px); /* Pressed effect */
  box-shadow: none; /* Remove shadow when active */
  border-color: var(--theme-brand); /* Darker border when active */
}

/* Additional Button Style (Outline button) */
.btn-outline {
  background: transparent; /* Transparent background */
  color: var(--theme-brand); /* Purple text */
  border: 2px solid white; /* White stroke around the outline button */
  padding: 8px 18px; /* Same padding as regular buttons for consistency */
  border-radius: 12px;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: linear-gradient(135deg, var(--theme-brand), var(--app-border)); /* Purple gradient on hover */
  color: white; /* White text on hover */
  border-color: var(--app-border); /* Change border color on hover */
}

/* Dropdown Select Style */
select {
  background: linear-gradient(135deg, var(--theme-brand), var(--theme-brand)); /* Gradient background from lighter to darker purple */
  color: white; /* Text color */
  border: 2px solid white; /* White stroke around the select */
  border-radius: 12px; /* Rounded corners */
  padding: 8px 18px; /* Padding inside the select element */
  font-size: 14px; /* Font size */
  font-family: 'Poppins', sans-serif; /* Font family */
  font-weight: bold; /* Bold text */
  cursor: pointer; /* Pointer cursor on hover */
  transition: all 0.3s ease; /* Smooth transition */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  appearance: none; /* Remove default styling in some browsers */
  -webkit-appearance: none; /* Remove default styling for Safari */
  -moz-appearance: none; /* Remove default styling for Firefox */
}

/* Dropdown Hover Effect */
select:hover {
  background: linear-gradient(135deg, var(--app-border), var(--theme-brand)); /* Lighter purple to more vibrant purple */
  border-color: var(--app-border); /* Change border color on hover */
}

/* Dropdown Focus Effect */
select:focus {
  outline: none; /* Remove default outline */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 60%, transparent); /* Soft purple glow effect */
  border-color: var(--app-border); /* Maintain focus border color */
}

/* Dropdown Disabled Style */
select:disabled {
  background: linear-gradient(135deg, var(--app-text), var(--app-text)); /* Muted gradient for disabled dropdown */
  color: #aaa; /* Light gray text */
  cursor: not-allowed; /* Disabled cursor */
  box-shadow: none; /* Remove shadow */
  border-color: var(--app-text); /* Light border for disabled state */
}

/* Responsive Design for Smaller Screens */
@media (max-width: 600px) {
  button, .btn, select {
    font-size: 14px; /* Smaller font size on small screens */
    padding: 7px 15px; /* Slightly smaller padding on mobile */
  }
}
/* Universal Box-Sizing for form controls */
input, select, button {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Default narrow size for smaller devices (e.g., iPhone SE) */
.style1, input[type="text"] {
  line-height: 1.5;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  color: #333;
  background-color: #FFF;
  border: 2px solid white;
  border-radius: 12px;
  padding: 4px 8px;
  height: 38px;
  width: 150px; /* Narrow width prevents wrapping on iPhone SE */
  vertical-align: middle;
  box-sizing: border-box;
}

/* Slightly wider input on larger screens */
@media (min-width: 390px) {
  .style1, input[type="text"] {
    width: 180px;
  }
}

/* Align Dropdown Selects to match Text Inputs */
select, .style0 {
  height: 38px; /* Matches text input height */
  padding: 6px 12px;
  font-size: 14px;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Align Buttons to match Height */
button, .btn {
  height: 38px; /* Matches text input and select height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/* Base styles for small screens (e.g., iPhone SE) */
body, td, th {
  font-size: 14px; /* Scaled down from 17px */
}

.style2 {
  font-size: 18px; /* Section titles scaled down from 20px */
}

.style1, input[type="text"] {
  font-size: 16px; /* Keep at 16px to prevent iOS auto-zoom on input focus */
}

/* Scaled-up styles for larger screens (e.g., iPhone 16 Pro & desktop) */
@media (min-width: 390px) {
  body, td, th {
    font-size: 17px;
  }
  
  .style2 {
    font-size: 19px;
  }
}
.footer-box {
    text-align: center;
    margin-top: 8px;
    padding-bottom: 10px;
  }

  .award-tag {
    font-size: 11px;
    color: #FECA57;
    margin-bottom: 6px;
  }

  .footer-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .footer-action-row .btn {
    flex: 1;
    font-size: 12px;
    padding: 8px 4px;
    white-space: nowrap;
  }

.footer-logo {
  max-width: 55px;  /* Adjust size as needed (e.g., 45px to 65px) */
  max-height: 55px;
  width: auto;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}
/* ==========================================================================
   Add Request Page Scoped Styles (add.php)
   ========================================================================== */

/* Page Container Layout */
body.page-add-request {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: var(--theme-brand); /* Matched to index.php body background */
}

body.page-add-request .browse-container-title {
  background-color: var(--app-panel-deep); /* Matched to header on index.php */
  flex-shrink: 0;
  padding: 4px 0 2px 0;
  text-align: center;
}

body.page-add-request .main-content {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px;
  box-sizing: border-box;
}

/* Card & Header Components */
body.page-add-request .request-card {
  background-color: var(--app-panel-deep); /* Matched to main container on index.php */
  border: 2px solid var(--theme-brand);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 auto;
  box-sizing: border-box;
  max-width: 500px;
}

body.page-add-request .request-header {
  background-color: var(--app-panel-deep);
  color: #FFF;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 4px 6px;
  border: 1px solid var(--theme-brand);
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

body.page-add-request .header-left-btns,
body.page-add-request .header-right-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

body.page-add-request .header-title-text {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header Buttons */
body.page-add-request .icon-btn {
  font-size: 13px;
  padding: 6px 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1;
  margin: 0 !important;
  height: 32px;
}

body.page-add-request .tipjar-header-btn {
  font-size: 10px;
  padding: 2px 6px !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: bold;
  line-height: 1;
  margin: 0 !important;
  height: 32px;
}

/* Banners & Alerts */
body.page-add-request .alert-box {
  border-radius: 0;
  padding: 5px 8px;
  margin-bottom: 8px;
  font-size: 11px;
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
  background-color: rgba(220, 53, 69, 0.2);
  border: 1px solid #dc3545;
  color: #ff6b6b;
}

body.page-add-request .card-status-wrapper {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.page-add-request .message-banner {
  width: 100%;
  padding: 6px 8px;
  border-radius: 0;
  text-align: center;
  font-weight: bold;
  font-size: 11px;
  box-sizing: border-box;
}

body.page-add-request .message-success {
  background-color: rgba(40, 167, 69, 0.25);
  border: 1px solid #28a745;
  color: #1DD1A1;
}

body.page-add-request .message-error {
  background-color: rgba(220, 53, 69, 0.25);
  border: 1px solid #dc3545;
  color: #ff6b6b;
}

/* Form Controls */
body.page-add-request .form-group {
  margin-bottom: 8px;
  text-align: left;
}

body.page-add-request .form-group label {
  display: block;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 2px;
}

body.page-add-request .label-sub {
  font-size: 10px;
  color: #1DD1A1;
  font-weight: normal;
}

body.page-add-request .form-control {
  width: 100% !important;
  height: 36px !important;
  padding: 5px 8px;
  font-size: 13px;
  background-color: var(--app-panel-deep);
  color: #FFF;
  border: 1px solid var(--theme-brand);
  border-radius: 6px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

body.page-add-request .form-control:focus {
  border-color: var(--app-muted);
}

body.page-add-request .captcha-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

body.page-add-request .captcha-row img {
  border-radius: 4px;
  border: 1px solid var(--theme-brand);
  height: 28px;
  width: auto;
}

body.page-add-request .captcha-input {
  width: 85px !important;
  text-align: center;
  text-transform: uppercase;
  padding: 4px 6px;
}

/* Footer Section */
body.page-add-request .browse-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 4px 0 8px 0;
  background-color: var(--theme-brand); /* Matched to bottom of index.php */
  z-index: 10;
}

body.page-add-request .brand-logo {
  display: block;
  margin: 0 auto;
  height: 90px;
  width: auto;
}

body.page-add-request .tagline {
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
  color: #FFF;
  margin-top: 2px;
}
/* ==========================================================================
   Upcoming Shows / Calendar Page Scoped Styles
   ========================================================================== */

/* Layout & Page Container */
body.page-calendar {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: var(--theme-brand);
}

body.page-calendar .browse-container-title {
  background-color: var(--app-panel-deep);
  flex-shrink: 0;
  padding: 6px 0 2px 0;
  text-align: center;
}

/* Scrollable Table Area */
body.page-calendar .table-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  background: 
    linear-gradient(var(--app-panel-deep) 30%, rgba(12,6,19,0)),
    linear-gradient(rgba(12,6,19,0), var(--app-panel-deep) 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--app-accent) 50%, transparent), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--app-accent) 50%, transparent), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: var(--app-panel-deep);
  background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
}

/* Custom Scrollbars */
body.page-calendar .table-container::-webkit-scrollbar {
  width: 6px;
}
body.page-calendar .table-container::-webkit-scrollbar-track {
  background: var(--app-panel-deep);
}
body.page-calendar .table-container::-webkit-scrollbar-thumb {
  background: var(--theme-brand);
  border-radius: 3px;
}

/* Table Design */
body.page-calendar .calendar-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', sans-serif;
  table-layout: fixed;
}

body.page-calendar .calendar-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--app-panel-deep);
  color: var(--app-muted);
  font-size: 11px;
  text-transform: uppercase;
  padding: 8px 1px;
  border-bottom: 2px solid var(--theme-brand);
  text-align: center;
  white-space: nowrap;
}

body.page-calendar .calendar-table td {
  background-color: var(--app-panel-deep);
  padding: 8px 1px;
  font-size: 12px;
  border-bottom: 1px solid var(--app-panel);
  text-align: center;
  word-wrap: break-word;
  white-space: nowrap;
}

body.page-calendar .calendar-table tr:nth-child(even) td {
  background-color: var(--app-panel);
}

body.page-calendar .calendar-table td:nth-child(2) {
  white-space: normal;
}

body.page-calendar .calendar-table td a,
body.page-calendar .calendar-table td a:visited {
  color: var(--app-muted) !important;
  font-weight: bold;
  text-decoration: underline;
}

/* Table Column Width Controls */
body.page-calendar .calendar-table th:nth-child(1),
body.page-calendar .calendar-table td:nth-child(1) {
  width: 15%;
}

body.page-calendar .calendar-table th:nth-child(2),
body.page-calendar .calendar-table td:nth-child(2) {
  width: 55%;
}

body.page-calendar .calendar-table th:nth-child(3),
body.page-calendar .calendar-table td:nth-child(3),
body.page-calendar .calendar-table th:nth-child(4),
body.page-calendar .calendar-table td:nth-child(4) {
  width: 15%;
}

/* Calendar Footer */
body.page-calendar .calendar-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 6px 5px 8px 5px;
  background-color: var(--theme-brand);
  border-top: 1px solid var(--app-panel-deep);
  font-size: 12px;
  color: #FFF;
}

body.page-calendar .calendar-footer p {
  margin: 0 0 6px 0;
  font-size: 12px;
}

body.page-calendar .button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 4px;
}

body.page-calendar .button-group .btn {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  margin: 0;
}

body.page-calendar .icon-btn {
  font-size: 16px;
  padding: 3px 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.page-calendar .brand-logo {
  display: block;
  margin: 2px auto 0 auto;
  height: 90px;
  width: auto;
}
/* ==========================================================================
   Shared Browse & Search Results Layout (browse.php & query_date_engine.php)
   ========================================================================== */

/* Page Viewport Setup */
body.page-browse {
  height: 100vh;
  margin: 0;
  padding: 0 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: var(--theme-brand);
}

body.page-browse .browse-container-title {
  margin-top: 5px;
  flex-shrink: 0;
  text-align: center;
}

/* Selector Card (used on browse.php) */
body.page-browse .browse-card {
  background-color: var(--app-panel-deep);
  border: 1px solid var(--theme-brand);
  border-radius: 8px;
  padding: 10px 15px;
  margin: 5px 0;
  box-sizing: border-box;
  text-align: center;
  flex-shrink: 0;
}

body.page-browse .browse-select {
  width: 100%;
  max-width: 220px;
  padding: 8px;
  font-size: 15px;
  background-color: var(--app-panel-deep);
  color: #FFF;
  border: 1px solid var(--theme-brand);
  border-radius: 6px;
  margin: 6px 0 10px 0;
  outline: none;
}

/* Results Section & Header */
body.page-browse .results-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-bottom: 5px;
}

body.page-browse .artist-list-header {
  background-color: var(--app-panel-deep);
  color: var(--app-muted);
  font-size: 12px;
  text-transform: uppercase;
  padding: 10px;
  border: 1px solid var(--theme-brand);
  border-bottom: 2px solid var(--theme-brand);
  border-radius: 6px 6px 0 0;
  font-weight: bold;
  flex-shrink: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.page-browse .artist-list-header .header-title {
  flex-grow: 1;
  text-align: center;
}

body.page-browse .scroll-hint {
  color: #FECA57;
  font-size: 13px;
  margin-left: 4px;
}

/* Scrollable Container & Visible Scrollbar */
body.page-browse .scrollable-artist-container {
  overflow-y: scroll;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--app-panel);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding-right: 2px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent);
}

body.page-browse .scrollable-artist-container::-webkit-scrollbar {
  width: 6px;
}

body.page-browse .scrollable-artist-container::-webkit-scrollbar-track {
  background: var(--app-panel-deep);
  border-radius: 3px;
}

body.page-browse .scrollable-artist-container::-webkit-scrollbar-thumb {
  background-color: var(--theme-brand);
  border-radius: 3px;
}

/* Zebra Striped Artist Rows */
body.page-browse .artist-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.page-browse .artist-item {
  background-color: var(--app-panel-deep);
  border-bottom: 1px solid var(--app-panel);
  padding: 12px 15px;
  font-size: 14px;
  color: var(--app-muted);
  cursor: pointer;
  word-wrap: break-word;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

body.page-browse .artist-item:nth-child(even) {
  background-color: var(--app-panel);
}

body.page-browse .artist-item:active {
  background-color: var(--theme-brand);
  color: #FFF;
}

body.page-browse .artist-item::after {
  content: "›";
  font-size: 20px;
  font-weight: bold;
  color: var(--app-muted);
  margin-left: 10px;
}

body.page-browse .artist-item:active::after {
  color: #FFF;
}

body.page-browse .no-results {
  text-align: center;
  color: var(--app-muted);
  padding: 20px;
  font-style: italic;
  background-color: var(--app-panel-deep);
}

/* Controls and Buttons */
body.page-browse .button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

body.page-browse .home-icon-btn {
  background-color: var(--app-panel);
  border: 1px solid var(--theme-brand);
  color: #FECA57;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}

body.page-browse .home-icon-btn:active {
  background-color: var(--theme-brand);
}

/* Footer Section */
body.page-browse .browse-footer {
  text-align: center;
  padding: 4px 0;
  flex-shrink: 0;
}

body.page-browse .browse-footer img {
  height: 90px;
  width: auto;
  display: block;
  margin: 0 auto;
}
/* ==========================================================================
   Shared Detail & Listing Page Scoped Styles (browse_detail.php, etc.)
   ========================================================================== */

/* Header Action Buttons (Home, Back, Request) */
body.page-browse .header-actions-left {
  display: flex;
  align-items: center;
  gap: 5px;
}

body.page-browse .nav-btn {
  background-color: var(--app-panel);
  border: 1px solid var(--theme-brand);
  color: #FECA57;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}

body.page-browse .nav-btn:active {
  background-color: var(--theme-brand);
}

body.page-browse .request-btn {
  background-color: var(--app-panel);
  border: 1px solid var(--theme-brand);
  color: #FECA57;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

body.page-browse .request-btn:active {
  background-color: var(--theme-brand);
}

/* Static Legend Key Box at List Bottom */
body.page-browse .legend-box {
  background-color: var(--app-panel-deep);
  border: 1px solid var(--theme-brand);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 8px 10px;
  text-align: center;
  font-size: 11px;
  color: #FFF;
  flex-shrink: 0;
}
/* Add this to style the tagline under the logo */
  .browse-footer .rules {
    margin-top: 4px;
    font-size: 11px;
    color: #FFF;
  }
/* Assign percentage or fixed widths to control spacing */
body.page-calendar .calendar-table th:nth-child(1), /* Date */
body.page-calendar .calendar-table td:nth-child(1) {
  width: 15%;
}

body.page-calendar .calendar-table th:nth-child(2), /* Location */
body.page-calendar .calendar-table td:nth-child(2) {
  width: 55%; /* Gives Location the majority of space */
}

body.page-calendar .calendar-table th:nth-child(3), /* Start */
body.page-calendar .calendar-table td:nth-child(3),
body.page-calendar .calendar-table th:nth-child(4), /* End */
body.page-calendar .calendar-table td:nth-child(4) {
  width: 15%; /* Pushes Start/End further right */
}
/* Global Brand Logo Defaults */
.brand-logo {
  display: block;
  margin: 2px auto 0 auto;
  height: 90px;
  width: auto;
}
/* Square Navigation Tile Buttons (Overrides generic button height) */
.btn.btn-calendar-tile,
button.btn-calendar-tile {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 72px;
	height: 72px !important; /* !important guarantees override over global height */
	padding: 6px;
	margin: 2px 3px;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
}

.btn-calendar-tile .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	line-height: 1;
	margin-bottom: 4px;
	height: 24px;
}

.btn-calendar-tile span.label {
	display: block;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	line-height: 1.1;
}
/* Hide online-only elements completely when the offline body class is active */
body.is-offline .online-only-btn {
    display: none !important;
}