/* Container for the filer field */
.filerFile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    color: #111827 !important;
    border-radius: 0.5rem;
}

.dark .filerFile {
    background-color: var(--color-bg-secondary, #1f2937) !important;
    border-color: var(--color-border-primary, #374151) !important;
    color: var(--color-text-primary, #f3f4f6) !important;
}

/* The thumbnail / icon */
.filerFile .thumbnail_img {
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
}

/* Style the buttons (Choose, Clear) */
.filerFile .related-lookup, 
.filerFile .filerClearer {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.dark .filerFile .related-lookup, 
.dark .filerFile .filerClearer {
    background-color: var(--color-bg-primary, #111827) !important;
    border-color: var(--color-border-primary, #374151) !important;
    color: var(--color-text-primary, #d1d5db) !important;
}

.filerFile .related-lookup:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

/* Hide the default paperclip icon if you want a cleaner look */
.filerFile img[src*="uno_file.png"] {
    display: none;
}
form .form-row .filer-dropzone {
    /* Reset the forced legacy background and border */
    background-color: transparent !important; 
    border: 2px dashed #d1d5db !important;
    border-radius: 0.75rem !important; /* Matches Unfold's rounded look */
    padding: 1rem !important;
    min-width: 0 !important; /* Allow it to shrink to its parent container */
    width: 100% !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
}

.dark form .form-row .filer-dropzone {
    border-color: var(--color-border-primary, #374151) !important;
}

/* Hover state for the dropzone */
form .form-row .filer-dropzone:hover {
    border-color: var(--color-primary-500, #3b82f6) !important;
    background-color: var(--color-bg-secondary) !important;
}

/* Style the text and icons inside the dropzone */
.filer-dropzone .filerFile {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: var(--tw-shadow-sm) !important;
    margin: 0 !important;
    width: 100% !important;
}

.dark .filer-dropzone .filerFile {
    background-color: var(--color-bg-primary, #111827) !important;
    border-color: var(--color-border-primary, #374151) !important;
}

/* Fix the "Upload" text color in dark mode */
.filer-dropzone span, 
.filer-dropzone .description_text {
    color: var(--color-text-secondary, #9ca3af) !important;
}

/* Remove the ugly default paperclip icon if it's lingering */
.filer-dropzone .dz-message {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-tertiary);
}

/* Force the internal file block to stay inside the dropzone boundaries */
form .form-row .filer-dropzone .filerFile {
    position: relative !important; /* This is the "magic" fix */
    top: 0 !important;             /* Reset the hardcoded 9px */
    left: 0 !important;            /* Reset the hardcoded 20px */
    width: 100% !important;        /* Fill the full width of the dropzone */
    margin: 0 !important;
    display: flex !important;      /* Align thumbnail and text horizontally */
    align-items: center;
    gap: 12px;
    padding: 10px !important;
    box-sizing: border-box;
}

form .form-row .filer-dropzone .filerFile a.filerClearer,
form .form-row .filer-dropzone .filerFile .related-lookup,
form .form-row .filer-dropzone .filerFile .filerEditor {
    float: none !important;      /* Stop the float madness */
    margin: 0 !important;        /* Remove that 24px top margin */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;      /* Standard Unfold button size */
    height: 32px !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.dark form .form-row .filer-dropzone .filerFile a.filerClearer,
.dark form .form-row .filer-dropzone .filerFile .related-lookup {
    background-color: var(--color-bg-primary, #111827) !important;
    border-color: var(--color-border-primary, #374151) !important;
}

form .form-row .filer-dropzone .filerFile .related-lookup.related-lookup-change {
    background-color: var(--color-primary-500, #3b82f6) !important;
    border-color: var(--color-primary-600, #2563eb) !important;
}


/* 1. Reset the base Action Button in the Navigator */
.filebrowser .navigator-list .column-action .action-button,
.filebrowser .navigator-table .column-action .action-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 10px !important;
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    color: #111827 !important;
}

.dark .filebrowser .navigator-list .column-action .action-button,
.dark .filebrowser .navigator-table .column-action .action-button {
    background-color: var(--color-bg-secondary, #1f2937) !important;
    border-color: var(--color-border-primary, #374151) !important;
    color: var(--color-text-primary, #f3f4f6) !important;
}

/* 2. Style all Active, Hover, and Focus states at once */
.filebrowser .navigator-list .column-action .action-button:active,
.filebrowser .navigator-list .column-action .action-button:hover,
.filebrowser .navigator-list .column-action .action-button:focus,
.filebrowser .navigator-list .column-action .action-button.cms-btn-active,
.filebrowser .navigator-table .column-action .action-button:active,
.filebrowser .navigator-table .column-action .action-button:hover,
.filebrowser .navigator-table .column-action .action-button:focus,
.filebrowser .navigator-table .column-action .action-button.cms-btn-active {
    /* Kill the horrible legacy filters and brightness */
    filter: none !important; 
    
    /* Use Unfold Primary Colors */
    color: #ffffff !important;
    background-color: var(--color-primary-600, #2563eb) !important;
    border-color: var(--color-primary-500, #3b82f6) !important;
    outline: none !important;
}

/* 3. Specifically fix the "Folder" and "File" rows in the table */
.filebrowser .navigator-table tr {
    border-bottom: 1px solid #e5e7eb !important;
    background-color: transparent !important;
}

.dark .filebrowser .navigator-table tr {
    border-bottom-color: var(--color-border-primary, #374151) !important;
}

.filebrowser .navigator-table tr:hover {
    background-color: var(--color-bg-secondary) !important;
}

/* 4. Fix Navigator Breadcrumbs/Path styling */
.filebrowser .navigator-breadcrumbs {
    background-color: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem !important;
    margin-bottom: 1rem !important;
}

.dark .filebrowser .navigator-breadcrumbs {
    background-color: var(--color-bg-secondary, #1f2937) !important;
    border-color: var(--color-border-primary, #374151) !important;
}

.filebrowser .navigator-breadcrumbs a {
    color: var(--color-primary-400, #60a5fa) !important;
    font-weight: 600;
}