/* Base layout - actively used for page structure */
.container {
  width: 95%;
  margin: 0 auto;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
}

h2 {
  font-size: 2em;
  margin: 0.5em 0;
}

/* Meeting status styles - used in initializeMeetings() */
.past-meeting {
  color: #222;
  border-bottom: 1px solid #e0e0e0;
}

.next-meeting {
  background-color: #e8f4f8;
}

.future-meeting {
  background-color: #fff;
}

/* DataTables styling - actively used */
.dataTable thead th {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: 8px;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
}

.dataTable thead th.sorting {
  padding-right: 30px;
}

.dataTable thead th.sorting:after,
.dataTable thead th.sorting_asc:after,
.dataTable thead th.sorting_desc:after {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}

.dataTable thead th.sorting_asc:after,
.dataTable thead th.sorting_desc:after {
  opacity: 1;
}

.fixedHeader-floating thead th {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
}

/* Layout helpers - used for text wrapping */
.nb {
  white-space: nowrap;
}

/* Add these to your existing responsive styles */
.dataTables_filter {
    margin-bottom: 1em;
    width: 100%;
}

@media screen and (max-width: 1000px) {
    .dataTables_filter input {
        width: 100%;
        margin-left: 0 !important;
        box-sizing: border-box;
        padding: 8px;
    }
    
    .dataTables_filter label {
        width: 100%;
        display: block;
    }

    /* Convert table rows to cards */
    .dataTable tbody tr {
        display: block;
        margin-bottom: 1em;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 1em;
    }

    /* Hide table headers on mobile */
    .dataTable thead {
        display: none;
    }

    /* Improve mobile card layout for cells */
    .dataTable tbody td {
        display: flex;
        align-items: flex-start;
        padding: 0.5em 0;
        border: none;
        line-height: 1.0;
    }

    /* Style the labels */
    .dataTable tbody td:before {
        content: attr(data-label);
        font-weight: bold;
        min-width: 100px;
        margin-right: 1em;
        flex-shrink: 0;
    }

    /* Style the content */
    .dataTable tbody td > * {
        flex-grow: 1;
    }

    /* Handle line breaks properly */
    .dataTable tbody td br {
        display: block;
        content: "";
        margin: 0.3em 0;
    }

    /* Ensure content aligns properly after label */
    .dataTable tbody td > div,
    .dataTable tbody td > a,
    .dataTable tbody td > span {
        display: inline-block;
        vertical-align: top;
    }

    /* Special styling for the next meeting */
    tr.next-meeting {
        border-color: #4a90e2;
        background-color: #f8f8ff;
    }

    /* Ensure the first column is left-aligned in mobile card view */
    .dataTable tbody td:first-child {
        text-align: left;
    }

    /* Allow wrapping in mobile card view */
    .dataTable td:nth-child(2),
    .dataTable td:nth-child(4) {
        white-space: normal; /* Allow wrapping in card view */
    }
}

/* Add this to your existing CSS */
.dataTable td:first-child {
    text-align: center;
    vertical-align: middle;
}

/* Add this to your existing CSS */
.dataTable td:nth-child(2), /* Date column */
.dataTable td:nth-child(4) { /* Author column */
    white-space: nowrap;
}

/* Meeting status styling */
tr.future-meeting, td.future-meeting {
    background-color: #e8f5e9 !important; /* Light green */
}

tr.next-meeting, td.next-meeting {
    background-color: #e3f2fd !important; /* Light blue */
}

tr.past-meeting, td.past-meeting {
    background-color: #ffffff; /* White */
}



#schedule-table td:nth-child(2) {
    text-align: right;
}

#slideshow {
    width: 800px;  /* Fixed width */
    height: 500px;  /* Fixed height */
    margin: 20px 0;  /* Remove auto margin, align left */
    position: relative;
    border: 1px solid #ccc;
    background: #f8f8f8;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: none;  /* Hide by default */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Active slide */
.slide.active {
    opacity: 1;
    display: block;
}

/* Simple prev/next buttons */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 15px;
    background: #333;
    color: white;
    cursor: pointer;
}

.prev { left: 0; }
.next { right: 0; }

#image-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    text-align: center;
}

#schedule-table td:nth-child(1), /* Number column */
#schedule-table td:nth-child(2),  /* Date column */ 
#schedule-table td:nth-child(3),
#schedule-table td:nth-child(4),
#schedule-table td:nth-child(5),
#schedule-table td:nth-child(6),
#schedule-table td:nth-child(7) {    vertical-align: top;
}

/* Remove vertical lines and ensure no DataTables borders interfere */
#schedule-table td {
    border-right: none !important;
    border-left: none !important;
}

/* Add horizontal lines between rows with higher specificity */
#schedule-table tbody tr {
    border-bottom: 1px solid #e0e0e0 !important;  /* Light grey horizontal line */
}

#schedule-table tbody tr:last-child {
    border-bottom: none !important;  /* Remove border from last row */
}

/* Base table styling - applies to both desktop and mobile */
.dataTable td {
    display: flex;
    flex-wrap: wrap;  /* Allow wrapping on narrow screens */
    align-items: flex-start;
    padding: 0.5em;
    line-height: 1.4;
    gap: 0.5em;  /* Consistent spacing between label and content */
}

.dataTable td:before {
    content: attr(data-label);
    font-weight: bold;
    min-width: 80px;  /* Reduced from 100px to take less space */
    flex-shrink: 0;
    text-align: left;
}

.dataTable td > .td-content {
    flex: 1;
    min-width: 0;  /* Allow content to shrink below flex basis */
    word-wrap: break-word;  /* Allow long words to break */
    text-align: left;  /* Default to left alignment on narrow screens */
}

/* Desktop overrides - revert to table layout above 768px */
@media screen and (min-width: 769px) {
    .dataTable thead {
        display: table-header-group;
    }
    
    .dataTable td {
        display: table-cell;
    }
    
    .dataTable td:before {
        display: none;
    }
    
    .dataTable td > .td-content {
        text-align: inherit;
    }
    
    /* Specific column alignments */
    .dataTable td.dt-body-right > .td-content {
        text-align: right;
    }
    
    .dataTable td.dt-body-left > .td-content {
        text-align: left;
    }
}

/* Top section layout */
.row {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 1em;
}

.piece {
    width: 100%;
    position: relative;
}

/* Main title spacing */
h2:first-of-type {
    margin: 0.25em 0;  /* Reduced spacing above and below main title */
}

/* QR code section */
.piece div[style*="text-align: right"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25em;
    margin: 0.5em 0;
}


/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .piece div[style*="text-align: right"] {
        align-items: center;
        text-align: center;
    }
}

/* Discord invite styling */
.discord-invite {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 1em 0;
}

.discord-invite-text {
    flex: 1;
}

.discord-invite-qr {
    flex-shrink: 0;
    text-align: center;
}

.discord-invite-qr img {
    max-width: 150px;
    height: auto;
}