/* InsightVessel - Nautical Maritime Aesthetic */

:root {
    /* Maritime palette - light & oceanic */
    --bg-ocean: #f0f7fa;
    --bg-white: #ffffff;
    --bg-sand: #faf8f5;
    --bg-foam: #e8f4f8;

    /* Primary colors */
    --ocean-deep: #1a365d;
    --ocean-blue: #2c5282;
    --ocean-light: #4299e1;
    --teal: #0d9488;
    --teal-light: #5eead4;
    --gold: #d69e2e;
    --gold-light: #ecc94b;
    --coral: #ed8936;

    /* Status colors */
    --status-underway: #38a169;
    --status-anchored: #d69e2e;
    --status-moored: #4299e1;
    --status-aground: #e53e3e;
    --status-unknown: #a0aec0;

    /* Text */
    --text-navy: #1a365d;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-light: #a0aec0;

    /* Borders */
    --border-light: rgba(26, 54, 93, 0.1);
    --border-medium: rgba(26, 54, 93, 0.2);

    /* Typography */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;
    --font-body: 'Source Sans 3', -apple-system, sans-serif;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(26, 54, 93, 0.08);
    --shadow-md: 0 4px 12px rgba(26, 54, 93, 0.1);
    --shadow-lg: 0 10px 40px rgba(26, 54, 93, 0.15);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-ocean);
    -webkit-font-smoothing: antialiased;
}

/* Navigation Bar */
.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    padding: 0 var(--space-lg);
    gap: var(--space-lg);
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.brand-icon {
    width: 36px;
    height: 36px;
    color: var(--ocean-deep);
}

.brand-text {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--ocean-deep);
    letter-spacing: -0.01em;
}

/* Search */
.nav-search {
    position: relative;
    flex: 1;
    max-width: 420px;
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

.nav-search input {
    width: 100%;
    height: 42px;
    padding: 0 var(--space-md) 0 44px;
    background: var(--bg-foam);
    border: 2px solid transparent;
    border-radius: 24px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    transition: var(--transition-fast);
}

.nav-search input:focus {
    outline: none;
    border-color: var(--teal);
    background: var(--bg-white);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1);
}

.nav-search input::placeholder {
    color: var(--text-muted);
}

/* Search Results Dropdown */
.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    max-height: 320px;
    overflow-y: auto;
    display: none;
    box-shadow: var(--shadow-lg);
}

.search-results.active {
    display: block;
}

.search-result-item {
    padding: var(--space-md);
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition-fast);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--bg-foam);
}

.search-result-name {
    font-weight: 600;
    color: var(--ocean-deep);
}

.search-result-meta {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Filters */
.nav-filters {
    display: flex;
    gap: var(--space-md);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-group label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.filter-group select {
    height: 32px;
    padding: 0 var(--space-md);
    background: var(--bg-foam);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.filter-group select:hover {
    border-color: var(--border-medium);
}

.filter-group select:focus {
    outline: none;
    border-color: var(--teal);
}

/* Stats */
.nav-stats {
    display: flex;
    gap: var(--space-xl);
    margin-left: auto;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.stat-value {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--ocean-deep);
    line-height: 1;
}

.stat-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Map */
#map {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-ocean);
}

/* Leaflet overrides */
.leaflet-container {
    background: #a8d4e6;
    font-family: var(--font-body);
}

.leaflet-control-zoom {
    border: none !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.leaflet-control-zoom a {
    background: var(--bg-white) !important;
    color: var(--ocean-deep) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 18px !important;
}

.leaflet-control-zoom a:last-child {
    border-bottom: none !important;
}

.leaflet-control-zoom a:hover {
    background: var(--bg-foam) !important;
    color: var(--teal) !important;
}

.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
}

.leaflet-control-attribution a {
    color: var(--ocean-blue) !important;
}

/* Vessel Markers */
.vessel-marker {
    transition: transform var(--transition-fast);
}

.vessel-marker:hover {
    transform: scale(1.3);
    z-index: 1000 !important;
}

/* Canvas vessel tooltip */
.vessel-tooltip {
    position: fixed;
    background: var(--bg-white);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
}

#vesselCanvas {
    /* Canvas layer styles if needed */
}

/* Vessel popup */
.leaflet-popup-content-wrapper {
    background: var(--bg-white) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    border: none !important;
}

.leaflet-popup-content {
    margin: var(--space-md) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    min-width: 180px;
}

.leaflet-popup-tip {
    background: var(--bg-white) !important;
    box-shadow: var(--shadow-sm) !important;
}

.leaflet-popup-close-button {
    color: var(--text-muted) !important;
    font-size: 20px !important;
    padding: 8px !important;
}

.leaflet-popup-close-button:hover {
    color: var(--ocean-deep) !important;
}

/* Vessel Details Panel */
.vessel-panel {
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    width: 400px;
    background: var(--bg-white);
    border-left: 1px solid var(--border-light);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -4px 0 20px rgba(26, 54, 93, 0.1);
}

.vessel-panel.active {
    transform: translateX(0);
}

.panel-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-foam);
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
    z-index: 10;
}

.panel-close:hover {
    background: var(--ocean-deep);
    color: white;
}

.panel-close svg {
    width: 14px;
    height: 14px;
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
}

/* Vessel Header */
.vessel-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--bg-foam);
}

.vessel-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-foam);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.vessel-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-unknown);
}

.vessel-status.underway { color: var(--status-underway); }
.vessel-status.underway::before { background: var(--status-underway); }
.vessel-status.anchored { color: var(--status-anchored); }
.vessel-status.anchored::before { background: var(--status-anchored); }
.vessel-status.moored { color: var(--status-moored); }
.vessel-status.moored::before { background: var(--status-moored); }
.vessel-status.aground { color: var(--status-aground); }
.vessel-status.aground::before { background: var(--status-aground); }

.vessel-name {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    color: var(--ocean-deep);
    line-height: 1.2;
    margin-bottom: var(--space-xs);
}

.vessel-type {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Sections */
.vessel-section {
    margin-bottom: var(--space-lg);
}

.vessel-section h2 {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--teal);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.vessel-section h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

/* Data Grid */
.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.data-item {
    background: var(--bg-foam);
    padding: var(--space-md);
    border-radius: 10px;
}

.data-item.wide {
    grid-column: 1 / -1;
}

.data-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.data-value {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-navy);
}

