/* ==========================================================
   Forsur – File Labels & Document Management
   Forced Stylesheet (all !important)
   ========================================================== */


/* ==========================================================
   1. FILE LABEL ROWS (UPLOAD / MANAGEMENT)
   ========================================================== */

#forsur-file-labels-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.forsur-file-labels {
    position: relative !important;
    display: block !important;
    padding: 8px !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
}

.forsur-remove-file-row {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    border: none !important;
    background: none !important;
    color: red !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

/* Grid layout for a single document row */
.forsur-file-row {
    display: grid !important;
    grid-template-columns:
            360px
            320px
            150px
            300px
            200px
            280px !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Field widths */
.forsur-field-display-name { width: 360px !important; }
.forsur-field-location     { width: 320px !important; }
.forsur-field-date         { width: 150px !important; }

.forsur-field-description {
    width: 300px !important;
    height: 50px !important;
}

/* Existing labels */
.forsur-existing-labels {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-width: 200px !important;
    overflow-x: auto !important;
}

.forsur-existing-labels label {
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
}

/* New label inputs */
.forsur-new-label {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.forsur-field-new-label {
    width: 200px !important;
    font-size: 0.8rem !important;
}

.forsur-color-bg,
.forsur-color-fg {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 3px !important;
}


/* ==========================================================
   2. BULK LABEL SECTION
   ========================================================== */

#forsur-bulk-label-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px !important;
    margin-bottom: 12px !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
}

#forsur-bulk-label-section strong {
    font-weight: bold !important;
    margin-bottom: 4px !important;
}

#forsur-bulk-existing-labels {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

#forsur-bulk-existing-labels .forsur-label {
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
}

.forsur-bulk-new-label {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
}

#forsur-bulk-new-label-name {
    width: 200px !important;
    font-size: 0.8rem !important;
}

#forsur-bulk-new-label-bg,
#forsur-bulk-new-label-fg {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 3px !important;
    cursor: pointer !important;
}


/* ==========================================================
   3. SAVE FEEDBACK (CHECKMARK)
   ========================================================== */

.forsur-save-feedback {
    display: inline-block !important;
    width: 16px !important;
    margin-left: 6px !important;
    font-size: 16px !important;
    text-align: center !important;
    color: #28a745 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease !important;
}

.forsur-save-feedback.visible {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ==========================================================
   4. UPLOAD FORM CONSTRAINTS
   ========================================================== */

#forsur-upload-form label,
#forsur-upload-form #documents {
    max-width: 450px !important;
}


/* ==========================================================
   5. FILTERS (UPLOAD + CUSTOMER)
   ========================================================== */

#forsur-filters {
    margin-bottom: 10px !important;
    padding: 10px !important;
    background: #ffffff !important;
    font-size: 0.85rem !important;

}

#forsur-filters h3 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

/* Inline rows */
#forsur-filters .forsur-upload-row.inline {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-end !important; /* aligns inputs nicely */
    flex-wrap: nowrap !important;     /* keep everything on one row */
}


#forsur-filters .forsur-upload-row.inline > div {
    display: flex !important;
    flex-direction: column !important;
}


/* Inputs */
.forsur-filter-input.short {
    max-width: 280px !important;
}

#forsur-filters
.forsur-upload-row.inline
input.forsur-filter-input.short {
    width: 100% !important;
}

/* Checkbox grid */
.forsur-checkbox-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.forsur-checkbox-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
}

.forsur-checkbox-label input {
    margin: 0 !important;
}

/* Select */
.forsur-filter-select {
    max-width: 320px !important;
}

/* Actions */
#forsur-filters .forsur-upload-actions {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 8px !important;
}


/* ==========================================================
   6. LABEL MANAGEMENT TABLE
   ========================================================== */

.forsur-labels-table {
    width: 800px !important;
    border-collapse: collapse !important;
}

.forsur-labels-table th {
    text-align: left !important;
    padding: 8px !important;
    font-weight: 600 !important;
}

.forsur-labels-table td {
    padding: 6px 8px !important;
    vertical-align: middle !important;
}

