/* site-07-utilities.css: Directives and notes, utilities, animations (21-23).
   Part of the old site.css, split by sections (same order: _Styles.cshtml links them one after the other,
   so the cascade is exactly the same). */

/* =====================================================================
   21. DIRECTIVES AND NOTES
   ===================================================================== */
.directive-panel-prosecutor,
.directive-panel-supervisor {
    position: relative;
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
}

.directive-panel-prosecutor {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-left: 4px solid var(--info);
}

.directive-panel-supervisor {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-left: 4px solid var(--warning);
}

.directive-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.directive-icon-box {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 16px;
}

.directive-panel-prosecutor .directive-icon-box {
    background: rgba(6, 182, 212, 0.15);
    color: var(--info);
}

.directive-panel-supervisor .directive-icon-box {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.directive-title {
    margin: 0;
    color: white;
    font-size: clamp(0.92rem, 1vw + 0.6rem, 1.05rem);
    font-weight: 600;
}

.directive-body {
    padding-left: 42px;
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Notes */
.note-directive {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(8px);
}

.note-warning {
    background-color: rgba(240, 180, 41, 0.04);
    border: 1px solid rgba(240, 180, 41, 0.15);
    border-left: 4px solid #d49a22;
}

    .note-warning .note-icon {
        color: #d49a22;
    }

.note-info {
    background-color: rgba(77, 163, 255, 0.04);
    border: 1px solid rgba(77, 163, 255, 0.15);
    border-left: 4px solid #4da3ff;
}

    .note-info .note-icon {
        color: #4da3ff;
    }

.note-icon {
    margin-top: 3px;
    font-size: 1.35rem;
    line-height: 1;
}

.note-content {
    flex-grow: 1;
}

.note-title {
    margin-bottom: 2px;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
}

.note-subtitle {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.note-body {
    padding: 10px 14px;
    background: rgba(150, 150, 150, 0.03);
    border: 1px dashed rgba(150, 150, 150, 0.15);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-line;
}


/* =====================================================================
   22. UTILITIES
   ===================================================================== */
.gradient-text {
    background: var(--gradient-vivid);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hover-lift {
    transition: var(--transition);
}

    .hover-lift:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-glow);
    }

.glass-panel {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--panel-3);
    border-radius: var(--radius-sm);
}

    .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
        animation: shimmer 1.6s infinite;
    }

.fade-in-up {
    animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =====================================================================
   23. ANIMATIONS (keyframes)
   ===================================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes formCardIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(22, 201, 141, 0.35);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(22, 201, 141, 0);
    }
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}