/* ================================================================
   To Do / Attention
   ================================================================ */

.todoPage {
    box-sizing                  : border-box ;
    margin                      : 0 ;
    max-width                   : none ;
    padding                     : 0 ;
    width                       : 100% ;
}


/* ================================================================
   Top bar
   ================================================================ */

#todoTopbar {
    align-items                 : center ;
    background                  : #001f4d ;
    border                      : 0 ;
    border-radius               : 0 ;
    box-sizing                  : border-box ;
    display                     : flex ;
    flex-wrap                   : nowrap ;
    margin                      :
        0
        calc(-1 * var(--standard-padding))
        0
        calc(-1 * var(--standard-padding)) ;
    min-height                  : 66px ;
    padding                     : 10px var(--standard-padding) 12px ;
    width                       : calc(
        100% + (2 * var(--standard-padding))
    ) ;
}


.todoTopbarMain {
    box-sizing                  : border-box ;
    display                     : flex ;
    flex-direction              : column ;
    gap                         : 9px ;
    width                       : 100% ;
}


.todoTopbarTitle {
    color                       : rgba(255, 255, 255, .68) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 9px ;
    font-weight                 : 700 ;
    letter-spacing              : .09em ;
    line-height                 : 1 ;
    text-transform              : uppercase ;
}


.todoTopbarRow {
    align-items                 : center ;
    display                     : flex ;
    gap                         : 8px ;
    width                       : 100% ;
}


.todoTopbarSpacer {
    flex                        : 1 1 auto ;
}


#todoTopbar .todoFilters {
    align-items                 : center ;
    display                     : flex ;
    flex                        : 0 1 auto ;
    flex-wrap                   : nowrap ;
    gap                         : 6px ;
}


.todoFilters .tableToolbarButton {
    align-items                 : center ;
    box-sizing                  : border-box ;
    display                     : inline-flex ;
    flex                        : 0 0 auto ;
    font-size                   : 11px ;
    gap                         : 5px ;
    height                      : 24px ;
    justify-content             : center ;
    min-height                  : 24px ;
    padding                     : 1px 6px ;
}


.todoFilters .tableToolbarSummaryCard {
    border                      : 1px solid rgba(220, 255, 219, .50) ;
    color                       : #fff ;
    min-width                   : 69px ;
    text-align                  : left ;
}


.todoFilters .tableToolbarSummaryCard > i {
    flex                        : 0 0 auto ;
    font-size                   : 11px ;
    line-height                 : 1 ;
    margin                      : 0 ;
}


.todoFilters .tableToolbarButtonText {
    display                     : flex ;
    flex-direction              : column ;
    justify-content             : center ;
    line-height                 : 1 ;
    min-width                   : 0 ;
}


.todoFilters .tableToolbarButtonText small {
    color                       : inherit ;
    font-size                   : 6px ;
    font-weight                 : 500 ;
    letter-spacing              : .04em ;
    line-height                 : 1 ;
    margin                      : 0 0 1px 0 ;
    opacity                     : .72 ;
    text-transform              : uppercase ;
}


.todoFilters .tableToolbarButtonText > span {
    color                       : inherit ;
    display                     : block ;
    font-size                   : 11px ;
    font-weight                 : 500 ;
    line-height                 : 1 ;
    margin                      : 0 ;
    padding                     : 0 ;
}


#todoTopbar .todoFilter {
    background                  : #000 ;
    border                      : 1px solid rgba(220, 255, 219, .50) ;
    border-radius               : 7px ;
    color                       : #fff ;
    cursor                      : pointer ;
    opacity                     : 1 ;
}


#todoTopbar .todoFilter:hover {
    background                  : #111 ;
}


#todoTopbar .todoFilter.is-active {
    background                  : var(--dark-green) ;
    border-color                : var(--light-green) ;
    color                       : #fff ;
    outline                     : none ;
}


#todoTopbar .todoTopbarAdd {
    align-items                 : center ;
    background                  : var(--dark-green) ;
    border                      : 1px solid var(--light-green) ;
    border-radius               : 7px ;
    box-sizing                  : border-box ;
    color                       : #fff ;
    cursor                      : pointer ;
    display                     : inline-flex ;
    flex                        : 0 0 auto ;
    font                        : inherit ;
    font-size                   : 11px ;
    gap                         : 5px ;
    height                      : 24px ;
    justify-content             : center ;
    line-height                 : 1 ;
    min-height                  : 24px ;
    padding                     : 1px 8px ;
    white-space                 : nowrap ;
}


#todoTopbar .todoTopbarAdd > i {
    font-size                   : 11px ;
    line-height                 : 1 ;
    margin                      : 0 ;
}


#todoTopbar .todoTopbarAdd:hover {
    background                  : #2b5c00 ;
}


/* ================================================================
   Shared module content
   module.css supplies standard Drey content padding and box sizing.
   ================================================================ */

