/* Dashboard styles — global so child components (KpiCard, chart cards, etc.)
   can share class names without ::deep gymnastics. Scoped to elements
   beneath .dx-dashboard. */

.dx-dashboard {
    --dx-card: var(--app-panel-bg-color);
    --dx-card-border: var(--bs-border-color);
    --dx-text: var(--bs-body-color);
    --dx-text-dim: var(--bs-gray-500);
    --dx-orange: var(--bs-primary);
    --dx-green: var(--bs-success);

    display: grid;
    /* minmax(0, 1fr) — without the 0 floor, tracks won't shrink below their
       content width and will blow out the 1200px page container. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: 1rem;
    color: var(--dx-text);
}
/* Every direct grid item needs min-width: 0 so its content can wrap/scale
   instead of forcing the track wider. */
.dx-dashboard > * {
    min-width: 0;
}

/* KPI cards */
.dx-kpi {
    background: var(--dx-card);
    border: 1px solid var(--dx-card-border);
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.dx-kpi-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
}
.dx-kpi-label {
    font-size: 0.85rem;
    color: var(--dx-text-dim);
    line-height: 1.2;
}
.dx-kpi-value {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
}
.dx-kpi-icon {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.dx-kpi-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}
.dx-kpi-icon-blue { background: var(--bs-info); }
.dx-kpi-icon-green { background: var(--bs-success); }
.dx-kpi-icon-orange { background: var(--bs-primary); }
.dx-kpi-icon-purple { background: var(--bs-dark); }

/* Panels */
.dx-panel {
    background: var(--dx-card);
    border: 1px solid var(--dx-card-border);
    border-radius: 0.75rem;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.dx-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dx-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dx-text);
}

.dx-trend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--dx-green);
}
.dx-trend-down {
    color: var(--bs-danger);
}
/* "no change" - neither good nor bad; recede to a dim neutral */
.dx-trend-flat {
    color: var(--dx-text-dim);
}
.dx-trend-value {
    font-weight: 600;
}
.dx-trend-arrow {
    width: 0.95rem;
    height: 0.95rem;
}
.dx-trend-text {
    color: var(--dx-text-dim);
    margin-left: 0.25rem;
}

/* Chart canvas */
.dx-chart-area {
    flex: 1;
    min-height: 220px;
    display: flex;
    align-items: stretch;
}
.dx-dashboard-chart {
    width: 100%;
    height: 100%;
    min-height: 220px;
}

/* Donut */
.dx-target-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1;
    padding-top: 0.5rem;
}
.dx-donut-wrap {
    position: relative;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
}
.dx-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--dx-text);
    pointer-events: none;
}
/* DevExpress pie chart reserves a few px of asymmetric top padding inside
   its SVG, so the visual donut center sits slightly below the wrap's
   geometric center. Nudge the overlay text down so it aligns with the
   donut's actual center. */
.dx-area-success-rate .dx-donut-center {
    transform: translateY(0.35rem);
}
.dx-target-footer {
    color: var(--dx-text-dim);
    font-size: 0.9rem;
}


/* Grid placement
   Row 1: filter bar; Row 2: KPIs; Row 3: charts; Row 4: Active Sales. */
.dx-area-filters {
    grid-row: 1;
    grid-column: 1 / span 4;
    background: var(--dx-card);
    border: 1px solid var(--dx-card-border);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}
.dx-area-loading {
    grid-row: 2;
    grid-column: 1 / span 4;
}

.dx-kpi-applications { grid-row: 2; grid-column: 1; }
.dx-kpi-successful { grid-row: 2; grid-column: 2; }
.dx-kpi-incomplete { grid-row: 2; grid-column: 3; }
.dx-kpi-unsuccessful { grid-row: 2; grid-column: 4; }

/* Rows 3–4: chart panels arranged 2 per row, each spanning 2 of the 4 grid
   columns so they read as a balanced 2×2 quad. */
.dx-area-successful { grid-row: 3; grid-column: 1 / span 2; }
.dx-area-success-rate { grid-row: 3; grid-column: 3 / span 2; }
.dx-area-elevate { grid-row: 4; grid-column: 1 / span 2; }
.dx-area-phone { grid-row: 4; grid-column: 3 / span 2; }

/* Row 5: Active Sales spans the full width. */
.dx-area-active {
    grid-row: 5;
    grid-column: 1 / span 4;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Filter bar internals */
/* Each group stays on a single row; the outer .dx-area-filters is the only
   level allowed to wrap, so a tight viewport breaks between groups (dates
   vs. scope+refresh), never inside one. */
.dx-filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}
.dx-filter-label {
    color: var(--dx-text-dim);
    font-size: 0.85rem;
    margin: 0;
    white-space: nowrap;
}
.dx-area-filters .dx-filter-date {
    min-width: 8rem;
}
.dx-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    background: transparent;
    border: 1px solid var(--dx-card-border);
    border-radius: 0.5rem;
    color: var(--dx-text-dim);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.dx-refresh-btn:hover:not(:disabled) {
    color: var(--dx-text);
    border-color: var(--bs-gray-600);
}
.dx-refresh-btn:disabled {
    cursor: default;
    opacity: 0.6;
}
/* Developer-only hard refresh: a pill, distinguished from the icon-only
   refresh button by a dashed border to signal it is a special action. */
