/* ==========================================================================
   FILE: /bonsai/assets/css/admin.css
   PROJECT: Bonsai Collection Tracker
   PURPOSE: Styles specific to Admin and Dashboard interfaces
   AUTHOR: John Sisler
   LAST UPDATED: 2025‑11‑18
   ==========================================================================

   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1. OVERVIEW
   2. TYPOGRAPHY
   3. LAYOUT STRUCTURE
   4. SIDEBAR & NAVIGATION
   5. DASHBOARD SUMMARY CARDS
   6. TABLES & DATA LISTS
   7. BUTTONS / ACTIONS
   8. WEATHER & EMOJI
   9. ADMIN HEADER LINKS
   10. RESPONSIVENESS
   --------------------------------------------------------------------------
   NOTES:
   - Load AFTER global.css
   - Designed for admin panels, reports, and dashboards
   ========================================================================== */


/* ==========================================================================
   1. OVERVIEW
   ========================================================================== */
body.admin,
html {
  background-color: #f9faf7;
  font-family: "Inter", sans-serif;
  color: #2d362d;
  margin: 0;
  padding: 0;
}

.admin-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem 1rem;
}


/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #2d362d;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #333;
}

.admin-heading {
  margin-top: 2.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #2d362d;
  margin-bottom: 1.5rem;
}


/* ==========================================================================
   3. LAYOUT STRUCTURE
   ========================================================================== */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #ddd;
  padding: 0.8rem 1.5rem;
}


/* ==========================================================================
   4. SIDEBAR & NAVIGATION (placeholder)
   ========================================================================== */
.sidebar { display: none; }


/* ==========================================================================
   5. DASHBOARD SUMMARY CARDS
   ========================================================================== */
.status-cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.2rem 0;
}

.status-cards .card {
  flex: 1 1 22%;
  min-width: 180px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  text-align: center;
  padding: 0.8rem 0;
}

.card .count {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
}

.card.available .count { color: #2e7d32; }
.card.reserved .count  { color: #f9a825; }
.card.sold .count      { color: #c62828; }
.card.showready .count { color: #1565c0; }

.card .label {
  font-size: 0.9rem;
  color: #444;
}


/* ==========================================================================
   6. TABLES & DATA LISTS (Dashboard and Reports)
   ========================================================================== */
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #fff;
  margin-bottom: 1rem;
}

.dashboard-table th,
.dashboard-table td {
  padding: 0.6rem 1rem;
  vertical-align: middle;
  text-align: left;
  border: none;
}

.dashboard-table th {
  background: #f9faf9;
  font-weight: 600;
}

/* --- Grouped Daily Task Rows --- */
.dashboard-table thead { display: none; }

.date-row td {
  background: linear-gradient(to right, #e7f4ea 0%, #f6faf7 50%, #e7f4ea 100%);
  font-weight: 600;
  padding: 1.1rem 1.6rem;
  border-top: 1px solid #cddccf;
  border-bottom: none;
}

.group-content td {
  background: #fff;
  border: none;
  padding: 0.9rem 2rem 0.9rem 2.5rem;
}

.group-content td:last-child {
  text-align: right;
  padding-right: 2.2rem;
}

.group-end td {
  background: linear-gradient(to right, #f2f8f3 0%, #ffffff 50%, #f2f8f3 100%);
  font-weight: 600;
  padding: 1.1rem 1.6rem;
  border-top: 1px solid #cddccf;
  text-align: right;
  border-right: 1px solid #cddccf;
  border-left: 1px solid #cddccf;
}

.group-spacer td {
  height: 3.6rem;
  background: var(--bg-main, #f9faf7);
  border: none;
}


/* ==========================================================================
   7. BUTTONS / ACTIONS
   ========================================================================== */
.dashboard-actions {
  text-align: right;
  margin-bottom: 1.2rem;
}

.btn-refresh-tools {
  background: #2e7d32;
  color: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
}
.btn-refresh-tools:hover { background: #388e3c; }


/* ==========================================================================
   8. WEATHER & EMOJI
   ========================================================================== */

/* --- Unicode Weather Emoji --- */
.weather-emoji {
  display: inline-block;
  font-size: 1.8em;
  line-height: 1;
  vertical-align: -4px;
  padding: 0 0.1rem;
}

/* slightly smaller on mobile */
@media (max-width: 640px) {
  .weather-emoji {
    font-size: 1.5em;
    vertical-align: -2px;
  }
}


/* ==========================================================================
   9. ADMIN HEADER LINKS
   ========================================================================== */
.admin-header nav.main-nav a {
  text-decoration: none;
  font-weight: 500;
  color: #4c7244;
  transition: color 0.25s ease;
}

.admin-header nav.main-nav a:hover,
.admin-header nav.main-nav a:focus {
  color: #000;
  text-decoration: none;
}

.admin-header nav.main-nav a.active {
  color: #000;
  pointer-events: none;
  cursor: default;
}


/* ==========================================================================
   10. RESPONSIVENESS
   ========================================================================== */
@media (max-width: 992px) {
  .admin-container { padding: 1rem; }
  .status-cards { flex-direction: column; }
  .dashboard-table th:nth-child(3) { width: auto; }
}

/* ==========================================================================
   END OF FILE
   ========================================================================== */
   
   
   /* ==========================================================================
   TABLE WRAPPER CARD STYLE  |  2025‑11‑18
   Matches summary‑card appearance for all dashboard tables
   ========================================================================== */

.table-wrapper {
  background: #ffffff;
  border-radius: 6px;                  /* match .status‑cards .card */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  border: 1px solid #f9faf7;          /* subtle outer edge */
  overflow: hidden;                    /* hides interior edges */
  margin-bottom: 2rem;
}

/* Remove any interior table borders */
.table-wrapper table {
  border-collapse: collapse;
  border: none;
  width: 100%;
}

.table-wrapper th,
.table-wrapper td {
  border: none;
}

/* Optional: unify table bottom spacing */
.table-wrapper .group-spacer td {
  background: #f9faf7;
  border-left:none;
}