/*
 * Controles visuais compartilhados pelos cadastros de parâmetros.
 * O projeto usa o tema visual do Syncfusion, mas não carrega o CSS completo
 * do Bootstrap. Por isso, as classes form-control e btn são definidas aqui
 * somente dentro das páginas deste módulo.
 */

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) :is(.form-control, .form-select) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--eciso-border, #c8d5e0);
    border-radius: 10px;
    color: var(--eciso-text, #173c5b);
    background: var(--eciso-panel-bg, #fff);
    box-sizing: border-box;
    font: inherit;
    line-height: 1.35;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) :is(.form-control, .form-select):focus {
    border-color: #16828a !important;
    box-shadow: 0 0 0 4px rgba(22, 130, 138, .13);
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page
) textarea.form-control {
    min-height: 112px;
    resize: vertical;
}

.param-cadastro-page .param-orientation-grid textarea.form-control {
    min-height: 150px;
}

.audit-model-page textarea.form-control {
    min-height: 180px;
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) :is(.form-control, .form-select).invalid {
    border-color: #c93838 !important;
    box-shadow: 0 0 0 3px rgba(201, 56, 56, .11);
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) :is(.form-control, .form-select)::placeholder {
    color: var(--eciso-muted, #758597);
    opacity: 1;
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) :is(input[type="checkbox"], input[type="radio"]) {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    accent-color: #147b83;
}

:is(
    .param-page,
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 39px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    box-sizing: border-box;
    font: inherit;
    font-size: .86rem;
    font-weight: 750;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}

:is(
    .param-page,
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) .btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(25, 55, 78, .13);
}

:is(
    .param-page,
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) .btn:disabled {
    opacity: .58;
    cursor: not-allowed;
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) :is(.btn-primary, .btn-success) {
    color: #fff;
    background: #137780;
    border-color: #137780;
}

:is(
    .param-page,
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) .btn-light {
    color: #173c5b;
    background: #fff;
    border-color: rgba(255, 255, 255, .75);
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) :is(.btn-outline-secondary, .btn-outline-primary, .btn-outline-success, .btn-outline-warning, .btn-outline-danger) {
    color: #2f526c;
    background: var(--eciso-panel-bg, #fff);
    border-color: #b8c8d5;
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) .btn-outline-danger {
    color: #a42f38;
    border-color: #e1a9ad;
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) .btn-outline-warning {
    color: #805711;
    border-color: #dfc17f;
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) .btn-sm {
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 7px;
    font-size: .78rem;
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page
) .btn-close {
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #c5d2dd;
    border-radius: 9px;
    color: #456176;
    background: var(--eciso-panel-bg, #fff);
    cursor: pointer;
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page
) .btn-close::before {
    content: "×";
    font-size: 1.25rem;
    line-height: 1;
}

:is(
    .param-form-grid,
    .param-orientation-grid,
    .period-form-grid,
    .kpi-filter-grid,
    .kpi-form-grid,
    .kpi-definition-grid,
    .metric-filter-grid,
    .metric-form-grid,
    .metric-definition-grid,
    .audit-model-fields
) > * {
    min-width: 0;
}

:is(
    .param-cadastro-page,
    .period-page,
    .kpi-page,
    .metric-page,
    .audit-model-page
) .validation-message {
    display: block;
    margin-top: 5px;
    color: #b62e37;
    font-size: .78rem;
}

@media (max-width: 720px) {
    :is(
        .param-page,
        .param-cadastro-page,
        .period-page,
        .kpi-page,
        .metric-page,
        .audit-model-page
    ) .btn {
        min-height: 42px;
    }
}