/**
 * Mietverträge Page Styles
 * Styles for contract management, template builder, and PDF preview
 *
 * @updated 2026-08-06 - The #pdfPreview "PDF Preview - Professional Contract Layout"
 *   block (was: var(--text-primary/secondary/tertiary), var(--glass-*)) rendered
 *   near-invisible text: #pdfPreview is a fixed WHITE "paper" surface (bg-white) in
 *   every theme, but those tokens are theme-dependent and in dark/darkmodern resolve
 *   to a light cream/near-white — effectively white-on-white. This was the actual
 *   root cause of "the preview pane renders empty" (confirmed by rendering the
 *   contract builder with mock data and reading the computed color: rgba(248,250,252,.65)
 *   text on a white background). Introduced fixed --paper-ink-*/--paper-surface*/
 *   --paper-border custom properties scoped to #pdfPreview (same non-theme-aware
 *   exception already used by the print dossier sheets and the signature-canvas ink).
 */

/* ============================================================================
   Contracts Table
   ============================================================================ */

body[data-page="mietvertraege"] .contracts-table {

    width: 100%;
    border-collapse: collapse;
}



body[data-page="mietvertraege"] .contracts-table thead tr {

    background: var(--glass-hover);
}



body[data-page="mietvertraege"] .contracts-table th,
body[data-page="mietvertraege"] .contracts-table td {

    padding: 1em;
    text-align: left;
    border-bottom: 1px solid var(--hairline);
}



body[data-page="mietvertraege"] .contracts-table th {

    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--fs-callout);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}



body[data-page="mietvertraege"] .contracts-table td {

    color: var(--text-primary);
}



body[data-page="mietvertraege"] .contracts-table tbody tr {

    transition: background-color 0.2s;
}



body[data-page="mietvertraege"] .contracts-table tbody tr:hover {

    background: var(--glass-hover);
}



/* Status Badges */
body[data-page="mietvertraege"] .status-badge {

    display: inline-flex;
    align-items: center;
    padding: 0.25em 0.75em;
    border-radius: 1em;
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}



body[data-page="mietvertraege"] .status-badge.draft {
    background: rgba(156, 163, 175, 0.2);
    color: var(--text-tertiary);
}

body[data-page="mietvertraege"] .status-badge.active {
    background: rgba(var(--ios-green-rgb), 0.2);
    color: var(--ios-system-green);
}

body[data-page="mietvertraege"] .status-badge.terminated {
    background: rgba(var(--ios-red-rgb), 0.2);
    color: var(--ios-system-red);
}

body[data-page="mietvertraege"] .status-badge.expired {
    background: rgba(var(--ios-orange-rgb), 0.2);
    color: var(--ios-system-orange);
}

/* ============================================================================
   Modal Theme Tokens
   ============================================================================ */

body[data-page="mietvertraege"] {
    --mietvertrag-accent-start: var(--accent-primary-light);
    --mietvertrag-accent-end: var(--accent-primary-dark);
    --mietvertrag-accent-solid: var(--accent-primary);
    --mietvertrag-accent-rgb: 255, 122, 26;
    --mietvertrag-accent-contrast: #ffffff;
    --mietvertrag-accent-shadow: rgba(var(--accent-primary-rgb), 0.35);
    --mietvertrag-accent-gradient: linear-gradient(135deg, var(--mietvertrag-accent-start), var(--mietvertrag-accent-end));
    --mietvertrag-accent-gradient-hover: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-dark));
    --mietvertrag-success: var(--ios-system-green);
    --mietvertrag-success-rgb: 52, 199, 89;
    --mietvertrag-danger: var(--ios-system-red);
    --mietvertrag-danger-rgb: 255, 59, 48;
    --mietvertrag-modal-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.82) 100%);
    --mietvertrag-modal-border: rgba(255, 255, 255, 0.18);
    --mietvertrag-modal-shadow: 0 24px 70px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    --mietvertrag-modal-overlay: rgba(10, 10, 12, 0.55);
    --mietvertrag-modal-header: rgba(255, 255, 255, 0.02);
    --sunset-orange: var(--mietvertrag-accent-solid);
}

html[data-theme="light"] body[data-page="mietvertraege"],
body[data-theme="light"][data-page="mietvertraege"] {
    --mietvertrag-accent-start: var(--accent-primary-light);
    --mietvertrag-accent-end: var(--accent-primary-dark);
    --mietvertrag-accent-solid: var(--accent-primary);
    --mietvertrag-accent-rgb: 255, 122, 26;
    --mietvertrag-accent-shadow: rgba(var(--accent-primary-rgb), 0.3);
    --mietvertrag-success-rgb: 52, 199, 89;
    --mietvertrag-danger-rgb: 255, 59, 48;
    --mietvertrag-modal-surface: linear-gradient(135deg, rgba(var(--theme-glass-rgb), 0.96) 0%, rgba(var(--theme-glass-rgb), 0.84) 100%);
    --mietvertrag-modal-border: rgba(var(--theme-glass-rgb), 0.2);
    --mietvertrag-modal-overlay: rgba(var(--surface-lift-rgb), 0.5);
    --mietvertrag-modal-header: rgba(var(--theme-glass-rgb), 0.03);
}

html[data-theme="lightmodern"] body[data-page="mietvertraege"],
body[data-theme="lightmodern"][data-page="mietvertraege"] {
    --mietvertrag-accent-start: var(--accent-primary-light);
    --mietvertrag-accent-end: var(--accent-primary-dark);
    --mietvertrag-accent-solid: var(--accent-primary);
    --mietvertrag-accent-rgb: 255, 122, 26;
    --mietvertrag-accent-shadow: rgba(var(--accent-primary-rgb), 0.25);
    --mietvertrag-success-rgb: 52, 199, 89;
    --mietvertrag-danger-rgb: 255, 59, 48;
    --mietvertrag-modal-surface: linear-gradient(135deg, rgba(var(--theme-glass-rgb), 0.92) 0%, rgba(var(--theme-glass-rgb), 0.8) 100%);
    --mietvertrag-modal-border: rgba(var(--theme-glass-rgb), 0.16);
    --mietvertrag-modal-overlay: rgba(var(--surface-lift-rgb), 0.52);
    --mietvertrag-modal-header: rgba(var(--theme-glass-rgb), 0.025);
}

html[data-theme="dark"] body[data-page="mietvertraege"],
body[data-theme="dark"][data-page="mietvertraege"] {
    --mietvertrag-accent-start: var(--accent-primary-light);
    --mietvertrag-accent-end: var(--accent-primary-dark);
    --mietvertrag-accent-solid: var(--accent-primary-dark);
    --mietvertrag-accent-rgb: 255, 106, 26;
    --mietvertrag-accent-shadow: rgba(var(--accent-primary-rgb), 0.45);
    --mietvertrag-success-rgb: 48, 209, 88;
    --mietvertrag-danger-rgb: 255, 69, 58;
    --mietvertrag-modal-surface: linear-gradient(135deg, var(--background-primary) 0%, var(--background-primary) 100%);
    --mietvertrag-modal-border: rgba(var(--surface-lift-rgb), 0.08);
    --mietvertrag-modal-shadow: 0 24px 70px rgba(var(--theme-glass-rgb), 0.55), 0 0 0 1px rgba(var(--surface-lift-rgb), 0.06) inset;
    --mietvertrag-modal-overlay: rgba(var(--theme-glass-rgb), 0.7);
    --mietvertrag-modal-header: rgba(var(--surface-lift-rgb), 0.04);
}

html[data-theme="darkart"] body[data-page="mietvertraege"],
body[data-theme="darkart"][data-page="mietvertraege"] {
    --mietvertrag-accent-start: var(--accent-primary-light);
    --mietvertrag-accent-end: var(--accent-primary-dark);
    --mietvertrag-accent-solid: var(--accent-primary);
    --mietvertrag-accent-rgb: 255, 122, 26;
    --mietvertrag-accent-shadow: rgba(var(--accent-primary-rgb), 0.5);
    --mietvertrag-success-rgb: 48, 209, 88;
    --mietvertrag-danger-rgb: 255, 69, 58;
    --mietvertrag-modal-surface: linear-gradient(135deg, var(--background-primary) 0%, var(--background-primary) 100%);
    --mietvertrag-modal-border: rgba(var(--surface-lift-rgb), 0.08);
    --mietvertrag-modal-shadow: 0 24px 70px rgba(var(--theme-glass-rgb), 0.6), 0 0 0 1px rgba(var(--surface-lift-rgb), 0.06) inset;
    --mietvertrag-modal-overlay: rgba(var(--theme-glass-rgb), 0.72);
    --mietvertrag-modal-header: rgba(var(--surface-lift-rgb), 0.045);
}

