/*
YOPT_DEV_STAMP_START
{
  "title": "Benutzer CSS",
  "short_description": "Styles für die Benutzerverwaltung.",
  "development_status": "development",
  "phase_number": 13,
  "work_status": "development",
  "development_started": "2026-06-09",
  "last_file_modified": "2026-06-10 11:02:20",
  "plugin_affiliation": "yop-vereinssuite",
  "module_affiliation": "users",
  "function_affiliation": "users_styles",
  "subfunction_affiliation": "users_css",
  "release_date": "",
  "last_extension": "2026-06-10 11:02:20",
  "development_version": "0.1.0-foundation",
  "area_type": "design"
}
YOPT_DEV_STAMP_END
*/

/*
YOPT_FEATURE_STAMP_START
{
  "stamp_type": "feature",
  "stamp_version": "1.0.0",
  "file": "assets/css/modules/users.css",
  "plugin": "Vereinssuite",
  "project_id": "yop-vereinssuite",
  "module": {
    "name": "Benutzerverwaltung",
    "key": "users",
    "description": "Verwaltet Vereinssuite-Benutzer, Rollen, Zugänge und Testbenutzer."
  },
  "feature": {
    "name": "Benutzer Oberfläche",
    "key": "users_ui",
    "type": "function",
    "description": "Stellt die erste Oberfläche der Benutzerverwaltung dar.",
    "responsibility": "Diese Datei enthält Styling für Benutzerformular, Rollen-Pills und Benutzerliste."
  },
  "subfeature": {
    "name": "Benutzer Oberfläche",
    "key": "users_ui",
    "description": "Stellt die erste Oberfläche der Benutzerverwaltung dar."
  },
  "function_catalog": {
    "visible": false,
    "target": "developer",
    "title": "Benutzer Oberfläche",
    "category": "Benutzerverwaltung",
    "short_text": "Vereinssuite-Benutzer können angelegt und mit passenden Rollen ausgestattet werden.",
    "description": "Die Benutzerverwaltung ermöglicht es, Funktionäre, Kassiere, Trainer, Sponsor-Verantwortliche und Mitglieder als eigene Benutzer für die Frontend-App vorzubereiten.",
    "benefit": "Echte Tester können ohne WordPress-Adminrechte mit passenden Vereinssuite-Rollen arbeiten.",
    "sort_order": 25,
    "highlight": false,
    "show_in_backend": true,
    "show_in_frontend": true,
    "show_for_website_visitors": false,
    "show_for_customers": false,
    "show_for_developers": true,
    "show_for_interested_users": false
  },
  "technical_context": {
    "area": "design",
    "view_type": "management",
    "execution_type": "page_render",
    "supports_ajax": false,
    "supports_rest_api": false,
    "supports_gutenberg": true,
    "supports_elementor": true
  },
  "user_context": {
    "user_roles": [
      "administrator",
      "yvm_club_admin"
    ],
    "permissions_required": [
      "yvm_manage_users"
    ]
  },
  "data_context": {
    "data_objects": [
      "WordPress-Benutzer",
      "Vereinssuite-Rolle",
      "Benutzerzugang"
    ],
    "input_data": [
      "Benutzername",
      "E-Mail",
      "Vorname",
      "Nachname",
      "Rolle"
    ],
    "output_data": [
      "Benutzerliste",
      "Benutzerrolle",
      "Loginstatus"
    ],
    "related_database_tables": [
      "wp_users",
      "wp_usermeta"
    ]
  },
  "process_context": {
    "main_actions": [
      "Benutzer anlegen",
      "Rolle zuweisen",
      "Benutzer auflisten",
      "Passwort-E-Mail auslösen"
    ],
    "dependencies": [
      "Rollen & Rechte",
      "Frontend-App"
    ],
    "related_templates": [],
    "related_assets": [
      "assets/css/modules/users.css"
    ]
  },
  "security_context": {
    "security_requirements": [
      "Berechtigung prüfen",
      "Nonce prüfen",
      "Benutzerdaten sanitizen",
      "E-Mail validieren"
    ],
    "privacy_relevance": true,
    "privacy_notes": "Benutzerdaten enthalten personenbezogene Informationen und Login-Zugänge."
  },
  "development_context": {
    "status": "development",
    "priority": "high",
    "phase_number": 13,
    "is_core_feature": true,
    "is_optional_feature": false,
    "is_pro_feature": false,
    "last_function_update": "2026-06-09",
    "notes": "Wichtig für echte Tester ohne WordPress-Adminrechte."
  }
}
YOPT_FEATURE_STAMP_END
*/

.yvm-users-toolbar {
    margin: 16px 0;
}

.yvm-users-filter-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.yvm-users-filter-form input[type="search"] {
    min-width: 280px;
}

.yvm-users-layout {
    display: grid;
    grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.yvm-users-form label {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}

.yvm-users-form input,
.yvm-users-form select {
    width: 100%;
    max-width: 100%;
}

.yvm-users-checkbox-line label {
    display: flex;
    gap: 8px;
    align-items: center;
}

.yvm-users-checkbox-line input {
    width: auto;
}

.yvm-user-role-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef6ff;
    color: #184e77;
    font-size: var(--yopt-font-size-badge, 10.5px);
    line-height: 1.2;
    font-weight: 800;
    margin: 2px;
}

.yvm-user-role-pill-muted {
    background: #f2f4f7;
    color: #667085;
}

