/*———————————————————————————————————————————————————————————*/
/* This stylesheet depends on initial-but-not-simpler.css    */
/*———————————————————————————————————————————————————————————*/

:root {
    color:             var(--fg);
    background-color:  var(--bg);
    --input-field:     var(--bg-more);
    --warning:         var(--yellow);
    --error:           var(--green);
    --message:         var(--magenta);
    --accent:          var(--violet);
    --input:           var(--cyan);
}

/*———————————————————————————————————————————————————————————*/
/* Sitewide Formatting tools                                 */
/*———————————————————————————————————————————————————————————*/

.main-content {
    margin: 1rem;
}

.layout-columns {
    display: flex;
    justify-content: space-evenly;
}

.layout-columns > * {
    flex: 1;
}

.layout-rows {
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.layout-flexend {
    align-items: flex-end
}
    
.layout-rows > * {
    flex: 1;
}

.layout-0 > * {
    flex: 0;
}

.shadowbar {
    padding: 0.3rem;
    box-shadow: var(--box-shadow);
}

.swipe-rows > * {
    width: 40rem;
    border-radius: 0.8rem;
    border: 1px solid var(--bg-more);
    margin-left: 1rem;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.2rem;
}

.center {
    text-align: center;
}

/*————————————————————————————————————————————————————————————*/
/*         ******* User feedback messages *******             */
/* from https://github.com/mrben/nicer_django_messages_output */
/*————————————————————————————————————————————————————————————*/
.messages ul {
    display: inline-block;
    list-style: none;
    margin-top: 0.3rem;
    margin-left: 20vw;
    margin-right: 20vw;
}

.messages ul li {
    border-radius: 0.3rem;
    border: 1px solid var(--message);
    margin-top: 0.2rem;
    padding: 0.2rem;
    color: var(--fg-more);
    background-color: var(--bg-more);
}

.messages .info {
    color: var(--message);
    box-shadow: var(--fg-more) 1px 1px 5px -1px;
}

.messages .success {
    color: var(--accent);
    box-shadow: var(--bg-more) 2px 2px 10px -2px;
}

.messages .warning {
    color: var(--warning);
    box-shadow: var(--warning) 1px 1px 5px -1px;
}

.messages .error {
    color: var(--error);
    box-shadow: var(--error) 1px 1px 5px -1px;
}

.messages .debug {
    box-shadow: var(--error) 1px 1px 5px -1px;
    color: var(--bg-more);
    background-color: var(--message);
}

div.error .error {
    color: var(--error);
}

/*———————————————————————————————————————————————————————————*/
/* PureCSS customizations                                   */
/*———————————————————————————————————————————————————————————*/

/* Button */

.pure-button {
    background-color: var(--input-field);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, .15));
    border-radius: 4px;
    border: 1px solid var(--bg-more);
    color: var(--fg-more);
    margin: 0.2rem;
    padding: 0.3rem 0.6rem;
    position: relative;
}

.pure-button-label {
    width: 8rem;
}

.pure-button .icon {
    position: absolute;
    left: 0.25rem;
}

.pure-button-active,  .pure-button:active, .pure-menu-active > .pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
}

.pure-button:hover, .pure-button:hover, a.pure-button:hover, a.pure-button:hover {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, .2));
    background-color: var(--fg-more);
    border: 1px solid var(--input);
    border-radius: 4px;
    color: var(--bg-more);
}

.pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected {
    border: 1px solid var(--input);
}

.pure-button-primary:hover, .pure-button-selected:hover, a.pure-button-primary:hover, a.pure-button-selected:hover {
    background-color: var(--fg);
    color: var(--bg);
}


/* Menu & Link */

.pure-menu-horizontal {
    margin-bottom: 0.2rem;
    box-shadow: var(--box-shadow);
}    

.pure-menu-link {
    color: var(--fg);
    padding: 0.2rem 0.4rem;
}

.pure-menu-link-disabled {
    color: var(--bg-more);
    padding: 0.2rem 0.4rem;
}

