/*
 * Reusable frontend components.
 */

.fe-card {
    padding: clamp(16px, 1.7vw, 24px);
    border-radius: var(--fe-radius-lg);
    background: var(--fe-surface);
    border: 1px solid var(--fe-border);
    box-shadow: var(--fe-shadow-soft);
    color: var(--fe-text);
}

.fe-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fe-space-3);
    margin-bottom: var(--fe-space-4);
}

.fe-card__header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fe-space-2);
}

.fe-context-help {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 50%;
}

.fe-context-help .material-symbols-outlined {
    font-size: 19px;
}

.fe-card__title {
    margin: 0;
    font-size: 1.05rem;
}

.fe-card__description {
    margin: 4px 0 0;
    color: var(--fe-text-muted);
    font-size: .78rem;
}

.fe-equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--fe-space-4);
    align-items: stretch;
}

.fe-equipment-grid > .fe-card {
    min-width: 0;
    width: 100%;
}

.fe-equipment-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fe-equipment-card .fe-card__header > div {
    min-width: 0;
}

.fe-equipment-card .fe-equipment-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: auto;
}

.fe-equipment-card .fe-equipment-card__actions .fe-button {
    width: 100%;
    min-width: 0;
}

.fe-equipment-card .fe-equipment-card__actions .fe-button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.fe-equipment-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--fe-space-3);
}

.fe-equipment-card--compact {
    gap: 10px;
    padding: 14px;
}

.fe-equipment-card--compact .fe-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 0;
}

.fe-equipment-card--compact .fe-card__title,
.fe-equipment-card--compact .fe-card__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fe-equipment-card--compact .fe-card__title {
    font-size: .86rem;
}

.fe-equipment-card--compact .fe-card__description {
    font-size: .66rem;
}

.fe-equipment-card__compact-facts {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.fe-equipment-card__compact-facts > span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fe-text-muted);
    font-size: .7rem;
}

.fe-equipment-card__compact-facts > span > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fe-equipment-card__compact-facts .material-symbols-outlined {
    flex: 0 0 auto;
    color: var(--fe-primary);
    font-size: .9rem;
}

.fe-equipment-card__compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 2px;
    border-top: 1px solid var(--fe-border);
}

.fe-equipment-card__compact-actions .fe-button--icon {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
}

.fe-equipment-card__compact-actions .material-symbols-outlined {
    font-size: 1rem;
}

@media (max-width: 520px) {
    .fe-equipment-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 390px) {
    .fe-equipment-grid--compact {
        grid-template-columns: minmax(0, 1fr);
    }
}

.fe-monitor-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: var(--fe-space-3);
}

.fe-monitor-catalog-card {
    position: relative;
    min-width: 0;
    display: grid;
    gap: 10px;
    padding: 14px 52px 14px 16px;
}

.fe-monitor-catalog-card .fe-card__header {
    min-width: 0;
    display: block;
    margin: 0;
}

.fe-monitor-catalog-card .fe-card__title,
.fe-monitor-catalog-card .fe-card__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fe-monitor-catalog-card .fe-card__title {
    font-size: .88rem;
}

.fe-monitor-catalog-card .fe-card__description {
    font-size: .68rem;
}

.fe-monitor-catalog-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.fe-monitor-catalog-card__mode {
    color: var(--fe-text-muted);
    font-size: .66rem;
    font-weight: var(--fe-weight-semibold);
}

.fe-monitor-catalog-card__open {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--fe-border);
    border-radius: 50%;
    background: var(--fe-surface);
    box-shadow: var(--fe-shadow-soft);
    color: var(--fe-primary);
}

.fe-monitor-catalog-card__open .material-symbols-outlined {
    font-size: 1rem;
}

.fe-compact-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--fe-space-3);
}

.fe-compact-card-grid > .fe-card,
.fe-card--compact {
    min-width: 0;
    padding: 14px 16px;
}

.fe-compact-card-grid > .fe-card.fe-section {
    margin-top: 0;
}

.fe-compact-card-grid > .fe-card .fe-card__header,
.fe-card--compact .fe-card__header {
    margin-bottom: 10px;
}

.fe-compact-card-grid > .fe-card .fe-card__title,
.fe-card--compact .fe-card__title {
    font-size: .88rem;
}

.fe-compact-card-grid > .fe-card .fe-card__description,
.fe-card--compact .fe-card__description {
    font-size: .68rem;
}

.fe-customer-brand-card {
    padding-block: 14px;
}

