/* ?????????????????????????????????????????????????????
   Authoring Pages – Shared Styles
   Naming: auth-{element}--{modifier}
   Used by: Kunden, Produkte, Zeiterfassungen, Dokumente
   ????????????????????????????????????????????????????? */

/* Outer wrapper (max-width limiter, centered) */
.auth-wrap {
    max-width: var(--edit-view-width);
    width: 100%;
    margin: 0 auto;
}

/* Card panel (tab panels & single-form wrappers) */
.auth-card {
    background-color: var(--ef-bg-primary);
    border: none;
    border-radius: 0.625rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 1.25rem 1.5rem;
}

/* Stacked auth-cards — gap between sections */
.auth-wrap .auth-card + .auth-card {
    margin-top: 1rem;
}

/* EFCard inside authoring context — white, no border */
.auth-card {
    --ef-card-bg: var(--ef-bg-primary);
    --ef-card-border: transparent;
}

.auth-card .ef-card {
    border-radius: var(--ef-radius-sm);
    width: 100%;
    display: block;
}

.auth-card .ef-card__body {
    padding: 0;
}

/* Tab content area */
.auth-tab-content {
    display: flex;
    flex-direction: column;
    row-gap: 0.625rem;
    width: 100%;
}

/* Tab header (title + optional right column) */
.auth-tab-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.auth-tab-header-left {
    flex: 1;
    min-width: 0;
}

.auth-tab-header-right .ef-label-wrapper {
    width: 100%;
}

/* Title / Subtitle */
.auth-tab-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--ef-text-description) !important;
}

.auth-tab-subtitle {
    font-size: 0.875rem;
    margin: 0;
    color: var(--ef-text-description) !important;
}

/* Form container */
.auth-form {
    display: flex;
    flex-direction: column;
    row-gap: 0.625rem;
    width: 100%;
}

/* Card body in authoring context — flex column with gap */
.auth-tab-content .ef-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* EFCard inside tab content (e.g. Anhänge): white, no border */
.auth-tab-content .ef-card {
    background-color: var(--ef-bg-primary) !important;
    border: none !important;
    box-shadow: none !important;
}

.auth-tab-content .ef-card__body {
    background-color: var(--ef-bg-primary) !important;
}

/* Grid row base */
.auth-form-row {
    display: grid;
    column-gap: 1.6rem;
    row-gap: 1rem;
    min-width: 0;
}

/* Column modifiers */
.auth-row--1 { grid-template-columns: 1fr; }
.auth-row--2 { grid-template-columns: 1fr 1fr; }
.auth-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.auth-row--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.auth-row--5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.auth-row--plz { grid-template-columns: 13.3fr 45.6fr 29.5fr; }
.auth-row--nummer { grid-template-columns: 25% 1fr; }
.auth-row--zahlung-input { grid-template-columns: 7.5rem 1fr 1fr 8rem auto; column-gap: 0.75rem; }
.auth-row--zahlung-rest { grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 0.75rem; }

/* Footer */
.auth-footer {
    margin-top: 2.5rem;
}

/* Right-aligned number fields (DxSpinEdit, Gesamt etc.) */
.align-right .ef-label {
    justify-content: flex-end;
}

.align-right .ef-label-control {
    text-align: right;
}

.align-right .ef-label-control input {
    text-align: right;
}

/* ── Nummer badge (large variant of ef-listbox-item__nummer) ── */
.auth-nummer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ef-primary-dark);
    background-color: var(--ef-primary-light);
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    line-height: 1.4;
    min-height: 2.125rem;
    letter-spacing: 0.02em;
    user-select: text;
}

.auth-nummer-badge--auto {
    color: var(--ef-text-secondary);
    background-color: var(--ef-bg-secondary);
    font-weight: 400;
    font-style: italic;
    font-size: 0.85rem;
}

/* Switch alignment */
.auth-switch {
    justify-self: end;
}

.auth-switch.ust-switch {
    align-self: center;
}

/* ====== Field Priority System (Phone only) ============================
   Apply these classes on the wrapper of a label+input pair to control
   visibility on Phone (<576px = DeviceSize.XSmall):
     ef-field--primary    -> always visible (default if class missing)
     ef-field--secondary  -> visible by default, but pages may collapse
                             into a .ef-field-group--advanced section
     ef-field--advanced   -> hidden on Phone unless the parent
                             .ef-field-group--advanced is .is-expanded
   On Tablet+ all classes are visible. Pages opt in field by field.
====================================================================== */
@media (max-width: 575.98px) {
    .ef-field--advanced {
        display: none;
    }

    .ef-field-group--advanced.is-expanded .ef-field--advanced {
        display: block;
    }
}

/* Toggle button for an advanced field group ("Weitere Angaben"). */
.ef-field-group__toggle {
    display: none;
    background: transparent;
    border: 1px dashed var(--ef-border-medium);
    border-radius: var(--ef-radius-md);
    color: var(--ef-text-secondary);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    width: 100%;
    text-align: left;
    min-height: var(--ef-touch-button-height-mobile);
}

@media (max-width: 575.98px) {
    .ef-field-group__toggle {
        display: block;
    }
}

/* Responsive */
@media (max-width: 767px) {
    .auth-card {
        padding: 0.75rem 1rem;
        border: none;
        box-shadow: none;
    }

    .auth-tab-header {
        flex-direction: column;
    }

    .auth-row--plz {
        grid-template-columns: 1fr;
    }
}

/* ====== Mobile-first row collapse =====================================
   Below tablet (--ef-bp-tablet = 768px) any auth-row--N collapses to a
   single column. Modules that need a denser mobile layout can override
   per-row; default behaviour is 1 column on Phone/Phablet.
====================================================================== */
@media (max-width: 767.98px) {
    .auth-row--2,
    .auth-row--3,
    .auth-row--4,
    .auth-row--5 {
        grid-template-columns: 1fr;
        row-gap: 0.75rem;
    }

    .auth-form-row {
        column-gap: 0.75rem;
    }
}