/**
 * WPShift Companion Admin Styles
 *
 * WordPress-native admin styling.
 */

/* CSS Variables */
:root {
    --wpshift-primary: #2271b1;
    --wpshift-primary-dark: #135e96;
    --wpshift-primary-light: #f0f6fc;
    --wpshift-success: #00a32a;
    --wpshift-success-light: #edfaef;
    --wpshift-warning: #dba617;
    --wpshift-warning-light: #fcf9e8;
    --wpshift-error: #d63638;
    --wpshift-error-light: #fcf0f1;
    --wpshift-gray-50: #f6f7f7;
    --wpshift-gray-100: #f0f0f1;
    --wpshift-gray-200: #dcdcde;
    --wpshift-gray-300: #c3c4c7;
    --wpshift-gray-400: #a7aaad;
    --wpshift-gray-500: #787c82;
    --wpshift-gray-600: #50575e;
    --wpshift-gray-700: #3c434a;
    --wpshift-gray-800: #2c3338;
    --wpshift-gray-900: #1d2327;
    --wpshift-radius: 4px;
    --wpshift-radius-lg: 4px;
    --wpshift-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    --wpshift-shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Admin Container */
.wpshift-admin {
    max-width: 800px;
    margin: 20px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Header */
.wpshift-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 16px 20px;
    border: 1px solid var(--wpshift-gray-200);
    border-bottom: none;
    border-radius: var(--wpshift-radius) var(--wpshift-radius) 0 0;
}

.wpshift-header__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wpshift-logo {
    height: 32px;
    width: auto;
}

.wpshift-header__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wpshift-header__title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wpshift-header__title h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--wpshift-gray-900);
    line-height: 1.2;
}

.wpshift-header__version {
    font-size: 11px;
    color: var(--wpshift-gray-500);
    font-weight: 400;
    background: var(--wpshift-gray-100);
    padding: 2px 6px;
    border-radius: 3px;
}

.wpshift-header__tagline {
    margin: 0;
    font-size: 12px;
    color: var(--wpshift-gray-500);
}

.wpshift-header__status {
    display: flex;
    align-items: center;
}

/* Connection Badge */
.wpshift-connection-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
}

.wpshift-connection-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.wpshift-connection-badge--connected {
    background: var(--wpshift-success-light);
    color: #00450c;
}

.wpshift-connection-badge--connected .wpshift-connection-badge__dot {
    background: var(--wpshift-success);
}

.wpshift-connection-badge--disconnected {
    background: var(--wpshift-gray-100);
    color: var(--wpshift-gray-600);
}

.wpshift-connection-badge--disconnected .wpshift-connection-badge__dot {
    background: var(--wpshift-gray-400);
}

/* Navigation */
.wpshift-nav {
    display: flex;
    background: #fff;
    padding: 0;
    border-left: 1px solid var(--wpshift-gray-200);
    border-right: 1px solid var(--wpshift-gray-200);
    border-bottom: 1px solid var(--wpshift-gray-200);
    gap: 0;
}

.wpshift-nav__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    color: var(--wpshift-gray-600);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.1s ease;
}

.wpshift-nav__item:hover {
    color: var(--wpshift-primary);
}

.wpshift-nav__item--active {
    color: var(--wpshift-primary);
    border-bottom-color: var(--wpshift-primary);
    background: var(--wpshift-gray-50);
}

.wpshift-nav__item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Content */
.wpshift-content {
    background: #fff;
    padding: 16px;
    border: 1px solid var(--wpshift-gray-200);
    border-top: none;
    border-radius: 0 0 var(--wpshift-radius) var(--wpshift-radius);
}

/* Footer */
.wpshift-footer {
    padding: 12px 0;
    text-align: center;
}

.wpshift-footer p {
    margin: 0;
    font-size: 12px;
    color: var(--wpshift-gray-500);
}

.wpshift-footer a {
    color: var(--wpshift-primary);
    text-decoration: none;
}

.wpshift-footer a:hover {
    text-decoration: underline;
}