.fe-customer-brand-card .fe-card__header {
    align-items: center;
    margin-bottom: 0;
}

.fe-customer-home-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.fe-report-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--fe-space-3);
    align-items: stretch;
}

.fe-report-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-md);
    background: var(--fe-surface);
    box-shadow: var(--fe-shadow-soft);
}

.fe-report-card h3 {
    margin: 0;
    overflow: hidden;
    color: var(--fe-text);
    font-size: .86rem;
    font-weight: var(--fe-weight-semibold);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fe-report-card__scope {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--fe-radius-sm);
    background: var(--fe-surface-inset);
    box-shadow: var(--fe-shadow-inset);
    font-size: .68rem;
}

.fe-report-card__scope span {
    color: var(--fe-text-muted);
}

.fe-report-card__scope strong {
    overflow-wrap: anywhere;
    color: var(--fe-text);
    font-weight: var(--fe-weight-semibold);
    text-align: right;
}

.fe-report-card p {
    margin: 0;
    color: var(--fe-text-muted);
    font-size: .72rem;
    line-height: 1.45;
}

.fe-report-card__action {
    display: flex;
    margin-top: auto;
    padding-top: 2px;
}

.fe-report-card__action .fe-button {
    min-height: 34px;
    padding: 6px 12px;
    font-size: .7rem;
}

.fe-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fe-space-2);
    padding: 8px 14px;
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-pill);
    background: var(--fe-surface);
    box-shadow: var(--fe-shadow-soft);
    color: var(--fe-text);
    font-size: .78rem;
    font-weight: var(--fe-weight-semibold);
    cursor: pointer;
}

.fe-button:hover {
    border-color: var(--fe-border-strong);
    color: var(--fe-primary);
}

.fe-button--primary {
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--fe-brand-primary) 13%, var(--fe-surface)),
            color-mix(in srgb, var(--fe-brand-primary) 7%, var(--fe-surface))
        );
    border-color: color-mix(in srgb, var(--fe-brand-primary) 24%, var(--fe-border));
    color: var(--fe-primary);
    box-shadow: var(--fe-shadow-soft);
}

.fe-button--primary:hover {
    border-color: color-mix(in srgb, var(--fe-brand-primary) 34%, var(--fe-border));
    color: var(--fe-primary-hover);
    filter: none;
}

.fe-button--icon {
    width: 38px;
    padding: 0;
}

.fe-chip {
    --fe-chip-bg: var(--fe-primary-soft);
    --fe-chip-color: var(--fe-primary);

    min-height: 28px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    vertical-align: middle;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--fe-chip-color) 24%, transparent);
    border-radius: var(--fe-radius-pill);
    background: var(--fe-chip-bg);
    color: var(--fe-chip-color);
    font-size: .72rem;
    font-weight: var(--fe-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.fe-chip *,
.fe-chip .material-symbols-outlined {
    color: inherit !important;
}

.fe-chip .material-symbols-outlined {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    line-height: 1;
}

.fe-chip--success {
    --fe-chip-bg: var(--fe-success-soft);
    --fe-chip-color: var(--fe-success);
}

.fe-chip--warning {
    --fe-chip-bg: var(--fe-warning-soft);
    --fe-chip-color: var(--fe-warning);
}

.fe-chip--danger {
    --fe-chip-bg: var(--fe-danger-soft);
    --fe-chip-color: var(--fe-danger);
}

.fe-chip--neutral {
    --fe-chip-bg: var(--fe-neutral-soft);
    --fe-chip-color: var(--fe-text-muted);
}

.fe-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--fe-space-4);
}

.fe-tracking-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
    .fe-tracking-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .fe-tracking-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.fe-kpi {
    position: relative;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 18px;
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-lg);
    background: var(--fe-surface);
    box-shadow: var(--fe-shadow-inset);
}

.fe-kpi > .fe-context-help {
    position: absolute;
    top: 12px;
    right: 12px;
}

.fe-kpi--with-help {
    padding-right: 56px;
}

.fe-kpi__label,
.fe-kpi__meta {
    color: var(--fe-text-muted);
    font-size: .7rem;
    font-weight: var(--fe-weight-semibold);
}

.fe-kpi__value {
    display: block;
    margin: 6px 0 3px;
    color: var(--fe-text);
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    line-height: 1;
}

.fe-list {
    display: grid;
    gap: var(--fe-space-2);
}

.fe-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fe-space-3);
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--fe-radius-md);
    background: var(--fe-surface);
    box-shadow: var(--fe-shadow-inset);
}

