:root {
    --clr-main-400: hsla(0, 0%, 35%, 1.00);
    --clr-main-500: hsla(0, 0%, 45%, 1.00);
    --clr-main-600: hsla(0, 0%, 55%, 1.00);
    --clr-main-900: hsla(0, 0%, 95%, 1.00);
    --clr-white: hsla(0, 0%, 100%, 1.00);
    --clr-black: hsla(0, 0%, 0%, 1.00);
    --clr-gray: hsla(0, 0%, 80%, 1.00);
    --clr-lightgray: hsla(0, 0%, 90%, 1.00);
    --clr-lightblue: hsla(220, 95%, 85%, 1.00);
    --clr-red: hsla(357, 95%, 55%, 1.00);
    --clr-lightred: hsla(357, 95%, 85%, 1.00);
    --clr-lightorange: hsla(37, 100%, 73%, 1);
    --clr-lightyellow: hsla(59, 95%, 85%, 1.00);
    --clr-green: hsla(124, 65%, 45%, 1.00);
    --clr-lightgreen: hsla(124, 95%, 85%, 1.00);

    --header-clr: var(--clr-main-400);
    --menu-clr: var(--clr-main-900);
    --row-highlight-clr: hsla(0, 0%, 98%, 1.00);

    --container-padding-inline: 1.50rem;
    --container-padding-block: 0.50rem;

    --ff-main: sans-serif;
    --fs--400: 1.00rem;
}

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

/**
 * Layout
 */
.page-wrap {
    display: grid;
    grid-template-columns: fit-content(16rem) 1fr;
    grid-template-rows: fit-content(8rem) 1fr min-content;
    grid-template-areas:
        "header header"
        "menu content"
        "footer footer";
    min-height: 100vh;
    color: var(--clr-black);
    font-family: var(--ff-main);
    font-size: var(--fs--400);
}

.page-header {
    --link-clr: var(--clr-white);
    --link-hover-clr: var(--clr-gray);

    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: var(--container-padding-inline);
    padding-block: var(--container-padding-block);
    background-color: var(--header-clr);
    color: var(--clr-white);
}

.page-menu {
    grid-area: menu;
    padding-block: var(--container-padding-block);
    background-color: var(--menu-clr);
}

.page-content {
    position: relative;
    grid-area: content;
    padding-left: calc(var(--container-padding-inline) / 2);
    padding-right: var(--container-padding-inline);
    padding-block: var(--container-padding-block);
}

.page-footer {
    --link-clr: var(--clr-white);
    --link-hover-clr: var(--clr-gray);

    grid-area: footer;
    padding-inline: var(--container-padding-inline);
    padding-block: var(--container-padding-block);
    background-color: var(--header-clr);
    text-align: center;
    color: var(--clr-white);
}

/**
 * Forms
 */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"],
select {
    padding-inline: 0.15em;
    min-width: 64ch;
    font-family: var(--ff-main);
    font-size: var(--fs--400);
}

select {
    border: 1px solid var(--clr-main-400);
    background-color: var(--clr-main-900);
}

button,
.button {
    --text-clr: var(--clr-black);
    --bg-clr: var(--clr-main-900);
    --border-clr: var(--clr-main-400);

    display: inline-block;
    padding-inline: 1.00em;
    padding-block: 0.25em;
    border: 1px solid var(--border-clr);
    background-color: var(--bg-clr);
    color: var(--text-clr);
    font-family: var(--ff-main);
    font-size: var(--fs--400);
}

button:hover,
button:focus-visible,
.button:hover,
.button:focus-visible {
    --text-clr: var(--clr-white);
    --bg-clr: var(--clr-main-400);
    --border-clr: var(--clr-main-900);

    cursor: pointer;
    color: var(--text-clr);
}

form .helptext {
    font-size: 0.75rem;
}

form .errorlist {
    color: var(--clr-red);
}

form label.required::after {
    content: " *";
    color: var(--clr-red);
}

.domain-select-form select {
    font-size: 1.5rem;
}

/**
 * Text
 */
h2,
h3,
h4 {
    margin-bottom: 0.50em;
}