/* Cards */
.wpshift-card {
    background: #fff;
    border: 1px solid var(--wpshift-gray-200);
    border-radius: var(--wpshift-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
}

.wpshift-card:last-child {
    margin-bottom: 0;
}

.wpshift-card h2 {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--wpshift-gray-900);
}

.wpshift-card h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--wpshift-gray-800);
}

.wpshift-card > p {
    margin: 0 0 14px 0;
    color: var(--wpshift-gray-600);
    font-size: 13px;
    line-height: 1.6;
}

.wpshift-card--highlight {
    background: var(--wpshift-gray-50);
    text-align: center;
    padding: 24px 16px;
}

.wpshift-card__icon {
    width: 40px;
    height: 40px;
    background: var(--wpshift-primary);
    border-radius: var(--wpshift-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.wpshift-card__icon--large {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.wpshift-card__icon .dashicons {
    color: #fff;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.wpshift-card__icon--large .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.wpshift-card--success {
    background: var(--wpshift-success-light);
    border-color: #68de7c;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.wpshift-card--success .dashicons {
    color: var(--wpshift-success);
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.wpshift-card--success h3 {
    color: #00450c;
    margin-bottom: 2px;
    font-size: 13px;
}

.wpshift-card--success p {
    color: #00450c;
    margin: 0;
    font-size: 13px;
}

.wpshift-card--success-large {
    background: var(--wpshift-success-light);
    text-align: center;
    padding: 24px 16px;
}

/* Buttons */
.wpshift-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 3px;
    border: 1px solid;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.1s ease;
    line-height: 1.4;
}

.wpshift-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.wpshift-btn--primary {
    background: var(--wpshift-primary);
    border-color: var(--wpshift-primary);
    color: #fff;
}

.wpshift-btn--primary:hover {
    background: var(--wpshift-primary-dark);
    border-color: var(--wpshift-primary-dark);
    color: #fff;
}

.wpshift-btn--secondary {
    background: #f6f7f7;
    color: var(--wpshift-primary);
    border-color: var(--wpshift-primary);
}

.wpshift-btn--secondary:hover {
    background: #f0f0f1;
    color: var(--wpshift-primary-dark);
    border-color: var(--wpshift-primary-dark);
}

.wpshift-btn--danger {
    background: var(--wpshift-error);
    border-color: var(--wpshift-error);
    color: #fff;
}

.wpshift-btn--danger:hover {
    background: #b32d2e;
    border-color: #b32d2e;
}

.wpshift-btn--small {
    padding: 4px 8px;
    font-size: 12px;
}

.wpshift-btn--large {
    padding: 8px 16px;
    font-size: 13px;
}

.wpshift-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Stats Grid */
.wpshift-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.wpshift-stat-card {
    background: #fff;
    border: 1px solid var(--wpshift-gray-200);
    border-radius: var(--wpshift-radius);
    padding: 12px;
}

.wpshift-stat-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.wpshift-stat-card__header .dashicons {
    color: var(--wpshift-primary);
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.wpshift-stat-card__header h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--wpshift-gray-600);
}

.wpshift-stat-card__value {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpshift-gray-900);
    display: flex;
    align-items: center;
    gap: 4px;
}

.wpshift-stat-card__value .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.wpshift-stat-card__value--success {
    color: var(--wpshift-success);
}

.wpshift-stat-card__value--warning {
    color: var(--wpshift-warning);
}

.wpshift-stat-card__label {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: var(--wpshift-gray-500);
}

.wpshift-stat-card--actions {
    display: flex;
    flex-direction: column;
}

.wpshift-stat-card--actions .wpshift-stat-card__body {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Features Grid */
.wpshift-features {
    margin-top: 16px;
}

.wpshift-features h3 {
    text-align: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--wpshift-gray-700);
}

.wpshift-features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.wpshift-feature {
    text-align: center;
    padding: 12px 8px;
    background: var(--wpshift-gray-50);
    border-radius: var(--wpshift-radius);
}

.wpshift-feature .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--wpshift-primary);
    margin-bottom: 6px;
}

.wpshift-feature h4 {
    margin: 0 0 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--wpshift-gray-800);
}

.wpshift-feature p {
    margin: 0;
    font-size: 11px;
    color: var(--wpshift-gray-600);
    line-height: 1.4;
}

