.sp-dashboard {
        --sp-primary: #1e3a8a;
        --sp-border: #e2e8f0;
        --sp-muted: #64748b;
        --sp-card: #ffffff;
        --sp-page: #f8fafc;
        --sp-text: #0f172a;
        --sp-control-bg: #ffffff;
        --sp-control-text: #1e293b;
        --sp-table-head: #e2e8f0;
        --sp-table-head-text: #1e293b;
        --sp-table-head-border: #cbd5e1;
        --sp-footer: #f8fafc;
        --sp-shadow: rgba(15, 23, 42, 0.08);
        --sp-badge-bg: #e0e7ff;
        --sp-badge-text: #3730a3;
        --sp-gauge-track: #dbe4ef;
        --sp-action-text: #1d4ed8;
        --sp-control-hover: #1d4ed8;
        background: var(--sp-page);
        border-radius: 10px;
        color: var(--sp-text);
        color-scheme: light;
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
        min-height: calc(100vh - 180px);
        min-width: 0;
        overflow-x: hidden;
        padding: 14px;
    }

    .dark .sp-dashboard {
        --sp-primary: #11185f;
        --sp-border: #252a34;
        --sp-muted: #9ca3af;
        --sp-card: #111827;
        --sp-page: #030712;
        --sp-text: #f9fafb;
        --sp-control-bg: #0b1120;
        --sp-control-text: #f9fafb;
        --sp-table-head: #1f2937;
        --sp-table-head-text: #dbeafe;
        --sp-table-head-border: #364152;
        --sp-footer: #0b1120;
        --sp-shadow: rgba(0, 0, 0, 0.35);
        --sp-badge-bg: rgba(255, 255, 255, 0.09);
        --sp-badge-text: #ffffff;
        --sp-gauge-track: #27303d;
        --sp-action-text: #93c5fd;
        --sp-control-hover: #ffffff;
        color-scheme: dark;
    }

    .sp-header {
        align-items: center;
        background: var(--sp-primary);
        border-radius: 8px;
        color: #ffffff;
        display: flex;
        justify-content: flex-end;
        min-height: 52px;
        padding: 0 16px;
    }

    .sp-header nav {
        align-items: center;
        display: flex;
        gap: 8px;
    }

    .sp-header-tab {
        appearance: none;
        border: 0;
        border-radius: 6px;
        color: rgba(255, 255, 255, 0.72);
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        padding: 8px 10px;
    }

    .sp-header-tab-active {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }

    .sp-panel,
    .sp-card {
        background: var(--sp-card);
        border: 1px solid var(--sp-border);
        border-radius: 8px;
        box-shadow: 0 1px 3px var(--sp-shadow);
    }

    .sp-panel,
    .sp-card {
        min-width: 0;
        padding: 14px;
    }

    .sp-filter-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sp-field {
        color: var(--sp-text);
        display: flex;
        flex-direction: column;
        font-size: 12px;
        font-weight: 700;
        gap: 6px;
    }

    .sp-field select {
        background: var(--sp-control-bg);
        border: 1px solid var(--sp-border);
        border-radius: 6px;
        color: var(--sp-control-text);
        font-size: 13px;
        min-height: 36px;
        padding: 6px 10px;
        width: 100%;
    }

    .sp-week-grid {
        display: grid;
        gap: 12px;
        grid-auto-columns: minmax(320px, 1fr);
        grid-auto-flow: column;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .sp-card-head {
        align-items: flex-start;
        display: flex;
        gap: 12px;
        justify-content: space-between;
    }

    .sp-card-title {
        color: var(--sp-text);
        font-size: 15px;
        font-weight: 800;
        line-height: 1.2;
        margin: 0;
    }

    .sp-card-subtitle,
    .sp-small {
        color: var(--sp-muted);
        font-size: 11px;
        margin: 2px 0 0;
    }

    .sp-badge {
        background: var(--sp-badge-bg);
        border-radius: 6px;
        color: var(--sp-badge-text);
        font-size: 12px;
        font-weight: 800;
        padding: 4px 8px;
        white-space: nowrap;
    }

    .sp-badge-stack {
        display: grid;
        gap: 6px;
        justify-items: end;
    }

    .sp-gauge-row {
        align-items: flex-end;
        display: flex;
        gap: 14px;
        margin-top: 16px;
    }

    .sp-gauge {
        background: conic-gradient(from 270deg at 50% 100%, #00d21f 0 var(--sp-progress), var(--sp-gauge-track) 0 50%, transparent 0);
        border-radius: 999px 999px 0 0;
        flex: 0 0 132px;
        height: 66px;
    }

    .sp-kv {
        display: grid;
        font-size: 12px;
        gap: 8px;
    }

    .sp-kv dt {
        color: var(--sp-muted);
        margin: 0;
    }

    .sp-kv dd {
        color: var(--sp-text);
        font-weight: 800;
        margin: 0;
        white-space: nowrap;
    }

    .sp-kv .sp-green {
        color: #16a34a;
    }

    .sp-main-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(0, 1fr) 360px;
    }

    .sp-section-head {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .sp-section-title {
        color: var(--sp-text);
        font-size: 15px;
        font-weight: 800;
        margin: 0;
    }

    .sp-table-wrap {
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .sp-table {
        border-collapse: collapse;
        min-width: 760px;
        width: 100%;
    }

    .sp-table th {
        background: var(--sp-table-head);
        border-right: 1px solid var(--sp-table-head-border);
        color: var(--sp-table-head-text);
        font-size: 11px;
        font-weight: 800;
        padding: 9px 10px;
        text-align: center;
        text-transform: uppercase;
    }

    .sp-table td {
        border-right: 1px solid var(--sp-border);
        border-top: 1px solid var(--sp-border);
        color: var(--sp-text);
        font-size: 12px;
        padding: 9px 10px;
        text-align: center;
        white-space: nowrap;
    }

    .sp-table th:first-child,
    .sp-table td:first-child {
        text-align: left;
    }

    .sp-table thead tr:first-child > th:first-child,
    .sp-table tbody tr > td:first-child,
    .sp-table tfoot tr > td:first-child {
        left: 0;
        position: sticky;
        z-index: 2;
    }

    .sp-table thead tr:first-child > th:first-child {
        background: var(--sp-table-head);
        z-index: 3;
    }

    .sp-table tbody tr > td:first-child {
        background: var(--sp-card);
    }

    .sp-table tfoot tr > td:first-child {
        background: var(--sp-footer);
    }

    .sp-table tfoot td {
        background: var(--sp-footer);
        font-weight: 400;
    }

    .sp-table tbody .sp-achievement-badge,
    .sp-table tfoot .sp-achievement-badge {
        font-weight: 400;
    }

    .sp-table tfoot .sp-page-total-row td,
    .sp-table tfoot .sp-page-total-row .sp-achievement-badge {
        font-weight: 800;
    }

    .sp-detail-table {
        min-width: 1200px;
    }

    .sp-th-title,
    .sp-th-subtitle {
        display: block;
    }

    .sp-th-subtitle {
        color: var(--sp-muted);
        font-size: 10px;
        font-weight: 600;
        margin-top: 2px;
        text-transform: none;
        white-space: nowrap;
    }

    .sp-detail-table thead tr:first-child th {
        border-bottom: 1px solid var(--sp-table-head-border);
    }

    .sp-detail-table thead th {
        text-align: center;
        vertical-align: middle;
    }

    .sp-achievement-good {
        background: #e3fcef;
        color: #166534 !important;
        font-weight: 800;
    }

    .sp-achievement-warning {
        background: #fef3c7;
        color: #92400e !important;
        font-weight: 800;
    }

    .sp-achievement-bad {
        background: #fce4e4;
        color: #9f1239 !important;
        font-weight: 800;
    }

    .sp-achievement-badge {
        align-items: center;
        border-radius: 999px;
        display: inline-flex;
        justify-content: center;
        min-width: 44px;
        padding: 3px 8px;
    }

    .sp-right {
        text-align: center;
    }

    .sp-remark {
        border-radius: 999px;
        display: inline-flex;
        font-size: 11px;
        font-weight: 800;
        padding: 4px 8px;
    }

    .sp-remark-ok {
        background: #dcfce7;
        color: #166534;
    }

    .sp-remark-warn {
        background: #fef3c7;
        color: #92400e;
    }

    .sp-side {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .sp-side-title {
        color: var(--sp-text);
        font-size: 14px;
        font-weight: 800;
        margin: 0;
        text-align: center;
    }

    .sp-area-heading {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
    }

    .sp-area-detail-button {
        background: rgba(59, 130, 246, 0.14);
        border: 1px solid rgba(59, 130, 246, 0.45);
        border-radius: 6px;
        color: var(--sp-action-text);
        cursor: pointer;
        font-size: 10px;
        font-weight: 700;
        padding: 5px 8px;
        white-space: nowrap;
    }

    .sp-area-detail-button:hover {
        background: rgba(59, 130, 246, 0.24);
    }

    .sp-modal-backdrop {
        align-items: center;
        backdrop-filter: blur(3px);
        background: rgba(15, 23, 42, 0.72);
        display: flex;
        inset: 0;
        justify-content: center;
        padding: 16px;
        position: fixed;
        z-index: 60;
    }

    .sp-dashboard [x-cloak] {
        display: none !important;
    }

    .sp-area-modal {
        background: var(--sp-card);
        border: 1px solid var(--sp-border);
        border-radius: 10px;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
        color: var(--sp-text);
        display: flex;
        flex-direction: column;
        height: calc(100vh - 32px);
        overflow: hidden;
        width: calc(100vw - 32px);
    }

    .sp-area-modal-header {
        align-items: center;
        border-bottom: 1px solid var(--sp-border);
        display: flex;
        flex: 0 0 auto;
        gap: 16px;
        justify-content: space-between;
        padding: 18px 20px;
    }

    .sp-source-po,
    .sp-source-omzet {
        font-weight: 800;
    }

    .sp-source-po {
        color: #3b82f6;
    }

    .sp-source-omzet {
        color: #22c55e;
    }

    .sp-area-modal-close {
        background: var(--sp-control-bg);
        border: 1px solid var(--sp-border);
        border-radius: 7px;
        color: var(--sp-control-text);
        cursor: pointer;
        font-size: 12px;
        font-weight: 800;
        padding: 8px 14px;
    }

    .sp-area-modal-close:hover {
        border-color: var(--sp-primary);
        color: var(--sp-control-hover);
    }

    .sp-area-modal-content {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow-y: auto;
        padding: 20px;
    }

    .sp-summary-modal-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 20px;
    }

    .sp-summary-full-table {
        min-width: 1050px;
    }

    .sp-area-chart-card {
        background: var(--sp-footer);
        border: 1px solid var(--sp-border);
        border-radius: 8px;
        padding: 16px;
    }

    .sp-area-chart-title {
        color: var(--sp-text);
        font-size: 14px;
        font-weight: 800;
        margin: 0 0 14px;
    }

    .sp-area-chart-bars {
        display: grid;
        gap: 12px;
    }

    .sp-area-chart-row {
        align-items: center;
        display: grid;
        gap: 12px;
        grid-template-columns: 56px minmax(160px, 1fr) auto;
    }

    .sp-area-chart-label {
        color: var(--sp-muted);
        font-size: 12px;
        font-weight: 800;
    }

    .sp-area-chart-track {
        background: var(--sp-gauge-track);
        border-radius: 5px;
        height: 32px;
        min-width: 0;
        overflow: hidden;
    }

    .sp-area-chart-bar {
        height: 100%;
        min-width: 6px;
        width: var(--sp-width);
    }

    .sp-area-chart-value {
        color: var(--sp-text);
        font-size: 12px;
        min-width: 130px;
        text-align: right;
        white-space: nowrap;
    }

    .sp-pagination {
        align-items: center;
        border-top: 1px solid var(--sp-border);
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: space-between;
        margin-top: 14px;
        padding-top: 14px;
    }

    .sp-pagination-summary,
    .sp-pagination-page {
        color: var(--sp-muted);
        font-size: 11px;
        margin: 0;
    }

    .sp-pagination-controls,
    .sp-pagination-size {
        align-items: center;
        display: flex;
        gap: 8px;
    }

    .sp-pagination-size {
        color: var(--sp-muted);
        font-size: 11px;
    }

    .sp-pagination-size select,
    .sp-pagination-button {
        background: var(--sp-control-bg);
        border: 1px solid var(--sp-border);
        border-radius: 6px;
        color: var(--sp-control-text);
        font-size: 11px;
        padding: 6px 9px;
    }

    .sp-pagination-button {
        cursor: pointer;
    }

    .sp-pagination-button:hover:not(:disabled) {
        border-color: var(--sp-primary);
        color: var(--sp-control-hover);
    }

    .sp-pagination-button:disabled {
        cursor: not-allowed;
        opacity: 0.45;
    }

    .sp-list {
        display: grid;
        gap: 12px;
        margin-top: 14px;
    }

    .sp-list-row {
        align-items: center;
        display: flex;
        font-size: 12px;
        gap: 10px;
        justify-content: space-between;
    }

    .sp-list-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sp-list-value {
        color: #22c55e;
        font-weight: 800;
        white-space: nowrap;
    }

    .sp-bar-row {
        align-items: center;
        display: grid;
        font-size: 11px;
        gap: 10px;
        grid-template-columns: 72px minmax(0, 1fr);
        margin-top: 14px;
    }

    .sp-bar-track {
        align-items: center;
        display: flex;
        gap: 8px;
        min-width: 0;
    }

    .sp-bar-stack {
        display: grid;
        gap: 6px;
        min-width: 0;
    }

    .sp-bar {
        background: var(--sp-primary);
        border-radius: 3px;
        height: 34px;
        min-width: 6px;
        width: var(--sp-width);
    }

    .sp-bar-po {
        background: #3b82f6;
    }

    .sp-bar-omzet {
        background: #22c55e;
    }

    .sp-empty {
        color: var(--sp-muted);
        font-size: 13px;
        padding: 28px 10px;
        text-align: center;
    }

    .sp-center {
        text-align: center;
    }

    .sp-mobile-sales-list {
        display: none;
    }

    @media (max-width: 1200px) {
        .sp-filter-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .sp-main-grid {
            grid-template-columns: 1fr;
        }

        .sp-area-modal-content {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 700px) {
        .sp-dashboard {
            border-radius: 6px;
            gap: 10px;
            min-height: auto;
            padding: 8px;
        }

        .sp-panel,
        .sp-card {
            padding: 10px;
        }

        .sp-header {
            justify-content: center;
            min-height: 46px;
            padding: 6px;
        }

        .sp-header nav {
            width: 100%;
        }

        .sp-header-tab {
            flex: 1 1 0;
            text-align: center;
        }

        .sp-filter-grid {
            grid-template-columns: 1fr;
        }

        .sp-week-grid {
            grid-auto-columns: minmax(260px, 88vw);
        }

        .sp-gauge-row {
            gap: 10px;
        }

        .sp-gauge {
            flex-basis: 108px;
            height: 54px;
        }

        .sp-section-head {
            align-items: center;
        }

        .sp-area-detail-button {
            flex: 0 0 auto;
        }

        .sp-desktop-sales-table {
            display: none;
        }

        .sp-mobile-sales-list {
            display: grid;
            gap: 12px;
        }

        .sp-mobile-sales-card {
            background: var(--sp-card);
            border: 1px solid var(--sp-border);
            border-radius: 12px;
            box-shadow: 0 1px 3px var(--sp-shadow);
            overflow: hidden;
        }

        .sp-mobile-sales-card.is-open {
            border-color: #93c5fd;
        }

        .sp-mobile-card-head {
            align-items: flex-start;
            display: flex;
            gap: 12px;
            justify-content: space-between;
            padding: 15px;
        }

        .sp-mobile-card-identity {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .sp-mobile-card-identity strong {
            color: var(--sp-text);
            font-size: 17px;
            line-height: 1.25;
        }

        .sp-mobile-card-region {
            color: var(--sp-muted);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .sp-mobile-achievement,
        .sp-mobile-inline-achievement {
            border-radius: 5px;
            display: inline-flex;
            flex: 0 0 auto;
            justify-content: center;
            padding: 6px 9px;
        }

        .sp-mobile-summary,
        .sp-mobile-gap-grid {
            border-top: 1px solid var(--sp-border);
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin: 0;
            padding: 13px 15px;
        }

        .sp-mobile-summary div,
        .sp-mobile-gap-grid div {
            min-width: 0;
        }

        .sp-mobile-summary dt,
        .sp-mobile-gap-grid dt,
        .sp-mobile-week-card dt {
            color: var(--sp-muted);
            font-size: 10px;
            font-weight: 700;
            margin-bottom: 4px;
            text-transform: uppercase;
        }

        .sp-mobile-summary dd,
        .sp-mobile-gap-grid dd,
        .sp-mobile-week-card dd {
            color: var(--sp-text);
            font-size: 11px;
            font-weight: 800;
            margin: 0;
            overflow-wrap: anywhere;
        }

        .sp-mobile-detail-toggle,
        .vp-mobile-detail-toggle {
            align-items: center;
            background: transparent;
            border: 0;
            color: var(--sp-action-text);
            display: flex;
            font-size: 12px;
            font-weight: 800;
            gap: 7px;
            padding: 3px 15px 14px;
        }

        .sp-mobile-detail-toggle svg,
        .vp-mobile-detail-toggle svg {
            height: 16px;
            transition: transform .15s ease;
            width: 16px;
        }

        .sp-mobile-detail-toggle svg.is-rotated,
        .vp-mobile-detail-toggle svg.is-rotated {
            transform: rotate(180deg);
        }

        .sp-mobile-card-detail {
            border-top: 1px solid var(--sp-border);
            padding: 0 15px 15px;
        }

        .sp-mobile-card-detail h3 {
            color: var(--sp-text);
            font-size: 12px;
            margin: 15px 0 9px;
        }

        .sp-mobile-gap-grid {
            border: 0;
            padding: 15px 0 0;
        }

        .sp-mobile-week-list {
            display: grid;
            gap: 8px;
        }

        .sp-mobile-week-card {
            background: var(--sp-footer);
            border: 1px solid var(--sp-border);
            border-radius: 8px;
            padding: 10px;
        }

        .sp-mobile-week-head {
            align-items: baseline;
            display: flex;
            justify-content: space-between;
            margin-bottom: 9px;
        }

        .sp-mobile-week-head span {
            color: var(--sp-muted);
            font-size: 10px;
        }

        .sp-mobile-week-card dl {
            display: grid;
            gap: 7px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin: 0;
        }

        .sp-mobile-week-card dd.sp-achievement-good,
        .sp-mobile-week-card dd.sp-achievement-warning,
        .sp-mobile-week-card dd.sp-achievement-bad {
            border-radius: 4px;
            padding: 3px 5px;
            width: fit-content;
        }

        .sp-pagination {
            align-items: stretch;
            flex-direction: column;
        }

        .sp-pagination-controls {
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
        }

        .sp-pagination-size {
            flex: 1 0 100%;
        }

        .sp-pagination-button {
            flex: 1 1 0;
        }

        .sp-modal-backdrop {
            padding: 6px;
        }

        .sp-area-modal {
            height: calc(100vh - 12px);
            height: calc(100dvh - 12px);
            width: calc(100vw - 12px);
        }

        .sp-area-modal-header {
            align-items: flex-start;
            gap: 10px;
            padding: 12px;
        }

        .sp-area-modal-close {
            flex: 0 0 auto;
            padding: 7px 10px;
        }

        .sp-summary-modal-content {
            padding: 8px;
        }

        .sp-area-modal-content {
            grid-template-columns: 1fr;
            padding: 12px;
        }

        .sp-area-chart-row {
            grid-template-columns: 48px minmax(100px, 1fr);
        }

        .sp-area-chart-value {
            grid-column: 2;
            min-width: 0;
            text-align: left;
        }

        .sp-bar-row {
            grid-template-columns: 64px minmax(0, 1fr);
        }
    }

    .vp-dashboard {
        --vp-border: #e2e8f0;
        --vp-muted: #64748b;
        --vp-card: #ffffff;
        --vp-page: #f8fafc;
        --vp-text: #0f172a;
        --vp-table-head: #e2e8f0;
        --vp-table-head-text: #1e293b;
        --vp-table-head-border: #cbd5e1;
        --vp-shadow: rgba(15, 23, 42, 0.08);
        --sp-border: var(--vp-border);
        --sp-muted: var(--vp-muted);
        --sp-primary: #1e3a8a;
        --sp-control-bg: #ffffff;
        --sp-control-text: #1e293b;
        --sp-control-hover: #1d4ed8;
        background: var(--vp-page);
        border-radius: 10px;
        color: var(--vp-text);
        color-scheme: light;
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
        min-height: calc(100vh - 180px);
        min-width: 0;
        overflow-x: hidden;
        padding: 14px;
    }

    .dark .vp-dashboard {
        --vp-border: #252a34;
        --vp-muted: #9ca3af;
        --vp-card: #111827;
        --vp-page: #030712;
        --vp-text: #f9fafb;
        --vp-table-head: #1f2937;
        --vp-table-head-text: #dbeafe;
        --vp-table-head-border: #364152;
        --vp-shadow: rgba(0, 0, 0, 0.35);
        --sp-primary: #11185f;
        --sp-control-bg: #0b1120;
        --sp-control-text: #e5e7eb;
        --sp-control-hover: #ffffff;
        color-scheme: dark;
    }

    .vp-panel,
    .vp-card {
        background: var(--vp-card);
        border: 1px solid var(--vp-border);
        border-radius: 8px;
        box-shadow: 0 1px 3px var(--vp-shadow);
        min-width: 0;
        padding: 14px;
    }

    .vp-section-head {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .vp-section-title {
        color: var(--vp-text);
        font-size: 15px;
        font-weight: 800;
        margin: 0;
    }

    .vp-small {
        color: var(--vp-muted);
        font-size: 11px;
        margin: 2px 0 0;
    }

    .vp-note-banner {
        align-items: center;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 6px;
        color: #1e40af;
        display: flex;
        font-size: 11px;
        gap: 8px;
        margin-bottom: 12px;
        padding: 7px 12px;
    }

    .dark .vp-note-banner {
        background: rgba(30, 58, 138, 0.25);
        border-color: rgba(59, 130, 246, 0.35);
        color: #93c5fd;
    }

    .vp-note-banner svg {
        flex-shrink: 0;
    }

    .vp-full-view-button,
    .vp-modal-close {
        background: var(--sp-control-bg);
        border: 1px solid var(--vp-border);
        border-radius: 7px;
        color: var(--sp-control-text);
        cursor: pointer;
        font-size: 12px;
        font-weight: 800;
        padding: 8px 14px;
        white-space: nowrap;
    }

    .vp-full-view-button:hover,
    .vp-modal-close:hover {
        border-color: #3b82f6;
        color: var(--sp-control-hover);
    }

    .vp-dashboard [x-cloak] {
        display: none !important;
    }

    .vp-modal-backdrop {
        align-items: center;
        backdrop-filter: blur(3px);
        background: rgba(15, 23, 42, 0.72);
        display: flex;
        inset: 0;
        justify-content: center;
        padding: 16px;
        position: fixed;
        z-index: 60;
    }

    .vp-full-view-modal {
        background: var(--vp-card);
        border: 1px solid var(--vp-border);
        border-radius: 10px;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
        color: var(--vp-text);
        display: flex;
        flex-direction: column;
        height: calc(100vh - 32px);
        overflow: hidden;
        width: calc(100vw - 32px);
    }

    .vp-modal-header {
        align-items: center;
        border-bottom: 1px solid var(--vp-border);
        display: flex;
        flex: 0 0 auto;
        gap: 16px;
        justify-content: space-between;
        padding: 18px 20px;
    }

    .vp-modal-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 16px;
    }

    .vp-table-wrap {
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .vp-table {
        border-collapse: collapse;
        min-width: 1500px;
        width: 100%;
    }

    .vp-table.vp-summary-table {
        max-width: 100%;
        min-width: 100%;
        table-layout: fixed;
        width: 100%;
    }

    .vp-summary-table .vp-col-name {
        width: 190px;
    }

    .vp-summary-table .vp-col-total-actual {
        width: 58px;
    }

    .vp-summary-table .vp-col-visit-plan {
        width: 62px;
    }

    .vp-summary-table .vp-col-average-visit {
        width: 70px;
    }

    .vp-summary-table .vp-col-not-match {
        width: 55px;
    }

    .vp-summary-table .vp-col-pareto {
        width: 48px;
    }

    .vp-summary-table .vp-col-monthly-percentage {
        width: 46px;
    }

    .vp-table th {
        background: var(--vp-table-head);
        border-right: 1px solid var(--vp-table-head-border);
        color: var(--vp-table-head-text);
        font-size: 11px;
        font-weight: 800;
        padding: 9px 10px;
        text-align: center;
        text-transform: uppercase;
        vertical-align: middle;
    }

    .vp-table td {
        border-right: 1px solid var(--vp-border);
        border-top: 1px solid var(--vp-border);
        color: var(--vp-text);
        font-size: 12px;
        padding: 9px 10px;
        text-align: center;
        white-space: nowrap;
    }

    .vp-table th:first-child,
    .vp-table td:first-child {
        text-align: left;
    }

    .vp-table thead tr:first-child > th:first-child,
    .vp-table tbody tr > td:first-child {
        left: 0;
        position: sticky;
        z-index: 2;
    }

    .vp-table thead tr:first-child > th:first-child {
        background: var(--vp-table-head);
        z-index: 3;
    }

    .vp-table tbody tr > td:first-child {
        background: var(--vp-card);
    }

    .vp-table.vp-summary-table th,
    .vp-table.vp-summary-table td {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .vp-table.vp-summary-table th {
        font-size: 9px;
    }

    .vp-table.vp-summary-table td {
        font-size: 10px;
    }

    .vp-right {
        text-align: center;
    }

    .vp-table .vp-average-visit {
        box-sizing: border-box;
        width: 70px;
        min-width: 70px;
        max-width: 70px;
    }

    .vp-center {
        text-align: center;
    }

    .vp-danger {
        background: #fce4e4;
        color: #9f1239 !important;
    }

    .vp-success {
        background: #e3fcef;
        color: #166534 !important;
    }

    .vp-percentage-good {
        background: #e3fcef;
        color: #166534 !important;
        font-weight: 800;
    }

    .vp-percentage-warning {
        background: #fef3c7;
        color: #92400e !important;
        font-weight: 800;
    }

    .vp-percentage-danger {
        background: #fce4e4;
        color: #9f1239 !important;
        font-weight: 800;
    }

    .vp-percentage-neutral {
        font-weight: 800;
    }

    .vp-status-badge {
        align-items: center;
        border-radius: 999px;
        display: inline-flex;
        font-weight: 400;
        justify-content: center;
        min-width: 38px;
        padding: 3px 7px;
    }

    .vp-empty {
        color: var(--vp-muted);
        font-size: 13px;
        padding: 28px 10px;
        text-align: center;
    }

    .vp-mobile-sales-list {
        display: none;
    }

    @media (max-width: 700px) {
        .vp-dashboard {
            border-radius: 6px;
            gap: 10px;
            min-height: auto;
            padding: 8px;
        }

        .vp-panel,
        .vp-card {
            padding: 10px;
        }

        .vp-section-head {
            align-items: center;
        }

        .vp-full-view-button {
            flex: 0 0 auto;
            padding: 7px 10px;
        }

        .vp-desktop-sales-table {
            display: none;
        }

        .vp-mobile-sales-list {
            display: grid;
            gap: 12px;
        }

        .vp-mobile-sales-card {
            background: var(--vp-card);
            border: 1px solid var(--vp-border);
            border-radius: 12px;
            box-shadow: 0 1px 3px var(--vp-shadow);
            overflow: hidden;
        }

        .vp-mobile-sales-card.is-open {
            border-color: #93c5fd;
        }

        .vp-mobile-card-head {
            align-items: flex-start;
            display: flex;
            gap: 12px;
            justify-content: space-between;
            padding: 15px;
        }

        .vp-mobile-card-identity {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .vp-mobile-card-identity strong {
            color: var(--vp-text);
            font-size: 17px;
            line-height: 1.25;
        }

        .vp-mobile-card-region {
            color: var(--vp-muted);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .vp-mobile-achievement {
            border-radius: 5px;
            flex: 0 0 auto;
            padding: 6px 9px;
        }

        .vp-mobile-weekly-summary {
            align-items: center;
            border-top: 1px solid var(--vp-border);
            display: flex;
            gap: 10px;
            justify-content: space-between;
            padding: 13px 15px 8px;
        }

        .vp-mobile-weekly-summary span {
            color: var(--vp-muted);
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .vp-mobile-weekly-summary strong {
            color: var(--vp-text);
            font-size: 11px;
            text-align: right;
        }

        .vp-mobile-weekly-summary i::after {
            color: var(--vp-muted);
            content: '|';
            font-style: normal;
            padding: 0 3px;
        }

        .vp-mobile-detail-toggle {
            color: #2563eb;
        }

        .dark .vp-mobile-detail-toggle {
            color: #93c5fd;
        }

        .vp-mobile-card-detail {
            border-top: 1px solid var(--vp-border);
            padding: 0 15px 15px;
        }

        .vp-mobile-card-detail h3 {
            color: var(--vp-text);
            font-size: 12px;
            margin: 15px 0 9px;
        }

        .vp-mobile-daily-list,
        .vp-mobile-sales-metrics {
            display: grid;
            gap: 8px;
        }

        .vp-mobile-daily-list section,
        .vp-mobile-sales-metrics section {
            background: var(--vp-page);
            border: 1px solid var(--vp-border);
            border-radius: 8px;
            padding: 10px;
        }

        .vp-mobile-daily-list section > strong,
        .vp-mobile-sales-metrics section > strong {
            color: var(--vp-text);
            display: block;
            font-size: 11px;
            margin-bottom: 8px;
        }

        .vp-mobile-daily-list dl {
            display: grid;
            gap: 7px;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin: 0;
        }

        .vp-mobile-metric-grid {
            display: grid;
            gap: 8px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin: 0;
        }

        .vp-mobile-metric-grid div,
        .vp-mobile-sales-metrics dl div {
            background: var(--vp-page);
            border: 1px solid var(--vp-border);
            border-radius: 8px;
            padding: 9px;
        }

        .vp-mobile-sales-metrics dl {
            display: grid;
            gap: 7px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin: 0;
        }

        .vp-mobile-daily-list dt,
        .vp-mobile-metric-grid dt,
        .vp-mobile-sales-metrics dt {
            color: var(--vp-muted);
            font-size: 9px;
            font-weight: 700;
            margin-bottom: 3px;
            text-transform: uppercase;
        }

        .vp-mobile-daily-list dd,
        .vp-mobile-metric-grid dd,
        .vp-mobile-sales-metrics dd {
            color: var(--vp-text);
            font-size: 10px;
            font-weight: 800;
            margin: 0;
            overflow-wrap: anywhere;
        }

        .vp-mobile-daily-list dd.vp-success,
        .vp-mobile-daily-list dd.vp-danger,
        .vp-mobile-daily-list dd.vp-percentage-good,
        .vp-mobile-daily-list dd.vp-percentage-warning,
        .vp-mobile-daily-list dd.vp-percentage-danger,
        .vp-mobile-daily-list dd.vp-success,
        .vp-mobile-daily-list dd.vp-danger {
            border-radius: 4px;
            padding: 3px 5px;
            width: fit-content;
        }

        .vp-modal-backdrop {
            padding: 6px;
        }

        .vp-full-view-modal {
            height: calc(100vh - 12px);
            height: calc(100dvh - 12px);
            width: calc(100vw - 12px);
        }

        .vp-modal-header {
            align-items: flex-start;
            gap: 10px;
            padding: 12px;
        }

        .vp-modal-close {
            flex: 0 0 auto;
            padding: 7px 10px;
        }

        .vp-modal-content {
            padding: 8px;
        }

        .vp-table.vp-summary-table {
            min-width: 1100px;
            table-layout: auto;
        }

        .vp-table.vp-summary-table th,
        .vp-table.vp-summary-table td {
            white-space: nowrap;
        }

        .vp-pagination,
        .vp-pagination-controls {
            width: 100%;
        }
    }