/* =================================================================
   Visibility Kit – Admin Styles
   Shared CSS for all Visibility Kit admin pages
   ================================================================= */

/* ---------------------------------------------------------------
   Brand palette
   Navy:  #1B2A4A
   Teal:  #4EADC5
   Light: #f0f2f5
   Border: #e2e5ea
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Page header
   --------------------------------------------------------------- */

.viskit-admin .wrap > h1 {
    font-size: 23px;
    font-weight: 700;
    color: #1B2A4A;
    padding: 12px 0 16px;
    margin: 0;
}

/* ---------------------------------------------------------------
   Card layout
   --------------------------------------------------------------- */

.viskit-card {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
}

.viskit-card h2 {
    font-size: 15px;
    font-weight: 700;
    color: #1B2A4A;
    margin: 0 0 4px;
    padding: 0;
}

.viskit-card h2:not(:first-child) {
    margin-top: 24px;
}

.viskit-card > .description:first-of-type {
    margin-top: 0;
    margin-bottom: 16px;
    color: #6b7280;
}

/* ---------------------------------------------------------------
   Form table overrides inside cards
   --------------------------------------------------------------- */

.viskit-card .form-table {
    margin-top: 0;
}

.viskit-card .form-table th {
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 600;
    color: #1B2A4A;
    font-size: 13px;
}

.viskit-card .form-table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.viskit-card .form-table td .description {
    color: #6b7280;
    font-size: 12px;
    margin-top: 4px;
}

.viskit-card .form-table input[type="text"],
.viskit-card .form-table input[type="url"],
.viskit-card .form-table input[type="email"],
.viskit-card .form-table input[type="number"],
.viskit-card .form-table select,
.viskit-card .form-table textarea {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.viskit-card .form-table input[type="text"]:focus,
.viskit-card .form-table input[type="url"]:focus,
.viskit-card .form-table input[type="email"]:focus,
.viskit-card .form-table input[type="number"]:focus,
.viskit-card .form-table select:focus,
.viskit-card .form-table textarea:focus {
    border-color: #4EADC5;
    box-shadow: 0 0 0 1px #4EADC5;
    outline: none;
}

/* ---------------------------------------------------------------
   Toggle switch (replaces checkbox for on/off settings)
   --------------------------------------------------------------- */

.viskit-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    vertical-align: middle;
}

.viskit-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.viskit-toggle__track {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d1d5db;
    border-radius: 22px;
    transition: background 0.2s;
}

.viskit-toggle__track::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.viskit-toggle input:checked + .viskit-toggle__track {
    background: #4EADC5;
}

.viskit-toggle input:checked + .viskit-toggle__track::after {
    transform: translateX(18px);
}

.viskit-toggle input:focus + .viskit-toggle__track {
    box-shadow: 0 0 0 2px rgba(78, 173, 197, 0.3);
}

.viskit-toggle input:disabled + .viskit-toggle__track {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------
   Submit button
   --------------------------------------------------------------- */

.viskit-card .submit {
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid #f0f2f5;
    margin-top: 16px;
}

.viskit-card .submit .button-primary,
.viskit-admin .button-primary {
    background: #0070ff;
    border-color: #0070ff;
    color: #fff;
    border-radius: 6px;
    padding: 4px 16px;
    font-size: 13px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
    transition: background 0.15s;
}

.viskit-card .submit .button-primary:hover,
.viskit-card .submit .button-primary:focus,
.viskit-admin .button-primary:hover,
.viskit-admin .button-primary:focus {
    background: #005ed6;
    border-color: #005ed6;
    color: #fff;
}

/* ---------------------------------------------------------------
   Status badges
   --------------------------------------------------------------- */

.viskit-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.viskit-badge--active {
    background: #ecfdf5;
    color: #047857;
}

.viskit-badge--inactive {
    background: #fef2f2;
    color: #dc2626;
}

.viskit-badge--info {
    background: #eff6ff;
    color: #2563eb;
}

/* ---------------------------------------------------------------
   Engine / status line
   --------------------------------------------------------------- */

.viskit-engine-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f2f5;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
}

.viskit-engine-info strong {
    color: #1B2A4A;
}

/* ---------------------------------------------------------------
   Stats table in bulk sections
   --------------------------------------------------------------- */

.viskit-card .widefat {
    border: 1px solid #e2e5ea;
    border-radius: 6px;
    max-width: 400px;
}

.viskit-card .widefat td,
.viskit-card .widefat th {
    padding: 8px 12px;
    font-size: 13px;
}

/* ---------------------------------------------------------------
   Progress bar override
   --------------------------------------------------------------- */