/* Steps */
.wpshift-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.wpshift-step {
    display: flex;
    gap: 8px;
}

.wpshift-step__number {
    width: 22px;
    height: 22px;
    background: var(--wpshift-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.wpshift-step__content h4 {
    margin: 0 0 2px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--wpshift-gray-800);
}

.wpshift-step__content p {
    margin: 0;
    font-size: 11px;
    color: var(--wpshift-gray-600);
    line-height: 1.4;
}

/* Checklist */
.wpshift-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wpshift-checklist li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid var(--wpshift-gray-100);
    font-size: 12px;
    color: var(--wpshift-gray-700);
}

.wpshift-checklist li:last-child {
    border-bottom: none;
}

.wpshift-checklist .dashicons {
    color: var(--wpshift-success);
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Settings */
.wpshift-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--wpshift-gray-100);
}

.wpshift-setting-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wpshift-setting-row:first-child {
    padding-top: 0;
}

.wpshift-setting-row__info h4 {
    margin: 0 0 2px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpshift-gray-800);
}

.wpshift-setting-row__info p {
    margin: 0;
    font-size: 12px;
    color: var(--wpshift-gray-600);
}

.wpshift-setting-row__info code {
    background: var(--wpshift-gray-100);
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 11px;
}

/* Debug Table */
.wpshift-debug-table {
    width: 100%;
    border-collapse: collapse;
}

.wpshift-debug-table td {
    padding: 6px 0;
    border-bottom: 1px solid var(--wpshift-gray-100);
    font-size: 12px;
}

.wpshift-debug-table tr:last-child td {
    border-bottom: none;
}

.wpshift-debug-table td:first-child {
    color: var(--wpshift-gray-600);
    width: 160px;
}

.wpshift-debug-table td:last-child {
    color: var(--wpshift-gray-800);
}

/* Badges */
.wpshift-badge {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 500;
}

.wpshift-badge--success {
    background: var(--wpshift-success-light);
    color: #00450c;
}

.wpshift-badge--warning {
    background: var(--wpshift-warning-light);
    color: #8a6914;
}

.wpshift-badge--error {
    background: var(--wpshift-error-light);
    color: #8a2424;
}

/* Collapsible Card */
.wpshift-card--collapsible {
    padding: 0;
}

.wpshift-card__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.wpshift-card__summary::-webkit-details-marker {
    display: none;
}

.wpshift-card__summary h3 {
    margin: 0;
    font-size: 13px;
}

.wpshift-card__summary .dashicons {
    color: var(--wpshift-gray-400);
    font-size: 16px;
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.wpshift-card--collapsible[open] .wpshift-card__summary .dashicons {
    transform: rotate(180deg);
}

.wpshift-card--collapsible .wpshift-card__body {
    padding: 0 16px 12px;
    border-top: 1px solid var(--wpshift-gray-100);
    padding-top: 12px;
}

/* Cloak for Alpine.js */
[x-cloak] {
    display: none !important;
}

/* Notices */
.wpshift-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--wpshift-radius);
    margin-top: 12px;
    border-left: 4px solid;
}

.wpshift-notice .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.wpshift-notice--error {
    background: var(--wpshift-error-light);
    border-left-color: var(--wpshift-error);
}

.wpshift-notice--error .dashicons {
    color: var(--wpshift-error);
}

.wpshift-notice--error strong {
    color: #8a2424;
    font-size: 13px;
}

.wpshift-notice--error p {
    margin: 2px 0 0 0;
    color: #8a2424;
    font-size: 12px;
}

.wpshift-notice > div {
    flex: 1;
}