/* Narrow ID column */
.forsur-labels-table th:first-child,
.forsur-labels-table td:first-child {
    width: 50px !important;
    max-width: 50px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Inputs */
.forsur-labels-table input[type="text"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Color pickers */
.forsur-labels-table input[type="color"] {
    width: 50px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1px solid #ccc !important;
    cursor: pointer !important;
    background: none !important;
}

.forsur-labels-table input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0 !important;
}

.forsur-labels-table input[type="color"]::-webkit-color-swatch {
    border: none !important;
}

/* Label preview */
.forsur-label-preview {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90px !important;
    height: 40px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    user-select: none !important;
}

/* Action buttons */
.forsur-label-actions {
    white-space: nowrap !important;
}

.forsur-labels-table
.forsur-save-label,
.forsur-labels-table
.forsur-delete-label,
.forsur-labels-table
.forsur-add-label {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    padding: 6px 8px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    margin-right: 4px !important;
}

.forsur-labels-table i {
    color: #000000 !important;
    pointer-events: none !important;
}

.forsur-labels-table button:hover {
    background-color: #f0f0f0 !important;
}


/* ==========================================================
   7. LABELS – CUSTOMER VIEW
   ========================================================== */

.forsur-labels-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}

.forsur-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.forsur-label:hover {
    opacity: 0.85 !important;
    transform: translateY(-1px) !important;
}

.forsur-label input[type="checkbox"] {
    margin-right: 5px !important;
    cursor: pointer !important;
}


/* ==========================================================
   8. DOCUMENT ACTION ICONS
   ========================================================== */

.forsur-save-document,
.forsur-delete-document,
.forsur-download-link {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    padding: 6px 8px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    margin-right: 4px !important;
    text-decoration: none !important;
}

.forsur-save-document i,
.forsur-delete-document i,
.forsur-download-link i {
    pointer-events: none !important;
}

.forsur-save-document:hover,
.forsur-delete-document:hover,
.forsur-download-link:hover {
    background-color: #f0f0f0 !important;
}

.forsur-save-document:hover i,
.forsur-delete-document:hover i,
.forsur-download-link:hover i {
    transform: scale(1.1) !important;
}


/* ==========================================================
   9. CUSTOMER DOCUMENT LIST
   ========================================================== */

.forsur-result-count {
    font-size: 0.85rem !important;
    margin: 6px 0 10px !important;
    color: #555 !important;
    font-weight: 500 !important;
}

.forsur-grouping {
    margin-bottom: 10px !important;
    padding: 10px !important;
    background: #ffffff !important;
    font-size: 0.85rem !important;
}

.min-grouping-span {
    min-width: 250px;
}

.forsur-group-row {
    display: flex !important;
    gap: 15px !important;
    margin-top: 5px !important;
}

.forsur-group-title {
    font-weight: bold !important;
    margin-top: 15px !important;
}

.forsur-doc-card {
    padding: 10px !important;
    margin-top: 5px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background: #ffffff !important;
}
/* ==========================================================
   10. DOCUMENT VIEW – ROW LAYOUT (UPDATED FOR LOCATION COLUMN)
   ========================================================== */

.forsur-doc-table {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 16px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}

.forsur-doc-row {
    display: grid !important;
    grid-template-columns: 200px 140px 260px 1fr 80px !important; /* Added first column for Location/Installatie */
    gap: 12px !important;
    padding: 8px !important;
    border-bottom: 1px solid #ddd !important;
    align-items: center !important;
    font-size: 0.85rem !important;
}

.forsur-doc-row.header {
    font-weight: 600 !important;
    background-color: #f5f5f5 !important;
}

.forsur-doc-row.header > div {
    padding: 4px 0 !important;
}

.forsur-doc-row a {
    text-align: center !important;
    font-size: 16px !important;
    color: #007bff !important;
    text-decoration: none !important;
}

.forsur-doc-row a:hover {
    color: #0056b3 !important;
}

.forsur-doc-row:not(.header):hover {
    background-color: #f9f9f9 !important;
}

/* Make sure long descriptions wrap */
.forsur-doc-row div {
    word-break: break-word !important;
}

