/*
 * ProductPages.css
 * Shared styles for ProductNew.razor + ProductEdit.razor
 * Also overrides default browser / Bootstrap styles inside <ProductForm>
 * Place in wwwroot/css/ and reference from app.css or _Host.cshtml
 */

/* ════════════════════════════════════════════════
   PAGE SHELL — matches the project design system
════════════════════════════════════════════════ */
.pf-page {
    --pf-blue:       #2563b0;
    --pf-blue-dim:   rgba(37,99,176,.1);
    --pf-blue-glow:  rgba(37,99,176,.28);
    --pf-green:      #059669;
    --pf-green-dim:  rgba(5,150,105,.1);
    --pf-red:        #dc2626;
    --pf-border:     #e2e8f0;
    --pf-border-2:   #f1f5f9;
    --pf-bg:         #f8fafc;
    --pf-surface:    #ffffff;
    --pf-text-1:     #0f172a;
    --pf-text-2:     #475569;
    --pf-text-3:     #94a3b8;
    --pf-radius:     16px;
    --pf-shadow:     0 1px 6px rgba(0,0,0,.05);
    --pf-t:          .16s cubic-bezier(.4,0,.2,1);

    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
    font-family: system-ui, -apple-system, sans-serif;
    animation: pfIn .4s cubic-bezier(.22,.68,0,1.15) both;
}

@keyframes pfIn {
    from { opacity: 0; transform: translateY(14px) }
    to   { opacity: 1; transform: translateY(0) }
}

/* ════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════ */
.pf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.pf-header-left {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    flex: 1;
}

.pf-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pf-header-title-block { min-width: 0; }

.pf-back-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    border: 1.5px solid var(--pf-border);
    background: var(--pf-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pf-text-3);
    flex-shrink: 0;
    transition: border-color var(--pf-t), color var(--pf-t);
}
.pf-back-btn:hover { border-color: var(--pf-blue); color: var(--pf-blue); }

.pf-page-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--pf-text-1);
    letter-spacing: -.4px;
    line-height: 1.1;
}

.pf-page-sub {
    font-size: .8rem;
    color: var(--pf-text-3);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════ */
.pf-btn {
    height: 38px;
    padding: 0 16px;
    border-radius: 9px;
    border: none;
    font-size: .8125rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background var(--pf-t), color var(--pf-t), transform var(--pf-t), box-shadow var(--pf-t);
    white-space: nowrap;
}

.pf-btn-ghost {
    background: var(--pf-surface);
    color: var(--pf-text-2);
    border: 1.5px solid var(--pf-border);
}
.pf-btn-ghost:hover { background: var(--pf-bg); color: var(--pf-text-1); }

/* ════════════════════════════════════════════════
   ALERT
════════════════════════════════════════════════ */
.pf-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 10px;
    font-size: .875rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.pf-alert svg { flex-shrink: 0; margin-top: 1px; }
.pf-alert-err { background: #fef2f2; border: 1px solid #fecaca; color: var(--pf-red); }

/* ════════════════════════════════════════════════
   LOADING
════════════════════════════════════════════════ */
.pf-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 1.75rem 2rem;
    color: var(--pf-text-2);
    font-size: .9rem;
    box-shadow: var(--pf-shadow);
}

.pf-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(37,99,176,.2);
    border-top-color: var(--pf-blue);
    animation: pfSpin .7s linear infinite;
}

@keyframes pfSpin { to { transform: rotate(360deg) } }

/* ════════════════════════════════════════════════
   CARD
════════════════════════════════════════════════ */
.pf-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    overflow: hidden;
    box-shadow: var(--pf-shadow);
    animation: pfCardIn .36s ease both;
}

@keyframes pfCardIn {
    from { opacity: 0; transform: translateY(10px) }
    to   { opacity: 1; transform: translateY(0) }
}

.pf-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    background: var(--pf-bg);
    border-bottom: 1px solid var(--pf-border-2);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--pf-text-1);
    flex-wrap: wrap;
    row-gap: 8px;
}
.pf-card-head > svg { color: var(--pf-blue); flex-shrink: 0; }

.pf-card-body { padding: 1.75rem 2rem; }

/* ════════════════════════════════════════════════
   PRICE CHIPS (edit page header)
════════════════════════════════════════════════ */
.pf-price-chips {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pf-chip-green { background: var(--pf-green-dim); color: var(--pf-green); border: 1px solid rgba(5,150,105,.2); }
.pf-chip-blue  { background: var(--pf-blue-dim);  color: var(--pf-blue);  border: 1px solid rgba(37,99,176,.2); }
.pf-chip-type  { background: var(--pf-bg); color: var(--pf-text-2); border: 1px solid var(--pf-border); }

/* ════════════════════════════════════════════════
   PRODUCT FORM OVERRIDES
   Targets every standard control inside <ProductForm>
   so numbers and inputs look clean without touching
   the ProductForm component itself.
════════════════════════════════════════════════ */

/* ── Section dividers inside the form ── */
.pf-card-body .form-section-title,
.pf-card-body h5,
.pf-card-body h6 {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pf-text-3);
    margin: 1.5rem 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--pf-border-2);
}

/* ── Labels ── */
.pf-card-body .form-label,
.pf-card-body label {
    font-size: .8rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 5px;
    display: block;
}