.todoModuleContent {
    margin                      : 0 ;
    max-width                   : none ;
}


/* ================================================================
   Todo editor
   ================================================================ */

.todoEditor {
    display                     : grid ;
    gap                         : .65rem ;
    grid-template-columns       : minmax(0, 1fr) auto ;
    margin-bottom               : .7rem ;
}


.todoEditor[hidden] {
    display                     : none ;
}


.todoEditor--inline {
    grid-column                 : 1 / -1 ;
    margin                      : .55rem 0 0 ;
}


.todoEditorMain {
    display                     : grid ;
    gap                         : .45rem ;
}


.todoEditorTextarea {
    min-height                  : 4rem ;
}


.todoEditorMeta {
    align-items                 : end ;
    display                     : flex ;
    flex-wrap                   : wrap ;
    gap                         : .55rem ;
}


.todoEditorMeta label {
    display                     : grid ;
    font-family                 : var(--raleway-face), sans-serif ;
    font-size                   : .82rem ;
    gap                         : .2rem ;
}


.todoEditorMeta .todoCheck {
    align-items                 : center ;
    display                     : flex ;
    gap                         : .35rem ;
    padding-bottom              : .65rem ;
}


.todoEditorMeta .todoCheck input {
    width                       : auto ;
}


.todoEditorMeta .drey-module-input {
    min-width                   : 10rem ;
}


.todoEditorSave {
    min-height                  : 2.2rem ;
}


/* ================================================================
   Attention list
   ================================================================ */

.todoList {
    display                     : grid ;
    gap                         : 4px ;
}


.todoItem {
    background                  : #fff ;
    border                      : 1px solid rgba(33, 71, 0, .20) ;
    border-left                 : 5px solid #214700 ;
    border-radius               : 7px ;
    display                     : block ;
    overflow                    : hidden ;
    padding                     : 0 ;
}


.todoItem--inspection {
    border-left-color           : #360f5a ;
}


.todoItem--invoice {
    border-left-color           : #555 ;
}


.todoItem--overdue {
    border-left-color           : #a40000 ;
}


.todoItem--completed {
    opacity                     : .58 ;
}


.todoItem[hidden] {
    display                     : none ;
}


.todoRow {
    align-items                 : center ;
    cursor                      : pointer ;
    display                     : grid ;
    gap                         : 10px ;
    grid-template-columns       : 34px 150px minmax(150px, 220px) minmax(0, 1fr) 24px ;
    min-height                  : 42px ;
    padding                     : 4px 10px ;
}


.todoRow:hover {
    background                  : rgba(33, 71, 0, .045) ;
}


.todoRowIcon {
    text-align                  : center ;
}


.todoRowDate {
    font-size                   : .9em ;
    white-space                 : nowrap ;
}


.todoRowWhat {
    font-weight                 : 700 ;
}


.todoRowDescription {
    min-width                   : 0 ;
    overflow                    : hidden ;
    text-overflow               : ellipsis ;
    white-space                 : nowrap ;
}


.todoRowChevron {
    text-align                  : center ;
    transition                  : transform .15s ease ;
}


.todoItem--open .todoRowChevron {
    transform                   : rotate(180deg) ;
}


.todoDue--overdue {
    color                       : #a40000 ;
    font-weight                 : 700 ;
}


.todoNoDate {
    color                       : #888 ;
}


.todoItem--completed .todoRowDescription,
.todoItem--completed .todoRowWhat {
    text-decoration             : line-through ;
}


.todoCompleteButton,
.todoItemActions button,
.todoItemLink {
    background                  : transparent ;
    border                      : 0 ;
    color                       : inherit ;
    cursor                      : pointer ;
    padding                     : 3px ;
}


.todoCompleteButton {
    color                       : #214700 ;
    font-size                   : 1.45em ;
}


/* ================================================================
   Expanded detail
   ================================================================ */

.todoDetails {
    background                  : rgba(33, 71, 0, .025) ;
    border-top                  : 1px solid rgba(33, 71, 0, .12) ;
    padding                     : 9px 14px 11px 54px ;
}


.todoDetails[hidden] {
    display                     : none ;
}


.todoDetailsText {
    margin-bottom               : 7px ;
}


.todoDetailsMeta {
    color                       : #666 ;
    display                     : flex ;
    flex-wrap                   : wrap ;
    font-size                   : .85em ;
    gap                         : 5px 14px ;
}


.todoInspectionDetail {
    display                     : grid ;
    gap                         : 5px ;
    margin-bottom               : 10px ;
}


.todoInspectionDetailRow {
    align-items                 : baseline ;
    display                     : grid ;
    gap                         : 7px ;
    grid-template-columns       : 22px 110px minmax(0, 1fr) ;
}


.todoInspectionDetailRow > i {
    color                       : var(--dark-green) ;
    text-align                  : center ;
}


.todoInspectionDetailLabel {
    font-weight                 : 700 ;
}


/* ================================================================
   Shared note
   ================================================================ */

