/* ============================================================
   .uk-network-map — proposed canonical global-network map (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the global-network section's full CSS surface in
   `public/css/style.css`:

     .global-network-section            -> .uk-network-map-section            (root section padding + overflow clip)
     .network-benefits                  -> .uk-network-map-benefits           (3-col grid above the map)
     .network-benefit                   -> .uk-network-map-benefit            (single benefit card)
     .benefit-icon                      -> .uk-network-map-benefit-icon       (44-px tinted icon-box; will collapse onto .uk-icon-box at Phase 3)
     .benefit-content h4 / p            -> .uk-network-map-benefit-title / -body
     .world-map-container               -> .uk-network-map-canvas-wrap        (aspect-ratio 2:1 frame)
     #networkMap                        -> .uk-network-map-canvas             (positioned slot for the rendered map)
     .dot-map-canvas                    -> .uk-network-map-dots               (the actual dotted-svg layer)
     .dot-map-tooltip                   -> .uk-network-map-tooltip            (positioned tooltip card; .tooltip-name / -count / -status / -badges remain inner classes the JS renders)
     .server-markers                    -> .uk-network-map-markers            (absolute layer above the dots)
     .server-marker                     -> .uk-network-map-marker
     .marker-pulse                      -> .uk-network-map-marker-pulse       (large soft halo)
     .marker-dot                        -> .uk-network-map-marker-dot         (12-px primary dot with glow)
     .server-marker.featured .marker-dot
                                       -> .uk-network-map-marker--featured .uk-network-map-marker-dot
     .marker-label                      -> .uk-network-map-marker-label       (hover-revealed card)
     .marker-city / -status / -count    -> .uk-network-map-marker-label-city / -status / -count
     .network-stats                     -> .uk-network-map-stats              (bottom-overlay glassmorphism strip)
     .network-stat                      -> .uk-network-map-stat               (single label/value cell)

   Composes with: nothing strict — the canonical owns the CSS surface
   while the rendering JS (`public/js/world-dots.js`) and the Blade
   component (`resources/views/components/network-map.blade.php`)
   produce the actual dot layout + marker positioning. At Phase 3 we
   rename the classes the JS writes into the DOM to match the
   `uk-network-map-*` prefix.

   The benefit-icon chrome mirrors `.uk-icon-box --md` exactly — at
   Phase 3 the benefit cards adopt uk-icon-box directly and the
   `-benefit-icon` rules below collapse out.

   The pulse animation is decorative — disabled under
   `prefers-reduced-motion: reduce`.
   ============================================================ */

/* ============================================
   Section wrapper
   ============================================
   `overflow: hidden` clips the absolute decorations (markers + stats
   overlay) at the section edge so they never leak into the next
   section.
   ============================================ */
.uk-network-map-section {
    position: relative;
    padding: var(--space-4xl) 0;
    overflow: hidden;
}

/* ============================================
   Benefits — 3-col grid above the map
   ============================================ */
.uk-network-map-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

.uk-network-map-benefit {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.uk-network-map-benefit:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--color-primary-rgb), 0.4);
    box-shadow: var(--shadow-card-hover-sm);
}

@media (prefers-reduced-motion: reduce) {
    .uk-network-map-benefit:hover {
        transform: none;
    }
}

/* Icon slot — mirrors .uk-icon-box --md chrome (will collapse onto
   that canonical at Phase 3 migration). */
.uk-network-map-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--icon-box-md);
    height: var(--icon-box-md);
    background: rgba(var(--color-primary-rgb), 0.12);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    border-radius: var(--radius-lg);
    color: var(--color-primary-light);
}

.uk-network-map-benefit-icon > svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
    stroke: currentColor;
}

.uk-network-map-benefit-content {
    min-width: 0;
}

.uk-network-map-benefit-title {
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
    font-size: var(--font-md);
    font-weight: 600;
    line-height: var(--line-snug);
}

.uk-network-map-benefit-body {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    line-height: var(--line-normal);
}

