/* --- Tabellen ------------------------------------------------------------- */
table.header, .table_header { //normale Tabellenheader
    background-color:  @table-header-color;
    border-bottom: 1px solid #575757;
    color: #000;
    padding: 4px;

}

.table_header_bold { //formerly known as topic(-header)
    background-color: @brand-color-lighter;
    border-color: @brand-color-darker;
    border-style: solid;
    border-width: 0 0 1px 0;
    color: #FFFFFF;
    font-size: 12pt;
    padding: 3px 5px;

    img, svg { vertical-align: middle; } // for the topic-icons
}


table.links1 { background-color: #fff; }
table.logintable {
    background-image: url("@{image-path}/login.jpg");
    background-size: 750px 350px;
    h1 {
        border-bottom: 0;
        font-size: 2.5em;
    }
}


.gradient-bar(@flow-content: true) {
    #gradient > .vertical-three-colors(#cdd9ed, #e3eaf6, 40%, #e3eaf6);
    border-top: 1px solid @brand-color-lighter;
    line-height: 17pt;
    height: 25px;
}
.gradient-bar(@flow-content: true) when (@flow-content) {
    &:last-child { padding-right: 5px; }

    img,svg {
        padding: 0 2px;
        vertical-align: text-bottom;
    }
}

table.toolbar {
  .gradient-bar(false);
}
td.toolbar, td.printhead {
    .gradient-bar();
}

td {
    &.aufklapp { background-color: #fffaee; }
    &.angemeldet { border: 1px solid #000; }
    &.nix { background-color: transparent; }
    &.quote {
        border: 1px solid #000;
        font-size: 8px;
    }
    &.rahmen_steel {
        background-color: #f3f5f8;
        border: 1px solid #000;
    }
    &.rahmen_table_row_odd {
        background-color: @content-color-20;
        border: 1px solid #000;
    }
    &.rahmen_white {
        background: #fff;
        border: 1px solid #000;
    }
    &.table_header_bold_red {
        border: none;
        background-color: #fdc6c6;
        border-bottom: 1px solid #990000;
        color: #000;
        height: 20px;
    }
}

table.blank, td.blank, td.onlineinfo, td.blanksmall {
    background-color: #fff;
}

td.tree-indent {
    img, svg {
        vertical-align: bottom;
    }
}

td.tree-elbow-line {
    background: url("@{image-path}/datatree_1.gif") repeat-y;
    vertical-align: bottom;
    width: 5px;
}

td.tree-elbow-end {
    vertical-align: top;
    white-space: nowrap;
    width: 5px;
}

td.tree-elbow-line, td.tree-elbow-end {
    img, svg {
        display: block;
    }
}

/* --- table.collapsable ---------------------------------------------------- */
// TODO: This is pretty hard to understand and should be replaced with an easier,
// better structured solution
.collapsable {
    .header-row > td {
        border-bottom: 0;
        padding-left: 0;
    }

    .toggle-indicator {
        color: #000;
        font-weight: bold;

        a {
            background: left center no-repeat;
            .background-icon('arr_1down', 'clickable');
            color: #000;
            cursor: pointer;
            display: block;
        }

    }
    .empty .toggle-indicator a {
        .background-icon('arr_1right', 'inactive');
 }
    .collapsed .toggle-indicator a {
        .background-icon('arr_1right', 'clickable');
    }
    td.label-cell, .toggle-indicator a, .empty .toggle-indicator {
        padding-left: 20px;
    }
    > .collapsed {
        tr:not(.header-row) {
            display: none;
        }
        .toggle-indicator ~ *:not(.dont-hide) > * {
            opacity: 0;
            pointer-events: none;
        }
    }
}
* + html .collapsable .collapsed .header-row { display: inline-block !important; } // IE-Hack

/* --- Table details -------------------------------------------------------- */
.loaded-details {
    > td { padding: 0 0 5px 20px !important; }
    table {
        border-top: 0;
    }
}

/* --- Sonstige ------------------------------------------------------------- */
.gruppe0 { background-color: @activity-color-80 !important; }
.gruppe1 { background-color: @red !important; }
.gruppe2 { background-color: @orange-80 !important; }
.gruppe3 { background-color: @orange-40 !important; }
.gruppe4 { background-color: @green-80 !important; }
.gruppe5 { background-color: @green-40 !important; }
.gruppe6 { background-color: @content-color-60 !important; }
.gruppe7 { background-color: @base-color-60 !important; }
.gruppe8 { background-color: @violet !important; }
#my_seminars, #settings-notifications {
    .gruppe0, .gruppe1, .gruppe2, .gruppe3, .gruppe4,
    .gruppe5, .gruppe6, .gruppe7, .gruppe9 {
        width: 1px;
    }
    .mycourse_elements > img {
        display: none;
    }
    .special_nav {
        float: right;
    }
}

.grey      { background: #bbb none; }
.white     { background: #fff none; }

.red_gradient {
    #gradient > .vertical-three-colors(#e3969a, #e8b6b9, 60%, #e8b6b9);
    border-top: 2px solid #b35357;
}

/* --- Styles fuer printhead und printcontent ------------------------------- */
table {
    td.printcontent {
        background-color: @dark-gray-color-5;
        text-align: left;
    }
    td.printcontent:hover {
        background-color: @dark-gray-color-5;
    }
    td.printhead2 {
        background-image: url("@{image-path}/content_object_arr-right.png");
        border-top: 1px solid @brand-color-lighter;
        padding: 0;
    }
    td.printhead3 {
        background-image: url("@{image-path}/content_object_arr-down.png");
        border-top: 1px solid @brand-color-lighter;
        padding: 0;
    }
}

/* classes for sortable table headers --------------------------------------- */
tr.sortable {
    background-color: @dark-gray-color-5;

    th.sortasc,
    th.sortdesc {
        .tablesorter-header-inner {
            display: inline-block;
        }

        &::after {
            .square(16px);
            background-position: center;
            background-repeat: no-repeat;
            content: ' ';
            display: inline-block;
            vertical-align: text-bottom;
        }
    }

    th.sortasc::after {
        .retina-background-image('dreieck_up.png', 'dreieck_up@2x.png', 16px);
    }
    th.sortdesc::after {
        .retina-background-image('dreieck_down.png', 'dreieck_down@2x.png', 16px);
    }
}

.tablesorter .filtered {
    display: none;
}

.tablesorter .tablesorter-errorRow td {
    text-align: center;
    cursor: pointer;
}

/* styles for settings tables */
.settings {
    border-collapse: collapse;
    margin-bottom: 2em;
    width: 100%;

    thead th, tbody th {
        .table_header_bold;
        text-align: center;
    }
    td, th {
        padding: 8px;
        vertical-align: top;
    }
    tbody {
        &.maxed {
            input[type=email], input[type=password], input[type=tel], input[type=text], input[type=url], select, textarea {
                &:first-child {
                    .box-sizing(border-box);
                    width: 100%;
                }
            }
            td[colspan]:first-child {
                input[type=email], input[type=password], input[type=tel], input[type=text], input[type=url], select, textarea {
                    width: 200px;
                }
            }
        }
        &.privacy td:first-child ~ td {
            font-style: italic;
            text-align: center;
        }
        td:first-child label {
            display: block;
            font-weight: bold;
        }
    }
    td:first-child[colspan], .divider > th, .divider > td {
        background-color: lighten(@brand-color-lighter, 20%);
        border-bottom: 1px solid #444;
        border-top: 1px solid #444;
        color: #000;
        font-weight: bold;
        text-align: center;
    }

    dfn, small {
        display: block;
        font-weight: normal;
    }
    dfn {
        font-size: 0.8em;
        font-style: italic;
        padding-top: 0.5em;
    }
    tfoot {
        td {
            background: @table-footer-color;
            text-align: center;
        }
        tr:first-child td {
            border-top: 1px solid #575757;
        }
    }
    label.required:after {
        color: red;
        content:'*';
        font-size: 1.5em;
        padding-left: 5px;
        vertical-align: middle;
    }
    &.notification tbody td {
        text-align: center;
        &:first-child:not([colspan]) { padding-left: 0; padding-right: 0; font-size: small; }
        &:nth-child(-n+2) { text-align: left; }
    }
    .bordered {
        &.left  { border-left: 1px solid @brand-color-lighter; }
        &.right { border-right: 1px solid @brand-color-lighter; }
    }
}

table.tree {
    .header > td {
        .gradient-bar();

        a.link {
            padding-left: 5px;
            &.open   {
                .background-icon('arr_1down', 'clickable');
                background-position: left center;
                background-repeat: no-repeat;
                padding-left: 20px;
            }
            &.closed {
                .background-icon('arr_1right', 'clickable');
                background-position: left center;
                background-repeat: no-repeat;
                padding-left: 20px;
            }
        }
    }
    td.blank {
        background: #fff;
        border: 0;
    }
    td.in-between {
        background: #fff url("@{image-path}/tree-line.gif") center repeat-y;
        border: 0;
    }
    td.leaf {
        background: #fff url("@{image-path}/tree-leaf.gif") center no-repeat;
        border: 0;
    }
    td.end {
        background: #fff url("@{image-path}/tree-end.gif") center no-repeat;
        border: 0;
    }
    .centered {
        text-align: center;
        table { margin: auto; text-align: left; }
    }
}

.table_footer, .table_footer td {
    background-color: #e9e9e9;
    border-top: 1px solid #c8c8c8;
}

// New table definition
table.default {
    border-collapse: collapse;
    margin-bottom: 1em;
    width: 100%;

    .wrap-content {
        word-break: break-all;
    }

    th, td, caption {
        padding: 5px;
        text-align: left;
    }
    > caption {
        background-color: transparent;
        padding-top: 0px;
        color: @base-gray;
        font-size: 1.4em;
        text-align: left;

        header {
            > h2 {
                border: 0;
                font-size: inherit;
                font-weight: normal;
                margin: 0;
                padding: 0;
            }
            > p {
                font-size: 0.7em;
                font-weight: normal;
                margin: 0;
                padding: 0;
            }
        }
    }
    > thead {
        > tr > th {
            background-color: @content-color-20;
            border-bottom: 1px solid fadeout(@brand-color-lighter, 80%);
            border-top: 1px solid @brand-color-darker;
            font-size: 1.0em;
        }
    }
    > tbody {
        > tr {
            > th {
                background-color: @content-color-20;
                border-top: 1px solid @brand-color-darker;
                border-bottom: 1px solid fadeout(@brand-color-lighter, 80%);
                text-align: left;
            }
            > td {
                border-bottom: 1px solid @table-header-color;
                transition: background-color 0.3s;
            }
            > td.dragHandle {
                background: #ffffff url("@{image-path}/anfasser_24.png") center no-repeat;
                cursor: move;
            }
            &.dragover > td {
                background-color: @yellow-20;
            }
        }
    }
    > tbody > tr.new > td {
        font-weight: bold;
        &:first-child {
            position: relative;
            &::before {
                display: block;
                content: '';
                position: absolute;

                top: 0;
                bottom: 0;
                left: 0;
                width: 2px;
                background-color: @red;
            }
        }
        .action-menu {
            font-weight: normal;
        }
    }
    > tbody:last-of-type > tr:last-child > td {
        border-bottom: 1px solid @brand-color-darker;
    }
    // Hover effect
    &:not(.nohover) > tbody:not(.nohover) > tr:not(.nohover):hover > td:not(.nohover) {
        background-color: fadeout(@light-gray-color, 80%);
    }
    > tfoot {
        > tr > td {
            background-color: @content-color-20;
            border-top: 1px solid @brand-color-darker;
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    td.avatar, th.avatar {
        padding: 5px;
    }
    .actions {
        float: right;
        text-align: right;
        white-space: nowrap;
        img, svg {
            vertical-align: middle;
        }
    }
    > caption .actions {
        input, select {
            font-size: 0.7em;
        }
        border-left: 1px solid @brand-color-darker;
        margin-bottom: -5px;
        padding-bottom: 7px;
        padding-left: 0.5em;
    }
    td.actions, th.actions {
        float: none;
    }

    > caption {
        .caption-container {
            .flex();
            .flex-align-items(stretch);
            .flex-justify-content(space-between);
            margin-bottom: -5px;
        }
        .caption-content {
            .flex-grow(1);
            border-right: 1px solid @brand-color-darker;
            padding-bottom: 5px;
            padding-right: 0.5em;
            margin-right: 0.5em;
        }
        .caption-actions {
            .flex-align-self(flex-end);
        }
    }

    > tbody.toggleable {
        &.toggled {
            .toggle-switch {
                .background-icon('arr_1right', 'clickable');
            }
            tr:not(:first-child) {
                display: none;
            }
        }
        .toggle-switch {
            .hide-text();
            .background-icon('arr_1down', 'clickable');
            display: inline-block;
            height: 16px;
            text-align: center;
            vertical-align: top;
            width: 16px;
        }
    }

    dfn, small {
        display: block;
        font-weight: normal;
    }
    dfn {
        font-size: 0.8em;
        font-style: italic;
        padding-top: 0.5em;
    }
    label.required:after {
        color: red;
        content:'*';
        font-size: 1.5em;
        padding-left: 5px;
        vertical-align: middle;
    }

    &.has-form {
        input[type=text], textarea {
            .box-sizing(border-box);
            min-width: 200px;
            width: 100%;
        }
        textarea {
            min-height: 100px;
        }
    }

    tfoot {
        // Fix button and select alignment
        select {
            vertical-align: middle;
        }
        // Adjust button margins
        .button {
            margin-bottom: 0;
            margin-top: 0;
        }
    }
}

// Remove trailing border and margin in content boxes if table is last element
article.studip > section > table.default:last-child {
    margin-bottom: 0;

    > tbody:last-child > tr:last-child > td {
        border-bottom: 0;
    }
}

table.withdetails {
    > tbody > tr:not(.details) > td:first-child {
        .background-icon('arr_1right', 'clickable');
        background-repeat: no-repeat;
        background-position: 2px center;
        padding-left: 20px;
        > a {
            margin-left: -20px;
            padding-left: 20px;
        }
    }
    > tbody > tr.open > td {
        background-color: fadeout(@light-gray-color, 80%);
    }
    > tbody > tr.open > td:first-child {
        .background-icon('arr_1down', 'clickable');
    }
    tr.details {
        display: none;
        max-height: 0px;
        overflow: hidden;
        .transition(max-height 0.8s);
    }
    tr.open + tr.details {
        display: table-row;
        max-height: 200px;
        overflow: hidden;
        .transition(max-height 0.8s);
        background-color: transparent !important;
        > td {
            padding-top: 0px;
            padding-bottom: 10px;
            > .detailscontainer {
                padding: 5px;
                border: 1px solid @table-header-color;
                margin-top: -1px;
                border-top-color: white;
            }
        }
    }
}
.no-js table.withdetails tr.details {
    display: table-row;
}

.sortable-dreieck(@direction) {
    &::after {
        background-repeat: no-repeat;
        content: ' ';
        display: inline-block;
        height: 16px;
        margin-left: 0;
        .retina-background-image('dreieck_@{direction}.png', 'dreieck_@{direction}@2x.png', 16px, 16px);
        vertical-align: text-top;
        width: 16px;
    }
}

.sortable-table {
    .header, .tablesorter-header:not(.sorter-false) {
        white-space: nowrap;

        color: @base-color;
        &:hover {
            color: @active-color;
            cursor: pointer;
        }
    }
    .headerSortUp, .tablesorter-headerDesc .tablesorter-header-inner {
        .sortable-dreieck('down');
        &::after {
            vertical-align: inherit;
        }
    }
    .headerSortDown, .tablesorter-headerAsc .tablesorter-header-inner {
        .sortable-dreieck('up');
        &::after {
            vertical-align: inherit;
        }
    }
    .tablesorter-headerUnSorted:not(.sorter-false) .tablesorter-header-inner {
        margin-right: 15px;
    }
}

// Schedule table
table#schedule_data {
    width: 100%;
    table-layout: fixed;
    thead {
        tr {
            td {
                text-align: center;
                vertical-align: top;
                background-color: @content-color-20;
                padding-right: 2px;
                padding: 0px;
                &:first-child {
                    width: 40px;
                }
            }
            &:first-child {
                td:first-child {
                    background-color: inherit;
                }
            }
        }
    }
    tbody {
        td:first-child {
            text-align: right;
            vertical-align: top;
            background-color: @content-color-20;
            padding-right: 2px;
            padding: 0px;
        }
    }
}

// Responsive helper
.table-scrollbox-horizontal {
  .scrollbox-horizontal();
}