/* ═══════════════════════════════════════════════════════════════
   COMPRAS — PREMIUM UI SYSTEM
   CSS puro · sin Bootstrap
   Inspirado en el lenguaje visual del módulo Lista de Precios
   Prefijo: pp-
   ═══════════════════════════════════════════════════════════════ */

:root {
    --pp-bg: #f4f8fc;
    --pp-surface: #ffffff;
    --pp-surface-soft: #f7faff;
    --pp-surface-blue: #eef5ff;
    --pp-border: #dce5f1;
    --pp-border-soft: #eaf0f7;
    --pp-text: #182235;
    --pp-text-strong: #0f172a;
    --pp-muted: #64748b;
    --pp-muted-2: #94a3b8;
    --pp-primary: #3b82f6;
    --pp-primary-dark: #2563eb;
    --pp-primary-deep: #1d4ed8;
    --pp-primary-soft: #dbeafe;
    --pp-violet: #8b5cf6;
    --pp-violet-soft: #ede9fe;
    --pp-success: #10b981;
    --pp-success-dark: #059669;
    --pp-success-soft: #d1fae5;
    --pp-warning: #f59e0b;
    --pp-warning-dark: #b45309;
    --pp-warning-soft: #fef3c7;
    --pp-danger: #ef4444;
    --pp-danger-dark: #dc2626;
    --pp-danger-soft: #fee2e2;
    --pp-cyan: #06b6d4;
    --pp-slate: #475569;
    --pp-radius-xs: 8px;
    --pp-radius-sm: 11px;
    --pp-radius: 16px;
    --pp-radius-lg: 20px;
    --pp-radius-xl: 24px;
    --pp-shadow-xs: 0 1px 3px rgba(15, 23, 42, .04);
    --pp-shadow-sm: 0 8px 24px rgba(15, 23, 42, .055);
    --pp-shadow: 0 16px 42px rgba(15, 23, 42, .075);
    --pp-shadow-lg: 0 28px 70px rgba(15, 23, 42, .12);
    --pp-transition: .2s cubic-bezier(.4, 0, .2, 1);
    --pp-spring: .35s cubic-bezier(.16, 1, .3, 1);
}

/* ──────────────────────────────────────────────────────────────
   FOUNDATION
   ────────────────────────────────────────────────────────────── */

@keyframes ppFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ppScaleIn {
    from {
        opacity: 0;
        transform: scale(.975);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ppSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ppPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(96,165,250,.45);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(96,165,250,0);
    }
}

@keyframes ppProgress {
    from {
        background-position: 180% 0;
    }

    to {
        background-position: -80% 0;
    }
}

* {
    box-sizing: border-box;
}

.pp-page {
    min-height: 100%;
    color: var(--pp-text);
    position: relative;
    animation: ppFadeUp .32s ease both;
}

    .pp-page::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
    }

.pp-container {
    width: min(100%, 1700px);
    margin: 0 auto;
    padding: 16px 0px;
}

.pp-content-surface {
    margin-top: 12px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    background: rgba(255,255,255,.82);
    box-shadow: var(--pp-shadow-sm);
    padding: 14px;
    backdrop-filter: blur(10px);
}

.pp-page-loader {
    min-height: 56vh;
    display: grid;
    place-items: center;
}

.pp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pp-primary-dark);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pp-eyebrow--light {
    color: rgba(255,255,255,.78);
}

.pp-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #93c5fd;
    animation: ppPulse 1.8s infinite;
}

.pp-text-center {
    text-align: center !important;
}

.pp-text-left {
    text-align: left !important;
}

.pp-text-right {
    text-align: right !important;
}

.pp-text-muted {
    color: var(--pp-muted-2) !important;
}

.pp-m-0 {
    margin: 0 !important;
}

.pp-mb-0 {
    margin-bottom: 0 !important;
}

.pp-ms-2 {
    margin-left: 8px !important;
}

.pp-p-0 {
    padding: 0 !important;
}

.pp-p-1 {
    padding: 5px !important;
}

.pp-pb-2 {
    padding-bottom: 8px !important;
}

.pp-grid-row {
    display: grid;
}

.pp-grid-full {
    grid-column: 1 / -1;
}

/* ──────────────────────────────────────────────────────────────
   BUTTONS / ICON ACTIONS
   ────────────────────────────────────────────────────────────── */

.pp-button,
.pp-hero-action,
.pp-back-button,
.pp-icon-action,
.pp-mini-apply,
.pp-link-button,
.pp-metric-link {
    font: inherit;
    appearance: none;
    border: 0;
    outline: 0;
    cursor: pointer;
}

.pp-button {
    min-height: 38px;
    padding: 0 14px;
    border-radius: var(--pp-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 750;
    transition: transform var(--pp-transition), box-shadow var(--pp-transition), background var(--pp-transition), border-color var(--pp-transition);
    white-space: nowrap;
}

    .pp-button:hover:not(:disabled) {
        transform: translateY(-1px);
    }

    .pp-button:active:not(:disabled) {
        transform: translateY(0);
    }

    .pp-button:disabled {
        opacity: .5;
        cursor: not-allowed;
        transform: none;
    }

.pp-button--sm {
    min-height: 31px;
    padding: 0 10px;
    font-size: .71rem;
    border-radius: 9px;
}

.pp-button--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--pp-primary), var(--pp-primary-dark));
    box-shadow: 0 8px 18px rgba(59,130,246,.2);
}

    .pp-button--primary:hover:not(:disabled) {
        box-shadow: 0 12px 25px rgba(59,130,246,.3);
    }

.pp-button--success {
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 8px 18px rgba(16,185,129,.18);
}

.pp-button--secondary {
    color: #334155;
    background: #fff;
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-xs);
}

    .pp-button--secondary:hover:not(:disabled) {
        background: #f8fafc;
        border-color: #c9d6e5;
    }

.pp-button--danger-soft {
    color: #b91c1c;
    background: #fff6f6;
    border: 1px solid #fecaca;
}

    .pp-button--danger-soft:hover:not(:disabled) {
        background: #fee2e2;
    }