html[data-theme="darkmodern"] body[data-page="mietvertraege"],
body[data-theme="darkmodern"][data-page="mietvertraege"] {
    --mietvertrag-accent-start: var(--accent-primary-light);
    --mietvertrag-accent-end: var(--accent-primary-dark);
    --mietvertrag-accent-solid: var(--accent-primary-dark);
    --mietvertrag-accent-rgb: 255, 106, 26;
    --mietvertrag-accent-shadow: rgba(var(--accent-primary-rgb), 0.5);
    --mietvertrag-success-rgb: 48, 209, 88;
    --mietvertrag-danger-rgb: 255, 69, 58;
    --mietvertrag-modal-surface: linear-gradient(135deg, var(--background-primary) 0%, var(--background-primary) 100%);
    --mietvertrag-modal-border: rgba(var(--surface-lift-rgb), 0.07);
    --mietvertrag-modal-shadow: 0 24px 70px rgba(var(--theme-glass-rgb), 0.6), 0 0 0 1px rgba(var(--surface-lift-rgb), 0.05) inset;
    --mietvertrag-modal-overlay: rgba(var(--theme-glass-rgb), 0.68);
    --mietvertrag-modal-header: rgba(var(--surface-lift-rgb), 0.04);
}



/* ============================================================================
   Modal Overlays
   ============================================================================ */

body[data-page="mietvertraege"] .modal-overlay {

    position: fixed;
    inset: 0;
    background: var(--mietvertrag-modal-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-8);
    overflow-y: auto;
}



body[data-page="mietvertraege"] .modal-overlay.hidden {

    display: none;
}



body[data-page="mietvertraege"] .modal-container {

    width: 100%;
    max-width: 72rem;
    width: min(92vw, 72rem);
    max-height: 90vh;
    background: var(--mietvertrag-modal-surface);
    border: 1px solid var(--mietvertrag-modal-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--mietvertrag-modal-shadow);
    overflow: hidden;
    color: var(--text-primary);
}

body[data-page="mietvertraege"] .modal-container.modal-sm {

    max-width: 25rem;
    width: min(92vw, 25rem);
}

body[data-page="mietvertraege"] .modal-container.modal-md {

    max-width: 46rem;
    width: min(92vw, 46rem);
}

body[data-page="mietvertraege"] .modal-container.modal-lg {

    max-width: 56.25rem;
    width: min(92vw, 56.25rem);
}

body[data-page="mietvertraege"] .modal-container.modal-xl {

    max-width: min(94vw, 80rem);
    width: min(94vw, 80rem);
}

body[data-page="mietvertraege"] .modal-overlay > .glass-card {

    background: var(--mietvertrag-modal-surface);
    border: 1px solid var(--mietvertrag-modal-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--mietvertrag-modal-shadow);
    color: var(--text-primary);
    max-height: 90vh;
    overflow-y: auto;
}

body[data-page="mietvertraege"] .modal-content-wrapper {

    display: flex;
    flex-direction: column;
    min-height: 0;
}

body[data-page="mietvertraege"] .modal-content-wrapper > .flex-1 {

    min-height: 0;
}

body[data-page="mietvertraege"] .modal-header {

    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-6) var(--spacing-8);
    background: var(--mietvertrag-modal-header);
}

body[data-page="mietvertraege"] .modal-body,
body[data-page="mietvertraege"] .modal-container > .p-6,
body[data-page="mietvertraege"] .modal-container > .p-8 {
    padding: var(--spacing-6) var(--spacing-8);
}

body[data-page="mietvertraege"] .modal-header h2,
body[data-page="mietvertraege"] .modal-header h3 {

    margin: 0;
}

body[data-page="mietvertraege"] .bg-glass-primary {

    background: var(--glass-primary);
}



/* ============================================================================
   Contract Builder - Section List
   ============================================================================ */

body[data-page="mietvertraege"] .section-item {

    background: var(--glass-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 0.5em;
    padding: 1em;
    cursor: move;
    transition: all 0.2s;
    position: relative;
}



body[data-page="mietvertraege"] .section-item:hover {

    background: var(--glass-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}



body[data-page="mietvertraege"] .section-item.sortable-ghost {

    opacity: 0.4;
}



body[data-page="mietvertraege"] .section-item.sortable-drag {

    opacity: 0.8;
    transform: rotate(2deg);
}



body[data-page="mietvertraege"] .section-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5em;
}



body[data-page="mietvertraege"] .section-title {

    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5em;
}



body[data-page="mietvertraege"] .section-drag-handle {

    cursor: move;
    color: var(--text-tertiary);
}



body[data-page="mietvertraege"] .section-actions {

    display: flex;
    gap: 0.25em;
}



body[data-page="mietvertraege"] .section-btn {

    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25em;
    border-radius: 0.25em;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
}



body[data-page="mietvertraege"] .section-btn:hover {

    background: var(--glass-hover);
    color: var(--text-primary);
}



body[data-page="mietvertraege"] .section-btn.edit-btn:hover {

    color: var(--mietvertrag-accent-solid);
}



body[data-page="mietvertraege"] .section-btn.delete-btn:hover {

    color: var(--ios-system-red);
}



body[data-page="mietvertraege"] .section-content-preview {

    color: var(--text-secondary);
    font-size: var(--fs-callout);
    line-height: 1.5;
    max-height: 3em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}



body[data-page="mietvertraege"] .section-meta {

    display: flex;
    gap: 1em;
    margin-top: 0.5em;
    font-size: var(--fs-caption);
    color: var(--text-tertiary);
}



body[data-page="mietvertraege"] .section-type-badge {

    padding: 0.25em 0.5em;
    border-radius: 0.25em;
    background: rgba(var(--mietvertrag-accent-rgb), 0.2);
    color: var(--mietvertrag-accent-solid);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-page="mietvertraege"] .section-required-badge {
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
    background: rgba(var(--accent-danger-rgb), 0.15);
    color: var(--ios-system-red);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-page="mietvertraege"] .section-template-badge {
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
    background: rgba(var(--ios-indigo-rgb), 0.15);
    color: var(--ios-system-indigo);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-page="mietvertraege"] .section-customized-badge {
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
    background: rgba(var(--accent-success-rgb), 0.15);
    color: var(--ios-system-green);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Country/Currency Indicator in Contract Builder */
body[data-page="mietvertraege"] .contract-builder-country-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.375em 0.75em;
    border-radius: 0.5em;
    background: rgba(var(--mietvertrag-accent-rgb), 0.15);
    color: var(--mietvertrag-accent-solid);
    font-size: var(--fs-callout);
    font-weight: 600;
}

body[data-page="mietvertraege"] .contract-builder-country-indicator .currency-symbol {
    padding: 0.125em 0.375em;
    background: var(--mietvertrag-accent-solid);
    color: var(--mietvertrag-accent-contrast);
    border-radius: 0.25em;
    font-size: var(--fs-caption);
}

/* ============================================================================
   PDF Preview - Professional Contract Layout
   ============================================================================ */

/* #pdfPreview is a fixed WHITE "paper" surface in every theme (bg-white, matching
   what the actual PDF page looks like) — it does not follow the app theme, the
   same deliberate exception as the print dossier sheets and the signature-canvas
   ink (--text-on-accent). Left as var(--text-primary)/var(--glass-*), this whole
   block rendered near-white-on-white in dark/darkmodern (--text-primary resolves
   to a light cream/near-white there) — the entire contract preview was
   functionally invisible, reading as "the preview pane is blank". Fixed,
   non-theme-aware "ink on paper" tokens fix it for every theme at once. */
body[data-page="mietvertraege"] #pdfPreview {
    --paper-ink-primary: rgba(28, 25, 23, 0.92);
    --paper-ink-secondary: rgba(28, 25, 23, 0.72);
    --paper-ink-tertiary: rgba(28, 25, 23, 0.5);
    --paper-surface: rgba(28, 25, 23, 0.035);
    --paper-surface-strong: rgba(28, 25, 23, 0.06);
    --paper-border: rgba(28, 25, 23, 0.14);

    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--paper-ink-primary);
}

/* Contract Document Container */
body[data-page="mietvertraege"] .contract-document {
    max-width: 210mm;
    margin: 0 auto;
    padding: 1.5em;
    background: var(--paper-surface);
    border-radius: var(--radius-lg);
}

/* Empty State */
body[data-page="mietvertraege"] .contract-empty-state {
    text-align: center;
    padding: 3em;
    color: var(--paper-ink-tertiary);
}

/* Letterhead */
body[data-page="mietvertraege"] .contract-letterhead {
    display: flex;
    gap: 1.5em;
    padding: 1em;
    margin-bottom: 1.5em;
    background: var(--paper-surface);
    border-radius: var(--radius-md);
}

body[data-page="mietvertraege"] .letterhead-logo {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
}

body[data-page="mietvertraege"] .letterhead-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body[data-page="mietvertraege"] .letterhead-logo-placeholder {
    width: 100%;
    height: 100%;
    background: var(--paper-surface-strong);
    border-radius: var(--radius-sm);
}

