/* KINGS DIY IN-HOUSE APPS, UPDATE 2025: STYLING ELEMENTS FOR STAFF HOURS LOG */




@media print {    
    #superchron, .hourslog_nav, .hln_tab, .navcathead, .navcatfoot, #the_cal_adders, .monthprinter  {display: none;}
}




/*******************************/
/* PRIMARY CONTROLS AND PANELS */
/*******************************/


/* YEAR SWITCHING BAR */

#superchron {
    position:           absolute;
    top:                70px;
    left:               550px;
}


/* OPTION TAB ARRAY ADAPTATIONS AND COLOURING */

@media screen {
    .option_array           {width: 120px;}
    
    .opt_tab {
        width:              118px;
        margin-bottom:      2px;
    }
    
    .ot_ncur:hover, .ot_curr    {width: 116px;}
    
    .navcathead {
        height:             18px;
        padding:            5px;
        font-size:          10pt;
        font-weight:        bold;
        color:              #606060;
    }
    
    #ot_yearswitch, #ot_timeidp {
        border-color:       #90e0f0;
        background-color:   #c0ecf4;
    }
    #ot_caloverview, #ot_specialevent {
        border-color:       #90f0e0;
        background-color:   #c0ffe0;
    }
    #ot_caldetail, #ot_paylog {
        border-color:       #909090;
        background-color:   #d0d0d0;
    }
    #ot_dailyconf, #ot_staffroster {
        border-color:       #c8e080;
        background-color:   #e4ffb0;
    }
    #ot_timeoff, #ot_reporthol {
        border-color:       #e0a080;/*ffa890;*/
        background-color:   #ffe0c0;
    }
    #ot_timeswp {
        border-color:       #a890ff;
        background-color:   #e0c0ff;
    }
    #ot_timextr, #ot_reportpay {
        border-color:       #90b8ff;
        background-color:   #c0e0ff;
    }
 /*   #ot_staffcalendar {
        border-color:       #60c0c0;
        background-color:   #c0ffff;
    }*/
    
    .year_switches {
        display:            none;
        position:           absolute;
        top:                -9px;
        left:               113px;
        border-radius:      10px;
        border:             2px solid #90e0f0;
        width:              252px;
        background-color:   #e0f6fa;
        padding:            5px;
        grid-gap:           3px;
        z-index:            50;
    }
    
    #ot_yearswitch:hover .year_switches
                            {display: inline;}
}


/* MODE-SPECIFIC INTERFACE COLOURING */