.pp-button--danger {
    color: #fff;
    background: linear-gradient(135deg,#ef4444,#dc2626);
}

.pp-button--warning {
    color: #fff;
    background: linear-gradient(135deg,#f59e0b,#d97706);
}

.pp-back-button {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #475569;
    background: #fff;
    box-shadow: var(--pp-shadow-xs);
    transition: all var(--pp-transition);
}

    .pp-back-button:hover {
        color: var(--pp-primary-dark);
        border-color: #bfdbfe;
        background: #eff6ff;
        transform: translateX(-2px);
    }

.pp-icon-action {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    color: #64748b;
    background: #fff;
    border: 1px solid var(--pp-border);
    transition: all var(--pp-transition);
}

    .pp-icon-action:hover {
        transform: translateY(-1px);
        box-shadow: var(--pp-shadow-xs);
    }

.pp-icon-action--edit:hover {
    color: var(--pp-primary-dark);
    background: #eff6ff;
    border-color: #bfdbfe;
}

.pp-icon-action--approve {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

    .pp-icon-action--approve:hover {
        background: #d1fae5;
    }

.pp-icon-action--save {
    color: var(--pp-primary-dark);
    background: #eff6ff;
    border-color: #bfdbfe;
}

.pp-icon-action--danger {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}

    .pp-icon-action--danger:hover {
        background: #fee2e2;
    }

/* ──────────────────────────────────────────────────────────────
   BADGES / CHIPS / STATES
   ────────────────────────────────────────────────────────────── */

.pp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .69rem;
    font-weight: 750;
    border: 1px solid transparent;
    white-space: nowrap;
}

.pp-badge--primary, .pp-badge--primary-soft {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.pp-badge--success {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.pp-badge--warning, .pp-badge--warning-soft {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.pp-badge--danger {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}

.pp-badge--info {
    color: #0369a1;
    background: #f0f9ff;
    border-color: #bae6fd;
}

.pp-badge--secondary, .pp-badge--light {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.pp-badge--dark {
    color: #fff;
    background: linear-gradient(135deg,#1e293b,#0f172a);
}

.pp-document-chip,
.pp-location-chip,
.pp-currency-chip,
.pp-date-cell {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 650;
    white-space: nowrap;
}

.pp-document-chip {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
}

.pp-location-chip {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.pp-currency-chip {
    color: #6d28d9;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}

.pp-date-cell {
    color: #475569;
    background: #f8fafc;
}

.pp-status-icon {
    width: 27px;
    height: 27px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: .72rem;
}

.pp-status-icon--success {
    color: #047857;
    background: #d1fae5;
}

/* ──────────────────────────────────────────────────────────────
   COMMAND HERO / MAIN PURCHASE PAGE
   ────────────────────────────────────────────────────────────── */

.pp-command-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-radius-xl);
    background: linear-gradient(125deg, #0f244c 0%, #173b7a 48%, #315dca 100%);
    box-shadow: 0 24px 60px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.12);
    color: #fff;
    animation: ppScaleIn .38s ease both;
}

.pp-command-hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.pp-command-hero__glow--a {
    width: 420px;
    height: 420px;
    right: -160px;
    top: -240px;
    background: radial-gradient(circle,rgba(147,197,253,.38),transparent 68%);
}

.pp-command-hero__glow--b {
    width: 330px;
    height: 330px;
    left: 36%;
    bottom: -260px;
    background: radial-gradient(circle,rgba(196,181,253,.25),transparent 68%);
}

.pp-command-hero__main {
    position: relative;
    z-index: 1;
    min-height: 150px;
    padding: 24px 26px;
    display: grid;
    grid-template-columns: minmax(360px,1.35fr) minmax(340px,.95fr) auto;
    gap: 26px;
    align-items: center;
}

.pp-command-hero__identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.pp-command-hero__icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    background: linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 10px 28px rgba(15,23,42,.18);
}

.pp-command-hero__title {
    margin: 4px 0 0;
    font-size: 1.7rem;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-weight: 800;
}

.pp-command-hero__subtitle {
    margin: 8px 0 0;
    max-width: 560px;
    color: rgba(255,255,255,.78);
    font-size: .78rem;
    line-height: 1.55;
}

.pp-command-hero__metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    text-align: center;
}

.pp-hero-metric {
    padding: 10px 11px;
    border-radius: 13px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
}

.pp-hero-metric--warning {
    background: rgba(245,158,11,.12);
}

.pp-hero-metric--success {
    background: rgba(16,185,129,.12);
}

.pp-hero-metric__label {
    display: block;
    color: rgba(255,255,255,.68);
    font-size: .61rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pp-hero-metric__value {
    display: block;
    margin-top: 3px;
    font-size: 1.1rem;
    font-weight: 850;
}

.pp-command-hero__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 138px;
}

.pp-hero-action {
    height: 38px;
    padding: 0 13px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .73rem;
    font-weight: 750;
    transition: all var(--pp-transition);
}

    .pp-hero-action:hover {
        transform: translateY(-1px);
    }

.pp-hero-action--ghost {
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
}

    .pp-hero-action--ghost:hover {
        background: rgba(255,255,255,.14);
    }

.pp-hero-action--primary {
    color: #1d4ed8;
    background: #fff;
    box-shadow: 0 9px 20px rgba(15,23,42,.15);
}

/* ──────────────────────────────────────────────────────────────
   STAGE NAVIGATION
   ────────────────────────────────────────────────────────────── */

.pp-stage-navigation {
    margin-top: 12px;
    padding: 13px;
    border-radius: var(--pp-radius-lg);
    border: 1px solid var(--pp-border);
    background: rgba(255,255,255,.94);
    box-shadow: var(--pp-shadow-sm);
}

.pp-stage-navigation__intro {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 14px;
    padding: 2px 3px 11px;
}

    .pp-stage-navigation__intro h2 {
        margin: 2px 0 0;
        font-size: .98rem;
        color: var(--pp-text-strong);
    }

    .pp-stage-navigation__intro p {
        margin: 3px 0 0;
        color: var(--pp-muted-2);
        font-size: .69rem;
    }

.pp-stage-navigation__total {
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: .66rem;
    font-weight: 700;
}

.pp-stage-tabs {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 7px;
}

.pp-stage-tab {
    min-width: 0;
    min-height: 58px;
    padding: 8px;
    border: 1px solid #e4ebf4;
    border-radius: 13px;
    background: #fbfdff;
    color: #475569;
    display: grid;
    grid-template-columns: 28px minmax(0,1fr) auto;
    gap: 7px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    transition: all var(--pp-spring);
}

    .pp-stage-tab:hover {
        transform: translateY(-2px);
        border-color: #c8dcf8;
        background: #f8fbff;
        box-shadow: 0 8px 20px rgba(15,23,42,.05);
    }

    .pp-stage-tab.active {
        border-color: #93c5fd;
        background: linear-gradient(180deg,#f8fbff,#eff6ff);
        box-shadow: 0 8px 20px rgba(59,130,246,.08), inset 0 0 0 1px rgba(59,130,246,.04);
    }

.pp-stage-tab__icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #2563eb;
    background: #eff6ff;
}

.pp-stage-tab__copy {
    min-width: 0;
}

    .pp-stage-tab__copy strong {
        display: block;
        color: #1e293b;
        font-size: .69rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pp-stage-tab__copy small {
        display: block;
        margin-top: 1px;
        color: #94a3b8;
        font-size: .58rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.pp-stage-tab__count {
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: .62rem;
    font-weight: 800;
}

    .pp-stage-tab__count.warning {
        color: #b45309;
        background: #fef3c7;
    }

    .pp-stage-tab__count.success {
        color: #047857;
        background: #d1fae5;
    }

    .pp-stage-tab__count.danger {
        color: #dc2626;
        background: #fee2e2;
    }

    .pp-stage-tab__count.info {
        color: #0369a1;
        background: #e0f2fe;
    }

    .pp-stage-tab__count.secondary {
        color: #475569;
        background: #e2e8f0;
    }

/* ──────────────────────────────────────────────────────────────
   SOFT HERO / WORKSPACE HEADER
   ────────────────────────────────────────────────────────────── */

.pp-soft-hero,
.pp-workspace-header,
.pp-view-header {
    border: 1px solid var(--pp-border);
    background: radial-gradient(circle at 92% 0, rgba(59,130,246,.08), transparent 28%), linear-gradient(180deg,#fff,#fbfdff);
    border-radius: var(--pp-radius-lg);
    box-shadow: var(--pp-shadow-sm);
}

.pp-soft-hero {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 18px 20px;
}

.pp-soft-hero__main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.pp-soft-hero__icon,
.pp-workspace-header__icon,
.pp-view-header__icon,
.pp-sales-panel__icon,
.pp-import-panel__icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #2563eb;
    font-size: 1.2rem;
    background: linear-gradient(135deg,#eff6ff,#dbeafe);
    box-shadow: 0 7px 16px rgba(59,130,246,.1);
}

.pp-soft-hero__icon--violet {
    color: #7c3aed;
    background: linear-gradient(135deg,#f5f3ff,#ede9fe);
}

.pp-soft-hero__copy h1 {
    margin: 2px 0 0;
    color: var(--pp-text-strong);
    font-size: 1.2rem;
    letter-spacing: -.02em;
}

.pp-soft-hero__copy p {
    margin: 5px 0 0;
    color: var(--pp-muted);
    font-size: .75rem;
    line-height: 1.45;
}

.pp-soft-hero__metric {
    margin-left: 10px;
    padding-left: 18px;
    border-left: 1px solid #e6edf6;
    display: flex;
    flex-direction: column;
}

    .pp-soft-hero__metric strong {
        color: var(--pp-primary-dark);
        font-size: 1.35rem;
        line-height: 1;
    }

    .pp-soft-hero__metric span {
        margin-top: 4px;
        color: var(--pp-muted-2);
        font-size: .62rem;
    }

.pp-soft-hero__actions {
    display: flex;
    gap: 8px;
}

.pp-workspace-header {
    overflow: hidden;
}

.pp-workspace-header__main {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 15px 18px 12px;
}

.pp-workspace-header__identity {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

    .pp-workspace-header__identity h1 {
        margin: 2px 0 0;
        color: var(--pp-text-strong);
        font-size: 1.12rem;
    }

    .pp-workspace-header__identity p {
        margin: 4px 0 0;
        color: var(--pp-muted-2);
        font-size: .69rem;
    }

.pp-workspace-header__summary {
    min-width: 180px;
    padding: 8px 12px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #f8fbff;
    text-align: right;
}

.pp-workspace-header__summary-label {
    display: block;
    color: #64748b;
    font-size: .6rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .05em;
}

.pp-workspace-header__summary strong {
    display: block;
    margin-top: 1px;
    color: #1d4ed8;
    font-size: 1.05rem;
}

.pp-workspace-header__summary small {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: .59rem;
}

.pp-workspace-toolbar {
    display: grid;
    grid-template-columns: minmax(280px,1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 18px 13px;
    border-top: 1px solid var(--pp-border-soft);
}

/* ──────────────────────────────────────────────────────────────
   SEARCH / FILTERS / FORMS
   ────────────────────────────────────────────────────────────── */

.pp-control,
.pp-select,
.pp-control-shell input,
.pp-control-shell select,
.pp-search-control input,
.pp-search-control select,
.pp-field input:not([type="checkbox"]):not([type="radio"]),
.pp-field select,
.pp-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #d8e2ef;
    border-radius: 11px;
    background: #fff;
    color: var(--pp-text-strong);
    font: inherit;
    font-size: .76rem;
    outline: 0;
    transition: border-color var(--pp-transition), box-shadow var(--pp-transition), background var(--pp-transition);
}

.pp-control,
.pp-select,
.pp-field input:not([type="checkbox"]):not([type="radio"]),
.pp-field select {
    min-height: 37px;
    padding: 0 10px;
}

.pp-control--sm {
    min-height: 31px !important;
    padding: 0 8px !important;
    font-size: .7rem !important;
    border-radius: 9px !important;
}

.pp-control:focus,
.pp-select:focus,
.pp-field input:focus,
.pp-field select:focus,
.pp-field textarea:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(59,130,246,.08);
}

.pp-control:disabled {
    background: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
}

.pp-control--numeric {
    text-align: center;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

    .pp-control--numeric.valid {
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

    .pp-control--numeric.invalid {
        background: #fff7f7;
        border-color: #fecaca;
    }

/* fallback for inline legacy validation still used by PurchaseCrud */
.pp-control[style*="#ff000030"] {
    background: #fff7f7 !important;
    border-color: #fecaca !important;
}

.pp-control[style*="#2dbb1a30"] {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

.pp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .pp-field > span:first-child {
        color: #52627a;
        font-size: .64rem;
        font-weight: 800;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

.pp-field--compact > span:first-child {
    font-size: .6rem;
}

.pp-field--warning .pp-control {
    background: #fffdf5;
    border-color: #fde68a;
}

.pp-field--success .pp-control {
    background: #f5fff9;
    border-color: #bbf7d0;
}

.pp-field--danger .pp-control {
    background: #fff8f8;
    border-color: #fecaca;
}

.pp-field--neutral .pp-control {
    background: #f8fafc;
}

.pp-textarea {
    min-height: 90px !important;
    padding: 10px 12px !important;
    resize: vertical;
    line-height: 1.5;
}

.pp-control-shell,
.pp-search-control {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d8e2ef;
    border-radius: 11px;
    background: #fff;
    padding: 0 10px;
    transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
}

    .pp-control-shell:focus-within,
    .pp-search-control:focus-within {
        border-color: #93c5fd;
        box-shadow: 0 0 0 4px rgba(59,130,246,.075);
    }

    .pp-control-shell > .app-emoji,
    .pp-search-control > .app-emoji {
        color: #94a3b8;
        font-size: .75rem;
        flex: 0 0 auto;
    }

    .pp-control-shell input,
    .pp-control-shell select,
    .pp-search-control input,
    .pp-search-control select {
        min-height: 34px;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none !important;
        background: transparent;
    }

.pp-search-control--large {
    min-height: 43px;
    margin-top: 10px;
}

.pp-search-control__clear {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #94a3b8;
    background: transparent;
    cursor: pointer;
}

    .pp-search-control__clear:hover {
        color: #475569;
        background: #f1f5f9;
    }

.pp-check {
    width: 16px;
    height: 16px;
    accent-color: var(--pp-primary);
    cursor: pointer;
}

.pp-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}

.pp-form-grid--3 {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.pp-filter-panel,
.pp-smart-filter {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: linear-gradient(180deg,#fff,#fbfdff);
    box-shadow: var(--pp-shadow-xs);
    padding: 13px 14px;
}

.pp-filter-panel--compact {
    margin-bottom: 10px;
}

.pp-filter-panel__heading,
.pp-smart-filter-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .pp-filter-panel__heading h3,
    .pp-smart-filter-head h3 {
        margin: 1px 0 0;
        color: var(--pp-text-strong);
        font-size: .84rem;
    }

    .pp-smart-filter-head p {
        margin: 3px 0 0;
        color: var(--pp-muted-2);
        font-size: .65rem;
    }

.pp-smart-eyebrow {
    color: var(--pp-primary-dark);
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.pp-smart-count {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #64748b;
    background: #f8fafc;
    font-size: .63rem;
    font-weight: 750;
    white-space: nowrap;
}

.pp-filter-panel__grid {
    margin-top: 9px;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px;
}

.pp-filter-panel__grid--2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.pp-parameter-filter {
    margin-top: 12px;
}

.pp-segmented-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: 11px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.pp-segmented-control__item {
    min-height: 31px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: #64748b;
    background: transparent;
    font-size: .7rem;
    font-weight: 750;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--pp-transition);
}

    .pp-segmented-control__item.active {
        color: #1d4ed8;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15,23,42,.06);
    }

    .pp-segmented-control__item.warning.active {
        color: #b45309;
    }

.pp-segmented-control__count {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e2e8f0;
    display: grid;
    place-items: center;
    font-size: .6rem;
}

.pp-segmented-control__item.active .pp-segmented-control__count {
    background: #dbeafe;
    color: #1d4ed8;
}

/* ──────────────────────────────────────────────────────────────
   TABLE SYSTEM
   ────────────────────────────────────────────────────────────── */

.pp-table-shell {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: #fff;
    box-shadow: var(--pp-shadow-sm);
    overflow: hidden;
}

.pp-table-shell__header {
    padding: 13px 15px;
    border-bottom: 1px solid var(--pp-border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

    .pp-table-shell__header h2 {
        margin: 2px 0 0;
        font-size: .92rem;
        color: var(--pp-text-strong);
    }

.pp-table-scroll {
    width: 100%;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .pp-table-scroll::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }

    .pp-table-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

.pp-table-scroll--tall {
    max-height: calc(100vh - 315px);
}

.pp-table-scroll--medium {
    max-height: 430px;
}

.pp-table-scroll--mini {
    max-height: 300px;
}

.pp-table-scroll--detail {
    max-width: 100%;
}

.pp-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: #334155;
    font-size: .73rem;
    background: #fff;
}

.pp-data-table--framed {
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    overflow: hidden;
}

.pp-data-table th,
.pp-data-table td {
    padding: 8px 9px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
}

.pp-data-table th {
    position: sticky;
    top: 0;
    z-index: 5;
    color: #64748b;
    background: linear-gradient(180deg,#fbfdff,#f5f8fc);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pp-data-table tbody tr {
    transition: background var(--pp-transition);
}

    .pp-data-table tbody tr:hover > td {
        background-color: #fbfdff;
    }

    .pp-data-table tbody tr.selected > td {
        background: #f0f7ff;
    }

.pp-data-table tfoot td {
    background: #f8fbff;
    border-top: 1px solid #dbeafe;
    border-bottom: 0;
    font-weight: 700;
}

.pp-data-table--compact th,
.pp-data-table--compact td {
    padding: 6px 7px;
    font-size: .68rem;
}

.pp-data-table--striped tbody tr:nth-child(even) > td {
    background: rgba(248,250,252,.58);
}

.pp-data-table--borderless td {
    border-bottom: 0;
}

.pp-row--primary > td, td.pp-row--primary {
    background: #eff6ff !important;
    color: #1e40af !important;
}

.pp-row--secondary > td, td.pp-row--secondary {
    background: #f8fafc !important;
}

.pp-row--light > td, td.pp-row--light {
    background: #fbfdff !important;
}

.pp-row--warning > td, td.pp-row--warning {
    background: #fffbeb !important;
}

.pp-row--success > td, td.pp-row--success {
    background: #f0fdf4 !important;
}

.pp-row--danger > td, td.pp-row--danger {
    background: #fef2f2 !important;
}

.pp-row--info > td, td.pp-row--info {
    background: #f0f9ff !important;
}

.pp-row--dark > td, td.pp-row--dark {
    background: #172033 !important;
    color: #fff !important;
}

.pp-cell--info {
    background: #f4f9ff !important;
}

.pp-cell--warning {
    background: #fffdf5 !important;
}

.pp-cell--success {
    background: #f5fff9 !important;
}

.pp-cell--danger {
    background: #fff8f8 !important;
}

.pp-cell--neutral {
    background: #f8fafc !important;
}

.pp-number-cell {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.pp-number-cell--money {
    color: #0f172a;
}

.pp-comment-cell {
    max-width: 460px;
    color: #64748b;
    line-height: 1.4;
}

.pp-product-thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: var(--pp-shadow-xs);
}

.pp-product-thumb--lg {
    width: 50px;
    height: 50px;
}

.pp-product-cell {
    min-width: 0;
}

    .pp-product-cell strong {
        display: block;
        color: #1e293b;
        font-size: .72rem;
    }

    .pp-product-cell small {
        display: block;
        margin-top: 2px;
        color: #94a3b8;
        font-size: .62rem;
        max-width: 310px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.pp-product-cell--image {
    width: 60px;
    text-align: center;
}

.pp-product-cell__top {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.pp-product-code {
    color: #1e293b;
    font-size: .72rem;
    font-weight: 750;
}

.pp-link-button, .pp-metric-link {
    padding: 0;
    color: var(--pp-primary-dark);
    background: transparent;
    text-decoration: none;
    font-weight: 750;
}

    .pp-link-button:hover, .pp-metric-link:hover {
        color: #1d4ed8;
        text-decoration: underline;
    }

/* ──────────────────────────────────────────────────────────────
   PENDING / STATE LISTS
   ────────────────────────────────────────────────────────────── */

.pp-pending-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.pp-pending-column {
    min-width: 0;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: linear-gradient(180deg,#fff,#fbfdff);
    overflow: hidden;
}

.pp-pending-column--international {
    background: linear-gradient(180deg,#fff,#fdfcff);
}

.pp-pending-column__header {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 13px 14px;
    border-bottom: 1px solid var(--pp-border-soft);
}

.pp-pending-column__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #2563eb;
    background: #eff6ff;
}

    .pp-pending-column__icon.violet {
        color: #7c3aed;
        background: #f5f3ff;
    }

.pp-pending-column__header h3 {
    margin: 1px 0 0;
    color: var(--pp-text-strong);
    font-size: .9rem;
}

.pp-pending-column__header p {
    margin: 3px 0 0;
    color: #94a3b8;
    font-size: .62rem;
}

.pp-pending-column__count {
    min-width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #1d4ed8;
    background: #eff6ff;
    font-weight: 850;
}

.pp-pending-group {
    border-bottom: 1px solid #edf2f7;
}

    .pp-pending-group:last-child {
        border-bottom: 0;
    }

.pp-pending-group__toggle {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: #fff;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto 18px;
    gap: 9px;
    align-items: center;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: background var(--pp-transition);
}

    .pp-pending-group__toggle:hover, .pp-pending-group.open .pp-pending-group__toggle {
        background: #fbfdff;
    }

.pp-pending-group__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

    .pp-pending-group__icon.warning {
        color: #b45309;
        background: #fffbeb;
    }

    .pp-pending-group__icon.violet {
        color: #7c3aed;
        background: #f5f3ff;
    }

.pp-pending-group__copy strong {
    display: block;
    color: #334155;
    font-size: .72rem;
}

.pp-pending-group__copy small {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: .6rem;
}

.pp-pending-group__count {
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: .64rem;
    font-weight: 800;
}

    .pp-pending-group__count.warning {
        color: #b45309;
        background: #fef3c7;
    }

    .pp-pending-group__count.violet {
        color: #6d28d9;
        background: #ede9fe;
    }

.pp-pending-group__body {
    padding: 0 10px 10px;
    animation: ppFadeUp .22s ease both;
}

.pp-order-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pp-order-row {
    display: grid;
    grid-template-columns: 130px 105px 120px 110px 34px;
    gap: 8px;
    align-items: center;
    min-height: 48px;
    padding: 6px 8px;
    border: 1px solid #e8eef6;
    border-radius: 11px;
    background: #fff;
    transition: all var(--pp-transition);
}

    .pp-order-row:hover {
        border-color: #d5e3f5;
        box-shadow: 0 5px 14px rgba(15,23,42,.04);
    }

.pp-order-row--wide {
    grid-template-columns: 34px 130px 90px 70px 105px 120px minmax(160px,1fr);
}

.pp-order-row__document {
    border: 0;
    background: #eff6ff;
    color: #1d4ed8;
    min-height: 30px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

    .pp-order-row__document:hover {
        background: #dbeafe;
    }

.pp-order-row__meta {
    min-width: 0;
}

    .pp-order-row__meta span {
        display: block;
        color: #94a3b8;
        font-size: .54rem;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .pp-order-row__meta strong {
        display: block;
        margin-top: 1px;
        color: #334155;
        font-size: .65rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.pp-order-row__comment {
    min-width: 0;
    color: #64748b;
    font-size: .64rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-brand-stage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-brand-stage-card {
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.pp-brand-stage-card__header {
    width: 100%;
    min-height: 56px;
    padding: 8px 12px;
    border: 0;
    background: #fff;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto 18px;
    gap: 9px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

    .pp-brand-stage-card.open .pp-brand-stage-card__header, .pp-brand-stage-card__header:hover {
        background: #fbfdff;
    }

.pp-brand-stage-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #2563eb;
    background: #eff6ff;
}

.pp-brand-stage-card__copy strong {
    display: block;
    color: #1e293b;
    font-size: .76rem;
}

.pp-brand-stage-card__copy small {
    display: block;
    color: #94a3b8;
    font-size: .6rem;
    margin-top: 1px;
}

.pp-brand-stage-card__count {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: .67rem;
    font-weight: 800;
}

.pp-brand-stage-card__body {
    padding: 0 10px 10px;
    animation: ppFadeUp .2s ease both;
}

.pp-state-workspace {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* ──────────────────────────────────────────────────────────────
   PARAMETER BRAND ACCORDION
   ────────────────────────────────────────────────────────────── */

.pp-brand-accordion {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-brand-card {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--pp-shadow-xs);
}

    .pp-brand-card.open {
        box-shadow: var(--pp-shadow-sm);
    }

.pp-brand-card__header {
    width: 100%;
    min-height: 62px;
    padding: 9px 13px;
    border: 0;
    background: linear-gradient(180deg,#fff,#fbfdff);
    display: grid;
    grid-template-columns: 26px minmax(0,1fr) auto;
    gap: 9px;
    align-items: center;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.pp-brand-card__chevron {
    color: #94a3b8;
    font-size: .67rem;
}

.pp-brand-card__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pp-brand-card__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #2563eb;
    background: #eff6ff;
}

.pp-brand-card__identity strong {
    display: block;
    color: #1e293b;
    font-size: .78rem;
}

.pp-brand-card__identity small {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: .61rem;
}

.pp-brand-card__count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #1d4ed8;
    font-size: .9rem;
    font-weight: 850;
}

    .pp-brand-card__count small {
        color: #94a3b8;
        font-size: .55rem;
        font-weight: 650;
        text-transform: uppercase;
    }

.pp-brand-card__body {
    border-top: 1px solid var(--pp-border-soft);
    padding: 8px;
    background: #fbfdff;
    animation: ppFadeUp .22s ease both;
}

.pp-switch {
    display: inline-flex;
    cursor: pointer;
}

.pp-switch__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pp-switch__track {
    width: 34px;
    height: 19px;
    padding: 2px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background var(--pp-transition);
}

.pp-switch__thumb {
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15,23,42,.18);
    transition: transform var(--pp-transition);
}

.pp-switch__input:checked + .pp-switch__track {
    background: linear-gradient(135deg,#3b82f6,#2563eb);
}

    .pp-switch__input:checked + .pp-switch__track .pp-switch__thumb {
        transform: translateX(15px);
    }

/* ──────────────────────────────────────────────────────────────
   VIEW / TRACKING
   ────────────────────────────────────────────────────────────── */

.pp-view-workspace {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp-view-header {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.pp-view-header__identity {
    display: flex;
    gap: 11px;
    align-items: center;
}

    .pp-view-header__identity h2 {
        margin: 2px 0 0;
        color: var(--pp-text-strong);
        font-size: 1rem;
    }

    .pp-view-header__identity p {
        margin: 3px 0 0;
        color: #94a3b8;
        font-size: .65rem;
    }

.pp-view-header__count {
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: .64rem;
    font-weight: 750;
}

.pp-state-divider td {
    position: sticky;
    top: 32px;
    z-index: 4;
    background: #f3f7fd !important;
    color: #334155;
    border-top: 1px solid #dbeafe;
    border-bottom: 1px solid #dbeafe;
    font-size: .65rem;
    letter-spacing: .03em;
}

.pp-state-divider__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    background: linear-gradient(135deg,#3b82f6,#8b5cf6);
}

.pp-tracking-table {
    min-width: 1120px;
}

/* ──────────────────────────────────────────────────────────────
   PURCHASE EDIT / BULK EDITOR
   ────────────────────────────────────────────────────────────── */

.pp-bulk-editor {
    margin-top: 11px;
    padding: 13px 14px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: linear-gradient(180deg,#fff,#fbfdff);
    box-shadow: var(--pp-shadow-xs);
}

.pp-bulk-editor__header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

    .pp-bulk-editor__header h2 {
        margin: 2px 0 0;
        font-size: .9rem;
        color: var(--pp-text-strong);
    }

    .pp-bulk-editor__header p {
        margin: 3px 0 0;
        color: #94a3b8;
        font-size: .64rem;
    }

.pp-selection-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    font-size: .64rem;
    font-weight: 750;
}

.pp-bulk-editor__grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 8px;
}

.pp-mini-apply {
    min-height: 25px;
    border-radius: 7px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: .59rem;
    font-weight: 750;
    transition: all var(--pp-transition);
}

    .pp-mini-apply:hover {
        color: #1d4ed8;
        border-color: #bfdbfe;
        background: #eff6ff;
    }

.pp-master-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: .67rem;
    font-weight: 700;
}

.pp-purchase-edit-table {
    min-width: 1180px;
}

/* ──────────────────────────────────────────────────────────────
   PURCHASE CRUD / PLANNING
   ────────────────────────────────────────────────────────────── */

.pp-planning-workspace {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp-plan-context {
    padding: 7px 10px;
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    background: #fff;
}

.pp-plan-context__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

    .pp-plan-context__badges .pp-badge {
        cursor: default;
    }

    .pp-plan-context__badges .pp-badge--success {
        cursor: pointer;
    }

.pp-planning-scroll {
    width: 100%;
    max-height: calc(100vh - 245px);
    overflow: auto;
    padding: 2px 3px 10px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.pp-product-plan-card {
    width: 100%;
    margin: 0 0 13px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--pp-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,.055);
    overflow: hidden;
    animation: ppFadeUp .3s ease both;
}

    .pp-product-plan-card > tbody > tr:first-child > td {
        padding: 10px;
        border-bottom: 1px solid var(--pp-border-soft);
        vertical-align: top;
    }

        .pp-product-plan-card > tbody > tr:first-child > td:first-child {
            background: radial-gradient(circle at 50% 20%,#f3f8ff,#fff 70%);
        }

.pp-product-plan-card__image {
    width: 118px;
    height: 118px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #e5ecf5;
    box-shadow: 0 7px 20px rgba(15,23,42,.055);
}

.pp-plan-detail-table {
    min-width: 1250px;
}

    .pp-plan-detail-table td {
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

        .pp-plan-detail-table td:first-child {
            text-align: left;
        }

.pp-product-config {
    height: 100%;
    padding: 2px;
}

.pp-product-config__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pp-product-config__identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .pp-product-config__identity strong {
        color: #1e293b;
        font-size: .78rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.pp-product-config__name {
    margin: 8px 0 10px;
    color: #64748b;
    font-size: .65rem;
    line-height: 1.45;
}

.pp-product-config__grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
}

.pp-readonly-value {
    min-height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.pp-last-purchase-panel {
    width: 100%;
}

.pp-last-purchase-panel__legend {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 5px;
}

.pp-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: .58rem;
    font-weight: 700;
}

.pp-legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 7px;
}

.pp-legend-item.info .pp-legend-dot {
    background: #60a5fa;
}

.pp-legend-item.warning .pp-legend-dot {
    background: #fbbf24;
}

.pp-last-purchase-table {
    min-width: 680px;
}

.pp-sticky-action {
    width: 100%;
    min-height: 45px;
    margin-top: 8px;
    border: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: .75rem;
    font-weight: 800;
    cursor: pointer;
    transition: all var(--pp-transition);
}

.pp-sticky-action--success {
    color: #fff;
    background: linear-gradient(135deg,#10b981,#059669);
    box-shadow: 0 10px 25px rgba(16,185,129,.18);
}

.pp-sticky-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(16,185,129,.25);
}

.pp-inactive-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pp-inactive-item {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--pp-border-soft);
    border-radius: 11px;
    background: #fff;
}

.pp-inactive-item__copy {
    min-width: 0;
}

    .pp-inactive-item__copy strong {
        display: block;
        color: #334155;
        font-size: .71rem;
    }

    .pp-inactive-item__copy span {
        display: block;
        margin-top: 2px;
        color: #94a3b8;
        font-size: .62rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ──────────────────────────────────────────────────────────────
   SALES PANEL
   ────────────────────────────────────────────────────────────── */

.pp-sales-panel {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--pp-shadow-sm);
}

.pp-sales-panel__header {
    padding: 13px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--pp-border-soft);
}

.pp-sales-panel__identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .pp-sales-panel__identity h3 {
        margin: 2px 0 0;
        color: #0f172a;
        font-size: .9rem;
    }

    .pp-sales-panel__identity p {
        margin: 2px 0 0;
        color: #94a3b8;
        font-size: .61rem;
    }

.pp-sales-panel__count {
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: .63rem;
    font-weight: 750;
}

.pp-sales-panel__search {
    padding: 9px 12px;
    background: #fbfdff;
    border-bottom: 1px solid var(--pp-border-soft);
}

/* ──────────────────────────────────────────────────────────────
   IMPORT PANEL
   ────────────────────────────────────────────────────────────── */

.pp-import-panel {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.pp-import-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.pp-import-panel__identity {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .pp-import-panel__identity h3 {
        margin: 2px 0 0;
        color: #0f172a;
        font-size: .94rem;
    }

    .pp-import-panel__identity p {
        margin: 3px 0 0;
        color: #94a3b8;
        font-size: .64rem;
    }

.pp-import-dropzone {
    min-height: 112px;
    padding: 14px;
    display: grid;
    grid-template-columns: 42px minmax(160px,1fr) minmax(180px,.9fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px dashed #bfd3ed;
    border-radius: 16px;
    background: radial-gradient(circle at 20% 20%,rgba(219,234,254,.52),transparent 35%),#fbfdff;
}

.pp-import-dropzone__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #2563eb;
    background: #eff6ff;
}

.pp-import-dropzone__copy strong {
    display: block;
    color: #334155;
    font-size: .74rem;
}

.pp-import-dropzone__copy span {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: .62rem;
}

.pp-file-input {
    width: 100%;
    color: #64748b;
    font-size: .66rem;
}

    .pp-file-input::file-selector-button {
        min-height: 31px;
        margin-right: 8px;
        border: 1px solid #dbe4ef;
        border-radius: 9px;
        color: #334155;
        background: #fff;
        font-weight: 700;
        cursor: pointer;
    }

.pp-selected-file {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid #bbf7d0;
    border-radius: 11px;
    color: #047857;
    background: #f0fdf4;
}

    .pp-selected-file > .app-emoji {
        flex: 0 0 auto;
    }

    .pp-selected-file strong {
        display: block;
        font-size: .7rem;
    }

    .pp-selected-file span {
        display: block;
        color: #65a30d;
        font-size: .59rem;
        margin-top: 1px;
    }

.pp-import-results {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}

.pp-import-result {
    padding: 9px 11px;
    border-radius: 11px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

    .pp-import-result span {
        display: block;
        color: #64748b;
        font-size: .59rem;
        text-transform: uppercase;
        font-weight: 800;
    }

    .pp-import-result strong {
        display: block;
        margin-top: 2px;
        color: #0f172a;
        font-size: 1rem;
    }

.pp-import-result--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.pp-import-result--info {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.pp-error-details {
    border: 1px solid #fecaca;
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
}

    .pp-error-details summary {
        padding: 9px 11px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #b91c1c;
        background: #fef2f2;
        cursor: pointer;
        font-size: .68rem;
        font-weight: 750;
    }

.pp-error-details__body {
    max-height: 290px;
    overflow: auto;
    padding: 10px 12px;
    color: #64748b;
    font-size: .65rem;
}

    .pp-error-details__body ul {
        margin: 0 0 9px;
        padding-left: 18px;
    }

/* ──────────────────────────────────────────────────────────────
   PROGRESS / SPINNER / ALERTS / EMPTY
   ────────────────────────────────────────────────────────────── */

.pp-spinner {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid rgba(59,130,246,.16);
    border-top-color: var(--pp-primary);
    animation: ppSpin .75s linear infinite;
}

.pp-spinner--sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.pp-spinner--large {
    width: 34px;
    height: 34px;
    border-width: 3px;
}

.pp-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.pp-progress__bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#3b82f6,#8b5cf6);
}

.pp-progress__bar--animated {
    background-size: 200% 100%;
    animation: ppProgress 1.3s linear infinite;
}

.pp-alert {
    padding: 9px 11px;
    border-radius: 11px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .68rem;
    line-height: 1.45;
    border: 1px solid;
}

.pp-alert--warning {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.pp-alert--danger {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.pp-alert--success {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.pp-alert--info {
    color: #1e40af;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.pp-empty-state {
    min-height: 180px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed #c9d7e8;
    border-radius: var(--pp-radius);
    background: radial-gradient(circle at top center,rgba(219,234,254,.48),transparent 38%),#fff;
}

.pp-empty-state__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 9px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #2563eb;
    background: #eff6ff;
    font-size: 1rem;
}

.pp-empty-state h3 {
    margin: 0;
    color: #0f172a;
    font-size: .84rem;
}

.pp-empty-state p {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: .65rem;
    line-height: 1.45;
}

.pp-empty-state .pp-button {
    margin-top: 12px;
}

.pp-empty-state--inline {
    min-height: 130px;
    border: 0;
    border-radius: 0;
}

.pp-empty-state--mini {
    min-height: 70px;
    padding: 12px;
}

    .pp-empty-state--mini p {
        margin: 0;
    }

/* ──────────────────────────────────────────────────────────────
   DIALOGS / MODAL CONTENT
   ────────────────────────────────────────────────────────────── */

.pp-form-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--pp-text);
}

.pp-dialog-loading {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #64748b;
}

    .pp-dialog-loading strong {
        margin-top: 5px;
        color: #334155;
        font-size: .82rem;
    }

    .pp-dialog-loading span:last-child {
        color: #94a3b8;
        font-size: .65rem;
    }

.pp-dialog-intro {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    background: linear-gradient(180deg,#fff,#fbfdff);
}

.pp-dialog-intro--compact {
    grid-template-columns: 48px minmax(0,1fr);
}

.pp-dialog-intro__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #2563eb;
    background: #eff6ff;
    font-size: 1.1rem;
}

.pp-dialog-intro h3 {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: .95rem;
}

.pp-dialog-intro p {
    margin: 3px 0 0;
    color: #94a3b8;
    font-size: .63rem;
    line-height: 1.45;
}

.pp-document-preview {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: .72rem;
    font-weight: 800;
}

.pp-form-section {
    padding: 12px 13px;
    border: 1px solid var(--pp-border-soft);
    border-radius: 14px;
    background: #fff;
}

.pp-form-section__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

    .pp-form-section__title > span {
        width: 27px;
        height: 27px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        color: #1d4ed8;
        background: #eff6ff;
        font-size: .61rem;
        font-weight: 850;
    }

    .pp-form-section__title strong {
        display: block;
        color: #334155;
        font-size: .72rem;
    }

    .pp-form-section__title small {
        display: block;
        margin-top: 1px;
        color: #94a3b8;
        font-size: .58rem;
    }

.pp-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.pp-dialog-actions--centered {
    justify-content: center;
}

.pp-choice-cards__grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.pp-choice-card {
    position: relative;
    min-height: 62px;
    display: grid;
    grid-template-columns: 32px minmax(0,1fr);
    gap: 9px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fbfdff;
    cursor: pointer;
    transition: all var(--pp-transition);
}

    .pp-choice-card:hover {
        border-color: #bfdbfe;
    }

    .pp-choice-card.active {
        border-color: #93c5fd;
        background: #eff6ff;
        box-shadow: inset 0 0 0 1px rgba(59,130,246,.05);
    }

.pp-choice-card__input {
    position: absolute;
    opacity: 0;
}

.pp-choice-card__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #2563eb;
    background: #dbeafe;
}

.pp-choice-card strong {
    display: block;
    color: #334155;
    font-size: .7rem;
}

.pp-choice-card small {
    display: block;
    margin-top: 1px;
    color: #94a3b8;
    font-size: .58rem;
}

.pp-confirm-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 6px 2px;
}

.pp-confirm-dialog__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 1.25rem;
}

.pp-confirm-dialog__copy {
    margin-top: 10px;
}

    .pp-confirm-dialog__copy h3 {
        margin: 3px 0 0;
        color: #0f172a;
        font-size: 1rem;
    }

    .pp-confirm-dialog__copy p {
        margin: 6px auto 14px;
        max-width: 520px;
        color: #64748b;
        font-size: .7rem;
        line-height: 1.55;
    }

/* ──────────────────────────────────────────────────────────────
   PROVIDER / RECIPIENT SELECTORS
   ────────────────────────────────────────────────────────────── */

.pp-provider-selector {
    position: relative;
}

.pp-provider-results {
    margin-top: 6px;
    max-height: 190px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(15,23,42,.1);
}

.pp-provider-result {
    width: 100%;
    min-height: 46px;
    padding: 6px 8px;
    border: 0;
    border-radius: 9px;
    display: grid;
    grid-template-columns: 32px minmax(0,1fr) 16px;
    gap: 8px;
    align-items: center;
    color: inherit;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: background var(--pp-transition);
}

    .pp-provider-result:hover {
        background: #f8fbff;
    }

.pp-provider-result__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #2563eb;
    background: #eff6ff;
}

.pp-provider-result__copy strong {
    display: block;
    color: #334155;
    font-size: .69rem;
}

.pp-provider-result__copy small {
    display: block;
    margin-top: 1px;
    color: #94a3b8;
    font-size: .58rem;
}

.pp-provider-result > .app-emoji {
    flex: 0 0 auto;
    opacity: .9;
}

.pp-selected-provider {
    margin-top: 7px;
    padding: 9px 10px;
    display: flex;
    gap: 9px;
    align-items: center;
    border: 1px solid #a7f3d0;
    border-radius: 11px;
    background: #f0fdf4;
}

.pp-selected-provider__icon {
    color: #059669;
}

.pp-selected-provider span {
    display: block;
    color: #65a30d;
    font-size: .55rem;
    text-transform: uppercase;
    font-weight: 800;
}

.pp-selected-provider strong {
    display: block;
    color: #166534;
    font-size: .69rem;
    margin-top: 1px;
}

.pp-selected-provider small {
    display: block;
    color: #65a30d;
    font-size: .58rem;
}

.pp-recipient-selector {
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    overflow: hidden;
}

.pp-recipient-selector__all {
    min-height: 48px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #f8fbff;
    border-bottom: 1px solid var(--pp-border-soft);
    cursor: pointer;
}

    .pp-recipient-selector__all strong {
        display: block;
        color: #334155;
        font-size: .68rem;
    }

    .pp-recipient-selector__all small {
        display: block;
        margin-top: 1px;
        color: #94a3b8;
        font-size: .56rem;
    }

.pp-recipient-selector__list {
    max-height: 200px;
    overflow: auto;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 4px;
}

.pp-recipient-selector--large .pp-recipient-selector__list {
    max-height: 310px;
}

.pp-recipient-option {
    min-height: 40px;
    display: grid;
    grid-template-columns: 18px 27px minmax(0,1fr);
    gap: 7px;
    align-items: center;
    padding: 5px 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: all var(--pp-transition);
}

    .pp-recipient-option:hover {
        border-color: #dbeafe;
        background: #f8fbff;
    }

.pp-recipient-option__avatar {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #64748b;
    background: #f1f5f9;
    font-size: .62rem;
}

.pp-recipient-option__name {
    min-width: 0;
    color: #475569;
    font-size: .64rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────
   LEGACY PURE-CSS MAPPED UTILITIES
   These are custom pp-* names used by retained business markup.
   ────────────────────────────────────────────────────────────── */

.pp-flex {
    display: flex;
}

.pp-between {
    justify-content: space-between;
}

.pp-justify-center {
    justify-content: center;
}

.pp-justify-end {
    justify-content: flex-end;
}

.pp-items-center {
    align-items: center;
}

.pp-items-start {
    align-items: flex-start;
}

.pp-gap-2 {
    gap: 8px;
}

.pp-gap-4 {
    gap: 16px;
}

.pp-block {
    display: block;
}

.pp-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.pp-mb-1 {
    margin-bottom: 4px;
}

.pp-mb-2 {
    margin-bottom: 8px;
}

.pp-mb-3 {
    margin-bottom: 12px;
}

.pp-mb-5 {
    margin-bottom: 20px;
}

.pp-mt-1 {
    margin-top: 4px;
}

.pp-mt-2 {
    margin-top: 8px;
}

.pp-mt-3 {
    margin-top: 12px;
}

.pp-me-1 {
    margin-right: 4px;
}

.pp-me-2 {
    margin-right: 8px;
}

.pp-my-1 {
    margin-top: 4px;
    margin-bottom: 4px;
}

.pp-p-2 {
    padding: 8px;
}

.pp-py-1 {
    padding-top: 4px;
    padding-bottom: 4px;
}

.pp-py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.pp-py-4 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.pp-px-1 {
    padding-left: 4px;
    padding-right: 4px;
}

.pp-ps-2 {
    padding-left: 8px;
}

.pp-fw-bold {
    font-weight: 800;
}

.pp-fw-semibold {
    font-weight: 700;
}

.pp-text-small {
    font-size: .72rem;
}

.pp-bg-soft {
    background: #f8fafc;
}

.pp-bg-primary {
    background: #eff6ff;
}

.pp-product-image {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.pp-shadow-sm {
    box-shadow: var(--pp-shadow-sm);
}

.pp-table-responsive {
    overflow: auto;
}

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

.pp-list__item {
    padding: 8px 10px;
    border-bottom: 1px solid #eef2f7;
}

.pp-list__item--action {
    cursor: pointer;
}

    .pp-list__item--action:hover {
        background: #f8fbff;
    }

.pp-label {
    color: #52627a;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pp-help {
    color: #94a3b8;
    font-size: .62rem;
}

.pp-card {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: #fff;
    box-shadow: var(--pp-shadow-sm);
}

.pp-card__body {
    padding: 14px;
}

.pp-card__title {
    margin: 0;
    color: #0f172a;
    font-size: .9rem;
}

.pp-align-middle {
    vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────── */

@media (max-width: 1380px) {
    .pp-command-hero__main {
        grid-template-columns: minmax(330px,1.2fr) minmax(310px,.9fr);
    }

    .pp-command-hero__actions {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
    }

    .pp-stage-tabs {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    .pp-bulk-editor__grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media (max-width: 1100px) {
    .pp-container {
        padding-inline: 12px;
    }

    .pp-command-hero__main {
        grid-template-columns: 1fr;
    }

    .pp-command-hero__metrics {
        max-width: 620px;
    }

    .pp-command-hero__actions {
        grid-column: auto;
        justify-content: flex-start;
    }

    .pp-stage-tabs {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .pp-pending-grid {
        grid-template-columns: 1fr;
    }

    .pp-workspace-header__main {
        grid-template-columns: auto minmax(0,1fr);
    }

    .pp-workspace-header__summary {
        grid-column: 2;
        text-align: left;
    }

    .pp-order-row, .pp-order-row--wide {
        grid-template-columns: 125px 1fr 34px;
    }

    .pp-order-row__meta:nth-of-type(n+2), .pp-order-row__comment {
        display: none;
    }

    .pp-import-dropzone {
        grid-template-columns: 42px 1fr auto;
    }

    .pp-file-input {
        grid-column: 2 / -1;
    }
}

@media (max-width: 820px) {
    .pp-container {
        padding: 10px 8px 22px;
    }

    .pp-command-hero__main {
        padding: 20px;
    }

    .pp-command-hero__metrics {
        grid-template-columns: repeat(3,1fr);
    }

    .pp-stage-tabs {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .pp-stage-navigation__intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .pp-soft-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .pp-soft-hero__actions {
        justify-content: flex-end;
    }

    .pp-workspace-toolbar {
        grid-template-columns: 1fr;
    }

    .pp-segmented-control {
        width: 100%;
    }

    .pp-segmented-control__item {
        flex: 1;
        justify-content: center;
    }

    .pp-filter-panel__grid, .pp-filter-panel__grid--2, .pp-form-grid--3 {
        grid-template-columns: 1fr;
    }

    .pp-bulk-editor__grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .pp-recipient-selector__list {
        grid-template-columns: 1fr;
    }

    .pp-dialog-intro {
        grid-template-columns: 48px minmax(0,1fr);
    }

    .pp-document-preview {
        grid-column: 2;
        justify-self: start;
    }

    .pp-import-dropzone {
        grid-template-columns: 42px 1fr;
    }

        .pp-import-dropzone .pp-button {
            grid-column: 1 / -1;
        }

    .pp-import-results {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .pp-command-hero__identity {
        align-items: flex-start;
    }

    .pp-command-hero__icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .pp-command-hero__title {
        font-size: 1.4rem;
    }

    .pp-command-hero__metrics {
        grid-template-columns: 1fr;
    }

    .pp-command-hero__actions {
        flex-direction: column;
    }

    .pp-stage-tabs {
        grid-template-columns: 1fr;
    }

    .pp-soft-hero__main {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .pp-soft-hero__metric {
        margin-left: 54px;
        padding-left: 0;
        border-left: 0;
    }

    .pp-workspace-header__main {
        grid-template-columns: auto 1fr;
        padding-inline: 12px;
    }

    .pp-workspace-header__icon {
        display: none;
    }

    .pp-workspace-header__summary {
        grid-column: 1 / -1;
    }

    .pp-workspace-toolbar {
        padding-inline: 12px;
    }

    .pp-bulk-editor__header, .pp-table-shell__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pp-bulk-editor__grid, .pp-form-grid, .pp-choice-cards__grid {
        grid-template-columns: 1fr;
    }

    .pp-order-row, .pp-order-row--wide {
        grid-template-columns: 1fr auto;
    }

    .pp-order-row__meta {
        display: none;
    }

    .pp-import-panel__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .pp-import-dropzone {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .pp-import-dropzone__icon {
        margin: 0 auto;
    }

    .pp-file-input {
        grid-column: auto;
    }

    .pp-dialog-actions {
        flex-direction: column-reverse;
    }

        .pp-dialog-actions .pp-button {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   FINAL POLISH / STRUCTURAL HELPERS
   ────────────────────────────────────────────────────────────── */
.pp-choice-cards {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pp-parameter-table {
    min-width: 1180px;
}

.pp-soft-hero--editing {
    border-color: #dbeafe;
    background: radial-gradient(circle at 92% 8%,rgba(139,92,246,.08),transparent 28%), linear-gradient(180deg,#fff,#fbfdff);
}

.pp-import-result--neutral {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.pp-product-plan-card__media-cell {
    width: 10%;
    min-width: 132px;
    vertical-align: top;
}

.pp-product-plan-card__config-cell {
    width: 25%;
    min-width: 300px;
    vertical-align: top;
}

.pp-product-plan-card__history-cell {
    width: 65%;
    vertical-align: top;
}

.pp-plan-col {
    width: 6.6%;
}

.pp-row--strong > td, .pp-cell--strong, .pp-cell-emphasis {
    font-weight: 800;
}

.pp-progress__bar--full {
    width: 100%;
}

.pp-col-product {
    width: 64px;
}

.pp-col-code, .pp-col-quantity {
    width: 120px;
}

.pp-col-action {
    width: 48px;
}

.pp-col-check {
    width: 42px;
}

/* ═══════════════════════════════════════════════════════
   PAGINATOR — Premium Azul (agregar al purchasePlanning.css)
   ═══════════════════════════════════════════════════════ */

.pp-paginator {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px;
    border-radius: 14px 14px 0 0;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    backdrop-filter: blur(14px);
    box-shadow: 0 -8px 30px rgba(15,23,42,.07);
    flex-wrap: wrap;
}

.pp-paginator__info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-paginator__count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: .72rem;
    font-weight: 750;
}

.pp-paginator__range {
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 600;
}

.pp-paginator__controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pp-paginator__size {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pp-paginator__select {
    min-height: 30px;
    padding: 2px 8px;
    border-radius: 8px;
    border: 1px solid #dbe4f0;
    background: #fff;
    color: #0f172a;
    font-size: .76rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

    .pp-paginator__select:focus {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59,130,246,.08);
    }

.pp-paginator__size-label {
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 600;
}

.pp-paginator__nav {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pp-paginator__btn {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
}

    .pp-paginator__btn:hover:not(:disabled):not(.active) {
        border-color: #bfdbfe;
        color: #2563eb;
        background: #f8fbff;
        transform: translateY(-1px);
    }

    .pp-paginator__btn.active {
        border-color: #2563eb;
        color: #fff;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        box-shadow: 0 4px 12px rgba(37,99,235,.2);
    }

    .pp-paginator__btn:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

.pp-paginator__dots {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 30px;
    color: #94a3b8;
    font-size: .76rem;
}

@media (max-width: 700px) {
    .pp-paginator {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .pp-paginator__info,
    .pp-paginator__controls {
        justify-content: center;
    }

    .pp-paginator__nav {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PURCHASE CRUD — PREMIUM READABILITY LAYER
   Mejora exclusiva para PurchaseCrud: más aire, guías visuales,
   pesos tipográficos suaves y lectura clara por columnas.
   ═══════════════════════════════════════════════════════════════ */

.pp-planning-workspace {
    gap: 14px;
}

    .pp-planning-workspace .pp-plan-context {
        padding: 10px 14px;
        border-color: #d9e4f1;
        border-radius: 14px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 4px 16px rgba(15, 23, 42, .035);
    }

    .pp-planning-workspace .pp-plan-context__badges {
        gap: 8px;
    }

        .pp-planning-workspace .pp-plan-context__badges .pp-badge {
            min-height: 27px;
            padding: 4px 11px;
            font-size: .68rem;
            font-weight: 650;
            letter-spacing: .005em;
        }

.pp-planning-scroll {
    padding: 4px 6px 14px;
}

/* Tarjeta de producto */
.pp-product-plan-card {
    margin-bottom: 18px;
    border-color: #d7e1ed;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .025), 0 12px 34px rgba(15, 23, 42, .06);
    transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}

    .pp-product-plan-card:hover {
        border-color: #c7d8ec;
        box-shadow: 0 2px 5px rgba(15, 23, 42, .03), 0 18px 46px rgba(15, 23, 42, .085);
    }

    .pp-product-plan-card > tbody > tr:first-child > td {
        padding: 15px 16px;
        border-bottom: 1px solid #dce6f1;
        background: #fff;
    }

        .pp-product-plan-card > tbody > tr:first-child > td + td {
            border-left: 1px solid #e4ebf3;
        }

        .pp-product-plan-card > tbody > tr:first-child > td:first-child {
            background: radial-gradient(circle at 50% 18%, rgba(219, 234, 254, .60), transparent 58%), linear-gradient(180deg, #fbfdff, #f7faff);
        }

.pp-product-plan-card__image {
    width: 126px;
    height: 126px;
    border-radius: 17px;
    border-color: #dfe8f2;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

/* Baja el ruido tipográfico de los bloques superiores */
.pp-product-plan-card .pp-product-config__identity strong {
    font-weight: 650;
    color: #172033;
}

.pp-product-plan-card .pp-product-config__name {
    color: #718096;
    font-size: .68rem;
    line-height: 1.55;
}

.pp-product-plan-card .pp-field > span:first-child,
.pp-product-plan-card .pp-field--compact > span:first-child {
    font-weight: 650;
    letter-spacing: .025em;
    color: #64748b;
}

.pp-product-plan-card .pp-readonly-value,
.pp-product-plan-card .pp-control--sm {
    min-height: 34px !important;
}

/* Tabla de planeación — lectura tipo grid premium */
.pp-plan-detail-table--premium {
    min-width: 1380px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #dce5f0;
    background: #fff;
}

    .pp-plan-detail-table--premium td {
        position: relative;
        height: 46px;
        padding: 9px 10px !important;
        border-bottom: 1px solid #e3eaf2 !important;
        border-right: 1px solid #e8eef5;
        color: #334155;
        font-size: .71rem !important;
        font-weight: 450;
        line-height: 1.25;
        background-clip: padding-box;
    }

        .pp-plan-detail-table--premium td:last-child {
            border-right: 0;
        }

        .pp-plan-detail-table--premium td p {
            margin: 0;
            font: inherit;
            color: inherit;
        }

    /* Encabezado: definido pero sin exceso de negrilla */
    .pp-plan-detail-table--premium .pp-plan-detail-table__header > td {
        height: 43px;
        padding: 8px 9px !important;
        color: #35516f !important;
        background: linear-gradient(180deg, #f7faff 0%, #eef4fa 100%) !important;
        border-bottom: 1px solid #cfdbea !important;
        border-right-color: #d9e3ee;
        font-size: .625rem !important;
        font-weight: 650 !important;
        letter-spacing: .035em;
        text-transform: uppercase;
        white-space: normal;
        line-height: 1.22;
    }

        .pp-plan-detail-table--premium .pp-plan-detail-table__header > td:first-child {
            padding-left: 14px !important;
        }

    /* Filas de datos */
    .pp-plan-detail-table--premium .pp-plan-detail-table__row > td {
        background: #fff;
    }

    .pp-plan-detail-table--premium .pp-plan-detail-table__row:nth-child(odd) > td {
        background: #fbfcfe;
    }

    .pp-plan-detail-table--premium .pp-plan-detail-table__row:hover > td {
        background: #f2f7fd !important;
    }

    .pp-plan-detail-table--premium .pp-plan-detail-table__row > td:first-child {
        padding-left: 14px !important;
        color: #25364d;
        font-weight: 600;
        background-image: linear-gradient(90deg, rgba(59, 130, 246, .045), transparent 80%);
    }

    /* Columnas clave: pequeñas guías de agrupación */
    .pp-plan-detail-table--premium tr > td:nth-child(2),
    .pp-plan-detail-table--premium tr > td:nth-child(6),
    .pp-plan-detail-table--premium tr > td:nth-child(9),
    .pp-plan-detail-table--premium tr > td:nth-child(12),
    .pp-plan-detail-table--premium tr > td:nth-child(14) {
        border-left: 1px solid #cbd8e6;
    }

    /* Métricas clicables: visibles sin parecer links pesados */
    .pp-plan-detail-table--premium .pp-metric-link {
        min-width: 30px;
        min-height: 28px;
        padding: 3px 7px;
        border: 1px solid transparent;
        border-radius: 8px;
        color: #2563eb;
        font-weight: 600;
        line-height: 1;
        transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

        .pp-plan-detail-table--premium .pp-metric-link:hover {
            color: #1d4ed8;
            background: #eff6ff;
            border-color: #cfe1fb;
            text-decoration: none;
            box-shadow: 0 2px 8px rgba(37, 99, 235, .08);
        }

    /* Inputs numéricos: más limpios y menos “bloque” */
    .pp-plan-detail-table--premium .pp-control--numeric {
        width: min(86px, 100%);
        min-height: 32px !important;
        margin: 0 auto;
        padding: 0 8px !important;
        border-radius: 9px !important;
        font-size: .71rem !important;
        font-weight: 600;
        box-shadow: inset 0 1px 1px rgba(15, 23, 42, .015);
    }

        .pp-plan-detail-table--premium .pp-control--numeric.valid {
            color: #166534;
            background: #f7fcf8;
            border-color: #ccebd4;
        }

        .pp-plan-detail-table--premium .pp-control--numeric.invalid {
            color: #991b1b;
            background: #fffafa;
            border-color: #f4cccc;
        }

    .pp-plan-detail-table--premium .pp-row--secondary,
    .pp-plan-detail-table--premium td.pp-row--secondary {
        background: #f4f7fb !important;
    }

    .pp-plan-detail-table--premium .pp-cell-emphasis {
        font-weight: 650 !important;
        color: #1d4ed8;
    }

    /* Botón Agregar: compacto y respirado */
    .pp-plan-detail-table--premium .pp-button--sm {
        min-height: 30px;
        padding: 0 11px;
        font-size: .66rem;
        font-weight: 650;
        box-shadow: none;
    }

    /* TOTAL: una banda clara, no una pared de badges */
    .pp-plan-detail-table--premium .pp-plan-detail-table__total > td {
        height: 48px;
        color: #1e3a5f !important;
        background: linear-gradient(180deg, #f3f8fe 0%, #edf5fd 100%) !important;
        border-top: 1px solid #c7d9ec;
        border-bottom: 0 !important;
        border-right-color: #d8e4f0;
        font-weight: 650 !important;
    }

        .pp-plan-detail-table--premium .pp-plan-detail-table__total > td:first-child {
            padding-left: 14px !important;
            color: #163963 !important;
            font-size: .66rem !important;
            letter-spacing: .04em;
        }

    .pp-plan-detail-table--premium .pp-plan-detail-table__total .pp-badge--primary-soft {
        min-width: 40px;
        min-height: 25px;
        padding: 3px 8px;
        color: #234e7d;
        background: rgba(255, 255, 255, .7);
        border-color: #d2dfed;
        font-size: .68rem;
        font-weight: 600;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
    }

    /* Evita que pp-row--strong vuelva a poner todo en 800 dentro de esta tabla */
    .pp-plan-detail-table--premium .pp-row--strong > td {
        font-weight: 650;
    }

    /* Primera columna con algo más de ancho; columnas monetarias respiran */
    .pp-plan-detail-table--premium tr > td:first-child {
        width: 9.5%;
    }

    .pp-plan-detail-table--premium tr > td:nth-child(11),
    .pp-plan-detail-table--premium tr > td:nth-child(14) {
        min-width: 106px;
    }

/* Scrollbar discreta y premium */
.pp-planning-scroll::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.pp-planning-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.pp-planning-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #cbd7e5;
    background-clip: padding-box;
}

    .pp-planning-scroll::-webkit-scrollbar-thumb:hover {
        background: #aebed1;
        background-clip: padding-box;
    }

@media (max-width: 1100px) {
    .pp-product-plan-card > tbody > tr:first-child > td {
        padding: 12px;
    }

    .pp-product-plan-card__image {
        width: 108px;
        height: 108px;
    }

    .pp-plan-detail-table--premium {
        min-width: 1320px;
    }
}

/* ============================================================
   ACCIONES DE ORDEN
   ============================================================ */

.pp-order-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: max-content;
}

.pp-icon-action--modify {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
}

    .pp-icon-action--modify:hover {
        background: #dbeafe;
        border-color: #93c5fd;
    }

.pp-icon-action--delete {
    color: #dc2626;
    background: #fff7f7;
    border-color: #fecaca;
}

    .pp-icon-action--delete:hover {
        color: #b91c1c;
        background: #fee2e2;
        border-color: #fca5a5;
    }

.pp-icon-action .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.pp-order-confirm {
    height: 30px;
    min-width: 34px;
    padding: 0 9px;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}

    .pp-order-confirm:hover {
        background: #f8fafc;
    }

.pp-order-confirm--danger {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
}

    .pp-order-confirm--danger:hover {
        background: #b91c1c;
        border-color: #b91c1c;
    }

/* ============================================================
   PURCHASE ORDER ACTIONS
   ============================================================ */

.pp-order-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: max-content;
}

.pp-icon-action--modify {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
}

    .pp-icon-action--modify:hover {
        color: #1d4ed8;
        background: #dbeafe;
        border-color: #93c5fd;
    }

.pp-icon-action--delete {
    color: #dc2626;
    background: #fff7f7;
    border-color: #fecaca;
}

    .pp-icon-action--delete:hover {
        color: #b91c1c;
        background: #fee2e2;
        border-color: #fca5a5;
    }

.pp-icon-action .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.pp-delete-confirmation {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px 3px 8px;
    background: #fff7f7;
    border: 1px solid #fecaca;
    border-radius: 10px;
}

.pp-delete-confirmation__text {
    color: #991b1b;
    font-size: .7rem;
    font-weight: 750;
    white-space: nowrap;
}

.pp-order-confirm {
    height: 28px;
    min-width: 32px;
    padding: 0 8px;
    border: 1px solid #dbe2ea;
    border-radius: 7px;
    background: #ffffff;
    color: #475569;
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .pp-order-confirm:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.pp-order-confirm--danger {
    color: #ffffff;
    background: #dc2626;
    border-color: #dc2626;
}

    .pp-order-confirm--danger:hover {
        color: #ffffff;
        background: #b91c1c;
        border-color: #b91c1c;
    }


/* ============================================================
   CURRENT PROVIDER - EDIT MODAL
   ============================================================ */

.pp-current-provider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.pp-current-provider__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .pp-current-provider__copy > span {
        color: #64748b;
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .pp-current-provider__copy > strong {
        color: #0f172a;
        font-size: .9rem;
        font-weight: 800;
    }

    .pp-current-provider__copy > small {
        color: #64748b;
        font-size: .72rem;
    }

.pp-current-provider__hint {
    max-width: 260px;
    color: #64748b;
    font-size: .72rem;
    line-height: 1.45;
    text-align: right;
}


@media (max-width: 720px) {
    .pp-current-provider {
        align-items: flex-start;
        flex-direction: column;
    }

    .pp-current-provider__hint {
        max-width: none;
        text-align: left;
    }

    .pp-order-row__actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}