@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
@import url('./main-layout.css');

/* Lumo overrides — dm-pa / Valo dmTheme (#009966, mint menu) */
html {
    --pa-primary: #009966;
    --pa-menu-bg: #e1efe8;

    --lumo-primary-color: var(--pa-primary);
    --lumo-primary-text-color: var(--pa-primary);
    --lumo-primary-contrast-color: #fff;
    --lumo-primary-color-50pct: rgba(0, 153, 102, 0.5);
    --lumo-primary-color-10pct: rgba(0, 153, 102, 0.1);

    --lumo-success-color: var(--pa-primary);
    --lumo-success-text-color: var(--pa-primary);

    --lumo-font-family: "Open Sans", sans-serif;
    --lumo-font-size: 16px;
    --lumo-body-text-color: #474747;
    --lumo-border-radius: 4px;
}

/* Dashboard-Panels — Valo .v-panel */
.pa-panel {
    background: #fff;
    color: #474747;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
    padding: 12px;
    box-sizing: border-box;
}

.pa-panel-heading {
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: -0.02em;
    margin: 0 0 0.77em;
    text-align: center;
    color: #474747;
}

.pa-panel-info {
    text-align: center;
    color: #474747;
    font-size: 16px;
    font-weight: 300;
}

.pa-main-layout::part(content) {
    background-color: #fafafa;
}

/* Login — Parität zu dm-pa LoginScreen + .login in dmTheme.scss */
.pa-login-view {
    background-color: var(--pa-menu-bg);
}

.login-logo-image {
    max-width: 280px;
    width: 280px;
    height: auto;
    margin-bottom: var(--lumo-space-s);
}

.pa-login-button {
    background: #fff !important;
    border: 1px solid #c5c5c5 !important;
    color: #464646 !important;
    font-weight: normal;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    --lumo-primary-color: #464646;
    --lumo-contrast-5pct: #fff;
    --lumo-contrast-10pct: #fafafa;
}

.pa-login-button:hover {
    background: #fafafa !important;
}

.pa-login-test-label {
    margin: 1.6em 0 0;
    text-align: center;
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: #474747;
}

.pa-login-view vaadin-text-field,
.pa-login-view vaadin-password-field {
    width: 280px;
    --lumo-contrast-10pct: #fff;
    --lumo-contrast-20pct: #dcdcdc;
    --lumo-border-radius: 2px;
    --lumo-text-field-size: 32px;
}

.pa-login-view vaadin-text-field::part(input-field),
.pa-login-view vaadin-password-field::part(input-field) {
    background: #fff;
    box-shadow: inset 0 1px 0 #fafafa, 0 1px 0 rgba(0, 0, 0, 0.1);
}

.pa-login-view vaadin-text-field::part(label),
.pa-login-view vaadin-password-field::part(label) {
    font-size: var(--lumo-font-size-s);
    color: #464646;
}

/* Status icons — dmTheme.scss */
.status-blue vaadin-icon {
    color: blue;
}

.status-red vaadin-icon {
    color: red;
}

.status-green vaadin-icon {
    color: green;
}

.status-yellow vaadin-icon {
    color: yellow;
}

.status-black vaadin-icon {
    color: black;
}

.status-purple vaadin-icon {
    color: rgb(128, 0, 128);
}

.padding-none {
    padding: 0;
}

.center {
    text-align: center;
}

.spacing-bottom {
    padding-bottom: 50px;
}

.header {
    font-weight: bold;
    font-size: 16px;
}

.grid-spacing {
    padding: 10px;
}

/* Modul-Überschriften — Valo h2 */
.pa-module-view h2,
h2 {
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: #474747;
    margin: 0;
}

/* Grids — Valo-Dichte, kompakte Spalten */
vaadin-grid {
    font-size: 14px;
    --lumo-font-size: 14px;
    --lumo-size-xs: 1.75rem;
}

vaadin-grid::part(header-cell) {
    font-weight: 600;
    font-size: 14px;
}

/* Grid-Thumbnails — Seitenverhältnis erhalten (Valo/dm-pa) */
img.pa-tool-thumbnail {
    object-fit: contain;
    object-position: center;
    display: block;
    flex-shrink: 0;
}

vaadin-grid::part(body-cell) {
    align-items: center;
}

/* --- Modern UI PoC (ddh-2-pa-modern) --- */

html {
    --lumo-border-radius-m: 6px;
    --lumo-border-radius-l: 8px;
    --lumo-space-m: 1rem;
}

.pa-modern-poc-banner {
    display: block;
    margin: 0 12px 8px;
    padding: 6px 10px;
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: var(--pa-primary);
    border-radius: var(--lumo-border-radius-m);
}

