// =============================================================
// Zypento plugin admin — shell + content panels
// =============================================================
// SHARED — sync to every Zypento plugin.
// Every plugin ships a byte-identical copy at
// `assets/css/src/admin-main.scss`. WP enqueue-handle dedup
// (`zypento-main`) picks one compiled `admin-main.css` to serve, so
// any drift makes styling load-order dependent. Edit this file →
// paste the same change into every other plugin's copy. See
// architecture/plugin-shell.md "Shared-assets drift contract".
//
// Three-column layout, Yoast-style. Adapted from
// examples/plugin-dashboard/04-a/. Variables defined inline
// rather than imported from mixin.scss because that legacy file
// holds an entirely different palette used by older partials.

// ----- Tokens ------------------------------------------------
$z-bg:              #ebebf2;
$z-surface:         #ffffff;
$z-surface-muted:   #fafafd;
$z-surface-tile:    #f7f7fb;
$z-line:            #e5e5ed;
$z-line-strong:     #d5d5e1;
$z-line-divider:    #ededf3;

$z-ink-1000: #1c1b2a;
$z-ink-800:  #2e2c44;
$z-ink-700:  #494762;
$z-ink-500:  #6f6c89;
$z-ink-300:  #b4b1c8;

$z-brand-50:  #f3eefe;
$z-brand-100: #e1d5fc;
$z-brand-200: #c8b6f9;
$z-brand-300: #ab94f5;
$z-brand-500: #6b54f0;
$z-brand-600: #5a40ea;
$z-brand-700: #4a32cf;
$z-brand-800: #371fa3;
$z-brand-900: #2b1b6a;

$z-success-50:  #e7f7ec;
$z-success-500: #1ba055;
$z-success-700: #0e6e3a;

$z-info-50:  #e8f1ff;
$z-info-500: #3c7df0;

$z-shadow-card:  0 1px 1px rgba(15, 15, 35, .04), 0 1px 2px rgba(15, 15, 35, .03);
$z-shadow-panel: 0 1px 2px rgba(15, 15, 35, .05), 0 4px 14px -10px rgba(15, 15, 35, .14);
$z-shadow-rail:  0 4px 14px -8px rgba(15, 15, 35, .15);

$z-radius-sm: 6px;
$z-radius-md: 10px;
$z-radius-lg: 8px;

$z-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;

// ----- WP admin host reset ----------------------------------
.toplevel_page_zypento {
    #wpcontent {
        background: $z-bg;
        padding-left: 0;
        min-height: 100vh;
    }
    #wpbody-content { padding-bottom: 0; }
}

// ----- Shell layout -----------------------------------------
// Full width — fills whatever the WP content area gives us.
// No max-width / centering, no horizontal "wasted" gutters.
// Matches the Yoast pattern.
.zypento-layout {
    display: grid;
    grid-template-columns: 244px 1fr 320px;
    gap: 24px;
    padding: 24px 28px 60px;
    align-items: start;
    font-family: $z-font;
    font-size: 14px;
    line-height: 1.55;
    color: $z-ink-1000;
    -webkit-font-smoothing: antialiased;

    * { box-sizing: border-box; }

    @media (max-width: 1180px) {
        grid-template-columns: 220px 1fr;
        .zypento-rail-right { display: none; }
    }
    @media (max-width: 820px) {
        grid-template-columns: 1fr;
        padding: 16px 18px 40px;
        .zypento-rail-left {
            position: static;
            max-height: none;
        }
    }
}

// ----- Left rail --------------------------------------------
.zypento-rail-left {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 4px 4px 16px;
}
.zypento-rail-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px 14px;
}
.zypento-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, $z-brand-500, #8e74ff);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset,
                0 4px 12px -4px rgba(75, 50, 207, .35);
}
.zypento-brand-name {
    color: $z-brand-900;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 36px;
    display: inline-block;
}