body[data-page="mietvertraege"] .letterhead-info {
    flex: 1;
}

body[data-page="mietvertraege"] .letterhead-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--paper-ink-primary);
    margin-bottom: 0.25em;
}

body[data-page="mietvertraege"] .letterhead-address,
body[data-page="mietvertraege"] .letterhead-contact,
body[data-page="mietvertraege"] .letterhead-ids {
    font-size: var(--fs-caption);
    color: var(--paper-ink-secondary);
    line-height: 1.4;
}

/* Contract Title Block */
body[data-page="mietvertraege"] .contract-title-block {
    text-align: center;
    margin-bottom: 2em;
}

body[data-page="mietvertraege"] .contract-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--paper-ink-primary);
    margin-bottom: 0.25em;
}

body[data-page="mietvertraege"] .contract-subtitle {
    font-size: var(--fs-callout);
    color: var(--paper-ink-tertiary);
}

/* Section Headers */
body[data-page="mietvertraege"] .contract-section {
    margin-bottom: 1.5em;
}

body[data-page="mietvertraege"] .section-header {
    margin-bottom: 1em;
}

body[data-page="mietvertraege"] .section-divider {
    height: 1px;
    background: var(--paper-ink-tertiary);
    margin: 0.5em 0;
}

body[data-page="mietvertraege"] .section-divider.thick {
    height: 2px;
    background: var(--paper-ink-secondary);
}

body[data-page="mietvertraege"] .section-title {
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--paper-ink-primary);
    margin: 0.5em 0;
    letter-spacing: 0.05em;
}

body[data-page="mietvertraege"] .subsection-title {
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--paper-ink-primary);
    margin: 1em 0 0.5em;
}

body[data-page="mietvertraege"] .contract-paragraph {
    font-size: var(--fs-callout);
    color: var(--paper-ink-primary);
    margin-bottom: 0.5em;
    text-align: justify;
}

/* Party Blocks */
body[data-page="mietvertraege"] .parties-section {
    margin: 1em 0;
}

body[data-page="mietvertraege"] .party-block {
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-sm);
    margin-bottom: 1em;
    overflow: hidden;
}

body[data-page="mietvertraege"] .party-header {
    background: var(--paper-surface-strong);
    padding: 0.5em 1em;
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--paper-ink-primary);
}

body[data-page="mietvertraege"] .party-details {
    padding: 1em;
}

body[data-page="mietvertraege"] .party-row {
    display: flex;
    margin-bottom: 0.5em;
    font-size: var(--fs-callout);
}

body[data-page="mietvertraege"] .party-label {
    flex-shrink: 0;
    width: 5em;
    color: var(--paper-ink-tertiary);
}

body[data-page="mietvertraege"] .party-value {
    flex: 1;
    color: var(--paper-ink-primary);
}

/* Financial Table */
body[data-page="mietvertraege"] .rent-section {
    margin: 1em 0;
}

body[data-page="mietvertraege"] .financial-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

body[data-page="mietvertraege"] .financial-table td {
    padding: 0.75em 1em;
    font-size: var(--fs-callout);
    border-bottom: 1px solid var(--paper-border);
}

body[data-page="mietvertraege"] .financial-table .financial-label {
    color: var(--paper-ink-primary);
}

body[data-page="mietvertraege"] .financial-table .financial-value {
    text-align: right;
    color: var(--paper-ink-primary);
    font-family: var(--font-sans);
}

body[data-page="mietvertraege"] .financial-table .total-row {
    background: var(--paper-surface-strong);
}

body[data-page="mietvertraege"] .financial-table .total-row td {
    border-bottom: none;
}

/* Bank Details Block */
body[data-page="mietvertraege"] .bank-details-block {
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-sm);
    margin: 1.5em 0;
    overflow: hidden;
}

body[data-page="mietvertraege"] .bank-header {
    background: var(--paper-surface-strong);
    padding: 0.5em 1em;
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--paper-ink-primary);
}

body[data-page="mietvertraege"] .bank-content {
    padding: 1em;
}

body[data-page="mietvertraege"] .bank-row {
    display: flex;
    margin-bottom: 0.375em;
    font-size: var(--fs-callout);
}

body[data-page="mietvertraege"] .bank-label {
    flex-shrink: 0;
    width: 7em;
    color: var(--paper-ink-tertiary);
}

body[data-page="mietvertraege"] .bank-value {
    flex: 1;
    color: var(--paper-ink-primary);
    font-family: var(--font-sans);
}

/* Attachment Checklist */
body[data-page="mietvertraege"] .attachment-checklist {
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

body[data-page="mietvertraege"] .attachment-header {
    background: var(--paper-surface-strong);
    padding: 0.5em 1em;
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--paper-ink-primary);
}

body[data-page="mietvertraege"] .attachment-list {
    list-style: none;
    padding: 1em;
    margin: 0;
}

body[data-page="mietvertraege"] .attachment-item {
    display: flex;
    align-items: center;
    gap: 0.75em;
    font-size: var(--fs-callout);
    color: var(--paper-ink-primary);
    margin-bottom: 0.5em;
}

body[data-page="mietvertraege"] .attachment-item .checkbox {
    width: 1em;
    height: 1em;
    border: 1px solid var(--paper-border);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Signature Blocks */
body[data-page="mietvertraege"] .signature-section {
    margin-top: 2em;
}

body[data-page="mietvertraege"] .signature-blocks {
    display: flex;
    gap: 1.5em;
    margin-top: 1em;
}

body[data-page="mietvertraege"] .signature-block {
    flex: 1;
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-sm);
    padding: 1em;
}

body[data-page="mietvertraege"] .signature-title {
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--paper-ink-primary);
    margin-bottom: 0.75em;
}

body[data-page="mietvertraege"] .signature-date-line {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--fs-caption);
    color: var(--paper-ink-tertiary);
    margin-bottom: 1em;
}

body[data-page="mietvertraege"] .signature-line-short {
    flex: 1;
    height: 1px;
    background: var(--paper-border);
}

body[data-page="mietvertraege"] .signature-area {
    min-height: 3em;
    margin-bottom: 0.5em;
}

body[data-page="mietvertraege"] .signature-image {
    max-height: 3em;
    max-width: 100%;
}

body[data-page="mietvertraege"] .signature-line {
    height: 1px;
    background: var(--paper-ink-primary);
    margin-bottom: 0.5em;
}

body[data-page="mietvertraege"] .signature-name {
    font-size: var(--fs-caption);
    color: var(--paper-ink-primary);
    text-align: center;
}

/* Contract Footer */
body[data-page="mietvertraege"] .contract-footer {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid var(--paper-border);
    text-align: center;
    font-size: var(--fs-caption);
    color: var(--paper-ink-tertiary);
}

/* Responsive adjustments */
@media (max-width: 48em) {
    body[data-page="mietvertraege"] .signature-blocks {
        flex-direction: column;
    }

    body[data-page="mietvertraege"] .contract-letterhead {
        flex-direction: column;
        text-align: center;
    }

    body[data-page="mietvertraege"] .letterhead-logo {
        margin: 0 auto;
    }
}



/* ============================================================================
   Templates Grid
   ============================================================================ */

body[data-page="mietvertraege"] .template-card {

    background: var(--glass-active);
    border: 1px solid var(--glass-border);
    border-radius: 0.75em;
    padding: 1.5em;
    cursor: pointer;
    transition: all 0.2s;
}



body[data-page="mietvertraege"] .template-card:hover {

    background: var(--glass-hover);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}



body[data-page="mietvertraege"] .template-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1em;
}

body[data-page="mietvertraege"] .template-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-light));
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    flex-shrink: 0;
}

body[data-page="mietvertraege"] .template-card-actions {
    display: flex;
    gap: 0.5em;
    opacity: 0;
    transition: opacity 0.2s;
}

body[data-page="mietvertraege"] .template-card:hover .template-card-actions {
    opacity: 1;
}

body[data-page="mietvertraege"] .template-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0.5em;
    background: var(--glass-hover);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

body[data-page="mietvertraege"] .template-action-btn:hover {
    background: var(--glass-active);
    color: var(--text-primary);
}

body[data-page="mietvertraege"] .template-action-btn.template-action-delete:hover {
    background: rgba(var(--ios-red-rgb), 0.2);
    color: var(--ios-system-red);
}



body[data-page="mietvertraege"] .template-card-title {

    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5em;
}



body[data-page="mietvertraege"] .template-card-description {

    color: var(--text-secondary);
    font-size: var(--fs-callout);
    margin-bottom: 1em;
}



body[data-page="mietvertraege"] .template-card-footer {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1em;
    border-top: 1px solid var(--hairline);
}

body[data-page="mietvertraege"] .template-badge {

    padding: 0.25em 0.75em;
    border-radius: 1em;
    font-size: var(--fs-caption);
    font-weight: 600;
}



body[data-page="mietvertraege"] .template-badge.default {
    background: rgba(var(--ios-green-rgb), 0.2);
    color: var(--ios-system-green);
}



