/*
   CSS styling examples for the Vaadin app.

   Visit https://vaadin.com/docs/styling/application-theme/ for more information.
*/

.route-not-found-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--lumo-space-xl);
    gap: var(--lumo-space-m);
    min-height: 50vh;
}

.not-found-heading {
    font-size: var(--lumo-font-size-xxl);
    color: var(--lumo-body-text-color);
    margin: 0;
}

.not-found-message {
    color: var(--lumo-secondary-text-color);
    margin: 0;
}

.not-found-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--lumo-space-m);
    height: 2.25em;
    border-radius: var(--lumo-border-radius-m);
    background: var(--lumo-primary-color);
    color: var(--lumo-primary-contrast-color);
    font-size: var(--lumo-font-size-m);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin-top: var(--lumo-space-s);
}


.permission-row {
    padding: var(--lumo-space-m) var(--lumo-space-l);
    border-bottom: 1px solid var(--lumo-contrast-5pct);
    transition: background 0.1s ease;
}

.permission-row:last-child {
    border-bottom: none;
}

.permission-row:hover {
    background: var(--lumo-contrast-5pct);
}

.permission-name {
    font-weight: 500;
}

.permission-description {
    font-size: var(--lumo-font-size-s);
    color: var(--lumo-secondary-text-color);
}

.permission-super-admin-note {
    display: block;
    font-size: var(--lumo-font-size-s);
    color: var(--lumo-secondary-text-color);
    margin-bottom: var(--lumo-space-m);
}

.permission-scope-header {
    padding: var(--lumo-space-xs) var(--lumo-space-l);
    background: var(--lumo-contrast-5pct);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}

.permission-scope-label {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
    color: var(--lumo-secondary-text-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.permission-scope-checkbox {
    width: 80px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.form-editor-available-section-heading {
    display: block;
    font-size: var(--lumo-font-size-s);
    font-weight: 600;
    color: var(--lumo-secondary-text-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: var(--lumo-space-s);
    padding-bottom: var(--lumo-space-xs);
    border-top: 1px solid var(--lumo-contrast-10pct);
    margin-top: var(--lumo-space-xs);
}

.user-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lumo-space-s);
    margin-bottom: var(--lumo-space-s);
}

.role-badge-cap {
    width: var(--lumo-icon-size-s);
    height: var(--lumo-icon-size-s);
    flex-shrink: 0;
}