@media (max-width: 1024px) {
    .uk-network-map-benefits {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .uk-network-map-benefit {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ============================================
   Canvas wrap — aspect-ratio 2:1 frame
   ============================================
   Houses the rendered dotted map + the absolute markers layer + the
   network-stats overlay. Max-width caps the map at 1280 px so it
   doesn't grow infinitely on ultra-wide viewports.
   ============================================ */
.uk-network-map-canvas-wrap {
    position: relative;
    width: calc(100% - var(--space-lg) * 2);
    max-width: 1280px;
    margin: 0 auto var(--space-3xl);
    aspect-ratio: 2 / 1;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.uk-network-map-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
}

.uk-network-map-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
}

/* ============================================
   Tooltip — JS-rendered popup card
   ============================================
   The world-dots.js code positions this absolutely against the
   cursor. Inner classes (.tooltip-name, .tooltip-count, .tooltip-status,
   .tooltip-badges + tone variants) stay as the existing names so the
   JS doesn't have to change at Phase 3 — only the outer wrapper class
   gets renamed.
   ============================================ */
.uk-network-map-tooltip {
    position: absolute;
    z-index: 30;
    min-width: 160px;
    padding: 12px 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

.uk-network-map-tooltip .tooltip-name {
    margin-bottom: 4px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
}

.uk-network-map-tooltip .tooltip-count {
    margin-bottom: 6px;
    color: var(--color-primary-light);
    font-size: 11px;
}

.uk-network-map-tooltip .tooltip-badges {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.uk-network-map-tooltip .badge-ipv4,
.uk-network-map-tooltip .badge-ipv6,
.uk-network-map-tooltip .badge-none,
.uk-network-map-tooltip .badge-flair {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.uk-network-map-tooltip .badge-ipv4 {
    background: var(--color-primary);
    color: #fff;
}

.uk-network-map-tooltip .badge-ipv6 {
    background: #9b59b6;
    color: #fff;
}

.uk-network-map-tooltip .badge-none {
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
}

.uk-network-map-tooltip .tooltip-status {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-success);
    border-radius: var(--radius-sm);
    color: var(--color-bg);
    font-size: 11px;
    font-weight: 500;
}

.uk-network-map-tooltip .badge-flair {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle;
}

.uk-network-map-tooltip .badge-flair-new {
    background: rgba(var(--color-primary-rgb), 0.3);
    color: var(--color-primary-light);
}

.uk-network-map-tooltip .badge-flair-soon {
    background: rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-text-muted);
}

.uk-network-map-tooltip .badge-flair-maintenance {
    background: rgba(var(--color-maintenance-rgb), 0.18);
    color: var(--color-maintenance);
}

/* ============================================
   Server markers — absolute layer above the dots
   ============================================ */
.uk-network-map-markers {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
}

.uk-network-map-marker {
    position: absolute;
    z-index: 10;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

/* Soft halo behind the dot — pulses to suggest "live" presence */
.uk-network-map-marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: var(--color-primary-glow);
    border-radius: 50%;
    animation: uk-network-map-marker-pulse 2.4s ease-out infinite;
}

@keyframes uk-network-map-marker-pulse {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(0.7); }
    70%  { opacity: 0;   transform: translate(-50%, -50%) scale(1.6); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
    .uk-network-map-marker-pulse {
        animation: none;
        opacity: 0.4;
    }
}

.uk-network-map-marker-dot {
    position: relative;
    z-index: 2;
    width: 12px;
    height: 12px;
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow:
        0 0 10px var(--color-primary),
        0 0 20px var(--color-primary-glow);
    transition: var(--transition-base);
}

.uk-network-map-marker:hover .uk-network-map-marker-dot {
    transform: scale(1.5);
    box-shadow:
        0 0 15px var(--color-primary),
        0 0 30px var(--color-primary-glow);
}

.uk-network-map-marker--featured .uk-network-map-marker-dot {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #8BBDE5 100%);
}

/* Hover-revealed label card above the dot */
.uk-network-map-marker-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 100;
    margin-bottom: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.uk-network-map-marker-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    border: 6px solid transparent;
    border-top-color: var(--color-bg-card);
    transform: translateX(-50%);
}

.uk-network-map-marker:hover .uk-network-map-marker-label {
    opacity: 1;
    visibility: visible;
}

.uk-network-map-marker-label-city {
    display: block;
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 600;
}

.uk-network-map-marker-label-status {
    display: block;
    color: var(--color-primary);
    font-size: 0.6875rem;
}

.uk-network-map-marker-label-count {
    display: block;
    color: var(--color-primary-light);
    font-size: 0.6875rem;
}

/* ============================================
   Stats overlay — bottom-center glassmorphism strip
   ============================================
   Sits on top of the map; the gradient bg pulls a deeper opaque
   surface so the stats stay readable over the dotted-map texture.
   ============================================ */
.uk-network-map-stats {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 20;
    display: flex;
    gap: var(--space-2xl);
    padding: var(--space-lg) var(--space-2xl);
    background: linear-gradient(
        135deg,
        rgba(18, 24, 32, 0.96) 0%,
        rgba(15, 22, 30, 0.96) 100%
    );
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transform: translateX(-50%);
}

.uk-network-map-stat {
    text-align: center;
}

.uk-network-map-stat-value {
    color: var(--color-primary);
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.uk-network-map-stat-label {
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .uk-network-map-stats {
        gap: var(--space-md);
        padding: var(--space-md) var(--space-lg);
    }

    .uk-network-map-stat-value {
        font-size: var(--font-xl);
    }
}