/* Progress */
.wpshift-progress-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.wpshift-progress-icon {
    width: 40px;
    height: 40px;
    background: var(--wpshift-primary);
    border-radius: var(--wpshift-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpshift-progress-icon .dashicons {
    color: #fff;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.wpshift-progress-icon--spinning .dashicons {
    animation: wpshift-spin 1s linear infinite;
}

.wpshift-progress-title {
    flex: 1;
    text-align: left;
}

.wpshift-progress-title h2 {
    margin: 0 0 2px 0;
    font-size: 14px;
}

.wpshift-progress-title p {
    margin: 0;
    color: var(--wpshift-gray-600);
    font-size: 12px;
}

.wpshift-progress-percent {
    font-size: 18px;
    font-weight: 700;
    color: var(--wpshift-primary);
}

.wpshift-progress-bar {
    margin-bottom: 12px;
}

.wpshift-progress-bar__track {
    width: 100%;
    height: 8px;
    background: var(--wpshift-gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.wpshift-progress-bar__fill {
    height: 100%;
    background: var(--wpshift-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.wpshift-progress-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--wpshift-gray-50);
    border-radius: var(--wpshift-radius);
    color: var(--wpshift-gray-600);
    font-size: 12px;
}

.wpshift-progress-info .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--wpshift-gray-400);
}

.wpshift-progress-info p {
    margin: 0;
}

.wpshift-progress-actions {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--wpshift-gray-100);
}

/* Success */
.wpshift-success-icon {
    width: 48px;
    height: 48px;
    background: var(--wpshift-success-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.wpshift-success-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--wpshift-success);
}

.wpshift-success-actions {
    margin-top: 12px;
}

/* Animations */
@keyframes wpshift-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Welcome Section */
.wpshift-welcome {
    text-align: center;
    padding: 16px 0 24px;
}

.wpshift-welcome__hero {
    max-width: 400px;
    margin: 0 auto;
}

.wpshift-welcome__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.wpshift-welcome__icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #fff;
}

.wpshift-welcome__logo {
    width: 36px;
    height: 36px;
}

.wpshift-welcome h2 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--wpshift-gray-900);
}

.wpshift-welcome__subtitle {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--wpshift-gray-600);
    line-height: 1.5;
}

.wpshift-welcome__note {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: var(--wpshift-gray-500);
}

.wpshift-welcome__note a {
    color: var(--wpshift-primary);
    text-decoration: none;
}

.wpshift-welcome__note a:hover {
    text-decoration: underline;
}

/* Benefits Section */
.wpshift-benefits {
    background: var(--wpshift-gray-50);
    border: 1px solid var(--wpshift-gray-200);
    border-radius: var(--wpshift-radius);
    padding: 16px;
    margin-top: 16px;
}

.wpshift-benefits__title {
    text-align: center;
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpshift-gray-800);
}

.wpshift-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.wpshift-benefit {
    text-align: center;
    padding: 10px 8px;
    background: #fff;
    border-radius: var(--wpshift-radius);
    border: 1px solid var(--wpshift-gray-200);
}

.wpshift-benefit__icon {
    width: 32px;
    height: 32px;
    background: var(--wpshift-primary-light);
    border-radius: var(--wpshift-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.wpshift-benefit__icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--wpshift-primary);
}

.wpshift-benefit h4 {
    margin: 0 0 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--wpshift-gray-900);
}

.wpshift-benefit p {
    margin: 0;
    font-size: 11px;
    color: var(--wpshift-gray-600);
    line-height: 1.4;
}

/* Managed Site Section */
.wpshift-managed {
    background: var(--wpshift-success-light);
    border: 1px solid #68de7c;
    border-radius: var(--wpshift-radius);
    padding: 16px;
    margin-bottom: 12px;
}

.wpshift-managed__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.wpshift-managed__icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: var(--wpshift-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wpshift-managed__icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--wpshift-success);
}

.wpshift-managed__info h2 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #00450c;
}

.wpshift-managed__info p {
    margin: 0;
    font-size: 12px;
    color: #00450c;
}

.wpshift-managed__actions {
    display: flex;
    justify-content: flex-start;
}

/* Quick Links */
.wpshift-quicklinks {
    background: #fff;
    border: 1px solid var(--wpshift-gray-200);
    border-radius: var(--wpshift-radius);
    padding: 12px 16px;
}

.wpshift-quicklinks h3 {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpshift-gray-800);
}

.wpshift-quicklinks__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.wpshift-quicklink {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--wpshift-gray-50);
    border: 1px solid var(--wpshift-gray-200);
    border-radius: var(--wpshift-radius);
    color: var(--wpshift-gray-700);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.1s ease;
}