/* ============================================================================
   Form Inputs
   ============================================================================ */

body[data-page="mietvertraege"] .glass-checkbox {

    width: 1.25em;
    height: 1.25em;
    border: 2px solid var(--glass-border);
    border-radius: 0.25em;
    background: var(--glass-hover);
    cursor: pointer;
    transition: all 0.2s;
}



body[data-page="mietvertraege"] .glass-checkbox:checked {

    background: var(--mietvertrag-accent-gradient);
    border-color: var(--mietvertrag-accent-solid);
}



/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 48em) {

    body[data-page="mietvertraege"] .contracts-table {

        font-size: var(--fs-callout);
    }



    body[data-page="mietvertraege"] .contracts-table th,
body[data-page="mietvertraege"] .contracts-table td {

        padding: 0.75em;
    }



    body[data-page="mietvertraege"] .modal-container {

        max-width: 100%;
        height: 100vh;
    }

    body[data-page="mietvertraege"] .modal-overlay {

        padding: var(--spacing-4);
    }



    body[data-page="mietvertraege"] .modal-container .flex {

        flex-direction: column;
    }



    body[data-page="mietvertraege"] .modal-container .w-1/2 {

        width: 100%;
    }



    body[data-page="mietvertraege"] #templatesGrid {

        grid-template-columns: 1fr;
    }


}


/* ============================================================================
   View Transitions
   ============================================================================ */

body[data-page="mietvertraege"] .view-panel {

    display: none;
    animation: fadeIn 0.3s ease-in-out;
}



body[data-page="mietvertraege"] .view-panel.active {

    display: block;
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   Action Buttons in Table
   ============================================================================ */

body[data-page="mietvertraege"] .action-buttons {

    display: flex;
    gap: 0.5em;
    justify-content: flex-end;
}



body[data-page="mietvertraege"] .action-btn {

    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5em;
    border-radius: 0.25em;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}



body[data-page="mietvertraege"] .action-btn:hover {

    background: var(--glass-hover);
    color: var(--text-primary);
    border-color: var(--text-quaternary);
}



body[data-page="mietvertraege"] .action-btn.view-btn:hover {

    color: var(--ios-system-orange, var(--accent-primary-text));
    border-color: var(--ios-system-orange, var(--accent-primary));
}



body[data-page="mietvertraege"] .action-btn.edit-btn:hover {
    color: var(--accent-warning-text);
    border-color: var(--accent-warning);
}

body[data-page="mietvertraege"] .action-btn.delete-btn:hover {
    color: var(--accent-danger-text);
    border-color: var(--accent-danger);
}



/* ============================================================================
   Tabs Navigation
   ============================================================================ */

body[data-page="mietvertraege"] .tabs-navigation {

    display: flex;
    gap: 0.5em;
    border-bottom: 2px solid var(--glass-border);
    padding-bottom: 0;
}



body[data-page="mietvertraege"] .tab-button {

    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.75em 1.5em;
    border-radius: 0.5em 0.5em 0 0;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 500;
    position: relative;
}



body[data-page="mietvertraege"] .tab-button:hover {

    background: var(--glass-hover);
    color: var(--text-primary);
}



body[data-page="mietvertraege"] .tab-button.active {

    background: var(--glass-active);
    color: var(--text-primary);
}



body[data-page="mietvertraege"] .tab-button.active::after {

    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--accent-primary), var(--accent-primary-light));
}



/* Disabled Tab Button */
body[data-page="mietvertraege"] .tab-button.tab-disabled {

    opacity: 0.5;
    cursor: not-allowed;
}



body[data-page="mietvertraege"] .tab-button.tab-disabled:hover {

    background: transparent;
    color: var(--text-secondary);
}



/* ============================================================================
   Unit Details Modal Tabs
   ============================================================================ */

body[data-page="mietvertraege"] .unit-tab {

    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    transition: all 0.2s;
    font-size: var(--fs-callout);
    font-weight: 500;
    white-space: nowrap;
}



body[data-page="mietvertraege"] .unit-tab:hover {

    background: var(--glass-hover);
    color: var(--text-primary);
}



body[data-page="mietvertraege"] .unit-tab.active {

    background: linear-gradient(135deg, rgba(var(--mietvertrag-accent-rgb), 0.18), rgba(var(--mietvertrag-accent-rgb), 0.08));
    border-color: rgba(var(--mietvertrag-accent-rgb), 0.4);
    color: var(--text-primary);
}



/* Form groups in unit modal */
body[data-page="mietvertraege"] #unitDetailsContent .form-group {

    display: flex;
    flex-direction: column;
    gap: 0.25em;
}



body[data-page="mietvertraege"] #unitDetailsContent .form-label {

    font-size: var(--fs-body);
}



body[data-page="mietvertraege"] #unitDetailsContent .glass-input {

    font-size: var(--fs-body);
}



/* Equipment and key items */
body[data-page="mietvertraege"] #unitDetailsContent [data-equipment-index],
body[data-page="mietvertraege"] #unitDetailsContent [data-key-index],
body[data-page="mietvertraege"] #unitDetailsContent [data-doc-index] {

    transition: all 0.2s;
}



body[data-page="mietvertraege"] #unitDetailsContent [data-equipment-index]:hover,
body[data-page="mietvertraege"] #unitDetailsContent [data-key-index]:hover,
body[data-page="mietvertraege"] #unitDetailsContent [data-doc-index]:hover {

    background: var(--glass-hover);
}



/* ============================================================================
   Utility Classes
   ============================================================================ */

body[data-page="mietvertraege"] .hover-lift {

    transition: transform 0.2s, box-shadow 0.2s;
}



body[data-page="mietvertraege"] .hover-lift:hover {

    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}



/* ============================================================================
   Contract Configuration Wizard
   ============================================================================ */

/* Wizard Progress Steps */
body[data-page="mietvertraege"] .wizard-progress {

    display: flex;
    align-items: center;
    justify-content: center;
}



body[data-page="mietvertraege"] .wizard-step {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}



body[data-page="mietvertraege"] .wizard-step.active,
body[data-page="mietvertraege"] .wizard-step.completed {

    opacity: 1;
}



body[data-page="mietvertraege"] .wizard-step-indicator {

    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: var(--glass-secondary);
    border: 2px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--fs-callout);
    transition: all 0.3s ease;
}



body[data-page="mietvertraege"] .wizard-step.active .wizard-step-indicator {

    background: var(--mietvertrag-accent-gradient);
    border-color: transparent;
    color: var(--mietvertrag-accent-contrast);
    box-shadow: 0 6px 16px var(--mietvertrag-accent-shadow);
}



body[data-page="mietvertraege"] .wizard-step.completed .wizard-step-indicator {

    background: var(--mietvertrag-success);
    border-color: transparent;
    color: var(--mietvertrag-accent-contrast);
}



body[data-page="mietvertraege"] .wizard-step-label {

    color: var(--text-tertiary);
    font-size: var(--fs-caption);
    white-space: nowrap;
}



body[data-page="mietvertraege"] .wizard-step.active .wizard-step-label,
body[data-page="mietvertraege"] .wizard-step.completed .wizard-step-label {

    color: var(--text-primary);
}



body[data-page="mietvertraege"] .wizard-step-connector {

    flex: 1;
    height: 2px;
    background: var(--glass-border);
    margin: 0 0.5em;
    margin-bottom: 1.5em;
    min-width: 2em;
    max-width: 4em;
}



/* Wizard Option Cards */
body[data-page="mietvertraege"] .wizard-option-card {

    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}



body[data-page="mietvertraege"] .wizard-option-card:hover {

    background: var(--glass-hover);
}



body[data-page="mietvertraege"] .wizard-option-card input:checked + .wizard-option-indicator + div,
body[data-page="mietvertraege"] .wizard-option-card:has(input:checked) {

    border-color: var(--mietvertrag-accent-solid);
}



body[data-page="mietvertraege"] .wizard-option-indicator {

    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    border: 2px solid var(--glass-border);
    background: transparent;
    flex-shrink: 0;
    margin-top: 0.125em;
    transition: all 0.2s ease;
    position: relative;
}



body[data-page="mietvertraege"] .wizard-option-card input:checked + .wizard-option-indicator {

    border-color: var(--mietvertrag-accent-solid);
    background: var(--mietvertrag-accent-solid);
}



body[data-page="mietvertraege"] .wizard-option-card input:checked + .wizard-option-indicator::after {

    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5em;
    height: 0.5em;
    background: white;
    border-radius: 50%;
}



/* Wizard Step Content */
body[data-page="mietvertraege"] .wizard-step-content {

    animation: wizardFadeIn 0.3s ease;
}



body[data-page="mietvertraege"] .wizard-step-content.hidden {

    display: none;
}



