/**
 * HOMEOFJOBS - Responsive + Form-Fixes
 * Wird von header.php geladen (für alle User)
 * Breakpoints: 1024px, 768px, 480px
 */

/* =====================================================
   GLOBALE FORM-FIXES (alle Breakpoints)
   ===================================================== */

/* Textareas dürfen KEINE Pillen-Form haben */
textarea,
textarea.form-control,
select[multiple],
.form-control[rows] {
    border-radius: 12px !important;
}

/* Einzeilige Inputs: Pille OK, aber nicht übertreiben */
input.form-control,
select.form-control:not([multiple]) {
    border-radius: 10px;
}

/* Select-Dropdowns: nicht rund */
select {
    border-radius: 10px !important;
}

/* CMS Editor Textareas */
.block-text textarea,
.block-content textarea,
[name="meta_description"],
[name="content"],
[name="description"],
[name="excerpt"] {
    border-radius: 12px !important;
    min-height: 80px;
}

/* =====================================================
   TABLET (max-width: 1024px)
   ===================================================== */
@media (max-width: 1024px) {
    /* Admin main padding */
    main[style*="padding:100px 32px"],
    main[style*="padding: 100px 32px"] {
        padding: 80px 16px 40px !important;
    }

    /* Grids: 2 Spalten */
    .stats-grid,
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 2-Spalten Layouts auf 1 */
    .section-grid,
    [style*="grid-template-columns:1fr 1fr"]:not(.form-row) {
        grid-template-columns: 1fr !important;
    }

    /* Form-Rows behalten 2 Spalten auf Tablet */

    /* Bulk-Bar */
    .bulk-bar { flex-wrap: wrap; gap: 8px; }
    .bulk-bar .btn { font-size: 0.78rem; padding: 5px 10px; }

    /* Tabellen horizontal scrollbar */
    .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 700px; }
    .data-table th, .data-table td { padding: 10px 14px; }

    /* Slide-Panel */
    #previewPanel, [id="previewPanel"] { width: 420px !important; }

    /* Form-Row-3: 2 Spalten */
    .form-row-3 { grid-template-columns: 1fr 1fr !important; }
}

/* =====================================================
   TABLET PORTRAIT (max-width: 768px)
   ===================================================== */
@media (max-width: 768px) {
    main[style*="padding:100px"],
    main[style*="padding: 100px"] {
        padding: 72px 12px 32px !important;
    }

    /* Container volle Breite */
    [style*="max-width:1200px"],
    [style*="max-width:1100px"],
    [style*="max-width: 1200px"] {
        max-width: 100% !important;
    }

    /* Alle Form-Rows 1 Spalte */
    .form-row, .form-row-3 {
        grid-template-columns: 1fr !important;
    }

    /* Stats enger */
    .stat-value, [style*="font-size:2rem"] { font-size: 1.5rem !important; }

    /* Tabellen kompakter */
    .data-table { min-width: 580px; }
    .data-table th, .data-table td { padding: 8px 10px; font-size: 0.82rem; }
    .cb { width: 16px; height: 16px; }
    .action-btn { width: 28px; height: 28px; }

    /* Slide-Panel Fullscreen */
    #previewPanel, [id="previewPanel"],
    #candidatePanel, [id="candidatePanel"] {
        width: 100vw !important;
        right: -100vw;
    }

    /* Paginierung */
    .pg-btn { min-width: 32px; height: 32px; font-size: 0.8rem; }

    /* Filter Buttons */
    .filter-btn { padding: 6px 12px; font-size: 0.8rem; }

    /* Wizard */
    .wizard-main { padding: 16px !important; }
    .documents-card { padding: 16px !important; }
    .wizard-footer-actions { padding: 12px 16px !important; }
    .wizard-steps { overflow-x: auto; flex-wrap: nowrap; gap: 4px; }
    .step-label { font-size: 0.7rem; }

    /* Hero Content */
    #vanta-bg .hero .hero-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Jobs Panel */
    .jobs-panel { padding: 16px 12px 40px !important; }

    /* Search Box stacked */
    .search-box { flex-direction: column; padding: 16px; gap: 12px; border-radius: 16px; }
    .search-field { width: 100%; padding: 0; }
    .search-divider { width: 100%; height: 1px; }
    .search-btn { width: 100%; text-align: center; justify-content: center; }
    .search-distance { width: 100%; }

    /* Jobs Panel: weniger overlap auf Tablet */
    .jobs-panel { margin-top: -200px !important; padding-top: 140px !important; }

    /* Wasserzeichen kleiner */
    .landing-watermark { font-size: 5rem !important; }

    /* Filter Pills wrappen */
    .filter-pills { flex-wrap: wrap; gap: 8px; }
    .filter-pill { font-size: 0.8rem; padding: 6px 12px; }

    /* Job Cards Grid 1 Spalte */
    .jobs-grid { grid-template-columns: 1fr !important; }
    #jobsGrid, [id="jobsGrid"] { grid-template-columns: 1fr !important; }

    /* Landing Stats kompakter */
    .landing-stat-card { padding: 10px 12px; }
    .landing-stat-number { font-size: 1.1rem !important; }
    .landing-stat-label { font-size: 0.7rem !important; }

    /* Job-Grid 1 Spalte + Titel umbrechen */
    #jobsGrid, [id="jobsGrid"] { grid-template-columns: 1fr !important; }
    #jobsGrid h3, [id="jobsGrid"] h3 { white-space: normal !important; }

    /* Stats kleiner */
    .hero-stats { flex-wrap: wrap; gap: 8px; }
    .hero-stats > div { min-width: 80px; }

    /* Modal */
    .modal-box { max-width: 95vw; max-height: 85vh; }
    .modal-body { padding: 16px; }

    /* Lebenslauf */
    .cv-container { padding: 16px !important; }

    /* Job-Erstellen Header-Card */
    [style*="position:fixed"][style*="max-width:1050px"] {
        left: 12px !important;
        right: 12px !important;
    }

    /* WZ08 Dropdown */
    .wz08-checklist { max-height: 250px; }

    /* Card Padding */
    .card-body { padding: 16px; }
    .card-header { padding: 14px 16px; }
}

