:root {
    --page-bg: whitesmoke;
    --container-bg: white;
    --border-default: 1px solid grey;
    --border-subtle: 1px solid silver;
    --font-family: sans-serif;
    --link-color: blue;
    --text-muted: grey;
    --portal-container-width: 600px;
    --explorer-container-width: 900px;
    --container-margin: 50px auto;
    --container-padding: 20px;
}

body {
    font-family: var(--font-family);
    background-color: var(--page-bg);
    margin: 0;
}

/* common */
.divider {
    border: 0;
    border-top: var(--border-default);
    margin: 20px 0;
}

/* header */
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.header a {
    color: var(--link-color);
    text-decoration: none;
}

#usermenu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* footer */
.footer {
    display: flex;
    justify-content: center;
    color: var(--text-muted);
}

/* main */
.container {
    max-width: var(--portal-container-width);
    margin: var(--container-margin);
    padding: var(--container-padding);
    background-color: var(--container-bg);
    border: var(--border-default);
}

.form-group {
    display: flex;
    align-items: center;
}

.form-group label {
    width: 200px;
    flex-shrink: 0;
}

.main-content a {
    color: var(--link-color);
    text-decoration: none;
}

/* register */
#login-a {
    color: var(--link-color);
    text-decoration: none;
}

#register-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* profile */
.info-row {
    display: flex;
}

.info-label {
    width: 100px;
    flex-shrink: 0;
}

/* explorer */
.explorer-container {
    max-width: var(--explorer-container-width);
    margin: var(--container-margin);
    padding: var(--container-padding);
    background-color: var(--container-bg);
    border: var(--border-default);
}

#work-content .info-label,
#author-content .info-label,
#edition-content .info-label {
    width: 150px;
}

#edition-work a {
    color: var(--link-color);
    text-decoration: none;
}

/* search box */
.search-box {
    border: var(--border-default);
    margin-top: 20px;
    padding: var(--container-padding);
}

.search-form {
    display: flex;
}

.search-form input[type="text"] {
    flex-grow: 1;
}

.list-control-bar {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.control-group {
    display: flex;
    gap: 10px;
}

/* Search Table */
.search-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border: var(--border-default);
}

.search-table th,
.search-table td {
    padding: 4px 8px;
    border-bottom: var(--border-subtle);
}

.search-table th {
    background-color: var(--page-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.search-table td a {
    color: var(--link-color);
    text-decoration: none;
}

.search-table td.empty-message {
    text-align: center;
    color: var(--text-muted);
    padding: 24px;
}

/* journal */
.journal-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.journal-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.journal-list li {
    display: flex;
    justify-content: space-between;
    border-bottom: var(--border-subtle);
    padding: 8px 0;
}

.journal-date {
    color: var(--text-muted);
    font-size: 12px;
}

.journal-field {
    margin-bottom: 10px;
}

.journal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
}

.journal-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    font-family: var(--font-family);
    resize: vertical;
}

.journal-actions {
    display: flex;
    gap: 8px;
}

.journal-message {
    margin-top: 8px;
    font-size: 14px;
}

#entry-date {
    margin-bottom: 16px;
}

#entry-content {
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 20px;
}