.wpshift-quicklink:hover {
    background: var(--wpshift-primary-light);
    border-color: var(--wpshift-primary);
    color: var(--wpshift-primary);
}

.wpshift-quicklink .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--wpshift-primary);
}

/* Ready to Import Section */
.wpshift-ready {
    background: var(--wpshift-primary-light);
    border: 1px solid #a3c7e8;
    border-radius: var(--wpshift-radius);
    padding: 20px 16px;
    margin-bottom: 12px;
    text-align: center;
}

.wpshift-ready__content {
    max-width: 360px;
    margin: 0 auto;
}

.wpshift-ready__icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: var(--wpshift-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.wpshift-ready__icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--wpshift-primary);
}

.wpshift-ready h2 {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--wpshift-gray-900);
}

.wpshift-ready p {
    margin: 0 0 14px 0;
    font-size: 12px;
    color: var(--wpshift-gray-600);
    line-height: 1.5;
}

.wpshift-ready__benefits {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #c7dff0;
}

.wpshift-ready__benefit {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--wpshift-gray-700);
}

.wpshift-ready__benefit .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--wpshift-success);
}

/* Account Info */
.wpshift-account-info {
    background: #fff;
    border: 1px solid var(--wpshift-gray-200);
    border-radius: var(--wpshift-radius);
    padding: 12px 16px;
}

.wpshift-account-info__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.wpshift-account-info__header .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--wpshift-gray-500);
}

.wpshift-account-info__header h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--wpshift-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wpshift-account-info__content p {
    margin: 0;
    font-size: 13px;
    color: var(--wpshift-gray-800);
}

/* Responsive */
@media (max-width: 1024px) {
    .wpshift-stats {
        grid-template-columns: 1fr;
    }

    .wpshift-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wpshift-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .wpshift-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wpshift-quicklinks__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wpshift-ready__benefits {
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }
}

@media (max-width: 782px) {
    .wpshift-admin {
        margin: 10px;
    }

    .wpshift-header {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .wpshift-header__brand {
        flex-direction: column;
        gap: 6px;
    }

    .wpshift-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wpshift-features__grid,
    .wpshift-steps,
    .wpshift-benefits__grid,
    .wpshift-quicklinks__grid {
        grid-template-columns: 1fr;
    }

    .wpshift-progress-header {
        flex-direction: column;
        text-align: center;
    }

    .wpshift-progress-title {
        text-align: center;
    }

    .wpshift-setting-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .wpshift-managed__header {
        flex-direction: column;
        text-align: center;
    }

    .wpshift-managed__actions {
        justify-content: center;
    }

    .wpshift-welcome h2 {
        font-size: 16px;
    }

    .wpshift-ready {
        padding: 16px;
    }

    .wpshift-ready h2 {
        font-size: 14px;
    }
}

/* ==========================================================================
   Optimize Tab Styles
   ========================================================================== */

/* Optimize Container */
.wpshift-optimize {
    max-width: 100%;
}

.wpshift-optimize-intro {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--wpshift-primary-light);
    border-radius: var(--wpshift-radius);
    border-left: 3px solid var(--wpshift-primary);
}

.wpshift-optimize-intro p {
    margin: 0;
    color: var(--wpshift-gray-700);
    font-size: 12px;
    line-height: 1.5;
}

/* Card Header Row */
.wpshift-card__header-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--wpshift-gray-100);
}

.wpshift-card__header-row .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--wpshift-primary);
}

.wpshift-card__header-row h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpshift-gray-900);
}

/* Toggle All */
.wpshift-toggle-all {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.wpshift-toggle-all span:first-child {
    font-size: 11px;
    color: var(--wpshift-gray-500);
}

.wpshift-toggle-all__slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--wpshift-gray-300);
    border-radius: 10px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.wpshift-toggle-all__slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.wpshift-toggle-all__slider.is-active {
    background: var(--wpshift-primary);
}

.wpshift-toggle-all__slider.is-active::after {
    transform: translateX(16px);
}

.wpshift-toggle-all:hover .wpshift-toggle-all__slider {
    background: var(--wpshift-gray-400);
}

