:root {
    --app-primary: #7c7bad;
    --app-primary-hover: #69689a;
    --app-navbar: #875a7b;
    --app-action: #00a09d;
    --app-action-hover: #008986;
    --app-text: #4c4c4c;
    --app-muted: #a8a8a8;
    --app-background: #f7f7f7;
    --app-surface: #ffffff;
    --app-border: #dee2e6;
    --app-input-border: #cccccc;
    --app-hover: #e9ecef;
    --app-dark: #343a40;
    --app-success: #28a745;
    --app-info: #17a2b8;
    --app-warning: #ffc107;
    --app-danger: #dc3545;
    --app-radius: 3px;
}

html, body {
    min-height: 100%;
    margin: 0;
    font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--app-text);
    background-color: var(--app-background);
}

body, button, input, select, textarea { font-family: inherit; }

a, .btn-link {
    color: var(--app-primary);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--app-primary-hover);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--app-text);
    font-weight: 700;
    line-height: 1.2;
}

h1 { font-size: 26px; }
h2 { font-size: 19.5px; }
h3 { font-size: 16.9px; }
h4 { font-size: 15.6px; }
h5 { font-size: 14.3px; }
h6 { font-size: 13px; }

small, .small, .form-text, .text-muted {
    font-size: 11px;
    color: var(--app-muted) !important;
}

label, .form-label, .col-form-label {
    font-size: 13px;
    color: var(--app-text);
}

.content {
    padding-top: 1.1rem;
    color: var(--app-text);
    background-color: var(--app-surface);
}

.btn, .form-control, .form-select, .input-group-text {
    min-height: 32px;
    border-radius: var(--app-radius);
    font-size: 13px;
    font-weight: 400;
}

.form-control, .form-select {
    color: var(--app-text);
    background-color: var(--app-surface);
    border: 1px solid var(--app-input-border);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.2rem rgba(124, 123, 173, 0.2);
}

.form-control::placeholder { color: var(--app-muted); }

.btn-primary {
    color: #fff;
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff;
    background-color: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
}

.btn-success {
    color: #fff;
    background-color: var(--app-action);
    border-color: var(--app-action);
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
    color: #fff;
    background-color: var(--app-action-hover);
    border-color: var(--app-action-hover);
}

.btn-secondary { border-color: var(--app-border); }
.card, .modal-content, .dropdown-menu, .list-group-item, .table {
    color: var(--app-text);
    border-color: var(--app-border);
}

.card, .modal-content, .dropdown-menu, .alert, .badge { border-radius: var(--app-radius); }
.table-hover > tbody > tr:hover > * { background-color: var(--app-hover); }

.bg-primary { background-color: var(--app-primary) !important; }
.bg-success { background-color: var(--app-success) !important; }
.bg-info { background-color: var(--app-info) !important; }
.bg-warning { background-color: var(--app-warning) !important; }
.bg-danger { background-color: var(--app-danger) !important; }
.text-primary { color: var(--app-primary) !important; }
.text-success { color: var(--app-success) !important; }
.text-info { color: var(--app-info) !important; }
.text-warning { color: var(--app-warning) !important; }
.text-danger, .validation-message { color: var(--app-danger) !important; }

.tag-gray { background-color: #777777; }
.tag-red { background-color: #f06050; }
.tag-orange { background-color: #f4a460; }
.tag-yellow { background-color: #f7cd1f; color: var(--app-dark); }
.tag-light-blue { background-color: #6cc1ed; }
.tag-purple { background-color: #814968; }
.tag-pink { background-color: #eb7e7f; }
.tag-teal { background-color: #2c8397; }
.tag-navy { background-color: #475577; }
.tag-magenta { background-color: #d6145f; }
.tag-green { background-color: #30c381; }
.tag-violet { background-color: #9365b8; }

[class^="tag-"], [class*=" tag-"] {
    color: #fff;
    border-radius: var(--app-radius);
}

h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--app-success); }
.invalid { outline: 1px solid var(--app-danger); }
.darker-border-checkbox.form-check-input { border-color: #929292; }

.blazor-error-boundary {
    padding: 1rem;
    color: #fff;
    background-color: var(--app-danger);
    border-radius: var(--app-radius);
}

.blazor-error-boundary::after { content: "An error has occurred."; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--app-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

.auth-page {
    min-height: calc(100vh - 8rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.auth-page > .row { width: 100%; }

.auth-page section,
.auth-page form {
    background-color: var(--app-surface);
}

.auth-page section {
    padding: 2rem;
    border: 1px solid var(--app-border);
    border-top: 4px solid var(--app-navbar);
    border-radius: var(--app-radius);
    box-shadow: 0 8px 24px rgba(52, 58, 64, 0.08);
}

.auth-page h1 { margin-bottom: 0.35rem; }
.auth-page .form-floating > label { right: 0; left: auto; }
.auth-page .form-check-input { float: right; margin-right: 0; margin-left: 0.5rem; }
.auth-page .btn-lg { font-size: 13px; padding: 0.7rem 1rem; }

.auth-status-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(135, 90, 123, 0.12);
    color: var(--app-navbar);
    font-size: 30px;
}

.auth-status-icon.is-success {
    background: rgba(40, 167, 69, 0.12);
    color: var(--app-success);
}

.auth-status-icon.is-error {
    background: rgba(220, 53, 69, 0.12);
    color: var(--app-danger);
}

@media (max-width: 640px) {
    .auth-page { align-items: flex-start; padding-top: 1rem; }
    .auth-page section { padding: 1.25rem; }
}