/* Invoice List Styles with clt_Transaction prefix */

:root {
    --steel:  #0f1419;
    --iron:   #1a2230;
    --plate:  #212d3d;
    --rust:   #c8762a;
    --amber:  #e8972e;
    --gold:   #f5b942;
    --fog:    #6a7d96;
    --mist:   #9fb0c4;
    --snow:   #dde5f0;
    --border: rgba(200,118,42,0.16);
  }


.clt_Transaction * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clt_Transaction {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 10px;
    min-height: 60vh;
}

.clt_Transaction_container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.clt_Transaction_header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    text-align: center;
}

.clt_Transaction_header h1 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.clt_Transaction_header p {
    font-size: 12px;
    opacity: 0.9;
}

.clt_Transaction_actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.clt_Transaction_action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
    background: white;
    border: 2px solid #667eea;
    border-radius: 8px;
    color: #667eea;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clt_Transaction_action-btn:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.clt_Transaction_action-btn::before {
    content: '+';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
}

.clt_Transaction_action-btn:hover::before {
    background: white;
    color: #667eea;
}

.clt_Transaction_section-title {
    padding: 20px 30px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    background: white;
}

.clt_Transaction_invoice-list {
    padding: 0 30px 30px;
}

.clt_Transaction_invoice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
  
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.clt_Transaction_invoice-item:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateX(4px);
}

.clt_Transaction_invoice-info {
    flex: 1;
    min-width: 0;
}

.clt_Transaction_invoice-date {
    font-size: 10px;
    color: #718096;
    margin-bottom: 4px;
}

.clt_Transaction_invoice-number {
    font-size: 12px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 2px;
}

.clt_Transaction_invoice-description {
    font-size: 10px;
    color: #a0aec0;
}

