/* 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;
}

/* Force the main navigator containers to be transparent in dark mode to avoid white gaps */
.dark .navigator,
.dark .navigator-popup,
.dark #content-main,
.dark #changelist-form {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Navigator Top Nav Container - Dark Mode Overrides */
.navigator-top-nav {
    background-color: #ffffff !important;
}

.dark .navigator-top-nav {
    background-color: var(--color-base-900) !important;
    border-color: var(--color-base-800) !important;
}

/* Search Input Field Dark Mode */
.navigator-top-nav input[name="q"] {
    background-color: var(--color-base-50) !important;
    color: var(--color-base-700) !important;
    border-color: var(--color-base-200) !important;
}

.dark .navigator-top-nav input[name="q"] {
    background-color: var(--color-base-800) !important;
    border-color: var(--color-base-700) !important;
    color: var(--color-base-300) !important;
}

.dark .navigator-top-nav input[name="q"]::placeholder {
    color: var(--color-base-500) !important;
}

/* Breadcrumbs and folder text visibility */
.navigator-top-nav span.material-symbols-outlined {
    /* Fix for search icon appearing too light/white in light mode */
    color: var(--color-base-500) !important;
}

.dark .navigator-top-nav div.font-bold,
.dark .navigator-top-nav span.material-symbols-outlined {
    color: var(--color-base-300) !important;
}

/* Force folder icon inversion in dark mode */
.dark .navigator-top-nav img.dark\:invert {
    filter: invert(1) brightness(10) !important;
}

/* Mobile View Stability Fixes */
@media (max-width: 768px) {
    .navigator-top-nav {
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        /* Stabilize container height to prevent shifting when tools wrap */
        min-height: 160px !important; 
    }

    .navigator-top-nav .navigator-breadcrumbs {
        flex-shrink: 0 !important;
    }

    .navigator-top-nav div.font-bold {
        font-size: 0.875rem !important;
        max-width: 180px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Prevent search box from shifting or jumping on touch/focus */
    .navigator-top-nav input[name="q"] {
        font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
        height: 44px !important;
        transition: none !important; /* Disable transitions to stop jumping */
    }

    .navigator-top-nav .flex-shrink-0:last-child {
        justify-content: space-between !important;
    }

    /* Ensure the table below doesn't overlap the header */
    .js-navigator.navigator {
        margin-top: 1rem;
    }
}

/* Clean Navigator Styles for Overridden Template */
.navigator-top-nav .filer-dropdown-menu {
    background-color: white !important;
    border: 1px solid var(--color-base-200) !important;
    border-radius: 0.5rem !important;
    box-shadow: var(--tw-shadow-lg) !important;
    padding: 0.5rem 0 !important;
    min-width: 160px !important;
    z-index: 50 !important;
}

.dark .navigator-top-nav .filer-dropdown-menu {
    background-color: var(--color-base-900) !important;
    border-color: var(--color-base-800) !important;
}

.navigator-top-nav .filer-dropdown-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.5rem 1rem !important;
    color: var(--color-font-default-light) !important;
    font-size: 0.875rem !important;
}

.dark .navigator-top-nav .filer-dropdown-menu a {
    color: var(--color-font-default-dark) !important;
}

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;
    color: var(--color-base-700) !important; /* Ensure edit icon is dark in light mode */
    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;
    color: var(--color-base-200) !important; /* Ensure icons are light in dark mode */
}

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;
    /* Force white icon on the blue background */
    color: #ffffff !important;
}