/* Icon styling */
.forsur-doc-row i.fa-download {
    display: inline-block !important;
    font-size: 16px !important;
    color: #007bff !important;
    cursor: pointer !important;
}

.forsur-doc-row i.fa-download:hover {
    color: #0056b3 !important;
}

/* Tabs header */
.forsur-doc-tabs {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}

.forsur-doc-tab {
    padding: 6px 12px !important;
    border: 1px solid #ccc !important;
    background: #f5f5f5 !important;
    cursor: pointer !important;
    border-radius: 4px 4px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #000000 !important;
}

.forsur-doc-tab.active {
    background: #fff !important;
    border-bottom-color: #fff !important;
    font-weight: 600 !important;
    color: #000000 !important;
}

/* Panels */
.forsur-doc-panel {
    display: none !important;
}

.forsur-doc-panel.active {
    display: block !important;
}

/* Reduce visual bulk from existing boxes */
.forsur-upload-box {
    margin-top: 0 !important;
}

/* ==========================================================
   MODERN FORM & BUTTON STYLING (2025 / 2026 SaaS FEEL)
   Drop-in enhancement layer
   ========================================================== */

/* --- Base inputs (text, date, select) --- */
.forsur-input,
.forsur-filter-input,
.forsur-filter-select,
select.forsur-input,
input[type="text"],
input[type="date"] {
    appearance: none !important;
    -webkit-appearance: none !important;

    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;

    border-radius: 8px !important;
    border: 1px solid #d6dbe1 !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;

    transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            background-color 0.2s ease !important;
}

/* Hover */
.forsur-input:hover,
.forsur-filter-input:hover,
.forsur-filter-select:hover {
    border-color: #b9c1cc !important;
}

/* Focus */
.forsur-input:focus,
.forsur-filter-input:focus,
.forsur-filter-select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
    background-color: #ffffff !important;
}

/* Placeholder */
.forsur-input::placeholder,
.forsur-filter-input::placeholder {
    color: #9ca3af !important;
}


/* --- Select dropdown indicator --- */
select.forsur-input,
.forsur-filter-select {
    background-image:
            linear-gradient(45deg, transparent 50%, #6b7280 50%),
            linear-gradient(135deg, #6b7280 50%, transparent 50%),
            linear-gradient(to right, transparent, transparent) !important;
    background-position:
            calc(100% - 18px) calc(50% - 3px),
            calc(100% - 12px) calc(50% - 3px),
            100% 0 !important;
    background-size: 6px 6px, 6px 6px, 2.5em 2.5em !important;
    background-repeat: no-repeat !important;
    padding-right: 34px !important;
}


/* --- Labels above inputs --- */
.forsur-upload-row label,
.forsur-analysis-row label,
#forsur-label-filter-label{
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.02em !important;
}

/* --- Buttons --- */
.forsur-button,
button.forsur-button {
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;

    border: 1px solid transparent !important;
    cursor: pointer !important;

    transition:
            background-color 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.1s ease !important;
}

/* Secondary button (Filters wissen) */
.forsur-button.secondary {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #e5e7eb !important;
}

.forsur-button.secondary:hover {
    background-color: #e5e7eb !important;
}

.forsur-button.secondary:active {
    transform: translateY(1px) !important;
}


/* --- Filter container polish --- */
#forsur-filters,
#forsur-grouping{
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}


/* --- Subtle hover elevation --- */
.forsur-upload-row.inline > div:hover .forsur-input,
.forsur-upload-row.inline > div:hover .forsur-filter-select {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* ==========================================================
   MODERN LABEL FILTER CHIPS (2025 / 2026)
   ========================================================== */

/* Container */
#forsur-customer-label-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 4px !important;
}

/* Chip label */
.forsur-checkbox-label {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 6px 10px !important;
    border-radius: 999px !important; /* pill style */

    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    cursor: pointer !important;
    user-select: none !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;

    transition:
            transform 0.12s ease,
            box-shadow 0.12s ease,
            opacity 0.12s ease !important;
}

/* Hover */
.forsur-checkbox-label:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    opacity: 0.95 !important;
}

