/* Mahamitim Theme Updater - Modern Dashboard Styles */

/* WordPress Admin Override */
.wp-admin .wrap {
    margin: 0 !important;
    padding: 0 !important;
}

/* Dynamic Status Badge Classes */
#connection-badge.status-connected {
    border-color: rgb(187 247 208);
    background-color: rgb(220 252 231);
    color: rgb(22 101 52);
}

#connection-badge.status-connected .mr-2 {
    background-color: rgb(34 197 94);
}

#connection-badge.status-disconnected {
    border-color: rgb(254 202 202);
    background-color: rgb(254 226 226);
    color: rgb(153 27 27);
}

#connection-badge.status-disconnected .mr-2 {
    background-color: rgb(239 68 68);
}

#connection-badge.status-checking {
    border-color: rgb(254 215 170);
    background-color: rgb(254 243 199);
    color: rgb(146 64 14);
}

#connection-badge.status-checking .mr-2 {
    background-color: rgb(245 158 11);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Dynamic Status Value Classes */
#connection-status.status-connected {
    background-color: rgb(220 252 231);
    color: rgb(22 101 52);
}

#connection-status.status-disconnected {
    background-color: rgb(254 226 226);
    color: rgb(153 27 27);
}

#connection-status.status-pending {
    background-color: rgb(254 243 199);
    color: rgb(146 64 14);
}

#update-status.status-success {
    background-color: rgb(220 252 231);
    color: rgb(22 101 52);
}

#update-status.status-error {
    background-color: rgb(254 226 226);
    color: rgb(153 27 27);
}

#update-status.status-processing {
    background-color: rgb(219 234 254);
    color: rgb(30 64 175);
}

/* Progress Steps */
.progress-step {
    color: rgb(75 85 99);
    font-size: 0.875rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    line-height: 1.625;
}

.progress-step.success {
    color: rgb(22 163 74);
}

.progress-step.error {
    color: rgb(220 38 38);
}

.progress-step.warning {
    color: rgb(217 119 6);
}

.progress-step.info {
    color: rgb(37 99 235);
}

/* Toast Styles */
.toast {
    display: flex;
    align-items: flex-start;
    border-radius: 0.5rem;
    border-width: 1px;
    background-color: rgb(255 255 255);
    padding: 1rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    animation: slideInRight 0.3s ease-out;
}

.toast.success {
    border-left-width: 4px;
    border-left-color: rgb(34 197 94);
}

.toast.error {
    border-left-width: 4px;
    border-left-color: rgb(239 68 68);
}

.toast.warning {
    border-left-width: 4px;
    border-left-color: rgb(245 158 11);
}

.toast.info {
    border-left-width: 4px;
    border-left-color: rgb(59 130 246);
}

.toast-close {
    margin-left: auto;
    color: rgb(156 163 175);
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.toast-close:hover {
    color: rgb(75 85 99);
}

/* Loading Spinner */
.loading-spinner {
    animation: spin 1s linear infinite;
    height: 1rem;
    width: 1rem;
    border-width: 2px;
    border-color: transparent;
    border-top-color: currentColor;
    border-radius: 9999px;
}

/* Button Loading State */
.btn-loading {
    opacity: 0.75;
    cursor: not-allowed;
}

.btn-loading .loading-spinner {
    margin-right: 0.5rem;
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive Utilities */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .dashboard-grid {
        gap: 1rem;
    }

    .button-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* RTL Support */
[dir="rtl"] .toast {
    animation: slideInLeft 0.3s ease-out;
}

[dir="rtl"] .toast-close {
    margin-left: 0;
    margin-right: auto;
}

/* Print Styles */
@media print {
    .no-print,
    #toast-container,
    button {
        display: none !important;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}