@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@600&family=B61&family=B612+Mono&display=swap');
@import 'color.css';

.ka-forecast {
    font-family: var(--ka-text-default-font);
}

body {
    padding: 0;
    margin: 0;
    font-family: var(--ka-text-default-font);
    font-size: 10pt;
    background-color: var(--background-color, white);
    color: var(--text-color, black);
}

::selection {
    background-color: var(--ka-background-button-active-color);
    color: var(--text-color);
}

* {
    scrollbar-color: var(--company-color-dark) var(--background-color);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--company-color-dark);
    border: 2px solid var(--background-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--company-color);
}

::placeholder {
    color: var(--text-color);
    opacity: 0.5;
}

*:focus-visible {
    outline: 2px solid var(--company-color);
    outline-offset: 1px;
}


.ka-head, .ka-foot, .ka-main-top, .ka-main-bottom {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 5px;
    padding: 15px;
}

.ka-project, .ka-userbox, .ka-login, .ka-search input, .ka-date {
    display: block;
    margin: auto;
    min-width: 100%;
    max-width: 100%;
    min-height: 8ex;
    max-height: 8ex;
    border: 2px solid var(--ka-border-button-color);
    overflow: hidden;
    text-overflow: clip;
    position: relative;
    box-sizing: border-box;
}

.ka-project {
    display: grid;
}

.ka-search {
    padding: 0;
    margin: 0;
}

.ka-search input {
    font-weight: bolder;
    padding: 4px;
    min-width: calc(100% - 4ch - 12px);
}

.ka-login {
    min-height: 8ex !important;
    max-height: 32ex !important;
    border: none;
}

.ka-login input {
    border: 2px solid var(--ka-border-button-color);
    padding: 0;
    min-height: 6ex;
    min-width: calc(100% - 4px);
    margin: 1.5ex 0;
}

.ka-login button {
    padding: 0;
    min-height: 6ex;
    min-width: 100%;
    margin: 1.5ex 0;
}

.ka-userbox, .ka-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--ka-background-button-color);
    border-color: var(--ka-border-button-color);
    color: var(--ka-text-button-color);
    font-weight: bold;
    cursor: pointer;
}

.ka-userbox:active, .ka-date:active  {
    color: var(--text-color);
    background-color: var(--background-color);
}

.ka-open {
    color: var(--text-color);
    background-color: var(--background-color);
}

.ka-button, button, .ka-userbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-width: 100%;
    min-height: 5ex;
    max-height: 5ex;
    background-color: var(--ka-background-button-color);
    border: 3px outset var(--ka-border-button-color);
    color: var(--ka-text-button-color);
    overflow: hidden;
    text-overflow: clip;
    font-family: var(--ka-text-button-font);
    font-size: 14pt;
    user-select: none;
    cursor: pointer;
    box-shadow: 1px 1px 1px var(--ka-tooltip-shadow-color);
}
.ka-button .time {
    font-size: 0.9em !important;
    color: var(--ka-text-alt-button-color);
}

.ka-button .date, .ka-button .time {
    padding: 0;
}

.ka-button.ka-fat {
    font-weight: bold;
}

.ka-button.ka-small {
    min-height: 4ex;
    max-height: 4ex;
}
.ka-light {
    font-weight: normal;
}

.ka-button.ka-foldable {
    user-select: unset;
    cursor: unset;
}


.ka-button.ka-open {
    color: var(--ka-text-button-active-color);
    background-color: var(--ka-background-button-active-color);
    border-color: var(--ka-border-button-active-color);
    border-style: inset;

}

.ka-button .ka-foldbottom, .ka-button .ka-foldtop, button {
    box-sizing: border-box;
    padding: 0px 10px;
    width: 100%;
    display: grid;
}

.ka-button .ka-foldbottom {
    background-color: var(--background-color);
    display: none;
}

.ka-button .ka-foldtop {
    user-select: none;
    cursor: pointer;
    min-height: 5ex;
    max-height: 5ex;
}

.ka-button.ka-open .ka-foldbottom {
    font-weight: normal;
    display: grid;
}

.ka-button.ka-open .ka-foldtop {
    border-bottom: var(--ka-border-button-color);
}

.ka-button.ka-foldable.ka-open  {
    min-height: max-content;
    max-height: max-content;
}

