/* Ringkasan Progress — pakai HTML markom-metric-card (sama Share).
   Style glow ada di blok .markom-metric-card di bawah.
*/

.dark .markom-ringkasan-overview {
    gap: 1rem !important;
}

.dark .markom-ringkasan-overview__title,
.dark .markom-ringkasan-overview .fi-wi-stats-overview-header-heading {
    color: #f8fafc !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding-bottom: 0.2rem !important;
}

.dark .markom-ringkasan-overview .fi-wi-stats-overview-header {
    overflow: visible !important;
}

.dark .markom-ringkasan-overview__desc,
.dark .markom-ringkasan-overview .fi-wi-stats-overview-header-description {
    color: rgba(148, 163, 184, 0.9) !important;
    margin-top: 0.25rem !important;
}

/* Grid Ringkasan: 3 kolom di desktop (bukan 4 seperti Share) */
.dark .markom-ringkasan-share-grid {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 0.85rem !important;
    padding: 0 !important;
    background: transparent !important;
}

@media (min-width: 640px) {
    .dark .markom-ringkasan-share-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .dark .markom-ringkasan-share-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Deskripsi Ringkasan sering panjang — jangan uppercase ketat */
.dark .markom-ringkasan-share-grid .markom-metric-card {
    min-height: 9.5rem !important;
    text-decoration: none !important;
}

.dark .markom-ringkasan-share-grid .markom-metric-card__label {
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    font-size: 0.9rem !important;
}

.dark .markom-ringkasan-share-grid .markom-metric-card__sub {
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.35 !important;
    font-size: 0.72rem !important;
    max-width: 22rem;
}

.dark .markom-metric-card--link {
    cursor: pointer;
}

.dark .markom-metric-card--link:hover {
    border-color: rgba(var(--mdp-glow), 0.35) !important;
}

/* ============================================================
   Board Share + Ringkasan — kartu metrik (glow dalam + bintang)
   ============================================================ */

.dark .markom-metric-card {
    --mdp-glow: 96, 165, 250;
    position: relative !important;
    isolation: isolate;
    min-height: 8.75rem !important;
    padding: 1.1rem 1rem !important;
    overflow: hidden !important;
    border-radius: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    /* Glow luas kiri atas — sama Ringkasan */
    background:
        radial-gradient(
            ellipse 145% 115% at -5% -10%,
            rgba(var(--mdp-glow), 0.62) 0%,
            rgba(var(--mdp-glow), 0.38) 26%,
            rgba(var(--mdp-glow), 0.16) 48%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 90% 70% at 35% 5%,
            rgba(var(--mdp-glow), 0.22) 0%,
            transparent 58%
        ),
        linear-gradient(165deg, #16161c 0%, #0c0c10 55%, #0a0a0e 100%) !important;
    background-color: #0c0c10 !important;
    box-shadow:
        0 0 0 1px rgba(var(--mdp-glow), 0.12),
        0 12px 28px rgba(0, 0, 0, 0.4) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.dark .markom-metric-card:hover {
    border-color: rgba(var(--mdp-glow), 0.28) !important;
    box-shadow:
        0 0 0 1px rgba(var(--mdp-glow), 0.2),
        0 14px 32px rgba(0, 0, 0, 0.45) !important;
}

.dark .markom-metric-card::before {
    content: none !important;
    display: none !important;
}

.dark .markom-metric-card::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0.4rem !important;
    left: 0.55rem !important;
    right: auto !important;
    width: 70% !important;
    height: 55% !important;
    max-width: 14rem !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0.9;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' opacity='0.85' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' opacity='0.7' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' opacity='0.55' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' opacity='0.45' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' opacity='0.4' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 11px 11px, 7px 7px, 8px 8px, 5px 5px, 6px 6px, 4px 4px;
    background-position:
        12% 18%,
        38% 8%,
        58% 28%,
        28% 48%,
        72% 12%,
        48% 42%;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
}

.dark .markom-metric-card > * {
    position: relative !important;
    z-index: 1 !important;
}

.dark .markom-metric-card--green {
    --mdp-glow: 52, 211, 153;
}

.dark .markom-metric-card--orange {
    --mdp-glow: 251, 146, 60;
}

.dark .markom-metric-card--blue {
    --mdp-glow: 96, 165, 250;
}

.dark .markom-metric-card--pink {
    --mdp-glow: 244, 114, 182;
}

.dark .markom-metric-card--purple {
    --mdp-glow: 167, 139, 250;
}

.dark .markom-metric-card--amber {
    --mdp-glow: 251, 191, 36;
}

.dark .markom-metric-card--gray {
    --mdp-glow: 148, 163, 184;
}

.dark .markom-metric-card__label {
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.25 !important;
    opacity: 1 !important;
}

.dark .markom-metric-card__value {
    color: #ffffff !important;
    font-size: clamp(1.75rem, 2.2vw, 2.5rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    margin: 0.4rem 0 0.15rem !important;
}

.dark .markom-metric-card__sub {
    color: rgba(var(--mdp-glow), 0.85) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    opacity: 1 !important;
}

.dark .markom-board-grid {
    background: transparent !important;
    gap: 0.85rem !important;
    padding: 0.85rem 0 !important;
}

.dark .markom-share-team-summary .markom-board-grid {
    padding-top: 0.25rem !important;
}

/* ============================================================
   Board Share — kartu Total Keseluruhan (header per marketing)
   ============================================================ */

.dark .markom-marketing-board {
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dark .markom-board-header {
    --mdp-glow: 251, 191, 36; /* emas MARKOM */
    position: relative !important;
    isolation: isolate;
    margin-bottom: 0.85rem !important;
    padding: 1.35rem 1.25rem 1.5rem !important;
    overflow: hidden !important;
    border-radius: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    text-align: center !important;
    /* Glow luas kiri atas — sama Ringkasan */
    background:
        radial-gradient(
            ellipse 145% 115% at -5% -10%,
            rgba(var(--mdp-glow), 0.62) 0%,
            rgba(var(--mdp-glow), 0.38) 26%,
            rgba(var(--mdp-glow), 0.16) 48%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 90% 70% at 35% 5%,
            rgba(var(--mdp-glow), 0.22) 0%,
            transparent 58%
        ),
        linear-gradient(165deg, #16161c 0%, #0c0c10 55%, #0a0a0e 100%) !important;
    background-color: #0c0c10 !important;
    box-shadow:
        0 0 0 1px rgba(var(--mdp-glow), 0.12),
        0 12px 28px rgba(0, 0, 0, 0.4) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.dark .markom-board-header:hover {
    border-color: rgba(var(--mdp-glow), 0.28) !important;
    box-shadow:
        0 0 0 1px rgba(var(--mdp-glow), 0.2),
        0 14px 32px rgba(0, 0, 0, 0.45) !important;
}

.dark .markom-board-header::before {
    content: none !important;
    display: none !important;
}

.dark .markom-board-header::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0.4rem !important;
    left: 0.55rem !important;
    right: auto !important;
    width: 70% !important;
    height: 55% !important;
    max-width: 18rem !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0.9;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' opacity='0.85' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' opacity='0.7' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' opacity='0.55' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' opacity='0.45' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 14 14'%3E%3Cpath fill='%23ffffff' opacity='0.4' d='M7 0c.35 2.8 1.4 4.55 4.2 5.25C8.4 5.95 7.35 7.7 7 10.5 6.65 7.7 5.6 5.95 2.8 5.25 5.6 4.55 6.65 2.8 7 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 11px 11px, 7px 7px, 8px 8px, 5px 5px, 6px 6px, 4px 4px;
    background-position:
        12% 18%,
        38% 8%,
        58% 28%,
        28% 48%,
        72% 12%,
        48% 42%;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
}

.dark .markom-board-header > * {
    position: relative !important;
    z-index: 1 !important;
}

.dark .markom-board-header__name {
    color: #ffffff !important;
    letter-spacing: 0.14em !important;
}

.dark .markom-board-header__label {
    color: rgba(var(--mdp-glow), 0.88) !important;
    opacity: 1 !important;
}

.dark .markom-board-header__total {
    color: #ffffff !important;
    letter-spacing: -0.04em !important;
}

.dark .markom-board-header__rank {
    color: rgba(255, 255, 255, 0.7) !important;
}