@keyframes wizardFadeIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Wizard Primary Button */
body[data-page="mietvertraege"] .wizard-primary-btn {

    background: var(--mietvertrag-accent-gradient);
    color: var(--mietvertrag-accent-contrast);
    border: none;
}



body[data-page="mietvertraege"] .wizard-primary-btn:hover {

    background: var(--mietvertrag-accent-gradient-hover);
    transform: translateY(-1px);
}



/* Utility Category Checkboxes */
body[data-page="mietvertraege"] .utility-category-item {

    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    padding: 0.75em 1em;
    border-radius: 0.5em;
    background: var(--glass-primary);
    transition: all 0.2s ease;
    cursor: pointer;
}



body[data-page="mietvertraege"] .utility-category-item:hover {

    background: var(--glass-hover);
}



body[data-page="mietvertraege"] .utility-category-item input[type="checkbox"] {

    width: 1.25em;
    height: 1.25em;
    min-width: 1.25em;
    border: 2px solid var(--glass-border);
    border-radius: 0.25em;
    background: var(--glass-secondary);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 0.125em;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}



body[data-page="mietvertraege"] .utility-category-item input[type="checkbox"]:checked {

    background: var(--mietvertrag-accent-solid);
    border-color: var(--mietvertrag-accent-solid);
    position: relative;
}



body[data-page="mietvertraege"] .utility-category-item input[type="checkbox"]:checked::after {

    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--mietvertrag-accent-contrast);
    font-size: var(--fs-caption);
    font-weight: bold;
}



body[data-page="mietvertraege"] .utility-category-info {

    flex: 1;
    min-width: 0;
}



body[data-page="mietvertraege"] .utility-category-name {

    color: var(--text-primary);
    font-weight: 500;
    font-size: var(--fs-callout);
    display: block;
}



body[data-page="mietvertraege"] .utility-category-ref {

    color: var(--text-tertiary);
    font-size: var(--fs-caption);
    margin-left: 0.5em;
}



body[data-page="mietvertraege"] .utility-category-description {

    color: var(--text-secondary);
    font-size: var(--fs-caption);
    margin-top: 0.25em;
    line-height: 1.4;
}



/* Wizard Contract Preview */
body[data-page="mietvertraege"] #wizardContractPreview {

    font-family: 'Bodoni Moda', serif;
    font-size: var(--fs-callout);
    line-height: 1.6;
    color: var(--text-primary);
}



body[data-page="mietvertraege"] #wizardContractPreview h3 {

    font-size: var(--fs-body);
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em;
    color: var(--text-primary);
}



body[data-page="mietvertraege"] #wizardContractPreview p {

    margin-bottom: 0.5em;
    color: var(--text-secondary);
}



/* Existing Contract Modal */
body[data-page="mietvertraege"] #existingContractModal .glass-card {

    max-width: 32em;
}



/* Regulatory Update Warning */
body[data-page="mietvertraege"] .border-orange-500 {

    border-color: var(--mietvertrag-accent-solid);
}



body[data-page="mietvertraege"] .text-orange-500 {

    color: var(--mietvertrag-accent-solid);
}



/* Loading Spinner */
body[data-page="mietvertraege"] .loading-spinner {

    width: 2em;
    height: 2em;
    border: 2px solid var(--glass-border);
    border-top-color: var(--mietvertrag-accent-solid);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}



@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Wizard */
@media (max-width: 48em) {

    body[data-page="mietvertraege"] .wizard-progress {

        flex-wrap: wrap;
        gap: 0.5em;
    }



    body[data-page="mietvertraege"] .wizard-step-connector {

        display: none;
    }



    body[data-page="mietvertraege"] .wizard-step {

        flex-direction: row;
        gap: 0.5em;
    }



    body[data-page="mietvertraege"] .wizard-step-indicator {

        width: 1.5em;
        height: 1.5em;
        font-size: var(--fs-caption);
    }



    body[data-page="mietvertraege"] .wizard-option-card {

        flex-direction: column;
    }



    body[data-page="mietvertraege"] #wizardStep1 .flex.gap-4,
body[data-page="mietvertraege"] #wizardStep2 .flex.gap-4 {

        flex-direction: column;
    }



    body[data-page="mietvertraege"] #wizardStep2 .flex-col.gap-3 {

        gap: 0.75em;
    }


}

/* ============================================================================
   Contract Appendices Section
   ============================================================================ */

body[data-page="mietvertraege"] .appendix-list {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

body[data-page="mietvertraege"] .appendix-item {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.75em 1em;
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    border-radius: 0.5em;
    transition: all 0.2s ease;
}

body[data-page="mietvertraege"] .appendix-item:hover {
    background: var(--glass-hover);
}

body[data-page="mietvertraege"] .appendix-item.dragging {
    opacity: 0.5;
    background: var(--glass-secondary);
}

body[data-page="mietvertraege"] .appendix-drag-handle {
    cursor: grab;
    color: var(--text-tertiary);
    padding: 0.25em;
    display: flex;
    align-items: center;
}

body[data-page="mietvertraege"] .appendix-drag-handle:active {
    cursor: grabbing;
}

body[data-page="mietvertraege"] .appendix-info {
    flex: 1;
    min-width: 0;
}

body[data-page="mietvertraege"] .appendix-title {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-page="mietvertraege"] .appendix-meta {
    font-size: var(--fs-caption);
    color: var(--text-tertiary);
    margin-top: 0.25em;
}

body[data-page="mietvertraege"] .appendix-actions {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

body[data-page="mietvertraege"] .appendix-checkbox {
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-size: var(--fs-caption);
    color: var(--text-secondary);
}

body[data-page="mietvertraege"] .appendix-checkbox input[type="checkbox"] {
    width: 1em;
    height: 1em;
    accent-color: var(--mietvertrag-accent-solid);
}

body[data-page="mietvertraege"] .appendix-remove-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.25em;
    border-radius: 0.25em;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-page="mietvertraege"] .appendix-remove-btn:hover {
    background: rgba(var(--mietvertrag-danger-rgb), 0.12);
    color: var(--mietvertrag-danger);
}

/* Empty state for appendices */
body[data-page="mietvertraege"] .appendix-empty {
    text-align: center;
    padding: 2em;
    color: var(--text-tertiary);
    background: var(--glass-primary);
    border: 1px dashed var(--glass-border);
    border-radius: 0.5em;
}

/* ============================================================================
   Contract Terms Editor Section
   ============================================================================ */

body[data-page="mietvertraege"] .terms-section {
    margin-bottom: 1.5em;
}

body[data-page="mietvertraege"] .terms-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75em;
}

body[data-page="mietvertraege"] .terms-title {
    font-weight: 600;
    color: var(--text-primary);
}

body[data-page="mietvertraege"] .terms-template-selector {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

body[data-page="mietvertraege"] .terms-template-select {
    padding: 0.5em 0.75em;
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--fs-body);
    min-width: 12em;
}

body[data-page="mietvertraege"] .terms-template-select:focus {
    outline: none;
    border-color: var(--mietvertrag-accent-solid);
}

body[data-page="mietvertraege"] .terms-customize-btn {
    padding: 0.5em 0.75em;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 0.375em;
    color: var(--text-secondary);
    font-size: var(--fs-callout);
    cursor: pointer;
    transition: all 0.2s;
}

body[data-page="mietvertraege"] .terms-customize-btn:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
}

body[data-page="mietvertraege"] .terms-preview {
    padding: 1em;
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    border-radius: 0.5em;
    max-height: 12em;
    overflow-y: auto;
    color: var(--text-secondary);
    font-size: var(--fs-callout);
    line-height: 1.6;
}

body[data-page="mietvertraege"] .terms-preview.custom {
    border-color: var(--mietvertrag-accent-solid);
    background: rgba(var(--mietvertrag-accent-rgb), 0.08);
}

/* Terms Editor Modal */
body[data-page="mietvertraege"] .terms-editor-toolbar {
    display: flex;
    gap: 0.25em;
    padding: 0.5em;
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    border-bottom: none;
    border-radius: 0.5em 0.5em 0 0;
}

body[data-page="mietvertraege"] .terms-editor-btn {
    padding: 0.375em 0.5em;
    background: transparent;
    border: none;
    border-radius: 0.25em;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-page="mietvertraege"] .terms-editor-btn:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
}

body[data-page="mietvertraege"] .terms-editor-btn.active {
    background: var(--mietvertrag-accent-solid);
    color: var(--mietvertrag-accent-contrast);
}

body[data-page="mietvertraege"] .terms-editor-content {
    min-height: 20em;
    padding: 1em;
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    border-radius: 0 0 0.5em 0.5em;
    color: var(--text-primary);
    font-size: var(--fs-callout);
    line-height: 1.6;
    overflow-y: auto;
}

body[data-page="mietvertraege"] .terms-editor-content:focus {
    outline: none;
    border-color: var(--mietvertrag-accent-solid);
}