.yvm-user-role-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 1100px) {
    .yvm-users-layout {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
 * Benutzer Step 2: Mitgliedsprofil-Verknüpfung
 * ========================================================= */

.yvm-user-member-link-pill {
    display: inline-grid;
    gap: 2px;
    padding: 5px 8px;
    border-radius: 10px;
    background: #eef6ff;
    color: #184e77;
    font-size: var(--yopt-font-size-badge, 10.5px);
    line-height: 1.2;
    font-weight: 800;
}

.yvm-user-member-link-pill small {
    font-size: var(--yopt-font-size-meta, 11px);
    color: #475467;
    font-weight: 700;
}

.yvm-user-member-link-pill-empty {
    background: #f2f4f7;
    color: #667085;
}


/* =========================================================
 * Benutzer-Mitglieder-Verknüpfung Step 4
 * UI-Aktionen in der Benutzerverwaltung
 * ========================================================= */

.yvm-users-linking-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #d9dee8;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.yvm-users-linking-tools strong {
    display: block;
    margin-bottom: 4px;
    font-size: var(--yopt-font-size-card-title, 15px);
    line-height: 1.25;
    color: #101828;
}

.yvm-users-linking-tools p {
    margin: 0;
    font-size: var(--yopt-font-size-text-small, 13px);
    line-height: 1.4;
    color: #667085;
}

.yvm-users-linking-tool-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.yvm-user-linking-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.yvm-user-linking-actions form,
.yvm-users-linking-tool-actions form {
    margin: 0;
}

.yvm-user-linking-actions .button {
    min-height: 28px;
    padding: 4px 9px;
    font-size: var(--yopt-font-size-button, 12px);
    line-height: 1.2;
}

.yvm-users-linking-state {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: var(--yopt-font-size-badge, 10.5px);
    line-height: 1.2;
    font-weight: 900;
}

.yvm-users-linking-state.is-linked {
    background: #ecfdf3;
    color: #067647;
}

.yvm-users-linking-notice {
    margin: 0 0 16px 0;
}

@media (max-width: 860px) {
    .yvm-users-linking-tools {
        grid-template-columns: 1fr;
    }

    .yvm-users-linking-tool-actions {
        justify-content: flex-start;
    }
}


/* =========================================================
 * Benutzer-Mitglieder-Verknüpfung Step 5
 * Benutzer-Nummer, Mitgliedsnummer und Verknüpfungsstatus
 * ========================================================= */

.yvm-user-member-status-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}

.yvm-user-number-badge,
.yvm-member-number-badge,
.yvm-user-member-link-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: var(--yopt-font-size-badge, 10.5px);
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

.yvm-user-number-badge {
    background: #eef4ff;
    color: #3538cd;
}

.yvm-member-number-badge {
    background: #ecfdf3;
    color: #067647;
}

.yvm-member-number-badge.is-empty {
    background: #f2f4f7;
    color: #667085;
}

.yvm-user-number-badge span,
.yvm-member-number-badge span {
    font-weight: 700;
    opacity: 0.8;
}

.yvm-user-number-badge strong,
.yvm-member-number-badge strong {
    font-weight: 950;
}

.yvm-user-member-link-state.is-linked {
    background: #f0f9ff;
    color: #026aa2;
}

.yvm-user-member-link-state.is-open {
    background: #fff7ed;
    color: #c4320a;
}

@media (max-width: 680px) {
    .yvm-user-member-status-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .yvm-user-number-badge,
    .yvm-member-number-badge,
    .yvm-user-member-link-state {
        white-space: normal;
    }
}


/* =========================================================
 * Benutzer-Mitglieder-Verknüpfung Step 5.1
 * Sichtbare Nummern- und Verknüpfungsübersicht
 * ========================================================= */

.yvm-user-member-number-overview {
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #d9dee8;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.yvm-user-member-number-overview-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.yvm-user-member-number-overview-header strong {
    display: block;
    margin-bottom: 4px;
    font-size: var(--yopt-font-size-card-title, 15px);
    line-height: 1.25;
    color: #101828;
}

.yvm-user-member-number-overview-header p {
    margin: 0;
    font-size: var(--yopt-font-size-text-small, 13px);
    line-height: 1.4;
    color: #667085;
}

.yvm-user-member-number-grid {
    display: grid;
    gap: 8px;
}

.yvm-user-member-number-row {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eaecf0;
}

.yvm-user-member-number-person strong {
    display: block;
    font-size: var(--yopt-font-size-table, 13px);
    line-height: 1.3;
    color: #101828;
}

.yvm-user-member-number-person span {
    display: block;
    margin-top: 2px;
    font-size: var(--yopt-font-size-badge, 10.5px);
    line-height: 1.3;
    color: #667085;
}

.yvm-user-member-number-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

@media (max-width: 760px) {
    .yvm-user-member-number-row {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
 * Benutzer-Mitglieder-Verknüpfung Step 6
 * Direkter Verknüpfungsstatus in der Benutzerliste
 * ========================================================= */

.yvm-user-list-linking-status {
    margin-top: 9px;
    padding: 9px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eaecf0;
}

.yvm-user-list-linking-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.yvm-user-list-linking-state {
    display: block;
    margin-top: 4px;
    font-size: var(--yopt-font-size-table, 13px);
    line-height: 1.35;
}

.yvm-user-list-linking-state.is-linked {
    color: #027a48;
}

.yvm-user-list-linking-state.is-open {
    color: #b42318;
}

.yvm-user-list-linking-status .yvm-user-linking-actions {
    margin-top: 8px;
}

@media (max-width: 760px) {
    .yvm-user-list-linking-status {
        width: 100%;
    }
}