@charset "UTF-8";.kpi-cards-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.kpi-card{background-color:#fff;border-radius:8px;border:1px solid #e2e8f0;padding:8px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 1px 2px #0000000d;transition:box-shadow .2s}.kpi-card:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.kpi-card .card-header{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:4px;border-bottom:1px solid #f1f5f9}.kpi-card .card-title{font-size:10px;font-weight:600;color:#64748b;text-transform:uppercase;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:8px}@media(min-width:640px){.kpi-card .card-title{font-size:12px}}.kpi-card .icon-wrapper{padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center}.kpi-card .card-body{padding-top:4px;display:flex;align-items:flex-end;gap:8px}.kpi-card .value{font-size:18px;font-weight:700;letter-spacing:-.05em}.kpi-card .trend{font-size:12px;font-weight:500;margin-bottom:4px;display:flex;align-items:center}.kpi-card .trend .trend-icon{margin-right:2px}.bg-sky-50{background-color:#f0f9ff}.text-sky-600{color:#0284c7}.bg-indigo-50{background-color:#eef2ff}.text-indigo-600{color:#4f46e5}.bg-emerald-50{background-color:#ecfdf5}.text-emerald-600{color:#059669}.bg-amber-50{background-color:#fffbeb}.text-amber-500{color:#f59e0b}.bg-rose-50{background-color:#fff1f2}.text-rose-600{color:#e11d48}.bg-slate-100{background-color:#f1f5f9}.text-slate-600{color:#475569}.bg-blue-50{background-color:#eff6ff}.text-blue-500{color:#3b82f6}.text-slate-800{color:#1e293b}.text-rose-500{color:#ef4444}.text-emerald-500{color:#10b981}.text-slate-500{color:#64748b}.barge-list-wrapper{display:flex;flex-direction:column;height:65vh;min-height:65vh}.barge-list-wrapper .header-section{padding:16px;border-bottom:1px solid #f1f5f9;flex-shrink:0}.barge-list-wrapper .header-section .title{font-size:14px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}.barge-list-wrapper .header-section .tabs{display:flex;gap:16px;overflow-x:auto;border-bottom:1px solid #e2e8f0}.barge-list-wrapper .header-section .tabs::-webkit-scrollbar{display:none}.barge-list-wrapper .header-section .tabs{-ms-overflow-style:none;scrollbar-width:none}.barge-list-wrapper .header-section .tabs .tab-btn{padding-bottom:8px;font-size:12px;font-weight:600;white-space:nowrap;transition:color .2s;position:relative;background:none;border:none;cursor:pointer;color:#64748b}.barge-list-wrapper .header-section .tabs .tab-btn:hover{color:#334155}.barge-list-wrapper .header-section .tabs .tab-btn.active{color:#0284c7}.barge-list-wrapper .header-section .tabs .tab-btn.active:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:#0284c7;border-radius:9999px 9999px 0 0}.barge-list-wrapper .search-section{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;gap:8px;flex-shrink:0}.barge-list-wrapper .search-section .search-input-wrapper{position:relative;flex:1}.barge-list-wrapper .search-section .search-input-wrapper .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#087b92;pointer-events:none}.barge-list-wrapper .search-section .search-input-wrapper input{width:100%;padding:6px 12px 6px 32px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;transition:all .2s}.barge-list-wrapper .search-section .search-input-wrapper input:focus{outline:none;border-color:#38bdf8;box-shadow:0 0 0 1px #38bdf8}.barge-list-wrapper .search-section .search-input-wrapper input::placeholder{color:#087b92}.barge-list-wrapper .search-section .filter-btn{padding:6px;border:1px solid #e2e8f0;border-radius:8px;color:#64748b;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.barge-list-wrapper .search-section .filter-btn:hover{background-color:#f8fafc;color:#334155}.barge-list-wrapper .table-header{display:grid;grid-template-columns:1fr 2fr 1fr 1fr;gap:8px;padding:8px 16px;background-color:#f8fafccc;border-bottom:1px solid #e2e8f0;font-size:10px;text-transform:uppercase;font-weight:700;color:#64748b;flex-shrink:0}.barge-list-wrapper .table-header .text-right{text-align:right}.barge-list-wrapper .list-content{flex:1;overflow-y:auto;min-height:0}.barge-list-wrapper .list-content .list-item{display:grid;grid-template-columns:1fr 2fr 1fr 1fr;gap:8px;padding:12px 16px;border-bottom:1px solid #f1f5f9;font-size:14px;transition:background-color .2s;cursor:pointer;align-items:center}.barge-list-wrapper .list-content .list-item:hover{background-color:#f8fafc}.barge-list-wrapper .list-content .list-item.selected{background-color:#e0f2fe66;position:relative}.barge-list-wrapper .list-content .list-item.selected:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background-color:#0ea5e9}.barge-list-wrapper .list-content .list-item .barge-id{font-weight:600;color:#087b92;display:flex;align-items:center;gap:6px}.barge-list-wrapper .list-content .list-item .barge-id .ship-icon{color:#087b92}.barge-list-wrapper .list-content .list-item .barge-route{color:#475569;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.barge-list-wrapper .list-content .list-item .status-badge{font-size:10px;padding:2px 8px;border-radius:9999px;border:1px solid transparent;font-weight:500;white-space:nowrap;display:inline-block}.barge-list-wrapper .list-content .list-item .eta{text-align:right;font-family:monospace;font-size:12px;color:#475569}.barge-list-wrapper .footer-section{padding:12px;border-top:1px solid #e2e8f0;flex-shrink:0;text-align:center}.barge-list-wrapper .footer-section .view-all-btn{font-size:12px;font-weight:600;color:#0284c7;background:none;border:none;cursor:pointer}.barge-list-wrapper .footer-section .view-all-btn:hover{color:#0369a1;text-decoration:underline}.status-running{color:#10b981;background-color:#ecfdf5;border-color:#a7f3d0}.status-delayed{color:#f59e0b;background-color:#fffbeb;border-color:#fde68a}.status-anchored{color:#ec4899;background-color:#fdf2f8;border-color:#fbcfe8}.status-at-port{color:#0284c7;background-color:#f0f9ff;border-color:#bae6fd}.status-default{color:#475569;background-color:#f1f5f9;border-color:#e2e8f0}.map-area-wrapper{position:relative;width:100%;height:100%;background-color:#c8e1f7;overflow:hidden;display:flex;flex-direction:column}.map-area-wrapper .water-grid{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.1;background-image:linear-gradient(to right,#000000 1px,transparent 1px),linear-gradient(to bottom,#000000 1px,transparent 1px);background-size:100px 100px}.map-area-wrapper .depth-contours{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.2}.map-area-wrapper .landmass{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.06))}.map-area-wrapper .landmass g{fill:#f8fafc;stroke:#e2e8f0;stroke-width:2}.map-area-wrapper .routes-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.map-area-wrapper .port-marker{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}.map-area-wrapper .port-marker .marker-dot{width:16px;height:16px;border-radius:9999px;border:2px solid #4f46e5;background-color:#fff;box-shadow:0 4px 6px -1px #0000001a;z-index:10;display:flex;align-items:center;justify-content:center}.map-area-wrapper .port-marker .marker-dot .inner-dot{width:6px;height:6px;background-color:#4f46e5;border-radius:9999px}.map-area-wrapper .port-marker .marker-label{margin-top:4px;font-size:10px;font-weight:700;color:#334155;background-color:#ffffffe6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:2px 6px;border-radius:4px;box-shadow:0 1px 2px #0000000d;border:1px solid #f1f5f9}.map-area-wrapper .layer-control{position:absolute;top:9px;left:9px;min-width:200px}.map-area-wrapper .layer-control .control-btn{display:flex;align-items:center;gap:8px;background-color:#fff;padding:8px 12px;border-radius:8px 8px 0 0;border:1px solid #e2e8f0;border-bottom:none;font-size:14px;font-weight:600;color:#334155;box-shadow:0 1px 2px #0000000d;width:100%;cursor:pointer}.map-area-wrapper .layer-control .control-btn .icon-layers{color:#0284c7}.map-area-wrapper .layer-control .control-btn .icon-arrow{margin-left:auto;transition:transform .2s}.map-area-wrapper .layer-control .control-btn .icon-arrow.rotated{transform:rotate(180deg)}.map-area-wrapper .layer-control .control-panel{background-color:#fff;border:1px solid #e2e8f0;border-radius:0 8px 8px;box-shadow:0 1px 2px #0000000d;padding:12px;width:100%}.map-area-wrapper .layer-control .control-panel .panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.map-area-wrapper .layer-control .control-panel .panel-header .panel-title{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.map-area-wrapper .layer-control .control-panel .panel-header .close-icon{color:#94a3b8;cursor:pointer}.map-area-wrapper .layer-control .control-panel .space-y-2{display:flex;flex-direction:column;gap:8px}.map-area-wrapper .bottom-controls{position:absolute;bottom:16px;left:16px;background-color:#fff;padding:8px 16px;border-radius:8px;border:1px solid #e2e8f0;box-shadow:0 1px 2px #0000000d;display:flex;align-items:center;gap:16px}.map-area-wrapper .bottom-controls .label{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase}.map-area-wrapper .bottom-controls .gradient-bar{width:128px;height:6px;background-image:linear-gradient(to right,#4ade80,#fbbf24,#ef4444);border-radius:9999px}.map-area-wrapper .bottom-controls .legend-text{display:flex;justify-content:space-between;width:128px;position:absolute;bottom:-16px;font-size:10px;color:#64748b}.map-area-wrapper .zoom-controls{position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:8px}.map-area-wrapper .zoom-controls .scale-label{background-color:#fff;padding:4px 12px;border-radius:4px;border:1px solid #e2e8f0;box-shadow:0 1px 2px #0000000d;font-size:12px;font-weight:600;color:#64748b}.map-area-wrapper .zoom-controls .zoom-buttons{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid #e2e8f0;box-shadow:0 1px 2px #0000000d}.map-area-wrapper .zoom-controls .zoom-buttons button{background-color:#fff;padding:8px;color:#475569;border:none;cursor:pointer;transition:background-color .2s}.map-area-wrapper .zoom-controls .zoom-buttons button:hover{background-color:#f8fafc}.map-area-wrapper .zoom-controls .zoom-buttons button:first-child{border-bottom:1px solid #e2e8f0}.layer-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer}.layer-checkbox .checkbox-input{display:none}.layer-checkbox .checkbox-custom{width:16px;height:16px;border:1px solid #cbd5e1;border-radius:4px;background-color:#fff;transition:all .2s;display:flex;align-items:center;justify-content:center}.layer-checkbox .checkbox-custom svg{width:12px;height:12px;color:#fff;transform:scale(0);transition:transform .2s}.layer-checkbox .checkbox-input:checked+.checkbox-custom{background-color:#0ea5e9;border-color:#0ea5e9}.layer-checkbox .checkbox-input:checked+.checkbox-custom svg{transform:scale(1)}.layer-checkbox .label-text{font-size:12px;color:#334155;font-weight:500;transition:color .2s}.layer-checkbox .label-text:hover{color:#0f172a}.barge-marker{position:absolute}.barge-marker .marker-group{position:relative}.barge-marker .boat-icon{position:absolute;top:0;left:0;transform:translate(-50%,-50%);z-index:10;transition:transform .2s;cursor:pointer;filter:drop-shadow(0 4px 6px rgba(0,0,0,.1));origin-center:center}.barge-marker .boat-icon:hover{transform:translate(-50%,-50%) scale(1.25)}.barge-marker .tooltip{position:absolute;top:20px;transform:translate(-50%);background-color:#fffffff2;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid #e2e8f0;padding:4px 8px;border-radius:4px;box-shadow:0 10px 15px -3px #0000001a;display:flex;flex-direction:column;align-items:center;z-index:20;pointer-events:none;transition:transform .2s;min-width:max-content}.barge-marker .tooltip .id{font-size:10px;font-weight:800;color:#1e293b;line-height:1;margin-bottom:2px}.barge-marker .tooltip .speed{font-size:9px;font-weight:700;text-transform:uppercase}.marker-emerald{fill:#10b981;stroke:#059669}.marker-amber{fill:#fbbf24;stroke:#f59e0b}.marker-sky{fill:#38bdf8;stroke:#0ea5e9}.text-emerald-700{color:#047857}.text-amber-700{color:#b45309}.text-sky-700{color:#0369a1}.vessel-label{text-shadow:-1px -1px 0 rgba(0,0,0,.7),1px -1px 0 rgba(0,0,0,.7),-1px 1px 0 rgba(0,0,0,.7),1px 1px 0 rgba(0,0,0,.7),0 0 8px rgba(0,0,0,.5);background:transparent!important;pointer-events:none;white-space:nowrap}.barge-details-wrapper{display:flex;flex-direction:column;height:75vh;min-height:65vh;background-color:#fff;position:relative;font-family:var(--font-be-vietnam-pro),sans-serif}.barge-details-wrapper.light-theme{background-color:#fff;color:#1e293b}.barge-details-wrapper .header-section{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e2e8f0}.barge-details-wrapper .header-section .title-section{display:flex;align-items:center;gap:8px;color:#1e293b;font-weight:600}.barge-details-wrapper .header-section .title-section .back-icon{cursor:pointer;color:#475569}.barge-details-wrapper .header-section .title-section .back-icon:hover{color:#1e293b}.barge-details-wrapper .header-section .title-section .title{font-size:14px;letter-spacing:.05em}.barge-details-wrapper .header-section .header-actions{display:flex;gap:12px;color:#475569}.barge-details-wrapper .header-section .header-actions .icon-btn{background:none;border:none;cursor:pointer;color:inherit;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:4px}.barge-details-wrapper .header-section .header-actions .icon-btn:hover{background-color:#f1f5f9;color:#1e293b}.barge-details-wrapper .barge-info-top{padding:16px 16px 0;display:flex;justify-content:space-between;align-items:center}.barge-details-wrapper .barge-info-top .id-status{display:flex;align-items:center;gap:12px}.barge-details-wrapper .barge-info-top .id-status .barge-id{font-size:24px;font-weight:700;margin:0;color:#1e293b}.barge-details-wrapper .barge-info-top .id-status .status-badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:4px}.barge-details-wrapper .barge-info-top .id-status .status-badge.running{background-color:#d1fae5;color:#047857}.barge-details-wrapper .barge-info-top .route{display:flex;align-items:center;gap:6px;font-size:14px;color:#475569;font-weight:500}.barge-details-wrapper .barge-info-top .route .route-arrow{color:#94a3b8}.barge-details-wrapper .hero-image-container{padding:4px 16px;display:flex;justify-content:center;align-items:center;background-color:#f8fafc;margin:0 16px;border-radius:8px;border:1px solid #e2e8f0;overflow:hidden;height:80px}.barge-details-wrapper .hero-image-container .hero-image{max-width:100%;height:100%;object-fit:contain}.barge-details-wrapper .specs-grid{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px;border-bottom:1px solid #e2e8f0}.barge-details-wrapper .specs-grid .spec-col{display:flex;flex-direction:column;gap:8px}.barge-details-wrapper .specs-grid .spec-item{display:flex;justify-content:space-between;font-size:13px}.barge-details-wrapper .specs-grid .spec-item .label{color:#64748b}.barge-details-wrapper .specs-grid .spec-item .value{font-weight:600;color:#1e293b}.barge-details-wrapper .specs-grid .spec-item .value.link{color:#0284c7;cursor:pointer}.barge-details-wrapper .specs-grid .spec-item .value.link:hover{text-decoration:underline}.barge-details-wrapper .details-tabs{display:flex;padding:0 16px;border-bottom:1px solid #e2e8f0;gap:16px;overflow-x:auto}.barge-details-wrapper .details-tabs .tab-btn{padding:12px 0;font-size:12px;font-weight:600;color:#64748b;background:none;border:none;cursor:pointer;position:relative;white-space:nowrap}.barge-details-wrapper .details-tabs .tab-btn:hover{color:#334155}.barge-details-wrapper .details-tabs .tab-btn.active{color:#0284c7}.barge-details-wrapper .details-tabs .tab-btn.active:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:#0284c7}.barge-details-wrapper .details-main-content{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px;overflow-y:auto}.barge-details-wrapper .details-main-content .content-column{display:flex;flex-direction:column;gap:12px}.barge-details-wrapper .details-main-content .column-title{font-size:12px;font-weight:700;color:#475569;margin:0;letter-spacing:.05em}.barge-details-wrapper .details-main-content .pol-pod{display:flex;justify-content:space-between;align-items:center;background-color:#f8fafc;padding:12px;border-radius:6px;border:1px solid #f1f5f9}.barge-details-wrapper .details-main-content .pol-pod .point{display:flex;flex-direction:column;gap:2px}.barge-details-wrapper .details-main-content .pol-pod .point .point-label{font-size:10px;font-weight:600;color:#64748b}.barge-details-wrapper .details-main-content .pol-pod .point .point-value{font-size:13px;font-weight:700;color:#1e293b}.barge-details-wrapper .details-main-content .pol-pod .point .point-time{font-size:11px;color:#64748b}.barge-details-wrapper .details-main-content .pol-pod .arrow-progress{display:flex;align-items:center;flex:1;justify-content:center;padding:0 8px}.barge-details-wrapper .details-main-content .pol-pod .arrow-progress .line{flex:1;height:1px;background-color:#cbd5e1}.barge-details-wrapper .details-main-content .pol-pod .arrow-progress .arrow-icon{color:#64748b;margin:0 4px}.barge-details-wrapper .details-main-content .progress-section{display:flex;flex-direction:column;gap:8px}.barge-details-wrapper .details-main-content .progress-section .progress-bar{width:100%;height:6px;background-color:#f1f5f9;border-radius:3px;position:relative}.barge-details-wrapper .details-main-content .progress-section .progress-bar .progress-fill{height:100%;background-color:#0284c7;border-radius:3px}.barge-details-wrapper .details-main-content .progress-section .progress-bar .progress-dot{width:10px;height:10px;background-color:#fff;border:2px solid #0284c7;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.barge-details-wrapper .details-main-content .progress-section .progress-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.barge-details-wrapper .details-main-content .progress-section .progress-stats .stat-item{display:flex;flex-direction:column}.barge-details-wrapper .details-main-content .progress-section .progress-stats .stat-item .label{font-size:11px;color:#64748b}.barge-details-wrapper .details-main-content .progress-section .progress-stats .stat-item .value{font-size:12px;font-weight:600;color:#1e293b}.barge-details-wrapper .details-main-content .progress-section .progress-stats .stat-item .value.status-good{color:#047857}.barge-details-wrapper .details-main-content .status-grid{display:flex;flex-direction:column;gap:8px}.barge-details-wrapper .details-main-content .status-grid .status-item{display:flex;justify-content:space-between;align-items:center;font-size:13px}.barge-details-wrapper .details-main-content .status-grid .status-item .label{color:#64748b;display:flex;align-items:center;gap:6px}.barge-details-wrapper .details-main-content .status-grid .status-item .label svg{color:#94a3b8}.barge-details-wrapper .details-main-content .status-grid .status-item .value{font-weight:600;color:#1e293b}.barge-details-wrapper .details-main-content .status-grid .status-item .value.status-good{color:#047857;font-weight:700}.barge-details-wrapper .summary-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px 16px;border-top:1px solid #e2e8f0;background-color:#f8fafc}.barge-details-wrapper .summary-cards .summary-card{background-color:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:8px;display:flex;align-items:center;gap:8px}.barge-details-wrapper .summary-cards .summary-card .icon{color:#64748b;flex-shrink:0}.barge-details-wrapper .summary-cards .summary-card .card-info{display:flex;flex-direction:column}.barge-details-wrapper .summary-cards .summary-card .card-info .label{font-size:10px;color:#64748b;white-space:nowrap}.barge-details-wrapper .summary-cards .summary-card .card-info .value{font-size:14px;font-weight:700;color:#1e293b}.barge-details-wrapper .summary-cards .summary-card .card-info .value small{font-size:11px;font-weight:500;color:#64748b}.barge-details-wrapper .summary-cards .summary-card.alert{border-color:#fca5a5;background-color:#fef2f2}.barge-details-wrapper .summary-cards .summary-card.alert .icon,.barge-details-wrapper .summary-cards .summary-card.alert .value{color:#dc2626}.barge-details-wrapper .action-buttons{padding:16px;display:flex;gap:8px;border-top:1px solid #e2e8f0}.barge-details-wrapper .action-buttons .btn{flex:1;padding:10px 0;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;border:none}.barge-details-wrapper .action-buttons .btn.btn-primary{background-color:#0284c7;color:#fff}.barge-details-wrapper .action-buttons .btn.btn-primary:hover{background-color:#0369a1}.barge-details-wrapper .action-buttons .btn.btn-secondary{background-color:#fff;color:#334155;border:1px solid #cbd5e1}.barge-details-wrapper .action-buttons .btn.btn-secondary:hover{background-color:#f8fafc}.barge-details-wrapper .action-buttons .btn.btn-danger{background-color:#fef2f2;color:#dc2626;border:1px solid #fca5a5}.barge-details-wrapper .action-buttons .btn.btn-danger:hover{background-color:#fee2e2}.stats-card,.port-congestion,.recent-warnings,.warning-summary{background-color:#fff;border-radius:12px;box-shadow:0 1px 2px #0000000d;border:1px solid #e2e8f0;padding:12px;display:flex;flex-direction:column;height:100%}.stats-card .card-header,.port-congestion .card-header,.recent-warnings .card-header,.warning-summary .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.stats-card .card-header .title,.port-congestion .card-header .title,.recent-warnings .card-header .title,.warning-summary .card-header .title{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.05em}.stats-card .card-header .icon-chevron,.port-congestion .card-header .icon-chevron,.recent-warnings .card-header .icon-chevron,.warning-summary .card-header .icon-chevron{color:#94a3b8;cursor:pointer;transition:color .2s}.stats-card .card-header .icon-chevron:hover,.port-congestion .card-header .icon-chevron:hover,.recent-warnings .card-header .icon-chevron:hover,.warning-summary .card-header .icon-chevron:hover{color:#334155}.stats-card .view-all-btn,.port-congestion .view-all-btn,.recent-warnings .view-all-btn,.warning-summary .view-all-btn{margin-top:16px;text-align:left;font-size:11px;font-weight:600;color:#0284c7;background:none;border:none;cursor:pointer;display:flex;align-items:center}.stats-card .view-all-btn:hover,.port-congestion .view-all-btn:hover,.recent-warnings .view-all-btn:hover,.warning-summary .view-all-btn:hover{color:#0369a1;text-decoration:underline}.warning-summary .chart-container{flex:1;display:flex;align-items:center;justify-content:space-between}.warning-summary .chart-container .chart-wrapper{width:150px;height:150px;position:relative}.warning-summary .chart-container .chart-wrapper .chart-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.warning-summary .chart-container .chart-wrapper .chart-overlay .total-num{font-size:20px;font-weight:700;color:#1e293b;line-height:1.2}.warning-summary .chart-container .chart-wrapper .chart-overlay .total-label{font-size:10px;color:#64748b;font-weight:500}.warning-summary .chart-container .legend{flex:1;padding-left:8px;display:flex;flex-direction:column;gap:6px}.warning-summary .chart-container .legend .legend-item{display:flex;align-items:center;font-size:12px}.warning-summary .chart-container .legend .legend-item .color-box{width:10px;height:10px;border-radius:2px;margin-right:8px}.warning-summary .chart-container .legend .legend-item .value{font-weight:700;width:16px;color:#1e293b}.warning-summary .chart-container .legend .legend-item .label{color:#475569}.recent-warnings .timeline{flex:1;overflow-y:auto;padding-right:8px;display:flex;flex-direction:column;gap:8px}.recent-warnings .timeline .timeline-item{display:flex;gap:12px;position:relative}.recent-warnings .timeline .timeline-item .line{position:absolute;left:6px;top:20px;bottom:-16px;width:1px;background-color:#f1f5f9}.recent-warnings .timeline .timeline-item .icon-container{display:flex;flex-direction:column;align-items:center;margin-top:2px}.recent-warnings .timeline .timeline-item .content{flex:1}.recent-warnings .timeline .timeline-item .content .header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}.recent-warnings .timeline .timeline-item .content .header .id{font-size:12px;font-weight:700;color:#1e293b}.recent-warnings .timeline .timeline-item .content .header .time{font-size:10px;color:#94a3b8;font-family:monospace}.recent-warnings .timeline .timeline-item .content .desc{font-size:11px;color:#475569}.port-congestion .port-list{flex:1;display:flex;flex-direction:column;gap:8px}.port-congestion .port-list .port-item .item-header{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}.port-congestion .port-list .port-item .item-header .name{font-weight:600;color:#334155}.port-congestion .port-list .port-item .item-header .value{font-weight:700;color:#1e293b}.port-congestion .port-list .port-item .progress-bar{width:100%;background-color:#f1f5f9;border-radius:9999px;height:6px;overflow:hidden}.port-congestion .port-list .port-item .progress-bar .progress-fill{height:6px;border-radius:9999px}.performance-weather{background-color:#fff;border-radius:12px;box-shadow:0 1px 2px #0000000d;border:1px solid #e2e8f0;display:flex;overflow:hidden;height:100%}.performance-weather .chart-side{flex:1;padding:16px;border-right:1px solid #f1f5f9;display:flex;flex-direction:column}.performance-weather .chart-side .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.performance-weather .chart-side .header .title{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.05em}.performance-weather .chart-side .header .select-period{font-size:10px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:4px;padding:4px;color:#475569;outline:none}.performance-weather .chart-side .chart-wrapper{flex:1;width:100%;position:relative}.performance-weather .weather-side{width:140px;padding:16px;background-color:#f8fafc;display:flex;flex-direction:column}.performance-weather .weather-side .title{font-size:10px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}.performance-weather .weather-side .city{font-size:12px;font-weight:700;color:#334155;margin-bottom:8px}.performance-weather .weather-side .weather-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0}.performance-weather .weather-side .weather-main .icon{color:#94a3b8;margin-bottom:8px}.performance-weather .weather-side .weather-main .temp{font-size:20px;font-weight:700;color:#1e293b;line-height:1}.performance-weather .weather-side .weather-main .desc{font-size:10px;color:#64748b;margin-top:4px}.performance-weather .weather-side .weather-details{display:flex;flex-direction:column;gap:8px;margin-top:auto}.performance-weather .weather-side .weather-details .detail-item{display:flex;justify-content:space-between;align-items:center;font-size:10px}.performance-weather .weather-side .weather-details .detail-item .label{display:flex;align-items:center;color:#64748b}.performance-weather .weather-side .weather-details .detail-item .label svg{margin-right:4px}.performance-weather .weather-side .weather-details .detail-item .value{font-weight:600;color:#334155}.page-body-container{min-height:100vh;background-color:#f8fafc;color:#1e293b;font-family:sans-serif;display:flex;flex-direction:column}.page-body-container .main-content{flex:1;padding:16px;display:flex;flex-direction:column;gap:16px;overflow:hidden}.page-body-container .main-grid{flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;min-height:500px}.page-body-container .barge-list-container{grid-column:span 3/span 3;background-color:#fff;border-radius:12px;box-shadow:0 1px 2px #0000000d;border:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden}.page-body-container .map-area-container{grid-column:span 6/span 6;background-color:#f8fafc;border-radius:12px;box-shadow:0 1px 2px #0000000d;border:1px solid #e2e8f0;position:relative;overflow:hidden}.page-body-container .barge-details-container{grid-column:span 3/span 3;background-color:#fff;border-radius:12px;box-shadow:0 1px 2px #0000000d;border:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden}.page-body-container .bottom-stats-section{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;height:256px}.equal-height-grid{flex:1}.equal-height-grid .ant-col{display:flex;flex-direction:column}.equal-height-grid .ant-card{flex:1;display:flex;flex-direction:column}.equal-height-grid .ant-card .ant-card-body{flex:1;display:flex;flex-direction:column;padding:0!important;overflow:hidden}