.fe-list__item > * {
    min-width: 0;
}

.fe-list__item > strong:last-child {
    text-align: right;
    overflow-wrap: anywhere;
}

.fe-empty {
    display: grid;
    place-items: center;
    min-height: 160px;
    padding: var(--fe-space-5);
    border: 1px dashed var(--fe-border-strong);
    border-radius: var(--fe-radius-lg);
    color: var(--fe-text-muted);
    text-align: center;
}


.fe-kpi__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-md);
    background: var(--fe-surface);
    box-shadow: var(--fe-shadow-soft);
    color: var(--fe-primary);
}

.fe-kpi__icon .material-symbols-outlined {
    font-size: 20px;
}


/* Alert module components */
.fe-note {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-md);
    background: color-mix(in srgb, var(--fe-primary) 4%, var(--fe-surface));
    box-shadow: var(--fe-shadow-inset);
    color: var(--fe-text-muted);
    font-size: var(--fe-type-sm);
}

.fe-note__label {
    color: var(--fe-primary);
    font-size: var(--fe-type-xs);
    font-weight: var(--fe-weight-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fe-alert {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-md);
    background: var(--fe-surface);
    box-shadow: var(--fe-shadow-soft);
}

.fe-alert--danger {
    border-color: color-mix(in srgb, var(--fe-danger) 28%, var(--fe-border));
    background: color-mix(in srgb, var(--fe-danger) 7%, var(--fe-surface));
    color: var(--fe-danger);
}

.fe-alert--warning {
    border-color: color-mix(in srgb, var(--fe-warning) 28%, var(--fe-border));
    background: color-mix(in srgb, var(--fe-warning) 7%, var(--fe-surface));
    color: var(--fe-warning);
}

.fe-code-block {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-md);
    background: var(--fe-surface-recessed);
    box-shadow: var(--fe-shadow-inset);
    color: var(--fe-text-soft);
    font-family: var(--fe-font-mono);
    font-size: .76rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fe-danger-zone {
    border-color: color-mix(in srgb, var(--fe-danger) 22%, var(--fe-border));
    background: color-mix(in srgb, var(--fe-danger) 4%, var(--fe-surface));
}

.fe-button--danger {
    border-color: color-mix(in srgb, var(--fe-danger) 26%, var(--fe-border));
    background: var(--fe-danger-soft);
    color: var(--fe-danger);
}

.fe-button--danger:hover {
    border-color: color-mix(in srgb, var(--fe-danger) 36%, var(--fe-border));
    color: color-mix(in srgb, var(--fe-danger) 85%, #5b0e18);
}


/* API token components */
.fe-secret-panel {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--fe-warning) 28%, var(--fe-border));
    border-radius: var(--fe-radius-lg);
    background: color-mix(in srgb, var(--fe-warning) 6%, var(--fe-surface));
    box-shadow: var(--fe-shadow-soft);
}

.fe-secret-panel__value {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-md);
    background: var(--fe-surface-recessed);
    box-shadow: var(--fe-shadow-inset);
    color: var(--fe-text);
    font-family: var(--fe-font-mono);
    font-size: .8rem;
    line-height: 1.5;
    user-select: all;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fe-security-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--fe-text-muted);
    font-size: var(--fe-type-sm);
}

.fe-security-hint .material-symbols-outlined {
    color: var(--fe-warning);
    flex: 0 0 auto;
}


/* Command module components */
.fe-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--fe-space-3);
}

.fe-choice-button {
    display: grid;
    gap: 6px;
    min-height: 112px;
    padding: 14px 16px;
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-md);
    background: var(--fe-surface);
    box-shadow: var(--fe-shadow-soft);
    color: var(--fe-text-soft);
    text-align: left;
    cursor: pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.fe-choice-button:hover {
    transform: translateY(-1px);
    border-color: var(--fe-border-strong);
}

.fe-choice-button.is-active {
    border-color: color-mix(in srgb, var(--fe-primary) 28%, var(--fe-border));
    background: color-mix(in srgb, var(--fe-primary) 7%, var(--fe-surface));
    box-shadow: var(--fe-shadow-inset);
    color: var(--fe-primary);
}