body[data-page="mietvertraege"] .terms-editor-content h1,
body[data-page="mietvertraege"] .terms-editor-content h2,
body[data-page="mietvertraege"] .terms-editor-content h3 {
    margin-bottom: 0.5em;
}

body[data-page="mietvertraege"] .terms-editor-content p {
    margin-bottom: 0.75em;
}

body[data-page="mietvertraege"] .terms-editor-content ul,
body[data-page="mietvertraege"] .terms-editor-content ol {
    margin-left: 1.5em;
    margin-bottom: 0.75em;
}

/* ============================================================================
   Document Picker Modal
   ============================================================================ */

body[data-page="mietvertraege"] .doc-picker-search {
    padding: 0.75em 1em;
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    width: 100%;
    font-size: var(--fs-body);
}

body[data-page="mietvertraege"] .doc-picker-search:focus {
    outline: none;
    border-color: var(--mietvertrag-accent-solid);
}

body[data-page="mietvertraege"] .doc-picker-search::placeholder {
    color: var(--text-tertiary);
}

body[data-page="mietvertraege"] .doc-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    max-height: 20em;
    overflow-y: auto;
    margin-top: 1em;
}

body[data-page="mietvertraege"] .doc-picker-item {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.75em 1em;
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    border-radius: 0.5em;
    cursor: pointer;
    transition: all 0.2s;
}

body[data-page="mietvertraege"] .doc-picker-item:hover {
    background: var(--glass-hover);
}

body[data-page="mietvertraege"] .doc-picker-item.selected {
    background: rgba(var(--mietvertrag-accent-rgb), 0.12);
    border-color: var(--mietvertrag-accent-solid);
}

body[data-page="mietvertraege"] .doc-picker-checkbox {
    width: 1.25em;
    height: 1.25em;
    accent-color: var(--mietvertrag-accent-solid);
}

body[data-page="mietvertraege"] .doc-picker-icon {
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-secondary);
    border-radius: 0.375em;
    color: var(--text-secondary);
}

body[data-page="mietvertraege"] .doc-picker-info {
    flex: 1;
    min-width: 0;
}

body[data-page="mietvertraege"] .doc-picker-name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-page="mietvertraege"] .doc-picker-meta {
    font-size: var(--fs-caption);
    color: var(--text-tertiary);
    margin-top: 0.125em;
}

body[data-page="mietvertraege"] .doc-picker-empty {
    text-align: center;
    padding: 2em;
    color: var(--text-tertiary);
}

/* ============================================================================
   Nebenkosten Details (Contract Preview)
   ============================================================================ */

body[data-page="mietvertraege"] .nebenkosten-details {
    margin-top: 1.5em;
    padding: 1em;
    background: var(--glass-hover);
    border: 1px solid var(--glass-border);
    border-radius: 0.5em;
}

body[data-page="mietvertraege"] .nebenkosten-title {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--hairline);
}

body[data-page="mietvertraege"] .nebenkosten-group {
    margin-bottom: 1em;
}

body[data-page="mietvertraege"] .nebenkosten-group-header {
    font-size: var(--fs-callout);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-page="mietvertraege"] .nebenkosten-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-callout);
}

body[data-page="mietvertraege"] .nebenkosten-table th {
    text-align: left;
    padding: 0.5em;
    font-weight: 500;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--hairline);
}

body[data-page="mietvertraege"] .nebenkosten-table td {
    padding: 0.5em;
    color: var(--text-primary);
    border-bottom: 1px solid var(--hairline);
}

body[data-page="mietvertraege"] .nebenkosten-item-name {
    text-align: left;
}

body[data-page="mietvertraege"] .nebenkosten-item-key {
    text-align: center;
    color: var(--text-secondary);
}

body[data-page="mietvertraege"] .nebenkosten-item-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body[data-page="mietvertraege"] .nebenkosten-subtotal {
    font-weight: 500;
    background: var(--glass-secondary);
}

body[data-page="mietvertraege"] .nebenkosten-subtotal td {
    border-top: 1px solid var(--hairline);
    padding-top: 0.75em;
}

body[data-page="mietvertraege"] .nebenkosten-total {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 2px solid var(--glass-border);
    text-align: right;
    font-size: var(--fs-body);
    color: var(--text-primary);
}

/* ============================================================================
   Template Editor Modal Styles
   ============================================================================ */

body[data-page="mietvertraege"] .nebenkosten-config-section {
    margin-top: 1.5em;
    padding: 1em;
    background: var(--glass-hover);
    border: 1px solid var(--glass-border);
    border-radius: 0.5em;
}

body[data-page="mietvertraege"] .nebenkosten-config-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

body[data-page="mietvertraege"] .nebenkosten-config-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75em;
    background: var(--glass-hover);
    border-radius: 0.375em;
    gap: 1em;
}

body[data-page="mietvertraege"] .nebenkosten-item-info {
    flex: 1;
    min-width: 0;
}

body[data-page="mietvertraege"] .nebenkosten-item-title {
    font-weight: 500;
    color: var(--text-primary);
}

body[data-page="mietvertraege"] .nebenkosten-item-meta {
    font-size: var(--fs-caption);
    color: var(--text-tertiary);
    margin-top: 0.25em;
}

body[data-page="mietvertraege"] .nebenkosten-item-badge {
    padding: 0.25em 0.5em;
    font-size: var(--fs-caption);
    border-radius: 0.25em;
    font-weight: 500;
}

body[data-page="mietvertraege"] .nebenkosten-item-badge.vorauszahlung {
    background: rgba(var(--mietvertrag-accent-rgb), 0.18);
    color: var(--mietvertrag-accent-solid);
}

body[data-page="mietvertraege"] .nebenkosten-item-badge.pauschale {
    background: rgba(var(--mietvertrag-success-rgb), 0.18);
    color: var(--mietvertrag-success);
}

body[data-page="mietvertraege"] .nebenkosten-item-badge.umlageschluessel {
    background: rgba(var(--mietvertrag-accent-rgb), 0.26);
    color: var(--mietvertrag-accent-solid);
}

body[data-page="mietvertraege"] .nebenkosten-remove-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 0.25em;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-page="mietvertraege"] .nebenkosten-remove-btn:hover {
    background: rgba(var(--mietvertrag-danger-rgb), 0.16);
    color: var(--mietvertrag-danger);
}

body[data-page="mietvertraege"] .nebenkosten-empty {
    text-align: center;
    padding: 1.5em;
    color: var(--text-tertiary);
    font-size: var(--fs-callout);
}

/* Nebenkosten Quick Add Buttons */
body[data-page="mietvertraege"] .nebenkosten-quick-btn {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

body[data-page="mietvertraege"] .nebenkosten-quick-btn:hover {
    background: var(--glass-hover);
    transform: translateY(-2px);
}

body[data-page="mietvertraege"] .nebenkosten-quick-icon {
    font-size: 1.25em;
}

body[data-page="mietvertraege"] .nebenkosten-quick-name {
    font-size: var(--fs-callout);
    color: var(--text-primary);
}

body[data-page="mietvertraege"] .nebenkosten-edit-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 0.25em;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-page="mietvertraege"] .nebenkosten-edit-btn:hover {
    background: rgba(var(--mietvertrag-accent-rgb), 0.2);
    color: var(--mietvertrag-accent-solid);
}

/* Country Toggle Styles */
body[data-page="mietvertraege"] .country-toggle {
    flex: 1;
    transition: all 0.2s ease;
}

body[data-page="mietvertraege"] .country-toggle.active {
    background: var(--glass-hover, rgba(255, 255, 255, 0.2));
    border-color: var(--sunset-orange, var(--accent-primary-dark));
    color: var(--sunset-orange, var(--accent-primary-dark));
    box-shadow: 0 0 0 1px var(--sunset-orange, var(--accent-primary-dark));
}

body[data-page="mietvertraege"] .country-toggle:not(.active):hover {
    background: var(--glass-secondary, rgba(255, 255, 255, 0.1));
}

/* Section Editor Modal - Scrollable Content */
body[data-page="mietvertraege"] #sectionEditorModal .modal-content-wrapper {
    max-height: 85vh;
    overflow-y: auto;
}

body[data-page="mietvertraege"] #sectionEditorModal .modal-content-wrapper form {
    max-height: calc(85vh - 100px);
    overflow-y: auto;
    padding-right: 0.5em;
}

body[data-page="mietvertraege"] #nebenkostenPickerModal .p-8 {
    width: 100%;
}

body[data-page="mietvertraege"] #sectionEditorModal #sectionEditorForm {
    max-width: 40rem;
    margin: 0 auto;
}

body[data-page="mietvertraege"] #sectionEditorModal .glass-container-thin,
body[data-page="mietvertraege"] #sectionEditorModal .glass-input,
body[data-page="mietvertraege"] #sectionEditorModal select,
body[data-page="mietvertraege"] #sectionEditorModal textarea,
body[data-page="mietvertraege"] #nebenkostenPickerModal .glass-container-thin,
body[data-page="mietvertraege"] #nebenkostenPickerModal select,
body[data-page="mietvertraege"] #nebenkostenPickerModal textarea,
body[data-page="mietvertraege"] #nebenkostenPickerModal input[type="text"],
body[data-page="mietvertraege"] #nebenkostenPickerModal input[type="number"] {
    width: 100%;
}

