/**
 * Sparkles Admin Unified CSS - Consolidated Admin Interface Components
 * Combines: admin-actions.css, admin-rule-manager.css, admin-components.css, admin-service-config.css
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 * 
 * Original files total: 1,743 lines
 * Target reduction: 20% (349 lines) 
 */

/* ========== ADMIN BASE COMPONENTS ========== */

/* Admin Card Layout System - Consolidated from multiple files */
.sparkles-admin-card {
    overflow: hidden;
}

/* Container query anchors for admin layout modules */
:where(.sparkles-admin-card,
    .sparkles-rule-list,
    .sparkles-rule-manager,
    .sparkles-config-panel) {
    container-type: inline-size;
}

.sparkles-admin-card-title {
    font-size: 1.125rem;
}

.sparkles-admin-card-body {
    padding: 1.5rem;
}

.sparkles-admin-card-footer {
    background-color: var(--gray-50);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top-width: 1px;
    border-color: var(--gray-200);
}

/* Configuration Panel Base - Unified pattern */
.sparkles-config-panel,
.sparkles-rule-manager,
.sparkles-service-config {
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sparkles-config-header {
    flex-direction: column;
    align-items: flex-start;
}

.sparkles-config-title,
.sparkles-rule-manager .rule-manager-title,
.sparkles-service-config-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgba(17, 24, 39, var(--tw-text-opacity, 1));
    color: var(--gray-900);
    font-weight: var(--font-weight-semibold);
}

.sparkles-config-body {
    padding: 1.5rem;
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem*var(--tw-space-y-reverse));
}

.sparkles-config-section-title {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--gray-900);
    border-bottom-width: 1px;
    border-color: var(--gray-200);
    padding-bottom: .5rem;
}

/* ========== ADMIN ACTIONS ========== */

/* Action Button System - Enhanced and consolidated */
.sparkles-action-button {
    display: inline-flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-width: 1px;
    border-color: #0000;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    border-radius: .375rem;
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    transition: all .2s ease-out;
}

.sparkles-action-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Button Variants - Color system */
.sparkles-action-button.secondary {
    color: var(--gray-700);
}

.sparkles-action-button.sm {
    padding-left: .75rem;
    padding-right: .75rem;
    font-size: .75rem;
    line-height: 1rem;
}

