html { position: relative; min-height: 100%; font-size: 14px; }
body { margin-bottom: 60px; }

header.sticky-top { z-index: 1030; }
header.sticky-top .navbar { background-color: rgba(var(--bs-body-bg-rgb), 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

body.feed-page { margin-bottom: 0; overflow: hidden; }
body.feed-page > .container { display: flex; flex-direction: column; height: calc(100vh - 4.5rem); overflow: hidden; padding-bottom: 0; }
body.feed-page main { flex: 1 1 0; overflow: hidden; padding-bottom: 0; }
body.feed-page main .row { height: 100%; }

body.feed-page .feed-items { height: 100%; overflow-y: auto; scrollbar-width: none; }
body.feed-page .feed-items::-webkit-scrollbar { display: none; }

body.feed-page .feed-friends { max-height: 50vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(128,128,128,0.3) transparent; }
body.feed-page .feed-friends::-webkit-scrollbar { width: 2px; }
body.feed-page .feed-friends::-webkit-scrollbar-track { background: transparent; }
body.feed-page .feed-friends::-webkit-scrollbar-thumb { background-color: rgba(128,128,128,0.3); border-radius: 2px; }
body.feed-page .feed-friends::-webkit-scrollbar-thumb:hover { background-color: rgba(128,128,128,0.6); }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }

.back-link { font-size: 0.9rem; opacity: 0.75; transition: opacity 0.15s ease;}
.back-link:hover { opacity: 1; }

.page-header { padding-bottom: 0.75rem; padding-top: 0.5rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.page-header h4 { margin-bottom: 0; }

.feed-friends .card-body { overflow-y: auto; }
.feed-friends ul { list-style: none; padding: 0; margin: 0; }
.feed-friends ul li { border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color); }
.feed-friends ul li:first-child a { border-top-left-radius: var(--bs-card-inner-border-radius); border-top-right-radius: var(--bs-card-inner-border-radius); }
.feed-friends ul li:last-child a { border-bottom-left-radius: var(--bs-card-inner-border-radius); border-bottom-right-radius: var(--bs-card-inner-border-radius); }
.feed-friends ul li a { display: block; padding: 10px; text-decoration: none; color: inherit; }
.feed-friends ul li a:hover { background-color: var(--bs-tertiary-bg); }
.feed-friends ul li a.active { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }

.feed-item.card { position: relative; z-index: 0; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.feed-item.card:hover { transform: translateY(-2px); box-shadow: 0 .4rem .8rem rgba(0,0,0,.18); cursor: pointer; background-color: var(--bs-tertiary-bg); }
.feed-item .feed-stat { font-size: 0.9rem; font-weight: 500; padding: 0.45em 0.65em; line-height: 1; }
.feed-item .feed-stat i { font-size: 0.8rem; opacity: 0.8; }
.feed-item .feed-stat-primary { font-weight: 600; }
.feed-item .feed-stat .feed-stat-secondary { font-size: 0.75em; font-weight: 400; opacity: 0.6; }
.feed-stat i { opacity: 0.95;}
.feed-stat .bi-map { color: #4dabf7; }         /* brighter blue */
.feed-stat .bi-clock { color: #adb5bd; }       /* lighter gray */
.feed-stat .bi-speedometer { color: #38d9a9; } /* brighter teal */
.feed-stat .bi-graph-up { color: #ffa94d; }    /* warm orange (better than brown) */
.feed-stat .bi-fire { color: #ff6b6b; }  

.friend-card { transition: transform 0.12s ease, box-shadow 0.12s ease; padding-top: 0.5rem; }
.friend-card:hover { transform: translateY(-3px); box-shadow: 0 .4rem .8rem rgba(0,0,0,.18); cursor: pointer; background-color: var(--bs-tertiary-bg); }
.friend-card .remove-friend-btn, .friend-card .accept-friend-btn { position: relative; z-index: 2; }
.friend-card a.stretched-link { text-decoration: none; }

.friends-content .tab-panel { animation: fadeInPanel 0.15s ease; }
.friends-content .tab-panel.d-none { display: none !important; }

.autocomplete-input { min-width: 350px; max-width: 100%; }
.friends-search { min-width: 350px; max-width: 100%; }

.split-run-detail-card .card-body > * + * { margin-top: 0.5rem; }

.avatar-sm { width: 32px; height: 32px; font-size: 0.85rem; }

.run-stat-card .card { border-color: rgba(255,255,255,0.08); transition: transform 0.1s ease, box-shadow 0.1s ease; }
.run-stat-card .feed-stat { padding: 0.25rem 0.5rem; font-size: 0.8rem; font-weight: 500; border-radius: 6px; }
.run-stat-card .feed-stat i { font-size: 0.75rem; opacity: 0.9; }
.run-stat-card h2 { font-weight: 600; margin-bottom: 0.15rem; line-height: 1.1; letter-spacing: 0.02em; }
.run-stat-card .stat-secondary { font-size: 0.9rem; opacity: 0.75; min-height: 1.25rem; }
.run-stat-card .card-body { padding-top: 0.9rem; padding-bottom: 0.9rem; }
.run-stat-card h2 small, .run-stat-card h2 span { font-weight: 500; opacity: 0.85; }

.split-run-detail .feed-stat { font-size: 0.9rem; font-weight: 500; padding: 0.45em 0.65em; }
.split-run-detail .feed-stat i { font-size: 0.8rem; opacity: 0.8; }
.split-run-detail .feed-stat-primary { font-weight: 600; }

.split-images { gap: 0.5rem; }
.split-image-placeholder { width: 80px; height: 80px; background-color: var(--bs-secondary-bg); border-radius: 6px; }
.split-image-placeholder:hover { background-color: var(--bs-tertiary-bg); cursor: pointer; }

.split-image-upload { width: 80px; height: 80px; border: 4px dashed var(--bs-border-color); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); cursor: pointer; transition: all 0.15s ease; }
.split-image-upload:hover { border-color: var(--bs-primary); color: var(--bs-primary); background-color: var(--bs-tertiary-bg); }
.split-image-upload .plus { font-size: 4rem; line-height: 1; display: flex; align-items: center; justify-content: center; transform: translateY(-6px); }
.split-image-thumb { position: relative; display: inline-block; width: 80px; height: 80px; border-radius: 6px; overflow: hidden; }
.split-image-img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; display: block; }
.split-image-delete { position: absolute; top: 2px; right: 2px; background: none; border: none; padding: 0; line-height: 1; cursor: pointer; color: var(--bs-danger); opacity: 0.85; font-size: 1rem; }
.split-image-delete:hover { opacity: 1; }

.split-user-name { font-size: 0.9rem; color: var(--bs-secondary-color); }

.badge-run-type { padding: 0.35rem; }

.split-row { display: grid; grid-template-columns: 60px 1fr 55px; align-items: center; gap: 8px; margin-bottom: 0.35rem; }

.split-edit-header,
.split-edit-row { display: grid; grid-template-columns: 1fr 130px 1fr 64px; gap: 0.5rem; align-items: center; }
.split-edit-header { margin-bottom: 0.25rem; }
.split-edit-header span { font-size: 0.8rem; font-weight: 500; color: var(--bs-secondary-color); }
.split-edit-row { margin-bottom: 0.4rem; }
.split-trend { text-align: center; margin-left: 4px;}
.trend-up { color: #51cf66; }
.trend-down { color: #ff6b6b; }

.split-label { font-size: 0.9rem; color: var(--bs-secondary-color); }
.split-pace { text-align: right; font-weight: 500; min-width: 55px; }

.split-bar { position: relative; width: 100%; max-width: min(70%, 800px); height: 6px; background-color: rgba(255,255,255,0.08); border-radius: 4px; }
.split-bar-fill { position: relative; height: 100%; border-radius: 4px; transition: width 0.4s ease; background: linear-gradient(to right, var(--bs-primary), rgba(59,130,246,0.85)); }
.split-bar-fill.split-fastest { background: linear-gradient(to right, #3ddc97, #20c997); }

.split-bar-indicator { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); font-size: 0.85rem; line-height: 1; }

.split-summary .badge { font-weight: 500; }

.splits-table thead th { border-bottom: 1px solid var(--bs-border-color); font-size: 0.8rem; font-weight: 500; color: var(--bs-secondary-color); padding: 0.25rem 0.5rem 0.5rem; }
.splits-table tbody td { border: none; padding: 0.3rem 0.5rem; vertical-align: middle; }
.splits-table .split-label { font-size: 0.9rem; color: var(--bs-secondary-color); white-space: nowrap; }
.splits-table .split-pace { font-weight: 500; white-space: nowrap; }
.splits-table .split-bar-cell { width: 100%; }
@media (max-width: 400px) { .splits-table .split-bar-cell { min-width: 80px; } }

.split-comment { border-left: 2px solid var(--bs-border-color); padding-left: 0.5rem; }

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}