/* Active / pressed */
.forsur-checkbox-label:active {
    transform: translateY(0) scale(0.97) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

/* Hide native checkbox */
.forsur-checkbox-label input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    opacity: 0 !important;
}

/* Selected state */
.forsur-checkbox-label input[type="checkbox"]:checked + * {
    /* no-op placeholder for compatibility */
}

/* Selected visual feedback */
.forsur-checkbox-label:has(input[type="checkbox"]:checked) {
    box-shadow:
            0 0 0 2px rgba(255,255,255,0.6),
            0 0 0 4px rgba(0,0,0,0.12) !important;
}

/* Optional subtle check indicator */
.forsur-checkbox-label::after {
    content: "✓" !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
    opacity: 0 !important;
    transition: opacity 0.12s ease !important;
}

/* Show check when selected */
.forsur-checkbox-label:has(input[type="checkbox"]:checked)::after {
    opacity: 0.9 !important;
}


.site-content {
    padding: 0px !important;
}

.contact-details {
  /*  display: none !important; */

}

@media (max-width: 767px) {

    /* Tabs: stack vertically */
    .forsur-doc-tabs {
        flex-direction: column;
        gap: 0.5rem;
    }

    .forsur-doc-tab {
        width: 100%;
        font-size: 0.9rem;
        padding: 0.6rem;
    }

    /* Filter rows: stack inputs vertically */
    .forsur-customer-filter-row,
    .forsur-upload-row {
        flex-direction: column;
    }

    .forsur-customer-filter-row > div,
    .forsur-upload-row > div {
        width: 100%;
        min-width: auto;
    }

    /* Filter / action buttons full width */
    .forsur-upload-actions button {
        width: 100%;
    }

    /* Grouping: stack checkbox groups */
    .forsur-group-row {
        flex-direction: column;
    }

    /* Document table -> card view */
    .forsur-doc-row {
        border-bottom: 1px solid #ddd;
        padding: 0.5rem 0;
    }

    .forsur-doc-row.header {
        display: none; /* hide table headers */
    }

    .forsur-doc-row > div {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    .forsur-doc-row > div:before {
        content: attr(data-label);
        font-weight: bold;
        display: inline-block;
        width: 110px;
    }

    /* Download icon spacing */
    .forsur-doc-row a i {
        font-size: 1.25rem;
    }

    /* Group titles: make a little larger for mobile readability */
    .forsur-group-title {
        font-size: 1.1rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    /* Result count spacing */
    .forsur-result-count {
        margin-bottom: 1rem;
    }

    .site-content {
        padding: 0px !important;
    }

    .contact-details {
        display: none !important;
    }

}
/* =========================================================
   DOCUMENT VIEW – MOBILE OVERRIDES ONLY
   Desktop remains untouched
   ========================================================= */

@media (max-width: 767px) {

    /* Hide header row */
    .forsur-doc-row.header {
        display: none !important;
    }

    /* Stay in grid, but reduce columns */
    .forsur-doc-row {
        grid-template-columns:
                64px      /* date */
                1fr       /* name */
                44px !important; /* download */
    }

    .forsur-doc-row > div::before {
        content: none !important;
        display: none !important;
        width: 0 !important;
    }

    /* Hide non-essential columns */
    .forsur-doc-row > div:nth-child(1), /* Installatie */
    .forsur-doc-row > div:nth-child(4)  /* Omschrijving */ {
        display: none !important;
    }

    /* Date: shrink aggressively */
    .forsur-doc-row > div:nth-child(2) {
        white-space: nowrap !important;
        font-size: 0.7rem !important;
        padding-right: 0.4rem !important;
    }

    /* Name: must give up space */
    .forsur-doc-row > div:nth-child(3) {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Download: always visible */
    .forsur-doc-row > div:nth-child(5) {
        text-align: center !important;
    }

    .forsur-doc-row i.fa-download {
        font-size: 1.15rem !important;
    }
    .forsur-doc-row > div:nth-child(3) {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word;
        line-height: 1.3;
    }

    .site-content {
        padding: 0px !important;
    }

    .contact-details {
        display: none !important;
    }

}