.clt_Transaction_invoice-amount {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.clt_Transaction_amount-wrapper {
    text-align: right;
}

.clt_Transaction_amount {
    font-size: 12px;
    font-weight: 700;
   white-space: nowrap;
}

.clt_Transaction_currency {
    font-size: 8px;
    color: #718096;
    font-weight: 500;
}

.clt_Transaction_action-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7fafc;
    border-radius: 8px;
    color: #667eea;
    font-size: 20px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.clt_Transaction_action-icon::before {
    content: "\01F4FD";
}

.clt_Transaction_invoice-item:hover .clt_Transaction_action-icon {
    background: #667eea;
    color: white;
}

.clt_Transaction_badge {
    display: inline-block;
    padding: 4px 10px;
    background: #48bb78;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 640px) {
    .clt_Transaction_invoice-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .clt_Transaction_invoice-amount {
        width: 100%;
        justify-content: space-between;
    }
}

    .clt_Shipping {
         background: linear-gradient(to bottom, #1e3a5f 0%, #2d5a8f 50%, #4a90c8 100%);
    }
    .clt_Ship_header {
            text-align: center;
            color: white;
            margin-bottom: 30px;
        }

        .clt_Ship_header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .clt_Ship_legend {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .clt_Ship_legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,255,255,0.1);
            padding: 8px 16px;
            border-radius: 20px;
            color: white;
            font-size: 0.9em;
        }

        .clt_Ship_legend-color {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            border: 2px solid white;
        }

        .clt_Ship_ocean-track {
            background: linear-gradient(to right, 
                rgba(255,255,255,0.1) 0%, 
                rgba(255,255,255,0.05) 100%);
            border-radius: 20px;
            padding: 40px 20px;
            position: relative;
            margin-bottom: 20px;
            min-height: 600px;
        }

        .clt_Ship_distance-markers {
            position: absolute;
            top: 10px;
            left: 20px;
            right: 20px;
            display: flex;
            justify-content: space-between;
            color: rgba(255,255,255,0.6);
            font-size: 0.8em;
        }

        .clt_Ship_port-indicator {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 60px;
            background: linear-gradient(to left, transparent, rgba(139, 69, 19, 0.3));
            border-left: 4px solid #8b4513;
        }

        .clt_Ship_port-label {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%) rotate(-90deg);
            color: white;
            font-weight: bold;
            font-size: 1.2em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        .clt_Ship_vessel {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: left 2s ease-in-out;
        }

        .clt_Ship_ship-body {
            width: 240px;
            height: 100px;
            position: relative;
        }

        .clt_Ship_ship-svg {
            width: 100%;
            height: 100%;
        }

        .clt_Ship_ship-hull {
            fill: #4a5568;
        }

        .clt_Ship_ship-deck {
            fill: #718096;
        }

        .clt_Ship_ship-bridge {
            fill: #2d3748;
        }

        .clt_Ship_ship-name-label {
            position: absolute;
            top: 60px;
            left: 30px;
            color: white;
            font-weight: bold;
            font-size: 0.75em;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
            letter-spacing: 0.5px;
        }

        .clt_Ship_containers-deck {
            position: absolute;
            bottom: 48px;
            left: 75px;
            display: flex;
            gap: 3px;
            align-items: flex-end;
        }

        .clt_Ship_container-stack {
            display: flex;
            flex-direction: column-reverse;
            gap: 1px;
            align-items: center;
        }

        .clt_Ship_container {
            border: 1px solid rgba(0,0,0,0.5);
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.5em;
            color: white;
            font-weight: bold;
            box-shadow: 0 1px 2px rgba(0,0,0,0.3);
            text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
        }

        .clt_Ship_container-XX {
            width: 15px;
            height: 18px;
        }

        .clt_Ship_container-20ft {
            width: 20px;
            height: 24px;
        }

        .clt_Ship_container-40ft {
            width: 40px;
            height: 24px;
        }

        .clt_Ship_container-40ft-hc {
            width: 40px;
            height: 28px;
        }

        .clt_Ship_status-cleared {
            background: #10b981;
        }

        .clt_Ship_status-pending {
            background: #f59e0b;
        }

        .clt_Ship_status-alert {
            background: #ef4444;
        }

        .clt_Ship_stats-panel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .clt_Ship_stat-card {
            background: rgba(255,255,255,0.1);
            border-radius: 12px;
            padding: 20px;
            color: white;
            text-align: center;
        }

        .clt_Ship_stat-number {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .clt_Ship_stat-label {
            font-size: 0.9em;
            opacity: 0.8;
        }

        @keyframes clt_Ship_wave {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        .clt_Ship_vessel {
            animation: clt_Ship_wave 3s ease-in-out infinite;
        }



        .Scheduling_header {
    background: white;
    padding: 15px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Scheduling_header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.Scheduling_header-icon {
    width: 24px;
    height: 24px;
    background: #3498db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.Scheduling_header-title {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
}

.Scheduling_home-icon {
    color: #3498db;
    font-size: 24px;
    cursor: pointer;
}

/* Search Bar */
.Scheduling_search-bar {
    padding: 20px;
    background: white;
    border-bottom: 1px solid #e0e6ed;
}

.Scheduling_search-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.Scheduling_search-input:focus {
    outline: none;
    border-color: #3498db;
}

/* Container */
.Scheduling_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Section Styles */
.Scheduling_section {
    background: white;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.Scheduling_section-header {
    padding: 8px 8px;
    background: white;
    border: 1px solid #e0e6ed;
    border-radius: 4px;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.Scheduling_section-header:hover {
    background: #f0f2f5;
}
.Scheduling_section-header.inactive {
    cursor: default;
    opacity: 0.6;
    pointer-events: none;  /* This disables ALL mouse interactions including hover */
}
.Scheduling_section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 14px;
    color: #2c3e50;
}

.Scheduling_section-toggle {
    font-size: 12px;
    color: #7f8c8d;
    margin-right: 10px;
}

.Scheduling_section-count {
    background: #e0e6ed;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.Scheduling_section-items {
    display: none;
}

.Scheduling_section.expanded .Scheduling_section-items {
    display: block;
}

.Scheduling_section-toggle::before {
    content: 'â–¶';
    display: inline-block;
}

/* Only change the arrow for THIS specific header's job cards */
.Scheduling_section-header:has(+ .Scheduling_job-card:not([style*="display: none"])) .Scheduling_section-toggle::before,
.Scheduling_section-header:has(+ * + .Scheduling_job-card:not([style*="display: none"])) .Scheduling_section-toggle::before {
    content: 'â–¼';
}
/* Status Count Pills in Parent */
.Scheduling_status-counts {
   display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.Scheduling_count-pill {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    width: 40px;
}

.Scheduling_count-pill.Rd {
    background: #f8d7da;
    color: #721c24;
}

.Scheduling_count-pill.Yl {
    background: #fff3cd;
    color: #856404;
}

.Scheduling_count-pill.Gr {
    background: #d4edda;
    color: #155724;
}

.Scheduling_count-number {
    font-weight: 700;
}


/* Job Card Styles */
.Scheduling_job-card {
    background: white;
    border: 1px solid #e0e6ed;
    border-radius: 4px;
    margin-bottom: 10px;
    transition: background 0.2s;
}

.Scheduling_job-card:last-child {
    margin-bottom: 10px;
}

.Scheduling_job-card:hover {
    background: #f8f9fa;
}

.Scheduling_job-card.Yl {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.Scheduling_job-card.Yl:hover {
    background: #ffe69c;
}

.Scheduling_job-card-header {
    padding: 10px 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    cursor: pointer;
    gap: 15px;
}

.Scheduling_job-main-info {
    flex: 1;
    min-width: 0;
}

.Scheduling_job-id {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
    font-size: 13px;
}

.Scheduling_job-address {
    color: #7f8c8d;
    font-size: 14px;
}

.Scheduling_job-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.Scheduling_job-date {
    color: #7f8c8d;
    font-size: 13px;
}

.Scheduling_job-right-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Expand Arrow */
.Scheduling_expand-arrow {
    color: #7f8c8d;
    font-size: 12px;
    transition: transform 0.3s ease;
    cursor: pointer;
    padding: 4px;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Scheduling_expand-arrow::before {
    content: 'â–¼';
}

.Scheduling_job-card.expanded .Scheduling_expand-arrow {
    transform: rotate(180deg);
}

/* Blue Action Box on Right */
.Scheduling_option-cell-right {
    background: #3498db;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    margin-left: 10px;
}

.Scheduling_option-cell-right:hover {
    background: #2980b9;
}

.Scheduling_option-cell-icon {
    color: white;
    font-size: 20px;
}

.Scheduling_option-cell-icon.iconViewfinderActive::before {
    content: '⊕';
}

/* Job Details */
.Scheduling_job-details {
    display: none;
    padding: 0 20px 15px 20px;
    background: #f8f9fa;
}

.Scheduling_job-card.expanded .Scheduling_job-details {
    display: block;
}

.Scheduling_detail-grid {
    display: grid;
    grid-template-columns: repeat (4,1fr);
    gap: 15px;
    margin-top: 10px;
}
.Scheduling_detail-item:nth-child(1) {
    grid-column: 1 / 3;
}

.Scheduling_detail-item:nth-child(2) {
    grid-column: 3 / 5;
}

.Scheduling_detail-item:nth-child(3) {
    grid-column: 1 / 3;
}

.Scheduling_detail-item:nth-child(4) {
    grid-column: 3 / 4;
}

.Scheduling_detail-item:nth-child(5) {
    grid-column: 4 / 5;
}

.Scheduling_detail-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.Scheduling_detail-label {
    font-size: 10px;
    color: #7f8c8d;
    text-transform: uppercase;
    font-weight: 600;
}

.Scheduling_detail-value {
    font-size: 12px;
    color: #2c3e50;
    font-weight: 500;
}

/* Status Pills */
.Scheduling_status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
}

.Scheduling_status-pill.Gr {
    background: #d4edda;
    color: #155724;
}

.Scheduling_status-pill.Yl {
    background: #fff3cd;
    color: #856404;
}

.Scheduling_status-pill.Rd {
    background: #f8d7da;
    color: #721c24;
}

/* Duration Badge */
.Scheduling_duration-badge {
    background: #e3f2fd;
    color: #1565c0;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}
.Scheduling_comment-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

.Scheduling_comment-label {
    font-weight: 600;
    color: #666;
    font-size: 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.Scheduling_comment-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    justify-content: space-between;
}

.Scheduling_comment-text {
    flex: 1;
    min-height: 20px;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

.Scheduling_comment-text:empty:before {
    content: "No comments yet";
    color: #999;
    font-style: italic;
}

.Scheduling_comment-btn {
    padding: 6px 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    transition: background-color 0.2s;
    align-self: flex-start;
    flex-shrink: 0;
}

.Scheduling_comment-btn:hover {
    background-color: #0056b3;
}

.Scheduling_comment-btn i {
    margin-right: 4px;
    font-size: 11px;
}

/* Only apply full width when job-header is present */
#SA:has(.clt_SA_Scheduling_job-header) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.sa-panel:has(.clt_SA_Scheduling_job-header) {
    width: 100% !important;
    max-width: 100% !important;
}

.clt_SA_Scheduling_job-header {
    background: #d9d9d9;
    padding: 15px 20px;
    border-bottom: 2px solid #999;
    width: 100%;
}

.clt_SA_Scheduling_job-title {
    font-size: 18px;
    font-weight: 600;
    color: #555;
}

.clt_SA_Scheduling_current-state {
    background: white;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e6ed;
    display: grid;
    grid-template-columns: auto 200px 1fr;
    gap: 20px;
    align-items: center;
    width: 100%;
}

.clt_SA_Scheduling_state-label {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

.clt_SA_Scheduling_state-date {
    display: flex;
    align-items: center;
    gap: 10px;
}

.clt_SA_Scheduling_state-indicator {
    width: 20px;
    height: 20px;
    border-radius: 2px;
}

.clt_SA_Scheduling_state-indicator.Rd {
    background: #dc3545;
}

.clt_SA_Scheduling_state-indicator.Yl {
    background: #ffc107;
}

.clt_SA_Scheduling_state-indicator.Gr {
    background: #28a745;
}

.clt_SA_Scheduling_state-indicator.Bu {
    background: #3f51b5;
   
}

.clt_SA_Scheduling_state-indicator.Bl {
    background: #000000;
    position: relative;
}

.clt_SA_Scheduling_state-indicator.complete::before {
    content: '🏁';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

.clt_SA_Scheduling_state-person {
    color: #2c3e50;
    font-weight: 500;
}

.clt_SA_Scheduling_container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.clt_SA_Scheduling_section {
    background: white;
    border: 1px solid #e0e6ed;
    border-radius: 0;
    margin-bottom: 0;
}

.clt_SA_Scheduling_section-header {
    padding: 12px 15px;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #999;
}

.clt_SA_Scheduling_section-header:hover {
    background: #e6e6e6;
}

.clt_SA_Scheduling_section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
}

.clt_SA_Scheduling_section-toggle::before {
    content: 'â–¼';
    display: inline-block;
    font-size: 10px;
    margin-right: 8px;
}

.Scheduling_section-toggle::before {
    content: 'â–¶';
    display: inline-block;
}

.Scheduling_section-header:has(+ .Scheduling_section-items[style*="display: none"]) .Scheduling_section-toggle::before {
    content: 'â–¼';
}



.SS_Quote_page {
    background: var(--steel);
    background-image: radial-gradient(ellipse 70% 40% at 60% 0%, rgba(200,118,42,0.06) 0%, transparent 55%);
    color: var(--mist);
    padding: 20px;
    
    margin: 0 auto;
    animation: fadeUp 0.4s ease both;
  }
  @keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

  /* ── TOP BAR ── */
  .SS_Quote_topbar {
    display: flex; align-items: center; gap: 24px;
    margin-bottom: 12px; padding-bottom: 11px;
    border-bottom: 1px solid var(--border); position: relative;
  }
  .SS_Quote_topbar::after {
    content:''; position:absolute; bottom:-1px; left:0;
    width:80px; height:2px;
    background: linear-gradient(90deg, var(--amber), transparent);
  }
  .SS_Quote_brand { display:flex; align-items:center; gap:10px; }
  .SS_Quote_brand-icon {
    width:28px; height:28px;
    background: linear-gradient(135deg, var(--rust), var(--amber));
    border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-size:13px; box-shadow:0 0 12px rgba(232,151,46,0.3);
  }
  .SS_Quote_brand-name { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:3px; color:var(--snow); }
  .SS_Quote_brand-sub  { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--fog); margin-top:1px; }

  .SS_Quote_topbar-meta { display:flex; align-items:center; gap:16px; flex: 1; align-items: flex-start; }
  .SS_Quote_meta-chip { display:flex; flex-direction:column; align-items:flex-start; }
  .SS_Quote_meta-chip .lbl { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--fog); }
  .SS_Quote_meta-chip .val { font-family:'DM Mono',monospace; font-size:13px; color:var(--amber); }
  .SS_Quote_topbar-divider { width:1px; height:36px; background:var(--border); }
  .SS_Quote_summary-inline {
    display:flex; align-items:center; gap:16px; padding:6px 14px;
    background:linear-gradient(90deg, rgba(200,118,42,0.1), rgba(200,118,42,0.04));
    border:1px solid var(--border); border-radius:8px;
  }

.SS_Quote_meta-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

.SS_Quote_meta-right {
   display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
     margin-left: auto;
}

  .SS_Quote_si-item { display:flex; flex-direction:column; align-items:flex-end; }
  .SS_Quote_si-item .lbl { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--fog); }
  .SS_Quote_si-item .val { font-family:'DM Mono',monospace; font-size:18px; color:var(--gold); line-height:1.1; }
  .SS_Quote_si-item .val.SS_Quote_small { font-size:13px; color:var(--amber); }
  .SS_Quote_si-sep { width:1px; height:30px; background:rgba(200,118,42,0.2); }
  .SS_Quote_status-badge {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(200,118,42,0.12); border:1px solid rgba(200,118,42,0.3);
    color:var(--amber); font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
    padding:3px 9px; border-radius:20px;
  }
  .SS_Quote_status-badge::before {
    content:''; width:5px; height:5px; background:var(--amber);
    border-radius:50%; box-shadow:0 0 5px var(--amber); animation: pulse 2s infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

  /* ── JOB INFO ── */
  .SS_Quote_job-info { display:flex; gap:8px; margin-bottom:10px; }
  .ji {
    background:var(--iron); border:1px solid rgba(255,255,255,0.05);
    border-radius:7px; padding:6px 11px; flex:1;
  }
  .ji .lbl { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--fog); margin-bottom:2px; }
  .ji .val { font-size:12px; font-weight:500; color:var(--snow); }
  .ji .val.SS_Quote_hi { color:var(--amber); }

.SS_Quote_ji {
  background:var(--iron); border:1px solid rgba(255,255,255,0.05);
  border-radius:7px; padding:6px 11px; flex:1;
  display:flex; align-items:baseline; gap:8px;  /* ← added */
}
 .SS_Quote_lbl { font-size:8px; letter-spacing:2px;text-align: left; text-transform:uppercase; color:var(--fog); white-space:nowrap; flex-shrink:0; }  /* ← added white-space + flex-shrink */
 .SS_Quote_val { font-size:12px; font-weight:500; color:var(--snow); }

.SS_Quote_job-desc { font-size:11px; color:var(--fog); padding:0 2px 8px; text-align:left; }Quote Sonnet 4.6Claude is AI and can make mistakes. Please double-check responses.Scaffolding quote · HTMLCopy


  /* ── SECTION DIVIDER ── */
  .SS_Quote_sec-div { display:flex; align-items:center; gap:8px; margin:10px 0 6px; }
  .SS_Quote_sec-div span { font-size:8px; letter-spacing:3px; text-transform:uppercase; color:var(--fog); white-space:nowrap; }
  .SS_Quote_sec-div::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--border), transparent); }

  /* ── LINE ITEM ── */
  .SS_Quote_li {
    background:var(--iron); border:1px solid rgba(255,255,255,0.05);
    border-radius:9px; margin-bottom:7px; overflow:hidden; transition:box-shadow 0.2s;
  }
  .SS_Quote_li:hover { box-shadow:0 3px 20px rgba(0,0,0,0.3), 0 0 0 1px var(--border); }

  .SS_Quote_li-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 13px;
    background:linear-gradient(90deg, rgba(200,118,42,0.07), transparent);
    border-bottom:1px solid rgba(255,255,255,0.04); gap:10px;
  }
  .SS_Quote_li-head-left { display:flex; align-items:center; gap:8px; flex:1; }
  .SS_Quote_li-ico {
    width:24px; height:24px; border-radius:5px;
    background:var(--plate); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; flex-shrink:0;
  }
  .SS_Quote_li-title { font-family:'Bebas Neue',sans-serif; font-size:15px; letter-spacing:1px; color:var(--snow); line-height:1; }
  .SS_Quote_li-sub   { font-size:10px; color:var(--fog); margin-top:1px; }
  .SS_Quote_li-head-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }
  .SS_Quote_li-oneoff { text-align:right; }
  .SS_Quote_li-oneoff .lbl { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--fog); }
  .SS_Quote_li-oneoff .val { font-family:'DM Mono',monospace; font-size:16px; color:var(--amber); }

  /* ── TRAVEL MODE BADGE ── */
  .SS_Quote_travel-mode {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:4px 10px;
    border-radius:6px; border:1px solid;
    flex-shrink:0;
  }
  .SS_Quote_travel-mode .SS_Quote_tm-label {
    font-size:7px; letter-spacing:2px; text-transform:uppercase; opacity:0.7;
  }
  .SS_Quote_travel-mode .SS_Quote_tm-name {
    font-size:10px; font-weight:500; letter-spacing:0.3px; white-space:nowrap;
  }

  /* mode colours */
  .SS_Quote_tm-included {
    background:rgba(46,160,100,0.1); border-color:rgba(46,160,100,0.35);
    color:#4ade80;
  }
  .SS_Quote_tm-excluded {
    background:rgba(148,100,100,0.1); border-color:rgba(180,80,80,0.35);
    color:#f87171;
  }
  .SS_Quote_tm-summary {
    background:rgba(100,140,200,0.1); border-color:rgba(100,140,200,0.35);
    color:#93c5fd;
  }
  .SS_Quote_tm-detail {
    background:rgba(200,118,42,0.1); border-color:rgba(200,118,42,0.35);
    color:var(--amber);
  }

  /* metrics strip */
  .SS_Quote_metrics-strip { display:flex; gap:1px; background:rgba(0,0,0,0.2); }
  .SS_Quote_m-cell { flex:1; background:var(--iron); padding:5px 10px; }
  .SS_Quote_m-cell .ml { font-size:7.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--fog); margin-bottom:2px; }
  .SS_Quote_m-cell .mv { font-family:'DM Mono',monospace; font-size:11px; color:var(--snow); }
  .SS_Quote_m-cell .mv.SS_Quote_hi { color:var(--amber); }
  .SS_Quote_m-cell .mv.SS_Quote_muted { color:var(--fog); text-decoration:line-through; }

  /* detail / summary travel section */
  .SS_Quote_li-detail { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(0,0,0,0.2); }
  .SS_Quote_li-detail-col { background:var(--iron); padding:7px 13px; }
  .SS_Quote_detail-title {
    font-size:7.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--rust);
    margin-bottom:4px; display:flex; align-items:center; gap:5px;
  }
  .SS_Quote_detail-title::before { content:''; width:8px; height:1px; background:var(--rust); }
  .SS_Quote_kv-row { display:flex; justify-content:space-between; align-items:baseline; padding:2px 0; }
  .SS_Quote_kv-row + .SS_Quote_kv-row { border-top:1px solid rgba(255,255,255,0.03); }
  .SS_Quote_kv-k { font-size:10px; color:var(--fog); }
  .SS_Quote_kv-v { font-family:'DM Mono',monospace; font-size:11px; color:var(--mist); }
  .SS_Quote_kv-v.SS_Quote_hi { color:var(--amber); }

  /* travel summary bar (single row, no breakdown) */
  .SS_Quote_travel-summary-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 13px; gap:16px;
    background:rgba(100,140,200,0.05);
    border-top:1px solid rgba(100,140,200,0.12);
  }
  .SS_Quote_travel-summary-bar .lbl { font-size:10px; color:var(--fog); }
  .SS_Quote_travel-summary-bar .lbl strong { font-family:'DM Mono',monospace; color:#93c5fd; font-size:11px; font-weight:500; }
  .SS_Quote_travel-summary-bar .total { font-family:'DM Mono',monospace; font-size:14px; color:#93c5fd; }

  /* travel excluded notice */
  .SS_Quote_travel-excluded-bar {
    display:flex; align-items:center; gap:8px;
    padding:5px 13px;
    background:rgba(148,100,100,0.06);
    border-top:1px solid rgba(180,80,80,0.12);
    font-size:10px; color:#f87171; opacity:0.8;
  }
  .SS_Quote_travel-excluded-bar::before { content:'—'; opacity:0.5; }

  /* rental bar */
  .SS_Quote_rental-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 13px;
    background:linear-gradient(90deg, rgba(200,118,42,0.08), rgba(200,118,42,0.02));
    border-top:1px solid rgba(200,118,42,0.12);
  }
  .SS_Quote_rental-row .lbl { font-size:10px; color:var(--fog); }
  .SS_Quote_rental-row .lbl strong { display:block; font-size:7.5px; letter-spacing:2px; text-transform:uppercase; color:var(--rust); margin-bottom:1px; }
  .SS_Quote_rental-row .val { font-family:'DM Mono',monospace; font-size:14px; color:var(--gold); }

  /* simple item body */
  .SS_Quote_li-simple-body {
    display:grid; grid-template-columns:1fr auto auto auto;
    gap:34px; padding:8px 13px; align-items:center;
  }
  .SS_Quote_li-simple-body .desc { font-size:11px; color:var(--fog); }
  .SS_Quote_li-simple-body .dc { text-align:right; }
  .SS_Quote_li-simple-body .dc .lbl { font-size:7.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--fog); margin-bottom:1px; }
  .SS_Quote_li-simple-body .dc .val { font-family:'DM Mono',monospace; font-size:12px; color:var(--snow); }
  .SS_Quote_li-simple-body .dc.SS_Quote_total .val { font-size:15px; color:var(--amber); padding-left:11px; border-left:1px solid var(--border); }


  .SS_Detail_page {
    background: var(--steel);
    background-image: radial-gradient(ellipse 70% 40% at 60% 0%, rgba(200,118,42,0.06) 0%, transparent 55%);
    color: var(--mist);
    padding: 20px;
    text-align: left;
   
    animation: fadeUp 0.4s ease both;
  }
  @keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

  /* ── TOP BAR ── */
  .SS_Detail_topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; padding-bottom: 11px;
    border-bottom: 1px solid var(--border); position: relative;
  }
  .SS_Detail_topbar::after {
    content:''; position:absolute; bottom:-1px; left:0;
    width:80px; height:2px;
    background: linear-gradient(90deg, var(--amber), transparent);
  }
  .SS_Detail_brand { display:flex; align-items:center; gap:10px; }
  .SS_Detail_brand-icon {
    width:28px; height:28px;
    background: linear-gradient(135deg, var(--rust), var(--amber));
    border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-size:13px; box-shadow:0 0 12px rgba(232,151,46,0.3);
  }
  .SS_Detail_brand-name { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:3px; color:var(--snow); }
  .SS_Detail_brand-sub  { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--fog); margin-top:1px; }

  .SS_Detail_topbar-meta { display:flex; align-items:flex-start; gap:16px; }
  .SS_Detail_meta-chip { display:flex; flex-direction:column; align-items:flex-end; }
  .SS_Detail_meta-chip .SS_Detail_lbl { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--fog); }
  .SS_Detail_meta-chip .SS_Detail_val { font-family:'DM Mono',monospace; font-size:13px; color:var(--amber); }
  .SS_Detail_topbar-divider { width:1px; height:36px; background:var(--border); }
  .SS_Detail_status-badge {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(200,118,42,0.12); border:1px solid rgba(200,118,42,0.3);
    color:var(--amber); font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
    padding:3px 9px; border-radius:20px;
  }
  .SS_Detail_status-badge::before {
    content:''; width:5px; height:5px; background:var(--amber);
    border-radius:50%; box-shadow:0 0 5px var(--amber); animation: pulse 2s infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

  /* ── SECTION DIVIDER ── */
  .SS_Detail_sec-div { display:flex; align-items:center; gap:8px; margin:10px 0 6px; }
  .SS_Detail_sec-div span { font-size:8px; letter-spacing:3px; text-transform:uppercase; color:var(--fog); white-space:nowrap; }
  .SS_Detail_sec-div::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--border), transparent); }

  /* ── DETAIL CARD ── */
  .SS_Detail_card {
    background: var(--iron);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 9px;
    overflow: hidden;
  }

  /* ── FIELD ROWS ── */
  .SS_Detail_row {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
  }
  .SS_Detail_row:last-child { border-bottom: none; }
  .SS_Detail_row:hover { background: rgba(255,255,255,0.02); }

  .SS_Detail_lbl {
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fog);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .SS_Detail_val {
    font-size: 12px;
    font-weight: 500;
    color: var(--snow);
  }
  .SS_Detail_val.SS_Detail_empty {
    color: var(--plate);
    font-style: italic;
    font-size: 11px;
  }
  .SS_Detail_val.SS_Detail_hi { color: var(--amber); }
  .SS_Detail_val.SS_Detail_mono { font-family: 'DM Mono', monospace; }

  /* group separator within card */
  .SS_Detail_group-sep {
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
    margin: 2px 0;
  }


  .clt_Project_EL_project-item {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 0.2s;
    cursor: pointer;
}

