:root {
    --color-background: rgb(20, 30, 40);
    --color-card: rgb(30, 40, 50);
    --color-alternate-row: rgb(50,60,70);

    --color-card-dark: rgb(20, 25, 35);
    --color-card-border: rgb(80, 80, 80);
    --color-input: rgb(0,0,0);
    --color-input-border: rgb(120, 130, 140);
    /* --color-input-border: rgb(20, 60, 60);*/
    --color-click: rgb(0,0,0);
    --color-divider: rgb(120, 130, 140);
    --color-flash: rgb(160, 0, 0);
    --color-focus: rgb(40, 180, 80);
    --color-text-label: rgb(150,150,150);
    --color-text: rgb(220,220,200);
    --color-ui-selected: rgb(10, 40, 40);
    --color-ui: rgb(20, 60, 60);
    --color-warn: rgb(160, 0, 0);
    --color-a: rgb(0, 0, 0);
    --color-b: rgb(150, 130, 0);
    --color-c: rgb(40, 130, 40);
}

* {
    font-size: 18px;
    font-family: sans-serif;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
    /* border: 1px solid var(--color-divider);*/
    margin: 0.5rem;
    overflow: hidden;
    background-color: var(--color-background);
    height: calc(100vh - 1rem);
}

/* landing */

.landing {
    height: 100%;
}

.landing-grid {
    display: grid;
    grid-template-rows: 2fr 1fr;
    height: 100%;
}

.landing-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.landing > div {
    /* border: 1px solid var(--color-divider);*/
}

/* group */

.group {
    height: 100%;
}
.group div {
    /* border: 1px solid var(--color-divider);*/
}
.group-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
}
.group-header {
    margin-top: 0.5rem;
}
.group-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.group-content {
    display: grid;
    grid-template-rows: auto 1fr ;
    overflow: auto;
}
.group-slots {
    display: grid;
    overflow: auto;
    scrollbar-gutter: stable ;
    height: 100%;
    grid-template-columns: repeat(4, auto);
}
.group-slots > div {
    height: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: flex;
    align-items: center;
}
.group-slots button {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 0.5rem;
}
.group-users {
    display: grid;
    overflow: auto;
    scrollbar-gutter: stable ;
    height: 100%;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    justify-content: center;
}
.group-users > div {
    height: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: flex;
    align-items: center;
}
.group-tabbar {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.group-tabbar-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.group-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
}
.group-weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.group-batch {
}
.batch-weekdays {
    display: grid;
    grid-template-columns: repeat(8, auto);
    gap: 0.5rem;
    text-align: left;
    align-items: center;
}
.batch-dates {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
}
.batch-create {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.batch-create button {
    min-width: 200px;
}
.batch-times-header {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 0.5rem;
    text-align: left;
}
.batch-times-header button {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 0.5rem;
}
.batch-times {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
    gap: 0.5rem;
}
.batch-time {
    background-color: var(--color-card-dark);
    border-radius: 0.5rem;
    padding-left: 0.5rem;
    /* padding: 0.2rem;*/
    border: 1px solid var(--color-card-border);
}

/* join */

.join {
    height: 100%;
}

.join-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
}

.join-header {
    margin-top: 0.5rem;
}
.join-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.join-form button {
    width: 100%;
}
.join-content {
    display: grid;
    /* grid-template-rows: auto 1fr ;*/
    overflow: auto;
}
.join-slots {
    display: grid;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    grid-template-rows: min-content;
}
.join-slots > div {
    min-height: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: flex;
    align-items: center;
}
.join-info {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.5rem;
}
.join-info div {
    text-align: left;
}
.join-info-layout {
    display: flex;
    justify-content: center;
}

/* vote */

.vote {
    height: 100%;
}

.vote-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
}
.vote-header {
    margin-top: 0.5rem;
}
.vote-content {
    display: grid;
    grid-template-rows: auto 1fr ;
    overflow: auto;
}
.vote-slots {
    display: grid;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    grid-template-rows: min-content;
}
.vote-slots > div {
    min-height: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: flex;
    align-items: center;
}
.vote-info {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.5rem;
}
.vote-info div {
    text-align: left;
}
.vote-info-layout {
    display: flex;
    justify-content: center;
}

/* common */

.nowrap {
    white-space: nowrap;
}

.margin-top {
    margin-top: 0.5rem;
}

.summary-left {
    width: fit-content;
    text-align: left;
}

.centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

.border-radius-left {
    /* border-radius: 1rem 0rem 0rem 1rem;*/
    padding-left: 0.5rem;
    /* border-left: 1px solid var(--color-card-border);*/
}

.border-radius-right {
    /* border-radius: 0rem 1rem 1rem 0rem;*/
    padding-right: 0.5rem;
    /* border-right: 1px solid var(--color-card-border);*/
}