.wpshift-toggle-all:hover .wpshift-toggle-all__slider.is-active {
    background: var(--wpshift-primary-dark);
}

/* Toggle Switches */
.wpshift-toggles {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wpshift-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--wpshift-gray-100);
    cursor: pointer;
}

.wpshift-toggle:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wpshift-toggle:first-child {
    padding-top: 0;
}

.wpshift-toggle:hover {
    background: var(--wpshift-gray-50);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: var(--wpshift-radius);
}

.wpshift-toggle__info {
    flex: 1;
    padding-right: 12px;
}

.wpshift-toggle__info strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpshift-gray-900);
    margin-bottom: 1px;
}

.wpshift-toggle__info p {
    margin: 0;
    font-size: 11px;
    color: var(--wpshift-gray-600);
    line-height: 1.4;
}

/* Toggle Slider */
.wpshift-toggle input[type="checkbox"] {
    display: none;
}

.wpshift-toggle__slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--wpshift-gray-300);
    border-radius: 10px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.wpshift-toggle__slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.15s ease;
}

.wpshift-toggle input[type="checkbox"]:checked + .wpshift-toggle__slider {
    background: var(--wpshift-primary);
}

.wpshift-toggle input[type="checkbox"]:checked + .wpshift-toggle__slider::after {
    transform: translateX(16px);
}

.wpshift-toggle:hover .wpshift-toggle__slider {
    background: var(--wpshift-gray-400);
}

.wpshift-toggle input[type="checkbox"]:checked + .wpshift-toggle__slider:hover {
    background: var(--wpshift-primary-dark);
}

/* Form Fields */
.wpshift-field {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--wpshift-gray-100);
}

.wpshift-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpshift-gray-800);
    margin-bottom: 4px;
}

.wpshift-field select,
.wpshift-field input[type="number"],
.wpshift-field input[type="text"],
.wpshift-field input[type="email"] {
    width: 100%;
    max-width: 240px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--wpshift-gray-300);
    border-radius: 3px;
    background: #fff;
    color: var(--wpshift-gray-900);
    transition: border-color 0.1s ease;
}

.wpshift-field select:focus,
.wpshift-field input[type="number"]:focus,
.wpshift-field input[type="text"]:focus,
.wpshift-field input[type="email"]:focus {
    outline: none;
    border-color: var(--wpshift-primary);
    box-shadow: 0 0 0 1px var(--wpshift-primary);
}

.wpshift-field__help {
    margin: 4px 0 0 0;
    font-size: 11px;
    color: var(--wpshift-gray-500);
    line-height: 1.4;
}

.wpshift-field--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: none;
    margin-top: 8px;
    padding-top: 0;
}

.wpshift-field--inline label {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 12px;
}

.wpshift-field--inline input[type="number"] {
    width: auto;
    max-width: none;
    text-align: center;
}

/* Form Actions */
.wpshift-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--wpshift-gray-50);
    border-radius: var(--wpshift-radius);
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: -12px;
}

.wpshift-save-status {
    font-size: 12px;
    color: var(--wpshift-success);
    font-weight: 500;
}

.wpshift-spin {
    animation: wpshift-spin 1s linear infinite;
}

/* Cleanup Section */
.wpshift-card--cleanup {
    margin-top: 12px;
    background: #fff;
}

.wpshift-cleanup-intro {
    margin: 0 0 10px 0;
    color: var(--wpshift-gray-600);
    font-size: 12px;
    line-height: 1.5;
}

.wpshift-cleanup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.wpshift-cleanup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--wpshift-gray-50);
    border: 1px solid var(--wpshift-gray-200);
    border-radius: var(--wpshift-radius);
}

.wpshift-cleanup-item:hover {
    border-color: var(--wpshift-gray-300);
}

.wpshift-cleanup-item__info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wpshift-cleanup-item__info strong {
    font-size: 12px;
    font-weight: 500;
    color: var(--wpshift-gray-800);
}

.wpshift-cleanup-item__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    background: var(--wpshift-warning-light);
    color: #8a6914;
    font-size: 11px;
    font-weight: 600;
    border-radius: 2px;
}