p:where(:not(:last-child)) {
    margin-bottom: 0.25em;
}

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

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

.text-bold {
    font-weight: bold;
}

.text-clr-red {
    color: var(--clr-red);
}

.text-clr-green {
    color: var(--clr-green);
}

/**
 * Links
 */
:where(a) {
    color: var(--link-clr, var(--clr-main-500));
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--link-hover-clr, var(--clr-main-400));
}

/**
 * Navigation
 */
.page-menu ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
}

.page-menu a {
    display: block;
    padding-inline: var(--container-padding-inline);
    padding-block: 0.25rem;
}

.page-menu a:hover,
.page-menu a:focus-visible {
    background-color: var(--clr-main-600);
    color: var(--clr-main-900);
}

/**
 * Tables
 */
table {
    --border-clr: var(--clr-lightgray);
    --table-border: 1px solid var(--border-clr);

    min-width: 100%;
    margin-block: 0.50rem;
    border-collapse: collapse;
}

table th,
table td {
    padding-block: 0.25rem;
    padding-inline: 0.15rem;
    border: var(--table-border);
}

.table--without-border {
    --table-border: none;
}

.table__row--bottom-sep {
    border-bottom: 3px solid var(--border-clr);
}

.campaign-table tbody tr:nth-child(4n + 1),
.campaign-table tbody tr:nth-child(4n + 2),
.event-table tbody tr:nth-child(6n + 1),
.event-table tbody tr:nth-child(6n + 2),
.event-table tbody tr:nth-child(6n + 3) {
    background-color: var(--row-highlight-clr);
}

/**
 * Lists
 */
ul,
ol {
    list-style-position: inside;
}

li:where(:not(:last-child)) {
    margin-bottom: 0.25rem;
}

/**
 * Alerts
 */
.alerts {
    position: absolute;
    inset: 1.00rem 0 0;
    max-width: fit-content;
    margin-inline: auto;
}

.alerts__message {
    padding-inline: 1.50rem;
    padding-block: 0.75rem;
    background-color: var(--alert-msg-clr, var(--clr-lightblue));
}

.alerts__message--info {
    --alert-msg-clr: var(--clr-lightblue);
}

.alerts__message--warning {
    --alert-msg-clr: var(--clr-lightyellow);
}

.alerts__message--error {
    --alert-msg-clr: var(--clr-lightred);
}

.alerts__message--success {
    --alert-msg-clr: var(--clr-lightgreen);
}

/**
 * Boxes
 */
.boxes {
    --box-count: 4;

    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(var(--box-count), 1fr);
}

.boxes--eight {
    --box-count: 8;
}

.boxes--two {
    --box-count: 2;
}

.box {
    padding-inline: 0.75rem;
    padding-block: 0.50rem;
    border: 1px solid var(--clr-main-600);
    margin-bottom: 1.50rem;
}

/**
 * Columns
 */
.columns {
    columns: 3;
}

/**
 * Paginator
 */
.paginator {
    display: flex;
    gap: 1.00rem;
    justify-content: center;
    margin-top: 1.00rem;
    list-style-type: none;
}

.paginator__page a {
    display: inline-block;
    padding-inline: 0.50em;
    padding-block: 0.25em;
    border: 1px solid var(--clr-main-600);
}

/**
 * Tags
 */
.tag {
    --bg-color: var(--clr-main-900);

    padding-inline: 0.50em;
    border: 1px solid var(--clr-black);
    background-color: var(--bg-color);
    color: var(--clr-black);
    font-size: 0.75rem;
    vertical-align: middle;
}

.tag--complete {
    --bg-color: var(--clr-lightgreen);
}

.tag--incomplete {
    --bg-color: var(--clr-lightyellow);
}

.tag--event-accepted {
    --bg-color: var(--clr-lightyellow);
}

.tag--event-delivered {
    --bg-color: var(--clr-lightgreen);
}

.tag--event-opened {
    --bg-color: var(--clr-lightblue);
}

.tag--event-clicked {
    --bg-color: var(--clr-lightorange);
}

.tag--event-failed {
    --bg-color: var(--clr-lightred);
}