/* Virtual Try-On AI - Admin Styles (WooCommerce style) */

/* ── License notice ── */
.vto-license-notice {
    border-left-width: 4px;
}

/* ── Page header nav ── */
.vto-admin-wrap .nav-tab-wrapper {
    margin-bottom: 20px;
}

/* ── Settings sub-tabs (WC-style vertical look) ── */
.vto-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 20px;
    border-bottom: 1px solid #c3c4c7;
    padding: 0;
}
.vto-tab {
    display: inline-block;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.4;
    color: #2271b1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px 3px 0 0;
    margin-bottom: -1px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.vto-tab:hover {
    color: #135e96;
    background: #f0f0f1;
    border-bottom-color: #c3c4c7;
}
.vto-tab:focus {
    outline: none;
    box-shadow: none;
}
.vto-tab.active {
    background: #fff;
    border-color: #c3c4c7;
    border-bottom-color: #fff;
    color: #1d2327;
    font-weight: 600;
}
.vto-tab-content {
    display: none;
}
.vto-tab-content.active {
    display: block;
}

.vto-custom-css-wrapper {
    padding: 8px 18px;
}

/* ── Cards (WC postbox style) ── */
.vto-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    padding: 0;
    margin-bottom: 20px;
}
.vto-card h2,
.vto-card h3 {
    margin: 0;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    border-bottom: 1px solid #c3c4c7;
    background: #f6f7f7;
}
.vto-card h2 {
    font-size: 14px;
}
.vto-card > p.description {
    margin: 0;
    padding: 8px 20px 0;
    color: #646970;
}
.vto-card .form-table {
    margin: 0;
}
.vto-card .form-table th {
    padding: 20px 10px 20px 20px;
    width: 200px;
    vertical-align: top;
    font-weight: 400;
    color: #1d2327;
}
.vto-card .form-table td {
    padding: 15px 20px 15px 10px;
}
.vto-card .form-table td .description {
    margin-top: 4px;
    font-style: normal;
    color: #646970;
}
.vto-card .form-table td fieldset label {
    display: block;
    margin-bottom: 6px;
}
.vto-card .form-table .vto-field-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.vto-card .inside {
    padding: 12px 20px;
}

/* Text group compact layout */
.vto-text-group {
    margin-bottom: 0;
    border-bottom: 0;
}
.vto-text-group + .vto-text-group {
    border-top: 0;
}
.vto-text-group:last-of-type {
    border-bottom: 1px solid #c3c4c7;
    margin-bottom: 20px;
}
.vto-text-group-toggle {
    background: #f6f7f7;
    border-bottom: 1px solid #e2e4e7;
    user-select: none;
}
.vto-text-group-toggle:hover {
    background: #f0f0f1;
}
.vto-text-group .form-table th {
    padding: 12px 10px 12px 20px;
    width: 160px;
}
.vto-text-group .form-table td {
    padding: 10px 20px 10px 10px;
}
.vto-card .wp-list-table,
.vto-card .vto-table {
    margin: 0;
    border: none;
}
.vto-card .wp-list-table th,
.vto-card .wp-list-table td {
    padding: 10px 16px;
}

/* ── KPI Grid ── */
.vto-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.vto-kpi-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.vto-kpi-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #7f54b3;
    margin-top: 2px;
}
.vto-kpi-label {
    font-size: 11px;
    color: #646970;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.vto-kpi-value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: #1d2327;
}
.vto-kpi-trend {
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}
.vto-trend-up { color: #00a32a; }
.vto-trend-down { color: #d63638; }
.vto-trend-flat { color: #a7aaad; }

/* ── Dashboard Grid ── */
.vto-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
}
.vto-dashboard-grid .vto-card .inside,
.vto-dashboard-grid .vto-card .vto-recent-jobs,
.vto-dashboard-grid .vto-card .vto-info-table {
    padding: 12px 20px 16px;
}

/* ── Tables ── */
.vto-table {
    width: 100%;
    border-collapse: collapse;
}
.vto-table th,
.vto-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #f0f0f1;
}
.vto-table th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #646970;
}
.vto-table-scroll {
    overflow-x: auto;
}
.vto-info-table {
    width: 100%;
}
.vto-info-table td {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f1;
}
.vto-info-table td:first-child {
    color: #646970;
    padding-right: 16px;
    white-space: nowrap;
    font-weight: 400;
}
.vto-info-table tr:last-child td {
    border-bottom: none;
}

/* ── Status Badges (WC-style) ── */
.vto-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    background: #e5e5e5;
}
.vto-status-badge.vto-enabled {
    background: #c6e1c6;
    color: #5b841b;
}
.vto-status-badge.vto-disabled {
    background: #eba3a3;
    color: #761919;
}
.vto-status-badge.vto-processing {
    background: #c9d7e8;
    color: #2e4453;
}
.vto-status-badge.vto-pending {
    background: #f8dda7;
    color: #94660c;
}

/* Product list "Try-On" column — text-only, no background */
.column-vto_status .vto-status-badge {
    background: transparent;
    padding: 0;
    font-weight: 700;
}
.column-vto_status .vto-status-badge.vto-enabled {
    color: #1a7f37;
}
.column-vto_status .vto-status-badge.vto-disabled {
    color: #c72d2d;
}

