/* Dark Theme Overrides */
body {
   background-color: #000000;
   color: #ffffff;
   overflow-x: hidden;
}

html {
   overflow-x: hidden;
   background-color: #000000;
}

.hero_area {
   background-color: #000000 !important;
}

/* Keep header white */
.header_section {
   background-color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   color: #ffffff;
}

/* Ensure header headings (if any) are not white */
.header_section h1,
.header_section h2,
.header_section h3,
.header_section h4,
.header_section h5,
.header_section h6 {
   color: initial;
}

/* Prevent horizontal overflow (exclude header container) */
.container:not(.header-container),
.container-fluid {
   max-width: 100%;
   overflow-x: hidden;
}

.row {
   margin-left: 0;
   margin-right: 0;
}

.scrollable-tabs-container {
   display: flex;
   justify-content: center;
   overflow-x: auto;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
   /* Smooth scrolling on iOS */
   padding-bottom: 5px;
   /* Space for scrollbar if visible */
   margin-bottom: 20px;
}

.scrollable-tabs-container::-webkit-scrollbar {
   height: 4px;
}

.scrollable-tabs-container::-webkit-scrollbar-track {
   background: #333;
}

.scrollable-tabs-container::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 2px;
}

.scrollable-tabs-container .nav-pills {
   display: inline-flex;
   /* Ensure items stay in a row */
   flex-wrap: nowrap;
   /* Prevent wrapping */
}

/* Calendar styles */
.calendar {
   width: 100%;
   background: #0f0f0f;
   border: 1px solid #222;
   padding: 12px;
   border-radius: 6px;
}

.calendar table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
}

.calendar th,
.calendar td {
   padding: 8px;
   text-align: left;
   vertical-align: top;
   border: 1px solid #1a1a1a;
   color: #ddd;
   height: 90px;
}

.calendar .muted {
   color: #777;
}

.calendar .events {
   margin-top: 6px;
}

.calendar .event-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   background: #2a4798;
   border-radius: 50%;
   margin-right: 6px;
}

/* Cell style when there are events */
.calendar td.has-events {
   background: #2a4798;
   color: #fff;
}

.calendar td.has-events .event-dot {
   background: #fff;
}

.calendar td.has-events a {
   color: #fff;
   text-decoration: none;
}

/* Mobile: hide event text, show filled cell */
@media (max-width: 768px) {
   .calendar .events { display: none; }
   .calendar td.has-events { height: 60px; }
   .calendar th, .calendar td { padding: 6px; }
}

.scrollable-tabs-container .nav-link {
   color: #ffffff;
   background-color: #333333;
   margin-right: 10px;
   border-radius: 20px;
   padding: 10px 20px;
   font-weight: 500;
}

.scrollable-tabs-container .nav-link.active {
   background-color: #2a4798;
   /* Corporate color */
   color: white;
}

/* Override Bootstrap primary button */
.btn-primary {
   background-color: #2a4798;
   border-color: #2a4798;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
   background-color: #1d326b !important;
   border-color: #1d326b !important;
}

/* Center tabs on desktop */
@media (min-width: 768px) {
   .scrollable-tabs-container {
      display: flex;
      justify-content: center;
      overflow-x: visible;
   }
}

.activity-card {
   background-color: #1a1a1a;
   border: 1px solid #333;
   color: #ffffff;
   position: relative;
}

.activity-card .card-title {
   color: #ffffff;
}

.activity-card .card-text {
   color: #cccccc;
}

.activity-card:hover {
   transform: translateY(-5px);
   transition: transform 0.3s ease;
   box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1) !important;
}

/* Highlight for new activities */
.activity-card.activity-highlight {
   border: 2px solid #2a4798; /* Corporate color border */
   box-shadow: 0 0 15px rgba(42, 71, 152, 0.5); /* Glowing effect */
}

.activity-new-label {
   position: absolute;
   top: 10px;
   right: 10px;
   background-color: #2a4798; /* Corporate color */
   color: white;
   padding: 5px 10px;
   border-radius: 5px;
   font-weight: bold;
   font-size: 0.8em;
   z-index: 10;
}

/* Modal Dark Theme */
.modal-content {
   background-color: #1a1a1a;
   color: #ffffff;
   border-radius: 8px;
   overflow: hidden;
}

.modal-image-container {
   width: 100%;
   max-height: 300px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #000;
}

.modal-image-container img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.modal-header {
   border-bottom: 1px solid #333;
}

.modal-footer {
   border-top: 1px solid #333;
}

.close {
   color: #ffffff;
   text-shadow: none;
   opacity: 1;
}

.close:hover {
   color: #cccccc;
}


/* Mobile responsive modal */
@media (max-width: 768px) {
   .modal-dialog {
      margin: 1.5rem;
      max-width: calc(100% - 3rem);
   }

   .modal-image-container {
      max-height: 200px;
   }

   .modal-body {
      padding: 1.5rem;
   }

   .container.my-5 {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
   }
}

/* Desktop spacing improvements */
@media (min-width: 769px) {
   .modal-dialog {
      margin: 2rem auto;
   }

   .modal-body {
      padding: 2rem;
   }
}

/* Layout for icons and years: desktop shows them inline left-aligned; mobile stacks icons centered above years */
.years-and-toggle {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
   flex-wrap: nowrap;
}

.years-and-toggle .view-toggle {
   display: flex;
   align-items: center;
}

.years-and-toggle .view-toggle .btn {
   min-width: 40px;
}

/* Mobile: stack icons centered above years */
@media (max-width: 768px) {
   .years-and-toggle {
      flex-direction: column;
      align-items: center;
   }

   .years-and-toggle .view-toggle {
      margin-bottom: 8px;
   }

   .scrollable-tabs-container {
      justify-content: flex-start;
      width: 100%;
   }

   .scrollable-tabs-container .nav-pills {
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrap;
   }
}

/* Desktop: position tabs centered between left edge and right-side icons */
@media (min-width: 768px) {
   .years-and-toggle {
      position: relative;
      width: 100%;
   height: 72px; /* row height - increased so buttons don't get clipped */
   box-sizing: border-box;
   margin: 0 auto;
   padding: 0 16px; /* keep some page padding */
   overflow: visible;
}

/* Place the view-toggle (icons) to the right, vertically centered */
.years-and-toggle .view-toggle {
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
   z-index: 2;
}

/* Position the tabs area to occupy the space between left padding and icons
   and center the actual nav within that space. This keeps years perfectly centered
   between the left edge and the icons. */
.years-and-toggle .scrollable-tabs-container {
   position: absolute;
   top: 0;
   left: 16px;
   right: calc(16px + 56px); /* match right padding + approx icons width */
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0;
   overflow: visible;
}

.years-and-toggle .scrollable-tabs-container .nav-pills {
   display: inline-flex;
   align-items: center;
   height: auto;
   margin: 0;
}
/* ensure nav link pills have room vertically and won't be clipped */
.years-and-toggle .scrollable-tabs-container .nav-pills .nav-link {
   padding-top: 8px;
   padding-bottom: 8px;
}
}