/* Scrollbar styling for modal */
body[data-page="mietvertraege"] #sectionEditorModal .modal-content-wrapper::-webkit-scrollbar,
body[data-page="mietvertraege"] #sectionEditorModal form::-webkit-scrollbar {
    width: 6px;
}

body[data-page="mietvertraege"] #sectionEditorModal .modal-content-wrapper::-webkit-scrollbar-track,
body[data-page="mietvertraege"] #sectionEditorModal form::-webkit-scrollbar-track {
    background: transparent;
}

body[data-page="mietvertraege"] #sectionEditorModal .modal-content-wrapper::-webkit-scrollbar-thumb,
body[data-page="mietvertraege"] #sectionEditorModal form::-webkit-scrollbar-thumb {
    background: var(--glass-border, rgba(255, 255, 255, 0.2));
    border-radius: 3px;
}

body[data-page="mietvertraege"] #sectionEditorModal .modal-content-wrapper::-webkit-scrollbar-thumb:hover,
body[data-page="mietvertraege"] #sectionEditorModal form::-webkit-scrollbar-thumb:hover {
    background: var(--glass-hover, rgba(255, 255, 255, 0.3));
}

/* ============================================================================
   Contract Variable Chips
   Styled placeholders for template variables in contract preview
   ============================================================================ */

.contract-variable-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.5em;
    margin: 0 0.1em;
    /* Sunset orange (mietvertrag accent) instead of blue */
    background: linear-gradient(135deg,
        rgba(var(--accent-primary-rgb), 0.15),
        rgba(var(--accent-primary-rgb), 0.25)
    );
    border: 1px solid rgba(var(--accent-primary-rgb), 0.4);
    border-radius: 0.75em;
    color: var(--mietvertrag-accent-solid, var(--accent-primary-text));
    font-size: var(--fs-callout);
    font-weight: 500;
    white-space: nowrap;
    vertical-align: baseline;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.contract-variable-chip:hover {
    background: linear-gradient(135deg,
        rgba(var(--accent-primary-rgb), 0.25),
        rgba(var(--accent-primary-rgb), 0.35)
    );
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Theme-aware chip colors - all use sunset orange */
[data-theme="light"] .contract-variable-chip {
    background: linear-gradient(135deg,
        rgba(var(--ios-orange-rgb), 0.1),
        rgba(var(--ios-orange-rgb), 0.18)
    );
    border-color: rgba(var(--ios-orange-rgb), 0.35);
    color: var(--accent-primary-text);
}

[data-theme="dark"] .contract-variable-chip,
[data-theme="darkart"] .contract-variable-chip,
[data-theme="darkmodern"] .contract-variable-chip {
    background: linear-gradient(135deg,
        rgba(var(--ios-orange-rgb), 0.2),
        rgba(var(--ios-orange-rgb), 0.3)
    );
    border-color: rgba(var(--ios-orange-rgb), 0.5);
    color: var(--accent-primary-text);
}

/* Print-friendly styling */
@media print {
    .contract-variable-chip {
        background: #f0f0f0;
        border: 1px solid #ccc;
        color: #333;
        box-shadow: none;
    }
}

/* Variable dropdown styling */
body[data-page="mietvertraege"] #variableDropdown {
    min-width: 200px;
}

body[data-page="mietvertraege"] #variableDropdown optgroup {
    font-weight: 600;
    color: var(--text-secondary);
    padding-top: 0.5em;
}

body[data-page="mietvertraege"] #variableDropdown option {
    padding: 0.5em;
    font-weight: 400;
}

/* ============================================================================
   Version Combobox (Custom Dropdown for Save Modal)
   ============================================================================ */

/* Wrapper for the combobox */
.version-combobox-wrapper {
    position: relative;
    width: 100%;
}

/* Input field styling */
.version-combobox-input {
    padding-right: 2.5em !important;
}

/* Dropdown toggle button */
.version-combobox-toggle {
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0.5em;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 0.375em;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.version-combobox-toggle:hover {
    color: var(--text-primary);
    background: var(--glass-hover);
}

.version-combobox-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.3);
}

/* Custom dropdown list */
.version-dropdown {
    position: absolute;
    top: calc(100% + 0.25em);
    left: 0;
    right: 0;
    max-height: 15em;
    overflow-y: auto;
    background: var(--glass-secondary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 0.75em;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.version-dropdown.hidden {
    opacity: 0;
    transform: translateY(-0.5em);
    pointer-events: none;
}

/* Empty state */
.version-dropdown-empty {
    padding: 1em;
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--fs-callout);
}

/* Option group labels */
.version-dropdown-group {
    padding: 0.5em 0.75em 0.25em;
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-top: 1px solid var(--hairline);
}

.version-dropdown-group:first-child {
    border-top: none;
}

/* Individual options */
.version-dropdown-option {
    padding: 0.75em 1em;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.version-dropdown-option:hover,
.version-dropdown-option:focus,
.version-dropdown-option.highlighted {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.15) 0%, rgba(var(--accent-primary-rgb), 0.25) 100%);
    color: var(--text-primary);
}

.version-dropdown-option:active {
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.25) 0%, rgba(var(--accent-primary-rgb), 0.35) 100%);
}

/* Option icon for shared/private indicator */
.version-dropdown-option .option-icon {
    width: 1em;
    height: 1em;
    opacity: 0.6;
}

.version-dropdown-option:hover .option-icon {
    opacity: 1;
}

/* Scrollbar styling for dropdown */
.version-dropdown::-webkit-scrollbar {
    width: 6px;
}

.version-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.version-dropdown::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 3px;
}

.version-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-quaternary);
}

/* ============================================================================
   PDF Preview Iframe
   ============================================================================ */

body[data-page="mietvertraege"] .pdf-preview-iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--glass-primary);
}

body[data-page="mietvertraege"] #pdfPreviewContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--glass-primary);
    border-radius: var(--radius-md);
}

/* PDF Loading State */
body[data-page="mietvertraege"] .pdf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: var(--glass-primary);
    border-radius: var(--radius-md);
}

body[data-page="mietvertraege"] .pdf-loading .loading-spinner {
    width: 3em;
    height: 3em;
    border: 3px solid var(--glass-border);
    border-top-color: var(--mietvertrag-accent-solid);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

body[data-page="mietvertraege"] .pdf-loading.hidden {
    display: none;
}

/* Contract Terms Selection Dropdown Styling */
body[data-page="mietvertraege"] .contract-terms-selection {
    margin-top: 1.5em;
}

/* Country Toggle Buttons */
body[data-page="mietvertraege"] .country-toggle-btn {
    transition: all 0.2s ease;
    border: 1px solid var(--glass-border);
    font-size: var(--fs-callout);
}

body[data-page="mietvertraege"] .country-toggle-btn.active {
    background: var(--mietvertrag-accent-solid);
    color: var(--button-text-on-color);
    border-color: var(--mietvertrag-accent-solid);
}

body[data-page="mietvertraege"] .country-toggle-btn:not(.active):hover {
    background: var(--glass-hover);
    border-color: var(--mietvertrag-accent-solid);
}

/* ============================================================================
   Nebenräume (Additional Spaces) Styling
   ============================================================================ */

body[data-page="mietvertraege"] .nebenraum-row {
    border: 1px solid var(--glass-border);
    transition: border-color 0.2s ease;
}

body[data-page="mietvertraege"] .nebenraum-row:hover {
    border-color: var(--mietvertrag-accent-solid);
}

body[data-page="mietvertraege"] .nebenraum-remove-btn {
    color: var(--ios-system-red);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    min-width: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-page="mietvertraege"] .nebenraum-remove-btn:hover {
    opacity: 1;
}

body[data-page="mietvertraege"] #nebenraeumeContainer .glass-input {
    font-size: var(--fs-body);
}

/* Auto-linked Sondereigentum rows */
body[data-page="mietvertraege"] .nebenraum-row--linked {
    border-color: var(--ios-system-orange);
    border-style: dashed;
    opacity: 0.85;
}

body[data-page="mietvertraege"] .nebenraum-row--linked:hover {
    opacity: 1;
}

body[data-page="mietvertraege"] .nebenraum-linked-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    background: var(--ios-system-orange);
    color: var(--text-on-accent);
    border-radius: 0.375em;
    white-space: nowrap;
    font-weight: 500;
}

body[data-page="mietvertraege"] .nebenraum-link-icon {
    display: flex;
    align-items: center;
    min-width: 2em;
    justify-content: center;
}

