/* ==========================================================================
   Shared ProImpact application-hub design
   ========================================================================== */

:root {
    --hub-navy-950: #071525;
    --hub-navy-900: #0a1d33;
    --hub-navy-800: #102b48;

    --hub-blue-600: #0878f9;
    --hub-blue-500: #1788ff;
    --hub-blue-100: #eaf4ff;

    --hub-green-600: #159954;
    --hub-green-500: #48d782;
    --hub-green-100: #e9faef;

    --hub-surface: #ffffff;
    --hub-page-background: #f3f7fc;
    --hub-border: #dce6f2;

    --hub-text: #10233d;
    --hub-text-soft: #52657d;
    --hub-text-muted: #718198;

    --hub-shadow:
        0 18px 45px rgba(19, 48, 84, 0.09),
        0 3px 10px rgba(19, 48, 84, 0.05);

    --hub-shadow-hover:
        0 24px 55px rgba(19, 48, 84, 0.16),
        0 8px 20px rgba(19, 48, 84, 0.09);

    --hub-radius-large: 24px;
    --hub-radius-card: 22px;
    --hub-radius-control: 10px;
}


/* ==========================================================================
   Page shell
   ========================================================================== */

.hub-page {
    position: relative;
    min-height: calc(100vh - 44px);
    overflow-x: hidden;
    color: var(--hub-text);
    background: var(--hub-page-background);
}

.hub-container {
    position: relative;
    z-index: 3;
    width: min(1360px, calc(100% - 64px));
    margin: 0 auto;
}


/* ==========================================================================
   Hero
   ========================================================================== */

.hub-hero {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    padding: 50px 0 88px;
    color: #ffffff;
    background:
        linear-gradient(
            90deg,
            rgba(5, 20, 36, 1) 0%,
            rgba(6, 27, 48, 0.97) 42%,
            rgba(6, 38, 65, 0.82) 100%
        );
}

.hub-hero-visual {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    opacity: 0.96;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.42) 18%,
        #000 43%,
        #000 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.42) 18%,
        #000 43%,
        #000 100%
    );
}

.hub-page--datahub .hub-hero-visual {
    background-image:
        linear-gradient(
            rgba(3, 25, 45, 0.08),
            rgba(3, 25, 45, 0.08)
        ),
        url("/assets/shared/datahub_hero.webp");
}

.hub-page--plugins .hub-hero-visual {
    background-image:
        linear-gradient(
            rgba(3, 32, 31, 0.08),
            rgba(3, 32, 31, 0.08)
        ),
        url("/assets/shared/plugins_hero.webp");
}

.hub-hero::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.18;
    background-image:
        linear-gradient(
            rgba(52, 166, 255, 0.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(52, 166, 255, 0.18) 1px,
            transparent 1px
        );
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 35%,
        #000 62%,
        #000 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 35%,
        #000 62%,
        #000 100%
    );
    content: "";
    pointer-events: none;
}


/* ==========================================================================
   Hero typography
   ========================================================================== */

.hub-eyebrow {
    margin: 0 0 12px;
    color: #258fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hub-title {
    max-width: 720px;
    margin: 0;
    font-size: clamp(3rem, 5.2vw, 4.7rem);
    font-weight: 820;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.hub-title-accent {
    color: #087cff;
}

.hub-description {
    max-width: 700px;
    margin: 24px 0 0;
    color: rgba(239, 247, 255, 0.84);
    font-size: 1rem;
    line-height: 1.72;
}

.hub-description strong {
    color: #ffffff;
}

.hub-page--plugins .hub-eyebrow,
.hub-page--plugins .hub-title-accent {
    color: var(--hub-green-500);
}


/* ==========================================================================
   Filter controls
   ========================================================================== */

.hub-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.hub-filter-button {
    min-height: 43px;
    padding: 0 18px;
    border: 1px solid rgba(40, 157, 255, 0.52);
    border-radius: var(--hub-radius-control);
    color: #71bdff;
    background: rgba(6, 32, 57, 0.74);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 160ms ease,
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease;
}

.hub-filter-button:hover,
.hub-filter-button:focus-visible {
    border-color: #64baff;
    color: #ffffff;
    background: rgba(9, 78, 126, 0.86);
    transform: translateY(-2px);
}

.hub-page--plugins .hub-filter-button {
    border-color: rgba(72, 215, 130, 0.42);
    color: #7ee6a7;
}

.hub-page--plugins .hub-filter-button:hover,
.hub-page--plugins .hub-filter-button:focus-visible {
    border-color: #65e596;
    background: rgba(26, 99, 74, 0.72);
}


/* ==========================================================================
   Content and grid
   ========================================================================== */

.hub-content {
    position: relative;
    z-index: 5;
    margin-top: -56px;
    padding-bottom: 76px;
}

.hub-page .tile-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
}


/* ==========================================================================
   Application tiles
   ========================================================================== */

.hub-page .tile-card {
    position: relative;
    display: grid;
    grid-template-columns: 44% 56%;
    min-width: 0;
    min-height: 285px;
    overflow: hidden;
    border: 1px solid rgba(193, 216, 239, 0.92);
    border-radius: var(--hub-radius-card);
    background: #ffffff;
    box-shadow:
        0 16px 38px rgba(27, 65, 108, 0.09),
        0 3px 9px rgba(27, 65, 108, 0.04);
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.hub-page .tile-card:hover {
    border-color: rgba(67, 151, 235, 0.54);
    box-shadow:
        0 24px 52px rgba(23, 67, 116, 0.15),
        0 7px 18px rgba(23, 67, 116, 0.07);
    transform: translateY(-4px);
}


/* --------------------------------------------------------------------------
   Image panel
   -------------------------------------------------------------------------- */

.hub-page .tile-card-image-wrap {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: stretch;
    justify-content: stretch;
    padding: 10px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #eef7ff 0%,
            #f7fbff 54%,
            #edf4fb 100%
        );
}


.hub-page .tile-card-image {
    display: block;
    width: 100%;
    height: 250px;
    margin: 0;
    border-radius: 18px;
    transition:
        transform 220ms ease,
        filter 220ms ease;
}

/* Preserve complete diagrams and logos. */
.hub-page .tile-card-image--contain {
    object-fit: contain;
}

/* Fill the visual panel with illustrated artwork. */
.hub-page .tile-card-image--cover {
    object-fit: cover;
    object-position: center;
    transform: scale(0.97);
}

.hub-page .tile-card:hover .tile-card-image {
    filter: saturate(1.04);
    transform: scale(1.025);
}


/* --------------------------------------------------------------------------
   Content panel
   -------------------------------------------------------------------------- */

.hub-page .tile-card-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    padding: 25px 22px 19px;
}

.hub-page .tile-card-main {
    min-width: 0;
}

.hub-page .tile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.hub-page .tile-title {
    margin: 0;
    overflow: visible;
    color: #102b4d;
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.015em;
    white-space: normal;
    text-overflow: initial;
}

.hub-page .help-icon {
    display: inline-flex;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 1px solid #c7d8ea;
    border-radius: 9px;
    color: #15416f;
    background: #f8fbff;
    font-size: 0.92rem;
    cursor: pointer;
    transition:
        transform 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        background 160ms ease;
}

.hub-page .help-icon:hover,
.hub-page .help-icon:focus-visible {
    border-color: #258cf5;
    color: #0876e8;
    background: #eaf4ff;
    transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   Description and tags
   -------------------------------------------------------------------------- */

.hub-page .tile-description {
    margin: 13px 0 15px;
    color: #5a6f88;
    font-size: 0.8rem;
    line-height: 1.55;
}

.hub-page .tile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.hub-page .tile-tag {
    margin: 0;
    padding: 5px 9px;
    border: 1px solid #d9e5f1;
    border-radius: 999px;
    color: #365574;
    background: #eef4fa;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
}


/* --------------------------------------------------------------------------
   Primary action
   -------------------------------------------------------------------------- */

.hub-page .tile-btn {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 0 16px;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #0a7df5,
        #0868da
    );
    box-shadow:
        0 7px 17px rgba(8, 117, 235, 0.22);
    font-size: 0.78rem;
    font-weight: 750;
    text-decoration: none;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.hub-page .tile-btn::after {
    content: "→";
    font-size: 1rem;
}

.hub-page .tile-btn:hover,
.hub-page .tile-btn:focus-visible {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #188cff,
        #0872eb
    );
    box-shadow:
        0 10px 22px rgba(8, 117, 235, 0.3);
    transform: translateY(-1px);
}