.zypento-nav-group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.zypento-nav-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: $z-ink-500;
    padding: 6px 12px 6px;
    margin-bottom: 2px;
}
.zypento-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13.5px;
    color: $z-ink-700;
    border-radius: $z-radius-sm;
    cursor: pointer;
    line-height: 1.3;
    font-weight: 500;
    user-select: none;
    text-decoration: none;
    position: relative;

    svg {
        width: 16px;
        height: 16px;
        color: $z-ink-500;
        flex-shrink: 0;
    }
    &:hover {
        background: $z-surface;
        color: $z-ink-1000;
    }
    &[data-active="yes"] {
        background: $z-brand-50;
        color: $z-brand-700;
        font-weight: 600;
        svg { color: $z-brand-600; }
    }
    .zypento-nav-tag {
        margin-left: auto;
        font-size: 9.5px;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 4px;
        letter-spacing: .03em;

        &.is-pro {
            background: $z-brand-50;
            color: $z-brand-700;
            border: 1px solid $z-brand-100;
        }
        &.is-new {
            background: $z-success-50;
            color: $z-success-700;
        }
    }
}

// ----- Middle shell -----------------------------------------
.zypento-col-main { min-width: 0; }
.zypento-shell {
    background: $z-surface;
    border: 1px solid $z-line;
    border-radius: $z-radius-lg;
    box-shadow: $z-shadow-panel;
    padding: 30px 36px 32px;

    @media (max-width: 820px) { padding: 22px 20px 26px; }
}

.zypento-panel {
    display: none;
    &[data-active="yes"] { display: block; }
}
.zypento-panel-head {
    padding-bottom: 22px;
    margin-bottom: 8px;
    border-bottom: 1px solid $z-line-divider;
    h1 {
        margin: 0 0 6px;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.01em;
    }
    p {
        margin: 0;
        font-size: 14px;
        color: $z-ink-500;
    }
}
.zypento-section-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    padding: 26px 0;
    border-bottom: 1px solid $z-line-divider;
    &:first-of-type { padding-top: 22px; }
    &:last-of-type  { border-bottom: 0; padding-bottom: 12px; }

    @media (max-width: 820px) {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 20px 0;
    }
    .zypento-section-desc {
        h3 {
            margin: 0 0 6px;
            font-size: 15.5px;
            font-weight: 700;
            letter-spacing: -.005em;
        }
        p {
            margin: 0;
            font-size: 13px;
            color: $z-ink-500;
            line-height: 1.6;
        }
        a {
            color: $z-brand-700;
            font-weight: 600;
            text-decoration: none;
            &:hover { text-decoration: underline; }
        }
        .zypento-pro-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: $z-brand-50;
            color: $z-brand-700;
            font-size: 10.5px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 999px;
            text-transform: uppercase;
            letter-spacing: .04em;
            margin-left: 6px;
            border: 1px solid $z-brand-100;
        }
    }
    .zypento-section-ctrl { min-width: 0; }
}

.zypento-ctrl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    &:last-child { margin-bottom: 0; }
}
.zypento-ctrl-label {
    font-weight: 600;
    font-size: 13.5px;
    color: $z-ink-1000;
}
.zypento-ctrl-hint {
    font-size: 12.5px;
    color: $z-ink-500;
    margin-top: 6px;
    line-height: 1.55;
}

.zypento-input {
    width: 100%;
    max-width: 520px;
    padding: 10px 12px;
    background: $z-surface;
    border: 1px solid $z-line-strong;
    border-radius: $z-radius-sm;
    font: inherit;
    font-size: 14px;
    color: $z-ink-1000;
    &:focus {
        outline: 0;
        border-color: $z-brand-500;
        box-shadow: 0 0 0 3px $z-brand-50;
    }
    &.is-mono {
        font-family: "SF Mono", Menlo, Consolas, monospace;
        font-size: 13px;
    }
}

.zypento-toggle {
    width: 42px;
    height: 24px;
    background: $z-line-strong;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .14s;
    &::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.22);
        transition: transform .16s;
    }
    &[data-on="yes"] {
        background: $z-brand-600;
        &::after { transform: translateX(18px); }
    }
}

