@import "../../node_modules/@patternfly/react-styles/css/components/Alert/alert.css";
@import "../../node_modules/@patternfly/patternfly/components/Button/button.css";
@import "../../node_modules/@patternfly/patternfly/components/Page/page.css";
@import "../../node_modules/@patternfly/patternfly/components/Breadcrumb/breadcrumb.css";
@import "../../node_modules/@patternfly/patternfly/layouts/Gallery/gallery.css";
@import "../../node_modules/@patternfly/patternfly/components/Card/card.css";
@import "../../node_modules/@patternfly/patternfly/components/Table/table.css";
@import "../../node_modules/@patternfly/patternfly/components/Table/table-grid.css";
@import "../../node_modules/@patternfly/patternfly/components/Toolbar/toolbar.css";

/* The following are needed for the Modal */
@import "../../node_modules/@patternfly/patternfly/components/Backdrop/backdrop.css";
@import "../../node_modules/@patternfly/patternfly/layouts/Bullseye/bullseye.css";
@import "../../node_modules/@patternfly/patternfly/components/ModalBox/modal-box.css";

// Pull in variables (especially for breakpoints)
@import "_global-variables.scss";

@import "../lib/ct-card.scss";

#network-page {
    .pf-c-card {
        @extend .ct-card;
    }
}

#networking, #network-interface {
    .pf-l-gallery {
        --pf-l-gallery--GridTemplateColumns: 1fr;
    }
}

// Add space before the firewall switch in the Overview and Firewall pages
.networking-firewall-switch {
    margin-left: var(--pf-global--spacer--md);
}

// General networking page overview
.network-page {
    .cockpit-log-panel {
        max-width: 100vw;
    }
}

#network-interface {
    @at-root {
        #network-interface-name {
            font-weight: var(--pf-c-card__title--FontWeight);
        }

        .network-interface-status > span {
            overflow-wrap: anywhere;
        }
    }
}

.ipv4-address {
    display: inline;

    input {
        width: 2em;
        background: none;
        border: none;
        text-align: center;
    }
}

.network-number-field {
    width: 4em;
}

.network-ip-settings-row {
    border-bottom: 1px solid lightgray;
    padding-bottom: 10px;

    &:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }

    table {
        margin-top: 20px;
    }

    tr {
        background: #F4F4F4;
        border: 1px solid #BABABA;

        td {
            padding: 4px;
        }
    }

    .pf-m-secondary {
        margin-right: 5px;
    }

    tr td .pf-m-secondary {
        margin-right: 4px;
    }
}

.network-graph {
    height: 180px;
}

.pf-c-page__main-breadcrumb + .networking-graphs {
    // Remove the top padding when following a breadcrumb
    padding-top: 0;
}

// Constrain widths of networking headers (on both the main page and in network-interface-members)
th {
    &.networking-speed {
        width: 20%;
    }

    &.networking-spacer {
        width: var(--pf-global--spacer--4xl);
    }

    &.networking-action {
        width: var(--pf-global--spacer--3xl);
    }
}

.network-interface-details {
    &-title {
        display: grid;
        grid-auto-flow: column;
        grid-gap: var(--pf-global--spacer--md);
    }

    &-delete {
        margin-right: var(--pf-global--spacer--lg);
    }

    // Seems to be used for the "general" checkbox
    .networking-controls {
        label {
            font-weight: inherit;
        }

        input {
            margin-left: 0px;
        }
    }
}

#networking-interfaces, #networking-unmanaged-interfaces {
    th[data-label=Name] button {
        font-weight: var(--pf-global--FontWeight--bold);

        // Expand the link to the container, for easier clickability
        display: block;
        text-align: left;
    }
}

.network-interface-members {
    .pf-c-switch {
        margin-right: var(--pf-global--spacer--md);
    }
    .pf-c-table > tbody > tr > td:last-child {
        text-align: right;
        --pf-c-table--cell--Width: 10%;
    }
}

// If the button is not the first item in the DescriptionListDescription all left padding
.network-interface-settings dd .pf-c-description-list__text button:not(:first-child) {
    padding-left: var(--pf-global--spacer--md);
}

// IPv4 / IPv6 settings
#network-ip-settings-dialog {
    @at-root {
        // Used in IPv4 / IPv6 automatic to manual selections
        .inverted-switchbox {
            margin-right: var(--pf-global--spacer--md);
        }

        .network-ip-settings-row {
            border-bottom: 1px solid lightgray;
            padding-bottom: 10px;

            &:last-of-type {
                border-bottom: none;
                padding-bottom: 0;
            }

            .pf-m-secondary {
                margin-right: 5px;
            }

            table {
                margin-top: 20px;
            }

            tr {
                background: #F4F4F4;
                border: 1px solid #BABABA;
            }

            td {
                padding: 4px;
                text-align: right;
                padding-right: 0;

                &:last-child {
                    width: 28px;
                }

                .pf-m-secondary {
                    margin-right: 4px;
                }
            }
        }
    }
}

#network-mtu-settings {
    &-dialog label {
        input[type=radio] {
            position: relative;
            top: 3px;
            margin-right: 0.5em;
        }
    }

    &-input {
        margin-left: 0.5em;
        width: 5em;
        display: inline;
    }
}

#network-mtu-settings-dialog label,
#network-mac-settings-dialog label {
    font-weight: normal;
}

