/**
 * PF_components.css – UI-Komponenten für PF 1.4.1  css/PF_components.css
 * Autor: Franz
 * Beschreibung: Buttons, Inputs, Tags, Badges, Labels
 */

/* 🔘 Standard-Button */
.pf-button {
    background: var(--pf-accent);
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--pf-radius);
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}
.pf-button:hover {
    background: #2980b9;
}

/* 🧩 Sekundär-Button */
.pf-button-secondary {
    background: #eee;
    color: var(--pf-text);
    border: 1px solid #ccc;
}
.pf-button-secondary:hover {
    background: #ddd;
}

/* 🧠 Input-Feld */
.pf-input {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: var(--pf-radius);
    width: 100%;
    font-size: 1rem;
    background: #fff;
    color: var(--pf-text);
}
.pf-input:focus {
    outline: none;
    border-color: var(--pf-accent);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* 🏷️ Tag / Label */
.pf-tag {
    display: inline-block;
    font-size: 0.75rem;
    background: #eee;
    color: var(--pf-muted);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 0.5rem;
}

/* ✅ Status-Badge */
.pf-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}
.pf-badge.success { background: var(--pf-success); color: #fff; }
.pf-badge.error   { background: var(--pf-error); color: #fff; }
.pf-badge.info    { background: var(--pf-accent); color: #fff; }

/* 🔍 Suchfeld mit Icon */
.pf-search {
    position: relative;
}
.pf-search input {
    padding-left: 2rem;
}
.pf-search-icon {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
    color: var(--pf-muted);
}

/* Page title ding - noch nicht implementiert - ab version PFWS 1.4.1.4 */
#pf-page-title-input {
  font-size: 1.8rem;
  font-weight: bold;
  border: none;
  background: transparent;
  outline: none;
  padding: 0.2em 0;
  transition: all 0.3s ease;
  cursor: default;
}

/* Beim Fokus: Eingabefeld sichtbar machen */
#pf-page-title-input:focus {
  border-bottom: 2px solid #0078D4;
  background-color: #f0f8ff;
  cursor: text;
}

/* Optional: Klasse für erweiterten Stil beim Bearbeiten */
.editing-title {
  background-color: #f0f8ff;
  border-bottom: 2px solid #0078D4;
  color: #333;
}