/*
 * Folder explorer (resources/views/components/folder-explorer.blade.php). Registered with FilamentAsset and
 * published by `php artisan filament:assets`; the panels use Filament's prebuilt CSS, so these styles are plain CSS
 * on Filament's colour variables (--gray-*, --primary-*, --danger-*), light and dark.
 */
.mda-fx { position: relative; border: 1px solid var(--gray-200, #e5e7eb); border-radius: .75rem; background: #fff; font-size: .875rem; color: var(--gray-950, #030712); }
.dark .mda-fx { border-color: rgb(255 255 255 / .1); background: var(--gray-900, #18181b); color: #fff; }

/* toolbar */
.mda-fx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--gray-200, #e5e7eb); }
.dark .mda-fx-bar { border-color: rgb(255 255 255 / .1); }
.mda-fx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem; flex: 1 1 14rem; min-width: 0; font-size: .9375rem; font-weight: 600; }
.mda-fx-crumbs > span { display: inline-flex; align-items: center; min-width: 0; }
.mda-fx-crumb { padding: .125rem .375rem; border-radius: .375rem; color: var(--gray-500, #6b7280); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mda-fx-crumb:hover { background: var(--gray-100, #f3f4f6); color: var(--gray-950, #030712); }
.dark .mda-fx-crumb { color: var(--gray-400, #9ca3af); }
.dark .mda-fx-crumb:hover { background: rgb(255 255 255 / .05); color: #fff; }
.mda-fx-crumb.is-current { color: var(--gray-950, #030712); }
.dark .mda-fx-crumb.is-current { color: #fff; }
.mda-fx-sep { color: var(--gray-400, #9ca3af); padding: 0 .0625rem; }
.mda-fx-tools { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.mda-fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-width: 2rem; height: 2rem; padding: 0 .375rem; border-radius: .5rem; color: var(--gray-500, #6b7280); font-weight: 500; font-size: .8125rem; white-space: nowrap; }
.mda-fx-btn:hover:not([disabled]) { background: var(--gray-100, #f3f4f6); color: var(--gray-950, #030712); }
.dark .mda-fx-btn:hover:not([disabled]) { background: rgb(255 255 255 / .05); color: #fff; }
.mda-fx-btn[disabled] { opacity: .35; cursor: default; }
.mda-fx-btn.is-on { background: var(--gray-100, #f3f4f6); color: var(--gray-950, #030712); }
.dark .mda-fx-btn.is-on { background: rgb(255 255 255 / .08); color: #fff; }
.mda-fx-btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
.mda-fx-seg { display: inline-flex; border: 1px solid var(--gray-200, #e5e7eb); border-radius: .5rem; padding: 1px; }
.dark .mda-fx-seg { border-color: rgb(255 255 255 / .12); }
.mda-fx-seg .mda-fx-btn { height: 1.75rem; min-width: 1.75rem; border-radius: .4rem; }
.mda-fx-primary { background: var(--primary-600, #2563eb); color: #fff !important; padding: 0 .75rem; }
.mda-fx-primary:hover:not([disabled]) { background: var(--primary-500, #3b82f6) !important; }
.mda-fx-input, .mda-fx-filter { padding: .375rem .625rem; border: 1px solid var(--gray-300, #d1d5db); border-radius: .5rem; background: transparent; color: inherit; font-size: .8125rem; min-width: 0; }
.dark .mda-fx-input, .dark .mda-fx-filter { border-color: rgb(255 255 255 / .15); }
.mda-fx-filter { width: 12rem; max-width: 100%; }
.mda-fx-input:focus, .mda-fx-filter:focus { outline: 2px solid var(--primary-500, #3b82f6); outline-offset: -1px; }

/* notices */
.mda-fx-notice { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .75rem; font-size: .8125rem; border-bottom: 1px solid var(--gray-200, #e5e7eb); background: var(--success-50, #f0fdf4); color: var(--success-700, #15803d); }
.mda-fx-notice.is-error { background: var(--danger-50, #fef2f2); color: var(--danger-700, #b91c1c); }
.dark .mda-fx-notice { border-color: rgb(255 255 255 / .1); background: rgb(34 197 94 / .1); color: var(--success-400, #4ade80); }
.dark .mda-fx-notice.is-error { background: rgb(239 68 68 / .12); color: var(--danger-400, #f87171); }
.mda-fx-notice span { flex: 1; }
.mda-fx-notice button { opacity: .7; }

/* list */
.mda-fx-list { overflow-y: auto; position: relative; }
.mda-fx-list.is-loading .mda-fx-row, .mda-fx-list.is-loading .mda-fx-card { opacity: .5; }
.mda-fx-head, .mda-fx-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 11.5rem 5.5rem 2rem; gap: .75rem; align-items: center; padding: .4375rem .75rem; }
.mda-fx-head { position: sticky; top: 0; z-index: 2; font-size: .75rem; font-weight: 600; color: var(--gray-500, #6b7280); background: var(--gray-50, #f9fafb); border-bottom: 1px solid var(--gray-200, #e5e7eb); }
.dark .mda-fx-head { background: var(--gray-950, #09090b); color: var(--gray-400, #9ca3af); border-color: rgb(255 255 255 / .1); }
.mda-fx-row { position: relative; border-bottom: 1px solid var(--gray-100, #f3f4f6); cursor: pointer; }
.dark .mda-fx-row { border-color: rgb(255 255 255 / .05); }
.mda-fx-row:hover, .mda-fx-card:hover { background: var(--gray-50, #f9fafb); }
.dark .mda-fx-row:hover, .dark .mda-fx-card:hover { background: rgb(255 255 255 / .04); }
.mda-fx-row:focus-visible, .mda-fx-card:focus-visible { outline: 2px solid var(--primary-500, #3b82f6); outline-offset: -2px; }
.mda-fx-row.is-muted, .mda-fx-card.is-muted { cursor: default; }
.mda-fx-row.is-muted .mda-fx-name, .mda-fx-row.is-muted .mda-fx-icon, .mda-fx-card.is-muted .mda-fx-card-icon, .mda-fx-card.is-muted .mda-fx-card-name { opacity: .55; }
.mda-fx-row.is-new, .mda-fx-card.is-new { background: var(--primary-50, #eff6ff); }
.dark .mda-fx-row.is-new, .dark .mda-fx-card.is-new { background: rgb(59 130 246 / .12); }
.mda-fx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mda-fx-meta { color: var(--gray-500, #6b7280); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .mda-fx-meta { color: var(--gray-400, #9ca3af); }
.mda-fx-size { text-align: right; }
.mda-fx-icon { display: inline-flex; width: 1.5rem; height: 1.5rem; }
.mda-fx-icon svg, .mda-fx-card-icon svg { width: 100%; height: 100%; }
.mda-fx-k-folder { color: #4a8cff; } .mda-fx-k-pdf { color: #e5484d; } .mda-fx-k-image { color: #8e4ec6; }
.mda-fx-k-cad { color: #0d9488; } .mda-fx-k-sheet { color: #30a46c; } .mda-fx-k-doc { color: #3e63dd; }
.mda-fx-k-zip { color: #b7791f; } .mda-fx-k-file { color: var(--gray-400, #9ca3af); }

/* grid */
.mda-fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; padding: .75rem; }
.mda-fx-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: .875rem .5rem .625rem; border: 1px solid transparent; border-radius: .625rem; cursor: pointer; text-align: center; min-width: 0; }
.mda-fx-card-icon { position: relative; width: 4rem; height: 4rem; }
.mda-fx-ext { position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%); padding: 0 .25rem; border-radius: .2rem; background: rgb(255 255 255 / .92); color: #1f2937; font-size: .5625rem; font-weight: 700; letter-spacing: .02em; line-height: 1rem; }
.mda-fx-card-name { width: 100%; font-weight: 500; line-height: 1.25rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.mda-fx-card-meta { font-size: .75rem; color: var(--gray-500, #6b7280); }
.dark .mda-fx-card-meta { color: var(--gray-400, #9ca3af); }
.mda-fx-card .mda-fx-more { position: absolute; top: .25rem; right: .25rem; opacity: 0; }
.mda-fx-card:hover .mda-fx-more, .mda-fx-card:focus-within .mda-fx-more, .mda-fx-card .mda-fx-more.is-open { opacity: 1; }

/* per-folder menu */
.mda-fx-more { width: 1.75rem; height: 1.75rem; min-width: 1.75rem; padding: 0; }
.mda-fx-menu { position: absolute; right: .5rem; top: 2.25rem; z-index: 20; min-width: 10rem; padding: .25rem; border: 1px solid var(--gray-200, #e5e7eb); border-radius: .625rem; background: #fff; box-shadow: 0 10px 25px -5px rgb(0 0 0 / .15); text-align: left; }
.dark .mda-fx-menu { background: var(--gray-900, #18181b); border-color: rgb(255 255 255 / .12); }
.mda-fx-menu button { display: flex; width: 100%; align-items: center; gap: .5rem; padding: .375rem .625rem; border-radius: .4rem; font-size: .8125rem; color: inherit; }
.mda-fx-menu button:hover { background: var(--gray-100, #f3f4f6); }
.dark .mda-fx-menu button:hover { background: rgb(255 255 255 / .06); }
.mda-fx-menu button.is-danger { color: var(--danger-600, #dc2626); }
.dark .mda-fx-menu button.is-danger { color: var(--danger-400, #f87171); }
.mda-fx-menu svg { width: 1rem; height: 1rem; }

/* empty / error */
.mda-fx-note { padding: 2.5rem 1rem; text-align: center; color: var(--gray-500, #6b7280); }
.mda-fx-note.is-error { color: var(--danger-600, #dc2626); }
.mda-fx-note button { margin-left: .5rem; text-decoration: underline; color: inherit; }

/* pick-mode footer */
.mda-fx-foot { display: flex; flex-wrap: wrap; gap: .25rem .5rem; padding: .5rem .75rem; border-top: 1px solid var(--gray-200, #e5e7eb); color: var(--gray-600, #4b5563); font-size: .8125rem; }
.dark .mda-fx-foot { border-color: rgb(255 255 255 / .1); color: var(--gray-300, #d1d5db); }
.mda-fx-foot strong { color: var(--gray-950, #030712); word-break: break-all; }
.dark .mda-fx-foot strong { color: #fff; }

/* dialogs (move, delete) */
.mda-fx-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(0 0 0 / .45); }
.mda-fx-dialog { width: 100%; max-width: 30rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; border-radius: .875rem; background: #fff; color: var(--gray-950, #030712); box-shadow: 0 25px 50px -12px rgb(0 0 0 / .35); overflow: hidden; }
.dark .mda-fx-dialog { background: var(--gray-900, #18181b); color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 25px 50px -12px rgb(0 0 0 / .6); }
.mda-fx-dialog h3 { padding: 1rem 1.25rem .25rem; font-size: 1rem; font-weight: 600; }
.mda-fx-dialog p { padding: .25rem 1.25rem; font-size: .875rem; color: var(--gray-600, #4b5563); }
.dark .mda-fx-dialog p { color: var(--gray-300, #d1d5db); }
.mda-fx-dialog .mda-fx-dialog-body { margin: .5rem 1.25rem; border: 1px solid var(--gray-200, #e5e7eb); border-radius: .5rem; overflow-y: auto; min-height: 12rem; max-height: 22rem; }
.dark .mda-fx-dialog .mda-fx-dialog-body { border-color: rgb(255 255 255 / .1); }
.mda-fx-dialog .mda-fx-row { grid-template-columns: 1.5rem minmax(0, 1fr); }
.mda-fx-dialog-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; padding: .75rem 1.25rem 1rem; }
.mda-fx-dialog-foot .mda-fx-btn { height: 2.25rem; padding: 0 .875rem; border: 1px solid var(--gray-300, #d1d5db); color: inherit; }
.dark .mda-fx-dialog-foot .mda-fx-btn { border-color: rgb(255 255 255 / .15); }
.mda-fx-dialog-foot .mda-fx-primary { border-color: transparent; }
.mda-fx-dialog-foot .mda-fx-danger { background: var(--danger-600, #dc2626); color: #fff; border-color: transparent; }
.mda-fx-dialog-foot .mda-fx-danger:hover:not([disabled]) { background: var(--danger-500, #ef4444) !important; color: #fff !important; }
.mda-fx-dialog .mda-fx-warn { color: var(--danger-600, #dc2626); }
.dark .mda-fx-dialog .mda-fx-warn { color: var(--danger-400, #f87171); }

/* drag and drop */
.mda-fx-row[draggable="true"], .mda-fx-card[draggable="true"] { -webkit-user-drag: element; }
.mda-fx-row.is-dragging, .mda-fx-card.is-dragging { opacity: .45; }
.mda-fx-row.is-drop, .mda-fx-card.is-drop, .mda-fx-crumb.is-drop { background: var(--primary-50, #eff6ff) !important; box-shadow: inset 0 0 0 2px var(--primary-500, #3b82f6); }
.dark .mda-fx-row.is-drop, .dark .mda-fx-card.is-drop, .dark .mda-fx-crumb.is-drop { background: rgb(91 61 245 / .18) !important; }
.mda-fx-crumb.is-drop { color: var(--primary-700, #1d4ed8); }
.mda-fx-list.is-drop { box-shadow: inset 0 0 0 2px var(--primary-500, #3b82f6); }
.mda-fx-dropzone { position: absolute; inset: .5rem; z-index: 5; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.25rem; border: 2px dashed var(--primary-500, #3b82f6); border-radius: .625rem; background: rgb(255 255 255 / .55); pointer-events: none; }
.dark .mda-fx-dropzone { background: rgb(0 0 0 / .35); }
.mda-fx-dropzone span { padding: .5rem .875rem; border-radius: 999px; background: var(--primary-600, #2563eb); color: #fff; font-size: .8125rem; box-shadow: 0 6px 16px -4px rgb(0 0 0 / .3); }

/* uploads */
.mda-fx-uploads { border-top: 1px solid var(--gray-200, #e5e7eb); }
.dark .mda-fx-uploads { border-color: rgb(255 255 255 / .1); }
.mda-fx-uploads-head { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; font-size: .8125rem; }
.mda-fx-progress { height: 3px; background: var(--gray-100, #f3f4f6); }
.dark .mda-fx-progress { background: rgb(255 255 255 / .08); }
.mda-fx-progress > div { height: 100%; background: var(--primary-600, #2563eb); transition: width .2s; }
.mda-fx-uploads-list { max-height: 9.5rem; overflow-y: auto; padding: .25rem 0; }
.mda-fx-up { display: flex; gap: .75rem; justify-content: space-between; padding: .1875rem .75rem; font-size: .8125rem; }
.mda-fx-up-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mda-fx-up-state { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-500, #6b7280); font-variant-numeric: tabular-nums; }
.mda-fx-up.is-done .mda-fx-up-state { color: var(--success-600, #16a34a); }
.mda-fx-card-icon.has-thumb, .mda-fx-icon.has-thumb { overflow: hidden; border-radius: 6px; background: var(--gray-100, #f3f4f6); }
.mda-fx-icon.has-thumb { border-radius: 4px; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.dark .mda-fx-card-icon.has-thumb, .dark .mda-fx-icon.has-thumb { background: rgb(255 255 255 / .05); }
.mda-fx-thumb { width: 100%; height: 100%; object-fit: cover; }
/* a PDF's page 1: the whole sheet, on white, with a hairline edge */
.mda-fx-card-icon.is-page, .mda-fx-icon.is-page { background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .12); }
.mda-fx-card-icon.is-page .mda-fx-thumb, .mda-fx-icon.is-page .mda-fx-thumb { object-fit: contain; }
.mda-fx-link { flex: none; padding: 0; border: 0; background: none; color: var(--primary-600, #5b3df5); font: inherit; font-weight: 600; cursor: pointer; }
.mda-fx-link:hover { text-decoration: underline; }
.dark .mda-fx-link { color: var(--primary-400, #a596ff); }
.mda-fx-up.is-skipped .mda-fx-up-state { color: var(--warning-600, #d97706); }
.mda-fx-up.is-error .mda-fx-up-state { color: var(--danger-600, #dc2626); }
.dark .mda-fx-up.is-done .mda-fx-up-state { color: var(--success-400, #4ade80); }
.dark .mda-fx-up.is-skipped .mda-fx-up-state { color: var(--warning-400, #fbbf24); }
.dark .mda-fx-up.is-error .mda-fx-up-state { color: var(--danger-400, #f87171); }

@media (max-width: 640px) {
    .mda-fx-head, .mda-fx-row { grid-template-columns: 1.5rem minmax(0, 1fr) 4.5rem 2rem; }
    .mda-fx-mod { display: none; }
    .mda-fx-filter { width: 100%; }
    .mda-fx-btn .mda-fx-label { display: none; }
}
@keyframes mda-fx-spin { to { transform: rotate(360deg); } }
.mda-fx-spin { animation: mda-fx-spin 1s linear infinite; }

/* project page -> storage tab: the folder's sync status (ProjectStorageTab) */
.tbx-storage-tab { display: flex; flex-direction: column; gap: .75rem; }
.tbx-sync { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; padding: .625rem .875rem; border: 1px solid var(--gray-200, #e5e7eb); border-radius: .75rem; background: #fff; font-size: .875rem; }
.dark .tbx-sync { border-color: rgb(255 255 255 / .1); background: var(--gray-900, #18181b); }
.tbx-sync-dot { width: .625rem; height: .625rem; border-radius: 999px; flex: none; }
.tbx-sync-success .tbx-sync-dot { background: var(--success-500, #22c55e); box-shadow: 0 0 0 3px color-mix(in oklab, var(--success-500, #22c55e) 25%, transparent); }
.tbx-sync-warning .tbx-sync-dot { background: var(--warning-500, #f59e0b); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warning-500, #f59e0b) 25%, transparent); }
.tbx-sync-danger .tbx-sync-dot { background: var(--danger-500, #ef4444); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger-500, #ef4444) 25%, transparent); }
.tbx-sync-gray .tbx-sync-dot { background: var(--gray-400, #9ca3af); }
.tbx-sync-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 16rem; }
.tbx-sync-text span { color: var(--gray-500, #6b7280); font-size: .8125rem; word-break: break-all; }
.dark .tbx-sync-text span { color: var(--gray-400, #9ca3af); }
.tbx-sync-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* selection and the right-click menu */
.mda-fx-row.is-selected, .mda-fx-card.is-selected { background: var(--primary-50, #eff6ff); box-shadow: inset 3px 0 0 var(--primary-500, #3b82f6); }
.mda-fx-card.is-selected { box-shadow: inset 0 0 0 2px var(--primary-500, #3b82f6); }
.dark .mda-fx-row.is-selected, .dark .mda-fx-card.is-selected { background: rgb(91 61 245 / .16); }
.mda-fx-ctx { position: fixed; z-index: 70; min-width: 14rem; max-width: 20rem; max-height: calc(100vh - 1rem); overflow-y: auto; }
.mda-fx-ctx-head { padding: .375rem .625rem .25rem; font-size: .75rem; font-weight: 600; color: var(--gray-500, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mda-fx-ctx-group { margin: .125rem 0; padding: .125rem 0; border-block: 1px solid var(--gray-100, #f3f4f6); }
.dark .mda-fx-ctx-group { border-color: rgb(255 255 255 / .08); }
.mda-fx-ctx-label { padding: .25rem .625rem; font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-500, #6b7280); }
.mda-fx-ctx .mda-fx-ctx-group button svg { color: #4a8cff; }

/* History (right-click -> History) */
.mda-fx-dialog .mda-fx-hist-path { padding-top: 0; font-size: .75rem; word-break: break-all; color: var(--gray-500, #6b7280); }
.mda-fx-hist { padding: .25rem 0; }
.mda-fx-hist-row { padding: .5rem .75rem; border-bottom: 1px solid var(--gray-100, #f3f4f6); font-size: .8125rem; }
.dark .mda-fx-hist-row { border-color: rgb(255 255 255 / .05); }
.mda-fx-hist-row:last-of-type { border-bottom: 0; }
.mda-fx-hist-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .125rem .75rem; }
.mda-fx-hist-details { margin-top: .125rem; color: var(--gray-600, #4b5563); word-break: break-all; }
.dark .mda-fx-hist-details { color: var(--gray-300, #d1d5db); }

/* project page -> storage tab: the last "Check shortcuts" result (ProjectStorageTab) */
.tbx-shortcuts { padding: .625rem .875rem; border: 1px solid var(--gray-200, #e5e7eb); border-radius: .75rem; background: #fff; font-size: .8125rem; }
.dark .tbx-shortcuts { border-color: rgb(255 255 255 / .1); background: var(--gray-900, #18181b); }
.tbx-shortcuts-head { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; }
.tbx-shortcuts-head strong { flex: 1; }
.tbx-shortcuts-close { opacity: .6; font-size: 1.125rem; line-height: 1; }
.tbx-shortcuts-close:hover { opacity: 1; }
.tbx-shortcuts-label { margin-top: .5rem; font-weight: 600; color: var(--gray-600, #4b5563); }
.dark .tbx-shortcuts-label { color: var(--gray-300, #d1d5db); }
.tbx-shortcuts ul { margin-top: .125rem; padding-left: 1.125rem; list-style: disc; }
.tbx-shortcuts li { word-break: break-all; }
.tbx-shortcuts-name { font-weight: 500; }
.tbx-shortcuts li span:not(.tbx-shortcuts-name) { color: var(--gray-500, #6b7280); }
.dark .tbx-shortcuts li span:not(.tbx-shortcuts-name) { color: var(--gray-400, #9ca3af); }