/* ========================================
   ClimbTrack - Main Stylesheet
   ======================================== */

/* ---- Base & Layout ---- */
html, body {
    height: 100%;
}
body {
    background-color: #f5f6fa;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#main-content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Color indicators for climbing route colors */
.color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Color pill: larger badge showing color name inside */
.color-pill {
    display: inline-block;
    width: 110px;
    height: 30px;
    line-height: 28px;
    border-radius: 15px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    padding: 0;
    vertical-align: middle;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
}
.color-pill.color-pill-light {
    color: #333;
    text-shadow: none;
}

/* Grade badges */
.grade-badge {
    display: inline-block;
    padding: 4px 0;
    border-radius: 14px;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    width: 60px;
    text-align: center;
}

/* Status badges */
.status-badge {
    display: inline-block;
    min-width: 100px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}
.status-badge:hover {
    opacity: 0.85;
    transform: scale(1.03);
}

.status-not_attempted {
    color: #9ca3af;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
}
.status-failed {
    color: #fff;
    background-color: #f59e0b;
}
.status-top_rope {
    color: #fff;
    background-color: #06b6d4;
}
.status-lead {
    color: #fff;
    background-color: #10b981;
}

/* Star rating */
.star-rating {
    font-size: 1.5rem;
    color: #ffc107;
    cursor: pointer;
}
.star-rating .bi-star-fill {
    color: #ffc107;
}
.star-rating .bi-star {
    color: #adb5bd;
}
.star-rating i:hover,
.star-rating i:hover ~ i {
    color: #ffc107;
}

.stars-display {
    color: #ffc107;
    font-size: 0.85rem;
}
.stars-display .bi-star {
    color: #adb5bd;
}

/* ---- Grade Distribution Chart (27crags style) ---- */
.grade-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(2px, 0.8vw, 8px);
    padding: 20px 10px 0;
    min-height: 160px;
}
.grade-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s ease;
    flex: 1 1 0;
    min-width: 0;
    max-width: 36px;
}
.grade-chart-col:hover {
    transform: translateY(-3px);
}
.grade-chart-col.active .grade-chart-bar {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.5);
}
.grade-chart-count {
    font-size: clamp(0.55rem, 1.2vw, 0.75rem);
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 4px;
    min-height: 16px;
}
.grade-chart-bar {
    width: 100%;
    border-radius: 50px;
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-height: 8px;
    position: relative;
    overflow: hidden;
}
/* Lead completion overlay inside bar — dark saturated color from bottom */
.grade-chart-bar .lead-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 -3px 6px rgba(255, 255, 255, 0.55);
}
.grade-chart-label {
    font-size: clamp(0.55rem, 1.2vw, 0.75rem);
    font-weight: 600;
    color: #9ca3af;
    margin-top: 8px;
}
.grade-chart-col:hover .grade-chart-label,
.grade-chart-col.active .grade-chart-label {
    color: #374151;
}

