/* ------------------------------------------------------------------------------
*
*  # Color Variables & Themes
* ---------------------------------------------------------------------------- */
:root {
  --bg-main: #f4f7f6;
  --bg-card: #ffffff;
  --text-main: #333333;
  --navbar-bg: #2b0a0a;
  --dropdown-bg: #ffffff;
  --dropdown-text: #333;
  --dropdown-hover-bg: #f4f7f6;
  --shadow-light: 0 4px 6px rgba(0,0,0,0.05);
}

[data-theme="dark"] {
  --bg-main: #121212;
  --bg-card: #1e1e1e;
  --text-main: #e0e0e0;
  --navbar-bg: #000000;
  --dropdown-bg: #2c2c2c;
  --dropdown-text: #e0e0e0;
  --dropdown-hover-bg: #383838;
  --shadow-light: 0 4px 6px rgba(0,0,0,0.3);
}


/* ------------------------------------------------------------------------------
*
*  # Labels component
*
*  Overrides for labels bootstrap component
*
*  Version: 1.1
*  Latest update: Oct 20, 2015
*
* ---------------------------------------------------------------------------- */
.label {
  display: inline-block;
  font-weight: 500;
  padding: 1px 4px 0px 4px;
  line-height: 1.5384616;
  border: 1px solid transparent;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.1px;
  border-radius: 2px;
}
.btn .label {
  top: 0;
}
.list-group-item.active > .label,
.nav-pills > .active > a > .label,
.nav-tabs-solid > .active > a > .label,
.nav-tabs[class*=bg-] > li > a > .label {
  color: #333333;
  background-color: #fff;
  border-color: #fff;
}
@media (min-width: 769px) {
  .list-group-item > .label {
    float: right;
  }
  .list-group-item > .label + .label {
    margin-right: 7px;
  }
}
.label > .caret,
.badge > .caret {
  margin-top: -2px;
}
.open .label.dropdown-toggle,
.open .badge.dropdown-toggle {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.label[href]:hover,
.badge[href]:hover,
.label[href]:focus,
.badge[href]:focus {
  opacity: 0.85;
  filter: alpha(opacity=85);
}
.label-default {
  border-color: #999999;
}
.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #999999;
}
.label-primary {
  border-color: #2196F3;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #2196F3;
}
.label-success {
  border-color: #4CAF50;
}
.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #4CAF50;
}
.label-info {
  border-color: #00BCD4;
}
.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #00BCD4;
}
.label-warning {
  border-color: #000000;
  background-color: #FF5722;
  color: #FFFFFF;
  font-weight: bold;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #FF5722;
}
.label-danger {
  border-color: #F44336;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #F44336;
}
.label-striped {
  background-color: #f5f5f5;
  color: #333333;
  border-left-width: 2px;
  padding: 5px 10px;
}
.label-striped.label-striped-right {
  border-left-width: 1px;
  border-right-width: 2px;
}
.label-striped,
.label-striped.label-icon {
  border-radius: 0;
}
.label-striped[href]:hover,
.label-striped[href]:focus {
  color: #333333;
  background-color: #eeeeee;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.label-flat {
  background-color: transparent;
  border-width: 2px;
  border-radius: 0;
}
.label-flat[href]:hover,
.label-flat[href]:focus {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.label-icon {
  padding: 7px;
  border-radius: 2px;
}
.label-icon > i {
  top: 0;
}
.label-icon.label-flat {
  padding: 6px;
}
.label-icon-xlg {
  padding: 10px;
}
.label-icon-xlg.label-flat {
  padding: 9px;
}
.label-icon-lg {
  padding: 9px;
}
.label-icon-lg.label-flat {
  padding: 8px;
}
.label-icon-sm {
  padding: 6px;
}
.label-icon-sm.label-flat {
  padding: 5px;
}
.label-icon-xs {
  padding: 5px;
}
.label-icon-xs.label-flat {
  padding: 4px;
}
.label-rounded {
  border-radius: 100px;
}
.label-rounded:not(.label-icon) {
  padding-left: 7px;
  padding-right: 7px;
}
.label-roundless {
  border-radius: 0;
}
.label-block {
  display: block;
}
.form-control + .label-block {
  margin-top: 7px;
}
.label-block.text-left {
  text-align: left;
  margin-right: 0;
}
.label-block.text-right {
  text-align: right;
  margin-left: 0;
}


/* ------------------------------------------------------------------------------
*
*  # Dropdown Nav Menu
* ---------------------------------------------------------------------------- */

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: var(--navbar-bg);
  display: flex;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar li {
  display: block;
}

.navbar li a, .navbar .dropbtn {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.navbar li a:hover, .navbar .dropdown:hover .dropbtn, .navbar a.active {
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom: 3px solid #ff9800; /* Subtle orange accent for active/hover */
  padding-bottom: 11px; /* Adjust padding to prevent jumping when border is added */
}

.navbar li a {
  border-bottom: 3px solid transparent;
}

.navbar li.dropdown {
  display: inline-block;
}

.navbar .dropdown-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: var(--dropdown-bg);
  min-width: 180px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
  z-index: 1000;
  border-radius: 0 0 8px 8px;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.navbar .dropdown-content a {
  color: var(--dropdown-text);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border: none;
  font-weight: normal;
}

.navbar .dropdown-content a:hover {
  background-color: var(--dropdown-hover-bg);
  color: #ff9800;
  border: none;
  padding-bottom: 12px;
}

.navbar .dropdown:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}


/* ------------------------------------------------------------------------------
*
*  # Hero component
*
*  Hero top image
*
* ---------------------------------------------------------------------------- */
/* The hero image */
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/basketball.png");
/* Set a specific height */
height: 12%;
width:  100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 4;
}
/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

