/**
 * portfolio_widget.css
 * BEM namespace: .portfolio-widget
 */

.portfolio-widget {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--hairline);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.portfolio-widget__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text);
    font: 700 15px 'Inter Tight', 'Inter', sans-serif;
}

.portfolio-widget__title > span,
.portfolio-widget__edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.portfolio-widget__title i {
    color: var(--iris);
}

.portfolio-widget__edit {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--iris);
    font: 800 12px 'Inter Tight', 'Inter', sans-serif;
    cursor: pointer;
    transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.portfolio-widget__edit:hover {
    transform: scale(1.04);
    background: var(--iris-tint);
    border-color: color-mix(in srgb, var(--iris) 24%, var(--hairline));
}

.portfolio-widget__summary {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--surface-2);
}

.portfolio-widget__summary strong {
    color: var(--text);
    font: 850 18px 'Inter Tight', 'Inter', sans-serif;
}

.portfolio-widget__summary span {
    font: 800 12px 'JetBrains Mono', monospace;
}

.portfolio-widget__rows {
    display: grid;
    gap: 6px;
}

.portfolio-widget__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
}

.portfolio-widget__row:hover {
    background: var(--surface-2);
}

.portfolio-widget__identity,
.portfolio-widget__numbers {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.portfolio-widget__logo,
.portfolio-widget__logo-img,
.portfolio-widget__logo-fallback {
    width: 28px;
    height: 28px;
    border-radius: 999px;
}

.portfolio-widget__logo {
    display: grid;
    place-items: center;
}

.portfolio-widget__logo-img {
    object-fit: cover;
    border: 1px solid var(--hairline);
    background: var(--surface-2);
}

.portfolio-widget__logo-fallback {
    display: grid;
    place-items: center;
    background: var(--iris-tint);
    color: var(--iris);
    border: 1px solid color-mix(in srgb, var(--iris) 20%, transparent);
    font: 850 10px 'Inter Tight', 'Inter', sans-serif;
}

.portfolio-widget__identity strong,
.portfolio-widget__numbers strong {
    color: var(--text);
    font: 800 12px 'Inter Tight', 'Inter', sans-serif;
}

.portfolio-widget__identity small,
.portfolio-widget__numbers small,
.portfolio-widget__state {
    color: var(--text-3);
    font: 650 11px 'Inter', sans-serif;
}

.portfolio-widget__numbers {
    justify-items: end;
}

.portfolio-widget__numbers small {
    font-family: 'JetBrains Mono', monospace;
}

.portfolio-widget__pl--up {
    color: var(--green-2) !important;
}

.portfolio-widget__pl--down {
    color: var(--red) !important;
}

.portfolio-widget__form,
.portfolio-widget__edit-form {
    display: grid;
    gap: 6px;
}

.portfolio-widget__form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr) auto;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
}

.portfolio-widget__edit-form {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px 32px;
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
}

.portfolio-widget__form input,
.portfolio-widget__edit-form input {
    min-width: 0;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: 750 11px 'Inter', sans-serif;
}

.portfolio-widget__form button,
.portfolio-widget__edit-form button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--iris);
    font: 800 12px 'Inter Tight', 'Inter', sans-serif;
    cursor: pointer;
    transition: transform 0.14s ease, background 0.14s ease;
}

.portfolio-widget__form button:hover,
.portfolio-widget__edit-form button:hover {
    transform: scale(1.04);
    background: var(--iris-tint);
}

.portfolio-widget__edit-form button:last-child {
    color: var(--red);
}

@media (max-width: 760px) {
    .portfolio-widget__form,
    .portfolio-widget__edit-form {
        grid-template-columns: 1fr;
    }
}