/* Main CSS - imports all modular stylesheets */
@import url('base.css');
@import url('layout.css');
@import url('components.css');

/* Page-specific styles */
.page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.page-content { flex: 1; }

/* Trip card grid */
.trips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }

/* Trip info styles */
.trip-info-card { padding: 1.5rem; }
.trip-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.trip-meta { color: var(--text-light); margin-bottom: 1rem; }
.trip-desc { color: var(--text); line-height: 1.6; margin-bottom: 1rem; }

/* Vote button */
.vote-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: 2px solid var(--danger); border-radius: var(--radius); background: transparent; color: var(--danger); font-weight: 600; cursor: pointer; transition: all var(--transition); }
.vote-btn:hover { background: var(--danger); color: white; }
.vote-btn.voted { background: var(--danger); color: white; }

/* Comments */
.comments-section { padding: 1.5rem; max-height: 400px; overflow-y: auto; }
.comment { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.comment:last-child { border-bottom: none; }
.comment-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; }
.comment-author { font-weight: 600; color: var(--text); }
.comment-time { color: var(--text-muted); font-size: 0.8rem; }
.comment-content { color: var(--text-light); line-height: 1.5; }

/* Share buttons */
.share-btn { padding: 0.5rem 0.75rem; border: 1px solid var(--border); background: var(--bg-white); border-radius: var(--radius-sm); font-size: 0.85rem; cursor: pointer; text-decoration: none; color: var(--text-light); transition: all var(--transition-fast); }
.share-btn:hover { border-color: var(--primary); color: var(--primary); }

/* "Your trip" badge shown on the Discover page in place of the
   Join button when the current user owns the trip. Same shape as
   .share-btn but the crown + green pill makes it obvious this is
   a self-owned row. CodeMax.md §17 commit 4. */
.share-btn.own-trip-badge { color: var(--primary, #006644); border-color: var(--primary, #006644); background: var(--primary-light); cursor: default; }
.share-btn.own-trip-badge:hover { color: var(--primary, #006644); border-color: var(--primary, #006644); background: var(--primary-light); }

/* Map container */
.map-container { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }

/* Route info panel */
.route-info-panel { position: absolute; bottom: 10px; left: 10px; background: var(--bg-white); padding: 8px 12px; border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.85rem; z-index: 1000; }

/* Toolbar */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.sort-btn { padding: 0.5rem 1rem; border: 1px solid var(--border); background: var(--bg-white); color: var(--text); border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; transition: all var(--transition-fast); }
.sort-btn:hover { border-color: var(--primary); color: var(--primary); }
.sort-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
/* Dark mode: inactive buttons get a transparent background
   (otherwise they match the page bg, which is the same as
   --bg-white in dark mode) and a subtle white wash on hover. */
:root[data-theme="dark"] .sort-btn { background: transparent; }
:root[data-theme="dark"] .sort-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.05); }
/* Dark mode: the active green is bright (#22c55e), so
   flip the text to dark green for contrast. Scoped to
   :not([data-theme="light"]) so the OS-level dark pref
   backs off when the user has explicitly chosen light. */
:root[data-theme="dark"] .sort-btn.active { color: #052e16; }

/* ================================================
   SHARE-BTN / SORT-BTN DARK-MODE OVERRIDES (§22)
   The base .share-btn / .sort-btn rules now use
   var(--bg-white) so the backgrounds flip correctly.
   But .sort-btn.active has 'color: white' on
   var(--primary) — same problem as .btn-primary:
   white on #22c55e is 1.96:1, below WCAG AA.
   Flip the text to dark green in dark mode.
   ================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .sort-btn.active {
        color: #052e16;  /* very dark green for high contrast on #22c55e */
    }
}

/* Stats */
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 0.85rem; color: var(--text-muted); }

/* Route grid cards */
.route-card-img { width: 100%; height: 180px; object-fit: cover; background: var(--primary-light); }

/* Loading & empty states */
.loading { text-align: center; padding: 3rem; color: var(--text-light); }
.empty { text-align: center; padding: 3rem; color: var(--text-muted); }

/* Form container */
.form-container { max-width: 450px; margin: 0 auto; padding: 2rem; background: var(--bg-white); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.form-container h1 { text-align: center; margin-bottom: 1.5rem; }
.form-footer { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.form-footer a { color: var(--primary); }

/* Hero stats */
.hero-stats { display: flex; justify-content: center; gap: 3rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.2); }
.hero-stat { text-align: center; }
.hero-stat-number { font-size: 2rem; font-weight: 700; color: var(--accent); }
.hero-stat-label { font-size: 0.9rem; opacity: 0.8; }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.feature-card { background: var(--bg-white); padding: 2rem; border-radius: var(--radius-xl); box-shadow: var(--shadow); transition: transform var(--transition-slow), box-shadow var(--transition-slow); border: 1px solid var(--border); }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,100,68,0.15); }
.feature-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }
.feature-card h3 { margin-bottom: 0.75rem; color: var(--text); }

/* Route preview cards */
.routes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.route-card-content { padding: 1.25rem; }
.route-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.route-link { color: var(--primary); font-weight: 500; }

/* Profile form */
.profile-section { background: var(--bg-white); padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 2rem; }
.profile-section h2 { color: var(--primary); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }

/* Vehicle select */
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }