/* SPH Networks Directory UI
   Aligned with SPH Portal tone (teal / coral / neutral)
*/

#sph-networks-directory {
    --sph-teal: #1F8A8A;
    --sph-coral: #FF6F4E;
    --sph-black: #0f0f10;
    --sph-white: #ffffff;

    --sph-bg: #ffffff;
    --sph-border: rgba(15, 15, 16, .10);
    --sph-muted: rgba(15, 15, 16, .60);
    --sph-soft: rgba(31, 138, 138, .08);
    --sph-soft-2: rgba(255, 111, 78, .08);

    --sph-radius: 16px;
    --sph-shadow: 0 8px 24px rgba(0, 0, 0, .04);

    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--sph-black);
}

#sph-networks-directory,
#sph-networks-directory * {
    box-sizing: border-box;
}

#sph-networks-directory.sph-nd {
    background: var(--sph-bg);
    border: 1px solid var(--sph-border);
    border-radius: var(--sph-radius);
    padding: 14px;
    margin-top: 10px;
    transition: opacity .18s ease;
}

#sph-networks-directory.is-loading {
    opacity: .96;
}

/* Top chips */
#sph-networks-directory .sph-nd__top {
    margin-bottom: 12px;
}

#sph-networks-directory .sph-nd__types {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

#sph-networks-directory .sph-nd-chip {
    appearance: none;
    border: 1px solid var(--sph-border);
    background: var(--sph-white);
    color: var(--sph-black);
    border-radius: 999px;
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: .15s ease;
}

#sph-networks-directory .sph-nd-chip:hover {
    border-color: rgba(31, 138, 138, .35);
    box-shadow: 0 8px 18px rgba(31, 138, 138, .10);
    transform: translateY(-1px);
}

#sph-networks-directory .sph-nd-chip.is-active {
    background: var(--sph-soft);
    border-color: rgba(31, 138, 138, .45);
    color: var(--sph-coral);
}

/* Layout */
#sph-networks-directory .sph-nd__layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 14px;
}

/* Sidebar filter card */
#sph-networks-directory .sph-nd-card {
    background: var(--sph-white);
    border: 1px solid var(--sph-border);
    border-radius: var(--sph-radius);
    box-shadow: var(--sph-shadow);
    padding: 14px;
    position: sticky;
    top: 18px;
}

#sph-networks-directory .sph-nd-card__title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.2px;
}

#sph-networks-directory .sph-nd-field {
    margin-bottom: 12px;
}

#sph-networks-directory .sph-nd-field label {
    display: block;
    font-size: 12px;
    color: var(--sph-muted);
    margin-bottom: 6px;
}

#sph-networks-directory .sph-nd-input,
#sph-networks-directory .sph-nd-select {
    width: 100%;
    height: 42px;
    border: 1px solid var(--sph-border);
    border-radius: 14px;
    padding: 0 12px;
    background: #fff;
    color: var(--sph-black);
    outline: none;
    transition: .15s ease;
}

#sph-networks-directory .sph-nd-input:focus,
#sph-networks-directory .sph-nd-select:focus {
    border-color: rgba(31, 138, 138, .55);
    box-shadow: 0 0 0 4px rgba(31, 138, 138, .12);
}

#sph-networks-directory .sph-nd-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#sph-networks-directory .sph-nd-seg button {
    border: 1px solid var(--sph-border);
    background: #fff;
    border-radius: 12px;
    height: 36px;
    padding: 0 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: .15s ease;
}

#sph-networks-directory .sph-nd-seg button:hover {
    border-color: rgba(31, 138, 138, .35);
}

#sph-networks-directory .sph-nd-seg button.is-active {
    background: var(--sph-soft);
    border-color: rgba(31, 138, 138, .45);
    color: var(--sph-coral);
}

#sph-networks-directory .sph-nd-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

#sph-networks-directory .sph-btn {
    border: 1px solid var(--sph-border);
    border-radius: 14px;
    height: 40px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: .15s ease;
}

#sph-networks-directory .sph-btn--primary {
    background: var(--sph-teal);
    border-color: var(--sph-teal);
    color: #fff;
}

#sph-networks-directory .sph-btn--primary:hover {
    filter: brightness(.96);
}

#sph-networks-directory .sph-btn--ghost {
    background: rgba(15, 15, 16, .03);
    color: var(--sph-black);
}