// Temporary curtain to hide the conten as it loads
#testing-connection-curtain {
    z-index: 2000;
}

#confirm-breaking-change-popup .pficon-warning-triangle-o {
    float: left;
    font-size: 36px;
    margin-top: 6px;
    margin-right: 20px;
}

// Some old PF3 dialogs are still in use within the networking page
.modal {
    @at-root {
        .modal-title {
            display: inline-block;
            background: pink;
            color: red;
        }

        .modal-header {
            button {
                margin-left: 10px;
                background: pink;
                color: red;
            }

            i.fa {
                margin-right: 2px;
                background: pink;
                color: red;
            }
        }
    }
}

// Handle form error state highlighting
// This is done natively by PF4, but this is specifically for widgets on the networking page
// (Can be removed once ported to PF4)
.form-control.error {
    border-color: #cc0000;

    &:hover {
        border-color: #990000;
    }

    &:focus {
        border-color: #990000;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff3333;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff3333;
    }
}

// Adjust the "learn more" link in the dialog help link (for bond settings)
.pf-c-modal-box__header-help .popover-content > a {
    display: block;
    padding: var(--pf-global--spacer--md) 0 var(--pf-global--spacer--sm);

    > .fa {
        margin-right: var(--pf-global--spacer--sm);
    }
}

/********** Firewall section **********/

#add-services-dialog {
    .dialog-list-ct {
        height: 100vh;

        /* Constrain the list to a maximum size of the viewport height - UI chrome */
        max-height: calc(100vh - 30rem);
        min-height: 13em;

        @media screen and (min-width: 640px) {
            /* Add a bit more padding in desktop mode */

            max-height: calc(100vh - 40rem);
        }
    }

    .service-list {
        max-height: 13rem;
        overflow-y: auto;
    }

    .service-list-item-heading {
        font-size: 1.2em;
        margin: 0;
    }

    .service-list-item-text {
        display: flex;
        flex-wrap: wrap;
    }

    .service-ports {
        opacity: 0.75;

        &:first-of-type {
            margin-right: 1em;
        }
    }

    .add-services-dialog-type {
        display: flex;
    }

    .has-error {
        animation: 300ms error-slide-down ease-in-out;
        color: #c00;
        padding: 0;

        &:empty {
            display: none;
        }
    }
}

#firewall {
    height: 100%;

    .ct-table tbody tr:first-of-type td:nth-child(2) {
        font-weight: var(--pf-global--FontWeight--bold);
    }
}

.firewall-heading,
.networking-graphs {
    background: var(--pf-global--palette--white);
}

.firewall-heading {
    &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0;

        &-group {
            display: flex;
            align-items: center;
        }
    }
}

.zone-section {
    background: var(--pf-global--palette--white);
    border-top: 1px solid var(--ct-color-border-default);
    border-left: 1px solid var(--ct-color-border-default);
    border-right: 1px solid var(--ct-color-border-default);
    margin: 0 0 2rem 0;
    box-shadow: var(--pf-global--BoxShadow--sm);

   > .ct-listing {
        margin-top: 0;
    }
}

.zone-section-heading {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ct-color-border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zone-section-buttons {
    display: inline-flex;
    align-content: center;

    > button {
        margin-left: 2px;
    }
}

.zone-section-targets {
    display: inline-flex;
}

.zone-section-target {
    padding-left: 1rem;
}

.zone-section-heading h4 {
    display: inline-flex;
    padding-right: 1rem;
    font-weight: bold;
}

#delete-confirmation-dialog {
    .fa-exclamation-triangle {
        color: var(--pf-global--warning-color--100);
        font-size: 300%;
        margin-right: 1rem;
    }

    .delete-confirmation-body {
        display: flex;
    }
}

#add-zone-dialog legend {
    color: var(--ct-color-subtle-copy);
    font-size: var(--pf-global--FontSize--sm);
}

.add-zone-zones legend {
    line-height: 3;
}

#add-zone-dialog .add-zone-zones .pf-c-radio__label {
    text-transform: capitalize;
}

/* Move firewalld zones higher in z-index (so lines can go behind) */
.add-zone-zones-firewalld {
    input {
        position: relative;
        z-index: 2;
        width: 16px;
        height: 16px;
    }

    > label {
        /* FIXME: Add lines behind the radio buttons */
        &::after {
            border-bottom: 1px solid #d1d1d1;
            content: "";
        }

        /* Start line at the midpoint for the first radio */
        &:first-of-type::after {
            left: 50%;
        }

        /* End line at the midpoint for the last radio */
        &:last-of-type::after {
            right: 50%;
        }
    }
}

/* Display labels bellow buttons */
.add-zone-zones-firewalld, .add-zone-zones-custom {
   > label.radio {
        display: inline-flex;
    }
}

#add-zone-description-readonly {
    padding: 0.5rem 0 0;
    color: var(--ct-color-subtle-copy);
}

#add-zone-services-readonly legend {
    padding: 0;
    line-height: 1;
}

// Animation for Firewall's add service dialog,
// as a sudden transition would be (otherwise) too jarring
@keyframes error-slide-down {
    0% {
        line-height: 0;
        height: 0;
        opacity: 0;
        overflow: hidden;
    }

    100% {
        line-height: inherit;
        height: auto;
        opacity: 1;
    }
}

/* End Firewall specific CSS */