/* ============================================================
   np- form system — shared, global form + page-shell vocabulary
   ------------------------------------------------------------
   Token-driven (yourspec-tokens.css). Promoted out of
   Pages/projects/Create.razor.css so every modernized form page
   (Create Project, Request Product, …) reuses one source of truth.
   Page-UNIQUE chrome (choice cards, template browser, RadzenHtmlEditor
   ::deep) stays in each page's scoped .razor.css.
   ============================================================ */

/* -- Page shell ----------------------------------------------- */
.np-create {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    color: var(--fg-1);
    font-family: var(--font-sans);
}

/* -- Page header ---------------------------------------------- */
.np-head {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}
.np-head__inner { padding: 24px 32px; }
.np-crumbs {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.np-crumbs a { color: var(--fg-3); text-decoration: none; cursor: pointer; }
.np-crumbs a:hover { color: var(--fg-brand); }
.np-crumbs .sep { margin: 0 8px; opacity: 0.5; }
.np-head h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 8px 0 0;
}
.np-head__lede {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--fg-2);
    max-width: 640px;
}

/* -- Step indicator ------------------------------------------- */
.np-steps { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.np-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-3);
}
.np-step__dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border-1);
    background: var(--bg-surface);
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700;
    color: var(--fg-3);
}
.np-step.is-active { color: var(--fg-1); }
.np-step.is-active .np-step__dot { background: var(--bg-brand); border-color: var(--bg-brand); color: #fff; }
.np-step.is-done .np-step__dot { background: var(--ys-green-50); border-color: var(--ys-green-100); color: var(--fg-brand); }
.np-step__line { width: 28px; height: 1px; background: var(--border-1); }

/* -- Buttons -------------------------------------------------- */
.np-btn {
    appearance: none;
    border: 1px solid var(--border-1);
    background: var(--bg-surface);
    color: var(--fg-1);
    padding: 0 16px;
    height: 38px;
    border-radius: var(--radius-2);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 120ms linear, color 120ms linear, background 120ms linear;
}
.np-btn:hover:not(:disabled) { border-color: var(--fg-2); }
.np-btn--primary { background: var(--bg-brand); color: #fff; border-color: var(--bg-brand); }
.np-btn--primary:hover:not(:disabled) { background: var(--ys-green-800); border-color: var(--ys-green-800); }
.np-btn--ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.np-btn--ghost:hover:not(:disabled) { background: var(--bg-2); border-color: transparent; }
.np-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.np-btn .rzi { font-size: 17px; line-height: 1; }

/* -- Form card ------------------------------------------------ */
.np-form-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 32px; display: flex; justify-content: center; }
/* Column for stacking multiple cards (info + form) in the centered area. */
.np-form-col { width: 100%; max-width: 720px; align-self: flex-start; display: flex; flex-direction: column; gap: 16px; }
.np-form-col .np-form-card { max-width: none; align-self: stretch; }

.np-form-card {
    width: 100%; max-width: 720px;
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-3);
    overflow: hidden;
    align-self: flex-start;
}
.np-form-card__head { padding: 18px 24px; border-bottom: 1px solid var(--border-1); background: var(--bg-2); }
.np-form-card__head h2 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.np-form-card__head p { margin: 4px 0 0; font-size: 12.5px; color: var(--fg-3); }
.np-form-card__body { padding: 24px; display: flex; flex-direction: column; gap: 22px; }
.np-form-card__foot {
    padding: 16px 24px; border-top: 1px solid var(--border-1); background: var(--bg-2);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* -- Fields --------------------------------------------------- */
.np-field { display: flex; flex-direction: column; gap: 7px; }
.np-field__label {
    font-family: var(--font-mono);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--fg-3);
    display: flex; align-items: center; gap: 6px;
}
.np-field__label .req { color: var(--ys-red); }
.np-field__hint { font-size: 11.5px; color: var(--fg-muted); margin-top: -2px; }
.np-field__error { font-size: 12px; color: var(--ys-red); margin-top: -1px; }

