/* =========================================================================
   photocube.ch – Profilseite (com_users) Redesign · Joomla 5
   Ziel: /templates/shaper_helixultimate/css/custom.css
   Deckt ab: Profil-Ansicht (.com-users-profile) UND Profil bearbeiten
   (.com-users-profile__edit). Größen in px (≥16px), da Template font-size:62.5%.
   ========================================================================= */

.com-users-profile,
.com-users-profile__edit {
    /* --- Marken-Variablen: echte photocube-Werte eintragen --- */
    --pc-accent:        #1a1a1a;   /* Akzent-/Buttonfarbe – Brand-Wert setzen */
    --pc-accent-hover:  #000000;
    --pc-text:          #1a1a1a;
    --pc-muted:         #5f5f5f;
    --pc-border:        #e6e6e6;
    --pc-surface:       #ffffff;
    --pc-bg:            #fafafa;
    --pc-radius:        10px;

    max-width: 1200px;
    margin-inline: auto;
    padding: 30px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--pc-text);
}

/* --- Hero (nur Ansicht): Avatar + Identität + Edit-Button --- */
.com-users-profile .pc-profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.com-users-profile .pc-avatar {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--pc-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 500;
}
.com-users-profile .pc-identity { display: flex; flex-direction: column; min-width: 180px; }
.com-users-profile .pc-identity__name { font-size: 21px; font-weight: 500; line-height: 1.25; }
.com-users-profile .pc-identity__meta { color: var(--pc-muted); font-size: 16px; margin-top: 4px; }
.com-users-profile .pc-profile-hero .pc-edit-btn { margin-left: auto; }

/* --- Karten (beide Views): jedes Fieldset = eine Karte --- */
.com-users-profile fieldset,
.com-users-profile__edit fieldset {
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 0;
    margin: 0 0 20px;
    overflow: hidden;
}
.com-users-profile legend,
.com-users-profile__edit legend {
    display: block;
    width: 100%;
    float: none;
    margin: 0;
    padding: 14px 24px;
    background: var(--pc-bg);
    border: 0;
    border-bottom: 1px solid var(--pc-border);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 16px;
    font-weight: 500;
    color: var(--pc-muted);
}
.com-users-profile .pc-card__desc,
.com-users-profile__edit fieldset > p {
    margin: 0;
    padding: 16px 24px 0;
    color: var(--pc-muted);
    font-size: 16px;
}

/* =======================  ANSICHT (Key/Value)  ======================= */
/* Trennlinien über 1px row-gap + Hintergrund = garantiert durchgezogen */
.com-users-profile dl.dl-horizontal {
    display: grid;
    grid-template-columns: minmax(200px, 38%) 1fr;
    gap: 1px 0;
    background: var(--pc-border);
    margin: 0;
}
.com-users-profile dl.dl-horizontal dt,
.com-users-profile dl.dl-horizontal dd {
    margin: 0;
    padding: 14px 24px;
    width: 100%;
    background: var(--pc-surface);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}
.com-users-profile dl.dl-horizontal dt {
    color: var(--pc-muted);
    text-align: left;
    white-space: normal;
    hyphens: none;
    overflow-wrap: break-word;
}
.com-users-profile dl.dl-horizontal dd { color: var(--pc-text); overflow-wrap: break-word; }

/* --- API-Token: maskiert mit Anzeigen-/Kopieren-Button --- */
.com-users-profile .pc-token {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    background: var(--pc-bg);
    border: 1px solid var(--pc-border);
    border-radius: 8px;
    padding: 7px 9px;
}
.com-users-profile .pc-token__value {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 16px;
    color: var(--pc-muted);
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: none;
    padding: 0;
}
.com-users-profile .pc-token.is-revealed { align-items: flex-start; }
.com-users-profile .pc-token.is-revealed .pc-token__value {
    color: var(--pc-text);
    letter-spacing: .3px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
}
.com-users-profile .pc-token__btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: 7px;
    color: var(--pc-muted);
    font-size: 16px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.com-users-profile .pc-token__btn:hover { color: var(--pc-text); border-color: var(--pc-muted); }
.com-users-profile .pc-token__btn.is-copied {
    color: #fff;
    background: var(--pc-accent);
    border-color: var(--pc-accent);
}