.hub-page--plugins .tile-btn {
    background: linear-gradient(
        135deg,
        #20ad61,
        #14864a
    );
}

.hub-page--plugins .tile-btn:hover,
.hub-page--plugins .tile-btn:focus-visible {
    background: linear-gradient(
        135deg,
        #2abe6e,
        #159755
    );
}


/* ==========================================================================
   Help modal
   ========================================================================== */

.hub-page .modal-overlay {
    position: fixed;
    z-index: 3000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 15, 29, 0.76);
    backdrop-filter: blur(9px);
}

.hub-page .modal-overlay.active {
    display: flex;
}

.hub-page .modal-content {
    position: relative;
    width: min(920px, 100%);
    max-height: min(820px, 90vh);
    overflow-y: auto;
    padding: 34px;
    border: 1px solid rgba(218, 229, 242, 0.9);
    border-radius: var(--hub-radius-large);
    background: #ffffff;
    box-shadow: 0 30px 90px rgba(2, 14, 29, 0.36);
}

.hub-page .modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d3deeb;
    border-radius: 10px;
    color: #324967;
    background: #f6f9fd;
    font-size: 1.35rem;
    cursor: pointer;
}

.hub-page .modal-content h2 {
    margin: 0 48px 24px 0;
    color: var(--hub-text);
    font-size: 1.65rem;
}

.hub-page .modal-image {
    display: block;
    width: 100%;
    max-height: 340px;
    margin-bottom: 24px;
    border-radius: 14px;
    object-fit: contain;
    background: #f3f7fb;
}


/* ==========================================================================
   Plugin-specific region selector
   ========================================================================== */

.map-selector-wrapper {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto 72px;
    padding: 26px;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius-large);
    background: #ffffff;
    box-shadow: var(--hub-shadow);
}

.map-selector-title {
    margin: 0 0 18px;
    color: var(--hub-text);
    font-size: 1.35rem;
}

.map-selector-frame {
    display: block;
    width: 100%;
    min-height: 700px;
    border: 0;
    border-radius: 15px;
    background: #f4f7fb;
}

.hub-filter-button {
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.hub-filter-button:hover {
    transform: translateY(-1px);
}

.hub-filter-button--active {
    color: #ffffff;
    background-color: #2463a9;
    border-color: #2463a9;
    box-shadow: 0 4px 12px rgba(36, 99, 169, 0.22);
}

.hub-tile-wrapper {
    min-width: 0;
}
/* ==========================================================================
   Responsive behavior
   ========================================================================== */

@media (max-width: 1180px) {
    .hub-hero-visual {
        width: 66%;
        opacity: 0.72;
    }

    .hub-page .tile-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .hub-container,
    .map-selector-wrapper {
        width: min(100% - 28px, 1360px);
    }

    .hub-hero {
        min-height: 0;
        padding: 44px 0 84px;
    }

    .hub-hero-visual {
        right: -30%;
        width: 110%;
        opacity: 0.34;
    }

    .hub-page .tile-container {
        grid-template-columns: 1fr;
    }

    .hub-page .tile-card {
        grid-template-columns: 1fr;
    }

    .hub-page .tile-card-image {
        height: 225px;
    }

    .hub-page .tile-card-content {
        min-height: 215px;
    }
}

@media (max-width: 480px) {
    .hub-filter-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hub-filter-button {
        width: 100%;
    }

    .hub-content {
        margin-top: -48px;
    }

    .hub-page .modal-content {
        padding: 25px 19px;
    }
}