/* 1. Reset the base Action Button and Table in the Navigator */
.filebrowser .navigator-list .column-action .action-button,
.filebrowser .navigator-table .column-action .action-button,
.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-list .column-action .action-button,
.dark .navigator-table .column-action .action-button {
    background-color: var(--color-primary-600, #2563eb) !important;
    border-color: var(--color-primary-500, #3b82f6) !important;
    color: #ffffff !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,
.navigator-table .column-action .action-button:active,
.navigator-table .column-action .action-button:hover,
.navigator-table .column-action .action-button:focus,
.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 */
.navigator-table {
    border: 1px solid var(--color-base-200) !important;
    border-bottom: none !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-color: white !important;
}

.dark .navigator-table {
    border-color: var(--color-base-800) !important;
    background-color: var(--color-base-900) !important;
}

.filebrowser .navigator-table tr,
.navigator-table tr,
.navigator-table td {
    border-bottom: 1px solid var(--color-base-200) !important;
    background-color: transparent !important;
}

.dark .filebrowser .navigator-table tr,
.dark .navigator-table tr,
.dark .navigator-table td {
    border-bottom: 1px solid var(--color-base-800) !important;
    background-color: var(--color-base-900) !important;
}

/* Fix for specific row types like unfiled/unsorted */
.dark .navigator-table tr.unfiled td,
.dark .navigator-table tr.unfiled th {
    background-color: var(--color-base-900) !important;
    color: var(--color-base-200) !important;
}

/* Navigator Header / Top Section (Search area) */
.filebrowser .navigator-top {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dark .filebrowser .navigator-top {
    background-color: var(--color-bg-primary, #111827) !important;
    border-bottom-color: var(--color-border-primary, #374151) !important;
}

/* Style the search field in the header */
.filebrowser .navigator-top input[type="text"],
.navigator-top input[type="text"] {
    background-color: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    color: #111827 !important;
}

.dark .filebrowser .navigator-top input[type="text"],
.dark .navigator-top input[type="text"] {
    background-color: var(--color-bg-secondary, #1f2937) !important;
    border-color: var(--color-border-primary, #374151) !important;
    color: var(--color-text-primary, #f3f4f6) !important;
}

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

.dark .filebrowser .navigator-table td a,
.dark .filebrowser .navigator-table td,
.dark .navigator-table td a,
.dark .navigator-table td {
    color: var(--color-text-primary, #f3f4f6) !important;
}

/* Style Table Headers */
.filebrowser .navigator-table thead th,
.navigator-table thead th {
    background-color: var(--color-base-50) !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--color-base-200) !important;
}

.dark .filebrowser .navigator-table thead th,
.dark .navigator-table thead th {
    background-color: var(--color-base-900) !important;
    color: var(--color-text-secondary, #9ca3af) !important;
    border-bottom-color: var(--color-base-800) !important;
}

/* 4. Fix Navigator Breadcrumbs/Path styling */
.filebrowser .navigator-breadcrumbs,
.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,
.dark .navigator-breadcrumbs {
    background-color: var(--color-bg-secondary, #1f2937) !important;
    border-color: var(--color-border-primary, #374151) !important;
}

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

/* Dark mode specific for folder listing and unfiled rows */
.dark .navigator-table tr.unfiled td,
.dark .navigator-table td.no-files {
    color: var(--color-base-400) !important;
    background-color: var(--color-base-900) !important;
}

.dark .navigator-table tr.unfiled a {
    color: var(--color-base-200) !important;
}

/* Fix icons for folders in dark mode */
.dark .navigator-table img[src*="folder"] {
    filter: invert(1) brightness(2) !important;
}

/* Dropzone info and Paginator styling */
.dark .filer-dropzone-info-message {
    background-color: var(--color-base-900) !important;
    border: 2px dashed var(--color-base-800) !important;
    color: var(--color-base-400) !important;
}

.dark .filer-dropzone-upload-welcome .folder-inner {
    background-color: var(--color-base-800) !important;
}

.dark .nav-pages.paginator {
    color: var(--color-base-400) !important;
}

.dark .nav-pages.paginator a {
    color: var(--color-primary-400) !important;
}

.dark .nav-pages.paginator .action-counter {
    color: var(--color-base-500) !important;
}

/* Mobile-specific fixes for selection visibility */
@media (max-width: 768px) {
    .filebrowser .navigator-table .column-action .action-button,
    .navigator-table .column-action .action-button {
        padding: 10px 14px !important;
        font-size: 0.875rem !important;
        width: 100%;
        justify-content: center;
    }
}