.ka-button:active, button:active  {
    color: var(--ka-text-button-active-color);
    background-color: var(--ka-background-button-active-color);
    border-color: var(--ka-border-button-active-color);
    border-style: inset;
    box-shadow: 1px 1px 1px var(--ka-tooltip-shadow-color);
}

.ka-button2.stacked {
    display: grid;
    grid-template-columns: 4ch 1fr 1fr;
    grid-template-rows: 1fr;
}

/*.ka-button2.stacked[data-open="true"] {
}*/

.ka-button2.no-description {
    grid-template-columns: 4ch 1fr;

}

.ka-head.toggable {
    cursor: pointer;
    display: grid;
    grid-template-columns: 4ch 1fr;
}

.ka-button2.no-description > .name {
    display: none;
}

.ka-button2 {
    grid-template-columns: 4ch 1fr;
    color: var(--text-color);
}

.open-close-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 2px outset var(--ka-border-button-color);
}

.open-close-icon:active {
    color: var(--ka-text-button-active-color);
}

.ka-button2 > span {
    cursor: pointer;
    padding: 1.5ex 0.5ch;
    display: inline-block;
    overflow: hidden;
    text-overflow: clip;
    font-family: var(--ka-text-button-font);
    font-size: 14pt;
}

.ka-button2[data-open="true"] > .reference {
    background-color: transparent;
    color: inherit;
}

.ka-button2[data-open="true"]  {
    background-color: var(--ka-background-button-color) !important;
    color: var(--ka-button-color) !important;
    transition:ease-in-out 0.3s;
}

.ka-project:hover > .reference {
    background-color: var(--ka-background-button-color-hover);
}

.ka-project > span {
    cursor: pointer;
    padding: 0.5ex 0.5ch;
    display: inline-block;
    min-height: 8ex;
    max-height: 8ex;
    overflow: hidden;
    text-overflow: clip;
}

.ka-project .reference {
    font-weight: bold;
    color: var(--company-text-color);
    background-color: var(--ka-button-background-color);
    overflow: hidden;
    margin:0;
}

.ka-project > .name {
    max-width: calc(100% - 16ch);
    min-width: calc(100% - 16ch);
    position: absolute;
    right: 0;
    top: 0;
}
.ka-project.extended {
    max-height: none;
}

.ka-project-detail {
    padding: 0.2ex 0.2ch;
    clear:both;
    background-color: var(--background-color);
}