.clt_Project_EL_project-item:hover {
    background: #f0f1f2;
}

.clt_Project_EL_project-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    width: 100%;
}

.clt_Project_EL_project-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

.clt_Project_EL_project-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.clt_Project_EL_project-icon {
    color: #666;
    margin-top: 2px;
    font-size: 18px;
}

.clt_Project_EL_project-meta {
    font-size: 13px;
    color: #666;
}

.clt_Project_EL_project-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.clt_Project_EL_project-date {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}

.clt_Project_EL_project-stage {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.clt_Project_EL_stage-quote {
    background: #e3f2fd;
    color: #1976d2;
}

.clt_Project_EL_stage-approved {
    background: #d4edda;
    color: #28a745;
}

.clt_Project_EL_stage-in-progress {
    background: #fff3cd;
    color: #856404;
}

.clt_Project_EL_stage-on-hold {
    background: #f8d7da;
    color: #721c24;
}

.clt_Project_EL_stage-complete {
    background: #d1ecf1;
    color: #0c5460;
}

.clt_Project_EL_project-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.clt_Project_EL_action-icon {
    color: #999;
    cursor: pointer;
    font-size: 16px;
}

.clt_Project_EL_action-icon:hover {
    color: #333;
}

.Summary_wrap { padding: 1rem 0; overflow-x: auto; }
.Summary_grid-container { min-width: 820px; }

.Summary_header-row { display: grid; grid-template-columns: 200px repeat(6, 1fr); gap: 3px; margin-bottom: 3px; }
.Summary_event-row  { display: grid; grid-template-columns: 200px repeat(6, 1fr); gap: 3px; margin-bottom: 3px; }

.Summary_corner     { background: transparent; }

.Summary_day-header {
  padding: 8px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ss-fog);
  border-radius: 7px;
  background: var(--ss-iron);
  border: 1px solid rgba(255,255,255,0.04);
}

