/* ==========================================================================
   Repairverse - Custom CSS
   Design System: "Community Scrapbook"
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables (RepairVerse Color Palette)
   -------------------------------------------------------------------------- */
:root {
  /* ===== PRIMARY COLORS ===== */
  --color-primary-dark: #6c8060;      /* Green - Header/Footer */
  --color-primary-light: #ffffff;     /* Clean White - Background */

  /* ===== ACCENT COLORS ===== */
  --color-accent-green: #6c8060;      /* Earth Green - Sustainability metrics */
  --color-accent-orange: #751c11;     /* Warm Orange - Buttons & CTAs */
  --color-accent-yellow: #f1c40f;     /* Warm Yellow - Highlights */
  --color-accent-gray: #95a5a6;       /* Soft Gray - Dividers & secondary elements */

  /* ===== TEXT COLORS ===== */
  --color-text-primary: #2c3e50;      /* Dark Charcoal - Main headings */
  --color-text-body: #34495e;         /* Dark Blue-Gray - Body text */
  --color-text-secondary: #7f8c8d;    /* Medium Gray - Dates, captions */
  --color-text-light: #ecf0f1;        /* Light Gray - Text on dark backgrounds */

  /* ===== BUTTON STATES ===== */
  --color-button-primary: var(--color-accent-orange);
  --color-button-hover: #e67e22;      /* Darker orange on hover */
  --color-button-active: #d35400;     /* Even darker on click */

  /* ===== BACKGROUND VARIATIONS ===== */
  --color-bg-section: #f8f9fa;        /* Light section background */
  --color-bg-dark: var(--color-primary-dark);
  --color-bg-light: var(--color-primary-light);

  /* ===== BORDER COLORS ===== */
  --color-border-light: #dfe6e9;      /* Light borders */
  --color-border-medium: #bdc3c7;     /* Medium borders */
  --color-border-dark: var(--color-accent-gray);

  /* ===== SUCCESS/IMPACT COLORS ===== */
  --color-impact-positive: var(--color-accent-green);
  --color-impact-co2: #27ae60;        /* Darker green for CO2 metrics */
  --color-impact-waste: #16a085;      /* Teal for waste diversion */

  /* Legacy color mappings (for backwards compatibility) */
  --oatmeal: #f8f9fa;
  --forest-green: var(--color-accent-green);
  --heritage-blue: var(--color-primary-dark);
  --terracotta: var(--color-accent-orange);
  --charcoal: var(--color-text-primary);
  --light-wheat: var(--color-bg-section);
  --soft-taupe: var(--color-border-medium);
  --slate-gray: var(--color-text-secondary);
  --success: var(--color-accent-green);
  --error: #EF4444;
  --warning: var(--color-accent-yellow);

  /* Typography */
  --font-body: 'Inter', 'Open Sans', sans-serif;
  --font-handwritten: 'Caveat', 'Kalam', cursive;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1rem; /* 16px base */
  line-height: 1.6;
  color: var(--charcoal);
  background-color: var(--oatmeal);
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--charcoal);
  margin-top: 0;
}

h1 {
  font-size: 2.25rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.125rem;
}

p {
  margin-bottom: 1rem;
}

/* Handwritten font class */
.font-handwritten {
  font-family: var(--font-handwritten);
}

/* --------------------------------------------------------------------------
   Links & Focus States
   -------------------------------------------------------------------------- */
a {
  color: var(--color-accent-orange);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-button-hover);
  text-decoration: underline;
}

/* Visible focus states for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--heritage-blue);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--forest-green);
  color: white;
  padding: 0.75rem 1.5rem;
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

/* Header */
header {
  background-color: var(--color-primary-dark) !important;
}

header .text-forest-green,
header span.text-2xl {
  color: var(--color-text-light) !important;
}

header .fa-tools,
header .fa-bars {
  color: var(--color-text-light) !important;
}

.nav-link {
  color: var(--color-text-light);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

.nav-link:hover {
  color: var(--heritage-blue);
  background-color: white;
}

.nav-link.active {
  color: var(--heritage-blue);
  background-color: white;
  font-weight: 600;
}

/* Mobile menu */
.mobile-menu-link {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--charcoal);
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid var(--soft-taupe);
  min-height: 48px;
}

.mobile-menu-link:hover {
  background-color: var(--light-wheat);
  color: var(--heritage-blue);
}

