/* CSS variables are set in a style element by php code so both the code and css 
    have access to those values */

html{
    height:100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: small;
    color: #888; /*text color*/
    height: calc(100% - 9px);
    margin:0;
}

/*main grid for page*/
#grid-container {
    display: grid;
    grid-template-columns: var(--channelAreawidth) auto;
    grid-template-rows: auto auto;
    grid-template-areas: 
        'channeltitle_area broadcasttitle_area'
        'channel_area      broadcast_area';
    column-gap: 0px;
}

/*left column: channel logo's*/
#channeltitle_area {
    grid-area: channeltitle_area;
}
#channel_area {
    grid-area: channel_area;
    overflow: hidden;
}

/*right column: scrollable area for broadcasts*/
#broadcasttitle_area {
    grid-area: broadcasttitle_area;
    overflow: hidden;
    white-space: nowrap;
    position:relative;
}
#broadcast_area {
    grid-area: broadcast_area;
    overflow: scroll;
    white-space: nowrap;
    outline: none;/*get rid of focus outline*/
    position: relative; /*for .cursor position: absolute;*/
    scroll-behavior: smooth;
}

.titlerow {
    position:relative;
    height: var(--titleRowHeight);
}

.recordingrow {
    position:relative;
    height: var(--recRowHeight);
}

/*1 row of broadcasts (= 1 channel)*/
.row {
    position:relative;
    height: var(--normalRowHeight);
}

/*common properties for .channel,.broadcast,.placeholder,..*/
.channel, .broadcast, .placeholder, .titlechannel, .titlebroadcast, .recline, .recchannel {
    border: var(--borderWidth) solid #DDD;
    border-radius: 5px;
    height: var(--normalContentHeight);
    position: absolute;
    overflow: hidden;
    margin: var(--marginWidth);
    font-size: x-small;
    box-shadow: rgba(0,0,0,0.2) 1px 1px 2px 1px;
}

/*change mouse pointer to a hand for broadcasts*/
.broadcast,.channel {
    cursor: pointer;
}

.broadcast.combined{
    cursor:initial;
}

    .broadcast.combined li.detail {
        cursor: pointer;
    }

.titlebroadcast, .titlechannel {
        height: var(--titleContentHeight);
    }

.channel,.titlechannel,.recchannel{
    width: var(--channelContentWidth);
}

.recline,.titlechannel,.recchannel {
    background-color: white;
}

.titlebroadcast {
    background-color: lightblue;
    color: royalblue;
    border-color: lightskyblue;
    font-size: 100%;
}

.titlebroadcast.current {
    background-color: deepskyblue;
    border-color: darkblue;
    font-weight:bold;
}

.recline,.recchannel {
    height: var(--recordingContentHeight);
}

.recline,.recchannel {
    border-radius: 5px;
}

/*a block that indicates a recorded broadcast (on reclist)*/
.recording { 
    position: absolute;
    top: 0px;
}

/*a block that indicates prime time*/
.prime {
    position: absolute;
    top: 0px;
    z-index: -2;
}

.placeholder {
    background-color: #F00;
    /*background-color: #DDD;*/
    border-color: #400;
    /*border-color: #DDD;*/
}

.broadcast:hover,.channel:hover {
    /*border-color: yellow;*/
    /*box-shadow: rgba(255, 255, 0, 0.75) 0 0 2px 1px,rgba(255,0,0,0.5) 0 0 5px 1px;*/
    /*box-shadow: rgb(255, 64, 32) 0 0 1px 1px,rgb(255, 200, 200) 0 0 3px 2px;*/
    /*opacity:1.0;*/
    filter:brightness(110%);
}

.broadcast.combined:hover{
    filter:initial;
}

/*vertically center element inside parent (.broadcast)*/
.content { 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width:100%;
}

.titlebroadcast .content { /*move title text to the right and up a bit*/
    transform: translate(3px,-55%);
}

.titlechannel .content, .recchannel .content { /*center text*/
    left: 50%;
    transform: translate(-50%,-50%);
}

/*background image with right edge faded*/
.fadedImage {
    display: inline-block;
    background-repeat: no-repeat;
    height: calc(var(--normalContentHeight)*1.1);
    width: var(--imageWidth);
    background-size: var(--imageWidth) calc(var(--normalContentHeight)*1.1);
}

ul.detail {
    display: inline-block;
    list-style-type: none;
    vertical-align: top;
    padding-left: 0;
    /*transform: translate(0px,7px);*/ /*move the list a bit lower and to the right*/
    width:100%;
}

li.detail{
    width:100%;
    padding-left:2px;
}

    li.detail:hover {
        filter: brightness(110%);
    }

#cursor {
    position: absolute;
    /*border-left: var(--cursorWidth) dashed black;*/
    /*border-left: var(--cursorWidth) solid yellow;*/
    border-left: var(--cursorWidth) solid deepskyblue;
    box-shadow: rgba(0, 128, 255, 0.75) 0 0 2px 1px,rgba(0,0,255,0.5) 0 0 5px 1px;
}

/*icon overlay (series/oneoff/movie/record/recordseries)*/
.icon {
    position: absolute;
    top: 2px;
    width: 20px;
    height: 10px;
    opacity:0.5;
}
    .broadcast:hover .icon {
        opacity: 1.0;
    }

/*star rating image*/
.rating {
    display:inline;
    width: 10px;
    height: 10px;
    opacity:1.0;
}

.tipped { /*tipped by Humo*/
    box-shadow: yellow 0 0 2px 2px;
}

li.detail.tipped { /*tipped by Humo*/
    border-top: solid yellow 2px;
    border-bottom: solid yellow 2px;
    box-shadow: none;
}

.watched { /*on watchlist*/
    box-shadow: deepskyblue 0 0 2px 2px;
}

li.detail.watched { /*on watchlist*/
    border-top: solid deepskyblue 2px;
    border-bottom: solid deepskyblue 2px;
    box-shadow: none;
}

.recorded { /*marked for recording*/
    box-shadow: red 0 0 2px 2px;
}

li.detail.recorded { /*marked for recording*/
    border-top: solid red 2px;
    border-bottom: solid red 2px;
    box-shadow:none;
}