/* ==========================================================================
   Application styles (on top of the Radzen theme)
   ========================================================================== */

html, body {
    margin: 0;
    font-family: var(--rz-text-font-family, Roboto, 'Helvetica Neue', Arial, sans-serif);
}

h1:focus {
    outline: none;
}

.app-content {
    padding: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
}

.header-user {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
}

@media (max-width: 640px) {
    .header-user-name {
        display: none;
    }
}

.language-selector-value {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.language-selector-value .rzi {
    font-size: 1.1rem;
}

.account-languages {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.account-languages a {
    color: inherit;
    text-decoration: none;
    opacity: 0.7;
}

.account-languages a.active {
    opacity: 1;
    font-weight: 600;
}

/* KPI tiles on the dashboard */
.stat-card {
    height: 100%;
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
}

.stat-card .stat-icon {
    font-size: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    opacity: 0.85;
}

.stat-card a {
    text-decoration: none;
    color: inherit;
}

/* Due date colouring */
.due-overdue {
    color: var(--rz-danger);
    font-weight: 600;
}

.due-soon {
    color: var(--rz-warning-dark, var(--rz-warning));
    font-weight: 600;
}

.task-key {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.875em;
    white-space: nowrap;
}

/* Labels */
.label-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

a.label-badge:hover {
    filter: brightness(0.92);
    text-decoration: none;
}

.label-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.label-tile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rz-base-300, #ddd);
    border-radius: var(--rz-border-radius, 4px);
    color: var(--rz-text-color);
    text-decoration: none;
    font-size: 0.875rem;
}

.label-tile:hover {
    border-color: var(--rz-primary);
    text-decoration: none;
}

.label-tile-count {
    font-weight: 600;
}

.color-swatch {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.color-swatch.selected {
    border-color: var(--rz-text-color);
    box-shadow: 0 0 0 2px var(--rz-base-background-color, #fff) inset;
}

.task-done-title {
    text-decoration: line-through;
    opacity: 0.6;
}

.clickable-rows .rz-data-row {
    cursor: pointer;
}

/* Group tree on the customer page */
.group-tree {
    min-height: 200px;
}

.group-tree-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.group-tree-label .group-count {
    margin-left: auto;
}

.markdown-body {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.markdown-body > :first-child {
    margin-top: 0;
}

.markdown-editor .rz-markdown-editor {
    min-height: 260px;
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rz-border-radius, 4px);
    box-shadow: var(--rz-shadow-1, 0 1px 3px rgba(0, 0, 0, .12));
}

.markdown-field .rz-markdown-editor img {
    max-width: 100%;
    height: auto;
}

.markdown-field.drop-target .rz-markdown-editor {
    outline: 2px dashed var(--rz-primary);
    outline-offset: 2px;
}

.markdown-field-input {
    display: none;
}

/* Notebook */
.note-editor .rz-markdown-editor {
    min-height: 420px;
}

.note-list-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem;
    border-bottom: 1px solid var(--rz-base-200, #eee);
    color: var(--rz-text-color);
    text-decoration: none;
}

.note-list-item:hover {
    background: var(--rz-base-100, #f6f6f6);
    text-decoration: none;
}

.note-list-item:last-child {
    border-bottom: 0;
}

.note-list-item .note-icon {
    flex: none;
    margin-top: 0.125rem;
}

.note-list-item .note-title {
    font-weight: 600;
}

.note-list-item .note-excerpt {
    font-size: 0.875rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.muted {
    color: var(--rz-text-secondary-color);
}

/* ==========================================================================
   Validation & error UI (from the Blazor template)
   ========================================================================== */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--rz-success, #26b050);
}

.invalid {
    outline: 1px solid var(--rz-danger, #e50000);
}

.validation-message {
    color: var(--rz-danger, #e50000);
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

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

/* ==========================================================================
   Account (ASP.NET Core Identity) pages.
   These pages are rendered statically (no interactivity), so they keep plain
   HTML forms. The rules below replace the few Bootstrap classes they use and
   map them to the Radzen theme variables.
   ========================================================================== */

.account-shell {
    min-height: 100vh;
    background: var(--rz-body-background-color, var(--rz-base-100, #f4f5f9));
    color: var(--rz-text-color);
}

.account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: var(--rz-header-background-color, var(--rz-base-background-color, #fff));
    color: var(--rz-header-color, var(--rz-text-color));
    box-shadow: var(--rz-shadow-1, 0 1px 3px rgba(0, 0, 0, .12));
}

.account-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.account-actions form {
    margin: 0;
}

.account-brand, .account-back, .account-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.account-logout {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.account-brand {
    font-size: 1.25rem;
    font-weight: 500;
}

.account-content {
    padding: 2rem 1rem;
}

.account-card {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--rz-base-background-color, #fff);
    border-radius: var(--rz-border-radius, 4px);
    box-shadow: var(--rz-shadow-2, 0 2px 6px rgba(0, 0, 0, .12));
}

.account-card h1 { font-size: 1.75rem; font-weight: 500; margin: 0 0 1rem; }
.account-card h2 { font-size: 1.25rem; font-weight: 500; margin: 0 0 0.75rem; }
.account-card h3 { font-size: 1.1rem; font-weight: 500; margin: 0 0 0.75rem; }
.account-card h4 { font-size: 1rem; font-weight: 500; }
.account-card hr { border: 0; border-top: 1px solid var(--rz-base-300, #ddd); margin: 1rem 0; }
.account-card a { color: var(--rz-primary); }

.row { display: flex; flex-wrap: wrap; gap: 2rem; }
.row > [class*="col-"] { flex: 1 1 320px; min-width: 0; }
.col-lg-3, .col-md-4 { max-width: 280px; }

.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.font-weight-bold { font-weight: 600; }
.text-danger { color: var(--rz-danger); }
.text-success { color: var(--rz-success); }
.text-info { color: var(--rz-info); }
.text-secondary { color: var(--rz-text-secondary-color); }

/* Floating-label inputs from the template are shown as label-above-input fields. */
.form-floating { display: flex; flex-direction: column; gap: 0.25rem; }
.form-floating > label { order: -1; font-size: 0.875rem; color: var(--rz-text-secondary-color); }
.form-floating > .form-control::placeholder { color: transparent; }

.form-label, .control-label { font-size: 0.875rem; }

.form-control {
    box-sizing: border-box;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font: inherit;
    color: var(--rz-input-value-color, var(--rz-text-color));
    background: var(--rz-input-background-color, var(--rz-base-background-color, #fff));
    border: var(--rz-input-border, 1px solid var(--rz-base-400, #bbb));
    border-radius: var(--rz-border-radius, 4px);
}

.form-control:focus {
    outline: none;
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-primary) 25%, transparent);
}

.form-control[disabled] { opacity: 0.7; }

.form-check-input { width: 1rem; height: 1rem; vertical-align: middle; accent-color: var(--rz-primary); }

.input-group { display: flex; align-items: stretch; }
.input-group > .form-control { flex: 1; }
.input-group-text { display: flex; align-items: center; padding: 0 0.75rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    font: inherit;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--rz-border-radius, 4px);
    cursor: pointer;
    text-decoration: none;
    background: var(--rz-base-200, #eee);
    color: var(--rz-text-color);
}

.btn:hover { filter: brightness(0.95); }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1.05rem; }
.btn-primary { background: var(--rz-primary); color: var(--rz-on-primary, #fff); }
.btn-danger { background: var(--rz-danger); color: var(--rz-on-danger, #fff); }
.btn-link { background: transparent; color: var(--rz-primary); }

.alert {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--rz-border-radius, 4px);
    border-left: 4px solid currentColor;
}

.alert-success { color: var(--rz-success-darker, var(--rz-success)); background: var(--rz-success-lighter, #e8f5e9); }
.alert-danger { color: var(--rz-danger-darker, var(--rz-danger)); background: var(--rz-danger-lighter, #fdecea); }
.alert-warning { color: var(--rz-warning-darker, var(--rz-warning)); background: var(--rz-warning-lighter, #fff8e1); }
.alert-info { color: var(--rz-info-darker, var(--rz-info)); background: var(--rz-info-lighter, #e3f2fd); }

.nav { list-style: none; padding: 0; margin: 0; }
.nav-pills .nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--rz-border-radius, 4px);
    text-decoration: none;
    color: var(--rz-text-color);
}
.nav-pills .nav-link:hover { background: var(--rz-base-200, #eee); }
.nav-pills .nav-link.active { background: var(--rz-primary); color: var(--rz-on-primary, #fff); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 0.5rem; border-bottom: 1px solid var(--rz-base-300, #ddd); text-align: left; }

.recovery-code { font-family: ui-monospace, Consolas, monospace; }