/* Styling for DataGrid/GridView/Table. */
/* Overrides style.css, gridview.css, and depends on cnd.css. */

/*
    Note that some styles in here are close duplicates, 
    which was intentional to keep things simple.
*/

/*
    DataGrid
*/

/* Remove the outer border from tables. */
.dg {
    border: none !important;
}

    .dg th {
        background-color: var(--cnd-gray-medium);
        color: var(--cnd-white);
        /* Add a separator between the column names and rows (must match row background-color). */
        border-bottom: 1.5px solid white;
        padding: 0.5rem 0.25rem !important;
    }

    /* Make lines in tables lighter (for those that need GridLines="..."). */
    .dg td {
        border-color: var(--cnd-gray-accent);
        padding: 0.25rem;
    }

    /* Restyle alternating rows. */
    .dg .dgrow,
    .dg .dgsubdealerrow {
        background-color: var(--cnd-gray-accent);
    }

    .dg .dgaltrow,
    .dg .dgaltsubdealerrow {
        background-color: var(--cnd-white);
    }

    /* And the hover effect. */
    .dg .dgselectrow,
    .dg .dgsubdealerselectrow {
        background-color: var(--cnd-gray-medium);
        color: var(--cnd-white);
    }

/* Make the pager (bottom) white. */
.PagerStyle {
    background-color: #fff;
}

    /* and remove its borders. */
    .PagerStyle td {
        border: none;
    }

    /* Adjust spacing between buttons */
    .PagerStyle table td {
        padding: calc(var(--cnd-space-sm) / 2);
    }

    /* Make the pager buttons round. */
    .PagerStyle a {
        color: var(--cnd-gray-medium);
        border: 1.5px solid var(--cnd-gray-light);
        font-weight: 700;
        padding: 0;
        width: 1.7rem;
        height: 1.7rem;
        line-height: 1.7rem;
        border-radius: 2em;
        display: inline-block;
        text-align: center;
    }

        .PagerStyle a:hover {
            background-color: var(--cnd-gray-light);
            color: var(--cnd-gray-dark);
        }

        /* Add a dark circle for the selected page. */
        .PagerStyle span,
        .PagerStyle a.current,
        .PagerStyle a[aria-current="page"] {
            pointer-events: none;
            color: #fff;
            background-color: var(--cnd-gray-medium);
            border: 1.5px solid var(--cnd-gray-medium);
            padding: 0;
            width: 1.7rem;
            height: 1.7rem;
            line-height: 1.7rem;
            border-radius: 2em;
            display: inline-block;
            text-align: center;
        }

/* 
    DataGrid icons (buttons)
    (use https://tabler.io/icons, and store as Branding/icons/*.svg)
    (note: asp:ImageButton renders as <input type="image">, not <img>)
*/
.dg input[type="image"][src*="images/Branding/"][src*=".svg"] {
    width: 18px;
    height: 100%;
    vertical-align: middle;
    /* Increase mouse target area (swap margins with padding) */
    padding: 0.25rem;
    margin: 0;
    /* Balance the icons better with the Museo font */
    filter: opacity(0.75);
}

/* Remove cell padding consistently, to further optimize mouse target area */
.dg td:has(input[type="image"][src*="images/Branding/"][src*=".svg"]),
.dg td:has(img[src*="images/Branding/"][src*=".svg"]) {
    padding: 0;
}

/* Make the icons white when hovered */
.dg .dgselectrow input[type="image"][src*="images/Branding/"][src*=".svg"]:hover,
.dg .dgsubdealerselectrow input[type="image"][src*="images/Branding/"][src*=".svg"]:hover {
    filter: invert();
}

/*
    Some GridView-based tables (i.e. on Overview) use JavaScript to add classes to rows being hovered.
    This styling is meant to add the above styling via a class to other tables as well.
*/
table.dg.cnd-add-hover tr:not(.PagerStyle):not(.PagerStyle tr):hover {
    background-color: var(--cnd-gray-medium) !important;
    color: var(--cnd-white);
}

/* Make clickable icons white when hovered */
table.dg input[type="image"][src*="images/Branding/"][src*=".svg"]:hover {
    filter: invert();
}

/*
    GridView
*/