.todoSharedNote {
    border-top                  : 1px solid rgba(33, 71, 0, .12) ;
    margin-top                  : 10px ;
    padding-top                 : 10px ;
}


.todoSharedNote label {
    display                     : block ;
}


.todoSharedNoteLabel {
    display                     : block ;
    font-weight                 : 700 ;
    margin-bottom               : 5px ;
}


.todoSharedNoteTextarea {
    min-height                  : 4.5rem ;
}


.todoSharedNoteActions {
    margin-top                  : 6px ;
}


.todoSharedNoteSave {
    min-height                  : 2.1rem ;
}


/* ================================================================
   Card actions
   ================================================================ */

.todoDetailsActions {
    align-items                 : center ;
    display                     : flex ;
    flex-wrap                   : wrap ;
    gap                         : 5px ;
    margin-top                  : 8px ;
}


.todoDetailsActions button {
    cursor                      : pointer ;
}

.todoCardAction {
    align-items                 : center ;
    border                      : 1px solid rgba(33, 71, 0, .28) ;
    border-radius               : 5px ;
    box-sizing                  : border-box ;
    cursor                      : pointer ;
    display                     : inline-flex ;
    font-size                   : 0.8rem ;
    gap                         : 4px ;
    justify-content             : center ;
    line-height                 : 1 ;
    min-height                  : 24px ;
    padding                     : 5px 10px ;
}


.todoCardAction > i {
    font-size                   : 11px ;
    margin                      : 0 ;
}


.todoCardAction--primary,
.todoCardAction--good {
    background                  : var(--dark-green) ;
    border-color                : var(--dark-green) ;
    color                       : #fff ;
}


.todoCardAction--bad {
    background                  : #8b0000 ;
    border-color                : #8b0000 ;
    color                       : #fff ;
}


.todoCardAction--neutral {
    background                  : #444 ;
    border-color                : #444 ;
    color                       : #fff ;
}


.todoCardAction--danger {
    background                  : #000 ;
    border-color                : #000 ;
    color                       : #fff ;
}


.todoCardAction:hover {
    filter                      : brightness(1.12) ;
}


/* ================================================================
   Empty state
   ================================================================ */

.todoEmpty {
    align-items                 : center ;
    background                  : #fff ;
    border                      : 1px solid rgba(33, 71, 0, .20) ;
    border-radius               : 7px ;
    color                       : #666 ;
    display                     : flex ;
    gap                         : 6px ;
    padding                     : 18px 8px ;
}


.todoEmpty[hidden] {
    display                     : none ;
}


.todoEmpty > i {
    color                       : var(--dark-green) ;
}


/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 800px) {

    #todoTopbar .todoTopbarRow {
        align-items             : stretch ;
        flex-wrap               : wrap ;
    }

    #todoTopbar .todoFilters {
        flex-wrap               : wrap ;
    }

    .todoTopbarSpacer {
        display                 : none ;
    }

    .todoEditor {
        grid-template-columns   : 1fr ;
    }

    .todoRow {
        gap                     : 6px ;
        grid-template-columns   : 30px 110px minmax(120px, 180px) minmax(0, 1fr) 20px ;
    }

    .todoDetails {
        padding-left            : 50px ;
    }

}


@media (max-width: 600px) {

    .todoRow {
        grid-template-columns   : 30px 1fr 20px ;
    }

    .todoRowDate {
        grid-column             : 2 ;
        grid-row                : 2 ;
    }

    .todoRowWhat {
        grid-column             : 2 ;
        grid-row                : 1 ;
    }

    .todoRowDescription {
        grid-column             : 2 ;
        grid-row                : 3 ;
    }

    .todoRowChevron {
        grid-column             : 3 ;
        grid-row                : 1 / 4 ;
    }

    .todoDetails {
        padding-left            : 50px ;
    }

}


.todoTagFilters {
    align-items                 : center ;
    display                     : flex ;
    flex                        : 0 0 auto ;
    gap                         : 6px ;
}


#todoTopbar .todoTagFilter {
    background                  : #360f5a ;
    border                      : 1px solid rgba(220, 255, 219, .50) ;
    border-radius               : 7px ;
    color                       : #fff ;
    cursor                      : pointer ;
}


#todoTopbar .todoTagFilter:hover {
    background                  : #4b167d ;
}


#todoTopbar .todoTagFilter.is-active {
    background                  : #6a24a3 ;
    border-color                : #dcffdb ;
}


.todoRowTags {
    align-items                 : center ;
    display                     : flex ;
    flex-wrap                   : wrap ;
    gap                         : 5px ;
    margin-top                  : 3px ;
}


.todoRowTag {
    align-items                 : center ;
    display                     : inline-flex ;
    font-size                   : .68rem ;
    font-weight                 : 500 ;
    gap                         : 2px ;
    opacity                     : .65 ;
}


.todoRowTag i {
    font-size                   : .65rem ;
}