/* Compact mode for detailed (with + variants) chart */
.grade-chart--detailed {
    gap: clamp(1px, 0.3vw, 3px);
    padding: 12px 4px 0;
}
.grade-chart--detailed .grade-chart-label {
    font-size: clamp(0.45rem, 0.9vw, 0.6rem);
    margin-top: 4px;
}
.grade-chart--detailed .grade-chart-count {
    font-size: clamp(0.45rem, 0.9vw, 0.6rem);
    min-height: 12px;
    margin-bottom: 2px;
}
.grade-chart-wrapper {
    background: #fff;
    border-radius: 16px;
    padding: 8px 8px 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #b8c0cc;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Chart bar colors by grade — light base, dark fill for lead completions */
.chart-bar-3 { background-color: #a5d6a7; }
.chart-bar-4 { background-color: #fff59d; }
.chart-bar-5 { background-color: #a5d6a7; }
.chart-bar-6 { background-color: #90caf9; }
.chart-bar-7 { background-color: #ef9a9a; }
.chart-bar-8 { background-color: #9e9e9e; }
.chart-bar-9 { background-color: #bdbdbd; }

/* Dark (saturated) fill colors for lead overlay */
.chart-bar-3 .lead-fill { background-color: #4caf50; }
.chart-bar-4 .lead-fill { background-color: #FFD600; }
.chart-bar-5 .lead-fill { background-color: #4caf50; }
.chart-bar-6 .lead-fill { background-color: #1e88e5; }
.chart-bar-7 .lead-fill { background-color: #f44336; }
.chart-bar-8 .lead-fill { background-color: #212121; }
.chart-bar-9 .lead-fill { background-color: #000000; }

/* Dark chart variant for My Ascents — bars use the saturated colors directly */
.grade-chart-wrapper--dark .chart-bar-3 { background-color: #4caf50; }
.grade-chart-wrapper--dark .chart-bar-4 { background-color: #FFD600; }
.grade-chart-wrapper--dark .chart-bar-5 { background-color: #4caf50; }
.grade-chart-wrapper--dark .chart-bar-6 { background-color: #1e88e5; }
.grade-chart-wrapper--dark .chart-bar-7 { background-color: #f44336; }
.grade-chart-wrapper--dark .chart-bar-8 { background-color: #424242; }
.grade-chart-wrapper--dark .chart-bar-9 { background-color: #212121; }

/* Layout row: archived toggle button inside chart card */
.grade-chart-wrapper--dark {
    display: flex;
    flex-direction: column;
}
.grade-chart-wrapper {
    display: flex;
    flex-direction: column;
}
.chart-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 4px 12px;
}
.ascents-chart-archive-icon {
    display: none;
}

/* Archived indicator inside status button */
.rc-archived-icon {
    font-size: 0.72rem;
    color: #6b7280;
    margin-left: auto;
    padding-left: 6px;
    flex-shrink: 0;
}
.rc-archived-tag {
    font-size: 0.68rem;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ---- Sort Controls ---- */
.sort-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    justify-content: center;
}
.sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.sort-btn:hover {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #374151;
}
.sort-btn.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}
.sort-btn .sort-icon {
    font-size: 0.7rem;
    opacity: 0.6;
}
.sort-btn.active .sort-icon {
    opacity: 1;
}

/* ---- Sortable columns (legacy tables) ---- */
.sortable {
    cursor: pointer;
    user-select: none;
}
.sortable:hover {
    background-color: #2c3034;
    color: #fff;
}
.sortable .bi-arrow-down-up {
    font-size: 0.75rem;
    opacity: 0.5;
}
.sortable.sort-asc .bi-arrow-down-up,
.sortable.sort-desc .bi-arrow-down-up {
    opacity: 1;
}
.sortable.sort-asc,
.sortable.sort-desc {
    background-color: rgba(13, 110, 253, 0.35);
    color: #fff;
}

/* ---- Route Cards ---- */
:root {
    --route-grid: 50px 1fr 80px 120px 120px 80px;
    --history-grid: 50px 1fr 80px 120px 120px 80px 100px;
    --ascents-grid: 50px 1fr 80px 120px 120px 90px 80px 60px;
    --users-grid: 1fr 56px 56px 56px;
    --users-admin-grid: 1fr 56px 56px 56px;
    --admin-colors-grid: 60px 1fr 100px 60px 120px;
    --profile-grid: 50px 1fr 80px 120px 120px 90px 80px;
}
#page-history.admin-view {
    --history-grid: 50px 1fr 80px 120px 120px 80px 100px 80px;
}
.route-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 auto;
}
.routes-list-container {
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #b8c0cc;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* ---- Inline sort header for route/ascent lists ---- */
.rc-sort-header {
    display: flex;
    align-items: stretch;
    background: #f1f5f9;
    border-bottom: 2px solid #b8c0cc;
    min-height: 34px;
    user-select: none;
}
.rc-sort-header:empty { display: none; }
.rc-sort-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 10px;
    transition: color 0.15s;
}
.rc-sort-cell:hover { color: #64748b; }
.rc-sort-cell.sorted { color: #3b82f6; }
.rc-sort-header .sort-icon { font-size: 0.6rem; opacity: 0.6; }
.rc-sort-cell.sorted .sort-icon { opacity: 1; }
.rc-sort-sector { flex: 0 0 60px; border-right: 1px solid rgba(0,0,0,0.1); }
.rc-sort-color  { flex: 0 0 110px; justify-content: center; border-right: 1px solid rgba(0,0,0,0.1); }
.rc-sort-info   {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
}
.rc-sort-info .rc-sort-cell { padding: 0; }
.rc-sort-breakdown {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.rc-sort-breakdown .rc-sort-cell { width: 36px; min-width: 36px; justify-content: flex-start; padding: 0; }
.rc-sort-grade  { flex: 0 0 88px; justify-content: center; border-right: 1px solid rgba(0,0,0,0.1); }
.rc-sort-status { flex: 0 0 152px; }
/* ---- New Route Cards (v4 dark style) ---- */
.rc {
    display: flex;
    align-items: stretch;
    min-height: 52px;
    background: #fff;
    border-bottom: 1px solid #b8c0cc;
    overflow: hidden;
    transition: background 0.2s ease;
    cursor: pointer;
}
.rc:last-child  { border-bottom: none; }
.rc:hover { background: #f8fafc; }

.rc-color-panel {
    flex: 0 0 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rc-color, #475569);
    position: relative;
}
.rc-color-name {
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
    text-align: center;
    padding: 0 8px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

.rc-main {
    flex: 0 0 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, 0.13);
    gap: 4px;
    position: relative;
}
.rc-main .rc-sector {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc-badges {
    position: absolute;
    top: 3px;
    right: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.rc-new-badge {
    font-size: 0.6rem;
    color: #f59e0b;
    line-height: 1;
}
.rc-warning-badge {
    font-size: 0.6rem;
    color: #ef4444;
    line-height: 1;
}

.rc-info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0;
    overflow: hidden;
}
.rc-info-top {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
    padding: 10px 12px;
}
.rc-setter-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
.rc-info .rc-setter-name {
    font-size: 0.78rem;
    color: rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.rc-info .rc-created-date {
    font-size: 0.65rem;
    color: rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.rc-info-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
}
.rc-stars {
    display: flex;
    align-items: center;
    margin-top: -1px;
}
.rc-stars .stars-display {
    font-size: 0.88rem;
    line-height: 1;
}
.rc-stars .stars-display .bi-star-fill {
    -webkit-text-stroke: 0.4px #b45309;
}
.rc-stars-interactive {
    cursor: pointer;
    gap: 4px;
}
.rc-stars-interactive [data-s] {
    transition: color 0.1s;
}
.rc-stars-avg {
    font-size: 0.68rem;
    font-weight: 700;
    color: #9ca3af;
    line-height: 1;
    white-space: nowrap;
}
.rc-send-breakdown {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
}
.rc-send-lead    { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 600; color: #10b981; white-space: nowrap; min-width: 36px; font-variant-numeric: tabular-nums; }
.rc-send-toprope { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 600; color: #06b6d4; white-space: nowrap; min-width: 36px; font-variant-numeric: tabular-nums; }
.rc-send-failed  { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 600; color: #f59e0b; white-space: nowrap; min-width: 36px; font-variant-numeric: tabular-nums; }
.rc-send-lead[data-clickable], .rc-send-toprope[data-clickable], .rc-send-failed[data-clickable] { cursor: pointer; }
.rc-send-lead[data-clickable]:hover, .rc-send-toprope[data-clickable]:hover, .rc-send-failed[data-clickable]:hover { opacity: 0.75; }

/* Users popover */
.send-popover {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 10px 14px;
    min-width: 140px;
    max-width: 240px;
    font-size: 0.82rem;
}
.send-popover-title {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
    margin-bottom: 6px;
}
.send-popover-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.send-popover-list li {
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.send-popover-empty {
    color: #9ca3af;
    font-style: italic;
}

.rc-right {
    display: flex;
    align-items: stretch;
    background: transparent;
    border-left: none;
    flex-shrink: 0;
}
.rc-grade-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    flex: 0 0 88px;
    width: 88px;
    min-width: 88px;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
}
.rc-grade-col:last-child {
    border-right: none;
}

.rc-status-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 14px;
    flex: 0 0 152px;
    width: 152px;
    min-width: 152px;
    max-width: 152px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s ease;
}
.rc-status-btn:hover { background: rgba(0, 0, 0, 0.04); }
.rc-status-readonly { cursor: default; }
.rc-status-readonly:hover { background: transparent; }
.rc-status-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.rc-status-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(0, 0, 0, 0.3);
    transition: color 0.2s;
    white-space: nowrap;
}
/* Circle + label colors per status */
.rc[data-status="lead"] .rc-status-circle       { background: #10b981; border-color: #6ee7b7; box-shadow: 0 0 8px #10b98155; }
.rc[data-status="lead"] .rc-status-label         { color: #10b981; }
.rc[data-status="top_rope"] .rc-status-circle    { background: #06b6d4; border-color: #67e8f9; box-shadow: 0 0 8px #06b6d455; }
.rc[data-status="top_rope"] .rc-status-label     { color: #06b6d4; }
.rc[data-status="failed"] .rc-status-circle      { background: #f59e0b; border-color: #fcd34d; box-shadow: 0 0 8px #f59e0b55; }
.rc[data-status="failed"] .rc-status-label       { color: #f59e0b; }
/* Tinted backgrounds for selected status */
.rc[data-status="lead"]              { background: #dcfce7; }
.rc[data-status="lead"]:hover        { background: #bbf7d0; }
.rc[data-status="top_rope"]          { background: #dbeafe; }
.rc[data-status="top_rope"]:hover    { background: #bfdbfe; }
.rc[data-status="failed"]            { background: #fef3c7; }
.rc[data-status="failed"]:hover      { background: #fde68a; }

/* Header row for route cards — hidden in new dark card layout */
.route-list-header { display: none !important; }

/* ---- History Cards ---- */
.history-list-header {
    display: grid;
    grid-template-columns: var(--history-grid);
    gap: 12px;
    padding: 0 18px 4px;
    max-width: 960px;
    margin: 0 auto;
}
.history-list-header > span {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5c9d0;
    font-size: 0.8rem;
    transition: color 0.15s ease;
}
.history-list-header > span:hover { color: #6b7280; }
.history-list-header > span.sorted { color: #3b82f6; }
.hc-admin-header { display: none !important; }
#page-history.admin-view .hc-admin-header { display: flex !important; }
.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 960px;
    margin: 0 auto;
}
.history-card {
    display: grid;
    grid-template-columns: var(--history-grid);
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
}
.history-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    border-color: #e0e0e0;
}
.history-card .hc-sector { font-weight: 700; font-size: 1.1rem; color: #374151; text-align: center; }
.history-card .hc-color { display: flex; align-items: center; justify-content: center; min-width: 0; }
.history-card .hc-grade { text-align: center; }
.history-card .hc-setter { font-size: 0.85rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-card .hc-status { text-align: center; }
.history-card .hc-rating { text-align: center; }
.history-card .hc-date { font-size: 0.85rem; color: #6b7280; text-align: center; }
.hc-admin-actions { display: none; text-align: center; }
#page-history.admin-view .hc-admin-actions { display: block; }

/* ---- My Ascents Cards ---- */
.ascents-list-header {
    display: grid;
    grid-template-columns: var(--ascents-grid);
    gap: 12px;
    padding: 0 18px 4px;
    max-width: 960px;
    margin: 0 auto;
}
.ascents-list-header > span {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5c9d0;
    font-size: 0.8rem;
    transition: color 0.15s ease;
}
.ascents-list-header > span:hover { color: #6b7280; }
.ascents-list-header > span.sorted { color: #3b82f6; }
.ascents-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 960px;
    margin: 0 auto;
}
.ascent-card {
    display: grid;
    grid-template-columns: var(--ascents-grid);
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
}
.ascent-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    border-color: #e0e0e0;
}
.ascent-card .ac-sector { font-weight: 700; font-size: 1.1rem; color: #374151; text-align: center; }
.ascent-card .ac-color { display: flex; align-items: center; justify-content: center; min-width: 0; }
.ascent-card .ac-grade { text-align: center; }
.ascent-card .ac-setter { font-size: 0.85rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ascent-card .ac-status { text-align: center; }
.ascent-card .ac-date { font-size: 0.85rem; color: #6b7280; text-align: center; }
.ascent-card .ac-rating { text-align: center; }
.ascent-card .ac-archived { text-align: center; }

/* ---- Users Cards (unified — admin gets extra columns) ---- */
.users-list-header {
    display: grid;
    grid-template-columns: var(--users-grid);
    gap: 12px;
    padding: 0 18px 4px;
    max-width: 960px;
    margin: 0 auto;
}
.users-list-header--admin {
    grid-template-columns: var(--users-admin-grid);
}
.users-list-header > span {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #c5c9d0;
    font-size: 0.78rem;
    font-weight: 600;
    transition: color 0.15s ease;
}
.users-list-header > span:hover { color: #6b7280; }
.users-list-header > span.sorted { color: #3b82f6; }
.users-list-container {
    max-width: 960px;
    margin: 0 auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1px solid #b8c0cc;
    border-radius: 16px;
    overflow: hidden;
}
.users-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.user-card {
    display: grid;
    grid-template-columns: var(--users-grid);
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 12px 18px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid #b8c0cc;
}
.users-list > .user-card:last-child { border-bottom: none; }
.user-card--admin {
    grid-template-columns: var(--users-admin-grid);
}
.user-card:hover { background: #f8fafc; }
.user-card--status-active   { background: #f0fdf4; }
.user-card--status-active:hover   { background: #dcfce7; }
.user-card--status-pending  { background: #fefce8; }
.user-card--status-pending:hover  { background: #fef9c3; }
.user-card--status-disabled { background: #fff5f5; }
.user-card--status-disabled:hover { background: #fee2e2; }
.user-card--header {
    background: #f1f5f9;
    cursor: default;
    border-bottom: 2px solid #b8c0cc;
}
.user-card--header:hover { background: #f1f5f9; }
.uc-sort-cell {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.73rem;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.uc-sort-cell.uc-stat { justify-content: flex-start; padding-left: 4px; }
.uc-sort-cell.uc-status { justify-content: center; }
.uc-sort-cell:hover { color: #6b7280; }
.uc-sort-cell.sorted { color: #3b82f6; }
.uc-sort-cell .sort-icon { font-size: 0.65rem; }
.user-card .uc-username { font-weight: 700; color: #374151; }
.user-card .uc-email { font-size: 0.82rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card .uc-stat { display: flex; align-items: center; padding-left: 4px; }
.user-card .uc-status { text-align: center; }
.user-card .uc-admin-flag { text-align: center; }
.user-card .uc-date { font-size: 0.85rem; color: #6b7280; text-align: center; }
.user-card .uc-actions { text-align: right; white-space: nowrap; }
.uc-stat-lead    { color: #10b981; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.uc-stat-toprope { color: #06b6d4; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.uc-stat-failed  { color: #f59e0b; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.uc-stat-total   { color: #6b7280; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.profile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.profile-meta-sep { color: #cbd5e1; font-size: 0.8rem; }
.profile-meta-date { font-size: 0.8rem; color: #6b7280; }
.profile-action-btn { font-size: 0.75rem; padding: 2px 10px; }
.profile-action-btn--danger { border-color: #ef4444; color: #ef4444; }
.profile-action-btn--danger:hover { background: #ef4444; color: #fff; }
.profile-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.uc-status-pill {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.uc-status-active   { background: #d1fae5; color: #047857; }
.uc-status-pending  { background: #dbeafe; color: #1d4ed8; }
.uc-status-disabled { background: #fee2e2; color: #b91c1c; }
.uc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 0.8rem;
    cursor: pointer;
    background: transparent;
    transition: all 0.15s ease;
    padding: 0;
}
.uc-action-btn + .uc-action-btn { margin-left: 4px; }
.uc-action-btn--validate { border-color: #10b981; color: #10b981; }
.uc-action-btn--validate:hover { background: #10b981; color: #fff; }
.uc-action-btn--disable  { border-color: #ef4444; color: #ef4444; }
.uc-action-btn--disable:hover  { background: #ef4444; color: #fff; }

/* ---- Admin Colors Cards ---- */
.admin-colors-list-header {
    display: grid;
    grid-template-columns: var(--admin-colors-grid);
    gap: 12px;
    padding: 0 18px 4px;
}
.admin-colors-list-header > span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.admin-colors-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-color-card {
    display: grid;
    grid-template-columns: var(--admin-colors-grid);
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
}
.admin-color-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    border-color: #e0e0e0;
}
.admin-color-card .acc-preview { text-align: center; }
.admin-color-card .acc-name { font-weight: 600; color: #374151; }
.admin-color-card .acc-hex { font-family: monospace; font-size: 0.85rem; color: #6b7280; }
.admin-color-card .acc-bicolore { text-align: center; }
.admin-color-card .acc-actions { text-align: center; white-space: nowrap; }

/* ---- User Profile Cards ---- */
.profile-list-header {
    display: grid;
    grid-template-columns: var(--profile-grid);
    gap: 12px;
    padding: 0 18px 4px;
    max-width: 960px;
    margin: 0 auto;
}
.profile-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 960px;
    margin: 0 auto;
}
.profile-card {
    display: grid;
    grid-template-columns: var(--profile-grid);
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
}
.profile-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    border-color: #e0e0e0;
}
.profile-card .pc-sector { font-weight: 700; font-size: 1.1rem; color: #374151; text-align: center; }
.profile-card .pc-color { display: flex; align-items: center; justify-content: center; min-width: 0; }
.profile-card .pc-grade { text-align: center; }
.profile-card .pc-setter { font-size: 0.85rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-card .pc-status { text-align: center; }
.profile-card .pc-date { font-size: 0.85rem; color: #6b7280; text-align: center; }
.profile-card .pc-rating { text-align: center; }

/* ---- Filter Pills ---- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.filter-bar select {
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    padding: 6px 16px;
    font-size: 0.85rem;
    background: #fff;
    color: #374151;
    min-width: 140px;
    transition: border-color 0.15s;
    appearance: auto;
}
.filter-bar select:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Review cards */
.review-card {
    border-left: 3px solid #3b82f6;
    padding: 10px 14px;
    margin-bottom: 10px;
    background-color: #f9fafb;
    border-radius: 0 8px 8px 0;
}
.review-card .review-author {
    font-weight: 600;
    font-size: 0.9rem;
}
.review-card .review-date {
    font-size: 0.75rem;
    color: #6c757d;
}
.review-card .review-comment {
    font-size: 0.9rem;
    margin-top: 4px;
}

/* Grade color mapping (4=yellow, 5=green, 6=blue, 7=red, 8+=black) */
.grade-3 { background-color: #4caf50; }
.grade-4 { background-color: #FFD600; color: #333; }
.grade-5 { background-color: #4caf50; }
.grade-6 { background-color: #1e88e5; }
.grade-7 { background-color: #f44336; }
.grade-8 { background-color: #212121; }
.grade-9 { background-color: #000000; }

/* Grades chart bar (profile page horizontal bars) */
.grade-bar-container {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.grade-bar-label {
    width: 50px;
    text-align: right;
    padding-right: 8px;
    font-weight: 600;
    font-size: 0.85rem;
}
.grade-bar {
    height: 24px;
    border-radius: 4px;
    min-width: 4px;
    transition: width 0.3s;
}
.grade-bar-count {
    padding-left: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Modal status buttons */
#modal-status-group .btn.active {
    color: #fff !important;
}
#modal-status-group .btn[data-status="not_attempted"].active {
    background-color: #6c757d;
    border-color: #6c757d;
}
#modal-status-group .btn[data-status="failed"].active {
    background-color: #ff9800;
    border-color: #ff9800;
}
#modal-status-group .btn[data-status="top_rope"].active {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}
#modal-status-group .btn[data-status="lead"].active {
    background-color: #198754;
    border-color: #198754;
}

/* ---- Route Detail Modal ---- */
.rd-modal {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

/* Banner */
.rd-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 16px;
    gap: 12px;
}
.rd-banner .rc-color-name {
    font-size: 0.88rem;
    letter-spacing: 2px;
}
.rd-banner-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.rd-admin-btn {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    transition: background 0.15s;
}
.rd-admin-btn:hover {
    background: rgba(255,255,255,0.35);
    color: #fff;
}
.rd-banner--bicolore .rd-admin-btn {
    background: rgba(0,0,0,0.12);
    color: #1f2937;
    border-color: rgba(0,0,0,0.2);
}
.rd-banner--bicolore .rd-admin-btn:hover {
    background: rgba(0,0,0,0.22);
    color: #1f2937;
}
.rd-banner--bicolore .btn-close {
    filter: none;
    --bs-btn-close-color: #1f2937;
}
.rd-close {
    opacity: 0.85;
}

/* Info row */
.rd-info-row {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    gap: 12px;
}
.rd-info-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    justify-content: center;
}
.rd-info-left-top {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.rd-detail-sector {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-archived-badge {
    font-size: 0.68rem;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}
.rd-detail-setter {
    font-size: 0.82rem;
    color: rgba(0,0,0,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-info-grade {
    flex-shrink: 0;
}

/* Stars + tops row */
.rd-stars-tops-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    gap: 12px;
}
.rd-tops {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Setter note banner below the stars/tops row */
.rd-setter-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 18px;
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
    font-size: 0.82rem;
    color: #92400e;
    line-height: 1.45;
}
.rd-setter-note-icon {
    color: #f97316;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Modal status cycle button — naked, no box */
.rd-status-btn {
    width: fit-content;
    background: none;
    border: none;
}
.rd-status-btn:hover {
    background: none;
}
/* Inherit rc status colors */
.rd-status-btn[data-status="lead"]       .rc-status-circle { background: #10b981; border-color: #6ee7b7; box-shadow: 0 0 8px #10b98155; }
.rd-status-btn[data-status="lead"]       .rc-status-label  { color: #10b981; }
.rd-status-btn[data-status="top_rope"]   .rc-status-circle { background: #06b6d4; border-color: #67e8f9; box-shadow: 0 0 8px #06b6d455; }
.rd-status-btn[data-status="top_rope"]   .rc-status-label  { color: #06b6d4; }
.rd-status-btn[data-status="failed"]     .rc-status-circle { background: #f59e0b; border-color: #fcd34d; box-shadow: 0 0 8px #f59e0b55; }
.rd-status-btn[data-status="failed"]     .rc-status-label  { color: #f59e0b; }

/* Publier button */
.rd-publish-btn {
    background: #64748b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    width: 36px;
    padding: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.rd-publish-btn:hover {
    background: #475569;
    color: #fff;
}
.rd-comment-input {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.rd-comment-input textarea {
    flex: 1;
}
.rd-comment-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Body */
.rd-body {
    padding: 18px 20px 16px;
}
.rd-section {
    margin-bottom: 4px;
}
.rd-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #9ca3af;
    margin-bottom: 10px;
}
.rd-divider {
    border-top: 1px solid #e5e7eb;
    margin: 16px 0;
}


/* ---- Navigation ---- */
.app-navbar {
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0;
    flex-shrink: 0;
    z-index: 1000;
}
.app-navbar .container-fluid {
    height: 56px;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}
/* Logo */
.app-navbar .app-navbar-brand {
    color: #f1f5f9 !important;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    text-decoration: none;
    white-space: nowrap;
    margin-right: 20px;
}
.app-navbar .app-navbar-brand i {
    color: #3b82f6;
    font-size: 1.2rem;
}
/* Nav links */
.app-navbar-links { gap: 2px; }
.app-navbar-links .nav-link {
    color: rgba(255,255,255,0.48) !important;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 6px 13px !important;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    display: flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.app-navbar-links .nav-link:hover {
    color: rgba(255,255,255,0.85) !important;
    background: rgba(255,255,255,0.07);
}
.app-navbar-links .nav-link.active {
    color: #fff !important;
    font-weight: 700;
    background: rgba(255,255,255,0.11);
}
/* Right section */
.app-navbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.app-navbar-username {
    color: rgba(255,255,255,0.45);
    font-size: 0.78rem;
    font-weight: 600;
}
.app-navbar-btn {
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 5px 13px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.18);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.app-navbar-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.28);
}
.app-navbar-btn--exit {
    border: none;
    padding: 5px 8px;
    font-size: 1rem;
    color: rgba(255,255,255,0.38);
}
.app-navbar-btn--exit:hover {
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.07);
    border: none;
}
/* Mobile toggler */
.app-navbar-toggler {
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px;
    padding: 4px 10px;
    box-shadow: none !important;
    background: transparent;
    color: rgba(255,255,255,0.65);
}
.app-navbar-toggler i {
    font-size: 1.3rem;
    line-height: 1;
    display: block;
}
/* Mobile dropdown overlay */
@media (max-width: 767px) {
    .app-navbar .navbar-collapse {
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        background: #0f172a;
        padding: 6px 4px 12px;
        border-top: 1px solid rgba(255,255,255,0.07);
        box-shadow: 0 8px 20px rgba(0,0,0,0.35);
        z-index: 999;
    }
    .app-navbar-links .nav-link { padding: 10px 12px !important; }
    .app-navbar-right {
        margin-left: 0;
        padding: 8px 4px 0;
        border-top: 1px solid rgba(255,255,255,0.07);
        margin-top: 4px;
    }
}

/* Stat cards */
.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
    border: 1px solid #f0f0f0;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}
.stat-card .stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stat-card.stat-lead .stat-value { color: #10b981; }
.stat-card.stat-toprope .stat-value { color: #06b6d4; }
.stat-card.stat-failed .stat-value { color: #f59e0b; }
.stat-card.stat-total .stat-value { color: #6b7280; }

/* Page section headers */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.page-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.page-header h2 {
    font-weight: 800;
    font-size: 1.5rem;
    color: #1f2937;
    margin: 0;
}
.btn-create-route {
    background: #fff;
    color: #1f2937;
    border: 1.5px solid #1f2937;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, color 0.15s;
}
.btn-create-route:hover {
    background: #1f2937;
    color: #fff;
}

/* Auth Modal */
.auth-modal-dialog { margin-top: 80px; }
.auth-modal-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.3px;
}
.auth-modal-brand i {
    color: #3b82f6;
    font-size: 1.2rem;
}
.auth-modal-title {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
    margin-bottom: 16px;
}
.auth-switch {
    font-size: 0.82rem;
    color: #6b7280;
}
.auth-switch a { color: #3b82f6; text-decoration: none; font-weight: 500; }
.auth-switch a:hover { text-decoration: underline; }

/* Colors Modal */
.colors-modal-list {
    overflow-y: auto;
    max-height: 460px;
}
.color-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s;
}
.color-modal-row:last-child {
    border-bottom: none;
}
.color-modal-row:hover {
    background: #f9fafb;
}
.color-modal-row--editing {
    background: #f8fafc;
    padding: 10px 16px;
}
.color-modal-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}
.color-modal-name {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 500;
    color: #1f2937;
}
.color-modal-hex {
    font-size: 0.75rem;
    color: #9ca3af;
    font-family: monospace;
    width: 70px;
    text-align: right;
}
.color-modal-bicolore {
    width: 22px;
    text-align: center;
    font-size: 0.8rem;
    color: #6b7280;
}
.color-modal-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.color-modal-actions .btn {
    padding: 3px 8px;
    font-size: 0.75rem;
}
.colors-picker-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.colors-picker {
    width: 42px;
    height: 38px;
    padding: 2px;
    flex-shrink: 0;
}
.color-modal-add-row {
    padding: 10px 16px;
    border-top: 1px solid #e5e7eb;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}
.empty-state i {
    font-size: 3rem;
    margin-bottom: 12px;
    display: block;
}
.empty-state p {
    font-size: 1rem;
}

/* Card hover (legacy) */
.card {
    transition: transform 0.2s;
}
.card:hover {
    transform: translateY(-2px);
}

/* ---- Responsive ---- */
@media (max-width: 750px) {
    .rc-send-breakdown,
    .rc-sort-breakdown { display: none; }
}

@media (max-width: 600px) {
    .rc .rc-stars { display: none; }
    .sort-btn[data-sort="avg_rating"],
    .sort-btn[data-sort="rating"] { display: none; }
}

@media (max-width: 500px) {
    .rc-setter-name, .rc-created-date { display: none; }
    .sort-btn[data-sort="setter"] { display: none; }
}

@media (max-width: 992px) {
    :root {
        --route-grid: 40px 1fr 60px 110px;
        --history-grid: 40px 1fr 60px 110px 80px;
        --ascents-grid: 40px 1fr 60px 110px 80px 60px;
        --users-grid: 1fr 80px 80px 80px 120px;
        --admin-users-grid: 1fr 100px 60px 160px;
        --profile-grid: 40px 1fr 60px 110px 80px;
    }
    #page-history.admin-view { --history-grid: 40px 1fr 60px 110px 80px 80px; }
    .history-card, .ascent-card, .admin-user-card, .profile-card {
        gap: 8px;
        padding: 12px 14px;
    }
    /* Tablet: réduire padding centre en priorité, garder label couleur */
    .rc-main { padding: 10px 14px; }
    .rc-color-panel { flex-basis: 90px; }
    .rc-sort-color { flex-basis: 90px; }
    .rc-color-name { font-size: 0.65rem; letter-spacing: 1px; }
    .status-opt { padding: 8px 12px; gap: 7px; }
    .opt-label { display: none; }
    .rc-grade-col { padding: 0 14px; }
    /* History: hide setter (4) + rating (6) */
    .history-card .hc-setter,
    .history-card .hc-rating { display: none; }
    .history-list-header > span:nth-child(4),
    .history-list-header > span:nth-child(6) { display: none; }
    /* Ascents: hide setter (4) + rating (7) */
    .ascent-card .ac-setter,
    .ascent-card .ac-rating { display: none; }
    .ascents-list-header > span:nth-child(4),
    .ascents-list-header > span:nth-child(7) { display: none; }
    /* Profile: hide setter (4) + rating (7) */
    .profile-card .pc-setter,
    .profile-card .pc-rating { display: none; }
    .color-pill {
        width: 90px;
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    :root {
        --route-grid: 36px 1fr 50px 1fr;
        --history-grid: 36px 1fr 50px 1fr 70px;
        --ascents-grid: 36px 1fr 50px 1fr 70px;
        --users-grid: 1fr 80px 80px 80px 120px;
        --admin-users-grid: 1fr 80px 130px;
        --profile-grid: 36px 1fr 50px 1fr;
    }
    #page-history.admin-view { --history-grid: 36px 1fr 50px 1fr 70px 60px; }
    .history-card, .ascent-card, .admin-user-card, .profile-card {
        gap: 4px;
        padding: 10px 10px;
    }
    .status-opt { padding: 6px 10px; }
    /* History: hide setter (4), rating (6) */
    .history-card .hc-setter,
    .history-card .hc-rating { display: none; }
    .history-list-header > span:nth-child(4),
    .history-list-header > span:nth-child(6) { display: none; }
    /* Ascents: hide setter (4), rating (7), archived (8) */
    .ascent-card .ac-setter,
    .ascent-card .ac-rating,
    .ascent-card .ac-archived { display: none; }
    .ascents-list-header > span:nth-child(4),
    .ascents-list-header > span:nth-child(7),
    .ascents-list-header > span:nth-child(8) { display: none; }
    /* Profile: hide setter (4), date (6), rating (7) */
    .profile-card .pc-setter,
    .profile-card .pc-date,
    .profile-card .pc-rating { display: none; }
    .filter-bar select {
        min-width: 100px;
        font-size: 0.8rem;
    }
    .status-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
        min-width: 70px;
    }
    .grade-badge {
        font-size: 0.85rem;
        padding: 3px 0;
        width: 44px;
    }
    .color-pill {
        width: 72px;
        height: 26px;
        line-height: 24px;
        font-size: 0.65rem;
    }
    .stat-card .stat-value {
        font-size: 1.5rem;
    }

    .table {
        font-size: 0.85rem;
    }
}

/* ========================================
   Activity Log Page
   ======================================== */
.activity-filter-bar {
    max-width: 900px;
    margin: 0 auto 14px;
}
.activity-filter-select {
    width: auto;
    min-width: 160px;
}
.activity-log-container {
    max-width: 900px;
    margin: 0 auto;
}

.al-day-group {
    margin-bottom: 20px;
}

.al-day-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    padding: 0 4px 6px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
}

.al-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid #f1f5f9;
}

.al-row:last-child {
    border-bottom: none;
}

.al-row--clickable:hover {
    background: #f1f5f9;
    border-radius: 8px;
}

.al-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    font-size: 0.85rem;
}

.al-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.al-desc {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.45;
}

.al-desc strong { color: #111827; font-weight: 700; }
.al-desc em     { font-style: normal; color: #6b7280; }

.al-time {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.al-grade {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 6px;
    background: #1e293b;
    color: #fff;
    line-height: 1.6;
    vertical-align: middle;
}
.al-grade.grade-4 { background-color: #FFD600; color: #333; }
.al-grade.grade-5 { background-color: #4caf50; color: #fff; }
.al-grade.grade-6 { background-color: #1e88e5; color: #fff; }
.al-grade.grade-7 { background-color: #f44336; color: #fff; }

.al-color-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 6px;
    line-height: 1.6;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,0.12);
}

.al-color-pill {
    display: inline-block;
    vertical-align: middle;
}
.al-color-pill .color-pill {
    width: auto;
    min-width: 60px;
    max-width: 140px;
    height: 20px;
    line-height: 18px;
    border-radius: 10px;
    font-size: 0.68rem;
    padding: 0 8px;
}

.al-sector {
    font-size: 0.8rem;
    color: #9ca3af;
}

.al-stars {
    color: #f59e0b;
    letter-spacing: 1px;
    font-size: 0.82rem;
}

.al-comment-icon {
    font-size: 0.78rem;
    color: #6b7280;
    vertical-align: middle;
}

.al-detail {
    font-style: italic;
    color: #6b7280;
    font-size: 0.82rem;
}

.al-status {
    font-weight: 600;
    font-size: 0.82rem;
    border-radius: 4px;
    padding: 1px 6px;
}
.al-status-lead     { color: #166534; background: #dcfce7; }
.al-status-top-rope { color: #1e40af; background: #dbeafe; }
.al-status-failed   { color: #9a3412; background: #ffedd5; }