/* DCC — Dashboard */
body.app-dcc-dash .main-content--dense {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dcc-dash {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #f0f2f5;
    font-size: 13px;
    color: #1f2937;
}

/* Top bar */
.dcc-dash__top {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 10px 16px;
}
.dcc-dash__crumb {
    font-size: 13px;
    color: #8c8c8c;
}
.dcc-dash__crumb strong { color: #262626; font-weight: 600; }
.dcc-dash__tabs {
    display: flex;
    gap: 4px;
}
.dcc-dash__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #595959;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
}
.dcc-dash__tab:hover { color: #1677ff; background: #f0f5ff; }
.dcc-dash__tab.is-active {
    color: #1677ff;
    background: #e6f4ff;
    border-color: #91caff;
}
.dcc-dash__toolbar {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.dcc-dash__refresh {
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #595959;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dcc-dash__refresh:hover { color: #1677ff; border-color: #91caff; background: #f0f5ff; }
.dcc-dash__user {
    font-size: 12px;
    font-weight: 700;
    color: #262626;
}

.dcc-dash__scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* KPI cards */
.dcc-dash__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.dcc-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dcc-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}
.dcc-kpi__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}
.dcc-kpi--total .dcc-kpi__icon { background: linear-gradient(145deg, #4dabf7, #1677ff); }
.dcc-kpi--pending .dcc-kpi__icon { background: linear-gradient(145deg, #ffd666, #faad14); }
.dcc-kpi--approved .dcc-kpi__icon { background: linear-gradient(145deg, #95de64, #52c41a); }
.dcc-kpi--archived .dcc-kpi__icon { background: linear-gradient(145deg, #b37feb, #722ed1); }
.dcc-kpi--incoming .dcc-kpi__icon { background: linear-gradient(145deg, #69b1ff, #0958d9); }
.dcc-kpi--outgoing .dcc-kpi__icon { background: linear-gradient(145deg, #d3adf7, #531dab); }
.dcc-kpi--delayed .dcc-kpi__icon { background: linear-gradient(145deg, #ffa940, #d46b08); }
.dcc-kpi--expiring .dcc-kpi__icon { background: linear-gradient(145deg, #ff7875, #ff4d4f); }
.dcc-kpi--notify .dcc-kpi__icon { background: linear-gradient(145deg, #5cdbd3, #13c2c2); }
.dcc-kpi__value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: #262626;
}
.dcc-kpi__label {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #8c8c8c;
}

/* Reports overview (MDR / DIR / DOR) */
.dcc-dash__reports {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.dcc-report-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 14px 16px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dcc-report-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
    border-color: #91caff;
}
.dcc-report-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.dcc-report-card__head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #262626;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dcc-report-card__head h3 i { color: #1677ff; }
.dcc-report-card__link {
    font-size: 11px;
    font-weight: 600;
    color: #1677ff;
    text-decoration: none;
    white-space: nowrap;
}
.dcc-report-card__link:hover { text-decoration: underline; }
.dcc-report-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.dcc-report-card__chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f5f5f5;
    border: 1px solid #f0f0f0;
}
.dcc-report-card__chip--muted {
    color: #bfbfbf;
    font-size: 11px;
}
.dcc-report-card__chip-val {
    font-size: 18px;
    font-weight: 800;
    color: #262626;
    line-height: 1.1;
}
.dcc-report-card__chip-lbl {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: #8c8c8c;
}
.dcc-report-card__bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dcc-report-card__bars .dcc-bars__track { height: 6px; }
.dcc-report-card__bars .dcc-bars__head { font-size: 10px; }

/* Grid sections */
.dcc-dash__grid {
    display: grid;
    grid-template-columns: 340px 1fr 300px;
    gap: 16px;
    align-items: stretch;
}
.dcc-dash__grid--lists {
    grid-template-columns: repeat(4, 1fr);
}

.dcc-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 240px;
}
.dcc-card__title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: #262626;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dcc-card__title i { color: #1677ff; }
.dcc-card__scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.dcc-card__empty {
    margin: 24px 0;
    text-align: center;
    font-size: 12px;
    color: #bfbfbf;
}

/* Donut chart */
.dcc-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.dcc-chart__donut-wrap {
    position: relative;
    width: 170px;
    height: 170px;
}
.dcc-chart__donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.dcc-chart__donut circle {
    fill: none;
    stroke-width: 14;
    stroke-linecap: butt;
}
.dcc-chart__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.dcc-chart__center-num {
    font-size: 26px;
    font-weight: 800;
    color: #262626;
}
.dcc-chart__center-label {
    font-size: 10px;
    font-weight: 600;
    color: #8c8c8c;
}
.dcc-chart__legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.dcc-chart__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #595959;
}
.dcc-chart__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.dcc-chart__legend-count {
    margin-left: auto;
    font-weight: 700;
    color: #262626;
}

/* Status bars */
.dcc-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
.dcc-bars__row { display: flex; flex-direction: column; gap: 4px; }
.dcc-bars__head {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: #595959;
}
.dcc-bars__track {
    height: 8px;
    border-radius: 999px;
    background: #f5f5f5;
    overflow: hidden;
}
.dcc-bars__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s ease;
}

/* Review queue */
.dcc-queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    border-radius: 6px;
}
.dcc-queue-item:hover { background: #f0f5ff; }
.dcc-queue-item__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e6f4ff;
    color: #1677ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.dcc-queue-item__body { flex: 1; min-width: 0; }
.dcc-queue-item__no {
    font-size: 12px;
    font-weight: 700;
    color: #1677ff;
    font-family: ui-monospace, monospace;
}
.dcc-queue-item__title {
    font-size: 11px;
    color: #8c8c8c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcc-queue-item__meta {
    flex-shrink: 0;
    font-size: 10px;
    color: #bfbfbf;
    text-align: right;
}

/* Generic list item */
.dcc-li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid #f5f5f5;
}
.dcc-li:last-child { border-bottom: none; }
.dcc-li__dot {
    flex-shrink: 0;
    margin-top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1677ff;
}
.dcc-li__dot--green { background: #52c41a; }
.dcc-li__dot--orange { background: #faad14; }
.dcc-li__dot--purple { background: #722ed1; }
.dcc-li__body { flex: 1; min-width: 0; }
.dcc-li__main {
    font-size: 12px;
    font-weight: 600;
    color: #262626;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcc-li__sub {
    margin-top: 1px;
    font-size: 11px;
    color: #8c8c8c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcc-li__when {
    flex-shrink: 0;
    font-size: 10px;
    color: #bfbfbf;
    white-space: nowrap;
}

/* Status pill (reused look) */
.dcc-dash-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid transparent;
}
.dcc-dash-pill--review { background: #e6f4ff; color: #1677ff; border-color: #91caff; }
.dcc-dash-pill--approved { background: #f6ffed; color: #52c41a; border-color: #b7eb8f; }
.dcc-dash-pill--draft { background: #fafafa; color: #8c8c8c; border-color: #d9d9d9; }
.dcc-dash-pill--rejected { background: #fff2f0; color: #ff4d4f; border-color: #ffccc7; }
.dcc-dash-pill--issued { background: #f9f0ff; color: #722ed1; border-color: #d3adf7; }

@media (max-width: 1200px) {
    .dcc-dash__grid { grid-template-columns: 1fr 1fr; }
    .dcc-card--bars { grid-column: 1 / -1; }
    .dcc-dash__grid--lists { grid-template-columns: 1fr 1fr; }
    .dcc-dash__reports { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .dcc-dash__grid,
    .dcc-dash__grid--lists { grid-template-columns: 1fr; }
}