.Summary_event-label {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: 7px;
  background: var(--ss-iron);
  border: 1px solid rgba(255,255,255,0.05);
  text-align: left;
}

.Summary_ecode  { font-size: 12px; font-weight: 600; color: var(--ss-snow); }
.Summary_emeta  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.Summary_enum   { font-size: 10px; color: var(--ss-amber); font-family: 'DM Mono', monospace; }
.Summary_eprog  { font-size: 10px; color: var(--ss-fog); line-height: 1.4; margin-top: 2px; }

.Summary_cell {
  padding: 5px 4px;
  border-radius: 7px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  align-items: center;
  background: var(--ss-iron);
  border: 1px solid rgba(255,255,255,0.04);
  transition: opacity 0.15s;
}

.Summary_cell:hover     { opacity: 0.82; }
.Summary_cell-empty {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
}

.Summary_badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}

.Summary_cell {
  overflow: visible;
  position: relative;
}

.Summary_badge {
  position: relative;
  z-index: 1;
}

.Summary_badge:hover {
  z-index: 100;
}

.Summary_badge .Summary_tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ss-plate);
  border: 1px solid var(--ss-border);
  color: var(--ss-snow);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}

.Summary_badge:hover .Summary_tooltip {
  display: block;
}

.Summary_cell          { overflow: visible; }
.Summary_event-row     { overflow: visible; }
.Summary_grid-container { overflow: visible; }