.viskit-progress-bar-track {
    background: #e2e5ea;
    border-radius: 6px;
    height: 24px;
    overflow: hidden;
}

.viskit-progress-bar-fill {
    background: linear-gradient(135deg, #4EADC5, #1B2A4A);
    height: 100%;
    width: 0;
    transition: width 0.3s;
    border-radius: 6px;
}

/* ---------------------------------------------------------------
   Notice overrides inside cards
   --------------------------------------------------------------- */

.viskit-card .notice {
    margin: 0 0 16px;
    border-radius: 6px;
}

/* ---------------------------------------------------------------
   Separator between card sections
   --------------------------------------------------------------- */

.viskit-card hr {
    border: none;
    border-top: 1px solid #f0f2f5;
    margin: 24px 0;
}

/* ---------------------------------------------------------------
   Responsive adjustments
   --------------------------------------------------------------- */

@media screen and (max-width: 782px) {
    .viskit-card {
        padding: 16px;
    }

    .viskit-card .form-table th {
        padding-bottom: 4px;
    }
}

/* ---------------------------------------------------------------
   AI Traffic dashboard
   --------------------------------------------------------------- */

.viskit-wrap .viskit-card-wrap {
    max-width: 640px;
}

.viskit-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.viskit-card-header h2 {
    margin-bottom: 0;
}

.viskit-connected-badge {
    display: inline-block;
    background: #ecfdf5;
    color: #047857;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.viskit-stats-card {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border-radius: 8px;
    padding: 20px;
    margin: 16px 0;
    text-align: center;
}

.viskit-stats-number {
    font-size: 42px;
    font-weight: 700;
    color: #1B2A4A;
    line-height: 1.1;
}

.viskit-stats-label {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

.viskit-source-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.viskit-source-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f2f5;
    font-size: 14px;
}

.viskit-source-row:last-child {
    border-bottom: none;
}

.viskit-source-name {
    color: #334155;
    font-weight: 500;
}

.viskit-source-count {
    color: #1B2A4A;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.viskit-no-data {
    color: #64748b;
    font-size: 13px;
    font-style: italic;
    margin: 12px 0 0;
}

.viskit-cta-row {
    margin: 16px 0 12px;
}

.viskit-connected-as {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 0;
}

/* Pitch card (not connected) */
.viskit-pitch-card {
    border: 1px solid #cbd5e1;
}

.viskit-status-not-active {
    color: #d97706;
    font-weight: 600;
    font-size: 13px;
    margin: 4px 0 12px;
}

.viskit-pitch-lead {
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}

.viskit-feature-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 20px;
}

.viskit-feature-list li {
    padding: 4px 0 4px 22px;
    position: relative;
    color: #334155;
    font-size: 14px;
}

.viskit-feature-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #4EADC5;
    font-weight: 700;
}

.viskit-connect-inline {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.viskit-connect-inline input[type="email"] {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
}

.viskit-connect-inline input[type="email"]:focus {
    border-color: #4EADC5;
    box-shadow: 0 0 0 1px #4EADC5;
    outline: none;
}

.viskit-btn-primary.button,
.viskit-card .button.viskit-btn-primary {
    background: #0070ff;
    border-color: #0070ff;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
}

.viskit-btn-primary.button:hover,
.viskit-btn-primary.button:focus {
    background: #005ed6;
    border-color: #005ed6;
    color: #fff;
}

.viskit-connect-status {
    margin-top: 10px;
    font-size: 13px;
}

.viskit-connect-status:empty {
    display: none;
}

/* Tracking settings section */
.viskit-checkbox-row {
    margin: 12px 0;
}

.viskit-checkbox-row label {
    font-weight: 600;
    color: #1B2A4A;
}

.viskit-checkbox-desc {
    color: #64748b;
    font-size: 12px;
    margin: 4px 0 0 24px;
}

.viskit-disconnect-section {
    border-top: 1px solid #f0f2f5;
    margin-top: 20px;
    padding-top: 16px;
}

.viskit-disconnect-section h3 {
    font-size: 13px;
    color: #1B2A4A;
    margin: 0 0 6px;
}

.viskit-disconnect-section p {
    color: #64748b;
    font-size: 13px;
    margin: 0 0 10px;
}

.viskit-caching-note {
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
    margin-top: 16px;
}

/* ---------------------------------------------------------------
   Cross wp-admin announcement banner
   --------------------------------------------------------------- */

.viskit-banner {
    border-left-color: #4EADC5;
}

.viskit-banner .viskit-banner-text {
    font-size: 14px;
}

.viskit-banner .viskit-banner-link {
    color: #1B2A4A;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 6px;
}

.viskit-banner .notice-dismiss {
    padding: 11px 9px;
}