/* =======================  BEARBEITEN (Formular)  ======================= */
/* "well"-Box des Forms neutralisieren – die Karten machen die Optik */
.com-users-profile__edit-form,
.com-users-profile__edit-form.well {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Feldzeile: Label links, Eingabe rechts – wie die Ansicht */
.com-users-profile__edit fieldset .control-group {
    display: grid;
    grid-template-columns: minmax(200px, 38%) 1fr;
    align-items: start;
    gap: 0 24px;
    padding: 14px 24px;
    border-top: 1px solid var(--pc-border);
}
.com-users-profile__edit fieldset > .control-group:first-of-type { border-top: 0; }

.com-users-profile__edit .control-label,
.com-users-profile__edit .control-label label {
    color: var(--pc-muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    padding-top: 8px;
    margin: 0;
}
.com-users-profile__edit .controls { min-width: 0; }

/* Eingabefelder */
.com-users-profile__edit .controls input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.com-users-profile__edit .controls select,
.com-users-profile__edit .controls textarea {
    width: 100%;
    max-width: 480px;
    font-size: 16px;
    line-height: 1.5;
    padding: 9px 12px;
    background: #fff;
    color: var(--pc-text);
    border: 1px solid var(--pc-border);
    border-radius: 8px;
    box-shadow: none;
}
.com-users-profile__edit .controls input:focus,
.com-users-profile__edit .controls select:focus,
.com-users-profile__edit .controls textarea:focus {
    border-color: var(--pc-accent);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}
.com-users-profile__edit .controls .form-text,
.com-users-profile__edit .controls small {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    color: var(--pc-muted);
}

/* Speichern / Abbrechen */
.com-users-profile__edit-submit { padding: 4px 0 0; border: 0; }
.com-users-profile__edit-submit .controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.com-users-profile__edit-form .btn {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 11px 24px;
    border-radius: var(--pc-radius);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.com-users-profile__edit-form .btn-primary {
    background: var(--pc-accent);
    border: 1px solid var(--pc-accent);
    color: #fff;
}
.com-users-profile__edit-form .btn-primary:hover {
    background: var(--pc-accent-hover);
    border-color: var(--pc-accent-hover);
    color: #fff;
}
.com-users-profile__edit-form .btn-danger {
    background: transparent;
    border: 1px solid var(--pc-border);
    color: var(--pc-muted);
}
.com-users-profile__edit-form .btn-danger:hover {
    background: var(--pc-bg);
    border-color: var(--pc-muted);
    color: var(--pc-text);
}

/* --- Joomla-Icon-Font wird im Frontend nicht geladen -> FontAwesome unterschieben --- */
.com-users-profile__edit .icon-eye::before,
.com-users-profile__edit .icon-eye-slash::before,
.com-users-profile__edit .icon-edit::before,
.com-users-profile__edit .icon-pencil::before,
.com-users-profile__edit .icon-minus::before,
.com-users-profile__edit .icon-trash::before,
.com-users-profile__edit .icon-plus::before,
.com-users-profile__edit .icon-plus-2::before,
.com-users-profile__edit .icon-star::before,
.com-users-profile__edit .icon-check::before,
.com-users-profile__edit .icon-times::before,
.com-users-profile__edit .icon-info-circle::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-style: normal;
    display: inline-block;
}
.com-users-profile__edit .icon-eye::before         { content: "\f06e"; }
.com-users-profile__edit .icon-eye-slash::before   { content: "\f070"; }
.com-users-profile__edit .icon-edit::before,
.com-users-profile__edit .icon-pencil::before      { content: "\f304"; }
.com-users-profile__edit .icon-minus::before       { content: "\f068"; }
.com-users-profile__edit .icon-trash::before       { content: "\f1f8"; }
.com-users-profile__edit .icon-plus::before,
.com-users-profile__edit .icon-plus-2::before      { content: "\f067"; }
.com-users-profile__edit .icon-star::before        { content: "\f005"; }
.com-users-profile__edit .icon-check::before       { content: "\f00c"; }
.com-users-profile__edit .icon-times::before       { content: "\f00d"; }
.com-users-profile__edit .icon-info-circle::before { content: "\f05a"; }

/* --- Input-Groups: Feld + Button gleiche Höhe, zusammengefügte Ecken --- */
.com-users-profile__edit .controls .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    max-width: 480px;
}
.com-users-profile__edit .controls .input-group > .form-control,
.com-users-profile__edit .controls .input-group > input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    max-width: none;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.com-users-profile__edit .controls .input-group > .btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 14px;
    min-width: 46px;
    border: 1px solid var(--pc-border);
    border-radius: 0 8px 8px 0;
    background: var(--pc-bg);
    color: var(--pc-muted);
    text-transform: none;
    letter-spacing: 0;
    font-size: 16px;
}
.com-users-profile__edit .controls .input-group > .btn:hover {
    background: var(--pc-border);
    color: var(--pc-text);
}