.data-value.mono {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ocean-blue);
}

/* Dimensions Visual */
.vessel-dimensions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.dimension-visual {
    position: relative;
    height: 100px;
    background: linear-gradient(180deg, var(--bg-foam) 0%, #d4e8ef 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Wave pattern */
.dimension-visual::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C200,100 400,20 600,60 C800,100 1000,20 1200,60 L1200,120 L0,120 Z' fill='%234299e1' opacity='0.2'/%3E%3C/svg%3E");
    background-size: 1200px 100%;
}

.dimension-ship {
    width: 55%;
    height: 28px;
    background: var(--ocean-deep);
    border-radius: 14px 14px 6px 6px;
    position: relative;
    z-index: 1;
}

.dimension-ship::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 14px solid var(--ocean-deep);
}

.dimension-ship::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 4px;
    background: var(--ocean-light);
    border-radius: 2px;
}

.dimension-length,
.dimension-width {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--ocean-deep);
    background: var(--bg-white);
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 2;
}

.dimension-length {
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.dimension-width {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* Cargo Analysis */
.cargo-analysis {
    background: linear-gradient(135deg, var(--bg-foam) 0%, #e0f2f1 100%);
    border-radius: 12px;
    padding: var(--space-md);
}

.cargo-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(13, 148, 136, 0.1);
}

.cargo-item:last-child {
    border-bottom: none;
}

.cargo-label {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cargo-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--ocean-deep);
    text-align: right;
    max-width: 200px;
}

/* Track Controls */
.track-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.track-toggle {
    background: var(--bg-foam);
    padding: var(--space-md);
    border-radius: 10px;
}

.track-duration {
    padding: 0 var(--space-md);
}

.track-duration select {
    width: 100%;
    height: 36px;
    padding: 0 var(--space-md);
    background: var(--bg-foam);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.track-duration select:hover {
    border-color: var(--border-medium);
}

.track-duration select:focus {
    outline: none;
    border-color: var(--teal);
}

.toggle {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
}

.toggle input {
    display: none;
}

.toggle-slider {
    width: 44px;
    height: 24px;
    background: var(--border-medium);
    border-radius: 12px;
    position: relative;
    transition: var(--transition-fast);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.toggle input:checked + .toggle-slider {
    background: var(--teal);
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Vessel Header with Watchlist Button */
.vessel-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.watchlist-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-foam);
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}

.watchlist-btn:hover {
    background: var(--gold-light);
    color: var(--gold);
}

.watchlist-btn.active {
    background: var(--gold);
    color: white;
}

.watchlist-btn.active:hover {
    background: var(--gold);
}

.watchlist-btn svg {
    width: 20px;
    height: 20px;
}

.watchlist-btn.active svg {
    fill: currentColor;
}

/* Watchlist Toggle Button */
.watchlist-toggle {
    position: fixed;
    bottom: 80px;
    left: var(--space-md);
    width: 48px;
    height: 48px;
    background: var(--bg-white);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ocean-deep);
    transition: var(--transition-fast);
    z-index: 600;
}

.watchlist-toggle:hover {
    background: var(--gold-light);
    color: var(--gold);
    transform: scale(1.05);
}

.watchlist-toggle svg {
    width: 24px;
    height: 24px;
}

.watchlist-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    background: var(--gold);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.watchlist-count:empty,
.watchlist-count[data-count="0"] {
    display: none;
}

/* Watchlist Panel */
.watchlist-panel {
    position: fixed;
    bottom: 140px;
    left: var(--space-md);
    width: 320px;
    max-height: 400px;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 650;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.watchlist-panel.active {
    display: flex;
}

.watchlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.watchlist-header h2 {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--ocean-deep);
    margin: 0;
}

.watchlist-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: var(--transition-fast);
}

.watchlist-close:hover {
    background: var(--bg-foam);
    color: var(--text-primary);
}

.watchlist-close svg {
    width: 14px;
    height: 14px;
}

.watchlist-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
}

.watchlist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--text-muted);
    text-align: center;
}

.watchlist-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
    opacity: 0.3;
}

.watchlist-empty p {
    font-weight: 500;
    margin-bottom: var(--space-xs);
}

.watchlist-empty span {
    font-size: 12px;
}

.watchlist-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.watchlist-item:hover {
    background: var(--bg-foam);
}

.watchlist-item-star {
    color: var(--gold);
    flex-shrink: 0;
}

.watchlist-item-star svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

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

.watchlist-item-name {
    font-weight: 500;
    color: var(--ocean-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watchlist-item-meta {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.watchlist-item-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-unknown);
    flex-shrink: 0;
}

.watchlist-item-status.online {
    background: var(--status-underway);
}

.watchlist-item-status.offline {
    background: var(--status-unknown);
}

/* Footer */
.vessel-footer {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.last-update {
    font-size: 12px;
    color: var(--text-muted);
}

.last-update span {
    font-weight: 500;
    color: var(--text-secondary);
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(240, 247, 250, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.loading-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.loading-spinner svg {
    width: 56px;
    height: 56px;
    color: var(--teal);
}

.loading-spinner span {
    font-size: 14px;
    font-weight: 500;
    color: var(--ocean-deep);
}

/* Coordinate Display */
.coord-display {
    position: fixed;
    bottom: var(--space-md);
    left: var(--space-md);
    background: var(--bg-white);
    border-radius: 8px;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: var(--space-lg);
    z-index: 500;
    box-shadow: var(--shadow-md);
}

.coord-display span::before {
    color: var(--text-muted);
    font-size: 10px;
    margin-right: 6px;
}

.coord-lat::before { content: 'LAT'; }
.coord-lon::before { content: 'LON'; }

/* Vessel Track Polyline */
.vessel-track-line {
    stroke: var(--teal);
    stroke-width: 3;
    stroke-opacity: 0.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-foam);
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ocean-light);
}

/* ==================== Nav Action Buttons ==================== */
.nav-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-foam);
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
}

.nav-btn:hover {
    background: var(--bg-ocean);
    color: var(--text-primary);
}

