@charset "utf-8";

/*
   Hiking Arkansas Website
   Author: Mitchell Martin
   Date: December 10, 2025

   Filename: table.css
   Table styles for responsive design
*/

/* ===== TABLE BASE STYLES ===== */
table.schedule {
   width: 100%;
   border-collapse: collapse;
   background-color: white;
   border: 3px solid #2c5f2d;
   border-radius: 12px;
   overflow: hidden;
   font-size: 0.95em;
   margin: 20px 0;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ===== TABLE CAPTION ===== */
table.schedule caption {
   caption-side: top;
   text-align: center;
   font-size: 1.5em;
   font-family: Georgia, serif;
   color: #2c5f2d;
   padding: 15px;
   font-weight: bold;
   background-color: #e8f5e9;
}

/* ===== TABLE CELLS ===== */
table.schedule th,
table.schedule td {
   border: 1px solid #ccc;
   padding: 12px 15px;
   text-align: left;
   vertical-align: top;
}

/* ===== TABLE HEADER ===== */
table.schedule thead {
   background-color: #2c5f2d;
   color: white;
}

table.schedule thead th {
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   border-color: #1a3a1a;
}

/* ===== TABLE BODY ===== */
table.schedule tbody tr {
   transition: background-color 0.3s ease;
}

table.schedule tbody tr:nth-child(even) {
   background-color: #f5f5f5;
}

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

/* ===== TABLE FOOTER ===== */
table.schedule tfoot {
   background-color: #1a3a1a;
   color: white;
   font-style: italic;
}

table.schedule tfoot td {
   border-color: #1a3a1a;
}

/* ===== COLUMN STYLES ===== */
col.dateCol {
   width: 15%;
   background-color: rgba(44, 95, 45, 0.05);
}

col.eventCol {
   width: 30%;
}

col.locationCol {
   width: 25%;
}

col.difficultyCol {
   width: 15%;
}

col.statusCol {
   width: 15%;
}

/* ===== DIFFICULTY BADGES ===== */
.difficulty-easy {
   background-color: #4caf50;
   color: white;
   padding: 4px 10px;
   border-radius: 15px;
   font-size: 0.85em;
   display: inline-block;
}

.difficulty-moderate {
   background-color: #ff9800;
   color: white;
   padding: 4px 10px;
   border-radius: 15px;
   font-size: 0.85em;
   display: inline-block;
}

.difficulty-hard {
   background-color: #f44336;
   color: white;
   padding: 4px 10px;
   border-radius: 15px;
   font-size: 0.85em;
   display: inline-block;
}

/* ===== STATUS BADGES ===== */
.status-open {
   color: #4caf50;
   font-weight: bold;
}

.status-limited {
   color: #ff9800;
   font-weight: bold;
}

.status-full {
   color: #f44336;
   font-weight: bold;
}

/* ===== RESPONSIVE TABLE - TABLET ===== */
@media (max-width: 768px) {
   table.schedule {
      font-size: 0.85em;
   }
   
   table.schedule th,
   table.schedule td {
      padding: 10px 8px;
   }
   
   table.schedule caption {
      font-size: 1.3em;
   }
}

/* ===== RESPONSIVE TABLE - MOBILE ===== */
@media (max-width: 600px) {
   /* Hide table header on mobile */
   table.schedule thead {
      display: none;
   }
   
   table.schedule,
   table.schedule tbody,
   table.schedule tr,
   table.schedule td {
      display: block;
      width: 100%;
   }
   
   table.schedule tr {
      margin-bottom: 15px;
      border: 2px solid #2c5f2d;
      border-radius: 8px;
      overflow: hidden;
   }
   
   table.schedule td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 15px;
      border: none;
      border-bottom: 1px solid #eee;
      text-align: right;
   }
   
   table.schedule td:last-child {
      border-bottom: none;
   }
   
   /* Add data labels for mobile */
   table.schedule td::before {
      content: attr(data-label);
      font-weight: bold;
      color: #2c5f2d;
      text-transform: uppercase;
      font-size: 0.85em;
      text-align: left;
      flex: 1;
   }
   
   table.schedule tbody tr:nth-child(even) {
      background-color: white;
   }
   
   table.schedule tbody tr:hover {
      background-color: #e8f5e9;
   }
   
   table.schedule tfoot {
      display: block;
   }
   
   table.schedule tfoot tr {
      background-color: #1a3a1a;
   }
   
   table.schedule tfoot td::before {
      content: none;
   }
   
   table.schedule tfoot td {
      text-align: center;
      justify-content: center;
   }
   
   /* Column groups don't apply in mobile view */
   col.dateCol,
   col.eventCol,
   col.locationCol,
   col.difficultyCol,
   col.statusCol {
      width: auto;
      background-color: transparent;
   }
}