/* --------------------------------------------------------------------------
   Buttons (Touch-Friendly - 48px minimum)
   -------------------------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-button-primary);
  color: var(--color-text-light);
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-button-hover);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  color: var(--color-text-light);
  text-decoration: none;
}

.btn-primary:active {
  background-color: var(--color-button-active);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background-color: white;
  color: var(--heritage-blue);
  border: 2px solid var(--heritage-blue);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--heritage-blue);
  color: white;
  transform: scale(1.05);
  text-decoration: none;
}

.btn-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-accent-green);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.btn-green:hover {
  background-color: #27ae60;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  color: white;
  text-decoration: none;
}

.btn-terracotta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background-color: var(--terracotta);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-bottom: 4px solid #A55536;
  transition: all 0.2s ease;
}

.btn-terracotta:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  color: white;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Scrapbook Components
   -------------------------------------------------------------------------- */

/* Polaroid Photo Frame */
.polaroid {
  background: white;
  padding: 0.75rem;
  padding-bottom: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.polaroid img {
  border-radius: var(--radius-sm);
  width: 100%;
  height: auto;
}

.polaroid-caption {
  margin-top: 0.75rem;
  text-align: center;
  font-family: var(--font-handwritten);
  font-size: 1.25rem;
  color: var(--charcoal);
}

/* Rotation variants */
.rotate-1 {
  transform: rotate(1deg);
}

.rotate-2 {
  transform: rotate(2deg);
}

.rotate--1 {
  transform: rotate(-1deg);
}

.rotate--2 {
  transform: rotate(-2deg);
}

.polaroid:hover {
  transform: rotate(0deg) scale(1.02);
}

/* Digital Washi Tape */
.washi-corner {
  position: absolute;
  width: 5rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  opacity: 0.4;
}

.washi-corner.top-left {
  top: -0.75rem;
  left: -0.75rem;
  transform: rotate(45deg);
}

.washi-corner.top-right {
  top: -0.75rem;
  right: -0.75rem;
  transform: rotate(-45deg);
}

.washi-horizontal {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 8rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  opacity: 0.3;
}

.washi-terracotta {
  background-color: var(--terracotta);
}

.washi-blue {
  background-color: var(--heritage-blue);
}

.washi-green {
  background-color: var(--forest-green);
}

/* --------------------------------------------------------------------------
   Form Styles (Accessible)
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--charcoal);
}

.form-label .required {
  color: var(--error);
  margin-left: 0.25rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--charcoal);
  background-color: var(--light-wheat);
  border: 2px solid var(--soft-taupe);
  border-radius: var(--radius-md);
  min-height: 44px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--heritage-blue);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
  outline: none;
}

.form-input::placeholder {
  color: var(--slate-gray);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
}

/* Checkbox and Radio */
.form-checkbox-group,
.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.form-checkbox,
.form-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  min-height: 48px;
}

.form-checkbox input[type="checkbox"],
.form-radio input[type="radio"] {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--heritage-blue);
  cursor: pointer;
}

/* Error states */
.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--error);
}

.form-error {
  color: var(--error);
  font-size: 0.95rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--error);
  color: white;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.75rem;
}

/* Success message */
.form-success {
  padding: 1.5rem;
  background: #D1FAE5;
  border: 2px solid var(--success);
  border-radius: var(--radius-lg);
  color: #065F46;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  position: relative;
}

.card-scrapbook {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  position: relative;
  transition: transform 0.3s ease;
}

.card-scrapbook:hover {
  transform: rotate(0deg) scale(1.02);
}

/* Stat Cards */
.stat-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-accent-green);
  line-height: 1.2;
}

.stat-label {
  font-size: 1rem;
  color: var(--slate-gray);
  margin-top: 0.5rem;
}

/* Impact Badges */
.impact-badge-co2 {
  background-color: var(--color-impact-co2);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: bold;
}

.impact-badge-waste {
  background-color: var(--color-impact-waste);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: bold;
}

/* Program Cards */
.program-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-bottom: 4px solid transparent;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.program-card.repair-cafe {
  border-bottom-color: var(--terracotta);
}

.program-card.silvertech {
  border-bottom-color: var(--heritage-blue);
}

.program-card.empower-heal {
  border-bottom-color: #E8913A;
}

.program-card.secondlifelab {
  border-bottom-color: var(--forest-green);
}

.program-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Event Cards (Scrapbook style) */
.event-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease;
}

.event-card:hover {
  transform: rotate(0deg) scale(1.01);
}

.event-card img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
  padding: 4rem 0;
}