.appchrome_caloverview      {background-color: #c0ffe0;}
.appchrome_caldetail        {background-color: #d0d0d0;}

.appchrome_dailyconf        {background-color: #e4ffb0;}
.appchrome_specialevent     {background-color: #c0ffe0;}
.appchrome_timeoff          {background-color: #ffe0c0;}
.appchrome_timeswp          {background-color: #e0c0ff;}
.appchrome_timextr          {background-color: #c0e0ff;}
.appchrome_timeidp          {background-color: #c0ecf4;}
.appchrome_paylog           {background-color: #d0d0d0;}

.appchrome_reportpay        {background-color: #c0e0ff;}
.appchrome_reporthol        {background-color: #ffe0c0;}

.appchrome_staffroster      {background-color: #e4ffb0;}
.appchrome_staffcalendar    {background-color: #c0ffff;}


/* PRIMARY OPERATION PANELS */

.corepanel              {min-width: 900px;}

.coresubcapt {
    background-color:   #ffffff;/*f0f8ff;*/
    font-weight:        bold;
    color:              #000080;
    border-bottom:      1px solid #d0d0e0;/*a0a0c0;*/
}

.coresubcapt td {
    padding:            2px 6px 2px 2px;
    overflow:           hidden;
}

.panel_body             {min-width: 850px;}

.calendricalbody td {
    position:           relative;
    padding:            0;
}




/*************************/
/* CALENDAR DETAIL PANEL */
/*************************/


/* OVERALL STRUCTURE */

#thecalendar1 td        {vertical-align: middle;}

#thecalendar2           {table-layout: fixed;}

#thecalendar2 td.staffxpc
                        {padding: 3px;}


/* MONTH BARS */

#thecalendar1 td.monthbar, #thecalendar2 td.monthbar, #monthchrome1, #monthchrome2, #monthchrome3, #monthchrome4, #monthchrome5, #monthchrome6, #monthchrome7, #monthchrome8, #monthchrome9, #monthchrome10, #monthchrome11, #monthchrome12 {
    position:           relative;
    vertical-align:     top;
    max-width:          34px;
    padding:            50px 0px;
}

#monthchrome1, .monthchrome1    {background-color: #e4dfec;}
#monthchrome2, .monthchrome2    {background-color: #b8cce4;}
#monthchrome3, .monthchrome3    {background-color: #daeef3;}
#monthchrome4, .monthchrome4    {background-color: #99ff99;}
#monthchrome5, .monthchrome5    {background-color: #ccff66;}
#monthchrome6, .monthchrome6    {background-color: #ffff66;}
#monthchrome7, .monthchrome7    {background-color: #fcd5b4;}
#monthchrome8, .monthchrome8    {background-color: #f79646;}
#monthchrome9, .monthchrome9    {background-color: #ff5050;}
#monthchrome10, .monthchrome10  {background-color: #ffcccc;}
#monthchrome11, .monthchrome11  {background-color: #ff99ff;}
#monthchrome12, .monthchrome12  {background-color: #cc99ff;}

.monthpivot {
    position:           -webkit-sticky; /* Safari */
    position:           sticky;
    top:                50px;
    width:              32px;
    overflow-x:         hidden;
    height:             210px;
    padding:            1px;
    font-size:          26px;
    font-weight:        bold;
}

.monthtext {
    -webkit-transform:  rotate(90deg);
    -moz-transform:     rotate(90deg);
    -o-transform:       rotate(90deg);
    -ms-transform:      rotate(90deg);
    transform:          rotate(90deg);
    white-space:        nowrap;
    display:            block;
    /*top:                50px;*/
    padding:            0px;
}

.monthprinter {
    height:             26px;
    padding:            2px 4px;
    font-size:          10pt;
    color:              #404040;
}


/* SPLITTER COLUMNS & CAPTION BARS */

.cal_split {
    border-left:        2px solid #000000;
    background-color:   #ffffff;
    width:              0;
    padding:            0;
}

._cb        /* = caption bar */ {
    border:             1px solid #606060;
    background-color:   #909090;
    padding:            4px 2px;
    text-align:         center;
    font-weight:        bold;
    color:              #ffffff;
}

._cs        /* = caption staff */ {
    min-width:          41px;
    max-width:          41px;
    font-size:          10pt;
    overflow-x:         hidden;
}


/* DAY-TO-DAY DETAIL */

._dr        /* = day row */
                        {border: 1px solid #d0d0d0;}

.todayevent             {background-color: #a0f4e4;}

.eventreadout, ._er {
    min-width:          115px;
    max-width:          115px;
}

.todayclosure           {background-color: #b8b8b8;}
.todaybankhol           {background-color: #cfcfcf;}
.todayweekend           {background-color: #e8e8e8;}
.todayconf              {background-color: #d0ff90;}
.todaytarzan            {likes: jane;}

.dayofweekcell, ._dw {
    padding:            4px;
    font-size:          12pt;
}

.datecell, ._dc {
    position:           relative;
    border:             1px solid #b0b0b0;
    padding:            4px;
    text-align:         center;
    font-size:          16pt;
}

.eventcell, ._de {
    position:           relative;
    border:             1px solid #b0b0b0;
}

@media print {
    .eventcell              {border: 1px solid #b0b0b0;}
}

.dayevents              {width: 150px;}

.opt_workday {
    border-style:       solid;
    padding:            6px 3px 0;
    font-size:          14pt;
    text-align:         center;
}

.opt_branch, .opt_subbrc, .opt_openness, .opt_reason, .opt_reassn, .opt_reimbr, .opt_bulkness {
    border-style:       solid;
    background-color:   #ffffff;
    padding:            6px 3px 0;
    font-size:          14pt;
    font-weight:        normal;
}


/* STAFF EXPECTEDNESS MARKUP */

/*.staffxpc {
    position:           relative;
    width:              43px;
    text-align:         center;
    padding:            0;
}*/

._d {
    position:           relative;
    padding:            3px;
    width:              43px;
    text-align:         center;
}

._x1        /* = staff member expected in as normal */ {
    background-color:   #d0f0ff;
    font-weight:        bold;
    color:              #002060;
}

._xh                    {background-image: linear-gradient(140deg, #d0f0ff 49.9%, #ffe8d0 50.1%);} /* = staff member working half day (or other fraction) */
._xu                    {background-color: #ffe8d0;} /* = staff member out as part of regular hours */
._xb                    {background-color: #ffc8a0;} /* = staff member out for bank holiday */
._xc                    {color: #808080;} /* = staff member out for shop closure */
.xpc_off, ._xo          {background-color: #ff9090;} /* = staff member taking time off */
.xpc_swp, ._xs          {background-color: #b0a8ff;} /* = staff member swapping day */
.xpc_xtr, ._xx          {background-color: #90b8ff;} /* = staff member working extra hours */
.xpc_idp, ._xi          {background-color: #a0e4f4;} /* = staff member working inter department */
.xpc_wos, ._xw          {background-color: #ffa090;} /* = staff member working off site */
.xpc_med, ._xm          {background-color: #ff90a0;} /* = staff member taking medical leave */

.swapmark {
    position:           relative;
    float:              left;
    margin-left:        2px;
    top:                -3px;
    font-weight:        bold;
}

._xlx       /* = long-haul extra hours */ {
    background-color:   #90b8ff;/*abc9ff;*/
    color:              #485c80;
}
._xlo       /* = long-haul time off */ {
    background-color:   #ff9090;/*ffabab;*/
    color:              #804848;
}
._xlw       /* = long-haul work off site */ {
    background-color:   #ffa090;/*ffb7ab;*/
    color:              #805048;
}
._xlm       /* = long-haul medical */ {
    background-color:   #ff90a0;
    color:              #804850;
}

.xpc_sdoff {
    border:             1.5px dashed #7000e0;
    background-color:   #ff9090;
    
}
.xpc_sdxtr {
    border:             1.5px dashed #7000e0;
    background-color:   #90b8ff;
}

.xpc_iz_pt_am           {background-image: linear-gradient(140deg, #a0e4f4 49.9%, #ffe8d0 50.1%);}
.xpc_iz_pt_pm           {background-image: linear-gradient(140deg, #ffe8d0 49.9%, #a0e4f4 50.1%);}
.xpc_iz_norm            {background-image: linear-gradient(140deg, #d0f0ff 49.9%, #a0e4f4 50.1%);}
.xpc_iz_xtr, ._x2       {background-image: linear-gradient(140deg, #90b8ff 49.9%, #a0e4f4 50.1%);}
.xpc_iz_off             {background-image: linear-gradient(140deg, #ff9090 49.9%, #a0e4f4 50.1%);}
.xpc_iz_wos             {background-image: linear-gradient(140deg, #ffa090 49.9%, #a0e4f4 50.1%);}


/* NOTES POPUPS */

._nf        /* = notes frame */ {
    visibility:         hidden;
    position:           absolute;
    z-index:            1;
    top:                30px;
    left:               5px;
    width:              160px;
    border:             1px solid #b0b0b0;
    padding:            0;
}

._n1        /* = notes box main */ {
    padding:            3px;
    text-align:         left;
    color:              #303030;
    font-size:          12pt;
}

._nx                    {background-color: #e0f0ff;} /* xtr */
._no                    {background-color: #ffe0e0;} /* off */
._ni                    {background-color: #d0f0ff;} /* idp e0e0ff */
._ns                    {border-top: 1px solid #b0b0b0;} /* subsequent */

._d:hover ._nf          {visibility: visible;}
._de:hover ._nf {
    visibility:         visible;
    background-color:   #e0fff0;
}


/* STAFF COUNT CELLS */

.staffcount             {width: 37px;}

.justenough {
    background-color:   #fff4c4;
    color:              #402000;
}
.notenough  {
    background-color:   #ffd0d0;
    color:              #800000;
}


/* ADDITION-PREP BUTTONS */

@keyframes ants { to { background-position: 100% 100% } }

#addprep_specialevent.addbuttonactive {
	background:         repeating-linear-gradient(-45deg, #ffffff 0, #ffffff 25%, #a0f4e4 0, #a0f4e4 50%) 0 / .8em .8em;
	animation:          ants 12s linear infinite;
}
#addprep_timeoff.addbuttonactive {
	background:         repeating-linear-gradient(-45deg, #ffffff 0, #ffffff 25%, #ff9090 0, #ff9090 50%) 0 / .8em .8em;
	animation:          ants 12s linear infinite;
}
#addprep_timeswp.addbuttonactive {
	background:         repeating-linear-gradient(-45deg, #ffffff 0, #ffffff 25%, #b0a8ff 0, #b0a8ff 50%) 0 / .8em .8em;
	animation:          ants 12s linear infinite;
}
#addprep_timextr.addbuttonactive {
	background:         repeating-linear-gradient(-45deg, #ffffff 0, #ffffff 25%, #90b8ff 0, #90b8ff 50%) 0 / .8em .8em;
	animation:          ants 12s linear infinite;
}
#addprep_timeidp.addbuttonactive {
	background:         repeating-linear-gradient(-45deg, #ffffff 0, #ffffff 25%, #a0e4f4 0, #a0e4f4 50%) 0 / .8em .8em;
	animation:          ants 12s linear infinite;
}




/***************************/
/* CALENDAR OVERVIEW PANEL */
/***************************/


.simplemonth {
    min-width:          126px;
    max-width:          126px;
}

.simpleweek {
    min-width:          30px;
    max-width:          30px;
    min-height:         75px;
    text-align:         center;
    color:              #606060;
}

.simpledate             {font-size: 14pt;}

.simplefact {
    border:             1px solid #b0b0b0;
    min-width:          100px;
    max-width:          100px;
}




/**********************/
/* CONFIRMATION PANEL */
/**********************/


.conftexts              {padding-left: 5px;}




/**************************/
/* DATA MANAGEMENT PANELS */
/**************************/


.thisrowislocked        {background-color: #f0f0f0;}
.thisrowhaschanged      {background-color: #e0ffc0;}

.cell_updated {
    position:           absolute;
    left:               0;
    top:                0;
    min-width:          20px;
    min-height:         20px;
    background-image:   url('../img/shl2_cell_upd.png');
    background-repeat:  no-repeat;
    background-position:    top left; 
}

.cell_norm {
    height:             30px;
    border:             1px dashed #0000a0;
    text-align:         left;
}

.cell_nonneg {
    height:             24px;
    border:             1px dashed #9090f8;
    padding:            6px 3px;
    overflow-y:         auto;
    font-size:          14pt;
    color:              #404080;
}

.timein_chbox {
    width:              40px;
    height:             30px;
}

.timein_number          {text-align: right;}

.cw_nano                {width: 30px;}
.cw_micr                {width: 45px;}
.cw_mini                {width: 60px;}
.cw_midi                {width: 90px;}
.cw_norm                {width: 130px;}
.cw_nadj                {width: 136px;}
.cw_larg                {width: 160px;}
.cw_xlrg                {width: 200px;}
.cw_xxlg                {width: 300px;}
.cw_bulk                {width: 257px;}

.timeinboxy {
    height:             100px;
    text-align:         left;
}

.calendricalbody td.timein_undercaption {
    height:             38px;
    padding-right:      5px;
    vertical-align:     middle;
}

.in_workday             {text-align: center;}
.pref_workday           {width: 53px;}


/* REPORTABLE DETAILS */

/*.reportable_summary {
    position:           relative;
    overflow-y:         visible;
}*/

.reportable_details {
    display:            none;
    visibility:         hidden;
    position:           absolute;
    z-index:            1;
    top:                30px;
    left:               5px;
    border:             1px solid #b0b0b0;
    padding:            0;
    text-align:         left;
    color:              #303030;
    font-size:          10pt;
}

.reportable_details h4  {margin-left: 15px;}

.popup_list_xtr         {width: 300px;}
.popup_list_off         {width: 400px;}
.popup_list_ill         {width: 290px;}

.reportable_summary:hover .reportable_details
                        {visibility: visible;}




/****************************************************************************************************/
/* PAY REPORT PANEL SUB-PAGES - no longer actually a concertina despite the leftover class names =P */
/****************************************************************************************************/


.concertinacontrol      {width: 65px;}
.concertinacurrent      {border-bottom: 1px solid #404040;}
.coresubcapt td.concertinacurrent
                        {padding: 2px 6px 1px 2px;}

.concertinadisabled {
    width:              65px;
    color:              #808080;
}

.concertinacontent {
    padding:            0 5px;
    transition:			max-height 0.3s ease-out;
}

.branchheader           {background-color: #e0e0e0;}

.brheadincomplete       {background-color: #ffc0c0;}

.hl2inlinecomment {
    font-size:          11pt;
    color:              #808080;
}




/***************************************/
/* STAFF-HOURS-SPECIFIC BUTTON STYLING */
/***************************************/


.timebuttonevn {
    border:             2px solid #009060;
    background-color:   #d0fff0;
    color:              #003020;
}

.timebuttonoff {
    border:             2px solid #900000;
    background-color:   #ffe0e0;
    color:              #400000;
}

.timebuttonswp {
    border:             2px solid #600090;
    background-color:   #e0e0ff;
    color:              #200030;
}

.timebuttonxtr {
    border:             2px solid #006090;
    background-color:   #e0f0ff;
    color:              #002030;
}

.timebuttonidp {
    border:             2px solid #008070;
    background-color:   #e0fcf3;
    color:              #002a26;
}




/****************************************/
/* MODAL BOX FOR CONFIRMATION DIALOGUES */
/****************************************/


.openhints {
    font-size:          10pt;
    font-weight:        normal;
    white-space:        pre-line;
}

.shrinky {
    width:              65px;
    height:             36px;
}