.nav-btn-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ==================== ETA Status Indicators ==================== */
.eta-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.eta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.eta-on-time .eta-dot { background: #22c55e; }
.eta-on-time { color: #22c55e; }
.eta-delayed .eta-dot { background: #f59e0b; }
.eta-delayed { color: #f59e0b; }
.eta-ahead .eta-dot { background: #3b82f6; }
.eta-ahead { color: #3b82f6; }
.eta-unknown .eta-dot { background: var(--text-muted); }
.eta-unknown { color: var(--text-muted); }

/* ==================== Draught History ==================== */
.draught-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.draught-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-foam);
    border-radius: 4px;
    font-size: 12px;
}

.draught-arrow {
    font-size: 14px;
    width: 20px;
    text-align: center;
}

.draught-arrow.loading { color: #ef4444; }
.draught-arrow.discharging { color: #22c55e; }

.draught-values {
    flex: 1;
    color: var(--text-secondary);
}

.draught-values strong { color: var(--text-primary); }

.draught-meta {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
}

/* ==================== Risk Indicators ==================== */
.risk-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.risk-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.risk-item.risk-high { background: rgba(239, 68, 68, 0.1); border-left: 3px solid #ef4444; }
.risk-item.risk-medium { background: rgba(245, 158, 11, 0.1); border-left: 3px solid #f59e0b; }
.risk-item.risk-low { background: rgba(34, 197, 94, 0.1); border-left: 3px solid #22c55e; }

.risk-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
}

.risk-badge.high { background: #ef4444; color: white; }
.risk-badge.medium { background: #f59e0b; color: white; }
.risk-badge.low { background: #22c55e; color: white; }

.occurrence-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--surface-light);
    color: var(--text-secondary);
    margin-left: auto;
    margin-right: 6px;
}

/* ==================== Dark Activity Panel ==================== */
.dark-activity-panel {
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    width: 420px;
    background: var(--bg-white);
    border-left: 1px solid var(--border-light);
    box-shadow: -4px 0 20px rgba(26, 54, 93, 0.1);
    z-index: 1001;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.dark-activity-panel.active {
    transform: translateX(0);
}

.dark-activity-header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.dark-activity-header h2 {
    font-family: var(--font-display);
    font-size: 18px;
    flex: 1;
}

.dark-activity-filters {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    width: 100%;
}

.filter-chip {
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-foam);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-chip:hover { background: var(--bg-ocean); }
.filter-chip.active {
    background: var(--teal);
    color: white;
    border-color: var(--teal);
}

.dark-activity-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

.alert-card {
    padding: 10px 12px;
    background: var(--bg-foam);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-left: 3px solid var(--border-light);
}

.alert-card:hover { background: var(--bg-ocean); }
.alert-card.risk-high { border-left-color: #ef4444; }
.alert-card.risk-medium { border-left-color: #f59e0b; }
.alert-card.risk-low { border-left-color: #22c55e; }

.alert-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.alert-vessel-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.alert-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-ocean);
    color: var(--text-secondary);
}

.alert-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.alert-time {
    font-size: 11px;
    color: var(--text-muted);
}

.panel-close-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.panel-close-btn:hover { background: var(--bg-ocean); }

/* ==================== Analytics Panel ==================== */
.analytics-panel {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: 480px;
    height: calc(100vh - 64px);
    background: var(--bg-white);
    border-right: 1px solid var(--border-light);
    box-shadow: 4px 0 20px rgba(26, 54, 93, 0.1);
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.analytics-panel.active {
    transform: translateX(0);
}

.analytics-header {
    padding: 6px var(--space-md);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.analytics-header h2 {
    font-family: var(--font-display);
    font-size: 18px;
    flex: 1;
}

.analytics-content {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-md);
}

.analytics-section {
    margin-bottom: var(--space-xl);
}

.analytics-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.analytics-section h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: var(--space-md) 0 var(--space-sm);
}

.analytics-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.analytics-stat-card {
    background: var(--bg-foam);
    border-radius: 8px;
    padding: var(--space-md);
    text-align: center;
}

.analytics-stat-value {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.analytics-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Bar Charts */
.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.bar-label {
    width: 140px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track {
    flex: 1;
    height: 24px;
    background: var(--bg-foam);
    border-radius: 3px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.bar-fill.teal { background: var(--teal); }
.bar-fill.blue { background: #3b82f6; }
.bar-fill.green { background: #22c55e; }
.bar-fill.yellow { background: #f59e0b; }
.bar-fill.orange { background: #f97316; }
.bar-fill.red { background: #ef4444; }

.bar-value {
    min-width: 40px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    font-family: var(--font-mono);
}

/* Port congestion colors */
.congestion-low { color: #22c55e; }
.congestion-moderate { color: #f59e0b; }
.congestion-high { color: #f97316; }
.congestion-critical { color: #ef4444; }

/* Dark stats summary */
.dark-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.dark-stat-card {
    background: var(--bg-foam);
    border-radius: 8px;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.dark-stat-count {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
}

.dark-stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

/* Voyage stats */
.voyage-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}

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

/* ==================== Laden/Ballast Status ==================== */

.laden-laden { color: #22c55e; font-weight: 600; }
.laden-ballast { color: #60a5fa; font-weight: 600; }
.laden-partial { color: #f59e0b; font-weight: 600; }

/* ==================== Cargo Volume Estimate ==================== */

.cargo-volume-section {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
}

.cargo-volume-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cargo-volume-title {
    font-size: 11px;
    font-weight: 600;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cargo-volume-confidence {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.cv-conf-high { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.cv-conf-medium { background: rgba(234, 179, 8, 0.2); color: #facc15; }
.cv-conf-low { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }

.cargo-volume-bar-wrap {
    position: relative;
    height: 18px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.cargo-volume-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    transition: width 0.4s ease;
}

.cargo-volume-pct {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.cargo-volume-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.cv-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.cv-label {
    font-size: 11px;
    color: #9ca3af;
}

.cv-value {
    font-size: 11px;
    color: #e5e7eb;
    font-weight: 500;
}

/* ==================== Floating Storage Banner ==================== */

.floating-storage-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    font-size: 12px;
}

.fs-icon {
    font-size: 16px;
}

.fs-text {
    font-weight: 700;
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}

.fs-detail {
    color: #94a3b8;
    margin-left: auto;
}

/* ==================== Port Markers on Map ==================== */
.port-tooltip {
    font-size: 12px;
    line-height: 1.4;
}

.port-tooltip strong {
    display: block;
    margin-bottom: 2px;
}

.port-detail-popup .leaflet-popup-content-wrapper {
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

.port-detail-popup .leaflet-popup-content {
    margin: 12px 14px;
    line-height: 1.4;
}

.port-detail-popup .leaflet-popup-tip {
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.1);
}

.port-detail-popup a.leaflet-popup-close-button {
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 1024px) {
    .nav-filters {
        display: none;
    }

    .vessel-panel {
        width: 100%;
        max-width: 420px;
    }
}

@media (max-width: 768px) {
    .nav-bar {
        padding: 0 var(--space-md);
        gap: var(--space-md);
    }

    .brand-text {
        display: none;
    }

    .nav-search {
        max-width: none;
    }

    .nav-stats {
        display: none;
    }

    .vessel-panel {
        width: 100%;
        max-width: none;
    }
}

/* ==================== Forecast Panel ==================== */

.forecast-panel {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: 520px;
    background: var(--bg-white);
    border-right: 1px solid var(--border-light);
    box-shadow: 4px 0 20px rgba(26, 54, 93, 0.1);
    z-index: 1002;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.forecast-panel.active {
    transform: translateX(0);
}

.forecast-header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.forecast-header h2 {
    font-family: var(--font-display);
    font-size: 18px;
    flex-shrink: 0;
}

.forecast-controls {
    display: flex;
    gap: var(--space-sm);
    flex: 1;
}

.forecast-select {
    padding: 4px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 12px;
    background: var(--bg-white);
    color: var(--text-primary);
}

.forecast-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

.forecast-section {
    margin-bottom: var(--space-xl);
}

.forecast-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.forecast-vessel-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.forecast-vessel-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 12px;
    background: var(--bg-foam);
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.forecast-vessel-card:hover {
    background: var(--bg-ocean);
}

.forecast-vessel-name {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 120px;
}

.forecast-vessel-commodity {
    color: var(--teal);
    font-weight: 500;
    flex: 1;
}

.forecast-vessel-eta {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: 11px;
}

.forecast-vessel-tonnes {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: 11px;
    min-width: 60px;
    text-align: right;
}

/* ==================== Market Signals ==================== */

.analytics-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    background: var(--bg-foam);
    border-radius: 6px;
    padding: 2px;
    width: 100%;
    order: 3;
}

.analytics-tab {
    padding: 4px 8px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

.analytics-tab.active {
    background: var(--bg-white);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.analytics-tab-content {
    display: none;
}

.analytics-tab-content.active {
    display: block;
}

.market-signal-box {
    background: var(--bg-foam);
    border-radius: 8px;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.market-signal-value {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
}

.market-signal-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.market-signal-trend {
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
}

.market-signal-trend.up { color: #22c55e; }
.market-signal-trend.down { color: #ef4444; }
.market-signal-trend.neutral { color: var(--text-secondary); }

.speed-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    margin-bottom: var(--space-md);
}

.speed-bar {
    flex: 1;
    background: var(--teal);
    border-radius: 2px 2px 0 0;
    min-width: 3px;
    transition: height 0.3s;
    opacity: 0.7;
}

.speed-bar:hover {
    opacity: 1;
}

/* ==================== Export Buttons ==================== */

.export-btn {
    padding: 4px 10px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-white);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.export-btn:hover {
    background: var(--teal);
    color: white;
    border-color: var(--teal);
}

.export-row {
    text-align: right;
    margin-top: var(--space-sm);
}

/* ==================== Alert Subscription ==================== */

.alert-subscribe {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.alert-input {
    flex: 1;
    min-width: 140px;
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 12px;
    background: var(--bg-white);
    color: var(--text-primary);
}

.alert-select {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 12px;
    background: var(--bg-white);
    color: var(--text-primary);
}

.btn-small {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-teal {
    background: var(--teal);
    color: white;
}

.btn-teal:hover {
    background: var(--ocean-blue);
}

.alert-status {
    margin-top: var(--space-sm);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
}

.alert-status.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ==================== Route Deviation Cards ==================== */

.deviation-card {
    padding: 10px;
    background: var(--bg-foam);
    border-radius: 8px;
    border-left: 3px solid var(--coral);
    margin-bottom: 8px;
}

.deviation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.deviation-vessel {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.deviation-type {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(237, 137, 54, 0.15);
    color: var(--coral);
    font-weight: 600;
    text-transform: uppercase;
}

.deviation-route {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ==================== Price Ticker ==================== */

.price-ticker {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    height: 28px;
    background: var(--ocean-deep);
    color: #e2e8f0;
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 0 var(--space-lg);
    z-index: 999;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
}

.price-ticker-visible ~ #map {
    top: 92px;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ticker-label {
    font-weight: 600;
    color: #a0aec0;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.ticker-up {
    color: #48bb78;
}

.ticker-down {
    color: #fc8181;
}

.ticker-sep {
    color: #4a5568;
    margin: 0 4px;
}

/* ==================== Trading Intelligence Panel ==================== */

.trading-panel {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: 560px;
    height: calc(100vh - 64px);
    background: var(--bg-white);
    border-right: 1px solid var(--border-light);
    box-shadow: 4px 0 20px rgba(26, 54, 93, 0.1);
    z-index: 1003;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.trading-panel.active {
    transform: translateX(0);
}

.trading-header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.trading-header h2 {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-navy);
    white-space: nowrap;
}

.trading-header .panel-close-btn {
    margin-left: auto;
}

.signal-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-foam);
    border-radius: 6px;
    padding: 2px;
}

.signal-tab {
    padding: 4px 12px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
    white-space: nowrap;
}

.signal-tab.active {
    background: var(--bg-white);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.signal-tab-content {
    display: none;
}

.signal-tab-content.active {
    display: block;
}

.trading-content {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-md);
}

/* Sentiment Gauge */
.sentiment-gauge {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 12px 16px;
    background: var(--bg-foam);
    border-radius: 10px;
    margin-bottom: var(--space-md);
}

.sentiment-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sentiment-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sentiment-dot.bullish { background: #38a169; box-shadow: 0 0 8px rgba(56,161,105,0.4); }
.sentiment-dot.bearish { background: #e53e3e; box-shadow: 0 0 8px rgba(229,62,62,0.4); }
.sentiment-dot.neutral { background: #d69e2e; box-shadow: 0 0 8px rgba(214,158,46,0.4); }

.sentiment-label {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sentiment-label.bullish { color: #38a169; }
.sentiment-label.bearish { color: #e53e3e; }
.sentiment-label.neutral { color: #d69e2e; }

.sentiment-detail {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: auto;
}

/* KPI Strip */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: var(--space-md);
}

.kpi-card {
    background: var(--bg-foam);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.kpi-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-navy);
    line-height: 1.2;
}

.kpi-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.kpi-trend {
    font-size: 10px;
    font-family: var(--font-mono);
}

.kpi-trend.up { color: #38a169; }
.kpi-trend.down { color: #e53e3e; }
.kpi-trend.flat { color: var(--text-muted); }

/* Webhook details collapse */
.webhook-details summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 0;
}

.webhook-details summary:hover {
    color: var(--text-primary);
}

.trading-section {
    margin-bottom: var(--space-lg);
}

.trading-section h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-sm);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-light);
}

.trading-empty {
    color: var(--text-muted);
    font-size: 12px;
    padding: var(--space-sm);
}

/* Signal Cards */
.signal-card {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid var(--text-muted);
}

.signal-card.signal-bullish {
    background: rgba(34, 197, 94, 0.06);
    border-left-color: #22c55e;
}

.signal-card.signal-bearish {
    background: rgba(239, 68, 68, 0.06);
    border-left-color: #ef4444;
}

.signal-card.signal-neutral {
    background: var(--bg-foam);
    border-left-color: var(--ocean-light);
}

.signal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.signal-icon {
    font-size: 11px;
    font-weight: 700;
}

.signal-bullish .signal-icon { color: #22c55e; }
.signal-bearish .signal-icon { color: #ef4444; }
.signal-neutral .signal-icon { color: var(--ocean-light); }

.signal-type {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

.signal-confidence {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

.signal-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.signal-commodity {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(13, 148, 136, 0.1);
    color: var(--teal);
    font-weight: 600;
}

/* Regional Balance */
.balance-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
}

.balance-label {
    min-width: 90px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.balance-trend {
    font-size: 10px;
}

.balance-trend.trend-up { color: #22c55e; }
.balance-trend.trend-down { color: #ef4444; }

.balance-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.balance-bar {
    height: 8px;
    border-radius: 2px;
    min-width: 3px;
    transition: width 0.3s ease;
}

.balance-bar.inbound {
    background: var(--teal);
}

.balance-bar.outbound {
    background: var(--coral);
}

.balance-net {
    min-width: 40px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Contango Indicator */
.contango-card {
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    border-left: 3px solid var(--text-muted);
}

.contango-value {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-navy);
}

.contango-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.contango-signal {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.contango-card.signal-bullish .contango-signal { color: #22c55e; }
.contango-card.signal-bearish .contango-signal { color: #ef4444; }
.contango-card.signal-neutral .contango-signal { color: var(--ocean-light); }

.contango-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Destination Changes */
.dest-change-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dest-change-card {
    padding: 8px 10px;
    background: var(--bg-foam);
    border-radius: 6px;
    margin-bottom: 6px;
}

.dest-change-vessel {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.dest-change-route {
    font-size: 12px;
    margin-top: 2px;
}

.dest-old {
    color: var(--text-muted);
    text-decoration: line-through;
}

.dest-new {
    color: var(--teal);
    font-weight: 600;
}

.dest-change-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Port Delays */
.delay-card {
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    border-left: 3px solid var(--text-muted);
}

.delay-card.delay-severe {
    background: rgba(239, 68, 68, 0.06);
    border-left-color: #e53e3e;
}

.delay-card.delay-moderate {
    background: rgba(237, 137, 54, 0.06);
    border-left-color: #ed8936;
}

.delay-card.delay-mild {
    background: var(--bg-foam);
    border-left-color: var(--ocean-light);
}

.delay-port {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.delay-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.delay-ratio {
    font-weight: 700;
    color: var(--coral);
}

/* ==================== Weather Overlay ==================== */

.nav-btn-active {
    background: var(--ocean-light) !important;
    color: white !important;
}

/* ==================== Trade Flow Lines ==================== */

.trade-flow-line {
    animation: flow-dash 2s linear infinite;
}

@keyframes flow-dash {
    to {
        stroke-dashoffset: -32;
    }
}

/* ==================== Vessel Intelligence Profile ==================== */

.vessel-profile-content {
    padding: 4px 0;
}

.profile-risk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 8px;
}

.profile-risk-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.profile-risk-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
}

.profile-util {
    margin-bottom: 12px;
}

.profile-util-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.profile-util-bar {
    display: flex;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-foam);
}

.util-seg {
    transition: width 0.3s ease;
}

.util-laden { background: #22c55e; }
.util-ballast { background: #60a5fa; }
.util-port { background: #ecc94b; }
.util-idle { background: #a0aec0; }

.profile-util-legend {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-muted);
}

.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
}

.profile-section {
    margin-bottom: 10px;
}

.profile-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.profile-tag {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--bg-foam);
    color: var(--ocean-blue);
    margin: 2px 4px 2px 0;
}

.profile-route {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 3px 0;
    color: var(--text-primary);
}

.profile-route-count {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
}

.profile-stat {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px dotted var(--border-light);
}

.profile-stat span:first-child {
    color: var(--text-secondary);
}

.profile-stat span:last-child {
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.profile-cargo-list {
    font-size: 12px;
}

.profile-cargo-item {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}

.profile-cargo-port {
    color: var(--text-muted);
    font-size: 11px;
}

/* ==================== Commodity Overview ==================== */

.commodity-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.commodity-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.commodity-card:hover {
    border-color: var(--accent-blue);
}

.commodity-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.commodity-card-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-blue);
}

.commodity-card-sub {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ==================== Sankey Chart ==================== */

.sankey-controls {
    margin-bottom: 10px;
}

.sankey-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.sankey-container {
    width: 100%;
    min-height: 320px;
    max-height: 500px;
    position: relative;
    overflow-y: auto;
}

.sankey-container svg {
    width: 100%;
    height: 100%;
}

.sankey-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 6px;
}

.sankey-legend span {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ==================== Chart Period Selector ==================== */

.chart-period-selector {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.chart-period-btn {
    padding: 3px 10px;
    font-size: 11px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.chart-period-btn.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

/* ==================== News Feed ==================== */

.news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.news-filter-btn {
    padding: 4px 10px;
    font-size: 11px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-white);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.news-filter-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.news-filter-btn.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.news-search {
    margin-bottom: 10px;
}

.news-search-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-foam);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
}

.news-search-input:focus {
    border-color: var(--accent-blue);
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.news-item {
    display: block;
    padding: 10px 12px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.news-item:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.news-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.news-category {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

.news-cat-maritime { background: #ebf8ff; color: #2b6cb0; }
.news-cat-energy { background: #fefcbf; color: #975a16; }
.news-cat-markets { background: #f0fff4; color: #276749; }
.news-cat-commodities { background: #faf5ff; color: #6b46c1; }
.news-cat-agriculture { background: #f0fff4; color: #22543d; }
.news-cat-logistics { background: #fff5f5; color: #c53030; }
.news-cat-chemicals { background: #fffaf0; color: #c05621; }
.news-cat-default { background: var(--bg-foam); color: var(--text-secondary); }

.news-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: auto;
    white-space: nowrap;
}

.news-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.news-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-source {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

.news-load-more {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    font-size: 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-foam);
    color: var(--accent-blue);
    cursor: pointer;
    text-align: center;
}

.news-load-more:hover {
    background: var(--accent-blue);
    color: #fff;
}

.news-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ==================== Time Series SVG Charts ==================== */

.ts-chart-container {
    width: 100%;
    height: 220px;
    position: relative;
    margin: 8px 0;
    background: var(--bg-foam);
    border-radius: 8px;
    padding: 4px;
}

.ts-chart-container svg {
    width: 100%;
    height: 100%;
}

.ts-chart-container .ts-tooltip {
    position: absolute;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    pointer-events: none;
    display: none;
    white-space: nowrap;
    z-index: 10;
    color: var(--text-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ==================== Route Weather ==================== */

.route-weather-header {
    font-size: 12px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.route-weather-warnings {
    margin: 4px 0;
    padding: 4px 8px;
    background: rgba(220, 38, 38, 0.08);
    border-radius: 4px;
    border-left: 2px solid #dc2626;
}

.route-weather-strip {
    display: flex;
    gap: 4px;
    margin: 6px 0;
}

.route-wp {
    flex: 1;
    text-align: center;
    padding: 3px 2px;
    border-top: 2px solid;
    background: rgba(255,255,255,0.03);
    border-radius: 0 0 3px 3px;
}

.route-dest-weather {
    padding: 4px 0;
}

/* ==================== Webhook Management ==================== */

.webhook-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.webhook-input {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-mono);
}

.webhook-input:focus {
    outline: none;
    border-color: var(--teal);
}

.webhook-events {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 11px;
    color: var(--text-secondary);
}

.webhook-events label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.webhook-events input[type="checkbox"] {
    accent-color: var(--teal);
}

.btn-primary {
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
}

.btn-primary:hover {
    opacity: 0.9;
}

.webhook-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.webhook-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
}

.webhook-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.webhook-item-url {
    font-family: var(--font-mono);
    color: var(--teal);
    font-size: 11px;
    word-break: break-all;
}

.webhook-item-events {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.webhook-event-tag {
    background: var(--bg-secondary);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 10px;
    color: var(--text-muted);
}

.webhook-delete {
    background: none;
    border: none;
    color: var(--coral);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 6px;
}

.webhook-status {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 8px;
}

.webhook-status.success {
    background: rgba(56, 161, 105, 0.15);
    color: #38a169;
}

.webhook-status.error {
    background: rgba(229, 62, 62, 0.15);
    color: #e53e3e;
}

/* ==================== Zones Panel ==================== */
.zones-panel {
    position: fixed;
    top: 0;
    left: -400px;
    width: 380px;
    height: 100%;
    background: var(--bg-white);
    border-right: 1px solid var(--border);
    z-index: 1100;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.zones-panel.active { left: 0; }

.zones-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}
.zones-header h2 { flex: 1; margin: 0; font-size: 16px; }

.zones-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.zone-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.zone-card:hover { border-color: var(--teal); }
.zone-card .zone-name { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.zone-card .zone-type { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.zone-card .zone-stats { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* ==================== Port Detail Panel ==================== */
.port-detail-panel {
    position: fixed;
    top: 0;
    right: -480px;
    width: 460px;
    height: 100%;
    background: var(--bg-white);
    border-left: 1px solid var(--border);
    z-index: 1100;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.port-detail-panel.active { right: 0; }

.port-detail-header {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}
.port-detail-header h2 { flex: 1; margin: 0; font-size: 16px; }

.port-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.port-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.port-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}
.port-stat-card .stat-value { font-size: 20px; font-weight: 700; color: var(--teal); }
.port-stat-card .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.port-vessel-item, .port-call-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.port-vessel-item:last-child, .port-call-item:last-child { border-bottom: none; }

/* ==================== Sanctions Summary ==================== */
.sanctions-summary {
    padding: 8px 0;
}
.sanctions-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
.sanctions-badge.risk-high { background: rgba(229, 62, 62, 0.15); color: #e53e3e; }
.sanctions-badge.risk-medium { background: rgba(237, 137, 54, 0.15); color: #ed8936; }
.sanctions-badge.risk-low { background: rgba(56, 161, 105, 0.15); color: #38a169; }
.sanctions-badge.risk-clear { background: rgba(56, 178, 172, 0.15); color: #38b2ac; }

.sanctions-flags {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ==================== Alert Rules ==================== */
.alert-rules-list { margin-top: 8px; }
.alert-rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 12px;
}
.alert-rule-item .rule-type {
    color: var(--teal);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}
.alert-rule-item .rule-email { color: var(--text-muted); font-size: 11px; }
.alert-rule-item .rule-unsub {
    background: none;
    border: none;
    color: var(--coral);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 6px;
}

/* ==================== Destination Flow ==================== */
.dest-flow-section { padding: 4px 0; }
.dest-flow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
}
.dest-flow-row .dest-name { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.dest-flow-row .dest-bar { flex: 1; height: 14px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
.dest-flow-row .dest-bar-fill { height: 100%; background: var(--teal); border-radius: 3px; transition: width 0.3s; }
.dest-flow-row .dest-count { width: 28px; text-align: right; color: var(--text-muted); font-size: 11px; }

/* ==================== Turnaround List ==================== */
.turnaround-list { padding: 4px 0; } /* max-height + overflow in List Scrolling section above */
.turnaround-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.turnaround-item:last-child { border-bottom: none; }
.turnaround-item .ta-port { color: var(--text-primary); font-weight: 500; }
.turnaround-item .ta-time { color: var(--teal); }

/* ==================== List Scrolling ==================== */
.signal-list { max-height: 350px; overflow-y: auto; }
.dest-change-list { max-height: 250px; overflow-y: auto; }
.turnaround-list { max-height: 250px; overflow-y: auto; }
.dest-flow-section { max-height: 250px; overflow-y: auto; }

/* ==================== Voyage List ==================== */
.voyage-list { max-height: 400px; overflow-y: auto; }
.voyage-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.voyage-card .voyage-route { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.voyage-card .voyage-vessel { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.voyage-card .voyage-meta { font-size: 11px; color: var(--text-secondary); margin-top: 4px; display: flex; gap: 12px; }

/* ==================== Port Clickable Rows ==================== */
.port-clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.port-clickable:hover { background: var(--bg-secondary); }

/* ==================== Export Button ==================== */
.export-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.export-btn:hover { background: var(--teal); color: white; border-color: var(--teal); }

/* ==================== Small Teal Button ==================== */
.btn-small.btn-teal {
    background: var(--teal);
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.btn-small.btn-teal:hover { opacity: 0.85; }

/* ==================== EIA Stocks Grid ==================== */
.eia-stocks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 0;
}
.eia-stock-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
}
.eia-stock-name { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.eia-stock-value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.eia-stock-unit { font-size: 10px; font-weight: 400; color: var(--text-muted); }
.eia-stock-change { font-size: 11px; margin-top: 2px; }
.eia-stock-change.up { color: #38a169; }
.eia-stock-change.down { color: #e53e3e; }
.eia-stock-change.flat { color: var(--text-muted); }
.eia-stock-period { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

/* ==================== Voyage Card Enhancements ==================== */
.voyage-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.voyage-vessel-name { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.voyage-duration { font-size: 12px; color: var(--teal); font-weight: 600; }
.voyage-route { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.voyage-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: flex; gap: 8px; }

/* ==================== Finance Dashboard (Bloomberg-style) ==================== */
.finance-dashboard {
    --fd-bg: #0a0e17;
    --fd-cell: #111827;
    --fd-border: #1e293b;
    --fd-text: #e2e8f0;
    --fd-muted: #94a3b8;
    --fd-accent: #38bdf8;
    --fd-green: #22c55e;
    --fd-red: #ef4444;
    --fd-amber: #f59e0b;
    position: fixed;
    top: 64px;
    left: 0; right: 0; bottom: 0;
    background: var(--fd-bg);
    color: var(--fd-text);
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    overflow-y: auto;
    padding: 8px;
    z-index: 1200;
}
.fd-row { display: grid; gap: 6px; margin-bottom: 6px; }
.fd-row-top { grid-template-columns: 2fr 1fr 3fr; }
.fd-row-charts { grid-template-columns: repeat(4, 1fr); }
.fd-row-data { grid-template-columns: 3fr 2fr; }
.fd-row-signals { grid-template-columns: 2fr 2fr 1.5fr; }
.fd-row-bottom { grid-template-columns: 2fr 1.5fr 1.5fr; }
.fd-cell {
    background: var(--fd-cell);
    border: 1px solid var(--fd-border);
    border-radius: 4px;
    padding: 10px 12px;
    overflow: hidden;
    min-height: 0;
}
.fd-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fd-muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.fd-chart-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fd-muted);
    margin-bottom: 4px;
}
.fd-chart { height: 120px; position: relative; margin-top: 6px; }

/* Ticker cells */
.fd-ticker-cell .fd-ticker-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--fd-border);
}
.fd-ticker-cell .fd-ticker-row:last-child { border-bottom: none; }
.fd-ticker-label { color: var(--fd-muted); font-size: 11px; }
.fd-ticker-price { color: var(--fd-text); font-size: 15px; font-weight: 700; }
.fd-ticker-change { font-size: 11px; font-weight: 600; }
.fd-ticker-change.up { color: var(--fd-green); }
.fd-ticker-change.down { color: var(--fd-red); }

/* Sentiment gauge */
.fd-sentiment-bar {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to right, var(--fd-red), var(--fd-amber), var(--fd-green));
    position: relative;
    margin: 8px 0;
}
.fd-sentiment-marker {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 20px;
    background: #fff;
    border-radius: 2px;
    transform: translateX(-50%);
}
.fd-sentiment-label {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-top: 4px;
}
.fd-sentiment-sub { font-size: 11px; color: var(--fd-muted); text-align: center; }

/* KPI strip */
.fd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.fd-kpi {
    text-align: center;
    padding: 4px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
}
.fd-kpi-value { font-size: 16px; font-weight: 700; color: var(--fd-text); }
.fd-kpi-label { font-size: 9px; text-transform: uppercase; color: var(--fd-muted); letter-spacing: 0.5px; margin-top: 2px; }
.fd-kpi-delta { font-size: 10px; font-weight: 600; margin-top: 1px; }
.fd-kpi-delta.up { color: var(--fd-green); }
.fd-kpi-delta.down { color: var(--fd-red); }
.fd-kpi-delta.flat { color: var(--fd-muted); }

/* Also add delta badges for existing KPI strip in Market Signals panel */
.kpi-delta { font-family: var(--font-mono); font-size: 10px; font-weight: 600; margin-top: 2px; }
.kpi-delta.up { color: #38a169; }
.kpi-delta.down { color: #e53e3e; }
.kpi-delta.flat { color: var(--text-muted); }

/* Tables */
.fd-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.fd-table th {
    text-align: left;
    padding: 4px 6px;
    color: var(--fd-muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--fd-border);
}
.fd-table td {
    padding: 4px 6px;
    border-bottom: 1px solid rgba(30,41,59,0.5);
    color: var(--fd-text);
}
.fd-table tr:hover td { background: rgba(255,255,255,0.02); }
.fd-table .fd-num { text-align: right; font-variant-numeric: tabular-nums; }
.fd-table .fd-pos { color: var(--fd-green); }
.fd-table .fd-neg { color: var(--fd-red); }

/* Signal cards */
.fd-signal {
    padding: 6px 10px;
    margin-bottom: 4px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    border-left: 3px solid var(--fd-muted);
    font-size: 12px;
}
.fd-signal.bullish { border-left-color: var(--fd-green); }
.fd-signal.bearish { border-left-color: var(--fd-red); }
.fd-signal-dir { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.fd-signal-dir.bullish { color: var(--fd-green); }
.fd-signal-dir.bearish { color: var(--fd-red); }
.fd-signal-label { color: var(--fd-text); margin-left: 6px; }
.fd-signal-desc { color: var(--fd-muted); font-size: 10px; margin-top: 2px; }

/* News items */
.fd-news-item {
    padding: 5px 0;
    border-bottom: 1px solid var(--fd-border);
}
.fd-news-item:last-child { border-bottom: none; }
.fd-news-item a { color: var(--fd-accent); text-decoration: none; }
.fd-news-item a:hover { text-decoration: underline; color: #60ccff; }
.fd-news-title { font-size: 12px; color: var(--fd-accent); line-height: 1.3; }
.fd-news-meta { font-size: 10px; color: var(--fd-muted); margin-top: 2px; }
.fd-news-category { display: inline-block; font-size: 9px; padding: 1px 5px; border-radius: 3px; background: rgba(56,189,248,0.1); color: var(--fd-accent); margin-left: 4px; }

/* Sparkline */
.fd-sparkline { display: inline-block; vertical-align: middle; }
.fd-sparkline svg { display: block; }

/* Report subscribe */
.fd-input {
    width: 100%;
    padding: 6px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--fd-border);
    border-radius: 4px;
    color: var(--fd-text);
    font-size: 12px;
    font-family: inherit;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.fd-input:focus { outline: none; border-color: var(--fd-accent); }
.fd-report-btns { display: flex; gap: 6px; }
.fd-btn {
    flex: 1;
    padding: 6px 10px;
    background: rgba(56,189,248,0.15);
    border: 1px solid rgba(56,189,248,0.3);
    border-radius: 4px;
    color: var(--fd-accent);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.fd-btn:hover { background: rgba(56,189,248,0.25); }
.fd-report-status { font-size: 11px; margin-top: 6px; color: var(--fd-green); }

/* Finance Dashboard Filter Bar */
.fd-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid var(--fd-border);
    flex-wrap: wrap;
}
.fd-filter-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.fd-filter-label {
    font-size: 10px;
    color: var(--fd-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.fd-filter-select {
    padding: 3px 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--fd-border);
    border-radius: 3px;
    color: var(--fd-text);
    font-size: 11px;
    font-family: var(--font-mono);
    cursor: pointer;
    min-width: 70px;
}
.fd-filter-select:focus { outline: none; border-color: var(--fd-accent); }
.fd-filter-date {
    padding: 2px 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--fd-border);
    border-radius: 3px;
    color: var(--fd-text);
    font-size: 10px;
    font-family: var(--font-mono);
    width: 110px;
    color-scheme: dark;
}
.fd-filter-date:focus { outline: none; border-color: var(--fd-accent); }
.fd-filter-vs {
    font-size: 10px;
    color: var(--fd-muted);
}
.fd-compare-btn {
    padding: 2px 8px;
    background: rgba(56,189,248,0.15);
    border: 1px solid rgba(56,189,248,0.3);
    border-radius: 3px;
    color: var(--fd-accent);
    font-size: 10px;
    cursor: pointer;
    font-family: var(--font-mono);
}
.fd-compare-btn:hover { background: rgba(56,189,248,0.3); }
.fd-compare-reset {
    padding: 2px 8px;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 3px;
    color: var(--fd-red);
    font-size: 10px;
    cursor: pointer;
    font-family: var(--font-mono);
}
.fd-compare-reset:hover { background: rgba(239,68,68,0.3); }
.fd-filter-divider {
    width: 1px;
    height: 20px;
    background: var(--fd-border);
}
.fd-filter-count {
    font-size: 10px;
    color: var(--fd-muted);
    margin-left: auto;
    font-family: var(--font-mono);
}

/* Row 6: Freight */
.fd-row-freight {
    grid-template-columns: 1fr 2fr;
}

/* Freight index card */
.fd-index-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fd-index-row:last-child { border-bottom: none; }
.fd-index-name {
    font-size: 11px;
    color: var(--fd-text);
    flex: 1;
}
.fd-index-value {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--fd-accent);
    font-weight: 600;
    min-width: 50px;
    text-align: right;
}
.fd-index-unit {
    font-size: 9px;
    color: var(--fd-muted);
    margin-left: 4px;
    min-width: 20px;
}

/* Watchlist analytics on dashboard */
.fd-wl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.fd-wl-stat {
    text-align: center;
    padding: 6px 4px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
}
.fd-wl-stat-value {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--fd-text);
}
.fd-wl-stat-label {
    font-size: 9px;
    color: var(--fd-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.fd-wl-breakdown {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.fd-wl-section {
    flex: 1;
    min-width: 120px;
}
.fd-wl-section-title {
    font-size: 9px;
    color: var(--fd-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 2px;
}
.fd-wl-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.fd-wl-bar-label {
    font-size: 10px;
    color: var(--fd-text);
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fd-wl-bar-fill {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    overflow: hidden;
}
.fd-wl-bar-fill-inner {
    height: 100%;
    border-radius: 2px;
    background: var(--fd-accent);
    transition: width 0.3s;
}
.fd-wl-bar-count {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--fd-muted);
    min-width: 16px;
    text-align: right;
}

/* Ton-miles correlation sparkline */
.fd-corr-chart {
    height: 60px;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 6px;
}
.fd-corr-label {
    font-size: 9px;
    color: var(--fd-muted);
    margin-bottom: 2px;
}