/* 
   This file is loaded early, and should rarely be touched.
   ALL overrides should be done in an associated CSS file.
*/

html {
    font-size: 100%; /*16px*/
    height: 100%;
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight);
    line-height: var(--height-line);
    color: var(--color-text);
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: var(--color-bg);
    background-repeat: repeat;
}

main {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: visible;
    flex-wrap: wrap;
}

.hidden,
[hidden] {
    display: none !important;
}

a,
a:visited {
    color: var(--color-link);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

pre {
    max-width: 100%;
    white-space: pre-wrap;
}

lmnhq-panel > h2,
lmnhq-panel > h3,
lmnhq-panel > h4,
lmnhq-panel > h5,
lmnhq-alert > h2,
lmnhq-alert > h3,
lmnhq-alert > h4,
lmnhq-dialog > h2,
lmnhq-dialog > h3,
lmnhq-dialog > h4,
[role="group"] > h2,
[role="group"] > h3,
[role="group"] > h4,
[role="group"] > h5,
lmnhq-panel > form > h2,
lmnhq-panel > form > h3,
lmnhq-panel > form > h4,
lmnhq-panel > form > h5 {
    font-weight: var(--font-weight-bold);
    line-height: var(--height-line);
    font-size: var(--font-size);
    border-bottom: 1px solid var(--color-input-border);
    padding: var(--padding-panel);
    display: block;
    width: calc(100% - (var(--padding-panel) * 2));
    flex-basis: 100%;
    background: linear-gradient(
	0deg,
	rgba(0, 0, 0, 0) calc(100% - (var(--padding-panel) / 2)),
	rgba(0, 0, 0, 0.05) 100%
    );
    position: relative;
    text-align: left;
}

.icon--before:before,
lmnhq-panel > h2:before,
lmnhq-panel > section > h2:before {
    content: "";
    display: block;
    width: var(--height-line);
    height: var(--height-line);
    float: left;
    margin-right: calc(var(--padding-panel) / 2);
    opacity: 0.3;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Buttons in Headers */
h2 > form {
    position: absolute;
    width: auto;
    height: 2rem;
    top: var(--padding-panel);
    right: 0;
}

/* Labels used to activate hidden form elements */
h2 > form label,
h2 > form button {
    width: unset;
    display: block;
    position: relative;
    margin: 0;
    height: var(--height-line);
    float: left;
    line-height: var(--height-line);
    background-color: var(--color-ok);
    border-width: 0;
    color: var(--color-ok-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    border-radius: 0;
    min-width: var(--height-line);
    padding: 0 var(--padding-input-x);
    cursor: pointer;
    font-style: normal;
}

h2 > form label:before,
h2 > form button:before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    filter: invert(100);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

h2 > form label:first-child,
h2 > form button:first-child {
    border-top-left-radius: var(--container-border-radius);
    border-bottom-left-radius: var(--container-border-radius);
}

h2 > form button.last,
h2 > form label:last-child,
h2 > form button:last-child {
    margin-right: var(--padding-panel);
    border-top-right-radius: var(--container-border-radius);
    border-bottom-right-radius: var(--container-border-radius);
}

h2 > form label:not([disabled]):hover,
h2 > form button:not([disabled]):hover {
    cursor: pointer;
    background-color: var(--color-ok-hover);
}

h2 > span[data-bind$="color"]:first-child {
    margin-right: calc(var(--padding-panel) / 2);
}

p {
    margin: var(--padding-panel) 0 0 0;
}

.loading {
    position: relative;
}

.loading:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 6;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 7rem;
    background-position: center;
    background-repeat: no-repeat;
    cursor: progress;
}

.align-left {
    margin-right: auto;
    margin-left: 0;
}

.align-right {
    margin-left: auto;
    margin-right: var(--padding-panel);
}

body.dash lmnhq-panel > form {
    justify-content: space-evenly;
    border-bottom: 1px solid var(--color-input-border);
}

lmnhq-panel figcaption,
lmnhq-panel label {
    display: block;
    line-height: var(--height-input-field);
    font-style: italic;
    margin-top: var(--padding-panel);
}

lmnhq-panel figcaption {
    opacity: 0.5;
}

lmnhq-panel .quarter figcaption + span,
lmnhq-panel .third figcaption + span,
lmnhq-panel .half figcaption + span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}

.sixth,
.fifth,
.quarter,
.third,
.half,
.twothirds,
.full {
    flex-basis: calc(100% - (var(--padding-panel) * 2));
}

.half span[data-bind] {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

textarea.half,
input.half {
    flex-basis: calc(100% - (var(--padding-panel) * 3));
}

@media screen and (min-width: 33rem) {
    .twothirds {
	flex-basis: calc(
	    (((100% - (var(--padding-panel) * 4)) / 3) * 2) + var(--padding-panel)
	);
    }

    .half {
	flex-basis: calc((100% - (var(--padding-panel) * 3)) / 2);
	width: calc((100% - (var(--padding-panel) * 3)) / 2);
    }

    .third {
	flex-basis: calc((100% - (var(--padding-panel) * 4)) / 3);
	width: calc((100% - (var(--padding-panel) * 4)) / 3);
    }

    .cards.thirds .card,
    .cards.thirds lmnhq-paginated-row {
	flex-basis: calc((100% - ((var(--padding-panel) + 2px) * 4)) / 3);
    }

    .quarter {
	flex-basis: calc((100% - (var(--padding-panel) * 5)) / 4);
	/* LN 2024-11-26: fix override rate dropdown from spilling over on edit-timetabled-class */
	width: calc((100% - (var(--padding-panel) * 5)) / 4);
    }

    .cards.quarters .card,
    .cards.quarters lmnhq-paginated-row {
	flex-basis: calc((100% - ((var(--padding-panel) + 2px) * 5)) / 4);
    }

    .fifth {
	flex-basis: calc((100% - (var(--padding-panel) * 6)) / 5);
    }

    .cards.fifths lmnhq-paginated-row {
	flex-basis: calc((100% - ((var(--padding-panel) + 2px) * 6)) / 5);
    }

    .sixth {
	flex-basis: calc((100% - (var(--padding-panel) * 7)) / 6);
    }
}

lmnhq-panel[name="documentation"][active="true"] {
    display: block !important;
    user-select: text;
    cursor: unset;
}

lmnhq-panel[name="documentation"] p,
lmnhq-panel[name="documentation"] ul {
    text-align: left;
    margin: var(--padding-panel);
    position: relative;
}

lmnhq-panel[name="documentation"] ul {
    padding-left: var(--padding-panel);
}

lmnhq-panel[name="documentation"] p + * {
    margin-top: 0;
}

/* Symfony, I love you but... */
.sf-toolbar {
    position: absolute;
}