/* route-renderer.css — v1.5.1*/
/*
 * route-renderer.css — gestyled op tom.haringstad.com
 * Kleuren en typografie afgestemd op merged.tidy.min.css
 */

/* ── defensive resets ─────────────────────────────────────── */
.rr-wrap *        { box-sizing: border-box; }
.rr-wp            { display: flex !important; gap: 12px; align-items: stretch !important; }
.rr-spine         { display: flex !important; flex-direction: column !important;
                    align-items: center !important; width: 20px; flex-shrink: 0;
                    position: relative !important; }
.rr-dot           { box-sizing: border-box !important; width: 13px !important; height: 13px !important;
                    border-radius: 50% !important; flex-shrink: 0 !important;
                    margin-top: 14px !important; border-width: 2px !important;
                    border-style: solid !important; padding: 0 !important;
                    position: relative !important; z-index: 1 !important; }
.rr-dot-start     { background: #1D9E75 !important; border-color: #1D9E75 !important; }
.rr-dot-end       { background: #ae1c28 !important; border-color: #ae1c28 !important; }
.rr-dot-city      { background: #04294a !important; border-color: #04294a !important; }
.rr-dot-obj       { background: #1e88e5 !important; border-color: #1e88e5 !important; }
.rr-dot-wp        { background: #fff    !important; border-color: #aaa !important; }
.rr-spine-line    { position: absolute !important; top: 0 !important; bottom: 0 !important;
                    left: 50% !important; transform: translateX(-50%) !important;
                    width: 2px !important; background: #d9e2ef !important;
                    border: none !important; display: block !important; }

/* Tables inside cards: undo site-wide borders */
.rr-table         { border: none !important; border-collapse: collapse !important;
                    width: 100%; margin: .25rem 0 !important;
                    box-shadow: none !important; font-family: 'Trebuchet MS', sans-serif !important; }
.rr-table tr      { border: none !important; border-bottom: 1px solid #eaf3ff !important;
                    background: transparent !important; }
.rr-table tr:last-child { border-bottom: none !important; }
.rr-table td      { border: none !important; padding: 5px 0 !important;
                    font-size: 13px !important; vertical-align: top !important; }

/* ── wrapper & header ─────────────────────────────────────── */
.rr-wrap          { padding: 1rem 0 2rem; font-family: 'Trebuchet MS', sans-serif; color: #444; }
.rr-header        { margin-bottom: 1.5rem; }
.rr-title         { font-size: 22px; font-weight: 700; color: #0e1b2a; }
.rr-subtitle      { font-size: 13px; color: #4a5a70; margin-top: 4px; }

/* ── stats bar ────────────────────────────────────────────── */
.rr-stats         { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 2rem; }
.rr-stat          { background: #eaf3ff; border-radius: 8px; padding: 10px 12px;
                    border: 1px solid #d9e2ef; }
.rr-stat-label    { font-size: 11px; color: #4a5a70; text-transform: uppercase; letter-spacing: .05em; }
.rr-stat-value    { font-size: 18px; font-weight: 700; color: #0e1b2a; margin-top: 2px; }

/* ── section bar ──────────────────────────────────────────── */
.rr-section       { margin-bottom: 1.5rem; }
.rr-section-bar   { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem;
                    cursor: pointer; user-select: none;
                    background: #f7f9fc; border: 1px solid #d9e2ef;
                    border-radius: 8px; padding: 10px 12px; }
.rr-section-bar:hover { background: #eaf3ff; }
.rr-section-icon  { width: 36px; height: 36px; border-radius: 6px; display: flex;
                    align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.rr-icon-blue     { background: #eaf3ff;  color: #1e88e5; }
.rr-icon-green    { background: #e6f4ea;  color: #2e7d32; }
.rr-icon-teal     { background: #e0f2f1;  color: #00796b; }
.rr-icon-purple   { background: #ede7f6;  color: #512da8; }
.rr-icon-amber    { background: #fff8e1;  color: #f57f17; }
.rr-icon-gray     { background: #f5f5f5;  color: #616161; }
.rr-section-meta  { flex: 1; }
.rr-section-name  { font-size: 15px; font-weight: 700; color: #0e1b2a; }
.rr-section-info  { font-size: 12px; color: #4a5a70; margin-top: 2px; }
.rr-section-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.rr-section-badge-row  { display: flex; align-items: center; gap: 6px; }
.rr-section-warnings   { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rr-chevron       { font-size: 16px; color: #4a5a70; transition: transform .2s; }
.rr-chevron-open  { transform: rotate(180deg); }

/* ── badges ───────────────────────────────────────────────── */
.rr-badge         { font-size: 11px; padding: 2px 8px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.rr-badge-lake    { background: #eaf3ff; color: #1e88e5; border: 1px solid #d9e2ef; }
.rr-badge-city    { background: #e8f0fe; color: #04294a; border: 1px solid #c5cae9; }
.rr-badge-open    { background: #e0f2f1; color: #00796b; border: 1px solid #b2dfdb; }
.rr-badge-warn    { background: #fff3e0; color: #e65100; border: 1px solid #ffe0b2; }
.rr-badge-alert   { background: #fdecea; color: #ae1c28; border: 1px solid #f5c6cb; }
.rr-badge-info    { background: #eaf3ff; color: #1e88e5; border: 1px solid #d9e2ef; }
.rr-badge-canal   { background: #ede7f6; color: #512da8; border: 1px solid #d1c4e9; }

/* ── note block ───────────────────────────────────────────── */
.rr-note          { background: #f7f9fc; border-left: 3px solid #1e88e5;
                    padding: 10px 14px; font-size: 13px; color: #4a5a70;
                    line-height: 1.6; border-radius: 0 4px 4px 0;
                    margin-bottom: 4px; }

/* ── divider ──────────────────────────────────────────────── */
.rr-divider       { height: 1px; background: #d9e2ef; margin: 1.5rem 0; }

/* ── waypoint list ────────────────────────────────────────── */
.rr-wp-list       { display: flex; flex-direction: column; padding-left: 0; }
.rr-wp-content    { flex: 1; padding: 8px 0 20px; }
.rr-wp-name       { font-size: 14px; font-weight: 700; color: #0e1b2a; }
.rr-wp-coord      { font-size: 13px; color: #0e1b2a; font-family: monospace; margin-top: 4px;
                    font-weight: 700; background: #eaf3ff; border: 1px solid #d9e2ef;
                    border-radius: 4px; padding: 2px 7px; display: inline-block; }
.rr-wp-warnings   { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rr-wp-note       { background: #f7f9fc; border-left: 3px solid #1e88e5;
                    padding: 10px 14px; font-size: 13px; color: #4a5a70;
                    line-height: 1.6; border-radius: 0 4px 4px 0;
                    margin-top: 6px; margin-bottom: 4px; }

/* ── leg ──────────────────────────────────────────────────── */
.rr-leg           { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; flex-direction: column; }
.rr-leg-item      { display: inline-flex; align-items: center; gap: 6px;
                    font-size: 12px; font-weight: 500; color: #0e1b2a;
                    background: #eaf3ff; border: 1px solid #d9e2ef;
                    border-radius: 6px; padding: 3px 9px; width: fit-content; }
.rr-leg-item i    { color: #1e88e5; font-size: 13px; flex-shrink: 0; }
.rr-leg-coord     { font-family: monospace; font-size: 12px; color: #0e1b2a;
                    font-weight: 700; background: #eaf3ff; border: 1px solid #d9e2ef;
                    border-radius: 4px; padding: 1px 6px; margin-left: 6px; }

/* ── object cards ─────────────────────────────────────────── */
.rr-objects       { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.rr-obj           { background: #f7f9fc; border: 1px solid #d9e2ef;
                    border-radius: 8px; padding: 8px 12px; }
.rr-obj-top       { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rr-obj-name      { font-size: 13px; font-weight: 700; color: #0e1b2a; }
.rr-obj-kind      { font-size: 11px; color: #4a5a70; }
.rr-obj-details   { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 10px; }
.rr-obj-detail    { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #4a5a70; }
.rr-warn          { color: #e65100; }

/* ── approach note (route context, below object card) ───────── */
.obj-approach-note  { margin-top: 10px; padding: 10px 14px;
                      background: #fff8e1; border-left: 4px solid #f57f17;
                      border-radius: 0 6px 6px 0; font-size: 13px;
                      color: #0e1b2a; line-height: 1.6;
                      display: flex; align-items: flex-start; gap: 8px; }
.obj-approach-note i      { color: #f57f17; font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.obj-approach-note strong { color: #f57f17; margin-right: 4px; white-space: nowrap; }