/* Unit type badge in unit picker */
body[data-page="mietvertraege"] .unit-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1em 0.4em;
    background: var(--glass-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 0.25em;
    white-space: nowrap;
    color: var(--text-secondary);
    font-weight: 500;
}

body[data-page="mietvertraege"] #addNebenraumBtn {
    color: var(--mietvertrag-accent-solid);
    border-color: var(--mietvertrag-accent-solid);
}

body[data-page="mietvertraege"] #addNebenraumBtn:hover {
    background: var(--mietvertrag-accent-solid);
    color: var(--button-text-on-color);
}

body[data-page="mietvertraege"] .contract-terms-selection select {
    width: 100%;
    padding: 0.75em 1em;
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--fs-body);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1em center;
    padding-right: 2.5em;
}

body[data-page="mietvertraege"] .contract-terms-selection select:hover {
    border-color: var(--mietvertrag-accent-solid);
    background-color: var(--glass-hover);
}

body[data-page="mietvertraege"] .contract-terms-selection select:focus {
    outline: none;
    border-color: var(--mietvertrag-accent-solid);
    box-shadow: 0 0 0 2px rgba(var(--mietvertrag-accent-rgb), 0.2);
}

body[data-page="mietvertraege"] .contract-terms-selection select option {
    background: var(--glass-secondary);
    color: var(--text-primary);
    padding: 0.5em;
}

/* Contract Attachments Section Styling */
body[data-page="mietvertraege"] .contract-attachments-section {
    margin-top: 1.5em;
}

body[data-page="mietvertraege"] .contract-attachments-section .appendix-item {
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    border-radius: 0.5em;
    padding: 0.75em 1em;
    margin-bottom: 0.5em;
    transition: all 0.2s ease;
}

body[data-page="mietvertraege"] .contract-attachments-section .appendix-item:hover {
    background: var(--glass-hover);
    border-color: rgba(var(--mietvertrag-accent-rgb), 0.4);
}

body[data-page="mietvertraege"] .contract-attachments-section .appendix-include-checkbox {
    width: 1em;
    height: 1em;
    accent-color: var(--mietvertrag-accent-solid);
    cursor: pointer;
}

body[data-page="mietvertraege"] .contract-attachments-section .remove-appendix-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.25em;
    border-radius: 0.25em;
    transition: all 0.2s;
}

body[data-page="mietvertraege"] .contract-attachments-section .remove-appendix-btn:hover {
    background: rgba(var(--mietvertrag-danger-rgb), 0.15);
    color: var(--mietvertrag-danger);
}

/* PDF HTML Preview Fallback */
body[data-page="mietvertraege"] .pdf-html-preview {
    background: white;
    color: #1a1a1a;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 2em;
    margin: 1em auto;
    max-width: 210mm;
    min-height: 297mm;
}

body[data-page="mietvertraege"] .pdf-html-preview.hidden {
    display: none;
}

/* Responsive adjustments for PDF preview */
@media (max-width: 64em) {
    body[data-page="mietvertraege"] .pdf-preview-iframe {
        min-height: 400px;
    }

    body[data-page="mietvertraege"] .pdf-loading {
        min-height: 300px;
    }
}

@media (max-width: 48em) {
    body[data-page="mietvertraege"] .pdf-preview-iframe {
        min-height: 300px;
    }

    body[data-page="mietvertraege"] .pdf-loading {
        min-height: 200px;
    }

    body[data-page="mietvertraege"] .contract-terms-selection,
    body[data-page="mietvertraege"] .contract-attachments-section {
        margin-top: 1em;
    }
}

/* A5: Make terms/AGB editors stack vertically instead of side-by-side */
body[data-page="mietvertraege"] #termsView .grid.grid-cols-2 {
    grid-template-columns: 1fr;
}

/* A6: Increase template edit form field sizes */
body[data-page="mietvertraege"] #unitDetailsContent .form-label {
    /* 1rem already includes --font-scale (set on html); multiplying again double-scaled it */
    font-size: var(--fs-body);
}

body[data-page="mietvertraege"] #unitDetailsContent .glass-input {
    font-size: var(--fs-body);
    padding: 0.75em 1em;
}

body[data-page="mietvertraege"] #unitDetailsContent textarea.glass-input {
    min-height: 6em;
}

/* ============================================================
   #4 — Terms editor: Edit ⇄ Preview toggle + structured clauses
   Replaces the single wall-of-text textarea with a readable,
   navigable clause view. Scoped + theme-aware (all 5 themes).
   ============================================================ */

/* Segmented Edit/Preview toggle */
body[data-page="mietvertraege"] .terms-view-toggle {
    display: inline-flex;
    gap: 0.25em;
    padding: 0.25em;
    margin-bottom: 1em;
    background: var(--glass-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
}

body[data-page="mietvertraege"] .terms-toggle-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.8125em;
    font-weight: 500;
    padding: 0.4em 1em;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

body[data-page="mietvertraege"] .terms-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--glass-hover);
}

body[data-page="mietvertraege"] .terms-toggle-btn.active {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

/* Resizable, readable raw editor (was fixed h-96, resize-none) */
body[data-page="mietvertraege"] .terms-editor {
    min-height: 26em;
    max-height: 60vh;
    resize: vertical;
    line-height: 1.6;
    font-size: 0.875em;
    color: var(--text-primary);
    tab-size: 2;
}

/* Structured, read-only preview */
body[data-page="mietvertraege"] .terms-preview {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.5em;
}

body[data-page="mietvertraege"] .terms-preview .terms-intro {
    font-size: 0.875em;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 1em;
    white-space: pre-wrap;
}

body[data-page="mietvertraege"] .terms-preview .terms-empty {
    font-size: 0.875em;
    color: var(--text-tertiary);
    text-align: center;
    padding: 2em 1em;
}

/* One collapsible clause card per Art./§ */
body[data-page="mietvertraege"] .terms-clause {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-secondary);
    margin-bottom: 0.6em;
    overflow: hidden;
}

body[data-page="mietvertraege"] .terms-clause-header {
    display: flex;
    align-items: center;
    gap: 0.6em;
    width: 100%;
    text-align: left;
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.75em 0.9em;
    color: var(--text-primary);
    font-family: var(--font-sans);
}

body[data-page="mietvertraege"] .terms-clause-header:hover {
    background: var(--glass-hover);
}

body[data-page="mietvertraege"] .terms-clause-num {
    flex-shrink: 0;
    font-size: 0.75em;
    font-weight: 600;
    color: var(--accent-primary-text);
    background: var(--glass-primary);
    border-radius: var(--radius-sm);
    padding: 0.2em 0.55em;
    min-width: 3.2em;
    text-align: center;
}

body[data-page="mietvertraege"] .terms-clause-title {
    flex: 1;
    font-size: 0.8125em;
    font-weight: 600;
    letter-spacing: 0.01em;
}

body[data-page="mietvertraege"] .terms-clause-caret {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}

body[data-page="mietvertraege"] .terms-clause.open .terms-clause-caret {
    transform: rotate(90deg);
}

body[data-page="mietvertraege"] .terms-clause-body {
    display: none;
    padding: 0 0.9em 0.85em 0.9em;
    font-size: 0.8125em;
    line-height: 1.65;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

body[data-page="mietvertraege"] .terms-clause.open .terms-clause-body {
    display: block;
}

/* ══════════════════════════════════════════════
   MOBILE (≤48em)
   ══════════════════════════════════════════════ */

@media (max-width: 48em) {
    /* The three view tabs ("Liste", "Vorlagen", "Erläuterung & AGB") sum to more
       than 390px, so the last one was pushed past the viewport and clipped by
       body's overflow-x:hidden — unreachable by any gesture. Scroll the rail
       instead of wrapping it: wrapped tabs break the underline-on-active
       affordance, a scrolling rail keeps every label at full width and readable. */
    body[data-page="mietvertraege"] .tabs-navigation {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    body[data-page="mietvertraege"] .tabs-navigation::-webkit-scrollbar {
        display: none;
    }

    body[data-page="mietvertraege"] .tabs-navigation .tab-button {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Title block + "Neuer Vertrag" sit in a .flex-between row that does not wrap;
       at the largest font scale the button ran past the right edge. Stack them. */
    body[data-page="mietvertraege"] .container > .mb-8 > .flex-between {
        flex-wrap: wrap;
        gap: var(--spacing-3);
    }

    body[data-page="mietvertraege"] .container > .mb-8 > .flex-between > div {
        min-width: 0;
    }

    /* Search field + status filter + building filter share one non-wrapping row.
       At 390px the two <select>s were pushed clean off the right edge and clipped
       away entirely — you could not filter the contract list at all. Selects clip
       rather than ellipsise, so they also need an explicit width cap. */
    body[data-page="mietvertraege"] #listView > .flex.gap-4 {
        flex-wrap: wrap;
    }

    body[data-page="mietvertraege"] #listView > .flex.gap-4 > input,
    body[data-page="mietvertraege"] #listView > .flex.gap-4 > select {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }
}