.pa-modern-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--lumo-space-s);
    margin-bottom: var(--lumo-space-s);
}

.pa-modern-toolbar__spacer {
    flex: 1 1 auto;
    min-width: var(--lumo-space-m);
}

.pa-modern-search {
    min-width: 200px;
}

.pa-modern-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lumo-space-xs);
    padding: var(--lumo-space-xl);
    color: var(--lumo-secondary-text-color);
    text-align: center;
}

.pa-modern-empty-state span:first-child {
    font-size: var(--lumo-font-size-l);
    font-weight: 600;
    color: var(--lumo-body-text-color);
}

.pa-modern-login-card {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: var(--lumo-border-radius-l);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.pa-modern-login-button {
    margin-top: var(--lumo-space-s);
}

.pa-modern-module-view h2 {
    font-weight: 400;
}

.pa-modern-grid-link {
    font-size: var(--lumo-font-size-s);
}

.pa-grid-legend-trigger {
    color: var(--lumo-secondary-text-color);
    cursor: pointer;
}

.pa-grid-row-menu {
    margin: 0 auto;
}

.download.link {
    display: inline-flex;
    align-items: center;
    gap: var(--lumo-space-xs);
    color: var(--lumo-primary-text-color);
    text-decoration: none;
    font-size: var(--lumo-font-size-s);
}

.download.link:hover {
    text-decoration: underline;
}

.download.link vaadin-icon {
    height: 16px;
    width: 16px;
}

a.download.link.pa-modern-download-button {
    padding: var(--lumo-space-xs) calc(var(--lumo-space-s) + var(--lumo-space-xs));
    min-height: var(--lumo-size-m);
    border-radius: var(--lumo-border-radius-m);
    background-color: var(--lumo-contrast-5pct);
    border: none;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}

a.download.link.pa-modern-download-button:hover {
    text-decoration: none;
    background-color: var(--lumo-contrast-10pct);
}

a.pa-download-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    line-height: 0;
}

a.pa-download-button vaadin-button {
    margin: 0;
}

.pa-modern-dialog::part(overlay) {
    border-radius: var(--lumo-border-radius-l);
}

.pa-modern-dialog::part(content) {
    padding: var(--lumo-space-m);
    overflow-x: hidden;
}

.pa-modern-dialog::part(header) {
    padding: var(--lumo-space-m) var(--lumo-space-m) 0;
}

.pa-modern-dialog::part(footer) {
    padding: var(--lumo-space-s) var(--lumo-space-m) var(--lumo-space-m);
    gap: var(--lumo-space-s);
}

.pa-modern-dialog-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pa-modern-dialog-content vaadin-date-picker,
.pa-modern-dialog-content vaadin-text-field,
.pa-modern-dialog-content vaadin-combo-box,
.pa-modern-dialog-content vaadin-integer-field,
.pa-modern-dialog-content vaadin-form-layout {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    --vaadin-form-layout-column-spacing: var(--lumo-space-m);
}

.pa-modern-dialog-content vaadin-form-item {
    width: 100%;
    min-width: 0;
}

.pa-modern-dialog-content vaadin-form-item::part(content),
.pa-modern-dialog-content vaadin-integer-field::part(input-field) {
    width: 100%;
    box-sizing: border-box;
}

.pa-modern-form vaadin-form-layout {
    --vaadin-form-layout-column-spacing: var(--lumo-space-m);
}

.pa-modern-form h3 {
    margin: 0 0 var(--lumo-space-s);
    font-size: var(--lumo-font-size-l);
    font-weight: 600;
    color: #474747;
}

.pa-modern-form-section {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: var(--lumo-border-radius-m);
    padding: var(--lumo-space-m);
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: visible;
}

.pa-modern-form-action {
    margin-top: var(--lumo-space-m);
    align-self: flex-start;
    flex-shrink: 0;
}

.pa-modern-form-section vaadin-form-layout {
    width: 100%;
}

.pa-modern-password-form {
    max-width: 24rem;
}

.pa-modern-password-form vaadin-form-item {
    width: 100%;
}

.pa-modern-form-section vaadin-text-field,
.pa-modern-form-section vaadin-password-field {
    width: 100%;
}

.pa-modern-form-section + .pa-modern-form-section {
    margin-top: var(--lumo-space-m);
}

.pa-modern-action-bar {
    gap: var(--lumo-space-s);
    margin-top: var(--lumo-space-m);
    flex-wrap: wrap;
}

.pa-modern-dashboard-panels {
    min-height: 0;
}

