/*
 * The file uploader of the Attachments field on Revenues and Expenses (class "nf-uploader", see LedgerForm::attachments()).
 * A dashed drop zone with an upload icon that lights up while a file is dragged over it, and the chosen files as soft cards.
 * Filament's --primary-* / --gray-* are comma triples, so they go through rgb() / rgba().
 */

.nf-uploader .filepond--root { font-family: inherit; margin-bottom: 0; }

/* ---------------------------------------------------------------- the drop zone */

.nf-uploader .filepond--panel-root {
    background: rgba(var(--primary-500), .04);
    border: 2px dashed rgba(var(--primary-500), .38);
    border-radius: 1rem;
    transition: background-color .15s, border-color .15s;
}

.nf-uploader .filepond--root:hover .filepond--panel-root { background: rgba(var(--primary-500), .07); border-color: rgba(var(--primary-500), .6); }

/* A file is being dragged over the zone. */
.nf-uploader .filepond--root[data-hopper-state='drag-over'] .filepond--panel-root {
    background: rgba(var(--primary-500), .13);
    border-color: rgb(var(--primary-500));
    border-style: solid;
}

.nf-uploader .filepond--drop-label { min-height: 8.5rem; color: rgb(var(--gray-600)); cursor: pointer; }
.nf-uploader .filepond--drop-label label { cursor: pointer; text-align: center; font-size: .95rem; line-height: 1.5; padding: 1.25rem 1rem; }

/* The upload icon above the text: a tinted circle with an arrow. */
.nf-uploader .filepond--drop-label label::before {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0 auto .7rem;
    border-radius: 999px;
    background-color: rgba(var(--primary-500), .14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.8' stroke='%237c5ce0' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5rem;
    transition: transform .15s;
}

.nf-uploader .filepond--root:hover .filepond--drop-label label::before,
.nf-uploader .filepond--root[data-hopper-state='drag-over'] .filepond--drop-label label::before { transform: translateY(-2px) scale(1.06); }

.nf-uploader .filepond--label-action {
    color: rgb(var(--primary-600));
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(var(--primary-500), .5);
}

.nf-uploader .filepond--label-action:hover { color: rgb(var(--primary-700)); border-bottom-color: currentColor; }

/* ---------------------------------------------------------------- the chosen files */

.nf-uploader .filepond--item-panel {
    background-color: #fff;
    border: 1px solid rgb(var(--gray-200));
    border-radius: .85rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / .06);
}

.nf-uploader .filepond--file { color: rgb(var(--gray-900)); }
.nf-uploader .filepond--file-info-main { font-weight: 600; font-size: .85rem; }
.nf-uploader .filepond--file-info-sub { color: rgb(var(--gray-500)); opacity: 1; font-size: .75rem; }

/* A file that is still uploading or failed keeps a clear state colour. */
.nf-uploader [data-filepond-item-state*='error'] .filepond--item-panel,
.nf-uploader [data-filepond-item-state*='invalid'] .filepond--item-panel { background-color: rgb(254 242 242); border-color: rgb(252 165 165); }
.nf-uploader [data-filepond-item-state*='error'] .filepond--file,
.nf-uploader [data-filepond-item-state*='invalid'] .filepond--file { color: rgb(153 27 27); }

.nf-uploader .filepond--image-preview-wrapper { border-radius: .85rem; }

/* ---------------------------------------------------------------- dark mode */

html.dark .nf-uploader .filepond--panel-root { background: rgba(var(--primary-500), .07); border-color: rgba(var(--primary-400), .4); }
html.dark .nf-uploader .filepond--root:hover .filepond--panel-root { background: rgba(var(--primary-500), .12); border-color: rgba(var(--primary-400), .65); }
html.dark .nf-uploader .filepond--root[data-hopper-state='drag-over'] .filepond--panel-root { background: rgba(var(--primary-500), .2); border-color: rgb(var(--primary-400)); }
html.dark .nf-uploader .filepond--drop-label { color: rgb(var(--gray-300)); }
html.dark .nf-uploader .filepond--drop-label label::before { background-color: rgba(var(--primary-400), .18); }
html.dark .nf-uploader .filepond--label-action { color: rgb(var(--primary-300)); border-bottom-color: rgba(var(--primary-300), .5); }
html.dark .nf-uploader .filepond--label-action:hover { color: rgb(var(--primary-200)); }
html.dark .nf-uploader .filepond--item-panel { background-color: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); box-shadow: none; }
html.dark .nf-uploader .filepond--file { color: #fff; }
html.dark .nf-uploader .filepond--file-info-sub { color: rgb(var(--gray-400)); }
html.dark .nf-uploader [data-filepond-item-state*='error'] .filepond--item-panel,
html.dark .nf-uploader [data-filepond-item-state*='invalid'] .filepond--item-panel { background-color: rgb(239 68 68 / .14); border-color: rgb(239 68 68 / .5); }
html.dark .nf-uploader [data-filepond-item-state*='error'] .filepond--file,
html.dark .nf-uploader [data-filepond-item-state*='invalid'] .filepond--file { color: rgb(254 202 202); }

/* The business logo on the Register business form: label and round picture centred above everything. */
.nf-logo-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.nf-logo-upload > * { width: 100%; }
.nf-logo-upload { width: 100%; }
.nf-logo-upload .fi-fo-file-upload { display: flex; justify-content: center; width: 100%; }
.nf-logo-upload .filepond--root { margin-inline: auto; }
.nf-logo-upload .fi-fo-field-wrp-label, .nf-logo-upload label { justify-content: center; }

/* Business details: the logo and the name / slug column sit on one row, the logo centred against the two fields. */
.nf-business-head { align-items: center; }

/* The dark logo is previewed on a dark background, the way it will be seen. */
.nf-logo-dark-upload .filepond--panel-root { background-color: #0b1230; }