.sparkles-action-button.lg {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

/* Loading State */
.sparkles-action-button.loading {
    position: relative;
    pointer-events: none;
}

.sparkles-action-button.loading .sparkles-button-text {
    opacity: 0;
}

.sparkles-action-button.loading::after {
    content: '';
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4' class='opacity-25'%3e%3c/circle%3e%3cpath fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z' class='opacity-75'%3e%3c/path%3e%3c/svg%3e");
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
    background-position: center;
    animation: sparkles-spin 1s linear infinite;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Action Groups */
.sparkles-action-group {
    display: flex;
    gap: .75rem;
}

.sparkles-action-group.vertical {
    flex-direction: column;
    gap: .75rem;
}

.sparkles-action-group.compact {
    gap: .25rem;
}

.sparkles-action-group.compact.vertical {
    flex-direction: column;
    gap: .25rem;
}

/* ========== ADMIN RULE MANAGER ========== */

/* Rule Management Container */
.sparkles-rule-manager .rule-manager-header {
    flex-direction: column;
    align-items: flex-start;
}

.sparkles-rule-manager .rule-manager-title {
    margin-bottom: .5rem;
}

.sparkles-rule-manager .rule-manager-actions {
    margin-top: 1rem;
}

.sparkles-rule-manager .add-rule-btn {
    font-weight: var(--font-weight-medium);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sparkles-rule-manager .bulk-actions {
    flex-direction: column;
    gap: .25rem;
}

.sparkles-rule-manager .bulk-action-btn {
    font-weight: var(--font-weight-medium);
    padding: .25rem .5rem;
    font-size: .75rem;
    line-height: 1rem;
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgba(55, 65, 81, var(--tw-text-opacity, 1));
    color: var(--gray-700);
    border-color: var(--gray-300);
}

.sparkles-rule-manager .rule-manager-content {
    padding: 1.5rem;
}

.sparkles-rule-list .rule-item {
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.sparkles-rule-list .rule-item.rule-disabled {
    background-color: var(--gray-50);
    --tw-border-opacity: 1;
    border-color: rgba(243, 244, 246, var(--tw-border-opacity, 1));
}

.sparkles-rule-list .rule-item.rule-disabled .rule-content {
    opacity: .6;
}

.sparkles-rule-list .rule-title {
    font-weight: 500;
    color: var(--gray-900);
}

.sparkles-rule-list .rule-meta {
    display: flex;
    color: var(--gray-500);
}

.sparkles-rule-list .rule-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: .75rem;
    line-height: 1rem;
    background-color: var(--gray-100);
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    border-radius: .25rem;
}

.sparkles-rule-list .rule-priority {
    --tw-bg-opacity: 1;
    background-color: rgba(219, 234, 254, var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgba(30, 64, 175, var(--tw-text-opacity, 1));
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    border-radius: .25rem;
}

.sparkles-rule-list .rule-content {
    margin-bottom: .75rem;
}

.sparkles-rule-list .rule-targets .label {
    --sparkles-label-size: .75rem;
    --sparkles-label-line-height: 1rem;
    --sparkles-label-weight: 500;
    --sparkles-label-color: var(--gray-500);
    --sparkles-label-margin: .25rem;
}

/* ========== ADMIN SERVICE CONFIG ========== */

/* Service Configuration Container - Using unified patterns */
.sparkles-service-config {
    max-width: 100%;
}

.sparkles-service-config-header {
    flex-direction: column;
    align-items: flex-start;
}

.sparkles-service-config-title {
    margin: 0;
}

.sparkles-service-config-description {
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(75, 85, 99, var(--tw-text-opacity, 1));
    color: var(--gray-600);
    margin: 0;
    margin-top: .5rem;
}

.sparkles-service-config-body {
    padding: 1.5rem;
}

/* Configuration Form Fields - Standardized */
.sparkles-config-field {
    margin-bottom: 1.5rem;
}

.sparkles-config-label.required::after {
    content: " *";
    --tw-text-opacity: 1;
    color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}

.sparkles-config-input,
.sparkles-config-select,
.sparkles-config-textarea {
    width: 100%;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-width: 1px;
    border-color: var(--gray-300);
    border-radius: .25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
    transition-duration: .15s;
}

.sparkles-config-input:focus,
.sparkles-config-select:focus,
.sparkles-config-textarea:focus {
    outline: 2px solid #0000;
    outline-offset: 2px;
    --tw-border-opacity: 1;
    border-color: rgba(96, 165, 250, var(--tw-border-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

.sparkles-config-input.loading,
.sparkles-config-select.loading {
    background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23959595' fill-opacity='0.4'%3e%3cpath d='M10 3v3l4-4-4-4v3c-4.42 0-8 3.58-8 8s3.58 8 8 8c1.57 0 3.04-.46 4.28-1.25l-.74-1.86C12.56 11.64 11.32 12 10 12c-2.21 0-4-1.79-4-4s1.79-4 4-4z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 16px;
    animation: sparkles-spin 1s infinite linear;
    padding-right: 2.5rem;
}

/* ========== PROGRESS INDICATORS ========== */

.sparkles-progress.sm {
    height: .5rem;
}

.sparkles-progress.md {
    height: .75rem;
}

.sparkles-progress.lg {
    height: 1rem;
}

.sparkles-progress-bar {
    height: 100%;
}

.sparkles-progress-bar.success {
    --tw-bg-opacity: 1;
    background-color: var(--color-success);
}

.sparkles-progress-bar.warning {
    --tw-bg-opacity: 1;
    background-color: var(--color-warning);
}

.sparkles-progress-bar.error {
    --tw-bg-opacity: 1;
    background-color: var(--color-error);
}

.sparkles-progress-bar.info {
    --tw-bg-opacity: 1;
    background-color: rgba(59, 130, 246, var(--tw-bg-opacity, 1));
}

.sparkles-progress-bar.primary {
    --tw-bg-opacity: 1;
    background-color: rgba(37, 99, 235, var(--tw-bg-opacity, 1));
}

/* Animated progress bar */
.sparkles-progress-bar.animated {
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent);
    background-size: 1rem 1rem;
    animation: sparkles-progress-stripe 1s linear infinite;
}

/* ========== STATUS CARDS ========== */

.sparkles-status-card {
    padding: 1rem;
    border-radius: .5rem;
    border-left-width: 4px;
}

.sparkles-status-card.success {
    --tw-bg-opacity: 1;
    background-color: rgba(236, 253, 245, var(--tw-bg-opacity, 1));
    border-color: var(--color-success);
}

.sparkles-status-card.info {
    background-color: var(--color-info-light);
    --tw-border-opacity: 1;
    border-color: rgba(96, 165, 250, var(--tw-border-opacity, 1));
}

.sparkles-status-card-message {
    margin-top: .25rem;
}

/* ========== ADMIN FORM CONTROLS ========== */

/* Toggle Switch */
.sparkles-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    border-radius: var(--radius-full);
    width: 2.75rem;
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.sparkles-toggle.enabled {
    --tw-bg-opacity: 1;
    background-color: rgba(37, 99, 235, var(--tw-bg-opacity, 1));
}

.sparkles-toggle.disabled {
    background-color: var(--gray-200);
}

.sparkles-toggle-handle {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    border-radius: var(--radius-full);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.sparkles-toggle.enabled .sparkles-toggle-handle {
    --tw-translate-x: 1.5rem;
}

.sparkles-toggle.disabled .sparkles-toggle-handle {
    --tw-translate-x: 0.25rem;
}

.sparkles-checkbox-item {
    display: flex;
    align-items: center;
}

.sparkles-checkbox-item input[type="checkbox"] {
    height: 1rem;
    width: 1rem;
    --tw-text-opacity: 1;
    color: rgba(37, 99, 235, var(--tw-text-opacity, 1));
    border-color: var(--gray-300);
    border-radius: .25rem;
}

.sparkles-checkbox-item label {
    margin-left: .75rem;
}

/* ========== RESPONSIVE BEHAVIOR ========== */

@container (max-width: 768px) {

    .sparkles-admin-card-header,
    .sparkles-rule-manager .rule-manager-actions {
        flex-direction: column;
        align-items: flex-start;
        --tw-space-y-reverse: 0;
        margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.5rem*var(--tw-space-y-reverse));
    }

    .sparkles-admin-card-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .sparkles-action-group {
        flex-direction: column;
        --tw-space-x-reverse: 0;
        margin-right: calc(.125rem*var(--tw-space-x-reverse));
        margin-left: calc(.125rem*(1 - var(--tw-space-x-reverse)));
        --tw-space-y-reverse: 0;
        margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.5rem*var(--tw-space-y-reverse));
    }

    .sparkles-rule-list .rule-content {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }


}

/* ========== ADMIN CONFIRMATION MODALS ========== */

/* Confirmation Modal Overlay */
.sparkles-admin-confirmation {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
}

/* Confirmation Modal Variants */
/* ========== SPARKLES EFFECTS CONTROLLER ========== */

/* Control Panel - Fixed bottom-right floating panel */
.sparkles-control-panel {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-radius: .5rem;
    padding: 1rem;
    z-index: var(--z-fixed);
}

.sparkles-control-panel-toggle {
    cursor: pointer;
}

.sparkles-control-header {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgba(17, 24, 39, var(--tw-text-opacity, 1));
    margin-bottom: .5rem;
}

.sparkles-control-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.sparkles-control-section {
    border-top-width: 1px;
    padding-top: .5rem;
    margin-top: .5rem;
}

.sparkles-control-styles {
    font-size: .875rem;
    line-height: 1.25rem;
}

.sparkles-performance-mode {
    --tw-text-opacity: 1;
    color: rgba(22, 163, 74, var(--tw-text-opacity, 1));
}

.sparkles-effects-disabled {
    opacity: .5;
}

.sparkles-panel-open {
    display: block;
}

.sparkles-panel-active {
    background-color: rgba(37, 99, 235, 0.1);
}

/* Effects Controller Buttons */
.sparkles-control-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gray-500);
    cursor: pointer;
    padding: .25rem;
    transition: color .2s ease;
}

.sparkles-control-close:hover {
    color: var(--gray-900);
}

.sparkles-save-page-settings,
.sparkles-reset-page-settings,
.sparkles-reset-all {
    padding: .5rem 1rem;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    border: 1px solid var(--gray-300);
    background-color: var(--white);
    color: var(--gray-700);
}

.sparkles-save-page-settings:hover,
.sparkles-reset-page-settings:hover,
.sparkles-reset-all:hover {
    background-color: var(--gray-50);
    border-color: var(--color-primary);
}

/* Performance Info Display */
.sparkles-performance-info {
    font-size: .875rem;
    color: var(--gray-600);
    padding: .5rem;
    background-color: var(--gray-50);
    border-radius: .375rem;
    margin-top: .5rem;
}

.sparkles-fps,
.sparkles-animation-count {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .75rem;
    color: var(--color-primary);
    font-weight: 600;
}

/* Notification Show State */
.sparkles-notification-show {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease;
}

/* ========== PRINT STYLES ========== */

@media print {

    .sparkles-action-button,
    .sparkles-admin-card-actions,
    .sparkles-rule-manager .rule-manager-actions,
    .sparkles-control-panel {
        display: none;
    }

    .sparkles-admin-card {
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        border-width: 1px;
    }
}