/* Token-"Kopieren"-Button -> Icon */
.com-users-profile__edit #token-copy { font-size: 0; }
.com-users-profile__edit #token-copy::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    content: "\f0c5";
    font-size: 16px;
}

/* --- Passwort-Stärke: natives <meter> als schlanker Balken --- */
.com-users-profile__edit meter {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 480px;
    height: 8px;
    margin-top: 8px;
    border: 0;
    border-radius: 999px;
    background: var(--pc-border);
}
.com-users-profile__edit meter::-webkit-meter-bar {
    background: var(--pc-border);
    border: 0;
    border-radius: 999px;
    height: 8px;
}
.com-users-profile__edit meter::-webkit-meter-optimum-value        { background: #2e7d32; border-radius: 999px; }
.com-users-profile__edit meter::-webkit-meter-suboptimum-value     { background: #ef9f27; border-radius: 999px; }
.com-users-profile__edit meter::-webkit-meter-even-less-good-value { background: #c0392b; border-radius: 999px; }
.com-users-profile__edit meter:-moz-meter-optimum::-moz-meter-bar     { background: #2e7d32; }
.com-users-profile__edit meter:-moz-meter-sub-optimum::-moz-meter-bar { background: #ef9f27; }
.com-users-profile__edit meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #c0392b; }

/* --- Ja/Nein-Switcher: voll rund, nicht abgeschnitten --- */
.com-users-profile__edit .switcher { overflow: visible; }
.com-users-profile__edit .switcher .toggle-outside {
    border-radius: 999px !important;
    overflow: hidden;
}
.com-users-profile__edit .switcher .toggle-inside { border-radius: 999px !important; }
.com-users-profile__edit .switcher label { border-radius: 999px; }

/* --- Passkey (WebAuthn): Tabelle & Buttons in den photocube-Look --- */
.com-users-profile__edit .plg_system_webauthn .table { font-size: 16px; margin-bottom: 16px; }
.com-users-profile__edit .plg_system_webauthn thead.table-dark,
.com-users-profile__edit .plg_system_webauthn thead.table-dark th {
    background: var(--pc-bg) !important;
    color: var(--pc-text) !important;
    border-color: var(--pc-border) !important;
}
.com-users-profile__edit .plg_system_webauthn .btn-success {
    background: var(--pc-accent);
    border: 1px solid var(--pc-accent);
    color: #fff;
}
.com-users-profile__edit .plg_system_webauthn .btn-success:hover {
    background: var(--pc-accent-hover);
    border-color: var(--pc-accent-hover);
    color: #fff;
}
.com-users-profile__edit .plg_system_webauthn .btn-secondary,
.com-users-profile__edit .plg_system_webauthn .btn-danger {
    padding: 7px 12px;
    text-transform: none;
    letter-spacing: 0;
}
.com-users-profile__edit .plg_system_webauthn .btn-secondary {
    background: transparent;
    border: 1px solid var(--pc-border);
    color: var(--pc-muted);
}
.com-users-profile__edit .plg_system_webauthn .btn-secondary:hover {
    background: var(--pc-bg);
    border-color: var(--pc-muted);
    color: var(--pc-text);
}
.com-users-profile__edit .plg_system_webauthn .btn-danger {
    background: transparent;
    border: 1px solid #c0392b;
    color: #c0392b;
}
.com-users-profile__edit .plg_system_webauthn .btn-danger:hover { background: #c0392b; color: #fff; }

/* --- Multi-Faktor-Authentifizierung: in den photocube-Look bringen --- */
.com-users-profile__multifactor #com-users-methods-list { padding: 16px 24px 20px; }

.com-users-profile__multifactor #com-users-methods-reset-container {
    border: 1px solid var(--pc-border) !important;
    background: var(--pc-bg) !important;
    border-radius: var(--pc-radius) !important;
    padding: 14px 16px !important;
    margin-bottom: 16px;
    font-size: 16px;
}

.com-users-profile__multifactor .com-users-methods-list-method.card {
    border: 1px solid var(--pc-border) !important;
    border-radius: var(--pc-radius);
    margin: 0 0 12px !important;
    box-shadow: none;
    overflow: hidden;
}
.com-users-profile__multifactor .com-users-methods-list-method-header.card-header {
    background: var(--pc-bg) !important;
    color: var(--pc-text) !important;
    border-bottom: 1px solid var(--pc-border) !important;
    padding: 12px 16px;
}
.com-users-profile__multifactor .card-body { padding: 14px 16px; }
.com-users-profile__multifactor .com-users-methods-list-method-title h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--pc-text);
}
.com-users-profile__multifactor .com-users-methods-list-method-info,
.com-users-profile__multifactor .text-muted,
.com-users-profile__multifactor .small { font-size: 16px; color: var(--pc-muted); }
.com-users-profile__multifactor .com-users-methods-list-method-image { background: var(--pc-surface) !important; }
.com-users-profile__multifactor .com-users-methods-list-method-image img { max-height: 28px; width: auto; }

.com-users-profile__multifactor .badge.bg-info { background: var(--pc-accent) !important; color: #fff !important; }

.com-users-profile__multifactor .btn {
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
    padding: 7px 12px;
    border-radius: 8px;
}
.com-users-profile__multifactor .btn-outline-primary,
.com-users-profile__multifactor .com-users-methods-list-method-addnew {
    background: transparent;
    border: 1px solid var(--pc-accent);
    color: var(--pc-accent);
}
.com-users-profile__multifactor .btn-outline-primary:hover,
.com-users-profile__multifactor .com-users-methods-list-method-addnew:hover {
    background: var(--pc-accent);
    color: #fff;
}
.com-users-profile__multifactor .btn-secondary {
    background: transparent;
    border: 1px solid var(--pc-border);
    color: var(--pc-muted);
}
.com-users-profile__multifactor .btn-secondary:hover {
    background: var(--pc-bg);
    border-color: var(--pc-muted);
    color: var(--pc-text);
}
.com-users-profile__multifactor .btn-danger {
    background: transparent;
    border: 1px solid #c0392b;
    color: #c0392b;
}
.com-users-profile__multifactor .btn-danger:hover { background: #c0392b; color: #fff; }

/* --- MFA: Add-Buttons kompakt + kurzer Text "+ Hinzufügen" --- */
.com-users-profile__multifactor .com-users-methods-list-method-addnew-container {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 4px;
}
.com-users-profile__multifactor .com-users-methods-list-method-addnew {
    font-size: 0;
    padding: 7px 14px;
    border-radius: 8px;
    white-space: nowrap;
}
.com-users-profile__multifactor .com-users-methods-list-method-addnew::before {
    content: "+ Hinzufügen";
    font-size: 15px;
}

/* --- MFA: Bearbeiten/Löschen an einzelnen Einträgen als kleine Icon-Buttons --- */
.com-users-profile__multifactor .com-users-methods-list-method-record-edit,
.com-users-profile__multifactor .com-users-methods-list-method-record-delete {
    padding: 6px 9px;
    margin: 0 0 0 6px;
    font-size: 15px;
    line-height: 1;
    border-radius: 8px;
}

/* =======================  MOBIL  ======================= */
@media (max-width: 575.98px) {
    .com-users-profile,
    .com-users-profile__edit { padding: 16px; }

    .com-users-profile dl.dl-horizontal {
        grid-template-columns: 1fr;
        gap: 0;
        background: transparent;
    }
    .com-users-profile dl.dl-horizontal dt {
        border-top: 1px solid var(--pc-border);
        padding: 12px 20px 2px;
    }
    .com-users-profile dl.dl-horizontal dt:first-of-type { border-top: 0; }
    .com-users-profile dl.dl-horizontal dd { padding: 0 20px 12px; }
    .com-users-profile .pc-profile-hero .pc-edit-btn { margin-left: 0; }

    .com-users-profile__edit fieldset .control-group {
        grid-template-columns: 1fr;
        gap: 4px 0;
        padding: 12px 20px;
    }
    .com-users-profile__edit .control-label,
    .com-users-profile__edit .control-label label { padding-top: 0; }
    .com-users-profile__edit .controls input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    .com-users-profile__edit .controls select,
    .com-users-profile__edit .controls textarea { max-width: 100%; }
}