/* BikeBase-specific styles layered on top of shared main.css.
   Visual overrides on Bootstrap's navbar + page layout. */

/* Navbar: reality-check dark accent bar with orange active highlight.
   Uses Bootstrap's navbar structure for responsive hamburger. */
.site-header {
    background: var(--accent, #2D3047) !important;
    margin: -10px -10px 16px;
    width: calc(100% + 20px);
}
.site-logo {
    font-weight: 700 !important;
    color: #fff !important;
}
.site-logo:hover { color: var(--primary, #FF6B35) !important; }
.site-logo img {
    border-radius: 4px;
    filter: brightness(0) invert(1);
    margin-right: 6px;
}
.site-header .nav-link {
    color: rgba(255,255,255,0.7) !important;
    border-radius: 4px;
    font-size: 0.9em;
}
.site-header .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.1);
}
.site-header .nav-link.active {
    color: #fff !important;
    background: var(--primary, #FF6B35);
}
.site-username { font-size: 0.85em; }

.page-content { min-height: 60vh; }

.site-footer {
    text-align: center;
    padding: 16px 0;
    color: var(--text-muted, #666);
}
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ---- Bootstrap component overrides ----
   Make Bootstrap's visual components match reality-check's look. */

/* Buttons: orange primary, rounded, reality-check font */
.btn-primary {
    background: var(--primary, #FF6B35) !important;
    border-color: var(--primary, #FF6B35) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background: var(--primary-dark, #E55A2B) !important;
    border-color: var(--primary-dark, #E55A2B) !important;
}
.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Cards: match reality-check elevation-profile card style */
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Tables: exact match to reality-check's .collection-table.
   Use high-specificity selectors to override Bootstrap's
   .table > :not(caption) > * > * padding. */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    line-height: 1.2;
    background: #fff;
    border-radius: 8px;
    --bs-table-bg: #fff;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-border-color: transparent;
}
/* Sticky header: light gray like reality-check's .collection-table th */
.table thead.sticky-top { background: #f5f5f5 !important; }
.table > :not(caption) > * > th {
    background: #f5f5f5 !important;
    padding: 6px 3px !important;
    text-align: left;
    font-weight: 600;
    color: #555;
    border-bottom: 2px solid #ddd !important;
    border-top: none !important;
    white-space: nowrap;
}
.table > :not(caption) > * > td {
    padding: 5px 3px !important;
    border-bottom: 1px solid #eee !important;
    border-top: none !important;
    vertical-align: middle;
    background: transparent !important;
}
.table > tbody > tr:last-child > td { border-bottom: none !important; }
.table .num,
.table td.text-nowrap {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.table .u, .table .unit {
    font-size: 0.8em;
    color: #888;
}
/* Kill all Bootstrap table visual overrides */
.table-striped > tbody > tr > * { background-color: transparent !important; }
.table-hover > tbody > tr:hover > * { background-color: transparent !important; }
.table-light, .table-light > td { background-color: transparent !important; }
.table-light > th { background-color: #f5f5f5 !important; }
.table > thead { border-bottom: none !important; }
.table > :not(:first-child) { border-top: none !important; }
.table-sm > :not(caption) > * > * { padding: 5px 3px !important; }
.table-borderless > :not(caption) > * > * { border: none !important; }

/* ---- Bootstrap class overrides to enforce style guide palette ---- */

/* Green buttons → orange primary */
.btn-success {
    background: var(--primary, #FF6B35) !important;
    border-color: var(--primary, #FF6B35) !important;
    color: #fff !important;
}
.btn-success:hover {
    background: var(--primary-dark, #E55A2B) !important;
    border-color: var(--primary-dark, #E55A2B) !important;
}
.btn-outline-success {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.btn-outline-success:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Yellow outline buttons → neutral secondary */
.btn-outline-warning {
    color: #555 !important;
    border-color: #bbb !important;
}
.btn-outline-warning:hover {
    background: #f0f0f0 !important;
    color: #333 !important;
    border-color: #999 !important;
}
/* Yellow filled buttons → orange primary */
.btn-warning {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.btn-warning:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

/* Filled gray secondary → outline style */
.btn-secondary {
    background: transparent !important;
    border: 1px solid #bbb !important;
    color: #555 !important;
}
.btn-secondary:hover {
    background: #f0f0f0 !important;
    color: #333 !important;
}

/* Red danger button → outline with primary-dark */
.btn-danger {
    background: transparent !important;
    border: 1px solid var(--primary-dark, #E55A2B) !important;
    color: var(--primary-dark, #E55A2B) !important;
}
.btn-danger:hover {
    background: var(--primary-dark) !important;
    color: #fff !important;
}

/* Green text → accent dark */
.text-success { color: var(--accent, #2D3047) !important; }

/* Yellow/amber text → muted or primary-dark */
.text-warning { color: var(--primary-dark, #E55A2B) !important; }
.text-warning-emphasis { color: var(--text-muted, #666) !important; }

/* Red row highlight → subtle left border instead of pink background */
.table-danger > td, .table-danger > th {
    background: transparent !important;
    border-left: 3px solid var(--primary-dark, #E55A2B) !important;
}

/* table-bordered → light separators only */
.table-bordered > :not(caption) > * > * {
    border: none !important;
    border-bottom: 1px solid #eee !important;
}

/* Cyan info badge → accent dark */
.badge.bg-info {
    background: var(--accent, #2D3047) !important;
    color: #fff !important;
}

/* Fix badge text-dark conflict: warning badges should have white text */
.badge.bg-warning.text-dark { color: #fff !important; }

/* Alerts: override Bootstrap blue/green to palette */
.alert-success {
    background: #fff5f0 !important;
    border-color: var(--primary) !important;
    color: var(--primary-dark, #E55A2B) !important;
}
.alert-info {
    background: #f0f7ff !important;
    border-color: #ccc !important;
    color: var(--text-dark, #333) !important;
}

/* Progress bars: orange fill, orange completion (not green) */
.progress-bar {
    background-color: var(--primary, #FF6B35) !important;
}
.progress-bar.bg-success {
    background-color: var(--accent, #2D3047) !important;
}
.progress-bar.bg-danger {
    background-color: var(--primary-dark, #E55A2B) !important;
}

/* Cards: no borders (shadow provides edge) */
.card.border-secondary {
    border-color: transparent !important;
}

/* Override reality-check's hero submit button (width:100%, 14px padding)
   which is designed for the single "Analyze" CTA. Bikebase forms use
   compact inline buttons instead. */
/* Override reality-check's hero submit button to match btn-sm exactly */
form > button[type="submit"],
form > button[type="submit"]:hover,
form > button[type="submit"]:disabled {
    width: auto !important;
    padding: 4px 8px !important;
    margin-top: 0 !important;
    font-size: 0.85em !important;
    line-height: 1.3 !important;
    border-radius: 4px !important;
}
/* Form action rows: flex layout so Save/Cancel left, Delete right,
   all vertically centered. Replaces float-end which breaks alignment. */
.form-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}
.form-actions .ms-auto { margin-left: auto !important; }

/* Forms: reality-check input style */
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(255,107,53,0.15);
}
/* Normalize input/select/button to identical height.
   Force the same box model so they align in filter rows. */
input.form-control-sm, input.form-control,
select.form-control-sm, select.form-control,
.form-select-sm, .form-select {
    height: 30px !important;
    font-size: 0.85em !important;
    line-height: 1.3 !important;
}
.form-control-sm, .form-control {
    padding: 4px 8px !important;
}
.form-select-sm, .form-select {
    padding: 4px 32px 4px 8px !important;
}
/* Filter form: align items to bottom so labels + inputs line up */
#filter-form {
    align-items: flex-end !important;
}

/* Action buttons in table rows: compact to fit.
   Normalize <a> and <button> to identical sizing; kill
   form wrapper margins so Disable matches Edit/Log. */
.table .btn-sm {
    padding: 2px 6px !important;
    font-size: 0.78em !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    vertical-align: middle;
}
.table form.d-inline,
.table form[class*="d-inline"] {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}
.table form.d-inline button,
.table form button.btn-sm {
    vertical-align: middle;
}

/* Badges and small elements */
.badge.bg-primary { background: var(--primary) !important; }

/* Links: orange for content links (route names, primary actions) —
   matches reality-check's convention for clickable items in tables/lists. */
a { color: var(--primary, #FF6B35); text-decoration: none; }
a:hover { color: var(--primary-dark, #E55A2B); text-decoration: underline; }
/* Utility/chrome links (footer, secondary actions) stay muted */
.text-muted a, .site-footer a, .small a { color: var(--text-muted, #666); }
.text-muted a:hover, .site-footer a:hover, .small a:hover { color: var(--primary); }

/* Buttons: primary=orange, secondary=dark outline, no Bootstrap blue */
.btn-outline-secondary { color: #555; border-color: #bbb; }
.btn-outline-secondary:hover { background: #f0f0f0; color: #333; border-color: #999; }
.btn-outline-danger { color: var(--primary-dark, #E55A2B); border-color: var(--primary-dark); }
.btn-outline-danger:hover { background: var(--primary-dark); color: #fff; }

/* Status badges: accent dark + muted, not green/yellow */
.badge.bg-success {
    background: var(--accent, #2D3047) !important;
}
.badge.bg-warning {
    background: var(--text-muted, #666) !important;
    color: #fff !important;
}
.badge.bg-dark, .badge.bg-secondary {
    background: var(--accent, #2D3047) !important;
}

/* Override container max-width to match reality-check */
.container { max-width: 1100px; }

/* Page heading */
h3, h4, h5 { color: var(--text-dark, #333); }

/* Photo load-failure placeholder. See static/photo-retry.js — the JS
   swaps the src to an inline SVG placeholder, so this just adds a visual
   cue that the element is tappable to retry. */
img.photo-failed {
    cursor: pointer;
    opacity: 0.85;
}

/* Dev-mode visual indicator (set on body via BIKEBASE_DEV_MODE env var). */
.dev-banner {
    background: #b85000;
    color: #fff;
    text-align: center;
    padding: 4px 10px;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.05em;
}
body.dev-mode .site-header {
    /* Tint the navbar so it's clearly not prod even when the banner
       has scrolled off-screen on mobile. */
    background: #5a3a4a !important;
}