/* ============================================================
   Peikly Admin — Modern UI v2
   ============================================================ */

/* ── Base ──────────────────────────────────────────────────── */
.artincrm-peikly-wrap {
    max-width: 100%;
}

/* ── Sidebar icon ──────────────────────────────────────────── */
#adminmenu .toplevel_page_peikly .wp-menu-image img {
    display: block;
    height: 20px;
    margin: 0 auto;
    object-fit: contain;
    padding: 6px 0 0;
    width: 20px;
}

/* ── Hero / Banner ─────────────────────────────────────────── */
.plk-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #7c3aed 100%);
    border-radius: 10px;
    color: #fff;
    margin: 16px 0 20px;
    overflow: hidden;
    padding: 28px 30px;
    position: relative;
}

.plk-hero::before {
    background: radial-gradient(circle at 80% 50%, rgba(255,255,255,.09) 0%, transparent 60%);
    bottom: 0; content: ''; left: 0; pointer-events: none;
    position: absolute; right: 0; top: 0;
}

.plk-hero-inner {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.plk-hero-heading {
    align-items: center;
    display: flex;
    gap: 16px;
}

.plk-app-icon {
    border-radius: 12px;
    display: block;
    flex-shrink: 0;
    height: 52px;
    width: 52px;
}

.plk-hero-kicker {
    color: rgba(255,255,255,.75);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.plk-hero h1 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 7px;
}

.plk-hero-sub {
    color: rgba(255,255,255,.8);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
    max-width: 620px;
}

.plk-hero-badge {
    align-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 5px;
    min-width: 170px;
    padding: 14px 18px;
    text-align: center;
}

.plk-status-dot {
    background: #fbbf24;
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    width: 10px;
}

.plk-status-dot.is-on { background: #4ade80; }

.plk-hero-badge strong {
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.plk-hero-badge span {
    color: rgba(255,255,255,.7);
    font-size: 11.5px;
}

/* ── Card ─────────────────────────────────────────────────── */
.plk-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    margin-bottom: 18px;
    overflow: hidden;
}

.plk-card-head {
    align-items: center;
    border-bottom: 1px solid #f0f4f8;
    display: flex;
    gap: 14px;
    padding: 16px 22px;
}

.plk-card-head-icon {
    align-items: center;
    background: #eff6ff;
    border-radius: 8px;
    color: #2563eb;
    display: flex;
    flex-shrink: 0;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.plk-card-head-icon svg { height: 18px; width: 18px; }

.plk-card-head-text h2 {
    font-size: 14.5px;
    font-weight: 700;
    margin: 0 0 2px;
}

.plk-card-head-text p {
    color: #64748b;
    font-size: 12.5px;
    margin: 0;
}

.plk-card-body { padding: 22px; }

.plk-card-foot {
    background: #f8fafc;
    border-top: 1px solid #f0f4f8;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 13px 22px;
}

/* ── Notice ──────────────────────────────────────────────── */
.plk-notice {
    align-items: center;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
    border-radius: 7px;
    display: flex;
    gap: 10px;
    margin: 0 0 18px;
    padding: 11px 16px;
}

.plk-notice p { color: #15803d; font-size: 13px; margin: 0; }
.plk-notice.is-error { background: #fef2f2; border-color: #fca5a5; border-left-color: #dc2626; }
.plk-notice.is-error p { color: #991b1b; }
.plk-notice.is-info { background: #eff6ff; border-color: #bfdbfe; border-left-color: #2563eb; }
.plk-notice.is-info p { color: #1e40af; }

/* ── Connection mode tiles ────────────────────────────────── */
.plk-mode-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
    margin-top: 4px;
}

.plk-mode-tile {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    padding: 18px;
    position: relative;
    transition: border-color .15s, box-shadow .15s;
    user-select: none;
}

.plk-mode-tile:hover { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(37,99,235,.07); }
.plk-mode-tile.is-active { background: #eff6ff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.11); }

.plk-mode-tile input[type="radio"] { left: -9999px; position: absolute; }

.plk-mode-tile-top {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.plk-mode-tile-icon {
    align-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    color: #64748b;
    display: flex;
    flex-shrink: 0;
    height: 36px;
    justify-content: center;
    transition: background .15s, color .15s;
    width: 36px;
}

.plk-mode-tile.is-active .plk-mode-tile-icon { background: #dbeafe; color: #2563eb; }
.plk-mode-tile-icon svg { height: 17px; width: 17px; }

.plk-mode-tile-labels { flex: 1; }
.plk-mode-tile-labels strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.plk-mode-tile-labels span { color: #64748b; font-size: 11.5px; }

.plk-badge-rec {
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 999px;
    color: #92400e;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 9px;
    text-transform: uppercase;
}

.plk-mode-check {
    align-items: center;
    background: #e2e8f0;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 20px;
    justify-content: center;
    margin-left: auto;
    transition: background .15s;
    width: 20px;
}

.plk-mode-tile.is-active .plk-mode-check { background: #2563eb; }

.plk-mode-check-dot {
    background: #fff;
    border-radius: 50%;
    height: 7px;
    transform: scale(0);
    transition: transform .15s;
    width: 7px;
}

.plk-mode-tile.is-active .plk-mode-check-dot { transform: scale(1); }

.plk-mode-tile-desc {
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.55;
    margin: 0;
}

/* ── Mode content panels ──────────────────────────────────── */
.plk-mode-content { margin-top: 18px; }
.plk-mode-content[hidden] { display: none; }

/* ── Onboarding launch ────────────────────────────────────── */
.plk-launch-box {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    padding: 20px 22px;
    text-align: center;
}

.plk-launch-box p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 16px;
}

/* ── Token input ──────────────────────────────────────────── */
.plk-field { margin-bottom: 16px; }
.plk-field label { color: #374151; display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.plk-field input[type="password"],
.plk-field input[type="text"] {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 7px;
    box-sizing: border-box;
    font-size: 13px;
    padding: 9px 12px;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}

.plk-field input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.11); outline: none; }
.plk-field-hint { color: #94a3b8; font-size: 12px; margin: 5px 0 0; }

/* ── Buttons ──────────────────────────────────────────────── */
.plk-btn {
    align-items: center;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    gap: 7px;
    padding: 9px 18px;
    text-decoration: none;
    transition: box-shadow .15s, transform .1s;
}

.plk-btn:active { transform: scale(.98); }
.plk-btn svg { height: 15px; width: 15px; }

.plk-btn-primary {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 2px 8px rgba(37,99,235,.28);
    color: #fff;
}

.plk-btn-primary:hover { box-shadow: 0 4px 14px rgba(37,99,235,.38); color: #fff; }

.plk-btn-outline {
    background: #fff;
    border: 1.5px solid #cbd5e1;
    color: #374151;
}

.plk-btn-outline:hover { background: #f8fafc; border-color: #94a3b8; color: #374151; }

.plk-btn-danger {
    background: #fff;
    border: 1.5px solid #fca5a5;
    color: #dc2626;
}

.plk-btn-danger:hover { background: #fef2f2; color: #dc2626; }

/* ── Two-column grid ──────────────────────────────────────── */
.plk-two-col {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr 1fr;
}

/* ── Status strip (connected) ─────────────────────────────── */
.plk-stats {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    margin-bottom: 18px;
}

.plk-stat {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 14px 18px;
}

.plk-stat-label { color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.plk-stat-value { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plk-stat-actions { align-items: center; flex-direction: row; gap: 8px; justify-content: flex-end; }

/* ── How it works (not connected) ─────────────────────────── */
.plk-steps {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.plk-steps li {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    padding: 14px 16px;
}

.plk-steps strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.plk-steps span:not(.plk-step-num) { color: #64748b; font-size: 12.5px; line-height: 1.5; }

.plk-step-num {
    align-items: center;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    height: 24px;
    justify-content: center;
    width: 24px;
}

/* ── Event family toggles ─────────────────────────────────── */
.plk-events-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.plk-event-row {
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 11px 14px;
    transition: border-color .15s;
}

.plk-event-row.is-on { background: #eff6ff; border-color: #93c5fd; }

.plk-event-row-info strong { display: block; font-size: 13px; font-weight: 600; }
.plk-event-row-info span { color: #64748b; font-size: 11.5px; }

/* iOS toggle */
.plk-toggle {
    cursor: pointer;
    display: block;
    flex-shrink: 0;
    height: 22px;
    position: relative;
    width: 42px;
}

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

.plk-toggle-track {
    background: #cbd5e1;
    border-radius: 999px;
    bottom: 0; left: 0; position: absolute; right: 0; top: 0;
    transition: background .2s;
}

.plk-toggle input:checked + .plk-toggle-track { background: #2563eb; }

.plk-toggle-thumb {
    background: #fff;
    border-radius: 50%;
    bottom: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    height: 16px;
    left: 3px;
    position: absolute;
    top: 3px;
    transition: transform .2s;
    width: 16px;
}

.plk-toggle input:checked ~ .plk-toggle-thumb { transform: translateX(20px); }

/* ── Test panel ───────────────────────────────────────────── */
.plk-test-row {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 140px 1fr;
    margin-bottom: 14px;
}

.plk-test-row label { color: #374151; display: block; font-size: 13px; font-weight: 600; margin-bottom: 0; }

.plk-test-row label select,
.plk-test-row label input {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    box-sizing: border-box;
    display: block;
    font-size: 13px;
    margin-top: 6px;
    padding: 8px 10px;
    width: 100%;
}

/* ── Request tracking ─────────────────────────────────────── */
.plk-filters {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 150px 190px auto auto;
    margin-bottom: 14px;
    padding: 13px 16px;
}

.plk-filters input,
.plk-filters select {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    padding: 7px 10px;
    width: 100%;
}

.plk-filters input:focus,
.plk-filters select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); outline: none; }

.plk-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.plk-table { border-collapse: collapse; font-size: 13px; width: 100%; }

.plk-table thead tr { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }

.plk-table th {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 10px 14px;
    text-align: left;
    text-transform: uppercase;
}

.plk-table td { border-top: 1px solid #f1f5f9; padding: 9px 14px; vertical-align: middle; }
.plk-table tbody tr:hover td { background: #fafbfc; }
.plk-table code { background: #f1f5f9; border-radius: 4px; font-size: 12px; padding: 2px 6px; }

/* Status pills */
.plk-pill {
    border-radius: 999px;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 2px 10px;
}

.plk-pill-sent     { background: #d1fae5; color: #065f46; }
.plk-pill-queued   { background: #fef3c7; color: #92400e; }
.plk-pill-retry    { background: #dbeafe; color: #1e40af; }
.plk-pill-duplicate{ background: #f3e8ff; color: #6b21a8; }
.plk-pill-failed   { background: #fee2e2; color: #991b1b; }
.plk-pill-default  { background: #f1f5f9; color: #475569; }

/* ── Utilities ────────────────────────────────────────────── */
.plk-sep { border: none; border-top: 1px solid #f0f4f8; margin: 18px 0; }
.plk-mt { margin-top: 16px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1040px) {
    .plk-mode-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .plk-hero-inner { align-items: flex-start; flex-direction: column; }
    .plk-hero-heading { align-items: flex-start; }
    .plk-hero-badge { min-width: unset; width: 100%; }
    .plk-two-col { grid-template-columns: 1fr; }
    .plk-stats { grid-template-columns: 1fr 1fr; }
    .plk-stat-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .plk-steps { grid-template-columns: 1fr; }
    .plk-test-row { grid-template-columns: 1fr; }
    .plk-filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .plk-filters { grid-template-columns: 1fr; }
}