@use '../globals' as *;

.ipz-languages-table {
    .ipz-col-flag {
        width: 60px;
        text-align: center;
    }

    td.ipz-col-flag {
        font-size: 24px;
    }

    .ipz-col-name {
        width: auto;
        min-width: 200px;

        strong {
            display: block;
        }

        .ipz-native-name {
            font-size: 12px;
        }
    }

    .ipz-col-code {
        width: 80px;
        font-family: monospace;
    }

    .ipz-col-locale {
        width: 100px;
        font-family: monospace;
    }

    .ipz-col-direction {
        width: 100px;
    }

    .ipz-col-status {
        width: 80px;
        text-align: center;
    }

    .ipz-col-actions {
        width: 250px;
        text-align: right;
    }
}

.ipz-direction {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: $border-radius-sm;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    &.ipz-direction-ltr {
        background: rgba($info-color, 0.1);
        color: $info-color;
    }

    &.ipz-direction-rtl {
        background: rgba($warning-color, 0.1);
        color: darken($warning-color, 10%);
    }
}

.ipz-actions-group {
    display: flex;
    gap: $spacing-sm;
    justify-content: flex-end;
    align-items: center;
}

.ipz-language-form {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
}

// ---------------------------------------------------------------------------
// Deletion-impact modal (deleteLanguage() -> showDeletionImpactModal())
// ---------------------------------------------------------------------------

.ipz-delete-impact {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;

    &__meta {
        margin: 0;
        padding: 0 0 0 $spacing-lg;
        list-style: disc;
        color: $text-light;
        font-size: 13px;
    }

    &__note {
        margin: 0;
        font-size: 13px;
        color: $text-light;
    }

    &__purge-note {
        margin: 0;
        padding: $spacing-sm $spacing-md;
        border-radius: $border-radius-sm;
        background: rgba($warning-color, 0.1);
        color: darken($warning-color, 15%);
        font-size: 13px;
    }
}

.ipz-delete-impact__confirm {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
    padding: $spacing-md;
    border: 1px solid rgba($error-color, 0.3);
    border-radius: $border-radius-sm;
    background: rgba($error-color, 0.05);
}

.ipz-delete-impact__warning {
    margin: 0;
    font-weight: 600;
    color: darken($error-color, 10%);
    font-size: 13px;
}

.ipz-delete-impact__confirm-label {
    font-size: 12px;
    font-weight: 600;
}

.ipz-delete-impact__confirm-input {
    width: 100%;
    box-sizing: border-box;
}

.ipz-delete-impact__progress {
    padding: $spacing-sm 0;
}

// ---------------------------------------------------------------------------
// Disabled languages section — structurally distinct from the Active/
// Inactive toggle: own section, own row modifier, Restore button (never a
// toggle switch), per §2.1 of the design spec.
// ---------------------------------------------------------------------------

.ipz-disabled-languages {
    margin-top: $spacing-lg;
}

.ipz-disabled-languages__disclosure {
    border: 1px solid $border-color;
    border-radius: $border-radius-sm;

    @media (prefers-reduced-motion: no-preference) {
        transition: border-color 0.15s ease;
    }
}

.ipz-disabled-languages-table {
    width: 100%;
    border-collapse: collapse;

    .ipz-col-flag {
        width: 60px;
        text-align: center;
        font-size: 24px;
    }

    .ipz-col-name {
        width: auto;
        min-width: 200px;

        strong {
            display: block;
        }

        .ipz-native-name {
            font-size: 12px;
        }
    }
}

.ipz-disabled-row {
    &__count {
        color: $text-light;
        font-size: 13px;
    }

    &__actions {
        text-align: right;
    }
}

@media screen and (max-width: 782px) {
    .ipz-languages-table {
        .ipz-col-flag {
            font-size: 20px;
        }

        .ipz-col-code,
        .ipz-col-locale {
            font-size: 11px;
        }

        .ipz-col-direction {
            display: none;
        }

        .ipz-col-actions {
            width: auto;
        }
    }

    .ipz-actions-group {
        flex-direction: column;
        align-items: stretch;
    }
}