/* TopSheetSelect trigger (Travail / Processus) */
.ka-project-detail .selectInput {
    border: 2px solid var(--ka-border-button-color, var(--text-color, #000));
    padding: 0.5ex 0.8ch;
    margin: 1ex 0;
    min-height: 1.5em;
    line-height: 1.5;
    cursor: pointer;
    background-color: var(--background-color, #fff);
    color: var(--text-color, inherit);
    box-sizing: border-box;
}
.ka-project-detail .selectInput .label {
    display: block;
    font-size: 0.8em;
    opacity: 0.85;
}
.ka-project-detail .selectInput .value {
    display: block;
    font-size: 1em;
    font-weight: bold;
    min-height: 1.5em;
    border-bottom: 1px dotted transparent;
}
.ka-project-detail .selectInput .value:empty {
    border-bottom: 1px dotted var(--text-color, #000);
}

.ka-project > .name {
    color: var(--ka-button-background-color);
    background-color: var(--background-color);
    transition: ease-in-out 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1.15;
    white-space: nowrap;
}

.ka-project > .name .title,
.ka-project > .name .manager {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ka-project > .name .manager {
    font-size: 0.85em;
    font-weight: normal;
    opacity: 0.75;
}

.ka-project > .reference {
    color: var(--company-text-color);
    background-color: var(--ka-background-button-color);
    transition:ease-in-out 0.3s;
}

.ka-project[data-open="true"] {
    color: var(--company-text-color);
    background-color: var(--ka-background-button-color);
    transition: ease-in-out 0.3s;
}
.ka-project[data-open="true"] > .name {
    color: inherit;
    background-color: inherit;
    transition: ease-in-out 0.3s;
}

.ka-project[data-open="true"] > .reference {
    color: inherit;
    background-color: inherit;
    transition:ease-in-out 0.3s;
}


.ka-button > span {
    cursor: pointer;
    padding: 1.5ex 0.5ch;
    display: inline-block;
    min-height: 2ex;
    max-height: 4ex;
    overflow: hidden;
    text-overflow: clip;
}

.ka-button .name {
    max-width: calc(100% - 16ch);
    min-width: calc(100% - 16ch);
    height: 100%;
}

.ka-button[data-open="true"] > .reference {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: ease-in-out 0.3s;
}

.ka-button[data-open="true"] > .name {
    background-color: var(--ka-button-background-color);
    color: var(--ka-button-color);
    transition:ease-in-out 0.3s;
}

.ka-project .ka-head {
    background-color: var(--company-color-dark);
    color: var(--company-text-color);
    min-height: 4ex;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.ka-project .ka-button {
    min-height: 4ex;
}

.ka-project-detail .reference {
    background-color: var(--ka-button-blended-bg);
    color: var(--text-color);
    max-height: 2ex;
    min-height: 2ex;
}

.ka-project-detail .ka-subhead {
    min-height: 5ex;
    color: var(--text-color);
    font-weight: bold;
    text-align: center;
}

.ka-timebox {
    margin: 3ex 0;
}

.ka-timebox input {
    min-width: 100%;
    max-width: 100%;
}

.ka-timebox .ka-time-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 1.2ch;
    width: 100%;
    box-sizing: border-box;
}

.ka-timebox .ka-time-field {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ka-timebox .ka-time-field input {
    min-width: 0;
    width: 100%;
    align-self: stretch;
}

.ka-timebox .ka-time-row > .ka-checkbox {
    flex: 0 0 auto;
    max-width: none;
    min-width: auto;
    white-space: nowrap;
    align-self: flex-end;
}

.ka-timebox .ka-time-row > .ka-checkbox input[type="checkbox"] {
    min-width: 32px;
    max-width: 32px;
}

.ka-timebox .ka-km-row {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.ka-timebox .ka-km-row .ka-checkbox {
    max-width: none;
    min-width: auto;
    white-space: nowrap;
}

.ka-timebox .ka-km-row input[type="text"] {
    min-width: 8ch;
    max-width: 12ch;
    width: 10ch;
}

.ka-timebox .ka-privatekm-row {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.ka-timebox .ka-privatekm-row .ka-checkbox {
    max-width: none;
    min-width: auto;
    white-space: nowrap;
}

.ka-timebox .ka-privatekm-row input[type="number"] {
    min-width: 8ch;
    max-width: 12ch;
    width: 10ch;
}

.ka-timebox .ka-day {
    cursor: pointer;
    display: inline-block;
    padding: 1ex 0.8ch;
    border: 2px solid var(--ka-border-button-color);
    margin: 0.2ex 0.2ch;
}

.ka-timebox .ka-day.selected {
    border: 2px solid var(--ka-border-button-color);
    background-color: var(--ka-background-button-active-color);
}

.ka-input label {
    display: inline-block;
    max-width: 8ch;
    min-width: 8ch;
}

.ka-previous-time {
    font-size: 0.9em;
}

.ka-previous-time .ka-head {
    background-color: var(--input-background-color-error);
}

.ka-total-day, .ka-time-entry {
    padding: 0.4ex 0;
}

.ka-time-entry {
    cursor: pointer;
    padding: 1.5ex 0;
}

.ka-time-entry .project-reference {
    margin-left: 2ch;
}

.ka-time-entry .time {
    font-weight: bold;
}
.ka-time-entry .remark {
    overflow: hidden;
    text-overflow: clip;
}

.ka-total-day span, .ka-time-entry span {
    padding: 0 0.2ch;
}

.ka-total-day {
    font-weight: bold;
    color: var(--company-text-color);
    background-color: var(--company-color-dark);
}

.ka-input button {
    width: 100%;
    margin: 0.2ex 0.2ch;
}

.ka-time-entry.highlight {
    background-color: var(--ka-button-background-color);
    color: var(--company-text-color)
}

.ka-time-entry.ka-unmodifiable {
    background-color: var(--ka-input-readonly-bgcolor);
    cursor: default;
}

#KAMsgLine {
    position: fixed;
    bottom: 0px;
    width: calc(38% - 14px);
    margin: 0;
    left: calc(50% - ((38% - 14px) / 2));
    padding: 5px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-family: var(--ka-text-default-mono-font);
    margin: auto;
}

.ka-error {

    border: 2px solid var(--input-background-color-error);
    background-color: var(--input-background-color-error);
    color: var(--text-color);
}

.ka-info {
    border: 2px solid var(--company-color);
    background-color: var(--input-background-color);
    color: var(--text-color);
}

.ka-project-entry {
    display: grid;
    flex-direction: row;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: 8ex;
    column-gap: 5px;
    grid-template-rows: auto;
    justify-items: stretch;
    align-items: stretch;
}

.ka-button .ka-project-entry {
    display: grid;
    grid-template-columns: 8ch 16ch minmax(0, 2fr) minmax(0, 1fr);
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.ka-project-entry span {
    display: grid;
    overflow: hidden;
    text-overflow: clip;
    padding: 0 0.2ch;
    align-items: center;
    justify-items: flex-start;
}

.ka-project-entry span:first-child {
    padding-left: 0px;
}

.ka-project-entry span:last-child {
    padding-right: 0px;
}

.ka-button.ka-day-entry {
    min-height: 8ex;
    max-height: 8ex;
}

.ka-project-entry .project-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.15;
    white-space: nowrap;
}

.ka-project-entry .project-name .title,
.ka-project-entry .project-name .manager {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ka-project-entry .project-name .manager {
    font-size: 0.85em;
    font-weight: normal;
    opacity: 0.85;
}


/*
.ka-full-project.ka-open {
    min-height: 24ex;
    max-height: 24ex;
    grid-template-rows: 8ex auto;

}

.ka-full-project span {
    display: block;
    height: 2.6ex;
    font-size: 1.2em;    
}

.ka-full-project form {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: -1;
    min-width: 100%;
    grid-row-end: 2;
    background-color: var(--background-color);
    border: 2px solid var(--ka-border-button-color);
    min-height: 16ex;
    display: none;
    color: var(--text-color);
} */

.ka-button.ka-open form {
    display: grid;
    grid-template-columns: [label1] 1fr [input1]  1fr [label2] 1fr [input2] 1fr [end];
    grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [end];
    align-items: center;
    row-gap: 2px;
    column-gap: 4px;
}

.ka-button.ka-open form .ka-total-show {
    grid-column: input1 / end;
}

.ka-button.ka-open form input, .ka-button.ka-open form button {
    height: 80%;
}

.ka-button.ka-open form input[name="comment"] {
    grid-column: input1 / end;
}

.ka-button.ka-open form button {
    grid-column: span 2;
}

.ka-date-selector, .ka-user-action {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    width: 100%;
}

input, button, select {
    min-height: 6ex;
}

input, select {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.ka-forecast h1 {
    font-size: 14pt;
    color: var(--company-text-color);
    background-color: var(--title-background-color);
    padding: 6px 0px;
    text-align: center;
}

.ka-forecast h2 {
    font-size: 12pt;
    text-decoration: underline;
    padding: 6px 0px;
    text-align: center;
}

.ka-forecast-project {
    display: grid;
    grid-template-columns: 1fr 2fr;
    row-gap: 10px;
    padding: 10px 5px;
    margin: 4px 0px;
}

.ka-forecast-project > span {
    padding: 4px 4px;
}

.ka-forecast-project .coworker {
    background-color: var(--background-color);
    color: var(--text-color);
}

.ka-forecast-project .manager {
    background-color: var(--ka-button-blended-bg);
    color: var(--text-color);
}

.ka-spacer-title {
    font-size: 0.8em;
    margin-top: 1ex;
    font-weight: bold;
    text-align: right;
}

@media (max-width: 480px) {
    .ka-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    .ka-button.ka-open form {
        display: grid;
        grid-template-columns: [label1] 1fr [input1]  1fr  [end];
        grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [end];
        align-items: center;
        row-gap: 2ex;
        column-gap: 4px;
    }
    
    .ka-button, .ka-button .ka-foldtop, button {
        min-height: 6ex;
        max-height: 6ex;
    }

    .ka-button, .ka-button2 > span {
        font-size: 14px !important;
    }
    .ka-project, .ka-userbox, .ka-login, .ka-date {
        min-height: 8ex;
        max-height: 8ex;
    }
    .ka-project > span {
        min-height: 8ex;
        max-height: 8ex;
    }
}

@media (min-width: 1080px) {
    .ka-container {
        width: 40%;
        max-width: 40%;
        margin: auto;
    }
    .ka-project, .ka-userbox, .ka-login, .ka-search, .ka-date {
        min-width: calc(100% - 4ch);
        max-width: calc(100% - 4ch);
    }

    #KAMsgLine {
        left: 0;
        width: calc(100% - 14px);
    }
}