.np-input {
    width: 100%; box-sizing: border-box;
    height: 38px; padding: 0 12px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-2);
    font-family: var(--font-sans); font-size: 14px;
    color: var(--fg-1); background: var(--bg-surface);
    outline: none;
    transition: border-color 120ms linear, box-shadow 120ms linear;
}
.np-input::placeholder { color: var(--fg-muted); }
.np-input:focus { border-color: var(--fg-brand); box-shadow: var(--shadow-focus); }
.np-input--invalid, .np-input--invalid:focus { border-color: var(--ys-red); box-shadow: 0 0 0 3px rgba(138,31,31,0.18); }
.np-input__counter { align-self: flex-end; font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); }

.np-textarea {
    width: 100%; box-sizing: border-box;
    min-height: 88px; padding: 10px 12px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-2);
    font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
    color: var(--fg-1); background: var(--bg-surface);
    outline: none; resize: vertical;
    transition: border-color 120ms linear, box-shadow 120ms linear;
}
.np-textarea::placeholder { color: var(--fg-muted); }
.np-textarea:focus { border-color: var(--fg-brand); box-shadow: var(--shadow-focus); }

/* -- Radio cards (e.g. project visibility) -------------------- */
.np-visibility { display: grid; gap: 8px; }
.np-vis-option {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-1);
    border-radius: var(--radius-2);
    cursor: pointer;
    transition: border-color 120ms linear, background 120ms linear;
}
.np-vis-option:hover { border-color: var(--fg-2); }
.np-vis-option.is-selected { border-color: var(--fg-brand); background: var(--ys-green-50); }
.np-vis-option__radio {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    flex-shrink: 0; margin-top: 1px;
    display: grid; place-items: center;
    transition: border-color 120ms linear;
}
.np-vis-option.is-selected .np-vis-option__radio { border-color: var(--fg-brand); }
.np-vis-option.is-selected .np-vis-option__radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--fg-brand); }
.np-vis-option__body { min-width: 0; }
.np-vis-option__title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.np-vis-option__title .rzi { font-size: 16px; color: var(--fg-3); }
.np-vis-option.is-selected .np-vis-option__title .rzi { color: var(--fg-brand); }
.np-vis-option__desc { font-size: 12px; color: var(--fg-3); line-height: 1.4; margin-top: 2px; }

/* -- Segmented control (e.g. units) --------------------------- */
.np-segment { display: inline-flex; padding: 3px; gap: 3px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-2); width: max-content; }
.np-segment__btn {
    appearance: none; border: 0; background: transparent;
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    color: var(--fg-2); cursor: pointer;
    padding: 7px 16px; border-radius: var(--radius-1);
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 120ms linear, color 120ms linear, box-shadow 120ms linear;
}
.np-segment__btn .rzi { font-size: 16px; }
.np-segment__btn.is-active { background: var(--bg-surface); color: var(--fg-1); box-shadow: var(--shadow-1); }

/* -- Prose (explanatory copy / lists inside cards) ------------ */
.np-prose { font-size: 13px; line-height: 1.6; color: var(--fg-2); }
.np-prose p { margin: 0 0 8px; }
.np-prose p:last-child { margin-bottom: 0; }
.np-prose strong { color: var(--fg-1); font-weight: 600; }
.np-prose ul { margin: 6px 0 12px; padding-left: 18px; }
.np-prose ul:last-child { margin-bottom: 0; }
.np-prose li { margin-bottom: 5px; }
.np-prose li::marker { color: var(--fg-brand); }

/* -- Dialog content ------------------------------------------- */
/* Token-styled body for DialogService dialogs (which render in a global host,
   outside component CSS scope — so these are global, not scoped). Pair with
   `new DialogOptions { Width = "480px" }` and `np-btn` action buttons. */
.np-dialog { display: flex; flex-direction: column; gap: 18px; font-family: var(--font-sans); }
.np-dialog p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.np-dialog p strong { color: var(--fg-1); }
.np-dialog a { color: var(--fg-brand); text-decoration: none; font-weight: 500; }
.np-dialog a:hover { text-decoration: underline; }
.np-dialog__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* -- Inline spinner (button) ---------------------------------- */
.np-spinner-sm {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
    animation: np-spin 0.7s linear infinite; display: inline-block;
}

@keyframes np-spin { to { transform: rotate(360deg); } }