/* -------------------------------------------------------
   Modul: Customer Panel
   Zuständig für: Anpassungen der Amelia Account-Übersicht
   Farben: zentrale AFC-Palette (--afc-color-*, siehe colors.php)
------------------------------------------------------- */

/* Tab-Button "Benutzerdefinierte Felder" ausblenden. */
#tab-third {
    display: none !important;
}

/* Anpassung Cabinet Menü */
.amelia-cust-panel .am-fs-sb__page-wrapper__cabinet .am-fs-sb__page-heading,
.amelia-cust-panel .am-fs-sb__page-wrapper__cabinet + .am-fs-sb__footer .am-fs-sb__page-heading {
    color: var(--afc-color-on-color, #FFFFFF) !important;
}

/* Anpassung Buchungen Kachel-Layout */
.amelia-cust-panel .am-cc__heading-info__part:first-child {
  width: 85% !important;
}

.amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__heading,
.amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__heading-info__part {
  gap: 15px !important;
}

.amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__name {
  text-align: left !important;
}

/* Pseudo-Elemente entfernen */
.amelia-cust-panel .amelia-v2-booking #amelia-container .am-capf__menu::before,
.amelia-cust-panel .amelia-v2-booking #amelia-container .am-capf__menu::after,
.amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__heading::before,
.amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__heading::after,
.amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__heading-info::before,
.amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__heading-info::after,
.amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__heading-info__part::before,
.amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__heading-info__part::after {
  display: none !important;
}

/* Panel "Benutzerdefinierte Felder" (#pane-third) liegt im DOM
   bereits direkt hinter "Persönliche Daten" (#pane-first). Statt
   die Sichtbarkeit per JS gegen Vues eigene Re-Renders zu
   synchronisieren (Race Condition - Vue setzt sein eigenes
   style="display:none" jederzeit neu, unabhängig vom Tab-Wechsel),
   lösen wir es rein über CSS: Der general-sibling-Selector reagiert
   automatisch und ohne Verzögerung auf Vues aria-hidden-Attribut
   an #pane-first, egal wie oft Vue #pane-third neu rendert.
   !important überschreibt dabei zuverlässig Vues Inline-Style. */
#pane-first[aria-hidden="false"] ~ #pane-third {
    display: block !important;
}

/* Custom-Field-Formular optisch an "Persönliche Daten"
   angleichen, damit kein sichtbarer Bruch zwischen beiden
   Formularen entsteht. Feintuning nach Sichtprüfung im
   Browser ggf. anpassen. */
#pane-third {
    margin-top: -8px;
}

#pane-third .am-capei-att-cf__item:last-child {
    margin-bottom: 0;
}


/* -------------------------------------------------------
   BUCHUNGSDETAILS INLINE (siehe customer-panel.js)
   Ersetzt Amelias beide Umschalter "Zeitplan" und
   "Benutzerdefinierte Felder" durch fest sichtbaren Text in der
   aufgeklappten Kachel.
------------------------------------------------------- */

/* Amelias native Umschalter (Zeitplan-Icon + Datei-Icon) immer
   ausblenden - werden durch die Inline-Darstellung ersetzt */
.am-cc__content-inner > .am-cc__data {
    display: none !important;
}

/* Umschalter "Benutzerdefinierte Felder" – von customer-panel.js per
   Text erkannt und markiert (alle Custom Fields stehen inline) */
.am-cc__content-inner > [data-afc-hidden-toggle] {
    display: none !important;
}

.afc-booking-inline-details {
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--afc-color-text, #1A2C37);
}

.afc-bid__row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.afc-bid__row--schedule {
    align-items: center;
    color: color-mix(in srgb, var(--afc-color-text, #1A2C37) 85%, transparent);
}

.afc-bid__row--schedule .am-icon-clock {
    font-size: 14px;
    color: color-mix(in srgb, var(--afc-color-text, #1A2C37) 50%, transparent);
}

.afc-bid__label {
    color: color-mix(in srgb, var(--afc-color-text, #1A2C37) 60%, transparent);
    font-weight: 600;
}

.afc-bid__value {
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Kundenbereich
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Kachel-Kopf: die feste 85 %-Breite des ersten Teils lässt dem
       zweiten Teil (Status/Preis) auf Phones kaum Platz – hier darf
       der Kopf umbrechen, beide Teile nehmen die volle Breite. */
    .amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__heading-info {
        flex-wrap: wrap !important;
    }

    .amelia-cust-panel .am-cc__heading-info__part:first-child {
        width: 100% !important;
    }

    .amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__heading,
    .amelia-cust-panel .amelia-v2-booking #amelia-container .am-cc__heading-info__part {
        gap: 10px !important;
    }

    /* Inline-Buchungsdetails: weniger Einzug */
    .afc-booking-inline-details {
        padding: 10px 12px;
    }

    /* iOS: kein Auto-Zoom in den Formularen (Persönliche Daten,
       Benutzerdefinierte Felder) – Amelia rendert 15px */
    .amelia-cust-panel .el-input__inner,
    .amelia-cust-panel .el-textarea__inner {
        font-size: 16px !important;
    }
}