.pure-menu-link.pure-menu-selected, pure-menu-link.pure-menu-selected:focus, pure-menu-link.pure-menu-selected:hover  {
    background-color: inherit;
    color: var(--bg-more);
}

.pure-menu-selected:focus, .pure-menu-selected:hover {
    background-color: inherit;
    color: inherit;
}

.pure-menu-heading {
    color: var(--fg-most);
    padding: 0.2rem 0.4rem!important;
    text-transform: none;
}

.pure-menu-link:hover {
    background-color: var(--input);
    color: var(--bg-more);
    text-decoration: underline;
}

.pure-menu-list {
    border: none;
}

.pure-menu-children { 
    background-color: var(--input-field);
}

.pure-menu-link:after {
    content: none!important;
}

.pure-menu-horizontal .pure-menu-children .pure-menu-separator,.pure-menu-separator{
    background-color: var(--bg-more);
    
}

.pure-menu-selected .pure-menu-link,.pure-menu-selected .pure-menu-link:visited {
    color: var(--fg);
}

.breadcrumb-end {
    background-color: inherit;
    color: inherit;
    font-variant-caps: all-small-caps;
    padding: 0.2rem 0.4rem;
}

.breadcrumb-end:hover {
    background-color: inherit;
    color: inherit;
    text-decoration: none;
}

/* Form */


/* Most inputs */
.pure-form input[type=password],.pure-form input[type=email],.pure-form input[type=url],.pure-form input[type=date],.pure-form input[type=month],.pure-form input[type=time],.pure-form input[type=datetime],.pure-form input[type=datetime-local],.pure-form input[type=week],.pure-form input[type=tel],.pure-form input[type=color],.pure-form input[type=number],.pure-form input[type=search],.pure-form input[type=text],.pure-form select,.pure-form textarea{ 
    background-color: var(--input-field);
    color: var(--fg-more);
    border: 1px solid var(--bg-more);
    border-radius: 2px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
    padding: 0.2em 0.3em;
}

.pure-input {
    font-family: var(--mono);
}

.pure-input::placeholder {
    font-size: 0.8em;
    font-family: var(--sans-serif);
}

/* Inputs with no type */
.pure-form input:not([type]) {
    border: 1px solid var(--fg-more);
    border-radius: 2px;
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.15);
    padding: 0.2em 0.3em;
}

/* Input with hover */
.pure-form input:not([type]):hover,.pure-form input[type=password]:hover,.pure-form input[type=email]:hover,.pure-form input[type=url]:hover,.pure-form input[type=date]:hover,.pure-form input[type=month]:hover,.pure-form input[type=time]:hover,.pure-form input[type=datetime]:hover,.pure-form input[type=datetime-local]:hover,.pure-form input[type=week]:hover,.pure-form input[type=tel]:hover,.pure-form input[type=color]:hover,.pure-form input[type=number]:hover,.pure-form input[type=search]:hover,.pure-form input[type=text]:hover,.pure-form select:hover,.pure-form textarea:hover {
    background-color: var(--input);
    border: 1px solid var(--bg-more);
    color: var(--bg-more);
    /* outline: 0; */
}

/* Input with focus */
.pure-form input:not([type]):focus,.pure-form input[type=password]:focus,.pure-form input[type=email]:focus,.pure-form input[type=url]:focus,.pure-form input[type=date]:focus,.pure-form input[type=month]:focus,.pure-form input[type=time]:focus,.pure-form input[type=datetime]:focus,.pure-form input[type=datetime-local]:focus,.pure-form input[type=week]:focus,.pure-form input[type=tel]:focus,.pure-form input[type=color]:focus,.pure-form input[type=number]:focus,.pure-form input[type=search]:focus,.pure-form input[type=text]:focus,.pure-form select:focus,.pure-form textarea:focus {
    background-color: var(--fg-more);
    border: 1px solid var(--bg);
    color: var(--bg-more);
    outline: 0;
}