.pa-modern-dashboard-section {
    min-height: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.pa-modern-dashboard-section + .pa-modern-dashboard-section {
    padding-top: var(--lumo-space-l);
    border-top: 1px solid #ececec;
}

.pa-modern-section-title {
    margin: 0 0 var(--lumo-space-s);
    font-size: var(--lumo-font-size-l);
    font-weight: 600;
    color: #474747;
    text-align: left;
}

.pa-modern-section-info {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
    padding: var(--lumo-space-m) 0;
}

.pa-modern-login-card vaadin-text-field,
.pa-modern-login-card vaadin-password-field {
    width: 100%;
}

.pa-modern-login-button {
    margin-top: var(--lumo-space-s);
    font-weight: 600;
}

/* --- PoC-3: einheitlicher Seitenrahmen --- */

.pa-modern-page-body {
    min-height: 0;
    flex: 1 1 auto;
}

.pa-modern-page-header {
    margin-bottom: var(--lumo-space-m);
    width: 100%;
}

.pa-modern-page-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #474747;
    line-height: 1.2;
}

.pa-modern-page-subtitle {
    display: block;
    margin-top: var(--lumo-space-xs);
    font-size: var(--lumo-font-size-s);
    color: var(--lumo-secondary-text-color);
}

.pa-modern-page-breadcrumbs:not(:empty) {
    margin-bottom: var(--lumo-space-xs);
}

.pa-modern-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lumo-space-xs);
    font-size: var(--lumo-font-size-s);
}

.pa-modern-breadcrumbs a {
    color: var(--lumo-primary-text-color);
    text-decoration: none;
}

.pa-modern-breadcrumbs a:hover {
    text-decoration: underline;
}

.pa-modern-breadcrumb-sep {
    color: var(--lumo-secondary-text-color);
}

.pa-modern-breadcrumb-current {
    color: var(--lumo-secondary-text-color);
    font-weight: 600;
}

.pa-modern-page-actions {
    flex-shrink: 0;
    padding-top: 2px;
}

.pa-modern-card {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--lumo-border-radius-l);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: var(--lumo-space-m);
    box-sizing: border-box;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.pa-modern-card-inner {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.pa-modern-module-view {
    background-color: #fafafa;
    min-height: calc(100vh - 4rem);
}

.pa-modern-module-view h2:not(.pa-modern-page-title) {
    font-weight: 400;
}

.pa-side-nav-section {
    display: block;
    padding: 16px 16px 4px;
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.45);
}

vaadin-side-nav-item.pa-side-nav-section-item {
    opacity: 1;
    pointer-events: none;
    min-height: auto;
    margin-top: var(--lumo-space-s);
}

vaadin-side-nav-item.pa-side-nav-section-item::part(content) {
    min-height: auto;
    padding-top: 8px;
    padding-bottom: 2px;
    background: transparent !important;
    color: rgba(0, 0, 0, 0.45) !important;
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pa-modern-dashboard-welcome {
    margin-bottom: var(--lumo-space-m);
}

.pa-modern-dashboard-welcome h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 400;
    color: #474747;
}

.pa-modern-dashboard-welcome span {
    display: block;
    margin-top: var(--lumo-space-xs);
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
}

vaadin-tab-sheet.pa-modern-tabs::part(tabs) {
    box-shadow: inset 0 -1px 0 #e3e3e3;
}

.pa-modern-tab-bar {
    flex-shrink: 0;
    box-shadow: inset 0 -1px 0 #e3e3e3;
}

.pa-modern-tab-bar vaadin-tabs {
    flex: 0 1 auto;
}

.pa-modern-tab-bar .pa-tabs-actions {
    flex-shrink: 0;
    margin-left: var(--lumo-space-s);
    margin-bottom: var(--lumo-space-xs);
}

.pa-modern-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pa-modern-tab-content > * {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.pa-modern-tab-content vaadin-grid {
    min-height: 24rem;
    height: 100%;
    flex: 1 1 auto;
}

vaadin-tab-sheet.pa-modern-tabs {
    min-height: 28rem;
    flex: 1 1 auto;
}

vaadin-tab-sheet.pa-modern-tabs::part(content) {
    min-height: 24rem;
}

vaadin-split-layout.pa-modern-split {
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
}

vaadin-split-layout.pa-modern-split vaadin-grid {
    min-height: 0;
}

vaadin-split-layout.pa-modern-split .pa-modern-section-title {
    flex-shrink: 0;
    font-size: var(--lumo-font-size-m);
}

vaadin-split-layout.pa-modern-split > * {
    min-height: 0;
}

.pa-modern-module-view vaadin-grid,
.pa-modern-card vaadin-grid,
vaadin-tab-sheet.pa-modern-tabs vaadin-grid {
    min-height: 24rem;
    height: 100%;
    flex: 1 1 auto;
}

.pa-modern-pdf-viewer {
    min-height: 70vh;
    width: 100%;
    border: none;
}

.pa-modern-image-preview {
    object-fit: contain;
    background: #f3f3f3;
    border: 1px dashed #c8c8c8;
    border-radius: var(--lumo-border-radius-m);
}

.pa-modern-image-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
    text-align: center;
    padding: var(--lumo-space-m);
    box-sizing: border-box;
}

