/**
 * SEO.AI Publisher Admin Styles
 */

/* Status Indicators */
.seoai-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.seoai-status.connected,
.seoai-status-icon.connected {
    color: #46b450;
}

.seoai-status.disconnected,
.seoai-status-icon.disconnected {
    color: #ffb900;
}

/* Validation States */
.seoai-invalid {
    border-color: #dc3232 !important;
}

.validation-message.error {
    color: #dc3232;
    display: block;
    margin-top: 5px;
}

/* Dashboard Widget */
.seoai-dashboard-widget {
    padding: 10px 0;
}

.seoai-dashboard-widget p {
    margin: 10px 0;
}

.seoai-dashboard-widget code {
    background: #f0f0f1;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* Form Tables - labels above inputs */
.seoai-settings-container .form-table th,
.seoai-settings-container .form-table td {
    display: block;
    padding: 0;
}

.seoai-settings-container .form-table th {
    padding-bottom: 8px;
    font-weight: 600;
}

.seoai-settings-container .form-table td {
    padding-bottom: 15px;
}

.seoai-settings-container .form-table {
    margin-top: 24px;
}

/* Connection form specific */
#connect-form .regular-text {
    max-width: 100%;
}

#connect-form .submit {
    margin-top: 10px;
    padding-top: 0;
}

/* Post settings form specific */
#col-right .submit {
    margin-top: 10px;
}

.seoai-settings-container .regular-text {
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
}

/* Ensure cards handle overflow properly */
.seoai-settings-container .card {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.seoai-settings-container .form-table td p.description {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Buttons */
.seoai-settings-container .button {
    margin-right: 10px;
}

.seoai-settings-container .button-secondary {
    margin-left: 10px;
}

/* Notices */
.seoai-notice {
    padding: 12px;
    margin: 15px 0;
    border-left: 4px solid;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.seoai-notice.success {
    border-left-color: #46b450;
}

.seoai-notice.error {
    border-left-color: #dc3232;
}

.seoai-notice.warning {
    border-left-color: #ffb900;
}

.seoai-notice.info {
    border-left-color: #00a0d2;
}

/* Post Columns */
.column-seoai_publisher {
    width: 50px;
    text-align: center;
}

/* Meta Box */
#seoai_publisher_info .inside {
    margin: 0;
    padding: 12px;
}

#seoai_publisher_info code {
    display: block;
    padding: 5px;
    background: #f0f0f1;
    border-radius: 3px;
    word-break: break-all;
}

/* Loading States */
.seoai-loading {
    opacity: 0.6;
    pointer-events: none;
}

.seoai-loading::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border: 2px solid #f3f4f5;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: seoai-spin 1s linear infinite;
}

@keyframes seoai-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media screen and (max-width: 782px) {
    .seoai-settings-container .regular-text {
        max-width: 100%;
    }
}

/* Connection Badge */
.seoai-connection-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #f0f0f1;
    border-radius: 3px;
    font-weight: 600;
}

.seoai-connection-badge.connected {
    background: #ecf7ed;
    color: #46b450;
}

.seoai-connection-badge.disconnected {
    background: #fef8e7;
    color: #826200;
}