// Flat callout — uniform border, solid bg tint, no left accent
// bar, no gradient. Reads as a calm "heads up" rather than an
// alert. Used by the lawful-basis reminder in Privacy & capture.
.zypento-locked {
    padding: 14px 16px;
    border: 1px solid $z-brand-100;
    background: $z-brand-50;
    border-radius: $z-radius-md;
    margin-top: 8px;
    .zypento-locked-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }
    .zypento-locked-msg {
        font-size: 13px;
        color: $z-brand-800;
        font-weight: 500;
    }
}

.zypento-btn {
    font: inherit;
    cursor: pointer;
    border: 0;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    display: inline-block;

    &.is-primary {
        background: $z-brand-600;
        color: #fff;
        &:hover { background: $z-brand-700; }
    }
    &.is-ghost {
        background: transparent;
        color: $z-ink-700;
        border: 1px solid $z-line-strong;
        &:hover { color: $z-ink-1000; background: $z-surface-muted; }
    }
    &.is-pro {
        background: $z-brand-700;
        color: #fff;
        padding: 8px 18px;
        font-weight: 700;
        font-size: 12.5px;
        &:hover { background: $z-brand-800; }
    }
}

.zypento-panel-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 0;
    margin-top: 18px;
    border-top: 1px solid $z-line-divider;
    gap: 10px;

    .zypento-msg {
        font-size: 12.5px;
        color: $z-ink-500;
        margin: 0;
        flex: 1;
        &[data-type="success"] { color: $z-success-700; }
        &[data-type="error"]   { color: #c14244; }
    }
}

.zypento-field-error {
    color: #c14244;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
}

// ===== Dashboard panel placeholders =========================
.zypento-hello {
    padding: 4px 0 22px;
    border-bottom: 1px solid $z-line-divider;
    margin-bottom: 20px;
    h2 {
        margin: 0 0 6px;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -.005em;
    }
    p { margin: 0; color: $z-ink-500; }
}

.zypento-tile-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
    @media (max-width: 820px) { grid-template-columns: 1fr; }
}
.zypento-tile {
    background: $z-surface-tile;
    border: 1px solid $z-line;
    border-radius: $z-radius-lg;
    padding: 18px 20px;
    h3 {
        margin: 0 0 14px;
        font-size: 13.5px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .zypento-tile-more {
            font-weight: 500;
            font-size: 12px;
            color: $z-brand-600;
            text-decoration: none;
            &:hover { text-decoration: underline; }
        }
    }
}
.zypento-kpi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: center;
}
.zypento-kpi-num {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
}
.zypento-kpi-cap {
    font-size: 12px;
    color: $z-ink-500;
    margin-top: 2px;
}

.zypento-donut {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: conic-gradient($z-line-strong 0deg 360deg);
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    &::after {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: 50%;
        background: $z-surface-tile;
    }
    .zypento-donut-text {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 13px;
        font-weight: 700;
        color: $z-ink-1000;
        z-index: 1;
    }
}
.zypento-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: $z-ink-700;
    .zypento-legend-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .zypento-legend-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }
}

// Empty-state inside a dashboard tile when there's no data yet.
.zypento-empty-state {
    text-align: center;
    padding: 8px 6px;
    color: $z-ink-500;
    font-size: 12.5px;
    line-height: 1.55;
    p { margin: 0 0 4px; }
    p:last-child { margin: 0; }
    strong { color: $z-ink-1000; }
}

// Connect-your-store empty card — shown when the dashboard-stats
// endpoint returns not_connected. Sits above the (hidden) stats
// grid until credentials land.
.zypento-empty-state-card {
    background: $z-brand-50;
    border: 1px solid $z-brand-100;
    border-radius: $z-radius-lg;
    padding: 24px 26px;
    margin-bottom: 18px;
    h3 {
        margin: 0 0 6px;
        font-size: 16px;
        font-weight: 700;
        color: $z-brand-900;
    }
    p {
        margin: 0 0 14px;
        color: $z-ink-700;
        font-size: 13.5px;
        line-height: 1.55;
    }
    .zypento-btn { margin-top: 4px; }
}