.Summary_badge:hover .Summary_tooltip {
  display: block;
}

.Summary_badge-h    { background: rgba(181,212,244,0.15); color: #8dc4f0;          border: 1px solid rgba(141,196,240,0.3); }
.Summary_badge-r    { background: rgba(240,153,123,0.15); color: #f0997b;          border: 1px solid rgba(240,153,123,0.3); }
.Summary_badge-q    { background: rgba(232,151,46,0.15);  color: var(--ss-amber);  border: 1px solid rgba(232,151,46,0.3); }
.Summary_badge-s    { background: rgba(196,148,240,0.15); color: #c494f0;          border: 1px solid rgba(196,148,240,0.3); }
.Summary_badge-m    { background: rgba(200,118,42,0.15);  color: var(--ss-rust);   border: 1px solid rgba(200,118,42,0.3); }
.Summary_badge-f    { background: rgba(245,185,66,0.15);  color: var(--ss-gold);   border: 1px solid rgba(245,185,66,0.3); }

.Summary_cell-time  { font-size: 10px; color: var(--ss-fog); font-family: 'DM Mono', monospace; }
.Summary_cell-divs  { font-size: 10px; color: var(--ss-fog); opacity: 0.6; }

.Summary_legend     { display: flex; gap: 12px; padding: 0.75rem 0 0.5rem; flex-wrap: wrap; }
.Summary_leg-item   { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ss-fog); }
.Summary_leg-dot    { width: 10px; height: 10px; border-radius: 2px; }

.Summary_filters    { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }

.Summary_filt-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.07);
  background: var(--ss-iron);
  color: var(--ss-fog);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.Summary_filt-btn:hover  { background: var(--ss-plate); color: var(--ss-mist); }

.Summary_filt-btn.active {
  background: linear-gradient(90deg, rgba(200,118,42,0.18), rgba(200,118,42,0.06));
  border-left: 3px solid var(--ss-amber);
  border-color: var(--ss-border);
  color: var(--ss-snow);
  font-weight: 500;
}

.Summary_filter-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.Summary_filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#GetButton {
  margin-bottom: 0;
  padding: 4px 20px;
  font-size: 11px;
  letter-spacing: 2px;
  white-space: nowrap;
  align-self: flex-end;
}


