/* ============================================================
   Shared entry-field styling ("form-fields") - the canonical look
   for every text/number/textarea input, label, hint, error message,
   and image dropzone across the admin (dashboard modals, Add Item,
   Design Settings). Keeping this in one file means every entry
   field in the app looks and behaves the same way.
   ============================================================ */

:root {
    --ff-primary: #0f172a;
    --ff-accent: #2563eb;
    --ff-accent-hover: #1d4ed8;
    --ff-text-muted: #64748b;
    --ff-border: #e2e8f0;
    --ff-danger: #ef4444;
    --ff-danger-text: #b91c1c;
    --ff-danger-bg: #fef2f2;
}

.ff-field-group { margin-bottom: 18px; }

.ff-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ff-input,
.ff-textarea {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    border: 1.5px solid var(--ff-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ff-primary);
    background-color: #fff;
    min-height: 44px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ff-input:focus,
.ff-textarea:focus {
    outline: none;
    border-color: var(--ff-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ff-input::placeholder,
.ff-textarea::placeholder { color: #a3aebd; }

.ff-textarea { min-height: 90px; resize: vertical; }

.ff-hint {
    display: block;
    color: var(--ff-text-muted);
    font-size: 0.8rem;
    margin: 6px 0 0 0;
    line-height: 1.4;
}

/* Inline validation - instant feedback, no server round trip needed */
.ff-input.ff-error,
.ff-textarea.ff-error {
    border-color: var(--ff-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}
.ff-error-msg {
    display: none;
    color: var(--ff-danger-text);
    font-size: 0.76rem;
    font-weight: 600;
    margin: 6px 0 0 0;
}
.ff-error-msg.show { display: block; }

/* Price field with a currency symbol baked into the input */
.ff-price-wrap { position: relative; }
.ff-price-wrap .ff-input { padding-left: 32px; }
.ff-price-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ff-text-muted);
    font-weight: 700;
    font-size: 0.9rem;
    pointer-events: none;
}

/* Generic drag-and-drop image dropzone, reused for item photos, logos,
   and background images */
.ff-dropzone {
    border: 2px dashed var(--ff-border);
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fafbfc;
}
.ff-dropzone:hover,
.ff-dropzone.drag-over { border-color: var(--ff-accent); background: #eff6ff; }

.ff-dropzone-empty { color: var(--ff-text-muted); }
.ff-dropzone-icon { display: block; font-size: 1.6rem; margin-bottom: 6px; }
.ff-dropzone-empty .ff-dropzone-label { display: block; font-size: 0.85rem; font-weight: 600; color: #475569; }
.ff-dropzone-empty .ff-dropzone-sub { display: block; margin-top: 4px; color: var(--ff-text-muted); font-size: 0.78rem; }

.ff-dropzone-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.ff-dropzone-preview img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ff-border);
}
.ff-dropzone-preview-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ff-primary);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.ff-dropzone-remove-btn {
    background: #fff;
    border: 1px solid var(--ff-border);
    border-radius: 6px;
    color: var(--ff-danger);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 10px;
    cursor: pointer;
}
.ff-dropzone-remove-btn:hover { background: var(--ff-danger-bg); }

.ff-btn-primary {
    background-color: var(--ff-accent);
    color: #fff;
    border: none;
    padding: 14px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, opacity 0.15s;
}
.ff-btn-primary:hover:not(:disabled) { background-color: var(--ff-accent-hover); }
.ff-btn-primary:disabled { opacity: 0.75; cursor: not-allowed; }

/* Prevent the "page zooms in when I tap a field" behavior on phones.
   iOS Safari auto-zooms into any input/textarea/select with a computed
   font-size under 16px - this forces 16px on all form controls (site-wide,
   any page that includes this file) so tapping a field never triggers it. */
@media (max-width: 640px) {
    input, select, textarea, button,
    .ff-input, .ff-textarea, .cs-trigger, .cs-option {
        font-size: 16px !important;
    }
}