/* FleetLeaks Harmonization Visualization Styles */

.fl-harmonization-viz{background:#fff;border-radius:12px;padding:32px;box-shadow:0 2px 8px rgba(0,0,0,.1);margin:32px 0}

.fl-viz-title{font-size:24px;font-weight:700;color:#0f172a;margin:0 0 24px 0}

.fl-viz-controls{margin-bottom:32px}

.fl-viz-mode-selector{display:flex;gap:8px;flex-wrap:wrap}

.fl-viz-mode{padding:10px 20px;border:2px solid #e2e8f0;background:#fff;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s;font-size:14px}

.fl-viz-mode:hover{border-color:#0ea5e9;color:#0ea5e9;transform:translateY(-2px)}

.fl-viz-mode.active{background:#0ea5e9;color:#fff;border-color:#0ea5e9}

.fl-venn-selector{margin-top:16px;padding:16px;background:#f8fafc;border-radius:8px}

.fl-venn-mode-toggle{display:flex;gap:8px;margin-bottom:16px}

.fl-venn-toggle{padding:8px 16px;border:2px solid #e2e8f0;background:#fff;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s;font-size:13px}

.fl-venn-toggle:hover{border-color:#0ea5e9;color:#0ea5e9}

.fl-venn-toggle.active{background:#0ea5e9;color:#fff;border-color:#0ea5e9}

.fl-pair-selector{display:flex;flex-wrap:wrap;gap:8px}

.fl-pair-btn{padding:8px 16px;border:2px solid #e2e8f0;background:#fff;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s;font-size:13px}

.fl-pair-btn:hover{border-color:#0ea5e9;transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.1)}

.fl-pair-btn.active{background:#0ea5e9;color:#fff;border-color:#0ea5e9}

.fl-viz-loading{text-align:center;padding:64px;color:#64748b}

.fl-spinner{width:48px;height:48px;border:4px solid #e2e8f0;border-top-color:#0ea5e9;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}

@keyframes spin{to{transform:rotate(360deg)}}

#fl-harmonization-container{position:relative;width:100%;background:#f8fafc;border-radius:8px}

.fl-viz-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:32px 0}

.fl-stat-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;padding:20px;display:flex;align-items:center;gap:16px;color:#fff;box-shadow:0 4px 6px rgba(0,0,0,.1)}

.fl-stat-card:nth-child(1){background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}

.fl-stat-card:nth-child(2){background:linear-gradient(135deg,#e91e63 0%,#c2185b 100%)}

.fl-stat-card:nth-child(3){background:linear-gradient(135deg,#0288d1 0%,#01579b 100%)}

.fl-stat-card:nth-child(4){background:linear-gradient(135deg,#00897b 0%,#004d40 100%)}

.fl-stat-card .fl-stat-label,.fl-stat-card .fl-stat-value{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}

.fl-stat-icon{font-size:36px;line-height:1}

.fl-stat-card:nth-child(2) .fl-stat-icon{filter:brightness(0) invert(1)}

.fl-stat-content{flex:1}

.fl-stat-label{font-size:13px;opacity:.9;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}

.fl-stat-value{font-size:28px;font-weight:700}

.fl-viz-table-container{margin-top:32px}

.fl-viz-table-container h3{font-size:20px;font-weight:700;color:#0f172a;margin-bottom:16px}

.fl-overlap-table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.1)}

.fl-overlap-table th{background:#0f172a;color:#fff;padding:12px 16px;text-align:left;font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.5px}

.fl-overlap-table td{padding:12px 16px;border-bottom:1px solid #e2e8f0}

.fl-overlap-table tbody tr:hover{background:#f8fafc}

.fl-jurisdiction-badges{display:flex;gap:6px;flex-wrap:wrap}

.fl-jurisdiction-badge{padding:4px 10px;border-radius:4px;font-size:11px;font-weight:700;color:#fff}

.fl-jurisdiction-badge.us{background:#B22234}
.fl-jurisdiction-badge.uk{background:#C41E3A}
.fl-jurisdiction-badge.eu{background:#003399}
.fl-jurisdiction-badge.au{background:#00008B}
.fl-jurisdiction-badge.ca{background:#FF0000}
.fl-jurisdiction-badge.nz{background:#00247D}

.fl-viz-tooltip{position:absolute;background:rgba(15,23,42,.95);color:#fff;padding:12px 16px;border-radius:8px;font-size:13px;pointer-events:none;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,.3);max-width:300px}

.fl-viz-tooltip h4{margin:0 0 8px 0;font-size:15px;font-weight:600}

.fl-viz-tooltip p{margin:4px 0;font-size:13px}

.chord-path{fill-opacity:.6;stroke:none;transition:fill-opacity .3s}

.chord-path:hover{fill-opacity:.9}

.chord-arc{stroke:#fff;stroke-width:2}

.chord-label{font-size:14px;font-weight:600;pointer-events:none}

.matrix-cell{stroke:#fff;stroke-width:2;cursor:pointer;transition:opacity .2s}

.matrix-cell:hover{opacity:1!important}

.bubble-circle{stroke:#fff;stroke-width:2;cursor:pointer;transition:all .3s}

.bubble-circle:hover{stroke-width:4}

@media (max-width:768px){
  .fl-harmonization-viz{padding:16px}
  .fl-viz-title{font-size:20px}
  .fl-viz-stats-grid{grid-template-columns:1fr}
  .fl-viz-mode{font-size:12px;padding:8px 12px}
  .fl-viz-controls{flex-direction:column;align-items:stretch}
  .fl-viz-mode-selector{flex-direction:column}
  .fl-viz-mode{width:100%}
  .fl-venn-selector{padding:12px}
  .fl-venn-mode-toggle{flex-direction:column}
  .fl-venn-toggle{width:100%}
  .fl-pair-selector{justify-content:center}
  .fl-pair-btn{flex:0 0 auto;min-width:90px}
  #fl-harmonization-container{padding:12px}
  .fl-overlap-table{font-size:13px}
  .fl-overlap-table th,.fl-overlap-table td{padding:8px}
}

@media (max-width:480px){
  .fl-stat-card{padding:16px 12px}
  .fl-stat-icon{font-size:28px}
  .fl-stat-value{font-size:24px}
  .fl-stat-label{font-size:11px}
}