.RaceEv_card {
    background: var(--ss-iron);
    border: 0.5px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    margin: 0 0 6px;
    overflow: hidden;
    width: 100%;        /* add this */
    flex-shrink: 0;     /* add this */
}

.RaceEv_header {
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(90deg, rgba(200,118,42,0.07), transparent);
    display: block;     /* add this */
    width: 100%;        /* add this */
}
 
.RaceEv_top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.RaceEv_info {
    flex: 1;
    min-width: 0;
}

.RaceEv_title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ss-snow);
    white-space: normal;    /* allow wrapping */
    line-height: 1.3;
}
.RaceEv_title-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
 
.RaceEv_num {
    font-size: 20px;
    color: var(--ss-fog);
    min-width: 24px;
    font-family: "DM Mono", monospace;
}
 
.RaceEv_boat {
    flex-shrink: 0;
    opacity: 0.75;
}
 
.RaceEv_sub {
    font-size: 11px;
    color: var(--ss-fog);
    font-family: "DM Mono", monospace;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}
 
.RaceEv_time {
    font-size: 12px;
    font-weight: 500;
    color: var(--ss-amber);
    font-family: "DM Mono", monospace;
}

.RaceEv_toggle {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,0.1);
  background: var(--ss-snow);
  cursor: pointer;
  transition: transform 0.2s;
  margin: -8px -8px -8px 6px;
  padding: 8px;
}

