//##############################################################################
// TABLES

// adds general table styles only to specific tables not to break other ones like table view in ck editor #111
.dashboard table,
.change-list table,
.tabular table,
.results table,
#change-history {
    width: 100% !important;
    margin: 0!important;
    border: none;
    border-radius: 0;
    border: 0;
    background: $white;
    box-shadow: $base-box-shadow;
    border-collapse: separate !important;
    th,
    td {
        font-family: $base-font-family;
        font-size: $font-size-normal;
        font-weight: normal;
        text-align: left;
        vertical-align: middle;
        border-left: 0 !important;
        border-bottom: 1px solid $gray-lighter;
        background: none !important;
        &:first-child {
            border-right: 0 !important;
        }
        p,
        a:not(.cke_button) {
            font-size: $font-size-normal !important;
            line-height: $font-size-normal;
            font-weight: normal;
            padding: 0;
            margin: 0;
            &.inlinechangelink {
                // make sure that only icon is displayed #246
                font: 0/0 a !important;
                padding-left: 12px;
                &:before {
                    // gives icon a font size because link text is hidden by adding font size 0 #246
                    font-size: 16px;
                    // make sure that icon is not truncated #246
                    vertical-align: top;
                    // removes margin right which is needed to have a space between icon and text #246
                    margin: 0;
                }
            }
            &.lang-code {
                font-size: $font-size-small !important;
            }

        }
        p {
            position: static;
            color: $gray-darkest !important;
        }
    }
    thead th,
    thead th.sorted,
    tfoot td {
        background-color: $white;
    }
    thead {
        th {
            font-size: $font-size-normal;
            line-height: inherit !important;
            font-weight: normal;
            text-transform: uppercase;
            padding: 5px 10px !important;
            white-space: nowrap;
            background-color: $white;
            .text {
                a {
                    display: inline-block;
                    padding: 0 !important;
                }
                span {
                    padding: 0;
                }
            }
        }
        a,
        span {
            font-size: $font-size-normal !important;
            color: $gray !important;
            font-weight: normal;
            padding-left: 0 !important;
        }
    }
    thead th.sorted {
        .text {
            // make sure that clear sorting is not overlapped #263
            padding-right: 60px;
        }
        .sortoptions {
            float: right;
            display: inline-block;
            padding: 0;
            a {
                &.ascending {
                    background: url("../img/sorting-icons.png") -5px -50px no-repeat;
                    &:hover {
                        background: url("../img/sorting-icons.png") -5px -72px no-repeat;
                    }
                }
                &.descending {
                    background: url("../img/sorting-icons.png") -5px -94px no-repeat;
                    &:hover {
                        background: url("../img/sorting-icons.png") -5px -115px no-repeat;
                    }
                }
                &.sortremove {
                    background: url("../img/sorting-icons.png") -4px -5px no-repeat;
                    &:hover {
                        background: url("../img/sorting-icons.png") -4px -26px no-repeat;
                    }
                }
            }
        }
    }
    thead th.sortable {
        &:hover {
            background: $gray-lighter;
        }
        &.column-app_config {
            min-width: 240px;
        }
        .sortpriority {
            vertical-align: middle;
            color: $white !important;
            padding: 2px 6px !important;
            background-color: $color-primary;
            border-radius: 10px;
        }
    }
    thead th.action-checkbox-column {
        padding: 0 15px !important;
    }
    tbody {
        td {
            vertical-align: baseline !important;
            &.field-_reorder,
            &.drag-handler {
                vertical-align: middle !important;
                padding: 1px 5px !important;
            }
            &.original p {
                font-weight: normal !important;
            }
            &.drag {
                width: 10px !important;
                padding: 0 !important;
                // adds drag image without background repeat to have fixed background image size #252
                background: url('../img/drag-norepeat.png') !important;
                background-size: 8px 30px !important;
                background-repeat: no-repeat !important;
                background-position: 5px !important;
                cursor: move !important;
            }
        }
        th,
        td {
            color: $gray-darkest;
            font-size: $font-size-normal;
            line-height: inherit;
            text-transform: none;
            vertical-align: top !important;
            padding: 10px !important;
        }
    }
    td {
        white-space: nowrap;
        select {
            max-width: 160px !important;
            min-width: 120px !important;
            width: auto !important;
            height: 36px;
            margin: 0;
            padding-right: 30px;
            & + .add-another {
                display: inline-block;
                line-height: 10px;
                width: 36px;
                height: 36px;
                margin: 0 0 0 10px !important;
                padding: 9px !important;
                background-position: center;
                border-radius: $border-radius-normal;
                border: solid 1px $gray-lighter;
                box-sizing: border-box;
                &:before {
                    vertical-align: middle;
                }
            }
        }
        .related-widget-wrapper {
            select {
                float: none;
                vertical-align: top;
                // width: auto !important;
            }
        }
        &.delete {
            a {
                float: left;
                // displays icon on delete row #203
                &.inline-deletelink {
                    @include icon(trash);
                    // make sure that only icon is displayed
                    font: 0/0 a !important;
                    color: $gray-darker;
                    &:before {
                        display: block;
                        font-size: $font-size-large;
                        text-indent: 0;
                        margin-right: 0;
                    }
                }
            }
        }
        &.original {
            vertical-align: top;
            padding: 0 !important;
            // there has to be a padding left to align text with table head content #246
            padding-left: 10px !important;
        }
        .related-widget-wrapper {
            // make sure that form fields are not truncated on focus
            overflow: visible;
            float: none;
        }
    }
    tr {
        td {
            border-bottom: 1px solid $gray-lighter;
        }
        &.selected {
            color: $color-primary-light;
            background: $color-primary !important;
            a,
            td,
            span {
                color: $color-primary-light !important;
            }
            .drag {
                background: url('../img/drag-light.png');
                background-size: 5px;
            }
            .lang-code {
                color: $white !important;
                font-size: $font-size-small !important;
                background-color: $gray-lighter !important;
                &.current.active {
                    color: $color-primary !important;
                    border-color: $color-primary ;
                    background-color: $white  !important;
                }
                &.current {
                    color: $white !important;
                    background-color: $gray-lighter !important;
                }
                &.active {
                    color: $white !important;
                    border-color: $white;
                    background-color: $color-primary !important;
                }
            }
        }
    }
    th {
        a,
        a:link,
        a:visited,
        a:link:visited {
            color: $gray-darkest;
        }
    }
    .row1 {
        background: $white;
    }
    // sets background color white to each table row #173
    .row2 {
        background: $white;
    }
    .action-checkbox,
    .action-checkbox-column {
        text-align: left !important;
        padding: 10px 15px !important;
    }
    .paginator {
        box-shadow: none !important;
    }
    fieldset table {
        border: none;
    }
    &.ui-sortable {
        thead th:first-child {
            font: 0/0 a;
        }
        td,
        &.original {
            padding: 1px 10px !important;
            vertical-align: middle !important;
        }

        .action-checkbox {
            padding: 0 15px !important;
        }

        .ui-sortable-placeholder td {
            height: 36px + 2px; // height + border
        }
    }
}
.tabular table {
    box-shadow: none !important;
    tr.add-row td {
        padding: 4px 5px 3px !important;
        a {
            margin-left: 8px;
        }
    }
    tbody td {
        // padding-top: 46px !important;
        input[type="checkbox"] {
            line-height: 36px;
            height: 36px;
        }
        > p {
            line-height: 36px;
        }
        a:not(.related-widget-wrapper-link):not(.add-another):before {
            vertical-align: middle;
            line-height: 36px;
        }
    }
    tbody tr.has_original td {
        padding-top: 36px !important;
    }
    th.original,
    td.original {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        p {
            line-height: 36px  !important;
            height: 36px  !important;
            font-weight: normal !important;
            padding: 0 13px !important;
            top: 0;
        }
        .vForeignKeyRawIdAdminField, .vManyToManyRawIdAdminField {
            width: auto;
        }
    }
    tbody tr.has_original td.original {
        padding-top: 0 !important;
        position: relative;
    }
    .field-can_change,
    .field-can_add,
    .field-can_delete,
    .field-can_change_advanced_settings,
    .field-can_publish,
    .field-can_change_permissions,
    .field-can_move_page {
        text-align: center;
    }
    .related-widget-wrapper a.change-related {
        margin-left: 10px;
    }
}
.inline-group .tabular tr th.original {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#result_list tbody tr:hover,
.results table tbody tr:hover,
#change-history tbody tr:hover {
    background: $color-primary-light;
}

#change-history {
    th,
    td {
        a {
            color: $color-primary !important;
        }
    }
}

.change-list table.navigator-table {
    tbody {
        td {
            vertical-align: middle !important;
        }
    }
}

.tabular.inline-related table .form-row select {
    max-width: 100% !important;
}