/* KINGS DIY IN-HOUSE APPS, UPDATE 2025: STYLING ELEMENTS FOR CARPET CLEANER HIRE 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 {
        border-color:       #90e0f0;
        background-color:   #c0ecf4;
    }
    #ot_caloverview {
        border-color:       #90f0e0;
        background-color:   #c0ffe0;
    }
    #ot_caldetail {
        border-color:       #909090;
        background-color:   #d0d0d0;
    }
    #ot_hirebooking {
        border-color:       #d0b070;
        background-color:   #fff0b8;
    }
    
    .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_hirebooking      {background-color: #fff0b8;}


/* PRIMARY OPERATION PANELS */

.corepanel {
    margin-top:         0;
    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;
}


/* 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;
}


/* BOOKING DISPLAY TILES */

.one_log_day {
    position:           relative;
    width:              610px;
}

.dtile_outer {
    position:           absolute;
    top:                0;
    left:               0;
    max-width:          610px;
    grid-template-areas:    'dt_number dt_spawn dt_spawn'
                            'dt_number dt_fhost dt_fhost'
                            'dt_number dt_info dt_control';
    grid-template-columns:  10px auto 0;
    z-index:            2;
}

.dtile_number {
    width:              9px;
    padding:            0;
}

.hbk_status {
    grid-area:          ord_status;
    max-height:         18px;
    font-size:          12pt;
    font-weight:        bold;
}

.dtile_info, .collapsible, .dtile_control, .ord_tile_updbtn {
    display:            none;
}
.dtile_spawn {
    padding:            8px;
    min-height:         18px;
    max-height:         18px;
}

.dtile_outer:hover {
    max-width:          721px;
    grid-template-columns:  10px auto 116px;
    z-index:            3;
}
.dtile_outer:hover .collapsible {
    display:            inline;
}
.dtile_outer:hover .ord_tile_updbtn, .dtile_outer:hover .dtile_info, .dtile_outer:hover .dtile_control {
    display:            block;
}
.dtile_outer:hover .dtile_spawn {
    max-height:         34px;
}
.dtile_outer:hover .hbk_status {
    margin-bottom:      20px;
}


/* STAFF EXPECTEDNESS MARKUP */

._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_iz_xtr, ._x2       {background-image: linear-gradient(140deg, #90b8ff 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;
}


/* 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;
}




/**************************/
/* 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_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;}




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


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

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