// KPI block inside a dashboard tile
.zypento-kpi-block {
    margin-bottom: 16px;
    &:last-child { margin-bottom: 0; }
    &.zypento-kpi-block-sub {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid $z-line;
    }
}
.zypento-kpi-num-sm { font-size: 22px; }

// Footer inside a tile (e.g. "Total tracked (30d): X")
.zypento-tile-foot {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid $z-line;
    font-size: 12.5px;
    color: $z-ink-500;
    strong { color: $z-ink-1000; font-weight: 700; }
}

// Loading / error slot used by dashboard.js
.zypento-stats-msg {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: $z-radius-md;
    background: $z-surface-muted;
    color: $z-ink-500;
    font-size: 12.5px;
    &[data-type="error"] {
        color: #c14244;
        background: lighten(#c14244, 38%);
    }
}

// Status-mix legend dot colour variants. Used by the Cart status
// mix tile. Colours map to the four buckets in cart_recovery.status_mix.
.zypento-legend-dot {
    &.is-recovered { background: $z-success-500; }
    &.is-inflight  { background: $z-brand-300;   }
    &.is-awaiting  { background: $z-info-500;    }
    &.is-cooled    { background: $z-line-strong; }
}

// ===== Right rail ============================================
.zypento-rail-right {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

// Generic rail card wrapper — plugins emit elements with this
// class so the tab-swap JS can scope visibility via
// data-rail-scope (omitted/'*' = always visible).
.zypento-rail-card {
    background: $z-surface;
    border: 1px solid $z-line;
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: $z-shadow-card;

    h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; }
    p {
        margin: 0 0 10px;
        font-size: 12.5px;
        color: $z-ink-500;
        line-height: 1.55;
    }
    a {
        display: block;
        font-size: 13px;
        color: $z-brand-600;
        font-weight: 600;
        text-decoration: none;
        padding: 6px 0;
        border-bottom: 1px solid $z-line;
        &:last-child { border-bottom: 0; }
        &:hover { color: $z-brand-700; }
        &::after { content: " →"; opacity: .6; }
    }

    &.is-help { background: $z-surface-muted; }

    // Pro upsell — rendered by the shell. Flat, brand-tinted bg.
    &.is-pro {
        background: $z-brand-50;
        border-color: $z-brand-100;

        h3 {
            font-size: 15.5px;
            color: $z-brand-900;
            display: flex;
            align-items: center;
            gap: 8px;
            .zypento-crown {
                background: $z-brand-700;
                width: 22px;
                height: 22px;
                border-radius: 6px;
                display: grid;
                place-items: center;
                color: #fff;
                font-size: 12.5px;
            }
        }
        .zypento-pro-tag { margin: 0 0 12px; font-size: 12px; color: $z-ink-500; }
        ul {
            list-style: none;
            padding: 0;
            margin: 0 0 14px;
            display: grid;
            gap: 7px;
            font-size: 13px;
            color: $z-ink-700;
            li {
                display: grid;
                grid-template-columns: 16px 1fr;
                gap: 8px;
                align-items: start;
                line-height: 1.45;
                svg {
                    width: 14px;
                    height: 14px;
                    color: $z-brand-600;
                    margin-top: 2px;
                }
            }
        }
        .zypento-pro-cta {
            display: block;
            text-align: center;
            background: $z-brand-700;
            color: #fff;
            border-radius: 999px;
            padding: 10px;
            font-weight: 700;
            text-decoration: none;
            font-size: 13.5px;
            border-bottom: 0;
            &:hover { background: $z-brand-800; color: #fff; }
            &::after { content: ""; }
        }
        .zypento-pro-fine {
            text-align: center;
            font-size: 11px;
            color: $z-ink-500;
            margin: 8px 0 0;
        }
    }
}