.fe-choice-button__label {
    color: var(--fe-primary);
    font-size: var(--fe-type-xs);
    font-weight: var(--fe-weight-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fe-choice-button__description {
    color: var(--fe-text-muted);
    font-size: var(--fe-type-sm);
    line-height: 1.45;
}

.fe-detail-table th {
    width: 180px;
    color: var(--fe-text-muted);
    font-weight: var(--fe-weight-medium);
    white-space: nowrap;
}

.fe-detail-table td {
    color: var(--fe-text-soft);
}

.fe-queue-status {
    min-width: 96px;
    justify-content: center;
}

.fe-health-badge {
    min-width: 108px;
    justify-content: center;
}


/* Command target module */
.fe-endpoint-value {
    display: inline-block;
    max-width: 100%;
    color: var(--fe-text-soft);
    font-family: var(--fe-font-mono);
    font-size: .78rem;
    overflow-wrap: anywhere;
}

.fe-target-status {
    min-width: 82px;
    justify-content: center;
}

.fe-transport-fields {
    display: grid;
    gap: var(--fe-space-4);
}

.fe-transport-fields[hidden] {
    display: none !important;
}


/* Company commercial module */
.fe-commercial-plan {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-lg);
    background: var(--fe-surface);
    box-shadow: var(--fe-shadow-soft);
}

.fe-commercial-plan__name {
    color: var(--fe-primary);
    font-size: var(--fe-type-xl);
    font-weight: var(--fe-weight-semibold);
}

.fe-commercial-plan__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fe-progress {
    display: grid;
    gap: 8px;
}

.fe-progress__track {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: var(--fe-radius-pill);
    background: var(--fe-surface-recessed);
    box-shadow: var(--fe-shadow-inset);
}

.fe-progress__bar {
    width: var(--fe-progress-value, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--fe-brand-primary) 76%, white),
        var(--fe-brand-primary)
    );
}

.fe-progress__bar--warning {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--fe-warning) 70%, white),
        var(--fe-warning)
    );
}

.fe-progress__bar--danger {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--fe-danger) 70%, white),
        var(--fe-danger)
    );
}

.fe-progress__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--fe-space-3);
    color: var(--fe-text-muted);
    font-size: var(--fe-type-sm);
}

.fe-addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--fe-space-4);
}

.fe-addon-card {
    display: grid;
    gap: 14px;
    min-height: 100%;
    padding: 18px;
    border: 1px solid var(--fe-border);
    border-radius: var(--fe-radius-lg);
    background: var(--fe-surface);
    box-shadow: var(--fe-shadow-soft);
}

.fe-addon-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--fe-space-3);
}

.fe-addon-card__title {
    margin: 0;
    color: var(--fe-text);
    font-size: var(--fe-type-lg);
    font-weight: var(--fe-weight-medium);
}

.fe-addon-card__description {
    margin: 4px 0 0;
    color: var(--fe-text-muted);
    font-size: var(--fe-type-sm);
    line-height: 1.45;
}

.fe-addon-card__price {
    color: var(--fe-primary);
    font-size: 1.35rem;
    font-weight: var(--fe-weight-semibold);
}

.fe-addon-card__price small {
    color: var(--fe-text-muted);
    font-size: var(--fe-type-xs);
    font-weight: var(--fe-weight-regular);
}

.fe-addon-card__meta {
    display: grid;
    gap: 8px;
}

.fe-addon-card__meta-row {
    display: flex;
    justify-content: space-between;
    gap: var(--fe-space-3);
    color: var(--fe-text-muted);
    font-size: var(--fe-type-sm);
}

.fe-addon-card__meta-row strong {
    color: var(--fe-text-soft);
    font-weight: var(--fe-weight-medium);
    text-align: right;
}

.fe-addon-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fe-space-2);
    margin-top: auto;
}

.fe-quantity-control {
    width: 84px;
    min-width: 84px;
}

.fe-commercial-status {
    min-width: 92px;
    justify-content: center;
}

.fe-protocol-communication-page .fe-page-header > div:first-child {
    min-width: 0;
}

.fe-protocol-communication-page .fe-page-header__title,
.fe-protocol-communication-page .fe-kpi__value {
    overflow-wrap: anywhere;
}

.fe-protocol-communication-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fe-protocol-communication-summary .fe-kpi__value {
    font-size: clamp(1.05rem, 1.35vw, 1.5rem);
    line-height: 1.18;
}

.fe-protocol-communication-summary .fe-kpi__hint {
    margin-top: 8px;
    color: var(--fe-text-muted);
    font-size: var(--fe-type-xs);
    line-height: 1.35;
}

.fe-protocol-communication-actions {
    gap: var(--fe-space-3);
}

@media (max-width: 1100px) {
    .fe-protocol-communication-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .fe-protocol-communication-summary {
        grid-template-columns: minmax(0, 1fr);
    }
}