/* The configurator look of the Rodly client (CompanyProfileSection.razor.css / PresetConfigurator.razor.css), shared by the
   company profile, preset and factory pages of the dashboard. Prefixes: cpc (company profiles) and pc (presets) stay as in the client. */
.cpc__container,
.pc {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--rd-line-strong);
    border-radius: 12px;
    background: #fff;
    font-size: 0.85rem;
    color: var(--rd-text-2);
}

.cpc__container-header,
.pc__list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cpc__body,
.pc__body {
    display: flex;
    gap: 0.75rem;
    min-height: 24rem;
}

.cpc__list,
.pc__list {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.cpc__list-actions,
.pc__list-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cpc__content,
.pc__content {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.cpc__item,
.pc__preset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--rd-line-strong);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .cpc__item:hover,
    .pc__preset:hover {
        border-color: rgba(37, 99, 235, 0.45);
    }

    .cpc__item.is-editing,
    .pc__preset.is-editing {
        border-color: var(--rd-blue-deep);
        box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12);
    }

.cpc__item-title,
.pc__preset-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.cpc__item-name,
.pc__preset-name {
    font-weight: 600;
    color: var(--rd-ink);
}

.cpc__heading,
.pc__heading {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rd-ink);
}

.cpc__muted,
.pc__muted {
    margin: 0;
    color: var(--rd-muted);
}

.pc__description {
    margin: 0;
    color: var(--rd-muted-2);
}

.cpc__legend,
.pc__legend {
    margin-top: 0.5rem;
    font-size: 0.78rem;
}

.cpc__tag,
.pc__tag {
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-size: 0.7rem;
    white-space: nowrap;
}

.cpc__tag--modified,
.pc__tag--modified {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.cpc__link,
.pc__link {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--rd-blue);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .cpc__link:hover:not(:disabled),
    .pc__link:hover:not(:disabled) {
        text-decoration: underline;
    }

    .cpc__link:disabled,
    .pc__link:disabled {
        opacity: 0.5;
        cursor: default;
    }

.pc__link--danger {
    color: #b91c1c;
    font-size: 1rem;
}

.cpc__toolbar,
.pc__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cpc__toolbar-title,
.pc__toolbar-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cpc__toolbar-actions,
.pc__toolbar-actions {
    display: flex;
    gap: 0.5rem;
}

.cpc__button,
.pc__button {
    border: 1px solid var(--rd-blue);
    background: var(--rd-blue);
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .cpc__button:hover:not(:disabled),
    .pc__button:hover:not(:disabled) {
        background: #1473d1;
    }

    .cpc__button:disabled,
    .pc__button:disabled {
        opacity: 0.5;
        cursor: default;
    }

.cpc__button--secondary,
.pc__button--secondary {
    background: #fff;
    color: var(--rd-blue);
}

    .cpc__button--secondary:hover:not(:disabled),
    .pc__button--secondary:hover:not(:disabled) {
        background: #eef6ff;
    }

.cpc__button--danger,
.pc__button--danger {
    border-color: var(--rd-error);
    color: var(--rd-error);
}

    .cpc__button--danger:hover:not(:disabled),
    .pc__button--danger:hover:not(:disabled) {
        background: #fef2f2;
    }

.cpc__message,
.pc__message {
    margin: 0.5rem 0;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}

    .cpc__message.is-error,
    .pc__message.is-error {
        background: rgba(185, 28, 28, 0.08);
        color: #b91c1c;
    }

.cpc__section,
.pc__section {
    margin: 1rem 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rd-muted);
}

.pc__subsection {
    margin: 0.9rem 0 0.4rem;
    font-weight: 600;
    color: var(--rd-ink);
}

    .pc__subsection:first-child {
        margin-top: 0.25rem;
    }

.cpc__card,
.pc__card {
    background: #fff;
    border: 1px solid var(--rd-line-strong);
    border-radius: 10px;
    padding: 12px;
}

.pc__card--table {
    padding: 4px 12px 12px;
    overflow-x: auto;
    margin-top: 16px;
}

.cpc__grid,
.pc__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.6rem 1rem;
}

.cpc__field,
.pc__field {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.2rem;
    min-width: 0;
}

    .cpc__field > span,
    .pc__field > span {
        font-weight: 500;
        color: #334155;
    }

    .cpc__field input,
    .pc__field input[type=number],
    .pc__field input[type=text],
    .pc__field select,
    .pc__table input[type=number],
    .pc__table input[type=text],
    .pc__table select {
        box-sizing: border-box;
        width: 100%;
        height: 2.25rem;
        padding: 4px 8px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        font: inherit;
        color: var(--rd-ink);
        background: #fff;
    }

        .cpc__field input.invalid,
        .pc__field input.invalid {
            border-color: var(--rd-error);
        }

    .cpc__field .validation-message,
    .pc__field .validation-message {
        color: #b91c1c;
        font-size: 0.78rem;
    }

.cpc__fieldset,
.pc__fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

    .cpc__fieldset:disabled input,
    .pc__fieldset:disabled input,
    .pc__fieldset:disabled select {
        background: var(--rd-surface-3);
        color: var(--rd-muted);
    }

.pc__pair {
    display: flex;
    gap: 0.4rem;
}

    .pc__pair > input {
        flex: 1 1 0;
        min-width: 0;
    }

.pc__pair--three > input {
    min-width: 3.2rem;
}

.pc__toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin-top: 0.6rem;
}

.pc__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
}

    .pc__toggle input {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--rd-blue);
        cursor: pointer;
    }

.pc__table {
    width: 100%;
    border-collapse: collapse;
}

    .pc__table th {
        padding: 8px 6px;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--rd-muted);
        border-bottom: 1px solid var(--rd-line-strong);
        white-space: nowrap;
    }

    .pc__table td {
        padding: 5px 6px;
        border-bottom: 1px solid var(--rd-surface-3);
        vertical-align: middle;
    }

    .pc__table tr.is-ignored td {
        color: #94a3b8;
    }

    .pc__table tr.is-default td:first-child {
        box-shadow: inset 3px 0 0 var(--rd-blue-deep);
    }

    .pc__table input[type=number],
    .pc__table input[type=text],
    .pc__table select {
        min-width: 3.5rem;
        padding: 3px 6px;
    }

        .pc__table input:disabled {
            background: var(--rd-surface-3);
            color: #94a3b8;
        }

    .pc__table input[type=checkbox] {
        width: 15px;
        height: 15px;
        accent-color: var(--rd-blue);
    }

.pc__cell-text {
    min-width: 9rem;
}

.pc__cell-checks {
    text-align: center;
    white-space: nowrap;
}

    .pc__cell-checks input + input {
        margin-left: 0.4rem;
    }

.pc__add {
    margin-top: 0.75rem;
}

@media (max-width: 900px) {
    .cpc__body,
    .pc__body {
        flex-direction: column;
    }

    .cpc__list,
    .pc__list {
        flex-basis: auto;
    }
}