/* CSS verwendet in der job-search-form.php  ****************** */
    
    .jobassist-search-layout { display: flex; flex-direction: column; gap: 20px; background: #ffffff; padding: 25px; border-radius: 0 0 8px 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .jobassist-search-row { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; width: 100%; }
    .ja-row-keywords .ja-group { flex: 1; min-width: 200px; }
    .ja-row-filters { background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #eee; }
    .ja-group { display: flex; flex-direction: column; gap: 6px; }
    .ja-group label { font-size: 0.85rem; font-weight: 600; color: #555; text-align: center; display: block; }
    .ja-group input, .ja-group select, .ja-group textarea { padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; background: #fff; width: 100%; box-sizing: border-box; font-family: inherit; }
    
    .jobassist-btn-search { background: #00bfa6; color: white; border: none; padding: 10px 25px; border-radius: 6px; font-weight: bold; cursor: pointer; height: 40px; transition: background 0.2s; margin-left: auto; }
    .jobassist-btn-search:hover { background: #00a892; }

    /* 🔥 NEU: CSS für den Modus-Schalter und die KI-Felder */
    .ja-mode-switch { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
    .ja-mode-btn { padding: 8px 20px; border-radius: 20px; border: 2px solid #00bfa6; background: transparent; color: #00bfa6; font-weight: bold; cursor: pointer; transition: all 0.3s; }
    .ja-mode-btn.active { background: #00bfa6; color: white; }
    
    .ja-row-ai { background: #e0f7fa; padding: 20px; border-radius: 8px; border: 1px dashed #00bfa6; display: none; /* Standardmäßig versteckt */ }
    .ja-row-ai .ja-group { flex: 1; min-width: 250px; }


/* ==========================================================================
   Das Suchformular disziplinieren (Verhindert Layout-Sprengung auf Handys)
   ========================================================================== */

/* 1. Das Formular selbst darf nie ausbrechen */
#jobassist-search-form,
.jobassist-search-layout {
    width: 100%;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
}

/* 2. Alle Eingabefelder und Buttons strikt begrenzen */
#jobassist-search-form input,
#jobassist-search-form select,
#jobassist-search-form button {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Falls die dynamischen Überschriften (z.B. "Suchbegriff: XY") extrem lang sind */
.jobassist-search-grid h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

#plz {
    max-width: 100px;
    /* oder max-width: 100%; damit es auf dem Handy nicht übersteht */
}


#umkreis {
    max-width: 80px;
   
}
 
/* =========================================
   CRM Saved Jobs Layout & Toggle
   ========================================= */

/* Die Toggle-Leiste über den Jobs */
.ja-view-toggle-bar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.ja-view-btn {
    background: #f8f9fa; border: 1px solid #ccc; padding: 5px 10px; cursor: pointer; border-radius: 4px; font-size: 18px;
}
.ja-view-btn.active {
    background: #0056b3; color: white; border-color: #0056b3;
}