/* Defaults */
*{
    margin: 0;
    padding: 0;
}

/* Page Body */
.page-body {
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #F5E5C9;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* NavBar sections */
.navbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: inherit;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border-bottom: solid;
    padding: 0.5rem 1rem; /* Padding top/bottom then left/right */
    flex-grow: 0;
    flex-shrink: 0;
}
.navbar-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.navbar-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.navbar-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

/* Navbar content */
.page-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: bold;
    margin: 0;
    text-align: center;
}

/* Body sections */
.page-content {
    background-color: #F5E5C9;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem; /* Padding top/bottom then left/right */
    height: 100%;
    flex-grow: 100;
    flex-shrink: 0;
}

/* Body content */
.section-header {
    display: block;
    font-size: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
.sub-section-header {
    display: block;
    font-size: 1.35rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
.section-content {
    padding: 0.5rem 0rem; /* Padding top/bottom then left/right */
}
.collapsible-section-name {
    font-size: 1.25rem;
    font-weight: bold;
}
.collapsible-section-content {
    padding: 0.5rem 1rem; /* Padding top/bottom then left/right */
}
.flow-left-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem
}
.flow-left-right-spread {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem
}
.flow-top-bottom-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem
}
.flow-top-bottom-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1rem
}
.flow-bottom-top {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem
}
.list-table {
    border-top: thin;
    border-bottom: thin;
    border-left: thin;
    border-right: thin;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
}
.list-table-row {
    border-top: thin;
    border-bottom: thin;
    border-left: thin;
    border-right: thin;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
}
.list-table-header {
    border-top: thin;
    border-bottom: thin;
    border-left: thin;
    border-right: thin;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
    font-size: 1.1rem;
    padding: 0.2rem 1rem; /* Padding top/bottom then left/right */
}
.list-table-entry {
    border-top: thin;
    border-bottom: thin;
    border-left: thin;
    border-right: thin;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
    padding: 0.5rem 1rem; /* Padding top/bottom then left/right */
}
.bullet-list {
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    padding-left: 2rem;
}
.bullet-point {
    padding-bottom: 0.25rem;
}


/* Footer sections */
.footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: solid;
    padding: 0.5rem 1rem; /* Padding top/bottom then left/right */
    flex-grow: 0;
    flex-shrink: 0;
}
.footer-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.footer-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.footer-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

/* Footer content */
.username {
    padding: 0.5rem;
}

/* Forms */
.text-input {
    border-style: solid;
}
.text-input:invalid {
    border-color:#dc2626;
}
.text-input:valid {
    border-color:#16a34a;
}
.text-number-input {
    text-align: right;
    width: 2rem;
}
.text-area {
    resize: none;
    field-sizing: content;
    font-family: inherit;
    font-size: inherit;
    min-height: 4rem;
    min-width: 15rem;
    padding: 0.5rem;
}
.text-area-full-width {
    width: 85vw;
}
.text-area-static {
    resize: none;
    field-sizing: content;
    width: stretch;
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: none;
    outline: none;
}
.submit-button {
    padding: 0.5rem 1rem; /* Padding top/bottom then left/right */
}

/* Generic Modifiers */
.slim {
    max-width: fit-content;
}
.wide {
    width: stretch;
}
.max-width {
    width:100%;
}
.tall {
    height: stretch;
}
.align-end {
    align-self: end;
}
.text-centred {
    text-align: center;
}
.text-right {
    text-align: right;
}
.no-padding {
    padding: 0;
}
.pad-right-1 {
    padding-right: 1rem;
}
.white-space-pre {
    white-space: pre;
}