/* ------------------------------------------------------------------------------
*
*  # General Stuff
* ---------------------------------------------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic);

.greeting {
padding: 10px;
}

main {
    background-color: var(--bg-main);
    padding: 20px;
    color: var(--text-main); /* Explicitly set text color for main content */
}

/* Explicitly set text color for common elements within main to ensure consistency */
main p,
main h1, main h2, main h3, main h4, main h5, main h6,
main span,
main a,
main li,
main td,
main th {
    color: var(--text-main);
}

#greeting, div[id$="-table"] {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    margin-bottom: 20px;
}

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
  font-size:16px;
  font-family: 'Arimo', sans-serif;
  color: var(--text-main);
}

@media(max-width:60em){
  body,html{font-size: 80%;} 
  body { min-width: 100%; width: max-content; }
  ul{line-height:200%;}
  main { padding: 4px; box-sizing: border-box; }
  #greeting, div[id$="-table"] { padding: 8px; border-radius: 4px; min-width: max-content; }
  .dataTables_wrapper .dataTables_scrollBody,
  .dataTables_wrapper .dataTables_scrollHead { overflow: visible !important; }
}

        /* Modal styles */
         .modal {
             display: none; 
             position: fixed; 
             z-index: 1000; 
             left: 0; 
             top: 0;
             width: 100%; 
             height: 100%; 
             overflow: auto; 
             background-color: rgba(0,0,0,0.6); 
         }
         .modal-content {
             background-color: #fff;
             color: #333;
             margin: 15% auto; 
             padding: 20px 30px;
             border: 1px solid #888;
             width: 80%;
             max-width: 600px;
             border-radius: 8px;
             box-shadow: 0 4px 12px rgba(0,0,0,0.3);
         }
         [data-theme='dark'] .modal-content {
             background-color: #2c2c2c;
             color: #eee;
             border-color: #444;
         }
         .close-modal {
             color: #aaa;
             float: right;
             font-size: 28px;
             font-weight: bold;
             cursor: pointer;
         }
         .close-modal:hover,
         .close-modal:focus {
             color: #000;
             text-decoration: none;
         }
         [data-theme='dark'] .close-modal:hover,
         [data-theme='dark'] .close-modal:focus {
             color: #fff;
         }