/*
 * Drimhos Synapse Design System (DSDS) — Shared Runtime Base
 * V2 shared implementation baseline — 2026-10-03
 *
 * Contract:
 * - Additive / opt-in. Existing module selectors are not overridden.
 * - Reference -> Semantic -> Component -> Pattern.
 * - Shared components use the .syn-* namespace.
 * - Production modules consume shared .syn-* styling; presentation CSS stays centralized here.
 */

:root {
    /* ====================================================================== */
    /* REFERENCE TOKENS — internal raw values                                 */
    /* ====================================================================== */
    --syn-ref-blue-050: #eff6ff;
    --syn-ref-blue-100: #dbeafe;
    --syn-ref-blue-300: #93c5fd;
    --syn-ref-blue-500: #3b82f6;
    --syn-ref-blue-600: #2563eb;
    --syn-ref-blue-700: #1d4ed8;

    --syn-ref-slate-025: #fbfcfe;
    --syn-ref-slate-050: #f8fafc;
    --syn-ref-slate-100: #f1f5f9;
    --syn-ref-slate-200: #e2e8f0;
    --syn-ref-slate-300: #cbd5e1;
    --syn-ref-slate-400: #94a3b8;
    --syn-ref-slate-500: #64748b;
    --syn-ref-slate-600: #475569;
    --syn-ref-slate-700: #334155;
    --syn-ref-slate-900: #0f172a;

    --syn-ref-green-600: #16a34a;
    --syn-ref-amber-600: #d97706;
    --syn-ref-red-600: #dc2626;
    --syn-ref-teal-700: #0f766e;
    --syn-ref-violet-600: #7c3aed;
    --syn-ref-orange-700: #c2410c;

    /* ====================================================================== */
    /* SEMANTIC TOKENS — public token API                                     */
    /* ====================================================================== */
    --syn-color-action-primary: var(--syn-ref-blue-600);
    --syn-color-action-primary-hover: var(--syn-ref-blue-700);
    --syn-color-action-subtle: var(--syn-ref-blue-050);
    --syn-color-focus: var(--syn-ref-blue-500);

    --syn-color-surface-page: #eef1f5;
    --syn-color-surface-default: #ffffff;
    --syn-color-surface-subtle: var(--syn-ref-slate-050);
    --syn-color-surface-selected: var(--syn-ref-blue-050);

    --syn-color-text-primary: var(--syn-ref-slate-900);
    --syn-color-text-secondary: var(--syn-ref-slate-700);
    --syn-color-text-muted: var(--syn-ref-slate-500);
    --syn-color-text-disabled: var(--syn-ref-slate-400);

    --syn-color-border-subtle: var(--syn-ref-slate-200);
    --syn-color-border-strong: var(--syn-ref-slate-300);

    --syn-color-status-success: var(--syn-ref-green-600);
    --syn-color-status-warning: var(--syn-ref-amber-600);
    --syn-color-status-danger: var(--syn-ref-red-600);
    --syn-color-status-info: var(--syn-ref-blue-600);

    --syn-color-viz-1: var(--syn-ref-blue-600);
    --syn-color-viz-2: var(--syn-ref-teal-700);
    --syn-color-viz-3: var(--syn-ref-violet-600);
    --syn-color-viz-4: var(--syn-ref-orange-700);
    --syn-color-viz-5: #0369a1;
    --syn-color-viz-6: #a21caf;
    --syn-color-viz-7: #4d7c0f;
    --syn-color-viz-8: #be123c;

    --syn-space-1: 4px;
    --syn-space-2: 8px;
    --syn-space-3: 12px;
    --syn-space-4: 16px;
    --syn-space-5: 20px;
    --syn-space-6: 24px;
    --syn-space-7: 32px;

    --syn-radius-item: 6px;
    --syn-radius-control: 8px;
    --syn-radius-card: 12px;
    --syn-radius-panel: 14px;
    --syn-radius-page: 16px;
    --syn-radius-pill: 999px;

    --syn-elevation-sm: 0 2px 4px rgba(15, 23, 42, 0.04);
    --syn-elevation-md: 0 2px 6px rgba(15, 23, 42, 0.05);
    --syn-elevation-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
    --syn-elevation-overlay: 0 24px 80px rgba(15, 23, 42, 0.25);

    --syn-control-sm: 32px;
    --syn-control-md: 40px;
    --syn-control-lg: 44px;

    --syn-motion-fast: 120ms;
    --syn-motion-standard: 180ms;
    --syn-motion-slow: 240ms;
    --syn-ease-standard: cubic-bezier(.2, 0, 0, 1);

    --syn-layer-base: 0;
    --syn-layer-sticky: 200;
    --syn-layer-navbar: 300;
    --syn-layer-menu: 1000;
    --syn-layer-utility: 1100;
    --syn-layer-tooltip: 1200;
    --syn-layer-drawer: 2000;
    --syn-layer-modal: 2100;
    --syn-layer-toast: 2200;

    /* ====================================================================== */
    /* COMPONENT TOKENS                                                       */
    /* ====================================================================== */
    --syn-button-primary-bg: var(--syn-color-action-primary);
    --syn-button-primary-bg-hover: var(--syn-color-action-primary-hover);
    --syn-field-border: var(--syn-color-border-strong);
    --syn-table-header-bg: var(--syn-color-surface-subtle);
    --syn-scorecard-min-height: 82px;
    --syn-context-help-bg: var(--syn-color-text-primary);
    --syn-context-help-text: #ffffff;
    --syn-analytics-stage-height: 384px;
    --syn-analytics-panel-head-height: 32px;
    --syn-analytics-panel-head-gap: 10px;
    --syn-analytics-panel-height: 456px;
    --syn-analytics-panel-title-size: 15px;
    --syn-analytics-panel-title-weight: 800;
    --syn-analytics-panel-title-line-height: 1.3;

    /* ====================================================================== */
    /* COMPATIBILITY BRIDGE — existing accepted production                    */
    /* ====================================================================== */
    --syn-scorecard-min-h: var(--syn-scorecard-min-height);
    --dsds-analytics-stage-height: var(--syn-analytics-stage-height);
    --dsds-analytics-panel-head-height: var(--syn-analytics-panel-head-height);
    --dsds-analytics-panel-head-gap: var(--syn-analytics-panel-head-gap);
    --dsds-analytics-panel-height: var(--syn-analytics-panel-height);
}

/* ========================================================================== */
/* SHARED PRIMITIVES                                                          */
/* ========================================================================== */
.syn-btn,
.syn-icon-btn,
.syn-panel,
.syn-card,
.syn-field,
.syn-filter-bar,
.syn-input,
.syn-select,
.syn-textarea,
.syn-scorecard,
.syn-state,
.syn-message,
.syn-table,
.syn-pagination,
.syn-multi,
.syn-dialog,
.syn-drawer {
    box-sizing: border-box;
}

.syn-btn,
.syn-icon-btn,
.syn-input,
.syn-select,
.syn-textarea,
.syn-multi summary {
    font-family: inherit;
}

.syn-btn:focus-visible,
.syn-icon-btn:focus-visible,
.syn-input:focus-visible,
.syn-select:focus-visible,
.syn-textarea:focus-visible,
.syn-workspace-nav a:focus-visible,
.syn-tab:focus-visible,
.syn-context-help:focus-visible,
.syn-page-btn:focus-visible,
.syn-multi summary:focus-visible {
    outline: 2px solid var(--syn-color-focus);
    outline-offset: 2px;
}

/* ========================================================================== */
/* BUTTONS & LINKS                                                            */
/* ========================================================================== */
.syn-btn {
    min-height: var(--syn-control-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--syn-radius-control);
    background: var(--syn-color-surface-default);
    color: var(--syn-color-text-secondary);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--syn-motion-fast) var(--syn-ease-standard)
        border-color var(--syn-motion-fast) var(--syn-ease-standard)
        color var(--syn-motion-fast) var(--syn-ease-standard)
        box-shadow var(--syn-motion-fast) var(--syn-ease-standard);
}
.syn-btn:hover { border-color: var(--syn-color-border-strong); background: var(--syn-color-surface-subtle); }
.syn-btn--primary { background: var(--syn-button-primary-bg); border-color: var(--syn-button-primary-bg); color: #fff; }
.syn-btn--primary:hover { background: var(--syn-button-primary-bg-hover); border-color: var(--syn-button-primary-bg-hover); }
.syn-btn--secondary { border-color: var(--syn-color-border-strong); }
.syn-btn--tertiary { border-color: var(--syn-ref-slate-100); background: var(--syn-ref-slate-100); }
.syn-btn--ghost { background: transparent; color: var(--syn-color-action-primary-hover); }
.syn-btn--ghost:hover { border-color: transparent; background: var(--syn-color-action-subtle); }
.syn-btn--danger { background: var(--syn-color-status-danger); border-color: var(--syn-color-status-danger); color: #fff; }
.syn-btn--danger-secondary { border-color: #fecaca; color: #b91c1c; }
.syn-btn--danger-secondary:hover { border-color: #fca5a5; background: #fef2f2; }
.syn-btn--md { min-height: var(--syn-control-md); padding: 0 12px; font-size: 12px; }
.syn-btn--lg { min-height: var(--syn-control-lg); padding: 0 14px; font-size: 13px; }
.syn-btn:disabled,
.syn-btn[aria-disabled="true"] { opacity: .48; cursor: not-allowed; pointer-events: none; }

.syn-link { color: var(--syn-color-action-primary); font-weight: 700; text-decoration: none; }
.syn-link:hover { color: var(--syn-color-action-primary-hover); text-decoration: underline; }

.syn-icon-btn {
    width: var(--syn-control-sm);
    height: var(--syn-control-sm);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--syn-color-border-strong);
    border-radius: var(--syn-radius-control);
    background: var(--syn-color-surface-default);
    color: var(--syn-color-text-secondary);
    cursor: pointer;
}
.syn-icon-btn:hover { background: var(--syn-color-surface-subtle); }

/* ========================================================================== */
/* SURFACES                                                                   */
/* ========================================================================== */
.syn-panel {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--syn-color-border-subtle);
    border-radius: var(--syn-radius-panel);
    background: var(--syn-color-surface-default);
}
.syn-panel--elevated { box-shadow: var(--syn-elevation-md); }

.syn-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--syn-color-border-subtle);
    border-radius: var(--syn-radius-card);
    background: var(--syn-color-surface-default);
}
.syn-card--subtle { background: var(--syn-color-surface-subtle); }
.syn-card--interactive {
    transition: border-color var(--syn-motion-standard), box-shadow var(--syn-motion-standard), transform var(--syn-motion-standard);
}
.syn-card--interactive:hover { border-color: var(--syn-ref-blue-300); box-shadow: 0 5px 16px rgba(37, 99, 235, .08); transform: translateY(-1px); }

/* ========================================================================== */
/* FORMS & FILTERS                                                            */
/* ========================================================================== */
.syn-field { min-width: 0; }
.syn-label {
    display: block;
    margin: 0 0 4px;
    color: var(--syn-ref-slate-600);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}
.syn-help-text,
.syn-error-text { display: block; margin-top: 4px; font-size: 10px; line-height: 1.4; }
.syn-help-text { color: var(--syn-color-text-muted); }
.syn-error-text { color: #b91c1c; }

.syn-input,
.syn-select,
.syn-textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--syn-field-border);
    border-radius: var(--syn-radius-control);
    background: var(--syn-color-surface-default);
    color: var(--syn-color-text-secondary);
    font-size: 12px;
}
.syn-input,
.syn-select { height: var(--syn-control-sm); padding: 0 9px; }
.syn-textarea { min-height: 88px; padding: 8px 9px; resize: vertical; }
.syn-input:hover,
.syn-select:hover,
.syn-textarea:hover { border-color: var(--syn-color-text-disabled); }
.syn-input[aria-invalid="true"],
.syn-select[aria-invalid="true"],
.syn-textarea[aria-invalid="true"] { border-color: var(--syn-color-status-danger); }
.syn-input:disabled,
.syn-select:disabled,
.syn-textarea:disabled { background: var(--syn-color-surface-subtle); color: var(--syn-color-text-disabled); cursor: not-allowed; }

.syn-filter-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    gap: var(--syn-space-2);
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--syn-color-border-subtle);
    border-radius: 10px;
    background: var(--syn-color-surface-subtle);
}
.syn-filter-bar > * { min-width: 0; }
.syn-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }

/* Multi-select visual contract. State/filter dependency remains module-owned. */
.syn-multi { position: relative; min-width: 0; }
.syn-multi details { position: relative; width: 100%; }
.syn-multi summary {
    list-style: none;
    height: var(--syn-control-sm);
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 9px;
    border: 1px solid var(--syn-color-border-strong);
    border-radius: var(--syn-radius-control);
    background: var(--syn-color-surface-default);
    color: var(--syn-ref-slate-600);
    cursor: pointer;
    user-select: none;
}
.syn-multi summary::-webkit-details-marker { display: none; }
.syn-multi details[open] summary { border-color: var(--syn-ref-blue-300); box-shadow: 0 0 0 2px rgba(37, 99, 235, .08); }
.syn-multi__summary { min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.syn-multi__caret { flex: 0 0 auto; color: var(--syn-color-text-disabled); font-size: 10px; }
.syn-multi__menu {
    position: absolute;
    z-index: var(--syn-layer-menu);
    top: calc(100% + 6px);
    left: 0;
    width: max(100%, 240px);
    max-width: min(360px, calc(100vw - 32px));
    max-height: 290px;
    overflow: auto;
    padding: 7px;
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    background: var(--syn-color-surface-default);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}
.syn-multi__option { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-radius: 6px; color: var(--syn-color-text-secondary); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.syn-multi__option:hover { background: var(--syn-color-surface-subtle); }

/* ========================================================================== */
/* PAGE HEADER, BADGES & DISCLOSURE PRIMITIVES                               */
/* ========================================================================== */
.syn-page-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--syn-space-3);
    margin: 0 0 var(--syn-space-4);
}
.syn-page-header__identity { min-width: 0; }
.syn-page-header__title {
    margin: 0;
    color: var(--syn-color-text-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.syn-page-header__description {
    margin: 4px 0 0;
    color: var(--syn-color-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
.syn-page-header__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--syn-space-2);
    flex-wrap: wrap;
}

.syn-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: var(--syn-radius-pill);
    background: var(--syn-ref-slate-100);
    color: var(--syn-ref-slate-600);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.syn-badge--info { background: var(--syn-ref-blue-100); color: #1e40af; }
.syn-badge--warning { background: #fef3c7; color: #92400e; }
.syn-badge--accent { background: #f3e8ff; color: #7e22ce; }
.syn-badge--orange { background: #ffedd5; color: #9a3412; }
.syn-badge--success { background: #dcfce7; color: #166534; }
.syn-badge--neutral { background: var(--syn-ref-slate-200); color: var(--syn-ref-slate-600); }

.syn-link-button {
    appearance: none;
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--syn-color-action-primary);
    font: inherit;
    font-weight: 700;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}
.syn-link-button:hover { color: var(--syn-color-action-primary-hover); text-decoration: underline; }
.syn-link-button:focus-visible { outline: 2px solid var(--syn-color-focus); outline-offset: 2px; border-radius: 3px; }

.syn-date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
}
.syn-date-range__separator { color: var(--syn-color-text-disabled); text-align: center; }

/* ========================================================================== */
/* TICKET / CASE MANAGEMENT PATTERN                                           */
/* ========================================================================== */
.syn-ticket-page { min-width: 0; }
.syn-ticket-list { display: grid; gap: var(--syn-space-3); }
.syn-ticket-card { display: grid; gap: 10px; padding: 14px 16px; box-shadow: var(--syn-elevation-sm); }
.syn-ticket-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--syn-space-3); flex-wrap: wrap; }
.syn-ticket-card__identity { min-width: 0; }
.syn-ticket-card__title { color: var(--syn-color-text-primary); font-size: 13px; font-weight: 800; line-height: 1.3; }
.syn-ticket-card__meta { margin-top: 2px; color: var(--syn-color-text-disabled); font-size: 11px; line-height: 1.35; }
.syn-ticket-card__description { color: var(--syn-ref-slate-600); font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.syn-ticket-thread { display: grid; gap: 8px; padding: 9px 10px; border-radius: var(--syn-radius-control); background: var(--syn-color-surface-subtle); }
.syn-ticket-thread__item { color: var(--syn-color-text-secondary); font-size: 12px; line-height: 1.45; }
.syn-ticket-thread__role { display: block; margin-bottom: 2px; color: var(--syn-color-text-secondary); font-size: 11px; font-weight: 800; }
.syn-ticket-thread__role--admin { color: #1e40af; }
.syn-ticket-thread__time { display: block; margin-top: 2px; color: var(--syn-color-text-disabled); font-size: 10px; line-height: 1.35; }
.syn-ticket-confirm { display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--syn-color-border-strong); }
.syn-ticket-confirm__prompt { margin: 0; color: var(--syn-ref-violet-600); font-size: 12px; font-weight: 800; line-height: 1.4; }
.syn-ticket-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.syn-ticket-reject-form { display: grid; gap: 6px; max-width: 560px; }
.syn-ticket-deadline { margin: 0; color: var(--syn-color-text-disabled); font-size: 11px; line-height: 1.4; }

/* Entity / Transaction Grid — production shared pattern */
.syn-entity-grid {
    --syn-entity-grid-columns: minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--syn-color-border-subtle);
    border-radius: var(--syn-radius-panel);
    background: var(--syn-color-surface-default);
}
.syn-entity-grid__head,
.syn-entity-grid__row {
    display: grid;
    grid-template-columns: var(--syn-entity-grid-columns);
    min-width: 0;
}
.syn-entity-grid__head {
    align-items: center;
    min-height: 34px;
    background: var(--syn-table-header-bg);
    color: var(--syn-color-text-muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}
.syn-entity-grid__head > div,
.syn-entity-grid__cell {
    min-width: 0;
    padding: 9px 12px;
}
.syn-entity-grid__record { min-width: 0; }
.syn-entity-grid__record + .syn-entity-grid__record { border-top: 1px solid var(--syn-color-border-subtle); }
.syn-entity-grid__row { align-items: start; }
.syn-entity-grid__cell { color: var(--syn-color-text-secondary); font-size: 12px; line-height: 1.4; }
.syn-entity-grid__label {
    display: none;
    margin-bottom: 3px;
    color: var(--syn-color-text-muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}
.syn-entity-grid__title { color: var(--syn-color-text-primary); font-size: 12px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.syn-entity-grid__meta { margin-top: 2px; color: var(--syn-color-text-muted); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.syn-entity-grid__summary {
    display: -webkit-box;
    overflow: hidden;
    color: var(--syn-color-text-secondary);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.syn-entity-grid__detail {
    padding: 12px 14px;
    border-top: 1px dashed var(--syn-color-border-strong);
    background: var(--syn-color-surface-subtle);
}
.syn-entity-grid__empty { padding: 28px 16px; color: var(--syn-color-text-muted); font-size: 12px; text-align: center; }

/* Ticket / Case Management composition on Entity Grid */
.syn-entity-grid--ticket {
    --syn-entity-grid-columns: minmax(150px, .8fr) minmax(250px, 1.25fr) minmax(280px, 1.45fr) minmax(130px, .65fr) minmax(140px, .7fr);
}
.syn-ticket-entity__status,
.syn-ticket-entity__action { align-self: stretch; }
.syn-ticket-entity__action .syn-select { width: 100%; }
.syn-ticket-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: var(--syn-space-4); align-items: start; }
.syn-ticket-detail-block { min-width: 0; }
.syn-ticket-detail-copy { margin-top: 8px; color: var(--syn-color-text-secondary); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

.syn-ticket-status-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--syn-space-3);
    margin-bottom: var(--syn-space-4);
}
.syn-ticket-status-link { min-width: 0; color: inherit; text-decoration: none; }
.syn-ticket-status-card {
    height: var(--syn-scorecard-min-height);
    min-height: var(--syn-scorecard-min-height);
    box-sizing: border-box;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--syn-color-border-subtle);
    border-left: 4px solid var(--syn-color-text-disabled);
    border-radius: var(--syn-radius-card);
    background: var(--syn-color-surface-default);
    box-shadow: var(--syn-elevation-sm);
    transition: border-color var(--syn-motion-fast), box-shadow var(--syn-motion-fast), transform var(--syn-motion-fast);
}
.syn-ticket-status-link:hover .syn-ticket-status-card { box-shadow: var(--syn-elevation-md); transform: translateY(-1px); }
.syn-ticket-status-link:focus-visible { outline: 2px solid var(--syn-color-focus); outline-offset: 2px; border-radius: var(--syn-radius-card); }
.syn-ticket-status-link[aria-current="page"] .syn-ticket-status-card { box-shadow: 0 0 0 2px var(--syn-color-action-primary) inset, var(--syn-elevation-sm); }
.syn-ticket-status-card--info { border-left-color: var(--syn-color-status-info); }
.syn-ticket-status-card--warning { border-left-color: var(--syn-color-status-warning); }
.syn-ticket-status-card--accent { border-left-color: var(--syn-ref-violet-600); }
.syn-ticket-status-card--orange { border-left-color: var(--syn-ref-orange-700); }
.syn-ticket-status-card--success { border-left-color: var(--syn-color-status-success); }
.syn-ticket-status-card--neutral { border-left-color: var(--syn-color-text-muted); }
.syn-ticket-status-card__value { color: var(--syn-color-text-primary); font-size: 20px; font-weight: 850; line-height: 1.1; font-variant-numeric: tabular-nums; }
.syn-ticket-status-card__label { color: var(--syn-color-text-muted); font-size: 10px; font-weight: 800; line-height: 1.3; text-transform: uppercase; }

.syn-ticket-filter { margin-bottom: var(--syn-space-4); }
.syn-ticket-detail-toggle { margin-top: 4px; font-size: 11px; }
.syn-ticket-auto-close { margin-top: 3px; color: var(--syn-color-text-disabled); font-size: 10px; line-height: 1.35; }
.syn-ticket-status-form { min-width: 128px; }
.syn-ticket-detail-title { margin: 0 0 8px; color: var(--syn-color-text-primary); font-size: 13px; font-weight: 800; line-height: 1.3; }
.syn-ticket-empty-note { color: var(--syn-color-text-disabled); font-size: 12px; }
.syn-ticket-notes { display: grid; gap: 6px; }
.syn-ticket-note { padding: 8px 10px; border: 1px solid transparent; border-radius: var(--syn-radius-control); font-size: 12px; line-height: 1.45; }
.syn-ticket-note--internal { border-color: #fde68a; background: #fffbeb; }
.syn-ticket-note--reply { border-color: #bfdbfe; background: #eff6ff; }
.syn-ticket-note--user { border-color: #e9d5ff; background: #faf5ff; }
.syn-ticket-note__label { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; }
.syn-ticket-note__meta { color: var(--syn-color-text-disabled); font-size: 10px; line-height: 1.35; }
.syn-ticket-note__body { margin-top: 4px; overflow-wrap: anywhere; }
.syn-ticket-note-form { display: grid; gap: 6px; max-width: 480px; margin-top: 10px; }
.syn-ticket-pagination { margin-top: var(--syn-space-4); }
.syn-ticket-modal-copy { margin: 0; color: var(--syn-color-text-muted); font-size: 12px; line-height: 1.45; }
.syn-dialog__surface--sm { width: min(420px, 96vw); }
.syn-table__empty { padding: 24px 12px; color: var(--syn-color-text-disabled); text-align: center; }

@media (max-width: 1250px) {
    .syn-entity-grid--ticket {
        --syn-entity-grid-columns: minmax(135px, .75fr) minmax(220px, 1.15fr) minmax(240px, 1.25fr) minmax(115px, .6fr) minmax(128px, .65fr);
    }
}

@media (max-width: 900px) {
    .syn-entity-grid__head { display: none; }
    .syn-entity-grid__label { display: block; }
    .syn-entity-grid--ticket .syn-entity-grid__row { grid-template-columns: minmax(0, 1fr) minmax(160px, .55fr); }
    .syn-ticket-entity__identity { grid-column: 1; grid-row: 1; }
    .syn-ticket-entity__status { grid-column: 2; grid-row: 1; }
    .syn-ticket-entity__subject { grid-column: 1; grid-row: 2; }
    .syn-ticket-entity__action { grid-column: 2; grid-row: 2; }
    .syn-ticket-entity__summary { grid-column: 1 / -1; grid-row: 3; padding-top: 4px; }
    .syn-ticket-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .syn-entity-grid--ticket .syn-entity-grid__row { grid-template-columns: 1fr; }
    .syn-ticket-entity__identity,
    .syn-ticket-entity__subject,
    .syn-ticket-entity__summary,
    .syn-ticket-entity__status,
    .syn-ticket-entity__action { grid-column: 1; grid-row: auto; }
    .syn-entity-grid__cell { padding: 8px 10px; }
    .syn-entity-grid__detail { padding: 10px; }
    .syn-entity-grid__summary { -webkit-line-clamp: 3; }
}

@media (max-width: 1250px) {
    .syn-ticket-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .syn-ticket-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .syn-page-header { flex-direction: column; }
    .syn-page-header__actions { width: 100%; }
    .syn-ticket-card { padding: 12px; }
    .syn-ticket-status-grid { grid-template-columns: 1fr; gap: var(--syn-space-2); }
    .syn-ticket-actions { align-items: stretch; }
    .syn-ticket-actions .syn-btn { flex: 1 1 auto; }
    .syn-date-range { grid-template-columns: 1fr; }
    .syn-date-range__separator { display: none; }
}

/* ========================================================================== */
/* WORKSPACE NAVIGATION & TRUE TABS                                           */
/* ========================================================================== */
.syn-workspace-nav,
.syn-tabs {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--syn-color-border-subtle);
    scrollbar-width: thin;
}
.syn-workspace-nav a,
.syn-tab {
    position: relative;
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 1px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--syn-color-text-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.syn-workspace-nav a:hover,
.syn-tab:hover { color: var(--syn-color-text-secondary); }
.syn-workspace-nav a[aria-current="page"],
.syn-tab[aria-selected="true"] { color: var(--syn-color-action-primary-hover); }
.syn-workspace-nav a[aria-current="page"]::after,
.syn-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--syn-color-action-primary);
}
.syn-tab-panel { padding-top: 10px; }
.syn-tab-panel[hidden] { display: none; }

/* ========================================================================== */
/* SCORECARDS & ANALYTICS                                                     */
/* ========================================================================== */
.syn-scorecard-grid {
    display: grid;
    grid-template-columns: repeat(var(--syn-score-cols, 4), minmax(0, 1fr));
    gap: var(--syn-space-3);
    min-width: 0;
}
.syn-scorecard {
    position: relative;
    min-width: 0;
    min-height: var(--syn-scorecard-min-height);
    padding: 10px 12px;
    border: 1px solid var(--syn-color-border-subtle);
    border-radius: var(--syn-radius-card);
    background: var(--syn-color-surface-default);
}
.syn-scorecard__label { color: var(--syn-color-text-muted); font-size: 11px; font-weight: 750; line-height: 1.3; }
.syn-scorecard__value { margin: 6px 0 3px; color: var(--syn-color-text-primary); font-size: 20px; line-height: 1.15; font-weight: 850; overflow-wrap: anywhere; }
.syn-scorecard__value[data-syn-number-adaptive][data-syn-number-ready="1"] {
    white-space: nowrap;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: clip;
    font-variant-numeric: tabular-nums;
}
.syn-scorecard__delta { font-size: 10px; font-weight: 800; }
.syn-scorecard__delta--positive { color: var(--syn-color-status-success); }
.syn-scorecard__delta--negative { color: var(--syn-color-status-danger); }
.syn-scorecard__delta--neutral { color: var(--syn-color-text-muted); }

.syn-analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--syn-space-4); align-items: stretch; margin-bottom: 18px; }
.syn-analytics-panel {
    min-width: 0;
    height: var(--syn-analytics-panel-height);
    min-height: var(--syn-analytics-panel-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 14px;
    border: 1px solid var(--syn-color-border-subtle);
    border-radius: var(--syn-radius-panel);
    background: var(--syn-color-surface-default);
}
.syn-analytics-panel__head {
    flex: 0 0 var(--syn-analytics-panel-head-height);
    min-height: var(--syn-analytics-panel-head-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: var(--syn-analytics-panel-head-gap);
    color: var(--syn-color-text-primary);
    font-size: 13px;
    font-weight: 800;
}

.syn-analytics-panel__title {
    margin: 0;
    min-width: 0;
    color: var(--syn-color-text-primary);
    font-size: var(--syn-analytics-panel-title-size);
    font-weight: var(--syn-analytics-panel-title-weight);
    line-height: var(--syn-analytics-panel-title-line-height);
}
.syn-analytics-stage { flex: 0 0 var(--syn-analytics-stage-height); height: var(--syn-analytics-stage-height); min-height: 0; overflow: auto; }

/* ========================================================================== */
/* ANALYTICS WORKSPACE — production donor migration contract                  */
/* Scoped bridge intentionally outranks module fallback CSS during migration.  */
/* ========================================================================== */
.syn-dsds-shared-v2 {
    --dsds-analytics-stage-height: var(--syn-analytics-stage-height);
    --dsds-analytics-panel-head-height: var(--syn-analytics-panel-head-height);
    --dsds-analytics-panel-head-gap: var(--syn-analytics-panel-head-gap);
    --dsds-analytics-panel-height: var(--syn-analytics-panel-height);
}
.syn-dsds-shared-v2 .syn-workspace--analytics {
    width:100%; min-width:0; box-sizing:border-box; margin:0 0 16px; padding:0;
    border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible;
}
.syn-dsds-shared-v2 .syn-workspace__head {
    display:flex; flex-direction:row; align-items:stretch; justify-content:space-between; gap:0;
    min-width:0; min-height:44px; margin:0; padding:0;
    border:1px solid var(--syn-color-border-subtle); border-bottom:0;
    border-radius:var(--syn-radius-panel) var(--syn-radius-panel) 0 0;
    background:var(--syn-color-surface-default); box-shadow:none; overflow:hidden;
}
.syn-dsds-shared-v2 .syn-workspace__head .syn-workspace-nav {
    flex:1 1 auto; align-items:stretch; min-width:0; margin:0; padding:0 16px; gap:0;
    border:0; border-radius:0; background:transparent; overflow-x:auto; overflow-y:hidden;
}
.syn-dsds-shared-v2 .syn-workspace__head .syn-workspace-nav a {
    min-height:44px; justify-content:center; padding:0 16px; border:0; border-bottom:3px solid transparent;
    color:var(--syn-color-text-muted); font-size:13px; font-weight:800; line-height:1; background:transparent;
}
.syn-dsds-shared-v2 .syn-workspace__head .syn-workspace-nav a:hover {
    background:var(--syn-color-surface-subtle); color:var(--syn-color-text-primary);
}
.syn-dsds-shared-v2 .syn-workspace__head .syn-workspace-nav a[aria-current="page"] {
    border-bottom-color:var(--syn-color-action-primary); color:var(--syn-color-text-primary);
}
.syn-dsds-shared-v2 .syn-workspace__head .syn-workspace-nav a[aria-current="page"]::after { display:none; }
.syn-dsds-shared-v2 .syn-workspace__actions {
    flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0;
    margin:0; padding:0 12px; border-left:1px solid var(--syn-color-border-subtle);
    background:var(--syn-color-surface-default);
}
.syn-dsds-shared-v2 .syn-workspace__actions .syn-btn {
    min-height:32px; height:32px; margin:0; padding:0 12px;
    border:1px solid var(--syn-color-border-strong); border-radius:var(--syn-radius-control);
    background:var(--syn-color-surface-default); color:var(--syn-color-text-primary);
    font-size:11px; font-weight:800; line-height:1; box-shadow:none;
}
.syn-dsds-shared-v2 .syn-workspace__actions .syn-btn:hover {
    border-color:var(--syn-color-text-disabled); background:var(--syn-color-surface-subtle);
}
.syn-dsds-shared-v2 .syn-workspace__score-surface {
    width:100%; box-sizing:border-box; margin:0; padding:12px 14px 14px;
    border:1px solid var(--syn-color-border-subtle); border-radius:0 0 var(--syn-radius-panel) var(--syn-radius-panel);
    background:var(--syn-color-surface-default); box-shadow:none;
}

.syn-dsds-shared-v2 .syn-scorecard-grid--adaptive {
    --syn-score-cols:1; --syn-score-rows:1; --syn-score-viewport-cols:8; --syn-score-gap:var(--syn-space-3);
    display:grid;
    grid-template-columns:repeat(var(--syn-score-cols), minmax(0,1fr));
    grid-template-rows:repeat(var(--syn-score-rows), minmax(var(--syn-scorecard-min-height),auto));
    gap:var(--syn-score-gap); overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity; scrollbar-width:thin;
}
.syn-dsds-shared-v2 .syn-scorecard-grid--adaptive.is-overflow {
    grid-template-columns:repeat(
        var(--syn-score-cols)
        calc((100% - ((var(--syn-score-viewport-cols) - 1) * var(--syn-score-gap))) / var(--syn-score-viewport-cols))
    );
}
.syn-dsds-shared-v2 .syn-scorecard-grid--adaptive .syn-scorecard {
    position:relative; min-width:0; width:auto; min-height:var(--syn-scorecard-min-height);
    padding:10px 12px; border:1px solid var(--syn-color-border-subtle);
    border-radius:var(--syn-radius-card); background:var(--syn-color-surface-default); scroll-snap-align:start;
}
.syn-dsds-shared-v2 .syn-scorecard-grid--adaptive .syn-scorecard__label {
    margin:0 0 6px; padding-right:18px; color:var(--syn-color-text-muted);
    font-size:11px; line-height:1.3; font-weight:750; text-transform:none; letter-spacing:0; white-space:normal;
}
.syn-dsds-shared-v2 .syn-scorecard-grid--adaptive .syn-scorecard__value {
    margin:6px 0 3px; color:var(--syn-color-text-primary); font-size:20px; line-height:1.15;
    font-weight:850; overflow-wrap:anywhere;
}
.syn-dsds-shared-v2 .syn-scorecard__check {
    position:absolute; top:8px; right:8px; width:14px; height:14px; margin:0; cursor:pointer;
}
.syn-dsds-shared-v2 .syn-scorecard[data-metric-card] { cursor:grab; user-select:none; }
.syn-dsds-shared-v2 .syn-scorecard[data-metric-card].is-direct-dragging { opacity:.48; cursor:grabbing; }
.syn-dsds-shared-v2 .syn-scorecard[data-metric-card].is-direct-drop-before { box-shadow:-3px 0 0 var(--syn-color-action-primary); }
.syn-dsds-shared-v2 .syn-scorecard[data-metric-card].is-direct-drop-after { box-shadow:3px 0 0 var(--syn-color-action-primary); }

.syn-dsds-shared-v2 .syn-analytics-grid {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--syn-space-4);
    align-items:stretch; margin-bottom:18px;
}
.syn-dsds-shared-v2 .syn-analytics-grid > .syn-analytics-panel { min-width:0; margin-bottom:0; }
.syn-dsds-shared-v2 .syn-analytics-panel--peer {
    height:var(--syn-analytics-panel-height); min-height:var(--syn-analytics-panel-height);
    box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;
    padding:14px; border:1px solid var(--syn-color-border-subtle);
    border-radius:var(--syn-radius-panel); background:var(--syn-color-surface-default);
}
.syn-dsds-shared-v2 .syn-analytics-panel--peer > .syn-analytics-panel__head {
    flex:0 0 var(--syn-analytics-panel-head-height); min-height:var(--syn-analytics-panel-head-height);
    height:var(--syn-analytics-panel-head-height); margin:0 0 var(--syn-analytics-panel-head-gap);
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    color:var(--syn-color-text-primary); font-size:15px; font-weight:800;
}

.syn-dsds-shared-v2 .syn-analytics-panel__title {
    margin:0; min-width:0; color:var(--syn-color-text-primary);
    font-size:var(--syn-analytics-panel-title-size);
    font-weight:var(--syn-analytics-panel-title-weight);
    line-height:var(--syn-analytics-panel-title-line-height);
}

/* Metric Selector / Atur Metrik — shared visual; module still owns data/order/persistence. */
.syn-dsds-shared-v2 .syn-dialog { z-index:var(--syn-layer-modal); }
.syn-dsds-shared-v2 .syn-dialog.open { display:flex; }
.syn-dsds-shared-v2 .syn-dialog__backdrop { position:absolute; inset:0; background:rgba(15,23,42,.48); }
.syn-dsds-shared-v2 .syn-dialog__surface.syn-metric-config {
    position:relative; width:min(860px,96vw); max-height:88vh; display:flex; flex-direction:column;
    background:var(--syn-color-surface-default); border-radius:var(--syn-radius-panel);
    box-shadow:var(--syn-elevation-overlay); overflow:hidden;
}
.syn-dsds-shared-v2 .syn-metric-config__head { padding:16px 18px 13px; border-bottom:1px solid var(--syn-color-border-subtle); }
.syn-dsds-shared-v2 .syn-metric-config__title { color:var(--syn-color-text-primary); font-size:15px; font-weight:800; }
.syn-dsds-shared-v2 .syn-metric-config__sub { margin-top:4px; color:var(--syn-color-text-muted); font-size:11px; line-height:1.45; }
.syn-dsds-shared-v2 .syn-metric-config__grid {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:0; overflow:hidden;
}
.syn-dsds-shared-v2 .syn-metric-config__pane { min-width:0; max-height:58vh; padding:14px 16px; overflow:auto; }
.syn-dsds-shared-v2 .syn-metric-config__picker { border-right:1px solid var(--syn-color-border-subtle); }
.syn-dsds-shared-v2 .syn-metric-config__col-head {
    display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;
    color:var(--syn-ref-slate-600); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
}
.syn-dsds-shared-v2 .syn-metric-config__options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.syn-dsds-shared-v2 .syn-metric-config__option {
    display:flex; align-items:center; gap:7px; padding:8px 9px; border:1px solid var(--syn-color-border-subtle);
    border-radius:var(--syn-radius-control); background:var(--syn-color-surface-default);
    color:var(--syn-color-text-secondary); font-size:11px; cursor:pointer;
}
.syn-dsds-shared-v2 .syn-metric-config__option:hover { background:var(--syn-color-surface-subtle); }
.syn-dsds-shared-v2 .syn-metric-config__selected-list { display:flex; flex-direction:column; gap:7px; }
.syn-dsds-shared-v2 .syn-metric-config__selected-item {
    display:grid; grid-template-columns:20px minmax(0,1fr) auto auto; align-items:center; gap:7px;
    padding:7px 8px; border:1px solid var(--syn-color-border-subtle); border-radius:var(--syn-radius-control);
    background:var(--syn-color-surface-default);
}
.syn-dsds-shared-v2 .syn-metric-config__selected-item.is-dragging { opacity:.45; }
.syn-dsds-shared-v2 .syn-metric-config__drag { color:var(--syn-color-text-disabled); cursor:grab; font-size:15px; user-select:none; }
.syn-dsds-shared-v2 .syn-metric-config__selected-label {
    overflow:hidden; color:var(--syn-color-text-secondary); font-size:11px; font-weight:700;
    text-overflow:ellipsis; white-space:nowrap;
}
.syn-dsds-shared-v2 .syn-metric-config__move { display:flex; gap:2px; }
.syn-dsds-shared-v2 .syn-metric-config__move .syn-icon-btn,
.syn-dsds-shared-v2 .syn-metric-config__remove.syn-icon-btn {
    width:24px; min-width:24px; height:24px; min-height:24px; padding:0; border:0; border-radius:4px;
    background:transparent; color:var(--syn-color-text-muted); box-shadow:none;
}
.syn-dsds-shared-v2 .syn-metric-config__move .syn-icon-btn:hover,
.syn-dsds-shared-v2 .syn-metric-config__remove.syn-icon-btn:hover { background:var(--syn-ref-slate-100); color:var(--syn-color-text-primary); }
.syn-dsds-shared-v2 .syn-metric-config__remove.syn-icon-btn { color:var(--syn-color-text-disabled); font-size:15px; }
.syn-dsds-shared-v2 .syn-metric-config__empty { padding:20px 8px; text-align:center; color:var(--syn-color-text-disabled); font-size:11px; }
.syn-dsds-shared-v2 .syn-metric-config__foot {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 16px; border-top:1px solid var(--syn-color-border-subtle);
}
.syn-dsds-shared-v2 .syn-metric-config__count { color:var(--syn-color-text-muted); font-size:10px; }
.syn-dsds-shared-v2 .syn-metric-config__actions { display:flex; gap:7px; }
.syn-dsds-shared-v2 .syn-metric-config .syn-btn {
    min-height:32px; padding:0 11px; border-radius:7px; font-size:11px; font-weight:700;
}
.syn-dsds-shared-v2 .syn-metric-config .syn-btn--secondary {
    border:1px solid var(--syn-color-border-strong); background:var(--syn-color-surface-default); color:var(--syn-color-text-secondary);
}
.syn-dsds-shared-v2 .syn-metric-config .syn-btn--primary {
    border:1px solid var(--syn-color-text-primary); background:var(--syn-color-text-primary); color:#fff;
}

@media (max-width:1250px) {
    .syn-dsds-shared-v2 .syn-scorecard-grid--adaptive {
        grid-template-columns:repeat(var(--syn-score-cols), minmax(calc((100% - 36px) / 4),1fr));
    }
}
@media (max-width:900px) {
    .syn-dsds-shared-v2 .syn-workspace__head .syn-workspace-nav { padding-left:12px; padding-right:12px; }
    .syn-dsds-shared-v2 .syn-analytics-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
    .syn-dsds-shared-v2 .syn-metric-config__grid { grid-template-columns:1fr; overflow:auto; }
    .syn-dsds-shared-v2 .syn-metric-config__picker { border-right:0; border-bottom:1px solid var(--syn-color-border-subtle); }
    .syn-dsds-shared-v2 .syn-metric-config__options { grid-template-columns:1fr; }
}
@media (max-width:640px) {
    .syn-dsds-shared-v2 .syn-workspace__head { flex-direction:row; align-items:stretch; min-height:44px; }
    .syn-dsds-shared-v2 .syn-workspace__head .syn-workspace-nav a { min-height:44px; }
    .syn-dsds-shared-v2 .syn-workspace__actions { width:auto; padding:0 8px; }
    .syn-dsds-shared-v2 .syn-workspace__actions .syn-btn {
        min-height:44px; height:44px; border:0; border-radius:0; background:transparent; padding:0 8px;
    }
    .syn-dsds-shared-v2 .syn-workspace__score-surface { padding:12px; }
    .syn-dsds-shared-v2 .syn-scorecard-grid--adaptive {
        --syn-score-gap:var(--syn-space-2);
        gap:var(--syn-score-gap);
        grid-template-columns:repeat(var(--syn-score-cols), minmax(calc((100% - 16px) / 3),1fr));
    }
    .syn-dsds-shared-v2 .syn-scorecard-grid--adaptive .syn-scorecard { min-width:0; min-height:var(--syn-scorecard-min-height); padding:9px 8px; }
    .syn-dsds-shared-v2 .syn-scorecard-grid--adaptive .syn-scorecard__label { font-size:9px; }
    .syn-dsds-shared-v2 .syn-scorecard-grid--adaptive .syn-scorecard__value { font-size:clamp(16px,4.7vw,21px); }
    .syn-dsds-shared-v2 .syn-analytics-panel--peer { height:auto; min-height:0; overflow:visible; }
}

/* ========================================================================== */
/* TABLES                                                                     */
/* ========================================================================== */
.syn-table-wrap { min-width: 0; overflow: auto; border: 1px solid var(--syn-ref-slate-100); border-radius: var(--syn-radius-control); background: var(--syn-color-surface-default); }
.syn-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 12px; }
.syn-table th,
.syn-table td { padding: 6px 8px; border-bottom: 1px solid var(--syn-ref-slate-100); text-align: left; vertical-align: middle; }
.syn-table th { background: var(--syn-table-header-bg); color: var(--syn-color-text-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.syn-table--sticky th { position: sticky; top: 0; z-index: 1; }
.syn-table--compact th,
.syn-table--compact td { padding: 5px 8px; }
.syn-table--roomy th,
.syn-table--roomy td { padding: 9px 10px; }
.syn-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }

.syn-pagination { min-height: var(--syn-control-sm); display: flex; align-items: center; justify-content: center; gap: 6px; }
.syn-page-btn {
    min-height: var(--syn-control-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid var(--syn-color-border-strong);
    border-radius: var(--syn-radius-item);
    background: var(--syn-color-surface-default);
    color: var(--syn-color-text-secondary);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.syn-page-btn[aria-current="page"] { background: var(--syn-color-action-primary); border-color: var(--syn-color-action-primary); color: #fff; }
.syn-page-btn:disabled { color: var(--syn-color-text-disabled); cursor: not-allowed; opacity: .6; }

/* ========================================================================== */
/* MESSAGES & STATES                                                          */
/* ========================================================================== */
.syn-message {
    position: relative;
    min-width: 0;
    padding: 8px 34px 8px 10px;
    border: 1px solid var(--syn-color-border-subtle);
    border-left-width: 4px;
    border-radius: var(--syn-radius-card);
    background: var(--syn-color-surface-default);
    color: var(--syn-color-text-secondary);
    font-size: 11px;
    line-height: 1.45;
}
.syn-message--info { border-color: #bfdbfe; border-left-color: var(--syn-color-status-info); background: #eff6ff; color: #1e40af; }
.syn-message--warning { border-color: #fde68a; border-left-color: var(--syn-color-status-warning); background: #fffbeb; color: #92400e; }
.syn-message--danger { border-color: #fecaca; border-left-color: var(--syn-color-status-danger); background: #fef2f2; color: #991b1b; }
.syn-message--success { border-color: #bbf7d0; border-left-color: var(--syn-color-status-success); background: #f0fdf4; color: #166534; }
.syn-message__close { position: absolute; top: 5px; right: 7px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: currentColor; font-size: 17px; font-weight: 800; cursor: pointer; }
.syn-message__close:hover { background: rgba(15, 23, 42, .06); }

.syn-state { min-width: 0; padding: 14px; border: 1px dashed var(--syn-color-border-strong); border-radius: 10px; background: var(--syn-color-surface-subtle); color: var(--syn-color-text-muted); font-size: 11px; line-height: 1.45; text-align: center; }
.syn-state--error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.syn-state--warning,
.syn-state--partial,
.syn-state--stale { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.syn-state--success,
.syn-state--ready { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }

/* ========================================================================== */
/* CONTEXT HELP                                                               */
/* ========================================================================== */
.syn-context-help-wrap { position: relative; display: inline-flex; }
.syn-context-help {
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--syn-color-border-strong);
    border-radius: 50%;
    background: var(--syn-color-surface-default);
    color: var(--syn-color-text-muted);
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
.syn-context-help:hover,
.syn-context-help[aria-expanded="true"] { border-color: var(--syn-ref-blue-300); color: var(--syn-color-action-primary-hover); }
.syn-context-help__content {
    position: absolute;
    z-index: var(--syn-layer-tooltip);
    left: 50%;
    bottom: calc(100% + 7px);
    width: max-content;
    max-width: 240px;
    transform: translateX(-50%);
    padding: 7px 9px;
    border-radius: 7px;
    background: var(--syn-context-help-bg);
    color: var(--syn-context-help-text);
    box-shadow: var(--syn-elevation-lg);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
}
.syn-context-help__content[hidden] { display: none; }

/* ========================================================================== */
/* MODAL & DRAWER — behavior opt-in via assets/js/dsds.js                    */
/* ========================================================================== */
.syn-dialog,
.syn-drawer {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.syn-dialog { z-index: var(--syn-layer-modal); }
.syn-drawer { z-index: var(--syn-layer-drawer); justify-content: flex-end; padding: 0; }
.syn-dialog.is-open,
.syn-drawer.is-open { display: flex; }
.syn-dialog__backdrop,
.syn-drawer__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .48); }
.syn-dialog__surface,
.syn-drawer__surface {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--syn-color-surface-default);
    box-shadow: var(--syn-elevation-overlay);
}
.syn-dialog__surface { width: min(860px, 96vw); max-height: 88vh; border-radius: var(--syn-radius-panel); overflow: hidden; }
.syn-drawer__surface { width: min(480px, 92vw); height: 100%; overflow: auto; }
.syn-dialog__head,
.syn-drawer__head { padding: 14px 16px; border-bottom: 1px solid var(--syn-color-border-subtle); }
.syn-dialog__body,
.syn-drawer__body { min-height: 0; overflow: auto; padding: 14px 16px; }
.syn-dialog__foot,
.syn-drawer__foot { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 12px 16px; border-top: 1px solid var(--syn-color-border-subtle); }

/* ========================================================================== */
/* RESPONSIVE                                                                 */
/* ========================================================================== */
@media (max-width: 1250px) {
    .syn-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}

@media (max-width: 900px) {
    .syn-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .syn-filter-actions { grid-column: 1 / -1; }
    .syn-analytics-grid { grid-template-columns: 1fr; }
    .syn-analytics-panel { height: auto; min-height: var(--syn-analytics-panel-height); }
}

@media (max-width: 640px) {
    .syn-filter-bar { grid-template-columns: 1fr; }
    .syn-filter-actions { width: 100%; justify-content: flex-end; }
    .syn-btn--md,
    .syn-btn--lg { min-height: var(--syn-control-lg); }
    .syn-scorecard-grid { gap: var(--syn-space-2); }
    .syn-scorecard { min-height: var(--syn-scorecard-min-height); padding: 9px 8px; }
    .syn-scorecard__value { font-size: clamp(16px, 4.7vw, 21px); }
    .syn-analytics-panel { min-height: 0; overflow: visible; }
    .syn-analytics-stage { flex-basis: auto; height: auto; min-height: 300px; }
    .syn-dialog { padding: 12px; }
    .syn-dialog__surface { width: 100%; max-height: 92vh; }
}

@media (prefers-reduced-motion: reduce) {
    .syn-btn,
    .syn-card--interactive { transition-duration: .001ms !important; }
}

body.syn-overlay-open { overflow: hidden; }

/* ========================================================================== */
/* CONTEXT SWITCH / PLATFORM SELECTOR                                         */
/* ========================================================================== */
.syn-context-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.syn-context-switch__item {
    flex: 0 0 auto;
    min-height: var(--syn-control-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--syn-color-border-subtle);
    border-radius: var(--syn-radius-control);
    background: var(--syn-color-surface-default);
    color: var(--syn-color-text-secondary);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        border-color var(--syn-motion-fast) var(--syn-ease-standard)
        background-color var(--syn-motion-fast) var(--syn-ease-standard)
        color var(--syn-motion-fast) var(--syn-ease-standard);
}
.syn-context-switch__item:hover { border-color: var(--syn-color-border-strong); background: var(--syn-color-surface-subtle); }
.syn-context-switch__item[aria-current="page"] { border-color: var(--syn-ref-blue-300); background: var(--syn-color-action-subtle); color: var(--syn-color-action-primary-hover); }
.syn-context-switch__item:focus-visible { outline: 2px solid var(--syn-color-focus); outline-offset: 2px; }
.syn-context-switch__item img { display: block; width: auto; height: 20px; max-width: 88px; object-fit: contain; }
.syn-context-switch__dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: var(--syn-radius-pill); background: var(--syn-color-text-disabled); }
.syn-context-switch__item[data-platform="shopee"] .syn-context-switch__dot { background: #ee4d2d; }
.syn-context-switch__item[data-platform="tiktok"] .syn-context-switch__dot { background: #111827; }
.syn-context-switch__item[data-platform="lazada"] .syn-context-switch__dot { background: #0f146d; }
.syn-context-switch__item[data-platform="meta"] .syn-context-switch__dot { background: #0668e1; }

/* Semantic status variant shared across operational modules. */
.syn-badge--danger { background: #fee2e2; color: #991b1b; }

/* ========================================================================== */
/* INTEGRATION / CONNECTION MANAGEMENT PATTERN                                */
/* ========================================================================== */
.syn-integration-page { min-width: 0; }
.syn-integration-head { margin-bottom: var(--syn-space-3); padding: 12px 14px; box-shadow: var(--syn-elevation-sm); }
.syn-integration-head__row { margin: 0 0 10px; }
.syn-integration-head__identity { min-width: 0; display: flex; align-items: flex-start; gap: 9px; }
.syn-integration-head__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: var(--syn-radius-control);
    background: var(--syn-color-action-subtle);
    color: var(--syn-color-action-primary-hover);
    font-size: 18px;
    line-height: 1;
}
.syn-integration-platform-switch { padding-top: 8px; border-top: 1px solid var(--syn-ref-slate-100); }
.syn-integration-connect { margin-bottom: var(--syn-space-3); padding: 12px 14px; }
.syn-integration-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.syn-integration-section-title { margin: 0; color: var(--syn-color-text-primary); font-size: 15px; font-weight: 700; line-height: 1.3; }
.syn-integration-section-copy { margin: 2px 0 0; color: var(--syn-color-text-muted); font-size: 11px; line-height: 1.4; }
.syn-integration-section-meta { flex: 0 0 auto; color: var(--syn-color-text-muted); font-size: 10px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.syn-integration-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.syn-integration-list { min-width: 0; overflow: hidden; border: 1px solid var(--syn-color-border-subtle); border-radius: var(--syn-radius-panel); background: var(--syn-color-surface-default); }
.syn-integration-section-head--list { align-items: center; margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--syn-color-border-subtle); background: var(--syn-color-surface-subtle); }
.syn-integration-list .syn-entity-grid { border: 0; border-radius: 0; }
.syn-entity-grid--integration {
    --syn-entity-grid-columns: minmax(82px,.45fr) minmax(180px,1fr) minmax(150px,.85fr) minmax(290px,1.65fr) minmax(145px,.78fr) minmax(130px,.7fr);
}
.syn-integration-platform { min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.syn-integration-platform img { display: block; width: auto; height: 20px; max-width: 88px; object-fit: contain; }
.syn-code {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    color: var(--syn-color-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.syn-integration-modules { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.syn-integration-modules .syn-badge { min-height: 22px; padding: 3px 7px; font-size: 9.5px; }
.syn-integration-time { color: var(--syn-color-text-muted); font-size: 10.5px; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.syn-integration-browser-status { margin-top: 8px; padding: 7px 9px; border-radius: var(--syn-radius-control); background: var(--syn-color-surface-subtle); color: var(--syn-color-text-secondary); font-size: 11px; line-height: 1.4; }
.syn-integration-browser-status:empty { display: none; }
.syn-integration-dialog__title { margin: 0; color: var(--syn-color-text-primary); font-size: 13px; font-weight: 800; line-height: 1.3; }
.syn-integration-dialog__copy { margin: 3px 0 0; color: var(--syn-color-text-muted); font-size: 11px; line-height: 1.4; }
.syn-integration-empty { margin: 12px; min-height: 110px; display: grid; place-items: center; }

@media (max-width: 1250px) {
    .syn-entity-grid--integration {
        --syn-entity-grid-columns: minmax(74px,.4fr) minmax(160px,.95fr) minmax(140px,.8fr) minmax(250px,1.5fr) minmax(132px,.72fr) minmax(120px,.66fr);
    }
}

@media (max-width: 900px) {
    .syn-entity-grid--integration .syn-entity-grid__row { grid-template-columns: minmax(110px,.38fr) minmax(0,1fr); }
    .syn-integration-entity__platform { grid-column: 1; grid-row: 1; }
    .syn-integration-entity__store { grid-column: 2; grid-row: 1; }
    .syn-integration-entity__code { grid-column: 2; grid-row: 2; }
    .syn-integration-entity__modules { grid-column: 1 / -1; grid-row: 3; }
    .syn-integration-entity__status { grid-column: 1; grid-row: 4; }
    .syn-integration-entity__updated { grid-column: 2; grid-row: 4; }
}

@media (max-width: 640px) {
    .syn-integration-head { padding: 12px; }
    .syn-integration-head__icon { width: 32px; height: 32px; flex-basis: 32px; font-size: 16px; }
    .syn-integration-connect { padding: 12px; }
    .syn-integration-section-head--list { align-items: flex-start; flex-direction: column; }
    .syn-integration-actions { align-items: stretch; }
    .syn-integration-actions .syn-btn { flex: 1 1 auto; }
    .syn-entity-grid--integration .syn-entity-grid__row { grid-template-columns: 1fr; }
    .syn-integration-entity__platform,
    .syn-integration-entity__store,
    .syn-integration-entity__code,
    .syn-integration-entity__modules,
    .syn-integration-entity__status,
    .syn-integration-entity__updated { grid-column: 1; grid-row: auto; }
}

/* ========================================================================== */
/* AUTHENTICATION COMPOSITION                                                 */
/* ========================================================================== */
.syn-auth-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: var(--syn-space-6);
    box-sizing: border-box;
    background: var(--syn-color-surface-page);
    color: var(--syn-color-text-secondary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.syn-auth-page *,
.syn-auth-page *::before,
.syn-auth-page *::after { box-sizing: border-box; }
.syn-auth { width: min(100%, 380px); }
.syn-auth__panel { padding: var(--syn-space-7); }
.syn-auth__brand {
    display: grid;
    justify-items: center;
    gap: var(--syn-space-2);
    margin-bottom: var(--syn-space-5);
    text-align: center;
}
.syn-auth__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 104px;
    object-fit: contain;
}
.syn-auth__title {
    margin: 0;
    color: var(--syn-color-text-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.syn-auth__copy {
    margin: var(--syn-space-1) 0 0;
    color: var(--syn-color-text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.syn-auth__message { margin-bottom: var(--syn-space-4); padding-right: 10px; }
.syn-auth__form { display: grid; gap: var(--syn-space-4); }
.syn-auth__submit { width: 100%; margin-top: var(--syn-space-1); }
@media (max-width: 640px) {
    .syn-auth-page { padding: var(--syn-space-3); }
    .syn-auth { width: 100%; }
    .syn-auth__panel { padding: var(--syn-space-5); }
    .syn-auth__logo { max-height: 88px; }
}

/* ========================================================================== */
/* ANALYTICS RUNTIME PRIMITIVES                                                */
/* Shared implementation for data-heavy analytics modules.                    */
/* ========================================================================== */
.syn-panel__title {
    margin: 0;
    color: var(--syn-color-text-primary);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}
.syn-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--syn-space-3);
    margin-bottom: var(--syn-space-3);
}
.syn-panel__copy { min-width: 0; }
.syn-panel__sub {
    margin-top: 3px;
    color: var(--syn-color-text-muted);
    font-size: 11px;
    line-height: 1.4;
}
.syn-panel__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--syn-space-2);
    flex-wrap: wrap;
}
.syn-message--section { margin-bottom: var(--syn-space-2); }
.syn-scorecard__check,
.syn-metric-config__option input[type="checkbox"] { accent-color: var(--syn-color-action-primary); }

.syn-analytics-stage--stack {
    display: flex;
    flex-direction: column;
    gap: var(--syn-space-2);
    overflow: hidden;
}
.syn-analytics-stage--stack > .syn-tabs,
.syn-analytics-stage--stack > .syn-table-toolbar { flex: 0 0 auto; }
.syn-analytics-stage--stack > .syn-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 0;
    overflow: hidden;
}
.syn-analytics-stage--stack > .syn-tab-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--syn-space-2);
}
.syn-analytics-stage--stack > .syn-tab-panel > .syn-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
}

.syn-chart {
    position: relative;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.syn-chart__canvas { display: block; width: 100%; height: 100%; }
.syn-chart__empty {
    display: none;
    position: absolute;
    inset: 0;
    place-items: center;
    padding: 16px;
    background: var(--syn-color-surface-default);
    color: var(--syn-color-text-muted);
    text-align: center;
    font-size: 11px;
    line-height: 1.4;
}
.syn-chart.is-empty .syn-chart__empty { display: grid; }
.syn-chart.is-empty .syn-chart__canvas { visibility: hidden; }
.syn-chart__center {
    position: absolute;
    z-index: 2;
    top: 45%;
    left: 50%;
    width: 135px;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}
.syn-chart__center-label {
    display: block;
    color: var(--syn-color-text-disabled);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.syn-chart__center-value {
    display: block;
    margin-top: 3px;
    color: var(--syn-color-text-primary);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.syn-table-stage {
    display: flex;
    flex-direction: column;
    gap: var(--syn-space-2);
    min-height: 0;
    overflow: hidden;
}
.syn-table-stage > .syn-table-wrap { flex: 1 1 auto; min-height: 0; }
.syn-table-toolbar {
    display: flex;
    align-items: center;
    gap: var(--syn-space-2);
    min-width: 0;
}
.syn-table-toolbar__search { flex: 1 1 auto; min-width: 240px; max-width: 420px; }
.syn-table--nowrap th,
.syn-table--nowrap td { white-space: nowrap; }
.syn-table--resizable {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
}
.syn-table--resizable th,
.syn-table--resizable td { overflow: hidden; text-overflow: ellipsis; }
.syn-table th.syn-table__sortable {
    position: relative;
    padding-right: 23px;
    user-select: none;
}
.syn-table__sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
}
.syn-table__sort:focus-visible { outline: 2px solid var(--syn-color-focus); outline-offset: 2px; }
.syn-table th.syn-table__sortable::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--syn-color-text-disabled);
    border-bottom: 1.5px solid var(--syn-color-text-disabled);
    transform: translateY(-70%) rotate(45deg);
    opacity: .45;
}
.syn-table th.syn-table__sortable[aria-sort="ascending"]::after {
    transform: translateY(-25%) rotate(225deg);
    border-color: var(--syn-color-text-secondary);
    opacity: 1;
}
.syn-table th.syn-table__sortable[aria-sort="descending"]::after {
    border-color: var(--syn-color-text-secondary);
    opacity: 1;
}
.syn-table__sticky-key {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--syn-color-surface-default);
    box-shadow: 5px 0 8px -7px rgba(15, 23, 42, .45);
}
.syn-table thead .syn-table__sticky-key { z-index: 7; background: var(--syn-table-header-bg); }
.syn-table__resizer {
    position: absolute;
    z-index: 10;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: col-resize;
}
.syn-table__resizer:hover,
.syn-table__resizer:focus-visible { background: rgba(148, 163, 184, .20); }
.syn-table__resizer:focus-visible { outline: 2px solid var(--syn-color-focus); outline-offset: -2px; }
.syn-table__empty-cell { padding: 18px 8px; color: var(--syn-color-text-disabled); text-align: center; }
.syn-table__entity-title {
    overflow: hidden;
    color: var(--syn-color-text-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.syn-table__entity-meta {
    overflow: hidden;
    margin-top: 2px;
    color: var(--syn-color-text-muted);
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.syn-table__value { font-weight: 600; }
.syn-table__delta { margin-top: 2px; font-size: 9px; font-weight: 700; }
.syn-table__delta--positive { color: var(--syn-color-status-success); }
.syn-table__delta--negative { color: var(--syn-color-status-danger); }
.syn-table__delta--neutral { color: var(--syn-color-text-muted); }

@media (max-width: 900px) {
    .syn-table-toolbar { align-items: stretch; }
    .syn-table-toolbar__search { width: 100%; min-width: 0; max-width: none; }
}
@media (max-width: 640px) {
    .syn-panel__head { flex-direction: column; align-items: stretch; }
    .syn-panel__actions { justify-content: flex-start; }
}

/* ========================================================================== */
/* ANALYTICS COMPOSITION PRIMITIVES — 2026-10-05                              */
/* Shared structural helpers for analytics modules; domain logic stays local. */
/* ========================================================================== */
.syn-analytics-actions { display:flex; align-items:center; gap:var(--syn-space-2); flex-wrap:wrap; }
.syn-analytics-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--syn-space-3); align-items:stretch; margin-bottom:var(--syn-space-3); }
.syn-analytics-composition-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--syn-space-3); margin-bottom:var(--syn-space-3); }
.syn-analytics-composition-body { display:grid; grid-template-columns:160px minmax(0,1fr); gap:18px; align-items:center; }
.syn-analytics-composition-chart { height:160px; }
.syn-analytics-list { display:grid; gap:9px; }
.syn-analytics-list__row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; padding-bottom:8px; border-bottom:1px solid var(--syn-ref-slate-100); }
.syn-analytics-list__row:last-child { padding-bottom:0; border-bottom:0; }
.syn-analytics-list__label { color:var(--syn-color-text-secondary); font-size:11px; font-weight:700; }
.syn-analytics-list__value { color:var(--syn-color-text-primary); font-size:11px; font-weight:800; text-align:right; white-space:nowrap; }
.syn-analytics-list__meta { display:block; margin-top:2px; color:var(--syn-color-text-disabled); font-size:10px; font-weight:600; }
.syn-analytics-summary { margin-top:10px; padding:8px 10px; border-radius:var(--syn-radius-control); background:var(--syn-color-surface-subtle); color:var(--syn-color-text-muted); font-size:11px; line-height:1.45; }
.syn-analytics-stage--chart { position:relative; overflow:hidden; }
.syn-analytics-stage--table { display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.syn-analytics-stage--table > .syn-table-wrap { flex:1 1 auto; min-height:0; }
.syn-analytics-stage--chart canvas { width:100% !important; height:100% !important; }
.syn-pagination--end { justify-content:flex-end; margin-top:var(--syn-space-2); }
.syn-hidden { display:none !important; }
.syn-dialog__surface--wide { width:min(920px,96vw); }
.syn-metric-config__group { padding:9px 10px; border-bottom:1px solid var(--syn-ref-slate-100); }
.syn-metric-config__group:last-child { border-bottom:0; }
.syn-metric-config__group-title { margin-bottom:6px; color:var(--syn-color-text-muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.syn-metric-config__option-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.syn-metric-config__selected-item.is-drag-over { border-color:var(--syn-ref-blue-300); box-shadow:0 0 0 1px var(--syn-ref-blue-300) inset; }

.syn-segmented { display:inline-flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--syn-color-border-subtle); border-radius:var(--syn-radius-control); background:var(--syn-color-surface-subtle); }
.syn-segmented__button { min-height:32px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--syn-color-text-muted); font:inherit; font-size:10px; font-weight:800; line-height:1; cursor:pointer; }
.syn-segmented__button:hover { background:var(--syn-color-surface-default); color:var(--syn-color-text-secondary); }
.syn-segmented__button[aria-pressed="true"],
.syn-segmented__button[aria-selected="true"] { border-color:var(--syn-ref-blue-200); background:var(--syn-ref-blue-50); color:var(--syn-color-action-primary-hover); }
.syn-analytics-note { margin-top:var(--syn-space-2); }
.syn-analytics-breakdown { display:flex; flex-direction:column; min-height:0; height:var(--syn-analytics-stage-height); }
.syn-analytics-breakdown__view { flex:1 1 auto; min-height:0; overflow:hidden; }
.syn-analytics-breakdown__view:not([hidden]) { display:flex; flex-direction:column; }
.syn-table-wrap--fill { flex:1 1 auto; min-height:0; }
.syn-table__entity { min-width:220px; max-width:280px; }
.syn-table__copy { width:24px; height:24px; display:inline-grid; place-items:center; padding:0; border:0; border-radius:6px; background:transparent; color:var(--syn-color-text-muted); cursor:pointer; }
.syn-table__copy:hover { background:var(--syn-color-surface-subtle); color:var(--syn-color-text-primary); }
.syn-table__copy.is-copied { color:var(--syn-color-status-success); }
.syn-clipboard-proxy { position:fixed; left:-10000px; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.syn-metric-config__section { margin-top:9px; }
.syn-metric-config__section:first-child { margin-top:0; }
.syn-metric-config__section-title { margin-bottom:5px; color:var(--syn-color-text-disabled); font-size:9px; font-weight:800; text-transform:uppercase; }
.syn-metric-config__option-note { display:block; margin-top:2px; color:var(--syn-color-text-disabled); font-size:9px; line-height:1.35; }
.syn-sort-indicator { margin-left:4px; font-size:9px; color:var(--syn-color-text-disabled); }
.syn-table__sortable.is-sort-active .syn-sort-indicator { color:var(--syn-color-text-secondary); }

@media (max-width:1000px) {
    .syn-analytics-composition-body { grid-template-columns:135px minmax(0,1fr); }
    .syn-analytics-composition-chart { height:135px; }
}
@media (max-width:900px) {
    .syn-analytics-pair,
    .syn-analytics-composition-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
    .syn-segmented { max-width:100%; overflow-x:auto; }
}
@media (max-width:560px) {
    .syn-analytics-composition-body { grid-template-columns:1fr; }
    .syn-analytics-composition-chart { height:170px; }
}

/* ========================================================================== */
/* ANALYTICS SUMMARY PRIMITIVES — 2026-10-05                                  */
/* ========================================================================== */
.syn-analytics-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--syn-space-3); }
.syn-analytics-card { min-width:0; padding:14px; border:1px solid var(--syn-color-border-subtle); border-radius:var(--syn-radius-control); background:var(--syn-color-surface-default); }
.syn-analytics-card__title { margin:0 0 9px; color:var(--syn-color-text-primary); font-size:13px; font-weight:800; line-height:1.3; }
.syn-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.syn-stat-card { min-width:0; padding:11px; border:1px solid var(--syn-ref-slate-100); border-radius:var(--syn-radius-control); background:var(--syn-color-surface-subtle); }
.syn-stat-card__label { color:var(--syn-color-text-muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.syn-stat-card__value { margin-top:5px; color:var(--syn-color-text-primary); font-size:18px; font-weight:800; line-height:1.2; }
.syn-stat-card__meta { margin-top:3px; color:var(--syn-color-text-disabled); font-size:10px; line-height:1.35; }
.syn-detail-list { display:grid; }
.syn-detail-list__row { display:grid; grid-template-columns:minmax(0,1.25fr) auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--syn-ref-slate-100); }
.syn-detail-list__row:last-child { border-bottom:0; }
.syn-detail-list__kicker { color:var(--syn-color-text-muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.syn-detail-list__title { margin-top:3px; color:var(--syn-color-text-secondary); font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.syn-detail-list__meta { margin-top:2px; color:var(--syn-color-text-disabled); font-size:10px; }
.syn-detail-list__value { color:var(--syn-color-text-primary); font-size:13px; font-weight:800; text-align:right; white-space:nowrap; }
.syn-channel-list__row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--syn-ref-slate-100); font-size:12px; }
.syn-channel-list__row:last-child { border-bottom:0; }
.syn-channel-list__label { color:var(--syn-color-text-secondary); font-weight:700; }
.syn-channel-list__value { color:var(--syn-color-text-primary); font-weight:800; text-align:right; }
.syn-channel-list__share { min-width:54px; color:var(--syn-color-text-muted); text-align:right; }
.syn-table__clip { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.syn-table__copy--compact { min-width:24px; min-height:24px; padding:2px 5px; font-size:9px; }
.syn-table__sortable { cursor:pointer; user-select:none; white-space:nowrap; }

@media (max-width:900px) {
    .syn-analytics-summary-grid { grid-template-columns:1fr; }
    .syn-stat-grid { grid-template-columns:1fr; }
}

/* ========================================================================== */
/* ANALYTICS KPI & SORTABLE METRIC PRIMITIVES — 2026-10-05                    */
/* ========================================================================== */
.syn-kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.syn-kpi-card { min-width:0; padding:9px; border:1px solid var(--syn-ref-slate-100); border-radius:var(--syn-radius-control); background:var(--syn-color-surface-subtle); }
.syn-kpi-card__label { color:var(--syn-color-text-muted); font-size:9px; font-weight:800; text-transform:uppercase; }
.syn-kpi-card__value { margin-top:4px; color:var(--syn-color-text-primary); font-size:13px; font-weight:800; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.syn-metric-config__body { padding:14px 18px 4px; overflow:auto; }
.syn-metric-config__sortable-list { display:grid; gap:7px; }
.syn-metric-config__sortable-item { display:grid; grid-template-columns:34px minmax(0,1fr); gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--syn-color-border-subtle); border-radius:var(--syn-radius-control); background:var(--syn-color-surface-default); }
.syn-metric-config__sortable-item.drag-over { border-color:var(--syn-ref-blue-300); box-shadow:0 0 0 1px var(--syn-ref-blue-300) inset; }
.syn-metric-config__sortable-item.dragging { opacity:.6; }
.syn-metric-config__drag-handle { color:var(--syn-color-text-disabled); font-weight:800; text-align:center; cursor:grab; user-select:none; }
.syn-metric-config__check { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.syn-metric-config__check input { margin-top:2px; }
.syn-metric-config__option-title { display:block; color:var(--syn-color-text-secondary); font-size:11px; font-weight:800; line-height:1.3; }

@media (max-width:900px) {
    .syn-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ========================================================================== */
/* ENTITY CARD GRID — 2026-10-05                                              */
/* Complex record presentation for account/profile-style entities.             */
/* ========================================================================== */
.syn-record-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:var(--syn-space-3); padding:8px 10px; border:1px solid var(--syn-color-border-subtle); border-radius:var(--syn-radius-control); background:var(--syn-color-surface-subtle); min-width:0; }
.syn-record-summary { display:flex; align-items:center; flex-wrap:wrap; min-width:0; color:var(--syn-color-text-secondary); font-size:11px; line-height:1.35; }
.syn-record-summary__item { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.syn-record-summary__item strong { color:var(--syn-color-text-primary); font-size:12px; font-weight:800; }
.syn-record-summary__item + .syn-record-summary__item::before { content:'•'; margin:0 9px; color:var(--syn-color-border-strong); font-weight:800; }
.syn-record-search { width:min(320px,100%); min-width:220px; }
.syn-entity-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; align-items:stretch; }
.syn-entity-card { min-width:0; display:flex; flex-direction:column; padding:12px; border:1px solid var(--syn-color-border-subtle); border-radius:var(--syn-radius-card); background:var(--syn-color-surface-default); }
.syn-entity-card__head { display:flex; gap:12px; align-items:flex-start; min-width:0; }
.syn-entity-card__avatar { position:relative; flex:0 0 48px; width:48px; height:48px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--syn-color-surface-subtle); border:1px solid var(--syn-color-border-subtle); color:var(--syn-color-text-muted); font-size:14px; font-weight:800; }
.syn-entity-card__avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.syn-entity-card__identity { min-width:0; flex:1 1 auto; }
.syn-entity-card__title { color:var(--syn-color-text-primary); font-size:13px; font-weight:800; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.syn-entity-card__subtitle { margin-top:2px; color:var(--syn-color-text-muted); font-size:11px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.syn-entity-card__badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.syn-entity-card__body { margin-top:10px; color:var(--syn-color-text-secondary); font-size:11px; line-height:1.45; min-height:32px; }
.syn-entity-card__stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.syn-entity-card__stat { min-width:0; padding:8px; border:1px solid var(--syn-ref-slate-100); border-radius:var(--syn-radius-control); background:var(--syn-color-surface-subtle); }
.syn-entity-card__stat-label { color:var(--syn-color-text-disabled); font-size:9px; font-weight:800; text-transform:uppercase; }
.syn-entity-card__stat-value { margin-top:3px; color:var(--syn-color-text-primary); font-size:13px; font-weight:800; }
.syn-entity-card__meta { display:grid; gap:5px; margin-top:auto; padding-top:10px; border-top:1px solid var(--syn-ref-slate-100); }
.syn-entity-card__meta-row { display:flex; justify-content:space-between; gap:12px; min-width:0; color:var(--syn-color-text-secondary); font-size:11px; line-height:1.35; }
.syn-entity-card__meta-row > :first-child { flex:0 0 auto; color:var(--syn-color-text-disabled); }
.syn-entity-card__meta-row > :last-child { min-width:0; text-align:right; overflow-wrap:anywhere; }

@media (max-width:900px) {
    .syn-record-toolbar { align-items:stretch; flex-direction:column; }
    .syn-record-search { width:100%; min-width:0; }
}
@media (max-width:640px) {
    .syn-entity-card-grid { grid-template-columns:1fr; }
    .syn-record-summary { row-gap:4px; }
    .syn-record-summary__item + .syn-record-summary__item::before { margin:0 7px; }
}

/* ========================================================================== */
/* ANALYTICS CONTEXT & TABLE UTILITIES — 2026-10-05                           */
/* ========================================================================== */
.syn-context-filter { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:var(--syn-space-3); padding:10px 12px; border:1px solid var(--syn-color-border-subtle); border-radius:var(--syn-radius-control); background:var(--syn-color-surface-subtle); min-width:0; }
.syn-context-filter__copy { min-width:0; }
.syn-context-filter__title { color:var(--syn-color-text-primary); font-size:11px; font-weight:800; line-height:1.3; }
.syn-context-filter__sub { margin-top:2px; color:var(--syn-color-text-muted); font-size:10px; line-height:1.35; }
.syn-context-filter__form { margin:0; display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; flex:0 0 auto; }
.syn-context-filter__select { min-width:280px; }
.syn-analytics-search { width:230px; max-width:100%; }
.syn-state--centered { margin:auto; width:min(520px,100%); }
.syn-table--wide { min-width:760px; white-space:nowrap; }
.syn-table__sticky-key { position:sticky; left:0; z-index:2; background:var(--syn-color-surface-default); }
.syn-table th.syn-table__sticky-key { z-index:3; background:var(--syn-table-header-bg); }
.syn-table__entity-title { color:var(--syn-color-text-primary); font-size:11px; font-weight:800; line-height:1.3; }
.syn-table__entity-meta { margin-top:2px; color:var(--syn-color-text-disabled); font-size:9.5px; line-height:1.3; }
.syn-pagination--attached { flex:0 0 auto; justify-content:flex-end; padding:4px 8px; border-top:1px solid var(--syn-color-border-subtle); background:var(--syn-color-surface-default); color:var(--syn-color-text-muted); font-size:10px; }
.syn-analytics-panel--flush-bottom { margin-bottom:0; }

@media (max-width:900px) {
    .syn-context-filter { align-items:stretch; flex-direction:column; }
    .syn-context-filter__form,
    .syn-context-filter__form .syn-field,
    .syn-context-filter__select { width:100%; min-width:0; }
}
@media (max-width:640px) {
    .syn-context-filter__select { height:var(--syn-control-lg); }
}

/* ========================================================================== */
/* ANALYTICS BREAKDOWN UTILITIES — 2026-10-05                                 */
/* ========================================================================== */
.syn-analytics-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:var(--syn-space-3); }
.syn-analytics-toolbar__copy { min-width:0; }
.syn-analytics-toolbar__actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.syn-analytics-section { margin-top:14px; padding-top:14px; border-top:1px solid var(--syn-ref-slate-100); }
.syn-breakdown-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.syn-breakdown-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.syn-breakdown-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0; }
.syn-breakdown-search { min-width:260px; max-width:440px; flex:1 1 260px; }
.syn-helper-text { color:var(--syn-color-text-disabled); font-size:10px; line-height:1.35; }
.syn-metric-info { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:4px; border:1px solid var(--syn-color-border-strong); border-radius:999px; color:var(--syn-color-text-muted); font-size:8px; font-weight:800; line-height:1; vertical-align:1px; cursor:help; text-transform:none; }
.syn-breakdown-value { color:var(--syn-color-text-secondary); font-weight:700; }
.syn-breakdown-delta { margin-top:2px; color:var(--syn-color-text-disabled); font-size:9px; }
.syn-breakdown-delta--positive { color:var(--syn-color-status-success); }
.syn-breakdown-delta--negative { color:var(--syn-color-status-danger); }
.syn-table__sort-state { cursor:pointer; }
.syn-table__sort-state:focus-visible { outline:2px solid var(--syn-color-focus); outline-offset:-2px; }
.syn-analytics-objective-nav { margin:0 0 var(--syn-space-3); }
.syn-metric-config__search { width:100%; }
.syn-metric-config__family[hidden],
.syn-metric-config__option[hidden] { display:none; }

@media (max-width:900px) {
    .syn-analytics-toolbar__actions { margin-left:0; }
    .syn-breakdown-search { min-width:0; max-width:none; width:100%; }
}

/* ========================================================================== */
/* FUNNEL & SHARED DATA VISUALS — 2026-10-05                                  */
/* ========================================================================== */
.syn-section-stack { display:grid; gap:var(--syn-space-3); }
.syn-panel__head--spread { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.syn-panel__description { margin:8px 0 14px; color:var(--syn-color-text-disabled); font-size:11px; line-height:1.5; }
.syn-funnel-overview { display:grid; grid-template-columns:.9fr 1.4fr; gap:16px; }
.syn-funnel-visual { padding-right:16px; border-right:1px solid var(--syn-color-border-subtle); }
.syn-funnel-svg { width:100%; max-width:340px; display:block; margin:0 auto; }
.syn-funnel-hitarea { width:100%; height:100%; }
.syn-funnel-stage-list { display:grid; gap:8px; }
.syn-funnel-stage { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--syn-ref-slate-100); }
.syn-funnel-stage:last-child { border-bottom:0; }
.syn-funnel-stage__name { color:var(--syn-color-text-secondary); font-size:11px; font-weight:800; }
.syn-funnel-stage__metric { margin-top:2px; color:var(--syn-color-text-disabled); font-size:10px; }
.syn-funnel-stage__value { text-align:right; }
.syn-funnel-stage__total { color:var(--syn-color-text-primary); font-size:13px; font-weight:800; }
.syn-funnel-stage__share { margin-top:2px; color:var(--syn-color-text-muted); font-size:10px; }
.syn-funnel-channel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; gap:6px; flex-wrap:wrap; }
.syn-funnel-legend { display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:var(--syn-color-text-muted); font-size:10px; }
.syn-funnel-legend__item { display:inline-flex; align-items:center; gap:4px; }
.syn-funnel-swatch { width:9px; height:9px; border-radius:2px; display:inline-block; }
.syn-funnel-channel { margin-bottom:10px; }
.syn-funnel-channel__label { margin-bottom:4px; color:var(--syn-color-text-secondary); font-size:11px; font-weight:700; }
.syn-funnel-channel__bar { display:flex; width:100%; height:32px; border-radius:5px; overflow:hidden; background:var(--syn-color-surface-subtle); }
.syn-funnel-segment { display:flex; align-items:center; justify-content:center; overflow:hidden; min-width:0; }
.syn-funnel-segment > span { color:#fff; font-size:10px; font-weight:700; white-space:nowrap; }
.syn-analytics-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--syn-space-3); align-items:stretch; }
.syn-analytics-split--single { grid-template-columns:1fr; }
.syn-chart-stage { height:var(--syn-analytics-stage-height); position:relative; overflow:hidden; }
.syn-chart-stage canvas { width:100% !important; height:100% !important; }
.syn-data-stage { display:flex; flex-direction:column; min-height:0; height:var(--syn-analytics-stage-height); overflow:hidden; }
.syn-data-stage > .syn-table-wrap { flex:1 1 auto; min-height:0; }
.syn-tooltip { position:fixed; z-index:1200; display:none; width:min(320px,calc(100vw - 16px)); padding:9px 10px; border:1px solid var(--syn-color-border-subtle); border-radius:var(--syn-radius-control); background:var(--syn-color-text-primary); color:#fff; box-shadow:var(--syn-elevation-md); pointer-events:none; }
.syn-tooltip.is-open { display:block; }
.syn-tooltip__title { font-size:11px; font-weight:800; line-height:1.3; }
.syn-tooltip__body { margin-top:5px; display:grid; gap:4px; font-size:10px; line-height:1.35; }
.syn-tooltip__row { display:flex; justify-content:space-between; gap:12px; }
.syn-tooltip__row > :last-child { text-align:right; }
.syn-dialog__form { display:grid; gap:10px; padding:14px 18px; }
.syn-dialog__actions { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px 14px; border-top:1px solid var(--syn-color-border-subtle); }
.syn-modal-title-inline { color:var(--syn-color-text-primary); font-size:14px; font-weight:800; }
.syn-message--spaced { margin-bottom:14px; }

@media (max-width:900px) {
    .syn-funnel-overview,
    .syn-analytics-split { grid-template-columns:1fr; }
    .syn-funnel-visual { padding-right:0; padding-bottom:14px; border-right:0; border-bottom:1px solid var(--syn-color-border-subtle); }
}

/* ========================================================================== */
/* ANALYSIS WORKSPACE SHELL — 2026-10-05                                      */
/* Shared filter + multi-level URL navigation for analysis workspaces.         */
/* ========================================================================== */
.syn-analysis-shell { min-width:0; }
.syn-analysis-shell,
.syn-analysis-shell * { box-sizing:border-box; }

.syn-analysis-message { position:relative; margin-bottom:var(--syn-space-3); padding-right:40px; }
.syn-analysis-message__title { color:var(--syn-color-text-primary); font-size:12px; font-weight:800; }
.syn-analysis-message__items { display:grid; gap:5px; margin-top:6px; color:var(--syn-color-text-secondary); font-size:11px; line-height:1.45; }
.syn-analysis-message__close { position:absolute; top:6px; right:6px; }

.syn-analysis-filter { margin-bottom:var(--syn-space-3); padding:0; border:1px solid var(--syn-color-border-subtle); border-radius:var(--syn-radius-panel); background:var(--syn-color-surface-default); overflow:hidden; }
.syn-analysis-filter__grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) auto; gap:8px; align-items:end; padding:12px; }
.syn-analysis-filter__field { min-width:0; }
.syn-analysis-filter__field .syn-label { display:block; margin-bottom:4px; }
.syn-analysis-filter__field .syn-select,
.syn-analysis-filter__field .syn-input { width:100%; }
.syn-analysis-filter__actions { display:flex; align-items:center; gap:6px; min-width:max-content; }
.syn-analysis-filter__reset { text-decoration:none; }

.syn-analysis-workspace { min-width:0; margin-bottom:var(--syn-space-3); border:1px solid var(--syn-color-border-subtle); border-radius:var(--syn-radius-panel); background:var(--syn-color-surface-default); overflow:hidden; }
.syn-analysis-level { display:flex; align-items:stretch; min-width:0; }
.syn-analysis-level + .syn-analysis-level { border-top:1px solid var(--syn-color-border-subtle); }
.syn-analysis-nav { flex:1 1 auto; min-width:0; display:flex; align-items:stretch; gap:0; padding:0 12px; overflow-x:auto; scrollbar-width:thin; }
.syn-analysis-nav__link { position:relative; flex:0 0 auto; min-height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border-bottom:2px solid transparent; color:var(--syn-color-text-muted); font-size:12px; font-weight:700; line-height:1; text-decoration:none; white-space:nowrap; }
.syn-analysis-nav__link:hover { background:var(--syn-color-surface-subtle); color:var(--syn-color-text-primary); }
.syn-analysis-nav__link[aria-current="page"] { border-bottom-color:var(--syn-color-action-primary); color:var(--syn-color-text-primary); }
.syn-analysis-nav__link:focus-visible { z-index:1; outline:2px solid var(--syn-color-focus); outline-offset:-2px; }
.syn-analysis-nav--secondary .syn-analysis-nav__link,
.syn-analysis-nav--tertiary .syn-analysis-nav__link { font-size:11.5px; }
.syn-analysis-level__actions { flex:0 0 auto; min-height:40px; display:flex; align-items:center; justify-content:flex-end; gap:4px; padding:4px 12px; border-left:1px solid var(--syn-color-border-subtle); background:var(--syn-color-surface-default); }
.syn-analysis-level__actions:empty { display:none; }

.syn-analysis-content { min-width:0; margin:0; }
.syn-analysis-score-surface { width:100%; min-width:0; margin:0 0 var(--syn-space-3); padding:14px; border:1px solid var(--syn-color-border-subtle); border-radius:var(--syn-radius-panel); background:var(--syn-color-surface-default); }
.syn-analysis-placeholder { padding:24px 16px; border:1px dashed var(--syn-color-border-strong); border-radius:var(--syn-radius-panel); background:var(--syn-color-surface-default); text-align:center; }
.syn-analysis-placeholder__icon { margin-bottom:8px; font-size:28px; }
.syn-analysis-placeholder__title { margin:0 0 4px; color:var(--syn-color-text-primary); font-size:13px; font-weight:800; line-height:1.3; }
.syn-analysis-placeholder__text { max-width:650px; margin:0 auto; color:var(--syn-color-text-muted); font-size:11px; line-height:1.45; }
.syn-analysis-placeholder code { display:inline-block; margin-top:8px; padding:4px 8px; border-radius:6px; background:var(--syn-color-surface-subtle); color:var(--syn-color-text-secondary); font-size:10px; }

@media (max-width:1250px) {
    .syn-analysis-filter__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
    .syn-analysis-filter__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .syn-analysis-nav { padding-inline:8px; }
}
@media (max-width:640px) {
    .syn-analysis-filter__grid { grid-template-columns:1fr; }
    .syn-analysis-filter__field .syn-select,
    .syn-analysis-filter__field .syn-input { min-height:44px; }
    .syn-analysis-filter__actions { width:100%; }
    .syn-analysis-filter__actions .syn-btn { flex:1 1 0; min-height:44px; }
    .syn-analysis-nav__link { min-height:44px; }
    .syn-analysis-level { align-items:stretch; }
    .syn-analysis-level__actions { min-height:44px; padding-inline:8px; }
    .syn-analysis-score-surface { padding:12px; }
}
@media (prefers-reduced-motion:reduce) {
    .syn-analysis-shell *,
    .syn-analysis-shell *::before,
    .syn-analysis-shell *::after { transition-duration:.001ms; animation-duration:.001ms; animation-iteration-count:1; }
}
/* DSDS migrated local CSS from laporan/analisa-bisnis.php [6016c25c70] */
.am-wrap { font-family: inherit; }

.am-workspace-nav {
    display:flex;
    gap:0;
    flex-wrap:nowrap;
    margin:0 0 18px;
    padding:0 22px;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:12px;
    overflow-x:auto;
}

/* Ringkasan: Tabs menjadi header dari container Scorecard, bukan container terpisah. */
.am-ringkasan-workspace { padding:12px 14px 14px; }
.am-ringkasan-workspace-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-width:0;
    margin:0 0 12px;
    padding:0 0 8px;
    border-bottom:1px solid #e2e8f0;
}
.am-ringkasan-workspace-head .am-workspace-nav {
    flex:1 1 auto;
    min-width:0;
    margin:0;
    padding:0 0 2px;
    gap:5px;
    border:0;
    border-radius:0;
    background:transparent;
}
.am-ringkasan-workspace-head .am-bisnis-metric-btn {
    flex:0 0 auto;
}

.am-page-message {
    position:relative;
    min-width:0;
    box-sizing:border-box;
    margin:0 0 12px;
    padding:8px 34px 8px 10px;
    border:1px solid #bfdbfe;
    border-left:4px solid #2563eb;
    border-radius:12px;
    background:#eff6ff;
    color:#1e40af;
    font-size:11px;
    line-height:1.45;
}
.am-page-message strong { color:inherit; }
.am-page-message-backlog {
    border-color:#fde68a;
    border-left-color:#d97706;
    background:#fffbeb;
    color:#92400e;
    padding:10px 36px 10px 12px;
}
.am-backlog-title { margin-bottom:5px; font-size:11px; font-weight:800; }
.am-backlog-items { display:grid; gap:3px; }
.am-backlog-items > span { display:block; min-width:0; }
.am-page-message-close {
    position:absolute;
    top:5px;
    right:7px;
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:6px;
    background:transparent;
    color:currentColor;
    font-size:17px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
}
.am-page-message-close:hover { background:rgba(15,23,42,.06); }
.am-page-message-close:focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }

.am-workspace-nav a {
    position:relative;
    flex:0 0 auto;
    min-height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 9px;
    border:0;
    border-bottom:3px solid transparent;
    border-radius:0;
    background:transparent;
    color:#64748b;
    font-size:11px;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    transition:color .12s, border-color .12s, background-color .12s;
}

.am-workspace-nav a:hover {
    background:#f8fafc;
    color:#0f172a;
}

.am-workspace-nav a.am-workspace-active {
    border-bottom-color:#2563eb;
    background:transparent;
    color:#0f172a;
}

.am-workspace-nav a:focus-visible {
    z-index:1;
    outline:2px solid #60a5fa;
    outline-offset:-2px;
}

.am-filter-toolbar {
    display:grid;
    grid-template-columns:minmax(145px,.8fr) minmax(170px,1fr) minmax(170px,1fr) minmax(220px,1.2fr) minmax(220px,1.2fr) minmax(200px,1fr) auto;
    gap:10px;
    align-items:end;
    padding:12px;
    margin-top:0;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:8px;
    overflow:visible;
}

.am-filter-item {
    min-width:0;
}

.am-filter-item label {
    display:block;
    margin:0 0 5px;
    font-size:11px;
    font-weight:800;
    color:#475569;
}

.am-filter-item select,
.am-filter-item input[type="text"] {
    width:100%;
    min-width:0;
    box-sizing:border-box;
    height:40px;
    padding:0 11px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    background:#fff;
    color:#0f172a;
    font-family:inherit;
    font-size:13px;
    transition:border-color .12s, box-shadow .12s, background-color .12s;
}

.am-filter-item select:hover,
.am-filter-item input[type="text"]:hover {
    border-color:#94a3b8;
}

.am-filter-item select:focus-visible,
.am-filter-item input[type="text"]:focus-visible,
.am-filter-submit button:focus-visible,
.am-filter-reset:focus-visible,
.am-multi summary:focus-visible {
    outline:2px solid #60a5fa;
    outline-offset:2px;
}

/* DSDS Multi-Select Filter Contract. */
.am-multi {
    position:relative;
    min-width:0;
}
.am-multi details {
    position:relative;
    width:100%;
}
.am-multi summary {
    list-style:none;
    height:40px;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0 11px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    background:#fff;
    color:#475569;
    cursor:pointer;
    user-select:none;
    transition:border-color .12s, box-shadow .12s;
}
.am-multi summary::-webkit-details-marker { display:none; }
.am-multi summary:hover { border-color:#94a3b8; }
.am-multi details[open] summary {
    border-color:#93c5fd;
    box-shadow:0 0 0 2px rgba(37,99,235,.08);
}
.am-multi-summary {
    min-width:0;
    flex:1 1 auto;
    display:flex;
    align-items:center;
    overflow:hidden;
    white-space:nowrap;
}
.am-multi-placeholder {
    min-width:0;
    overflow:hidden;
    color:#475569;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.am-multi-selected-text {
    min-width:0;
    flex:1 1 auto;
    display:block;
    overflow:hidden;
    color:#334155;
    font-size:12px;
    font-weight:650;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.am-multi-selected-more {
    flex:0 0 auto;
    margin-left:6px;
    color:#2563eb;
    font-size:11px;
    font-weight:850;
    white-space:nowrap;
}
.am-multi-caret {
    flex:0 0 auto;
    color:#94a3b8;
    font-size:10px;
}
.am-multi-menu {
    position:absolute;
    z-index:1000;
    top:calc(100% + 6px);
    left:0;
    width:max(100%,240px);
    max-width:min(360px,calc(100vw - 32px));
    max-height:290px;
    overflow:auto;
    box-sizing:border-box;
    padding:7px;
    border:1px solid #dbe3ee;
    border-radius:9px;
    background:#fff;
    box-shadow:0 12px 28px rgba(15,23,42,.16);
}
.am-multi-option {
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:0;
    padding:7px 8px;
    border-radius:6px;
    color:#334155;
    font-size:11.5px;
    font-weight:600;
    cursor:pointer;
}
.am-multi-option:hover { background:#f8fafc; }
.am-multi-option[hidden] { display:none !important; }
.am-multi-option input {
    flex:0 0 auto;
    width:16px;
    height:16px;
    margin:1px 0 0;
    accent-color:#2563eb;
}
.am-multi-option small {
    display:block;
    margin-top:1px;
    color:#94a3b8;
    font-size:9.5px;
    font-weight:600;
}
.am-multi-all-option {
    margin-bottom:5px;
    padding-bottom:9px;
    border-bottom:1px solid #e2e8f0;
    border-radius:0;
    font-weight:800;
}

.am-filter-submit {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    min-width:0;
}

.am-filter-submit button,
.am-filter-reset {
    min-height:40px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    border-radius:8px;
    font-family:inherit;
    font-size:12px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
    text-decoration:none;
    transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s;
}

.am-filter-submit button {
    border:1px solid #2563eb;
    background:#2563eb;
    color:#fff;
}
.am-filter-submit button:hover {
    background:#1d4ed8;
    border-color:#1d4ed8;
}
.am-filter-reset {
    border:1px solid #cbd5e1;
    background:#fff;
    color:#334155;
}
.am-filter-reset:hover {
    background:#f8fafc;
    border-color:#94a3b8;
}

@media (max-width:1250px) {
    .am-filter-toolbar { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .am-filter-submit { align-self:end; }
}
@media (max-width:900px) {
    .am-filter-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
    .am-filter-toolbar { grid-template-columns:minmax(0,1fr); padding:12px; }
    .am-filter-submit { width:100%; }
    .am-filter-submit button,
    .am-filter-reset { flex:1 1 0; }
    .am-multi-menu { width:100%; max-width:100%; }
}

.am-workspace-placeholder {
    text-align:center;
    padding:46px 20px;
}

.am-workspace-placeholder-title {
    font-size:17px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:8px;
}

.am-workspace-placeholder-text {
    font-size:12px;
    color:#94a3b8;
    max-width:520px;
    margin:0 auto;
}

.am-filter-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px; background:#f8fafc; padding:12px; border-radius:8px; border:1px solid #e2e8f0; }
.am-filter-row label { display:block; font-size:11px; font-weight:700; color:#475569; margin-bottom:4px; }
.am-filter-row select, .am-filter-row input { padding:7px; border-radius:6px; border:1px solid #cbd5e1; font-size:13px; }
.am-filter-row button { padding:8px 16px; border-radius:6px; border:none; background:#0f172a; color:#fff; font-size:13px; cursor:pointer; }
.am-card-grid-locked { display:grid; grid-template-columns:repeat(5, minmax(150px, 1fr)); grid-template-rows:repeat(3, minmax(90px, auto)); grid-auto-flow:row; gap:14px; margin-bottom:20px; overflow-x:auto; }
.am-card-grid-locked .am-card { min-width:0; }

/* Ringkasan Bisnis — pola Scorecard Kustom seperti Analitik Produk (AP-008). */
.am-bisnis-score-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.am-bisnis-score-title-wrap { min-width:0; }
.am-bisnis-score-sub { font-size:11px; color:#94a3b8; margin-top:3px; }
.am-bisnis-metric-btn {
    min-height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #cbd5e1;
    background:#fff;
    color:#334155;
    border-radius:8px;
    padding:0 11px;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.am-bisnis-metric-btn:hover { background:#f8fafc; border-color:#94a3b8; }

/* DSDS Scorecard Contract — Ringkasan Bisnis.
   1-8 metrik = 1 baris. 9+ metrik = maksimal 2 baris seimbang.
   Jika kapasitas viewport terlampaui, area tetap 2 baris dan scroll horizontal. */
.am-bisnis-score-strip {
    --am-score-cols:1;
    --am-score-rows:1;
    display:grid;
    grid-template-columns:repeat(var(--am-score-cols), minmax(0, 1fr));
    grid-template-rows:repeat(var(--am-score-rows), minmax(82px, auto));
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 1px 8px;
    margin-bottom:2px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
}
.am-bisnis-score-strip.is-overflow {
    grid-template-columns:repeat(var(--am-score-cols), calc((100% - 84px) / 8));
}
.am-bisnis-score-strip .am-card {
    position:relative;
    min-width:0;
    width:auto;
    min-height:82px;
    box-sizing:border-box;
    padding:10px 12px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#fff;
    scroll-snap-align:start;
}
.am-bisnis-score-strip .am-card-title {
    margin:0 0 6px;
    padding-right:18px;
    color:#64748b;
    font-size:11px;
    line-height:1.3;
    font-weight:750;
    text-transform:none;
    letter-spacing:0;
    white-space:normal;
}
.am-bisnis-score-strip .am-card-value {
    margin:6px 0 3px;
    color:#0f172a;
    font-size:20px;
    line-height:1.15;
    font-weight:850;
    overflow-wrap:anywhere;
}
.am-bisnis-score-strip .am-card-sub {
    margin-top:4px;
    color:#64748b;
    font-size:10px;
    line-height:1.35;
}
.am-bisnis-score-strip .am-card-check { top:8px; right:8px; width:14px; height:14px; margin:0; cursor:pointer; }
.am-bisnis-score-strip .am-card[data-metric-card] { cursor:grab; user-select:none; }
.am-bisnis-score-strip .am-card[data-metric-card].is-direct-dragging { opacity:.48; cursor:grabbing; }
.am-bisnis-score-strip .am-card[data-metric-card].is-direct-drop-before { box-shadow:-3px 0 0 #2563eb; }
.am-bisnis-score-strip .am-card[data-metric-card].is-direct-drop-after { box-shadow:3px 0 0 #2563eb; }
.am-bisnis-score-strip .am-card-check { cursor:pointer; }
@media (max-width:1250px) {
    .am-bisnis-score-strip {
        grid-template-columns:repeat(var(--am-score-cols), minmax(calc((100% - 36px) / 4), 1fr));
    }
}
@media (max-width:640px) {
    .am-ringkasan-workspace-head {
        margin:0 0 10px;
        padding:0 0 8px;
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }
    .am-ringkasan-workspace-head .am-workspace-nav { width:100%; }
    .am-ringkasan-workspace-head .am-bisnis-metric-btn { align-self:flex-end; }
    .am-bisnis-score-strip {
        gap:8px;
        grid-template-columns:repeat(var(--am-score-cols), minmax(calc((100% - 16px) / 3), 1fr));
    }
    .am-bisnis-score-strip .am-card {
        min-width:0;
        min-height:82px;
        padding:9px 8px;
    }
    .am-bisnis-score-strip .am-card-title { font-size:9px; padding-right:18px; }
    .am-bisnis-score-strip .am-card-value { font-size:clamp(16px,4.7vw,21px); }
}
.am-bisnis-score-empty { display:none; padding:18px; border:1px dashed #cbd5e1; border-radius:9px; color:#94a3b8; font-size:12px; text-align:center; }

.am-bisnis-metric-modal { display:none; position:fixed; inset:0; z-index:10020; align-items:center; justify-content:center; padding:20px; }
.am-bisnis-metric-modal.open { display:flex; }
.am-bisnis-metric-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.48); }
.am-bisnis-metric-dialog { position:relative; width:min(860px, 96vw); max-height:88vh; display:flex; flex-direction:column; background:#fff; border-radius:14px; box-shadow:0 24px 70px rgba(15,23,42,.28); overflow:hidden; }
.am-bisnis-metric-head { padding:16px 18px 13px; border-bottom:1px solid #e2e8f0; }
.am-bisnis-metric-title { font-size:15px; font-weight:800; color:#0f172a; }
.am-bisnis-metric-sub { margin-top:4px; font-size:11px; color:#64748b; line-height:1.45; }
.am-bisnis-metric-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:0; overflow:hidden; }
.am-bisnis-metric-picker, .am-bisnis-metric-selected { min-width:0; padding:14px 16px; overflow:auto; max-height:58vh; }
.am-bisnis-metric-picker { border-right:1px solid #e2e8f0; }
.am-bisnis-metric-col-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; font-size:11px; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:.03em; }
.am-bisnis-metric-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.am-bisnis-metric-option { display:flex; align-items:center; gap:7px; border:1px solid #e2e8f0; border-radius:8px; padding:8px 9px; font-size:11px; color:#334155; cursor:pointer; background:#fff; }
.am-bisnis-metric-option:hover { background:#f8fafc; }
.am-bisnis-selected-list { display:flex; flex-direction:column; gap:7px; }
.am-bisnis-selected-item { display:grid; grid-template-columns:20px minmax(0,1fr) auto auto; align-items:center; gap:7px; border:1px solid #e2e8f0; border-radius:8px; padding:7px 8px; background:#fff; }
.am-bisnis-selected-item.is-dragging { opacity:.45; }
.am-bisnis-drag { color:#94a3b8; cursor:grab; font-size:15px; user-select:none; }
.am-bisnis-selected-label { font-size:11px; font-weight:700; color:#334155; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-bisnis-move { display:flex; gap:2px; }
.am-bisnis-move button, .am-bisnis-remove { border:0; background:transparent; color:#64748b; cursor:pointer; line-height:1; padding:3px 4px; border-radius:4px; }
.am-bisnis-move button:hover, .am-bisnis-remove:hover { background:#f1f5f9; color:#0f172a; }
.am-bisnis-move button:disabled { opacity:.25; cursor:not-allowed; background:transparent; }
.am-bisnis-remove { color:#94a3b8; font-size:15px; }
.am-bisnis-metric-empty { padding:20px 8px; text-align:center; color:#94a3b8; font-size:11px; }
.am-bisnis-metric-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-top:1px solid #e2e8f0; }
.am-bisnis-metric-count { font-size:10px; color:#64748b; }
.am-bisnis-metric-actions { display:flex; gap:7px; }
.am-bisnis-metric-actions button { border:1px solid #cbd5e1; border-radius:7px; background:#fff; color:#334155; padding:7px 11px; font-size:11px; font-weight:700; cursor:pointer; }
.am-bisnis-metric-actions .primary { background:#0f172a; border-color:#0f172a; color:#fff; }
@media (max-width:760px) {
    .am-bisnis-metric-grid { grid-template-columns:1fr; overflow:auto; }
    .am-bisnis-metric-picker { border-right:0; border-bottom:1px solid #e2e8f0; }
    .am-bisnis-metric-options { grid-template-columns:1fr; }
}

.am-card { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:16px; text-decoration:none; color:inherit; display:block; transition:box-shadow .15s, transform .15s; }
.am-card:hover { box-shadow:0 4px 14px rgba(15,23,42,.08); transform:translateY(-1px); }
.am-card.am-card-static { cursor:default; }
.am-card.am-card-static:hover { box-shadow:none; transform:none; }
.am-card-title { font-size:12px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; }
.am-card-value { font-size:20px; font-weight:800; color:#0f172a; }
.am-card-sub { font-size:11px; color:#94a3b8; margin-top:4px; }
.am-card-locked { opacity:.6; }
.am-section-title { font-size:15px; font-weight:800; color:#0f172a; margin:22px 0 10px; }
.am-note { font-size:12px; color:#94a3b8; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:8px; padding:12px; margin-bottom:16px; }
.am-note code { background:#e2e8f0; padding:1px 5px; border-radius:4px; }
.am-err { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:13px; }
.am-container { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:14px; margin-bottom:16px; }
:root {
    /* DSDS Analytics Peer Panel Height Contract */
    --dsds-analytics-stage-height:384px;
    --dsds-analytics-panel-head-height:32px;
    --dsds-analytics-panel-head-gap:10px;
    --dsds-analytics-panel-height:456px;
    --am-detail-height:var(--dsds-analytics-stage-height);
}
.am-analytics-panel {
    height:var(--dsds-analytics-panel-height);
    min-height:var(--dsds-analytics-panel-height);
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.am-analytics-panel > .am-section-title {
    flex:0 0 var(--dsds-analytics-panel-head-height);
    height:var(--dsds-analytics-panel-head-height);
    margin:0 0 var(--dsds-analytics-panel-head-gap) !important;
    display:flex;
    align-items:center;
}
.am-analytics-panel > .am-section-toolbar {
    flex:0 0 var(--dsds-analytics-panel-head-height);
    height:var(--dsds-analytics-panel-head-height);
    min-height:var(--dsds-analytics-panel-head-height);
    margin-bottom:var(--dsds-analytics-panel-head-gap);
}
.am-detail-table-wrap { overflow-x:auto; overflow-y:auto; height:var(--am-detail-height); box-sizing:border-box; flex:0 0 var(--am-detail-height); border:1px solid #f1f5f9; border-radius:8px; }
.am-detail-table { table-layout:fixed; border-collapse:collapse; font-size:12px; }
.am-detail-table th, .am-detail-table td { width:82px; padding:6px 8px; border-bottom:1px solid #f1f5f9; text-align:left; white-space:normal; word-break:break-word; overflow-wrap:break-word; }
.am-detail-table th:first-child, .am-detail-table td:first-child { width:100px; }
.am-channel-table th:first-child, .am-channel-table td:first-child { width:220px; text-align:left; }
.am-channel-table th:not(:first-child), .am-channel-table td:not(:first-child) { width:100px; text-align:center; }
.am-detail-table th { background:#f8fafc; font-size:10px; text-transform:uppercase; color:#64748b; text-align:center; position:sticky; top:0; z-index:2; }
.am-detail-table td:first-child, .am-detail-table th:first-child { position:sticky; left:0; background:#fff; z-index:1; }
.am-detail-table th:first-child { z-index:3; }
.am-detail-val-currency, .am-detail-val-pct { font-size:12px; }
.am-split-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; margin-bottom:18px; }
.am-split-grid > .am-container { min-width:0; margin-bottom:0; }
@media (max-width: 900px) { .am-split-grid { grid-template-columns:1fr; } }

.am-section-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.am-section-toolbar .am-section-title { margin:0 !important; }
.am-donut-select { height:32px; min-width:170px; max-width:240px; padding:0 30px 0 10px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#334155; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; }
.am-donut-select:focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }
.am-donut-stage { height:var(--am-detail-height); box-sizing:border-box; flex:0 0 var(--am-detail-height); position:relative; display:grid; place-items:center; min-width:0; }
.am-donut-stage canvas { max-width:100%; max-height:100%; }
.am-donut-empty { display:none; width:100%; box-sizing:border-box; padding:14px; border:1px dashed #cbd5e1; border-radius:8px; background:#f8fafc; color:#64748b; font-size:11px; text-align:center; }
.am-daily-table-wrap { overflow:auto; height:var(--am-detail-height); box-sizing:border-box; flex:0 0 var(--am-detail-height); border:1px solid #f1f5f9; border-radius:8px; background:#fff; }
.am-trend-stage { height:var(--am-detail-height); box-sizing:border-box; flex:0 0 var(--am-detail-height); position:relative; min-width:0; }
.am-trend-stage > canvas { width:100% !important; height:100% !important; }
.am-trend-stage > .am-note { position:absolute; inset:0; z-index:2; margin:0 !important; display:flex; align-items:center; justify-content:center; text-align:center; }
.am-daily-table { width:100%; min-width:720px; border-collapse:separate; border-spacing:0; font-size:11px; }
.am-daily-table th, .am-daily-table td { padding:7px 8px; border-bottom:1px solid #f1f5f9; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.am-daily-table th { position:sticky; top:0; z-index:2; background:#f8fafc; color:#475569; font-size:10px; font-weight:800; }
.am-daily-table th:first-child, .am-daily-table td:first-child { position:sticky; left:0; z-index:1; min-width:94px; text-align:left; background:#fff; }
.am-daily-table th:first-child { z-index:3; background:#f8fafc; }
.am-daily-table tbody tr:hover td { background:#f8fafc; }
.am-daily-table tbody tr:hover td:first-child { background:#f8fafc; }
.am-daily-table tbody tr:last-child td { border-bottom:0; }
@media (max-width:640px) {
    .am-section-toolbar { align-items:flex-start; flex-direction:column; }
    .am-donut-select { width:100%; max-width:none; }
    .am-analytics-panel { height:auto; min-height:0; overflow:visible; }
    .am-analytics-panel > .am-section-toolbar { height:auto; min-height:var(--dsds-analytics-panel-head-height); flex-basis:auto; }
}

.am-scope-pills { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.am-scope-pill { padding:6px 16px; border-radius:999px; border:1px solid #cbd5e1; background:#f8fafc; color:#475569; font-size:12px; font-weight:700; text-decoration:none; cursor:pointer; }
.am-scope-pill.am-scope-active { background:#0f172a; border-color:#0f172a; color:#fff; }
.am-info-icon { cursor:help; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; border:1px solid #94a3b8; color:#94a3b8; font-size:9px; font-weight:700; line-height:1; opacity:.7; }
.am-info-icon:hover { opacity:1; border-color:#475569; color:#475569; }

.am-card-check { position:absolute; top:10px; right:10px; }
.am-card.am-tip-hover { cursor:help; }
.am-card { position:relative; }
#am-tooltip-box { display:none; position:fixed; z-index:9999; background:#0f172a; color:#fff; border-radius:8px; padding:10px 12px; font-size:12px; min-width:190px; max-width:280px; box-shadow:0 8px 24px rgba(0,0,0,.25); pointer-events:none; }
#am-tooltip-box .am-tip-judul { font-weight:800; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.2); }
#am-tooltip-box .am-tip-baris { display:flex; justify-content:space-between; gap:14px; padding:3px 0; }
#am-tooltip-box .am-tip-baris span:first-child { color:#cbd5e1; }
#am-tooltip-box .am-tip-baris span:last-child { font-weight:700; text-align:right; }
.am-collapse-toggle-icon { font-size:10px; color:#64748b; display:inline-block; transition:transform .15s; }
/* End migrated local CSS from laporan/analisa-bisnis.php [6016c25c70] */

/* DSDS migrated local CSS from laporan/analisa-bisnis.php [284ffcc170] */
/* ========================================================================== */
/* DSDS WORKSPACE L1 — underline tabs + joined Scorecard surface              */
/* Donor tervalidasi: Analisa Performa.                                       */
/* Berlaku lintas Analisa Bisnis / Penjualan / Return / Iklan / Keuangan.     */
/* ========================================================================== */
.am-wrap .git-workspace,
.am-wrap .finx-workspace {
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin:0 0 16px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
}

.am-wrap .git-workspace-head,
.am-wrap .finx-workspace-head {
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;
    justify-content:space-between !important;
    gap:0 !important;
    min-width:0 !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid #e2e8f0 !important;
    border-bottom:0 !important;
    border-radius:14px 14px 0 0 !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:hidden !important;
}

.am-wrap .git-workspace-head .am-workspace-nav,
.am-wrap .finx-workspace-head .am-workspace-nav {
    flex:1 1 auto !important;
    align-items:stretch !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 16px !important;
    gap:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:thin;
}

.am-wrap .am-workspace-nav a {
    position:relative !important;
    flex:0 0 auto !important;
    min-height:44px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 16px !important;
    border:0 !important;
    border-bottom:3px solid transparent !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#64748b !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    box-shadow:none !important;
    transition:color 120ms ease, background-color 120ms ease, border-color 120ms ease !important;
}
.am-wrap .am-workspace-nav a:hover {
    background:#f8fafc !important;
    color:#0f172a !important;
}
.am-wrap .am-workspace-nav a.am-workspace-active {
    border-bottom-color:#2563eb !important;
    background:transparent !important;
    color:#0f172a !important;
    box-shadow:none !important;
}
.am-wrap .am-workspace-nav a:focus-visible {
    z-index:1;
    outline:2px solid #60a5fa !important;
    outline-offset:-2px !important;
}

.am-wrap .git-workspace-actions,
.am-wrap .finx-actions {
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 12px !important;
    border-left:1px solid #e2e8f0 !important;
    background:#fff !important;
}

.am-wrap .git-workspace-actions .am-bisnis-metric-btn,
.am-wrap .finx-actions .finx-btn {
    min-height:32px !important;
    height:32px !important;
    margin:0 !important;
    padding:0 12px !important;
    border:1px solid #cbd5e1 !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#0f172a !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:none !important;
}
.am-wrap .git-workspace-actions .am-bisnis-metric-btn:hover,
.am-wrap .finx-actions .finx-btn:hover {
    border-color:#94a3b8 !important;
    background:#f8fafc !important;
}

/* Scorecard bukan container paralel lagi: menjadi surface bawah yang menyatu
   dengan frame navigation seperti kontrak Analisa Performa. */
.am-wrap .git-score-strip,
.am-wrap .finx-score-strip {
    width:100% !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:14px !important;
    padding-top:12px !important;
    border:1px solid #e2e8f0 !important;
    border-top:1px solid #e2e8f0 !important;
    border-radius:0 0 14px 14px !important;
    background:#fff !important;
    box-shadow:none !important;
}

/* Generic workspace nav tidak lagi memakai pill/container visual sendiri. */
.am-wrap > .am-workspace-nav {
    margin:0 0 16px !important;
    padding:0 16px !important;
    border:1px solid #e2e8f0 !important;
    border-radius:14px !important;
    background:#fff !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
}

@media (max-width:900px) {
    .am-wrap .git-workspace-head .am-workspace-nav,
    .am-wrap .finx-workspace-head .am-workspace-nav {
        padding-left:12px !important;
        padding-right:12px !important;
    }
}

@media (max-width:640px) {
    .am-wrap .git-workspace-head,
    .am-wrap .finx-workspace-head {
        flex-direction:row !important;
        align-items:stretch !important;
        min-height:44px !important;
    }
    .am-wrap .am-workspace-nav a { min-height:44px !important; }
    .am-wrap .git-workspace-actions,
    .am-wrap .finx-actions {
        width:auto !important;
        padding:0 8px !important;
        border-left:1px solid #e2e8f0 !important;
    }
    .am-wrap .git-workspace-actions .am-bisnis-metric-btn,
    .am-wrap .finx-actions .finx-btn {
        min-height:44px !important;
        height:44px !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        padding:0 8px !important;
    }
    .am-wrap .git-score-strip,
    .am-wrap .finx-score-strip {
        padding:12px !important;
    }
}
/* End migrated local CSS from laporan/analisa-bisnis.php [284ffcc170] */

/* DSDS migrated local CSS from laporan/analisa-keuangan.php [2738479682] */
/* ============================================================
 * DSDS FILTER ALIGNMENT — KEUANGAN
 * 27 Sep 2026
 * - Tidak mengubah semantics / query filter.
 * - Saat embedded di Analisa Bisnis, style ini merapikan filter parent
 *   hanya pada view Keuangan.
 * - Standalone Finance memakai surface/control/button DSDS yang sama.
 * ============================================================ */

/* Embedded Analisa Bisnis memakai seluruh layout/filter dari analisa-bisnis.php.
 * Jangan override .am-filter-toolbar di modul Keuangan agar perilaku filter identik
 * dengan Ringkasan/Penjualan/Return/Iklan. */

/* ----- Standalone Finance filter ----- */
.fin-dsds-finance-filter {
    margin-top:12px !important;
    padding:14px !important;
    border:1px solid #e2e8f0 !important;
    border-radius:10px !important;
    background:#f8fafc !important;
    min-width:0 !important;
}
.fin-dsds-finance-filter > div {
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) auto !important;
    gap:10px !important;
    align-items:end !important;
    min-width:0 !important;
}
.fin-dsds-finance-filter > div > div { min-width:0 !important; }
.fin-dsds-finance-filter > div > div > label:first-child {
    display:block !important;
    margin:0 0 5px !important;
    color:#475569 !important;
    font-size:11px !important;
    font-weight:800 !important;
}
.fin-dsds-finance-filter select,
.fin-dsds-finance-filter #fin_rentang_display,
.fin-dsds-finance-filter details.fin-filter-dropdown > summary {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:40px !important;
    box-sizing:border-box !important;
    padding:0 11px !important;
    border:1px solid #cbd5e1 !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#334155 !important;
    font-family:inherit !important;
    font-size:13px !important;
}
.fin-dsds-finance-filter details.fin-filter-dropdown > summary {
    display:flex !important;
    align-items:center !important;
    cursor:pointer !important;
    list-style:none !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}
.fin-dsds-finance-filter details.fin-filter-dropdown > summary::-webkit-details-marker { display:none; }
.fin-dsds-finance-filter select:hover,
.fin-dsds-finance-filter #fin_rentang_display:hover,
.fin-dsds-finance-filter details.fin-filter-dropdown > summary:hover { border-color:#94a3b8 !important; }
.fin-dsds-finance-filter select:focus-visible,
.fin-dsds-finance-filter #fin_rentang_display:focus-visible,
.fin-dsds-finance-filter details.fin-filter-dropdown > summary:focus-visible,
.fin-dsds-finance-filter details.fin-filter-dropdown[open] > summary {
    border-color:#93c5fd !important;
    box-shadow:0 0 0 2px rgba(37,99,235,.08) !important;
    outline:none !important;
}
.fin-dsds-finance-filter details.fin-filter-dropdown > div {
    z-index:1000 !important;
    top:calc(100% + 6px) !important;
    left:0 !important;
    margin-top:0 !important;
    width:max(100%,240px) !important;
    max-width:min(360px,calc(100vw - 32px)) !important;
    max-height:290px !important;
    overflow:auto !important;
    box-sizing:border-box !important;
    padding:7px !important;
    border:1px solid #dbe3ee !important;
    border-radius:9px !important;
    background:#fff !important;
    box-shadow:0 12px 28px rgba(15,23,42,.16) !important;
}
.fin-dsds-finance-filter details.fin-filter-dropdown > div label {
    display:flex !important;
    align-items:flex-start !important;
    gap:8px !important;
    margin:0 !important;
    padding:7px 8px !important;
    border-radius:6px !important;
    color:#334155 !important;
    font-size:11.5px !important;
    font-weight:600 !important;
    cursor:pointer !important;
}
.fin-dsds-finance-filter details.fin-filter-dropdown > div label:hover { background:#f8fafc !important; }
.fin-dsds-finance-filter details.fin-filter-dropdown input[type="checkbox"] {
    flex:0 0 auto !important;
    width:16px !important;
    height:16px !important;
    margin:1px 0 0 !important;
    accent-color:#2563eb !important;
}
.fin-dsds-finance-filter button[type="submit"] {
    width:auto !important;
    min-height:40px !important;
    height:40px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 14px !important;
    border:1px solid #2563eb !important;
    border-radius:8px !important;
    background:#2563eb !important;
    color:#fff !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1 !important;
    cursor:pointer !important;
    white-space:nowrap !important;
}
.fin-dsds-finance-filter button[type="submit"]:hover {
    border-color:#1d4ed8 !important;
    background:#1d4ed8 !important;
}
.fin-dsds-finance-filter button[type="submit"]:focus-visible {
    outline:2px solid #60a5fa !important;
    outline-offset:2px !important;
}

/* DSDS Compact: 901–1250 */
@media (max-width:1250px) {
    .fin-dsds-finance-filter > div { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    .fin-dsds-finance-filter > div > div:last-child { grid-column:1 / -1 !important; }
}
/* DSDS Tablet: 641–900 */
@media (max-width:900px) {
    .fin-dsds-finance-filter > div { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
/* DSDS Mobile: <=640 */
@media (max-width:640px) {
    .fin-dsds-finance-filter > div { grid-template-columns:minmax(0,1fr) !important; }
    .fin-dsds-finance-filter > div > div:last-child { grid-column:auto !important; }
    .fin-dsds-finance-filter button[type="submit"] { flex:1 1 auto !important; width:100% !important; }
}
/* End migrated local CSS from laporan/analisa-keuangan.php [2738479682] */

/* DSDS migrated local CSS from laporan/analisa-keuangan.php [688652d210] */
:root{--dsds-analytics-stage-height:384px;--dsds-analytics-panel-head-height:32px;--dsds-analytics-panel-head-gap:10px;--dsds-analytics-panel-height:456px}
.fin-legacy-score-grid{display:none!important}
.finx-workspace{padding:12px 14px 14px;margin-top:0;margin-bottom:16px}
.finx-workspace-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;margin:0 0 12px;padding:0 0 8px;border-bottom:1px solid #e2e8f0}
.finx-workspace-head .am-workspace-nav{flex:1 1 auto;min-width:0;margin:0;padding:0 0 2px;gap:5px;border:0;border-radius:0;background:transparent}
.finx-actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.finx-btn{min-height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:8px;padding:0 11px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}
.finx-score-strip{--finx-cols:5;display:grid;grid-template-columns:repeat(var(--finx-cols),minmax(150px,1fr));gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 1px 8px;margin-bottom:2px;scrollbar-width:thin}
.finx-score{position:relative;min-width:0;min-height:82px;box-sizing:border-box;padding:10px 12px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;cursor:grab;user-select:none}
.finx-score.is-dragging{opacity:.48}.finx-score.is-drop-before{box-shadow:-3px 0 0 #2563eb}.finx-score.is-drop-after{box-shadow:3px 0 0 #2563eb}
.finx-label{margin:0 0 6px;padding-right:18px;color:#64748b;font-size:11px;line-height:1.3;font-weight:750}.finx-value{margin:6px 0 3px;color:#0f172a;font-size:20px;line-height:1.15;font-weight:850;overflow-wrap:anywhere}
.finx-score input{position:absolute;top:8px;right:8px;width:14px;height:14px;margin:0;cursor:pointer}
.finx-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;margin-bottom:18px}.finx-split>.table-container{min-width:0;margin-bottom:0}
.finx-panel{height:var(--dsds-analytics-panel-height);box-sizing:border-box;padding:14px;display:flex;flex-direction:column;overflow:hidden}.finx-head{height:var(--dsds-analytics-panel-head-height);display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;margin-bottom:var(--dsds-analytics-panel-head-gap)}
.finx-title{font-size:13px;font-weight:800;color:#0f172a}.finx-note{font-size:10px;color:#64748b}.finx-stage{height:var(--dsds-analytics-stage-height);min-height:0;overflow:hidden;display:flex;flex-direction:column}.finx-table-wrap{min-height:0;overflow:auto;flex:1 1 auto}
.finx-table{width:100%;border-collapse:collapse;font-size:11px;white-space:nowrap}.finx-table th,.finx-table td{padding:8px 9px;border-bottom:1px solid #eef2f7;text-align:left}.finx-table th{font-size:10px;color:#64748b;font-weight:800;background:#f8fafc;position:sticky;top:0;z-index:1}.finx-table .num{text-align:right;font-variant-numeric:tabular-nums}
.finx-chart{position:relative;flex:1 1 auto;min-height:0}.finx-chart canvas{width:100%!important;height:100%!important}.finx-pagination{display:flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;padding-top:8px;font-size:10px;color:#64748b}
.finx-data{margin-bottom:18px}.finx-data .finx-table-wrap{max-height:520px}.finx-select{height:32px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#334155;padding:0 9px;font-size:11px;font-weight:700}
.finx-modal{display:none;position:fixed;inset:0;z-index:10020;align-items:center;justify-content:center;padding:20px}.finx-modal.open{display:flex}.finx-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48)}.finx-dialog{position:relative;width:min(860px,96vw);max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(15,23,42,.28);overflow:hidden}.finx-modal-head{padding:16px 18px 13px;border-bottom:1px solid #e2e8f0}.finx-modal-title{font-size:15px;font-weight:800}.finx-modal-sub{margin-top:4px;font-size:11px;color:#64748b}.finx-grid{display:grid;grid-template-columns:1fr 1fr;min-height:0;overflow:hidden}.finx-picker,.finx-selected{padding:14px 16px;overflow:auto;max-height:58vh}.finx-picker{border-right:1px solid #e2e8f0}.finx-col-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;font-weight:800;color:#475569;text-transform:uppercase}.finx-options{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.finx-option{display:flex;align-items:center;gap:7px;border:1px solid #e2e8f0;border-radius:8px;padding:8px 9px;font-size:11px;cursor:pointer}.finx-selected-list{display:flex;flex-direction:column;gap:7px}.finx-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;border:1px solid #e2e8f0;border-radius:8px;padding:8px;background:#fff}.finx-item button{border:1px solid #cbd5e1;border-radius:6px;background:#fff;cursor:pointer}.finx-foot{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid #e2e8f0}.finx-foot-actions{display:flex;gap:7px}.finx-foot-actions button{border:1px solid #cbd5e1;border-radius:7px;background:#fff;padding:7px 11px;font-size:11px;font-weight:700;cursor:pointer}.finx-foot-actions .primary{background:#0f172a;border-color:#0f172a;color:#fff}
#fin-transaksi-harian,#fin-transaksi-detail{display:none!important}
@media(max-width:900px){.finx-split{grid-template-columns:1fr}.finx-workspace-head{align-items:flex-start;flex-direction:column}.finx-actions{width:100%;justify-content:flex-end}.finx-grid{grid-template-columns:1fr}.finx-picker{border-right:0;border-bottom:1px solid #e2e8f0}}
@media(max-width:640px){.finx-score-strip{grid-template-columns:repeat(var(--finx-cols),minmax(142px,1fr))}.finx-options{grid-template-columns:1fr}}
/* End migrated local CSS from laporan/analisa-keuangan.php [688652d210] */

/* DSDS migrated local CSS from laporan/analisa-keuangan.php [ba56f73f7a] */
/* BARU (26 Agt 2026): hover tooltip di kartu Scorecard -- rincian Selesai vs Pending. */
.fin-score-card { position: relative; cursor: help; }
.fin-score-tooltip {
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
    background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 10px 14px; font-size: 11px;
    min-width: 220px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); z-index: 30; text-align: left;
    opacity: 0; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease;
}
.fin-score-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #0f172a;
}
.fin-score-card:hover .fin-score-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.fin-score-tooltip .baris { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; }
.fin-score-tooltip .judul { font-weight: 700; margin-bottom: 6px; border-bottom: 1px solid #334155; padding-bottom: 4px; }

/* BARU (28 Agt 2026): tooltip breakdown per-platform di tabel Chart Biaya (beda posisi dari
   .fin-score-tooltip yg dipakai kartu Scorecard -- muncul di BAWAH ikon "ⓘ", bukan di ATAS kartu). */
.fin-plat-hover { position: relative; cursor: help; display: inline-block; }
.fin-plat-tooltip {
    position: absolute; left: 0; top: calc(100% + 6px);
    background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 8px 12px; font-size: 11px;
    min-width: 170px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); z-index: 40; text-align: left;
    opacity: 0; visibility: hidden; transition: opacity 0.15s ease;
}
.fin-plat-hover:hover .fin-plat-tooltip { opacity: 1; visibility: visible; }
.fin-plat-tooltip .baris { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; white-space: nowrap; }
.fin-plat-tooltip .judul { font-weight: 700; margin-bottom: 4px; border-bottom: 1px solid #334155; padding-bottom: 3px; }
/* End migrated local CSS from laporan/analisa-keuangan.php [ba56f73f7a] */

/* DSDS migrated local CSS from laporan/laporan-iklan-toko.php [5c2091d53d] */
:root {
    --dsds-analytics-stage-height:384px;
    --dsds-analytics-panel-head-height:32px;
    --dsds-analytics-panel-head-gap:10px;
    --dsds-analytics-panel-height:456px;
}

.git-wrap { margin-top:0; }
.git-workspace { padding:12px 14px 14px; margin-top:0; margin-bottom:16px; }
.git-workspace-head {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    min-width:0; margin:0 0 12px; padding:0 0 8px; border-bottom:1px solid #e2e8f0;
}
.git-workspace-head .am-workspace-nav {
    flex:1 1 auto; min-width:0; margin:0; padding:0 0 2px; gap:5px;
    border:0; border-radius:0; background:transparent;
}
.git-workspace-actions { flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.am-bisnis-metric-btn {
    min-height:32px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:8px;
    padding:0 11px; font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap;
}
.am-bisnis-metric-btn:hover { background:#f8fafc; border-color:#94a3b8; }

.git-score-strip {
    --git-score-cols:6;
    display:grid; grid-template-columns:repeat(var(--git-score-cols), minmax(150px,1fr)); gap:12px;
    overflow-x:auto; overflow-y:hidden; padding:2px 1px 8px; margin-bottom:2px; scrollbar-width:thin;
}
.git-score-card {
    position:relative; min-width:0; min-height:82px; box-sizing:border-box;
    padding:10px 12px; border:1px solid #e2e8f0; border-radius:12px; background:#fff;
    cursor:grab; user-select:none;
}
.git-score-card.is-dragging { opacity:.48; cursor:grabbing; }
.git-score-card.is-drop-before { box-shadow:-3px 0 0 #2563eb; }
.git-score-card.is-drop-after { box-shadow:3px 0 0 #2563eb; }
.git-score-label { margin:0 0 6px; padding-right:18px; color:#64748b; font-size:11px; line-height:1.3; font-weight:750; }
.git-score-value { margin:6px 0 3px; color:#0f172a; font-size:20px; line-height:1.15; font-weight:850; overflow-wrap:anywhere; }
.git-score-delta { margin:0; min-height:0; line-height:normal; }
.git-score-card .git-metric-toggle { position:absolute; top:8px; right:8px; width:14px; height:14px; margin:0; cursor:pointer; }
.git-score-empty { display:none; padding:18px; border:1px dashed #cbd5e1; border-radius:9px; color:#94a3b8; font-size:12px; text-align:center; }

.git-split { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; margin-bottom:18px; }
.git-split > .table-container { min-width:0; margin-bottom:0; }
.git-panel {
    height:var(--dsds-analytics-panel-height); min-height:var(--dsds-analytics-panel-height);
    box-sizing:border-box; display:flex; flex-direction:column; padding:14px !important; overflow:hidden;
}
.git-section-title { margin:0; color:#0f172a; font-size:13px; font-weight:800; }
.git-panel > .git-section-title {
    flex:0 0 var(--dsds-analytics-panel-head-height); height:var(--dsds-analytics-panel-head-height);
    margin:0 0 var(--dsds-analytics-panel-head-gap) !important; display:flex; align-items:center;
}
.git-detail-toolbar,
.git-donut-toolbar {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    flex:0 0 var(--dsds-analytics-panel-head-height); height:var(--dsds-analytics-panel-head-height);
    min-height:var(--dsds-analytics-panel-head-height); margin-bottom:var(--dsds-analytics-panel-head-gap);
}
.git-control { display:flex; align-items:center; gap:5px; color:#64748b; font-size:10px; font-weight:750; }
.git-select {
    height:32px; min-width:118px; padding:0 28px 0 9px; border:1px solid #cbd5e1; border-radius:8px;
    background:#fff; color:#334155; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer;
}
.git-select:focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }
.git-detail-stage {
    height:var(--dsds-analytics-stage-height); box-sizing:border-box; flex:0 0 var(--dsds-analytics-stage-height);
    overflow:auto; border:1px solid #f1f5f9; border-radius:8px;
}
.git-donut-stage {
    height:var(--dsds-analytics-stage-height); box-sizing:border-box; flex:0 0 var(--dsds-analytics-stage-height);
    position:relative; display:grid; place-items:center; min-width:0;
}
.git-donut-stage canvas { max-width:100%; max-height:100%; }
.git-donut-empty {
    display:none; width:100%; box-sizing:border-box; padding:14px; border:1px dashed #cbd5e1; border-radius:8px;
    background:#f8fafc; color:#64748b; font-size:11px; line-height:1.45; text-align:center;
}
.git-daily-stage {
    height:var(--dsds-analytics-stage-height); box-sizing:border-box; flex:0 0 var(--dsds-analytics-stage-height);
    display:flex; flex-direction:column; min-height:0;
}
.git-daily-table-wrap {
    flex:1 1 auto; min-height:0; overflow:auto; border:1px solid #f1f5f9; border-radius:8px; background:#fff;
}
.git-daily-pagination,
.git-data-pagination {
    flex:0 0 32px; min-height:32px; display:flex; align-items:flex-end; justify-content:center; gap:6px;
}
.git-trend-stage {
    height:var(--dsds-analytics-stage-height); box-sizing:border-box; flex:0 0 var(--dsds-analytics-stage-height);
    position:relative; min-width:0;
}
.git-trend-stage > canvas { width:100% !important; height:100% !important; }
.git-trend-fallback {
    position:absolute; inset:0; z-index:2; margin:0; display:none; align-items:center; justify-content:center;
    padding:14px; box-sizing:border-box; color:#64748b; font-size:11px; text-align:center;
}

.git-table { width:100%; border-collapse:collapse; font-size:12px; }
.git-table th, .git-table td { padding:6px 8px; border-bottom:1px solid #f1f5f9; text-align:left; white-space:nowrap; }
.git-table th { position:sticky; top:0; background:#f8fafc; color:#64748b; font-size:10px; text-transform:uppercase; z-index:1; }
.git-table td.num, .git-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
.git-channel-cell { display:flex; align-items:center; gap:7px; }
.git-channel-check { width:14px; height:14px; margin:0; cursor:pointer; }
.git-channel-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.git-source-note { color:#94a3b8; font-size:10px; }

.git-data-panel { margin-bottom:0; padding:14px !important; }
.git-data-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:32px; margin-bottom:10px; }
.git-data-stage { height:436px; display:flex; flex-direction:column; min-height:0; }
.git-data-table-wrap { flex:1 1 auto; min-height:0; overflow:auto; border:1px solid #f1f5f9; border-radius:8px; }

.am-bisnis-metric-modal { display:none; position:fixed; inset:0; z-index:10020; align-items:center; justify-content:center; padding:20px; }
.am-bisnis-metric-modal.open { display:flex; }
.am-bisnis-metric-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.48); }
.am-bisnis-metric-dialog { position:relative; width:min(860px,96vw); max-height:88vh; display:flex; flex-direction:column; background:#fff; border-radius:14px; box-shadow:0 24px 70px rgba(15,23,42,.28); overflow:hidden; }
.am-bisnis-metric-head { padding:16px 18px 13px; border-bottom:1px solid #e2e8f0; }
.am-bisnis-metric-title { font-size:15px; font-weight:800; color:#0f172a; }
.am-bisnis-metric-sub { margin-top:4px; font-size:11px; color:#64748b; line-height:1.45; }
.am-bisnis-metric-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:0; overflow:hidden; }
.am-bisnis-metric-picker,.am-bisnis-metric-selected { min-width:0; padding:14px 16px; overflow:auto; max-height:58vh; }
.am-bisnis-metric-picker { border-right:1px solid #e2e8f0; }
.am-bisnis-metric-col-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; font-size:11px; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:.03em; }
.am-bisnis-metric-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.am-bisnis-metric-option { display:flex; align-items:center; gap:7px; border:1px solid #e2e8f0; border-radius:8px; padding:8px 9px; font-size:11px; color:#334155; cursor:pointer; background:#fff; }
.am-bisnis-metric-option:hover { background:#f8fafc; }
.am-bisnis-selected-list { display:flex; flex-direction:column; gap:6px; }
.am-bisnis-selected-item { display:flex; align-items:center; gap:8px; border:1px solid #e2e8f0; border-radius:8px; padding:7px 8px; background:#fff; cursor:grab; }
.am-bisnis-selected-item.is-dragging { opacity:.5; }
.am-bisnis-drag { color:#94a3b8; cursor:grab; }
.am-bisnis-selected-label { flex:1 1 auto; min-width:0; font-size:11px; font-weight:700; color:#334155; }
.am-bisnis-move { display:flex; gap:3px; }
.am-bisnis-move button,.am-bisnis-remove { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#475569; cursor:pointer; }
.am-bisnis-move button:disabled { opacity:.35; cursor:not-allowed; }
.am-bisnis-remove { color:#b91c1c; }
.am-bisnis-metric-empty { padding:20px 8px; text-align:center; color:#94a3b8; font-size:11px; }
.am-bisnis-metric-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-top:1px solid #e2e8f0; }
.am-bisnis-metric-count { font-size:10px; color:#64748b; }
.am-bisnis-metric-actions { display:flex; gap:7px; }
.am-bisnis-metric-actions button { border:1px solid #cbd5e1; border-radius:7px; background:#fff; color:#334155; padding:7px 11px; font-size:11px; font-weight:700; cursor:pointer; }
.am-bisnis-metric-actions .primary { background:#0f172a; border-color:#0f172a; color:#fff; }

@media (max-width:900px) {
    .git-split { grid-template-columns:1fr; }
    .git-panel { height:auto; min-height:var(--dsds-analytics-panel-height); }
    .git-workspace-head { align-items:flex-start; flex-direction:column; gap:8px; }
    .git-workspace-head .am-workspace-nav { width:100%; }
    .git-workspace-actions { width:100%; justify-content:flex-end; }
}
@media (max-width:640px) {
    .git-score-strip { gap:8px; grid-template-columns:repeat(var(--git-score-cols), minmax(135px,1fr)); }
    .git-score-card { min-height:82px; padding:9px 8px; }
    .git-score-label { font-size:9px; }
    .git-score-value { font-size:clamp(16px,4.7vw,21px); }
    .am-bisnis-metric-grid { grid-template-columns:1fr; overflow:auto; }
    .am-bisnis-metric-picker { border-right:0; border-bottom:1px solid #e2e8f0; }
    .am-bisnis-metric-options { grid-template-columns:1fr; }
}
/* End migrated local CSS from laporan/laporan-iklan-toko.php [5c2091d53d] */


/* DSDS generated utilities for migrated report inline styles. */
.dsds-report-u-001 { display:flex; gap:8px; }
.dsds-report-u-002 { display:none; }
.dsds-report-u-003 { padding:10px 16px; }
.dsds-report-u-004 { margin:0; white-space:nowrap; }
.dsds-report-u-005 { display:grid; grid-template-columns:repeat(5, 1fr) auto; gap:16px; align-items:end; }
.dsds-report-u-006 { display:block; font-size:12px; font-weight:700; color:#475569; margin-bottom:6px; }
.dsds-report-u-007 { padding:8px; border-radius:6px; border:1px solid #cbd5e1; width:100%; }
.dsds-report-u-008 { position:relative; }
.dsds-report-u-009 { cursor:pointer; padding:8px 12px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; font-size:13px; list-style:none; width:100%; box-sizing:border-box; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dsds-report-u-010 { position:absolute; z-index:20; background:#fff; border:1px solid #cbd5e1; border-radius:6px; padding:8px; margin-top:4px; min-width:220px; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.dsds-report-u-011 { display:block; font-size:13px; padding:2px 0; font-weight:700; white-space:nowrap; }
.dsds-report-u-012 { margin:4px 0; border:none; border-top:1px solid #e2e8f0; }
.dsds-report-u-013 { display:block; font-size:13px; padding:2px 0; white-space:nowrap; }
.dsds-report-u-014 { cursor:pointer; padding:8px 12px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; font-size:13px; list-style:none; width:100%; box-sizing:border-box; }
.dsds-report-u-015 { position:absolute; z-index:20; background:#fff; border:1px solid #cbd5e1; border-radius:6px; padding:8px; margin-top:4px; max-height:190px; overflow-y:auto; min-width:220px; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.dsds-report-u-016 { color:#94a3b8; font-size:12px; }
.dsds-report-u-017 { padding:8px; border-radius:6px; border:1px solid #cbd5e1; width:100%; box-sizing:border-box; cursor:pointer; background:#fff; }
.dsds-report-u-018 { text-align:center; padding:32px; }
.dsds-report-u-019 { font-size:16px; font-weight:700; color:#94a3b8; }
.dsds-report-u-020 { font-size:12px; color:#94a3b8; margin-top:6px; }
.dsds-report-u-021 { text-align:center; border-top:3px solid #0891b2; padding:8px; }
.dsds-report-u-022 { font-size:20px; font-weight:800; color:#0f172a; }
.dsds-report-u-023 { border-top:1px solid #334155; margin-top:4px; padding-top:4px; }
.dsds-report-u-024 { text-align:center; border-top:3px solid #dc2626; padding:8px; }
.dsds-report-u-025 { text-align:center; border-top:3px solid #9333ea; padding:8px; }
.dsds-report-u-026 { text-align:center; border-top:3px solid #16a34a; padding:8px; background:#f0fdf4; }
.dsds-report-u-027 { font-size:9px; color:#94a3b8; }
.dsds-report-u-028 { text-align:center; border-top:3px solid #ea580c; padding:8px; }
.dsds-report-u-029 { text-align:center; color:#94a3b8; padding:24px; }
.dsds-report-u-030 { max-width:100%; margin:0 auto; }
.dsds-report-u-031 { overflow-x:auto; margin-top:16px; }
.dsds-report-u-032 { white-space:nowrap; font-size:12px; }
.dsds-report-u-033 { color:#dc2626; }
.dsds-report-u-034 { color:#d97706; }
.dsds-report-u-035 { cursor:pointer; background:#f1f5f9; font-weight:700; }
.dsds-report-u-036 { display:inline-block; width:12px; color:#2563eb; }
.dsds-report-u-037 { text-align:center; }
.dsds-report-u-038 { color:#dc2626; text-align:center; }
.dsds-report-u-039 { color:#d97706; text-align:center; }
.dsds-report-u-040 { display:none; background:#f8fafc; font-weight:700; cursor:pointer; }
.dsds-report-u-041 { padding-left:20px; color:#334155; }
.dsds-report-u-042 { padding-left:40px; color:#475569; }
.dsds-report-u-043 { font-weight:700; border-top:2px solid #cbd5e1; }
.dsds-report-u-044 { scroll-margin-top:20px; }
.dsds-report-u-045 { cursor:pointer; }
.dsds-report-u-046 { display:inline-block; margin:0; }
.dsds-report-u-047 { font-size:12px; color:#64748b; margin-top:-4px; }
.dsds-report-u-048 { overflow-x:auto; }
.dsds-report-u-049 { white-space:nowrap; }
.dsds-report-u-050 { padding:5px 12px; background:#2563eb; color:#fff; border:none; border-radius:5px; font-size:11px; font-weight:600; cursor:pointer; }
.dsds-report-u-051 { text-align:center; color:#94a3b8; }
.dsds-report-u-052 { display:flex; gap:6px; justify-content:center; align-items:center; margin-top:12px; flex-wrap:wrap; }
.dsds-report-u-053 { font-size:12px; color:#64748b; margin-top:8px; }
.dsds-report-u-054 { padding:3px 8px; background:#fef3c7; color:#92400e; border-radius:4px; font-size:10px; font-weight:700; }
.dsds-report-u-055 { padding:3px 8px; background:#dcfce7; color:#166534; border-radius:4px; font-size:10px; font-weight:700; }
.dsds-report-u-056 { margin-bottom:16px; }
.dsds-report-u-057 { margin:0; }
.dsds-report-u-058 { color:#64748b; font-size:12px; margin:0; }
.dsds-report-u-059 { margin-top:12px; }
.dsds-report-u-060 { margin-top:16px; padding:16px; background:#f8fafc; border-radius:10px; }
.dsds-report-u-061 { display:flex; gap:12px; align-items:end; overflow-x:auto; padding-bottom:2px; }
.dsds-report-u-062 { flex:1 1 160px; min-width:160px; }
.dsds-report-u-063 { color:#dc2626; font-weight:700; }
.dsds-report-u-064 { flex:1 1 200px; min-width:200px; }
.dsds-report-u-065 { flex:1 1 190px; min-width:190px; }
.dsds-report-u-066 { flex:0 0 auto; }
.dsds-report-u-067 { padding:9px 20px; background:#2563eb; color:#fff; border:none; border-radius:6px; font-weight:700; cursor:pointer; }
.dsds-report-u-068 { margin-bottom:12px; }
.dsds-report-u-069 { text-align:center;color:#94a3b8;padding:20px; }
.dsds-report-u-070 { background:'+gitChannelColor[row.ct]+' }
.dsds-report-u-071 { margin-bottom:8px; }
.dsds-report-u-072 { margin-top:8px; padding:16px; background:#f8fafc; border-radius:10px; }
.dsds-report-u-073 { flex:1 1 140px; min-width:140px; }
.dsds-report-u-074 { flex:1 1 150px; min-width:150px; }
.dsds-report-u-075 { flex:1 1 120px; min-width:120px; }
.dsds-report-u-076 { flex:1 1 170px; min-width:170px; }
.dsds-report-u-077 { padding:9px 20px; background:#2563eb; color:#fff; border:none; border-radius:6px; font-weight:700; cursor:pointer; white-space:nowrap; }
.dsds-report-u-078 { display:inline-block; margin-left:6px; padding:9px 14px; background:#fff; color:#334155; border:1px solid #cbd5e1; border-radius:6px; font-weight:700; text-decoration:none; white-space:nowrap; }
.dsds-report-u-079 { padding:8px 10px; border-bottom:1px solid #f1f5f9; background:#fffbeb; color:#92400e; font-size:10px; line-height:1.45; }
.dsds-report-u-080 { padding:3px 8px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; cursor:pointer; font-size:11px; line-height:1.4; }
.dsds-report-u-081 { font-size:11px; color:#64748b; }
.dsds-report-u-082 { text-align:center;color:#94a3b8; }
.dsds-report-u-083 { font-size:11px;color:#64748b; }
.dsds-report-u-084 { text-align:center;color:#94a3b8;padding:18px; }
/* End generated report inline-style utilities. */

/* ========================================================================== */
/* REPORT FILTER + ANALYTICS CONSUMPTION PRIMITIVES                          */
/* ========================================================================== */
.syn-report-filter-panel { margin-bottom: var(--syn-space-2); }
.syn-report-filter-panel__message { margin-bottom: var(--syn-space-2); }
.syn-workspace__title { flex:1 1 auto; min-width:0; display:flex; align-items:center; padding:0 16px; color:var(--syn-color-text-primary); font-size:13px; font-weight:800; }
.syn-filter-bar--report { grid-template-columns:repeat(7,minmax(110px,1fr)) auto; }
.syn-filter-actions--nowrap { flex-wrap:nowrap; }
.syn-multi__option--all { margin-bottom:5px; padding-bottom:9px; border-bottom:1px solid var(--syn-color-border-subtle); border-radius:0; font-weight:800; }
.syn-multi__empty { display:block; padding:7px 8px; color:var(--syn-color-text-disabled); font-size:11px; }
.syn-state__title { color:var(--syn-color-text-secondary); font-size:13px; font-weight:800; }
.syn-state__description { margin-top:4px; color:var(--syn-color-text-muted); font-size:11px; line-height:1.45; }
.syn-scorecard-empty[hidden] { display:none; }
.syn-analytics-controls { display:flex; align-items:center; justify-content:flex-end; gap:var(--syn-space-2); min-width:0; }
.syn-analytics-control { display:flex; align-items:center; gap:5px; color:var(--syn-color-text-muted); font-size:10px; font-weight:750; }
.syn-analytics-control__label { white-space:nowrap; }
.syn-analytics-control .syn-select { width:auto; min-width:118px; height:var(--syn-control-sm); font-size:11px; font-weight:700; }
.syn-table .syn-table__numeric { text-align:right; font-variant-numeric:tabular-nums; }
.syn-table th.syn-table__numeric .syn-table__sort { margin-left:auto; }
.syn-scorecard__progress { margin:8px -12px -10px; }
.syn-target-progress { position:relative; height:18px; overflow:hidden; border-radius:0 0 var(--syn-radius-card) var(--syn-radius-card); background:var(--syn-color-border-subtle); }
.syn-target-progress__bar { position:absolute; inset:0; width:100%; height:100%; appearance:none; -webkit-appearance:none; border:0; background:transparent; }
.syn-target-progress__bar::-webkit-progress-bar { background:var(--syn-color-border-subtle); }
.syn-target-progress__bar--neutral::-webkit-progress-value { background:var(--syn-color-border-strong); }
.syn-target-progress__bar--success::-webkit-progress-value { background:var(--syn-color-status-success); }
.syn-target-progress__bar--danger::-webkit-progress-value { background:var(--syn-color-status-danger); }
.syn-target-progress__bar--neutral::-moz-progress-bar { background:var(--syn-color-border-strong); }
.syn-target-progress__bar--success::-moz-progress-bar { background:var(--syn-color-status-success); }
.syn-target-progress__bar--danger::-moz-progress-bar { background:var(--syn-color-status-danger); }
.syn-target-progress__label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--syn-color-text-primary); font-size:10px; font-weight:800; white-space:nowrap; pointer-events:none; }
@media (max-width:1250px) {
    .syn-filter-bar--report { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .syn-filter-bar--report .syn-filter-actions { grid-column:1/-1; }
}
@media (max-width:900px) { .syn-filter-bar--report { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
    .syn-filter-bar--report { grid-template-columns:1fr; }
    .syn-filter-actions--nowrap { flex-wrap:wrap; }
    .syn-analytics-panel__head--stack-mobile { height:auto; min-height:var(--syn-analytics-panel-head-height); flex-basis:auto; align-items:flex-start; flex-direction:column; }
    .syn-analytics-controls { width:100%; justify-content:flex-start; }
    .syn-analytics-control { width:100%; align-items:flex-start; flex-direction:column; }
    .syn-analytics-control .syn-select { width:100%; min-width:0; }
}

/* DSDS generated utilities for PHP-string inline style migration. */
.dsds-report-u-085 { padding-left:36px; color:#94a3b8; }
.dsds-report-u-086 { display:none; }
.dsds-report-u-087 { margin-right:4px; }
.dsds-report-u-088 { padding-left:20px; font-weight:700; color:#475569; cursor:pointer; }
.dsds-report-u-089 { cursor:pointer; }
.dsds-report-u-090 { text-align:center; color:#94a3b8; }
.dsds-report-u-091 { display:inline-block; margin:0; }
.dsds-report-u-092 { display:none; background:#f8fafc; font-weight:700; cursor:pointer; }
.dsds-report-u-093 { cursor:pointer; background:#f1f5f9; font-weight:700; }
.dsds-report-u-094 { margin-top:0; }
.dsds-report-u-095 { font-size:11px; color:#64748b; font-weight:700; }
.dsds-report-u-096 { font-size:11px; color:#166534; font-weight:700; }
.dsds-report-u-097 { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dsds-report-u-098 { font-size:9px; color:#94a3b8; }
.dsds-report-u-099 { font-size:9px; font-weight:400; color:#dc2626; margin-top:2px; }
.dsds-report-u-100 { background:#fef3c7;padding:8px;font-size:11px; }
.dsds-report-u-101 { padding:5px 10px; border:1px solid #cbd5e1; border-radius:4px; font-size:12px; text-decoration:none; color:#2563eb; }
.dsds-report-u-102 { color:#94a3b8; font-size:12px; }
.dsds-report-u-103 { display:flex; gap:6px; justify-content:center; align-items:center; margin-top:12px; flex-wrap:wrap; }
.dsds-report-u-104 { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.dsds-report-u-105 { font-size:16px; font-weight:700; color:#94a3b8; }
.dsds-report-u-106 { display:inline-block; margin-left:6px; padding:9px 14px; background:#fff; color:#334155; border:1px solid #cbd5e1; border-radius:6px; font-weight:700; text-decoration:none; white-space:nowrap; }
.dsds-report-u-107 { display:block; font-size:13px; padding:2px 0; white-space:nowrap; }
.dsds-report-u-108 { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#0f172a; white-space:nowrap; }
.dsds-report-u-109 { position:relative; height:18px; background:#e2e8f0; border-radius:0 0 12px 12px; overflow:hidden; }
.dsds-report-u-110 { margin:8px -10px -14px -10px; }
.dsds-report-u-111 { position:absolute; top:0; left:0; height:100%; width:100%; background:#cbd5e1; }
/* End PHP-string inline style utilities. */

/* DSDS semantic helpers for report local-css removal */
.dsds-report-delta { margin-top:3px; font-size:10px; font-weight:700; }
.dsds-report-delta--positive { color:#16a34a; }
.dsds-report-delta--negative { color:#dc2626; }
.dsds-is-hidden { display:none; }
.fin-legacy-score-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; position:relative; z-index:1; }
.fin-legacy-score-grid--embedded { margin:8px 0; }
.fin-legacy-score-grid--standalone { margin:-20px 0 8px 0; }
.finx-cost-detail { position:relative; z-index:1; }
.finx-cost-detail--embedded { margin-top:0; margin-bottom:18px; }
.finx-cost-detail--standalone { margin-top:-20px; }
.dsds-report-u-101.is-active { background:#2563eb; color:#fff; font-weight:700; border-color:#2563eb; }
.git-channel-dot--produk { background:#2563eb; }
.git-channel-dot--video-penjual { background:#7c3aed; }
.git-channel-dot--video-kreator { background:#0ea5e9; }
.git-channel-dot--live { background:#dc2626; }
.git-channel-dot--shopee-iklan { background:#ee4d2d; }
.dsds-target-bar__fill { position:absolute; top:0; left:0; height:100%; transition:width 0.3s; }
.dsds-target-bar__fill--success { background:#16a34a; }
.dsds-target-bar__fill--danger { background:#dc2626; }
.dsds-target-bar__fill--w0 { width:0%; }
.dsds-target-bar__fill--w1 { width:1%; }
.dsds-target-bar__fill--w2 { width:2%; }
.dsds-target-bar__fill--w3 { width:3%; }
.dsds-target-bar__fill--w4 { width:4%; }
.dsds-target-bar__fill--w5 { width:5%; }
.dsds-target-bar__fill--w6 { width:6%; }
.dsds-target-bar__fill--w7 { width:7%; }
.dsds-target-bar__fill--w8 { width:8%; }
.dsds-target-bar__fill--w9 { width:9%; }
.dsds-target-bar__fill--w10 { width:10%; }
.dsds-target-bar__fill--w11 { width:11%; }
.dsds-target-bar__fill--w12 { width:12%; }
.dsds-target-bar__fill--w13 { width:13%; }
.dsds-target-bar__fill--w14 { width:14%; }
.dsds-target-bar__fill--w15 { width:15%; }
.dsds-target-bar__fill--w16 { width:16%; }
.dsds-target-bar__fill--w17 { width:17%; }
.dsds-target-bar__fill--w18 { width:18%; }
.dsds-target-bar__fill--w19 { width:19%; }
.dsds-target-bar__fill--w20 { width:20%; }
.dsds-target-bar__fill--w21 { width:21%; }
.dsds-target-bar__fill--w22 { width:22%; }
.dsds-target-bar__fill--w23 { width:23%; }
.dsds-target-bar__fill--w24 { width:24%; }
.dsds-target-bar__fill--w25 { width:25%; }
.dsds-target-bar__fill--w26 { width:26%; }
.dsds-target-bar__fill--w27 { width:27%; }
.dsds-target-bar__fill--w28 { width:28%; }
.dsds-target-bar__fill--w29 { width:29%; }
.dsds-target-bar__fill--w30 { width:30%; }
.dsds-target-bar__fill--w31 { width:31%; }
.dsds-target-bar__fill--w32 { width:32%; }
.dsds-target-bar__fill--w33 { width:33%; }
.dsds-target-bar__fill--w34 { width:34%; }
.dsds-target-bar__fill--w35 { width:35%; }
.dsds-target-bar__fill--w36 { width:36%; }
.dsds-target-bar__fill--w37 { width:37%; }
.dsds-target-bar__fill--w38 { width:38%; }
.dsds-target-bar__fill--w39 { width:39%; }
.dsds-target-bar__fill--w40 { width:40%; }
.dsds-target-bar__fill--w41 { width:41%; }
.dsds-target-bar__fill--w42 { width:42%; }
.dsds-target-bar__fill--w43 { width:43%; }
.dsds-target-bar__fill--w44 { width:44%; }
.dsds-target-bar__fill--w45 { width:45%; }
.dsds-target-bar__fill--w46 { width:46%; }
.dsds-target-bar__fill--w47 { width:47%; }
.dsds-target-bar__fill--w48 { width:48%; }
.dsds-target-bar__fill--w49 { width:49%; }
.dsds-target-bar__fill--w50 { width:50%; }
.dsds-target-bar__fill--w51 { width:51%; }
.dsds-target-bar__fill--w52 { width:52%; }
.dsds-target-bar__fill--w53 { width:53%; }
.dsds-target-bar__fill--w54 { width:54%; }
.dsds-target-bar__fill--w55 { width:55%; }
.dsds-target-bar__fill--w56 { width:56%; }
.dsds-target-bar__fill--w57 { width:57%; }
.dsds-target-bar__fill--w58 { width:58%; }
.dsds-target-bar__fill--w59 { width:59%; }
.dsds-target-bar__fill--w60 { width:60%; }
.dsds-target-bar__fill--w61 { width:61%; }
.dsds-target-bar__fill--w62 { width:62%; }
.dsds-target-bar__fill--w63 { width:63%; }
.dsds-target-bar__fill--w64 { width:64%; }
.dsds-target-bar__fill--w65 { width:65%; }
.dsds-target-bar__fill--w66 { width:66%; }
.dsds-target-bar__fill--w67 { width:67%; }
.dsds-target-bar__fill--w68 { width:68%; }
.dsds-target-bar__fill--w69 { width:69%; }
.dsds-target-bar__fill--w70 { width:70%; }
.dsds-target-bar__fill--w71 { width:71%; }
.dsds-target-bar__fill--w72 { width:72%; }
.dsds-target-bar__fill--w73 { width:73%; }
.dsds-target-bar__fill--w74 { width:74%; }
.dsds-target-bar__fill--w75 { width:75%; }
.dsds-target-bar__fill--w76 { width:76%; }
.dsds-target-bar__fill--w77 { width:77%; }
.dsds-target-bar__fill--w78 { width:78%; }
.dsds-target-bar__fill--w79 { width:79%; }
.dsds-target-bar__fill--w80 { width:80%; }
.dsds-target-bar__fill--w81 { width:81%; }
.dsds-target-bar__fill--w82 { width:82%; }
.dsds-target-bar__fill--w83 { width:83%; }
.dsds-target-bar__fill--w84 { width:84%; }
.dsds-target-bar__fill--w85 { width:85%; }
.dsds-target-bar__fill--w86 { width:86%; }
.dsds-target-bar__fill--w87 { width:87%; }
.dsds-target-bar__fill--w88 { width:88%; }
.dsds-target-bar__fill--w89 { width:89%; }
.dsds-target-bar__fill--w90 { width:90%; }
.dsds-target-bar__fill--w91 { width:91%; }
.dsds-target-bar__fill--w92 { width:92%; }
.dsds-target-bar__fill--w93 { width:93%; }
.dsds-target-bar__fill--w94 { width:94%; }
.dsds-target-bar__fill--w95 { width:95%; }
.dsds-target-bar__fill--w96 { width:96%; }
.dsds-target-bar__fill--w97 { width:97%; }
.dsds-target-bar__fill--w98 { width:98%; }
.dsds-target-bar__fill--w99 { width:99%; }
.dsds-target-bar__fill--w100 { width:100%; }
/* End DSDS semantic helpers for report local-css removal */