/* ====================================================================
   PERMISSION CASCADE STYLING - FEAT-Permission-Cascade

   Provides visual indicators for auto-suggested permissions and
   validation warnings in the role permission management UI.

   Uses MudBlazor CSS variables for consistent theming.
   ==================================================================== */

/* ===================================
   Auto-Suggested Permission Styling
   =================================== */

/* Text styling for auto-suggested permissions */
.permission-auto-suggested {
    font-style: italic;
    color: var(--mud-palette-info);
}

/* Label styling within checkboxes for auto-suggested items */
.permission-auto-suggested .mud-checkbox-label {
    font-style: italic;
}

/* Row background highlight for auto-suggested permissions in tables */
.permission-row-auto-suggested {
    background-color: var(--mud-palette-info-lighten) !important;
}

/* ===================================
   Overridden Permission Styling
   (User rejected auto-suggestion)
   =================================== */

.permission-overridden {
    text-decoration: line-through;
    color: var(--mud-palette-warning);
}

.permission-overridden .mud-checkbox-label {
    text-decoration: line-through;
    color: var(--mud-palette-warning);
}

/* ===================================
   Warning Severity Indicator Icons
   =================================== */

/* High severity - error color (e.g., missing required permissions) */
.permission-warning-high {
    color: var(--mud-palette-error) !important;
}

/* Medium severity - warning color (e.g., recommended permissions missing) */
.permission-warning-medium {
    color: var(--mud-palette-warning) !important;
}

/* Info level - informational notices */
.permission-warning-info {
    color: var(--mud-palette-info) !important;
}

/* ===================================
   Auto-Suggest Cascade Icon
   =================================== */

/* Small icon indicator for cascaded permissions */
.permission-cascade-icon {
    color: var(--mud-palette-info);
    font-size: 0.875rem;
    margin-left: 4px;
    vertical-align: middle;
}

/* ===================================
   Warning Badge Styling
   =================================== */

/* Badge positioned next to permission items */
.permission-warning-badge {
    margin-left: 8px;
    cursor: help;
}

/* Tooltip container for warning details */
.permission-warning-tooltip {
    max-width: 300px;
}

/* ===================================
   Animation for Newly Auto-Suggested Items
   =================================== */

@keyframes cascade-highlight {
    0% {
        background-color: var(--mud-palette-info-lighten);
    }
    100% {
        background-color: transparent;
    }
}

.permission-cascade-new {
    animation: cascade-highlight 2s ease-out;
}

/* ===================================
   Accessibility: Reduced Motion
   =================================== */

@media (prefers-reduced-motion: reduce) {
    .permission-cascade-new {
        animation: none;
        background-color: var(--mud-palette-info-lighten);
    }
}