#sph-networks-directory .sph-btn--ghost:hover {
    border-color: rgba(255, 111, 78, .35);
    box-shadow: 0 8px 18px rgba(255, 111, 78, .10);
}

/* Main panel */
#sph-networks-directory .sph-nd__main {
    min-width: 0;
}

#sph-networks-directory .sph-nd__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--sph-border);
    border-radius: 14px;
    padding: 10px 12px;
}

#sph-networks-directory [data-role="count"] {
    font-size: 12px;
    color: var(--sph-muted);
    font-weight: 700;
}

#sph-networks-directory .sph-nd__sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#sph-networks-directory .sph-nd__sort label {
    font-size: 12px;
    color: var(--sph-muted);
    white-space: nowrap;
}

/* Cards grid */
#sph-networks-directory .sph-nd__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#sph-networks-directory .sph-nd-item {
    background: #fff;
    border: 1px solid var(--sph-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--sph-shadow);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#sph-networks-directory .sph-nd-item__media {
    display: block;
    aspect-ratio: 16 / 10;
    background: rgba(31, 138, 138, .08);
}

#sph-networks-directory .sph-nd-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#sph-networks-directory .sph-nd-item__ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 900;
    color: var(--sph-teal);
}

#sph-networks-directory .sph-nd-item__body {
    padding: 12px;
}

#sph-networks-directory .sph-nd-item__top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
}

#sph-networks-directory .sph-nd-item__name {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
}

#sph-networks-directory .sph-nd-item__name a {
    color: var(--sph-black);
    text-decoration: none;
}

#sph-networks-directory .sph-nd-item__name a:hover {
    color: var(--sph-teal);
}

#sph-networks-directory .sph-nd-badge {
    background: var(--sph-soft);
    color: #0f2f2f;
    border: 1px solid rgba(31, 138, 138, .22);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    font-weight: 700;
}

#sph-networks-directory .sph-nd-item__headline {
    margin-top: 4px;
    min-height: 20px;
    font-size: 12px;
    color: var(--sph-muted);
    line-height: 1.7;
}

#sph-networks-directory .sph-nd-item__meta {
    margin-top: 7px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    color: rgba(15, 15, 16, .75);
    font-size: 12px;
}

#sph-networks-directory .sph-nd-tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#sph-networks-directory .sph-nd-tags span {
    border: 1px solid rgba(15, 15, 16, .12);
    background: rgba(15, 15, 16, .03);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 700;
}

/* Loading / Empty */
#sph-networks-directory .sph-nd-loading,
#sph-networks-directory .sph-nd-empty {
    grid-column: 1 / -1;
    border: 1px dashed rgba(15, 15, 16, .18);
    background: #fff;
    border-radius: 16px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--sph-muted);
    padding: 12px;
}

/* Pagination */
#sph-networks-directory .sph-nd__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

#sph-networks-directory .sph-nd__pagination button {
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--sph-border);
    background: #fff;
    color: var(--sph-black);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: .15s ease;
}

#sph-networks-directory .sph-nd__pagination button:hover:not(:disabled) {
    border-color: rgba(31, 138, 138, .35);
    box-shadow: 0 8px 18px rgba(31, 138, 138, .10);
}

#sph-networks-directory .sph-nd__pagination button.is-active {
    background: var(--sph-teal);
    border-color: var(--sph-teal);
    color: #fff;
}

#sph-networks-directory .sph-nd__pagination button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

#sph-networks-directory .sph-nd__dots {
    font-size: 13px;
    color: var(--sph-muted);
    padding: 0 2px;
}

/* Responsive */
@media (max-width: 1180px) {
    #sph-networks-directory .sph-nd__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    #sph-networks-directory .sph-nd__layout {
        grid-template-columns: 1fr;
    }

    #sph-networks-directory .sph-nd-card {
        position: static;
    }

    #sph-networks-directory .sph-nd__types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #sph-networks-directory.sph-nd {
        padding: 10px;
        border-radius: 14px;
    }

    #sph-networks-directory .sph-nd__types {
        grid-template-columns: 1fr;
    }

    #sph-networks-directory .sph-nd__grid {
        grid-template-columns: 1fr;
    }

    #sph-networks-directory .sph-nd__meta {
        flex-direction: column;
        align-items: stretch;
    }

    #sph-networks-directory .sph-nd-actions {
        flex-direction: column;
    }

    #sph-networks-directory .sph-btn {
        width: 100%;
    }
}