/* Certain types of input, with focus */
.pure-form input[type=file]:focus,.pure-form input[type=checkbox]:focus,.pure-form input[type=radio]:focus {
    outline: var(--accent) auto 1px;
}

/* Disabled input */
.pure-form input:not([type])[disabled],.pure-form input[type=password][disabled],.pure-form input[type=email][disabled],.pure-form input[type=url][disabled],.pure-form input[type=date][disabled],.pure-form input[type=month][disabled],.pure-form input[type=time][disabled],.pure-form input[type=datetime][disabled],.pure-form input[type=datetime-local][disabled],.pure-form input[type=week][disabled],.pure-form input[type=tel][disabled],.pure-form input[type=color][disabled],.pure-form input[type=number][disabled],.pure-form input[type=search][disabled],.pure-form input[type=text][disabled],.pure-form select[disabled],.pure-form textarea[disabled] { 
    background-color: var(--disabled);
    color: var(--fg-more);
}

/* Read-only input */
.pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly],
.pure-form input[readonly]:hover, .pure-form select[readonly]:hover, .pure-form textarea[readonly]:hover,
.pure-form input[readonly]:focus, .pure-form select[readonly]:focus, .pure-form textarea[readonly]:focus,
.pure-form input[readonly]:active, .pure-form select[readonly]:active, .pure-form textarea[readonly]:active {
    background-color: var(--disabled);
    border: 1px solid var(--bg);
    box-shadow: none;
    color: var(--fg);
    cursor: not-allowed;
}


/* Invalid input */
.pure-form input:focus:invalid,.pure-form select:focus:invalid,.pure-form textarea:focus:invalid {
    border-color: var(--error);
    color: var(--error);
}

/* focus:invalid:focus input */
.pure-form input[type=file]:focus:invalid:focus,.pure-form input[type=checkbox]:focus:invalid:focus,.pure-form input[type=radio]:focus:invalid:focus {
    outline-color: var(--error);
}

/* Other form things */
.pure-form select {
    background-color: var(--input-field);
    border: 1px solid var(--bg-more);
}

.pure-form legend {
    border-bottom: 2px solid var(--bg-more);
    color: var(--fg-more);
}

.pure-form .pure-help-inline, .pure-form-message-inline, .pure-form-message { 
    color: var(--message);
}

/*———————————————————————————————————————————————————————————*/
/* djangotables2 customizations                              */
/*———————————————————————————————————————————————————————————*/

table.paleblue {
    border: none!important;
}

table.paleblue td {
    border: none!important;
}

table.paleblue tr.odd {
    background-color: var(--bg)!important;
    border: none!important;
}

table.paleblue tr.even {
    background-color: var(--bg)!important;
    border: none!important;
}

table.paleblue thead td {
    background: var(--bg)!important;
    border: none!important;
}

table.paleblue thead th {
    background: var(--bg)!important;
    border: none!important;
}

table.paleblue + ul.pagination {
    background-image: none!important;
    background-color: var(--bg)!important;
    border: none!important;
}

table.paleblue button, table.paleblue a.pure-button {
    background-image: none!important;
    display: inline;
    margin: 1px;
    padding: 2px;
    font-size: 0.5rem;
}

table.paleblue a:link {
    font-weight: normal!important;
}

/*———————————————————————————————————————————————————————————*/
/* nexttask styles                                           */
/*———————————————————————————————————————————————————————————*/

#filterbar {
    border: 1px solid var(--input);
    margin-left: 1rem;
    padding: 1rem;
    width: 30%;
}

#filterbar ul {
    list-style-type: none;
    padding-left: 0;
}

#filterbar .exclude_tag {
    float: right;
}

#filterbar ul li label {
    text-align: center;
    width: 100%;
}

.taskname {
    font-family: 'Quadraat Sans OT';
    font-size: 1.4em;
    margin-top: 0rem;
    margin-bottom: 0rem;
    text-align: center;
    font-weight: normal;
}

.taskname > a {
    color: var(--fg-more);
    text-decoration: underline;
    text-decoration-style: dotted;
}

ul.whatnext_outline {
    padding-top: 1rem;
    padding-bottom: 1rem;

}