/* ── Text / date / number inputs ── */
.pf-card-body .form-control,
.pf-card-body .form-select,
.pf-card-body input[type="text"],
.pf-card-body input[type="number"],
.pf-card-body input[type="email"],
.pf-card-body input[type="date"],
.pf-card-body select,
.pf-card-body textarea {
    height: 40px;
    padding: 0 12px;
    background: var(--pf-bg);
    border: 1.5px solid var(--pf-border);
    border-radius: 9px;
    font-size: .875rem;
    color: var(--pf-text-1);
    font-family: inherit;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--pf-t), box-shadow var(--pf-t), background var(--pf-t);
    -webkit-appearance: none;
    appearance: none;
}

.pf-card-body textarea {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.5;
}

.pf-card-body .form-control:focus,
.pf-card-body .form-select:focus,
.pf-card-body input[type="text"]:focus,
.pf-card-body input[type="number"]:focus,
.pf-card-body input[type="date"]:focus,
.pf-card-body select:focus {
    border-color: var(--pf-blue);
    background: var(--pf-surface);
    box-shadow: 0 0 0 3px var(--pf-blue-dim);
}

/* Remove browser spinners on number inputs — keeps UI clean */
.pf-card-body input[type="number"]::-webkit-inner-spin-button,
.pf-card-body input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.pf-card-body input[type="number"] { -moz-appearance: textfield; text-align: right; }

/* Placeholder color */
.pf-card-body input::placeholder,
.pf-card-body textarea::placeholder { color: #c0c9d8; }

/* Select chevron */
.pf-card-body .form-select,
.pf-card-body select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 32px;
    cursor: pointer;
}

/* ── Radio / Checkbox (product type toggle) ── */
.pf-card-body .form-check { display: flex; align-items: center; gap: 8px; }
.pf-card-body .form-check-input {
    width: 16px; height: 16px;
    border: 1.5px solid var(--pf-border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color var(--pf-t), background var(--pf-t);
    flex-shrink: 0;
    margin: 0;
}
.pf-card-body .form-check-input[type="radio"] { border-radius: 50%; }
.pf-card-body .form-check-input:checked {
    background-color: var(--pf-blue);
    border-color: var(--pf-blue);
}
.pf-card-body .form-check-label { font-size: .875rem; font-weight: 500; cursor: pointer; }

/* ── Input groups (currency prefix/suffix) ── */
.pf-card-body .input-group .input-group-text {
    background: var(--pf-bg);
    border: 1.5px solid var(--pf-border);
    border-right: none;
    border-radius: 9px 0 0 9px;
    color: var(--pf-text-3);
    font-size: .8rem;
    font-weight: 600;
    padding: 0 11px;
    height: 40px;
}

.pf-card-body .input-group .form-control:not(:first-child) {
    border-left: none;
    border-radius: 0 9px 9px 0;
}

.pf-card-body .input-group:focus-within .input-group-text {
    border-color: var(--pf-blue);
    color: var(--pf-blue);
}

/* ── Invalid state ── */
.pf-card-body .form-control.is-invalid,
.pf-card-body input.is-invalid { border-color: var(--pf-red); }
.pf-card-body .invalid-feedback {
    font-size: .75rem;
    color: var(--pf-red);
    margin-top: 4px;
}

/* ── Submit / Cancel buttons inside ProductForm ── */
.pf-card-body .btn,
.pf-card-body button[type="submit"],
.pf-card-body button[type="button"] {
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
    font-size: .875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background var(--pf-t), color var(--pf-t), transform var(--pf-t), box-shadow var(--pf-t), border-color var(--pf-t);
    white-space: nowrap;
    border: none;
}

.pf-card-body .btn-primary,
.pf-card-body button[type="submit"] {
    background: var(--pf-blue);
    color: #fff;
    box-shadow: 0 4px 14px var(--pf-blue-glow);
    font-size: .9375rem;
    font-weight: 800;
    min-height: 44px;
}
.pf-card-body .btn-primary:hover:not(:disabled),
.pf-card-body button[type="submit"]:hover:not(:disabled) {
    background: #1d50a0;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37,99,176,.38);
}
.pf-card-body .btn-primary:disabled,
.pf-card-body button[type="submit"]:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.pf-card-body .btn-outline-secondary {
    background: var(--pf-surface);
    color: var(--pf-text-2);
    border: 1.5px solid var(--pf-border);
}
.pf-card-body .btn-outline-secondary:hover { background: var(--pf-bg); color: var(--pf-text-1); }

/* ── Form grid layout ── */
.pf-card-body .row { margin: 0 -8px; }
.pf-card-body .row > [class*="col"] { padding: 0 8px; }
.pf-card-body .mb-3 { margin-bottom: 1rem !important; }

/* ── NUMBER DISPLAY — the core fix ──
   Format helpers output N3 for TND, N2 for others.
   For raw inputs, we strip trailing zeros on blur
   using the CSS below + the JS snippet in the comment. ── */

/*
 * JS to paste inside ProductForm (or app.js) to fix trailing zeros on blur:
 *
 * document.addEventListener('focusout', e => {
 *   if (e.target.type !== 'number') return;
 *   const v = parseFloat(e.target.value);
 *   if (!isNaN(v)) e.target.value = v.toString();
 * }, true);
 *
 * This makes "0.0000" display as "0" while the user is not editing.
 */

/* Responsive */
@media (max-width: 640px) {
    .pf-page { padding: 1rem 1rem 2.5rem; }
    .pf-card-body { padding: 1.25rem 1rem; }
    .pf-page-title { font-size: 1.1rem; }
    .pf-price-chips { margin-left: 0; }
}