/* Shared chrome for the four Edit*ProfileModal right-slide panels.
   Personal (EditProfileModal)  uses .form-*, .field-*, .panel-*, .heading-*
   Founder (EditProjectProfileModal) uses .fp-*
   Investor (EditInvestorProfileModal) uses .inv-*
   Partner (EditPartnerProfileModal) uses .pp-*

   Bucket B of the Xablu.Blazor v3.7 systemic audit: consolidates ~20 rule
   blocks that were duplicated across all four scoped .razor.css files into
   single combined-selector rules here. Loaded after 3beez-overrides.css
   and before the scoped CSS bundle in App.razor, unlayered so source order
   decides ties against the library. Each modal's scoped .razor.css keeps
   only the modal-specific rules (rounds table, check-size row, socials
   grid, etc.).
*/

/* ── Panel shell: rounded-left corners (FigmaMake parity) ── */
.edit-investor-panel,
.edit-partner-panel,
.edit-project-panel,
.edit-profile-panel {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    overflow: hidden;
}

@media (max-width: 767px) {
    .edit-investor-panel,
    .edit-partner-panel,
    .edit-project-panel,
    .edit-profile-panel {
        border-radius: 0;
    }
}

/* ── Panel body: 40px gap between sections ── */
.fp-body,
.inv-body,
.pp-body,
.panel-body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0;
}

/* ── Header row ── */
.fp-header,
.inv-header,
.pp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.fp-header-title,
.inv-header-title,
.pp-header-title,
.panel-header-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* ── Heading (40px serif, "Edit ...") + italic gold accent ── */
.fp-heading,
.inv-heading,
.pp-heading,
.heading-serif {
    font-family: var(--x-font-heading);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: var(--x-color-foreground);
}

.fp-heading-gold,
.inv-heading-gold,
.pp-heading-gold,
.heading-accent {
    color: var(--x-color-primary);
    font-style: italic;
}

.fp-completion,
.inv-completion,
.pp-completion,
.completion-text {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    color: rgba(142, 148, 155, 1);
    white-space: nowrap;
}

/* ── Form sections (label + field pair, 12px gap) ── */
.fp-section,
.inv-section,
.pp-section,
.form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fp-section--narrow,
.inv-section--narrow,
.pp-section--narrow,
.form-section--narrow {
    max-width: 440px;
}

.fp-section--picker,
.inv-section--picker,
.pp-section--picker {
    max-width: 322px;
}

/* ── Labels ── */
.fp-label,
.inv-label,
.pp-label,
.field-label {
    font-family: var(--x-font-body);
    font-size: var(--x-text-base, 16px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--x-color-foreground);
    margin: 0;
}

.fp-label-sm,
.inv-label-sm,
.pp-label-sm,
.field-label-sm {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--x-color-foreground);
    margin: 0;
}

.fp-hint,
.inv-hint,
.pp-hint,
.field-hint {
    font-family: var(--x-font-body);
    font-size: var(--x-text-sm, 14px);
    font-weight: 400;
    color: var(--x-color-muted-foreground);
    line-height: 1.4;
    margin: 0;
}

/* ── Chip container (flex wrap, 12px gap) ── */
.fp-chip-wrap,
.inv-chip-wrap,
.pp-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Footer (right-aligned, 24px gap) ── */
.fp-footer,
.inv-footer,
.pp-footer,
.panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    width: 100%;
}

/* ── Footer buttons: 150×46 pill ── */
.fp-btn-cancel,
.inv-btn-cancel,
.pp-btn-cancel,
.btn-cancel {
    min-width: 150px;
    height: 46px;
}

.fp-btn-save,
.inv-btn-save,
.pp-btn-save,
.btn-save {
    min-width: 150px;
    height: 46px;
    --x-button-bg: var(--x-color-primary);
    --x-button-hover-bg: var(--x-color-primary-hover);
    --x-button-color: #ffffff;
}

/* Error message ("not enough space" state) */
.fp-error,
.inv-error,
.pp-error {
    margin-top: auto;
}

/* ── XTextfield pill inputs: Figma-spec height + border ────────────────────
   Specificity 0,3,0 (.panel .x-textfield .x-textfield-input) beats the
   Xablu library default 0,2,0, so these win regardless of bundle load order.
   border: shorthand sets width+style+color together, preventing library
   border-style from leaking through a border-color-only override. */
.edit-profile-panel .x-textfield .x-textfield-input,
.edit-investor-panel .x-textfield .x-textfield-input,
.edit-project-panel .x-textfield .x-textfield-input,
.edit-partner-panel .x-textfield .x-textfield-input {
    height: 46px;
    border-radius: 100px;
    border: 1px solid var(--x-color-border);
    padding: 0 16px;
}

@media (max-width: 767px) {
    .edit-profile-panel .x-textfield .x-textfield-input,
    .edit-investor-panel .x-textfield .x-textfield-input,
    .edit-project-panel .x-textfield .x-textfield-input,
    .edit-partner-panel .x-textfield .x-textfield-input {
        height: 40px;
        padding: 0 12px;
    }
}

/* ── Currency inputs: padding-left to clear $ symbol ────────────────────────
   Specificity 0,4,0 (.panel .currency-input-wrapper .x-textfield .x-textfield-input)
   beats the 0,3,0 baseline rule above so padding-left wins. */
.edit-profile-panel .currency-input-wrapper .x-textfield .x-textfield-input,
.edit-investor-panel .currency-input-wrapper .x-textfield .x-textfield-input,
.edit-project-panel .currency-input-wrapper .x-textfield .x-textfield-input,
.edit-partner-panel .currency-input-wrapper .x-textfield .x-textfield-input {
    padding-left: 34px;
}

/* ── Focus ring: outline survives overflow:hidden ─────────────────────────────
   Panel shells clip child box-shadow (overflow:hidden for rounded corners).
   CSS outline is not affected by overflow:hidden and automatically follows
   the input's own border-radius:100px in modern browsers.
   Specificity 0,4,0 matches the library focus rule; outline is a separate
   property so it layers on top of the library's border-color + box-shadow. */
.edit-profile-panel .x-textfield-container:focus-within .x-textfield-input,
.edit-investor-panel .x-textfield-container:focus-within .x-textfield-input,
.edit-project-panel .x-textfield-container:focus-within .x-textfield-input,
.edit-partner-panel .x-textfield-container:focus-within .x-textfield-input {
    outline: 2px solid var(--x-color-primary);
    outline-offset: 2px;
}