/* ── Recent Jobs ── */
.vto-recent-jobs {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 20px;
}
.vto-recent-job {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f1;
}
.vto-recent-job:last-child {
    border-bottom: none;
}
.vto-result-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #dcdcde;
}
.vto-result-thumb.vto-placeholder {
    background: #f0f0f1;
}
.vto-recent-job-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vto-product-name {
    font-weight: 500;
    font-size: 13px;
    color: #1d2327;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vto-job-time {
    font-size: 12px;
    color: #a7aaad;
}
.vto-product-thumb {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 2px;
    object-fit: cover;
}


/* ── Variation VTO Settings ── */
.vto-variation-settings {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 3px;
    padding: 10px 12px;
    margin-top: 8px;
}
.vto-variation-settings label {
    font-size: 12px;
}
.vto-product-card-variant {
    font-size: 12px;
    color: #646970;
    margin-top: 2px;
}

/* ── Filter Bar ── */
.vto-filter-bar {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
}

/* ── Funnel Chart ── */
.vto-funnel-chart {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    padding: 20px 20px 16px;
    min-height: 220px;
}
.vto-funnel-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.vto-funnel-bar-wrap {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.vto-funnel-bar {
    width: 100%;
    max-width: 80px;
    border-radius: 3px 3px 0 0;
    transition: height 0.4s ease, opacity 0.2s ease;
    opacity: 0.85;
}
.vto-funnel-col:hover .vto-funnel-bar {
    opacity: 1;
}
.vto-funnel-count {
    font-size: 18px;
    font-weight: 700;
    color: #1d2327;
}
.vto-funnel-label {
    font-size: 12px;
    font-weight: 600;
    color: #50575e;
    text-align: center;
    line-height: 1.3;
}
.vto-funnel-rate {
    font-size: 11px;
    color: #a7aaad;
}

/* ── Actions Bar ── */
.vto-actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.vto-actions-bar h2 {
    margin: 0;
    font-size: 14px;
}

/* ── Empty State ── */
.vto-empty {
    text-align: center;
    color: #a7aaad;
    padding: 24px 20px;
    font-style: italic;
}

/* ── Error ── */
.vto-error-msg {
    color: #d63638;
    font-size: 11px;
}

/* ── Status messages ── */
#vto-save-status,
#vto-connection-status,
#vto-cleanup-status {
    margin-left: 12px;
    font-weight: 500;
}
.vto-success { color: #00a32a; }
.vto-error { color: #d63638; }

/* ── Inline status blocks (JSON validator + connection result) ── */
.vto-inline-status {
    margin-top: 10px;
}
.vto-status-box {
    display: block;
    padding: 10px 12px;
    border-radius: 3px;
    border-left: 4px solid transparent;
    background: #fff;
}
.vto-status-box.vto-status-ok {
    background: #edfaef;
    border-left-color: #00a32a;
}
.vto-status-box.vto-status-fail {
    background: #fcf0f1;
    border-left-color: #d63638;
}
.vto-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.vto-status-ok .vto-status-row .dashicons { color: #00a32a; }
.vto-status-fail .vto-status-row .dashicons { color: #d63638; }
.vto-status-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #3c434a;
    line-height: 1.5;
}
.vto-status-hint a {
    word-break: break-all;
}

/* ── Setup guide ── */
.vto-setup-guide-toggle {
    user-select: none;
}
.vto-setup-guide-body {
    padding: 14px 20px 18px;
}
.vto-setup-steps {
    margin: 0 0 10px 20px;
    padding: 0;
}
.vto-setup-steps li {
    margin: 6px 0;
    line-height: 1.55;
    font-size: 13px;
}
.vto-setup-steps li + li {
    margin-top: 8px;
}

/* ── Submit bar ── */
.vto-admin-wrap .submit {
    margin: 0;
    padding: 16px 0;
}

/* ── Responsive ── */
@media (max-width: 782px) {
    .vto-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vto-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .vto-settings-tabs {
        flex-direction: column;
        border-bottom: none;
    }
    .vto-tab {
        border-radius: 0;
        border: 1px solid #c3c4c7;
        margin-bottom: -1px;
    }
    .vto-tab.active {
        background: #f0f0f1;
        font-weight: 600;
    }
    .vto-card .form-table th {
        width: auto;
        padding: 10px 20px 4px;
    }
    .vto-card .form-table td {
        padding: 4px 20px 10px;
    }
    .vto-card .form-table .vto-field-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .vto-funnel-chart {
        gap: 12px;
        min-height: 160px;
    }
    .vto-funnel-bar-wrap {
        height: 120px;
    }
    .vto-funnel-count {
        font-size: 14px;
    }
}

/* ── Tooltip ── */
.vto-tooltip {
    position: relative;
    display: inline-block;
    margin-left: 4px;
}
.vto-tooltip__text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1d2327;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    width: 260px;
    text-align: left;
    white-space: normal;
    z-index: 100;
    pointer-events: none;
    transition: opacity 0.15s;
}
.vto-tooltip__text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1d2327;
}
.vto-tooltip:hover .vto-tooltip__text {
    visibility: visible;
    opacity: 1;
}