.dx-hard-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: transparent;
    border: 1px dashed var(--dx-card-border);
    border-radius: 999px;
    color: var(--dx-text-dim);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.dx-hard-refresh-btn:hover:not(:disabled) {
    color: var(--dx-text);
    border-color: var(--dx-orange);
}
.dx-hard-refresh-btn:disabled {
    cursor: default;
    opacity: 0.6;
}
.dx-hard-refresh-label {
    white-space: nowrap;
}
.dx-refresh-icon {
    display: inline-flex;
    width: 1.1rem;
    height: 1.1rem;
}
.dx-refresh-icon svg {
    width: 100%;
    height: 100%;
}
.dx-refresh-spinning {
    animation: dx-refresh-spin 0.9s linear infinite;
}
@keyframes dx-refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.dx-filter-scope {
    gap: 0.6rem;
}
.dx-scope-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.dx-scope-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: transparent;
    border: 1px solid var(--dx-card-border);
    border-radius: 999px;
    color: var(--dx-text-dim);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.dx-scope-btn:hover:not(:disabled) {
    color: var(--dx-text);
    border-color: var(--bs-gray-600);
}
.dx-scope-btn:disabled {
    cursor: default;
    opacity: 0.6;
}
.dx-scope-btn-active,
.dx-scope-btn-active:hover {
    background: var(--dx-orange);
    border-color: var(--dx-orange);
    color: #fff;
}
.dx-scope-icon {
    display: inline-flex;
    width: 1.1rem;
    height: 1.1rem;
}
.dx-scope-icon svg {
    width: 100%;
    height: 100%;
}
.dx-scope-label {
    white-space: nowrap;
}

/* Active Sales */
.dx-active-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dx-text);
    padding: 0 0.25rem;
}
.dx-active-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    flex: 1;
    align-content: start;
}
.dx-active-card {
    background: var(--dx-card);
    border: 1px solid var(--dx-card-border);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    /* Rendered as a <button> so a sale can be opened on click. */
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.dx-active-card:hover {
    border-color: var(--dx-orange);
}
.dx-active-card > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dx-active-card .dx-active-status {
    white-space: normal;
}
.dx-active-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dx-text);
}
.dx-active-id {
    font-size: 0.85rem;
    color: var(--dx-text-dim);
    margin-bottom: 0.2rem;
}
.dx-active-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--dx-orange);
    font-size: 0.9rem;
}
.dx-active-line-icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
}
.dx-active-status {
    color: var(--dx-text);
    font-size: 0.78rem;
}
.dx-active-agent {
    color: var(--dx-text-dim);
    font-size: 0.7rem;
}
.dx-active-updated {
    color: var(--dx-text-dim);
    font-size: 0.7rem;
}
.dx-active-empty {
    color: var(--dx-text-dim);
    font-size: 0.9rem;
    padding: 0.5rem 0.25rem;
}
.dx-active-more {
    display: flex;
    justify-content: center;
    margin-top: 0.85rem;
}
.dx-active-more-btn {
    padding: 0.5rem 1.4rem;
    background: transparent;
    border: 1px solid var(--dx-card-border);
    border-radius: 999px;
    color: var(--dx-text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.dx-active-more-btn:hover:not(:disabled) {
    color: var(--dx-text);
    border-color: var(--dx-orange);
}
.dx-active-more-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

/* The app shell caps content at 1200px (MainLayout .ci-layout) and reserves
   80px for the left menu, leaving roughly 1080px for the page. Breakpoints
   below are tuned to that effective width, not the raw viewport. */

/* Narrow (≤ ~1100px): KPIs 2-up, charts 2-up, Active Sales below as 2-col.
   Filter bar always stays full-width. */
@media (max-width: 1100px) {
    .dx-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dx-area-filters { grid-row: 1; grid-column: 1 / span 2; }
    .dx-area-loading { grid-row: 2; grid-column: 1 / span 2; }
    .dx-kpi-applications { grid-column: 1; grid-row: 2; }
    .dx-kpi-successful { grid-column: 2; grid-row: 2; }
    .dx-kpi-incomplete { grid-column: 1; grid-row: 3; }
    .dx-kpi-unsuccessful { grid-column: 2; grid-row: 3; }
    .dx-area-successful { grid-row: 4; grid-column: 1; }
    .dx-area-success-rate { grid-row: 4; grid-column: 2; }
    .dx-area-elevate { grid-row: 5; grid-column: 1; }
    .dx-area-phone { grid-row: 5; grid-column: 2; }
    .dx-area-active { grid-row: 6; grid-column: 1 / span 2; }
    .dx-active-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Very narrow (mobile / split-screen): single column throughout. */
@media (max-width: 640px) {
    .dx-dashboard {
        grid-template-columns: minmax(0, 1fr);
    }
    .dx-area-filters,
    .dx-area-loading,
    .dx-kpi-applications,
    .dx-kpi-successful,
    .dx-kpi-incomplete,
    .dx-kpi-unsuccessful,
    .dx-area-successful,
    .dx-area-success-rate,
    .dx-area-elevate,
    .dx-area-phone,
    .dx-area-active {
        grid-column: 1;
        grid-row: auto;
    }
    .dx-active-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .dx-area-filters {
        flex-direction: column;
        align-items: stretch;
    }
}