.wpshift-cleanup-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--wpshift-gray-100);
}

.wpshift-cleanup-status {
    font-size: 12px;
    color: var(--wpshift-success);
    font-weight: 500;
}

.wpshift-cleanup-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    text-align: center;
}

.wpshift-cleanup-empty .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--wpshift-success);
    margin-bottom: 8px;
}

.wpshift-cleanup-empty p {
    margin: 0;
    font-size: 12px;
    color: var(--wpshift-gray-600);
}

/* Optimize Responsive */
@media (max-width: 782px) {
    .wpshift-toggle {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .wpshift-toggle__info {
        padding-right: 0;
    }

    .wpshift-field--inline {
        flex-direction: column;
        align-items: flex-start;
    }

    .wpshift-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wpshift-form-actions .wpshift-btn {
        width: 100%;
    }

    .wpshift-cleanup-grid {
        grid-template-columns: 1fr;
    }

    .wpshift-cleanup-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wpshift-cleanup-actions .wpshift-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Email Tab Styles
   ========================================================================== */

/* Email Container */
.wpshift-email {
    max-width: 100%;
}

/* Email Actions */
.wpshift-email__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* Email Details Grid */
.wpshift-email__details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    background: var(--wpshift-gray-50);
    border-radius: var(--wpshift-radius);
}

.wpshift-email__detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wpshift-email__label {
    font-size: 10px;
    font-weight: 500;
    color: var(--wpshift-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wpshift-email__value {
    font-size: 13px;
    font-weight: 500;
    color: var(--wpshift-gray-800);
}

/* Info Notice */
.wpshift-notice--info {
    background: var(--wpshift-primary-light);
    border-left-color: var(--wpshift-primary);
}

.wpshift-notice--info .dashicons {
    color: var(--wpshift-primary);
}

.wpshift-notice--info strong {
    color: #135e96;
    font-size: 13px;
}

.wpshift-notice--info p {
    margin: 2px 0 0 0;
    color: #135e96;
    font-size: 12px;
}

/* Warning Notice */
.wpshift-notice--warning {
    background: var(--wpshift-warning-light);
    border-left-color: var(--wpshift-warning);
}

.wpshift-notice--warning .dashicons {
    color: var(--wpshift-warning);
}

.wpshift-notice--warning strong {
    color: #8a6914;
    font-size: 13px;
}

.wpshift-notice--warning p {
    margin: 2px 0 0 0;
    color: #8a6914;
    font-size: 12px;
}

/* Success Notice */
.wpshift-notice--success {
    background: var(--wpshift-success-light);
    border-left-color: var(--wpshift-success);
}

.wpshift-notice--success .dashicons {
    color: var(--wpshift-success);
}

.wpshift-notice--success strong {
    color: #00450c;
    font-size: 13px;
}

.wpshift-notice--success p {
    margin: 2px 0 0 0;
    color: #00450c;
    font-size: 12px;
}

/* Card Description */
.wpshift-card__description {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: var(--wpshift-gray-600);
    line-height: 1.5;
}

/* Email Responsive */
@media (max-width: 782px) {
    .wpshift-email__details {
        grid-template-columns: 1fr;
    }

    .wpshift-email__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wpshift-email__actions .wpshift-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Status Cards (Dashboard)
   ========================================================================== */

/* Status Cards Grid */
.wpshift-status-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

/* Individual Status Card - flexbox for equal heights */
.wpshift-status-card {
    background: #fff;
    border: 1px solid var(--wpshift-gray-200);
    border-radius: var(--wpshift-radius);
    display: flex;
    flex-direction: column;
    min-height: 180px;
}

/* Card Header */
.wpshift-status-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--wpshift-gray-100);
    background: var(--wpshift-gray-50);
    flex-shrink: 0;
}

.wpshift-status-card__header .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--wpshift-primary);
}

.wpshift-status-card__header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpshift-gray-900);
}

/* Card Body - grows to fill space */
.wpshift-status-card__body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Card Footer - always at bottom */
.wpshift-status-card__footer {
    padding: 12px 14px;
    border-top: 1px solid var(--wpshift-gray-100);
    background: var(--wpshift-gray-50);
    flex-shrink: 0;
    margin-top: auto;
}