.section-alt {
  background-color: white;
}

.section-light {
  background-color: var(--color-bg-light);
  color: var(--color-text-body);
  padding: 4rem 0;
}

.section-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

.section-dark h2,
.section-dark h3 {
  color: var(--color-text-light);
}

.section-green {
  background-color: var(--color-accent-green);
  color: white;
}

.section-green h2,
.section-green h3 {
  color: white;
}

.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.container-narrow {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --------------------------------------------------------------------------
   FAQ Accordion
   -------------------------------------------------------------------------- */
.faq-item {
  background: white;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 1rem 1.25rem;
  background: white;
  border: none;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  transition: background-color 0.2s ease;
}

.faq-question:hover {
  background-color: var(--light-wheat);
}

.faq-question[aria-expanded="true"] {
  background-color: var(--light-wheat);
}

.faq-icon {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.5rem 1.5rem;
  display: none;
}

.faq-answer.open {
  display: block;
}

/* --------------------------------------------------------------------------
   Testimonials / Quotes
   -------------------------------------------------------------------------- */
.blockquote {
  border-left: 4px solid var(--heritage-blue);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--slate-gray);
}

.blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-weight: 600;
  color: var(--charcoal);
}

/* --------------------------------------------------------------------------
   CTA Box
   -------------------------------------------------------------------------- */
.cta-box {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 2px solid;
}

.cta-box.terracotta {
  background-color: #FEF3E9;
  border-color: var(--terracotta);
}

.cta-box.blue {
  background-color: #EBF4FF;
  border-color: var(--heritage-blue);
}

.cta-box.green {
  background-color: #D4B896;
  border-color: var(--forest-green);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer,
.site-footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
}

.site-header {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

.footer a,
.site-footer a {
  color: var(--color-text-light);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer a:hover,
.site-footer a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.footer h4,
.site-footer h4 {
  color: var(--color-text-light);
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer li {
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.text-center {
  text-align: center;
}

.text-forest-green {
  color: var(--forest-green);
}

.text-heritage-blue {
  color: var(--heritage-blue);
}

.text-terracotta {
  color: var(--terracotta);
}

.text-slate {
  color: var(--slate-gray);
}

/* Text Colors */
.text-primary {
  color: var(--color-text-primary);
}

.text-body {
  color: var(--color-text-body);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-light {
  color: var(--color-text-light);
}

.text-green {
  color: var(--color-accent-green);
}

.text-orange {
  color: var(--color-accent-orange);
}

.text-white {
  color: var(--color-primary-light);
}

/* Background Colors */
.bg-dark {
  background-color: var(--color-bg-dark);
}

.bg-light {
  background-color: var(--color-bg-light);
}

.bg-section {
  background-color: var(--color-bg-section);
}

.bg-green {
  background-color: var(--color-accent-green);
}

.bg-orange {
  background-color: var(--color-accent-orange);
}

.bg-oatmeal {
  background-color: var(--oatmeal);
}

.bg-white {
  background-color: white;
}

/* Call-to-action Emphasis */
.cta-highlight {
  color: var(--color-accent-orange);
  font-weight: bold;
}

.cta-button {
  background: linear-gradient(135deg, var(--color-accent-orange), var(--color-accent-yellow));
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

/* Border Utilities */
.border-light {
  border: 1px solid var(--color-border-light);
}

.border-medium {
  border: 1px solid var(--color-border-medium);
}

.border-dark {
  border: 1px solid var(--color-border-dark);
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .rotate-1, .rotate-2, .rotate--1, .rotate--2 {
    transform: rotate(0deg) !important;
  }

  .polaroid:hover,
  .card-scrapbook:hover,
  .event-card:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  .section {
    padding: 3rem 0;
  }

  .stat-number {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 1rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .btn-primary,
  .btn-secondary,
  .btn-green,
  .btn-terracotta {
    width: 100%;
    text-align: center;
  }
}
/* Add to the bottom of custom.css */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.admin-table th {
    background-color: var(--color-bg-section);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-border-medium);
}

.admin-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.admin-table tr:hover {
    background-color: var(--color-bg-section);
}

.admin-table .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    min-height: 32px;
    margin-right: 0.5rem;
}

/* Ensure form fields look good */
#formContainer input,
#formContainer select,
#formContainer textarea {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
}

#formContainer input:focus,
#formContainer select:focus,
#formContainer textarea:focus {
    outline: none;
    border-color: var(--heritage-blue);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}