.alternate-row {
    background-color: var(--color-alternate-row);
    /* border-top: 1px solid  var(--color-card-border);*/
    /* border-bottom: 1px solid var(--color-card-border);*/
}

.text-rotated {
    writing-mode: sideways-rl;
    text-align: center;
    white-space: pre-line;
    line-height: 1.2;
}

.sticky {
    background-color: var(--color-card);
    position: sticky;
    top: 0;
    z-index: 1;
}

.sticky.margin-bottom {
    margin-bottom: 0.5rem;
}

.links-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.card {
    background-color: var(--color-card);
    /* border-radius: 1rem;*/
    padding: 1rem;
    box-shadow: 0 0px 1rem rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-card-border);
}

.grid-row {
    display: grid;
    grid-gap: 0.5rem;
}

.slogan {
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 0 0px 1rem rgba(0, 0, 0, 0.3);
    text-align: center;
}

.text-align-center {
    text-align: center;
}

.label {
    display: flex;
    color: var(--color-text-label);
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
}

.label-dark {
    /* font-size: 0.8rem;*/
    color: var(--color-text-label);
    text-align: center;
}

.label-compact {
    /* font-size: 0.9rem;*/
    color: var(--color-text-label);
    margin-bottom: -0.3rem;
    text-align: left;
}

.border-bottom {
    border-bottom: 2px solid var(--color-divider);
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

.border-top {
    border-top: 2px solid var(--color-divider);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.circle {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    /* padding: 0.7rem;*/
}
.circle.clickable {
    cursor: pointer;
}
.circle.a {
    background-color: var(--color-a);
}
.circle.b {
    background-color: var(--color-b);
}
.circle.c {
    background-color: var(--color-c);
}

.quad {
    width: 2rem;
    height: 1.5rem;
    border-radius: 1rem;
    margin-right: 0.5rem;
    text-align: center;
}
.quad.a {
    background-color: var(--color-a);
}
.quad.b {
    background-color: var(--color-b);
}
.quad.c {
    background-color: var(--color-c);
}

@keyframes flash-bg {
    0% { background-color: var(--color-flash); }
    100%   {  }
}

.flash-bg {
    animation: flash-bg 0.5s ease-out;
}

select:focus {
  outline: 3px solid var(--color-focus);
}

input:focus {
  outline: 3px solid var(--color-focus);
}

button:focus {
  outline: 3px solid var(--color-focus);
}

input[type="text"] {
    background-color: var(--color-input);
    border: 1px solid var(--color-input-border);
    /* border-radius: 0rem;*/
    height: 2rem;
    text-align: center;
    padding: 0.2rem 0.5rem 0rem 0.5rem;
}

input[type="date"] {
    background-color: var(--color-input);
    border: 1px solid var(--color-input-border);
    /* border-radius: 0.5rem;*/
    height: 2rem;
    padding: 0.2rem 0.5rem 0rem 0.5rem;
}

input[type="time"] {
    background-color: var(--color-input);
    border: 1px solid var(--color-input-border);
    /* border-radius: 0.5rem;*/
    height: 2rem;
    padding: 0.2rem 0.5rem 0rem 0.5rem;
}

button {
    background-color: var(--color-ui);
    border: 1px solid black;
    border-radius: 1rem;
    cursor: pointer;
    height: 2rem;
    white-space: nowrap;
}
button:active {
    background-color: var(--color-click);
}
button.symbol {
    background-color: transparent;
    border: none;
    margin: 0rem;
    width: 2rem;
    height: 2rem;
}
button.symbol:active {
    background-color: var(--color-click);
}
button.symbol:hover {
    text-shadow: 0 0 1rem var(--color-text);
    /* color: var(--color-warn);*/
}
button.warn:hover {
    color: var(--color-warn);
}
button.selected {
    background-color: var(--color-ui-selected);
}
button.tab {
    outline: 0px solid var(--color-focus);
    border-radius: 0px;
    padding: 0rem 1rem 0rem 1rem;
    cursor: pointer;
}
button.tab.left {
    border-radius: 1rem 0rem 0rem 1rem;
}
button.tab.right {
    border-radius: 0rem 1rem 1rem 0rem;
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: none;
}

input[type="checkbox"] {
    appearance: none;
    border: 0.7rem solid var(--color-input);
    display: inline-block;
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    cursor: pointer;
}

input[type="checkbox"]:checked {
/* border-color: var(--color-text);*/
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    transform: translate(-50%, -60%) rotate(45deg);
    width: 0.45rem;
    height: 1rem;
    border: solid var(--color-text);
    border-width: 0 0.25rem 0.25rem 0;
}

.debug-position {
    position: absolute;
    top: 1rem;
    left: 1rem;
}
.debug {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.debug button {
    min-width: 200px;
}