/*
minimal format
TODO move to separate file
*/

body {
    font-family: sans-serif;
}

/*
simple special title with logo
*/
table.openknxTitleTable {
	border-collapse: collapse;
	border-top: 3px solid #449841;
}
table.openknxTitleTable tr.colGroupTitle th {
    /*
    background-color: #449841;
    color: #fff;
    */
    color: #449841;
    text-align: center;
    font-size: 150%;
}
table.openknxTitleTable thead tr:nth-child(2) th:first-child {
    min-width: 128px;
    /* TODO use local logo background-image: url('/img/openknx-logoline.png'); */
    background-image: url('https://raw.githubusercontent.com/OpenKNX/.github/main/profile/images/weiss.svg');
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-x: center;
    background-position-y: 65%;
}
table.openknxTitleTable caption {
    color: #449841;
    font-size: 150%;
}

table.openknxTitleTable thead tr.iconRow th {
    vertical-align: middle;
    text-align: center;
}
table.openknxTitleTable thead tr.iconRow th img {
    width: 24px;
    height: 24px;
}
table.openknxTitleTable tbody tr td img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* row shading */
table.openknxTitleTable tbody tr:nth-child(2n+1) {
    background-color: #f8f8f8;
}
table.openknxTitleTable tbody tr:nth-child(2n+0) {
    background-color: #fff;
}
/* note: hover highlighting is generated in Template, combined with column hover */

/* extended padding for regular text-cells only */
table.openknxTitleTable tbody tr > * {
	padding: 2px 3px;
}

table.openknxTitleTable th {
    font-weight: normal;
    text-align: left;
}
table.openknxTitleTable tr[data-oam] th:first-child,
span[data-ofm], span[data-dev] {
    /* prevent wrapping of OAM-Name, OFM-Name, Device-Name */
	white-space: nowrap;
}
table.openknxTitleTable th.singleModules {
    text-align: center;
    vertical-align: bottom;
}

table.openknxTitleTable .isPart {
    color: #449841;
    text-align: center;
}
table.openknxTitleTable .isInternalModule {
    color: #666;
    text-align: center;
}
/* TODO remove td.left */
table.openknxTitleTable td.left {
    text-align: left;
}

/*
--------------------------------------------------------------------------
quick draft, based on https://css-tricks.com/rotated-table-column-headers/
TODO cleanup and update
*/

th.rotate45,
th.rotate90 {
    white-space: nowrap;
    height: 240px;
}
th.rotate45 > div,
th.rotate90 > div {
    width: 30px;
}
th.rotate45 > div {
    transform: translate(0px, 100px) rotate(315deg);
}
th.rotate90 > div {
    transform: translate(0px, 100px) rotate(270deg);
}
th.rotate45 > div > span,
th.rotate90 > div > span {
    padding: 5px 10px;
    padding: 3px 1ex;
    /* col-header highlight */
    /*
    border-bottom: 2px solid #9f9;
    */
}
td, tbody th {
    border-right: 1px solid #ccc;
}
td.before-new-cols, th.before-new-cols {
    border-right: 1px solid #999;
}

/* Details for OAM */
.oam-details {
	position: absolute;
	top: 0;
	left: 100%;
	display: none;

	text-overflow: ellipsis;
	overflow: hidden;

	/* needs distance to hide again on leaving 1st col */
	margin-left: 0.5em;

    /* show required size */
	width: fit-content;
	text-wrap: nowrap;

	/* show tooltip-like note with thin border */
	background-color: #ffcc;
    height: calc(100% + 1px);
    border: 1px solid #ccc9;
    box-sizing: border-box;

    /* improve visual result */
	padding-right: 1em;
	padding-left: 0.5em;

    /* limit size; TODO check vw */
	max-width: 50vw;
}
th:has(.oam-details) {
    position:relative;
}
table:has([data-oam] th:hover) .oam-details  {
    display:block;
}


/* <--- Sticky Table Headers ---> */

/* Element | https://openknx.github.io/dependencies_table.html */

table.openknxTitleTable > thead {
  position: sticky;
  top: -100px;
  z-index: 100;
  background-color: #fff;
}

/* table_header_rotate.css | https://openknx.github.io/css/table_header_rotate.css

table.openknxTitleTable thead tr:first-child th:first-child {
  background-color: #fff;
}
 */
/* Element | https://openknx.github.io/dependencies_table.html

table.openknxTitleTable > thead > tr {
  background-color: #fff;
}
 */
/* Element | https://openknx.github.io/dependencies_table.html */

table.openknxTitleTable > caption {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: #fffe;
}

/* <//--- Sticky Table Headers ---> */