ul.whatnext_outline li {
    list-style: none;
    padding-left: 1rem;
    padding-top: 0.5rem;
}

ul.whatnext_outline a {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-style: dotted;
}

ul.whatnext_outline li.done, .done {
    color: var(--fg);
    text-decoration: line-through;
    text-decoration-color: rgba(108, 113, 196, 0.3);
}

ul.whatnext_outline li.error .error {
    color: var(--error);
    border: 1px solid var(--error);
}

ul.whatnext_outline li.comment {
    color: var(--fg);
}

ul.whatnext_outline li.removed {
    color: var(--fg);
    text-decoration: line-through;
    text-decoration-style: wavy;
    text-decoration-color: rgba(160, 160, 160, 0.4);
}

ul.whatnext_outline form {
    display: inline;
}

ul.whatnext_outline li form button {
    display: inline;
    font-size: 0.5rem;
}

ul.whatnext_outline li.comment:before {
    content: "● ";
}

ul.whatnext_outline li.open:before {
    content: "☐ ";
}

li.done:before {
    content: "☑ ";
}

ul.whatnext_outline li.removed:before {
    content: "☒ ";
}

ul.whatnext_outline button {
    margin: 0;
    padding: 0.2rem;
}

.nextline_late {
    background-color: var(--gray);
}

.nextline_done {
    background-color: var(--green);
}

.nextline_early {
    background-color: var(--yellow);
}


/*———————————————————————————————————————————————————————————*/
/* Clog */
/*———————————————————————————————————————————————————————————*/

.clog_varname {
    font-size: 400%;
    font-weight: 400;
}

.clog_logcell {
    border-radius: 1px;
    text-align: center;
    vertical-align: middle;
}

.clog_good {
    background-color: var(--green);
}

.clog_okay {
    background-color: var(--yellow);
}

.clog_bad {
    background-color: var(--red);
}

.clog_logentry {
    border-collapse: collapse;
    width: 100%;
}

.clog_clog_datecol2, .clog_datecol3, .clog_datecol4, .clog_datecol5, .clog_datecol6 {
    width: 5vw;
}

.clog_datecol1, .clog_datecol7, .clog_datecol8 {
    width: 10vw;
}

clog_form {
    margin: 0;
}

table.clog_count_report {
    border-spacing: 0em;
}

table.clog_count_report td {
    border: 0.1em solid var(--fg-more);
    height: 2.5em;
    padding: 0.3em;
}

.clog_divider {
    background: var(--bg-more);
    height: 1.5vh;
}

th.clog_divider {
    background: none;
}

td.clog_logcell input[type=checkbox] {
    height: 1px;
    margin: 0;
    opacity: 0;
    padding: 0;
    width: 1px;
}

td.clog_logcell {
    border-radius: 15px;
    box-shadow: 2px 2px 5px var(--bg-more);
}

td.clog_logcell label {
    border-radius: 5px; 
    display: inline-block;
    height: 1em;
    margin-left: -10px;
    padding: 10px 0px 10px 0px;
    text-align: center;
    width: 60%;
}

td.clog_logcell input[type=text] {
    background: none;
    border-style: none;
    border: none;
    font-size: 80%;
    font-weight: 400;
    letter-spacing: -1px;
    outline: none;
}

td.clog_logcell input[type=number] {
    border: none;
    width: 2em;
}

td.clog_logcell input[type=checkbox]:checked + label {
    font-size: 140%;
}

td.clog_logcell input[type=submit] {
    background: var(--bg); 
    border-radius: 5px; 
    border: 3px none;
    cursor:pointer;
    padding:1px 1px; 
}

.clog_logentry td {
    border: 1px solid var(--fg);
    border-bottom: 0.1em solid var(--red);
}

.clog_logentry th {
    border-bottom: 2px solid var(--red);
}

form.clog_share_vars label {
    text-align: left;
}

form.clog_share_vars li {
    list-style-type: none;
}

table.first_clog td {
    width: 10rem;
}