.gv {
    background: #fff;
}

    /* Override hover colors in table rows */
    .gv tr:not(.gvPager):hover {
        background-color: var(--cnd-gray-medium) !important;
        color: var(--cnd-white);
    }

    /* and in pager buttons. */
    .gv .gvPager tr:hover {
        background-color: unset!important;
    }

    .gv th {
        background-color: var(--cnd-gray-medium);
        color: var(--cnd-white);
        /* Add a separator between the column names and rows (must match row background-color). */
        border-bottom: 1.5px solid white;
        padding: 0.5rem 0.25rem !important;
        /* Override default browser bold (more consistent across platforms). */
        font-weight: var(--cnd-weight-bold);
    }

    .gv td {
        background-color: transparent;
        padding: 0.25rem;
    }

    .gv .dgrow,
    .gv tr:nth-child(even) {
        background-color: var(--cnd-gray-accent);
    }

    .gv .dgaltrow,
    .gv tr:nth-child(odd) {
        background-color: var(--cnd-white);
    }

    .gv tr {
        border: none !important;
    }

    .gv .noPrice {
        background-color: color-mix(in srgb, var(--cnd-red) 75%, white) !important;
        font-weight: unset;
    }

/* Make the pager (bottom) white. */
.gvPager {
    background-color: #fff !important;
}

    /* and remove its borders. */
    .gvPager td {
        border: none !important;
    }

    /* Adjust spacing between buttons */
    .gvPager table td {
        padding: calc(var(--cnd-space-sm) / 2) !important;
    }

    /* Make the pager buttons round. */
    .gvPager a {
        padding: unset !important;
        color: var(--cnd-gray-medium);
        border: 1.5px solid var(--cnd-gray-light) !important;
        font-weight: 700;
        padding: 0;
        width: 1.7rem;
        height: 1.7rem;
        line-height: 1.7rem;
        border-radius: 2em;
        display: inline-block;
        text-align: center;
    }

        .gvPager a:hover {
            background-color: var(--cnd-gray-light);
            color: var(--cnd-gray-dark);
        }

/* Remove hover effect inside the pager */
.gv .gvPager table tr:hover {
    background: unset;
}

 /* Add a dark circle for the selected page. */
.gvPager span,
.gvPager a.current,
.gvPager a[aria-current="page"] {
    padding: unset !important;
    pointer-events: none;
    color: #fff;
    background-color: var(--cnd-gray-medium);
    border: 1.5px solid var(--cnd-gray-medium) !important;
    padding: 0;
    width: 1.7rem;
    height: 1.7rem;
    line-height: 1.7rem;
    border-radius: 2em;
    display: inline-block;
    text-align: center;
}

/*
    Calculation tables
*/

/* Remove the border (making it transparent is the easiest re-style way). */
.dgCalc table,
.dgCalc th,
.dgCalc td {
    border-color: transparent;
}

/* 
    GridView buttons and images
    (use https://tabler.io/icons, and store as Branding/.../*.svg)
*/
.gv input[type="image"][src*="images/Branding/"][src*=".svg"],
.gv img[src*="images/Branding/"][src*=".svg"] {
    width: 18px !important;
    height: 100% !important;
    vertical-align: middle;
    /* Increase mouse target area (swap margins with padding) */
    padding: 0.25rem;
    margin: 0;
    /* Balance the icons better with the Museo font */
    filter: opacity(0.75);
}

/* Remove cell padding consistently, to further optimize mouse target area */
.gv td:has(input[type="image"][src*="images/Branding/"][src*=".svg"]),
.gv td:has(img[src*="images/Branding/"][src*=".svg"]) {
    padding: 0;
}

/* Make clickable icons white when hovered */
.gv input[type="image"][src*="images/Branding/"][src*=".svg"]:hover,
.gv a img[src*="images/Branding/"][src*=".svg"]:hover {
    filter: invert();
}

/* Add a proper yellow when editing a row */
.gveditrow {
    background: var(--cnd-yellow) !important;
}

/* Change the yellow to green/blue when editing parts/comments. */
body.auth-int:has(.tab-activeIndustrial),
body.auth-ext:has(.tab-activeIndustrial) {
    .gv tr.gveditrow {
        background: color-mix(in srgb, var(--cnd-green) 25%, transparent) !important;
    }
}

body.auth-int:has(.tab-activeResidential),
body.auth-ext:has(.tab-activeResidential) {
    .gv tr.gveditrow {
        background: color-mix(in srgb, var(--cnd-blue) 25%, transparent) !important;
    }
}

/* Remove alternating row- and highlight colors inside parts/comments being edited. */
.gv tr.gveditrow tr,
.gv tr.gveditrow tr:hover {
    background: transparent;
}

/*
    Simple (HTML) tables
    (use for simple numerical data)
*/

.cnd-table td {
    border: var(--cnd-forms-border);
}