.RaceEv_toggle.open {
  transform: rotate(180deg);
}

.RaceEv_info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.RaceEv_info:hover .RaceEv_title,
.RaceEv_meta:hover {
  color: var(--ss-snow);
}

.RaceEv_meta {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  flex-wrap: wrap;
  align-items: center;
  cursor: pointer;
}

.RaceEv_badge-finished {
  background: rgba(76,175,80,0.15);
  color: #4caf50;
  border: 1px solid rgba(76,175,80,0.25);
  margin-left: auto;
}

 
/* ── BADGES ── */
.RaceEv_badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.3px;
}



.RaceEv_badge-boys   { background: rgba(58,133,219,0.15); color: #5aabf0; border: 1px solid rgba(90,171,240,0.3); }
.RaceEv_badge-girls  { background: rgba(212,96,144,0.15); color: #e880b8; border: 1px solid rgba(232,128,184,0.3); }
.RaceEv_badge-novice { background: rgba(200,118,42,0.18); color: var(--ss-amber); border: 1px solid var(--ss-border); }
.RaceEv_badge-heat   { background: rgba(181,212,244,0.12); color: #8dc4f0; border: 1px solid rgba(141,196,240,0.25); }
.RaceEv_badge-rep    { background: rgba(240,153,123,0.12); color: #f0997b; border: 1px solid rgba(240,153,123,0.25); }
.RaceEv_badge-qf     { background: rgba(196,148,240,0.12); color: #c494f0; border: 1px solid rgba(196,148,240,0.25); }
.RaceEv_badge-sf     { background: rgba(232,151,46,0.15);  color: var(--ss-amber); border: 1px solid rgba(232,151,46,0.3); }
.RaceEv_badge-final  { background: rgba(245,185,66,0.15);  color: var(--ss-gold);  border: 1px solid rgba(245,185,66,0.3); }
.RaceEv_badge-count  { background: var(--ss-plate); color: var(--ss-fog); border: 0.5px solid rgba(255,255,255,0.07); }

.RaceEv_badge-u15    { background: rgba(93,202,165,0.15);  color: #5dcaa5; border: 1px solid rgba(93,202,165,0.25); }
.RaceEv_badge-u16    { background: rgba(90,171,240,0.15);  color: #5aabf0; border: 1px solid rgba(90,171,240,0.25); }
.RaceEv_badge-u17    { background: rgba(196,148,240,0.15); color: #c494f0; border: 1px solid rgba(196,148,240,0.25); }
.RaceEv_badge-u18    { background: rgba(245,185,66,0.15);  color: var(--ss-gold); border: 1px solid rgba(245,185,66,0.25); }
.RaceEv_badge-novice { background: rgba(200,118,42,0.18);  color: var(--ss-amber); border: 1px solid var(--ss-border); }
 
/* ── RACE ROWS (expanded) ── */
.RaceEv_races {
    border-top: 0.5px solid rgba(255,255,255,0.06);
    display: none;
}
 
.RaceEv_races.open {
    display: block;
}
 
.RaceEv_race-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 0.5px solid rgba(255,255,255,0.04);
    background: var(--ss-steel);
}
 
.RaceEv_race-row:last-child {
    border-bottom: none;
}
 
.RaceEv_race-div {
    font-size: 11px;
    color: var(--ss-fog);
    min-width: 65px;
}
 
.RaceEv_race-num {
    font-size: 12px;
    color: var(--ss-mist);
    font-family: "DM Mono", monospace;
}
 
.RaceEv_race-day {
    font-size: 11px;
    color: var(--ss-fog);
    opacity: 0.6;
    margin-left: 4px;
}
 
.RaceEv_race-time {
    font-size: 13px;
    font-weight: 500;
    color: var(--ss-amber);
    margin-left: auto;
    font-family: "DM Mono", monospace;
}





.race-row { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.race-row:last-child { border-bottom: none; }
.race-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.race-letter { font-family: 'DM Mono', monospace; font-size: 16px; font-weight: 600; color: var(--ss-amber); min-width: 18px; }
.race-time { font-family: 'DM Mono', monospace; font-size: 16px; color: var(--ss-fog); }
.race-status { font-size: 10px; color: var(--ss-fog); margin-left: auto; }
.race-status.done { color: #4caf50; }
.lanes-row { display: flex; flex-wrap: wrap; gap: 3px; }
.lane-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ss-plate); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; padding: 4px 4px; min-width: 36px; }
.lane-icon { width: 24px; height: 24px; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.lane-icon img { width: 100%; height: 100%; object-fit: cover; }
.lane-code { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 700; color: var(--ss-snow); letter-spacing: 0px; }
.lane-pos { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 700; color: var(--ss-fog); }
.lane-pos.p1 { color: var(--ss-gold); }
.lane-pos.p2 { color: var(--ss-mist); }
.lane-pos.p3 { color: #cd7f32; }


.Medal_row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
.Medal_row:nth-child(odd) { background: #153856; }
.Medal_row:nth-child(even) { background: #112f4a; }

.Medal_club { display: flex; align-items: center; gap: 8px; }
.Medal_club-icon { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.Medal_club-name { font-size: 13px; color: #fff; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.5px; }

.Medal_counts { display: flex; gap: 6px; }
.Medal_pill { min-width: 28px; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 500; text-align: center; }
.Medal_pill--gold   { background: #B8860B; color: #fff; }
.Medal_pill--silver { background: #888; color: #fff; }
.Medal_pill--bronze { background: #7B4A2D; color: #fff; }
.Medal_pill--afinal { background: rgba(255,255,255,0.15); color: #fff; }
.Medal_pill--bfinal { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }

.lane-badge-wrap { position: relative; }
.lane-athletes-toggle { display: none; }
.lane-athletes {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #0a2038;
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 4px 8px;
  z-index: 10;
  white-space: nowrap;
  min-width: 120px;
}
.lane-athletes-toggle:checked ~ .lane-athletes { display: block; }
.lane-athlete { display: block; font-size: 10px; color: rgba(255,255,255,0.7); padding: 2px 0; }
.lane-athlete-seat { display: inline-block; width: 16px; font-size: 9px; color: rgba(255,255,255,0.3); }