.wpshift-status-card__footer .wpshift-btn {
    width: 100%;
    justify-content: center;
}

/* Loading State */
.wpshift-status-card__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    color: var(--wpshift-gray-400);
}

.wpshift-status-card__loading .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Card Text */
.wpshift-status-card__text {
    margin: 0;
    font-size: 12px;
    color: var(--wpshift-gray-600);
    line-height: 1.5;
}

.wpshift-status-card__text--muted {
    color: var(--wpshift-gray-500);
    text-align: center;
}

.wpshift-status-card__text--small {
    font-size: 11px;
    margin-top: 8px;
    color: var(--wpshift-gray-500);
}

/* Stats Display */
.wpshift-status-card__stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--wpshift-gray-100);
}

.wpshift-status-card__stat:first-child {
    padding-top: 0;
}

.wpshift-status-card__stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wpshift-status-card__label {
    font-size: 12px;
    color: var(--wpshift-gray-600);
}

.wpshift-status-card__value {
    font-size: 12px;
    font-weight: 600;
    color: var(--wpshift-gray-900);
}

/* SSL Badges */
.wpshift-ssl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
}

.wpshift-ssl-badge .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

.wpshift-ssl-badge--valid {
    background: var(--wpshift-success-light);
    color: #00450c;
}

.wpshift-ssl-badge--valid .dashicons {
    color: var(--wpshift-success);
}

.wpshift-ssl-badge--warning {
    background: var(--wpshift-warning-light);
    color: #8a6914;
}

.wpshift-ssl-badge--warning .dashicons {
    color: var(--wpshift-warning);
}

.wpshift-ssl-badge--expired {
    background: var(--wpshift-error-light);
    color: #8a2424;
}

.wpshift-ssl-badge--expired .dashicons {
    color: var(--wpshift-error);
}

/* Auto Renew Badge */
.wpshift-auto-renew-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: var(--wpshift-primary-light);
    color: var(--wpshift-primary);
    border-radius: 2px;
    font-size: 10px;
    font-weight: 500;
}

.wpshift-auto-renew-badge .dashicons {
    font-size: 10px;
    width: 10px;
    height: 10px;
}

/* Updates Badge */
.wpshift-updates-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.wpshift-updates-badge--success {
    background: var(--wpshift-success-light);
    color: #00450c;
}

.wpshift-updates-badge--warning {
    background: var(--wpshift-warning-light);
    color: #8a6914;
}

.wpshift-updates-badge--error {
    background: var(--wpshift-error-light);
    color: #8a2424;
}

/* Updates List */
.wpshift-updates-list {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
}

.wpshift-update-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--wpshift-gray-100);
    font-size: 11px;
}

.wpshift-update-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wpshift-update-item__name {
    color: var(--wpshift-gray-700);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}

.wpshift-update-item__version {
    color: var(--wpshift-gray-500);
    font-size: 10px;
    flex-shrink: 0;
}

/* Updates Summary */
.wpshift-updates-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--wpshift-radius);
}

.wpshift-updates-summary--success {
    background: var(--wpshift-success-light);
    color: #00450c;
}

.wpshift-updates-summary--success .dashicons {
    color: var(--wpshift-success);
}

.wpshift-updates-summary--warning {
    background: var(--wpshift-warning-light);
    color: #8a6914;
}

.wpshift-updates-summary__count {
    font-size: 18px;
    font-weight: 700;
}

.wpshift-updates-summary__text {
    font-size: 12px;
}

/* Site Health Status */
.wpshift-site-health-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
}

.wpshift-site-health-status .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.wpshift-site-health-status--good {
    color: var(--wpshift-success);
}

.wpshift-site-health-status--recommended {
    color: var(--wpshift-warning);
}

.wpshift-site-health-status--critical {
    color: var(--wpshift-error);
}

.wpshift-site-health-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--wpshift-gray-800);
}

/* Status Cards Responsive */
@media (max-width: 782px) {
    .wpshift-status-cards {
        grid-template-columns: 1fr;
    }

    .wpshift-status-card__stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}