/* MFA Login-Flow — PA-CI (#009966, Mint-Hintergrund via .pa-login-view) */
.login-page-card {
    background: var(--lumo-base-color);
    box-shadow: var(--lumo-box-shadow-s);
    border-radius: var(--lumo-border-radius-l);
    padding: var(--lumo-space-l);
}

.login-page-card .login-page-title {
    margin: 0;
    font-size: var(--lumo-font-size-xxl);
    font-weight: 600;
    text-align: center;
    color: var(--lumo-header-text-color);
}

.login-page-card .login-page-description {
    margin: 0 0 var(--lumo-space-s);
    text-align: center;
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
    white-space: pre-line;
    line-height: 1.5;
}

.login-page-card .login-page-error {
    margin: var(--lumo-space-s) 0 0;
    text-align: center;
    color: var(--lumo-error-text-color);
    font-size: var(--lumo-font-size-s);
}

.login-page-card .mfa-qr {
    align-self: center;
}

.login-page-card .mfa-enroll-instructions {
    margin: 0 0 var(--lumo-space-s);
    padding: var(--lumo-space-s);
    background: var(--lumo-primary-color-10pct);
    border-radius: var(--lumo-border-radius-m);
    color: var(--lumo-body-text-color);
    font-size: var(--lumo-font-size-s);
    line-height: 1.5;
    white-space: pre-line;
}

.login-page-card.mfa-provider-step .login-page-title,
.login-page-card.mfa-provider-step .login-page-description,
.login-page-card.mfa-provider-step .mfa-provider-field-label,
.login-page-card.mfa-provider-step .login-page-error {
    text-align: left;
}

.login-page-card.mfa-provider-step .login-page-description {
    text-align: justify;
    hyphens: auto;
}

.mfa-provider-field-label {
    display: block;
    margin-bottom: var(--lumo-space-xs);
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    color: var(--lumo-secondary-text-color);
}

.mfa-provider-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lumo-space-s);
    width: 100%;
}

.mfa-provider-button {
    position: relative;
    box-sizing: border-box;
    min-height: 96px;
    padding: var(--lumo-space-s) var(--lumo-space-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lumo-space-xs);
    border: 1px solid var(--lumo-contrast-20pct);
    border-radius: var(--lumo-border-radius-m);
    background: var(--lumo-base-color);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.mfa-provider-button:hover {
    border-color: var(--lumo-primary-color-50pct);
    background: var(--lumo-contrast-5pct);
}

.mfa-provider-button:focus-visible {
    outline: 2px solid var(--lumo-primary-color);
    outline-offset: 2px;
}

.mfa-provider-button.selected {
    border-color: var(--pa-primary);
    background: var(--lumo-primary-color-10pct);
    box-shadow: inset 0 0 0 1px var(--lumo-primary-color-50pct);
}

.mfa-provider-button__check {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pa-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.mfa-provider-button.selected .mfa-provider-button__check {
    opacity: 1;
    transform: scale(1);
}

.mfa-provider-button__icon {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.mfa-provider-button__label {
    font-size: var(--lumo-font-size-xs);
    font-weight: 500;
    text-align: center;
    color: var(--lumo-body-text-color);
    line-height: 1.25;
}

.login-page-card vaadin-button[theme~="primary"] {
    width: 100%;
    margin-top: var(--lumo-space-xs);
}

.login-page-card .mfa-change-provider-button {
    margin-top: var(--lumo-space-xs);
    border: 1px solid var(--lumo-contrast-30pct);
    border-radius: var(--lumo-border-radius-m);
    background: var(--lumo-base-color);
    color: var(--lumo-body-text-color);
    font-weight: 500;
}

.login-page-card .mfa-change-provider-button:hover {
    border-color: var(--lumo-primary-color-50pct);
    background: var(--lumo-contrast-5pct);
}

.login-page-footer {
    font-size: var(--lumo-font-size-l);
    text-align: center;
    margin: 0;
    color: var(--lumo-secondary-text-color);
}