/* =====================================================
   MOBILE (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {
    main[style*="padding"] {
        padding: 64px 8px 24px !important;
    }

    /* Titel + Button stacked */
    [style*="justify-content:space-between"][style*="margin-bottom:24px"],
    [style*="justify-content: space-between"][style*="margin-bottom: 24px"] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    /* Alle Grids 1 Spalte */
    .stats-grid,
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Tabelle noch enger */
    .data-table { min-width: 450px; }
    .data-table th, .data-table td { padding: 6px 8px; font-size: 0.75rem; }

    /* Filter wrappen */
    [style*="display:flex"][style*="gap:6px"],
    [style*="display: flex"][style*="gap: 6px"] {
        flex-wrap: wrap !important;
    }

    /* Modal Fullscreen */
    .modal-overlay { padding: 8px; }
    .modal-box { max-width: 100%; }
    .modal-body { padding: 12px; }

    /* Bulk minimal */
    .bulk-bar { flex-wrap: wrap; gap: 6px; padding: 8px; }
    .bulk-count { min-width: auto; font-size: 0.8rem; }

    /* Buttons kompakter */
    .btn { padding: 6px 12px; font-size: 0.8rem; }
    .btn-sm { padding: 4px 8px; font-size: 0.75rem; }

    /* Hero Text */
    h1[style*="clamp(1.5rem"] { font-size: 1.3rem !important; }

    /* Paginierung */
    .pg-btn { min-width: 28px; height: 28px; font-size: 0.75rem; }

    /* Page Title */
    h1[style*="font-size:1.5rem"] { font-size: 1.15rem !important; }

    /* Search Box auf Index */
    .search-box { border-radius: 12px; margin: 0 -4px; }

    /* Jobs Panel: minimal overlap auf Mobile */
    .jobs-panel { margin-top: -120px !important; padding-top: 100px !important; }

    /* Hero: kein overflow */
    #vanta-bg { overflow-x: hidden !important; }
    #vanta-bg .hero .hero-content { padding-left: 12px !important; padding-right: 12px !important; }

    /* Wasserzeichen kleiner auf Mobile */
    .landing-watermark { font-size: 4rem !important; opacity: 0.5; }

    /* Landing Stats stacked */
    .landing-stat-card { padding: 8px 16px; }
    .landing-stat-number { font-size: 1rem !important; }

    /* Job-Grid 1 Spalte */
    #jobsGrid, [id="jobsGrid"] { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* =====================================================
   SCROLL-HELPER
   ===================================================== */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll-wrapper::-webkit-scrollbar { height: 6px; }
.table-scroll-wrapper::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }