/*
 * Gnet Dashboard System
 * Shared SaaS-style layout, typography, spacing and component tokens.
 *
 * Source-of-truth scope:
 * - Dashboard-only surfaces and widgets.
 * - Keep sidebar/menu structure styling in public/assets/css/sidebar.css.
 * - Keep app-wide shell/form/table/modal rules in public/css/app.css.
 */

:root {
    --ds-space-1: 8px;
    --ds-space-2: 16px;
    --ds-space-3: 24px;
    --ds-space-4: 32px;
    --ds-space-5: 40px;

    --ds-radius-sm: 8px;
    --ds-radius-md: 16px;
    --ds-radius-lg: 24px;

    --ds-shadow-card: 0 12px 28px rgba(10, 36, 54, 0.08), 0 3px 10px rgba(10, 36, 54, 0.04);
    --ds-shadow-hover: 0 20px 36px rgba(10, 36, 54, 0.12), 0 6px 12px rgba(10, 36, 54, 0.05);

    --ds-surface: #ffffff;
    --ds-surface-soft: #f4f9ff;
    --ds-border: #d9e6f2;
    --ds-text-strong: #103149;
    --ds-text-body: #27465a;
    --ds-text-muted: #678196;
    --ds-brand: #0c5a87;
    --ds-brand-soft: #e9f3ff;
}

.dashboard-system {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ds-space-2);
    color: var(--ds-text-body);
}

.dashboard-system > section,
.dashboard-system > .ds-full,
.dashboard-system > .row,
.dashboard-system > .container-fluid {
    grid-column: span 12;
}

.ds-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ds-space-2);
}

.ds-col-12 { grid-column: span 12; }
.ds-col-8 { grid-column: span 8; }
.ds-col-6 { grid-column: span 6; }
.ds-col-4 { grid-column: span 4; }
.ds-col-3 { grid-column: span 3; }

.ds-h1,
.dashboard-system h1 {
    font-size: clamp(1.4rem, 2.1vw, 2.05rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--ds-text-strong);
}

.ds-h2,
.dashboard-system h2 {
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    line-height: 1.2;
    font-weight: 750;
    color: var(--ds-text-strong);
}

.ds-h3,
.dashboard-system h3,
.dashboard-system h5 {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ds-text-strong);
}

.ds-label,
.dashboard-system .kpi-label,
.dashboard-system .stat-label,
.dashboard-system .cust-stat-label,
.dashboard-system .action-group {
    font-size: 0.68rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    font-weight: 700;
}

.ds-kpi,
.dashboard-system .kpi-value,
.dashboard-system .stat-value,
.dashboard-system .tile strong,
.dashboard-system .cust-stat-value {
    font-size: clamp(1.35rem, 2vw, 1.95rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ds-text-strong);
}

.ds-card,
.dashboard-system .panel,
.dashboard-system .tile,
.dashboard-system .cust-panel,
.dashboard-system .card,
.dashboard-system .stat-card,
.dashboard-system .cust-stat-card,
.dashboard-system .action-card,
.dashboard-system .cust-qa-btn {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-card);
}

.ds-card:hover,
.dashboard-system .panel:hover,
.dashboard-system .tile:hover,
.dashboard-system .card:hover,
.dashboard-system .action-card:hover,
.dashboard-system .cust-qa-btn:hover,
.dashboard-system .stat-card:hover,
.dashboard-system .cust-stat-card:hover {
    box-shadow: var(--ds-shadow-hover);
}

.ds-card-head,
.dashboard-system .panel-head,
.dashboard-system .panel-header,
.dashboard-system .cust-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-1);
}

.ds-card-head,
.ds-card-body,
.ds-card-footer {
    padding: var(--ds-space-2);
}

.ds-card-head {
    border-bottom: 1px solid #eaf2f8;
    background: #f8fbff;
}

.ds-card-footer {
    border-top: 1px solid #eaf2f8;
    background: #fbfdff;
}

.dashboard-system .panel,
.dashboard-system .tile,
.dashboard-system .stat-card,
.dashboard-system .cust-panel,
.dashboard-system .card {
    padding: var(--ds-space-2);
}

.dashboard-system .cust-panel .cust-panel-body,
.dashboard-system .panel .panel-body,
.dashboard-system .card .card-body {
    padding-top: var(--ds-space-2);
}

.dashboard-system .kpi-grid,
.dashboard-system .stats-grid,
.dashboard-system .stat-grid,
.dashboard-system .cust-stat-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ds-space-2);
}

.dashboard-system .kpi-grid > *,
.dashboard-system .stats-grid > *,
.dashboard-system .stat-grid > *,
.dashboard-system .cust-stat-grid > * {
    grid-column: span 3;
}

.dashboard-system .panel-row,
.dashboard-system .bottom-grid,
.dashboard-system .grid-2,
.dashboard-system .row.g-3,
.dashboard-system .row.g-4 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ds-space-2);
}

.dashboard-system .panel-row > :first-child,
.dashboard-system .bottom-grid > :first-child,
.dashboard-system .grid-2 > :first-child,
.dashboard-system .row.g-3 > .col-lg-8,
.dashboard-system .row.g-4 > .col-md-6:first-child {
    grid-column: span 8;
}

.dashboard-system .panel-row > :nth-child(2),
.dashboard-system .bottom-grid > :nth-child(2),
.dashboard-system .grid-2 > :nth-child(2),
.dashboard-system .row.g-3 > .col-lg-4,
.dashboard-system .row.g-4 > .col-md-6:last-child {
    grid-column: span 4;
}

/* Prevent implicit 1-column collapse when a bottom grid or grid-2 has 3+ children. */
.dashboard-system .bottom-grid > :nth-child(n + 3),
.dashboard-system .grid-2 > :nth-child(n + 3) {
    grid-column: span 4;
}

.dashboard-system .row.g-3 > .col-lg-7 {
    grid-column: span 8;
}

.dashboard-system .row.g-3 > .col-lg-5 {
    grid-column: span 4;
}

.dashboard-system .action-grid,
.dashboard-system .cust-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ds-space-1);
}

.dashboard-system .action-card,
.dashboard-system .cust-qa-btn {
    min-height: 130px;
    align-content: start;
}

.ds-quick-groups {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ds-space-2);
}

.ds-quick-group {
    grid-column: span 3;
    min-width: 140px;
    background: var(--ds-surface-soft);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-2);
}

.ds-quick-group h4 {
    margin: 0 0 var(--ds-space-1);
    font-size: 0.9rem;
    color: var(--ds-text-strong);
}

.ds-quick-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-1);
}

.ds-quick-tile {
    min-height: 92px;
    min-width: 100%;
    border-radius: 12px;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    display: grid;
    gap: 6px;
    padding: 12px;
    text-decoration: none;
    color: var(--ds-text-body);
}

.ds-quick-tile:hover {
    box-shadow: var(--ds-shadow-hover);
    border-color: #b8cede;
    transform: translateY(-1px);
}

/* Keep legacy .quick-actions rules in app.css from reflowing dashboard cards. */
.dashboard-system .quick-actions {
    display: block;
}

.ds-quick-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-brand-soft);
    color: var(--ds-brand);
}

.dashboard-system .chart-shell,
.dashboard-system #powerChart {
    min-height: 190px !important;
    max-height: 220px;
}

.dashboard-system .chart-bars {
    min-height: 180px !important;
}

.dashboard-system .chart-summary,
.dashboard-system .chart-insights {
    margin-top: var(--ds-space-1);
}

.dashboard-system .btn,
.dashboard-system button,
.dashboard-system .refresh-btn,
.dashboard-system .period-select {
    border-radius: var(--ds-radius-sm);
}

@media (max-width: 1280px) {
    .ds-quick-group {
        grid-column: span 6;
    }

    .dashboard-system .action-grid,
    .dashboard-system .cust-quick-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .ds-col-8,
    .ds-col-6,
    .ds-col-4,
    .ds-col-3,
    .ds-quick-group,
    .dashboard-system .kpi-grid > *,
    .dashboard-system .stats-grid > *,
    .dashboard-system .stat-grid > *,
    .dashboard-system .cust-stat-grid > *,
    .dashboard-system .panel-row > :first-child,
    .dashboard-system .panel-row > :nth-child(2),
    .dashboard-system .bottom-grid > :first-child,
    .dashboard-system .bottom-grid > :nth-child(2),
    .dashboard-system .grid-2 > :first-child,
    .dashboard-system .grid-2 > :nth-child(2),
    .dashboard-system .row.g-3 > .col-lg-8,
    .dashboard-system .row.g-3 > .col-lg-4,
    .dashboard-system .row.g-3 > .col-lg-7,
    .dashboard-system .row.g-3 > .col-lg-5,
    .dashboard-system .row.g-4 > .col-md-6:first-child,
    .dashboard-system .row.g-4 > .col-md-6:last-child {
        grid-column: span 12;
    }

    .dashboard-system .action-grid,
    .dashboard-system .cust-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-system .bottom-grid > :nth-child(n + 3),
    .dashboard-system .grid-2 > :nth-child(n + 3) {
        grid-column: span 12;
    }
}

@media (max-width: 640px) {
    .dashboard-system .action-grid,
    .dashboard-system .cust-quick-actions {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------- */
/* Final SaaS overrides: structural, hierarchy, states, and accessibility     */
/* -------------------------------------------------------------------------- */

.dashboard-content {
    padding: 24px !important;
}

.dashboard-system {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0;
    gap: var(--ds-space-2) !important;
}

.dashboard-system > section {
    margin: 0 !important;
}

.dashboard-system .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: var(--ds-space-2) !important;
}

.dashboard-system .kpi-grid > * {
    grid-column: span 3 !important;
    min-height: 168px;
}

.dashboard-system .panel,
.dashboard-system .tile,
.dashboard-system .kpi-card,
.dashboard-system .recent-feed,
.dashboard-system .stat-item,
.dashboard-system .context-card {
    border-radius: var(--ds-radius-md) !important;
}

.dashboard-system .kpi-card {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 16px !important;
}

.dashboard-system .kpi-label,
.dashboard-system .stat-label,
.dashboard-system .context-card span,
.dashboard-system .chart-summary span,
.dashboard-system .feed-meta,
.dashboard-system .feed-time,
.dashboard-system .kpi-sub,
.dashboard-system .hero-metric span {
    font-size: 0.76rem !important;
    color: #546f83 !important;
}

.dashboard-system .kpi-value,
.dashboard-system .stat-value,
.dashboard-system .tile strong,
.dashboard-system .hero-metric strong {
    color: #0e2f45 !important;
    line-height: 1.06;
}

.dashboard-system .hero-row {
    padding: 20px 24px !important;
    border-radius: var(--ds-radius-lg) !important;
    align-items: stretch !important;
}

.dashboard-system .hero-metrics {
    align-content: stretch;
}

.dashboard-system .hero-metric {
    min-height: 92px;
    display: grid;
    align-content: space-between;
}

.dashboard-system .utility-banner {
    padding: 12px 16px !important;
    border-radius: 12px !important;
}

.dashboard-system .utility-banner div {
    gap: 16px !important;
}

.dashboard-system .chart-shell {
    padding: 12px 12px 8px !important;
    min-height: 210px !important;
}

.dashboard-system .chart-bars {
    min-height: 170px !important;
    align-items: flex-end;
}

.dashboard-system .chart-col.is-empty .chart-bar {
    opacity: 0.25;
}

.dashboard-system .chart-empty-state {
    display: grid;
    place-items: center;
    min-height: 168px;
    border: 1px dashed #d5e4f2;
    border-radius: 12px;
    color: #688196;
    font-size: 0.82rem;
    background: #f8fbff;
    text-align: center;
    padding: 12px;
}

.dashboard-system .chart-insight-chip {
    font-size: 0.78rem !important;
}

.dashboard-system .panel-row,
.dashboard-system .bottom-grid,
.dashboard-system .grid-2 {
    align-items: start;
}

.dashboard-system .bottom-grid > * {
    min-height: 100%;
}

.dashboard-system .feed-list,
.dashboard-system .recent-feed ul {
    gap: 8px !important;
}

.dashboard-system .recent-feed li {
    min-height: 58px;
}

.dashboard-system .recent-feed li:nth-child(even) {
    background: #f7fbff;
}

.dashboard-system .panel-link {
    font-size: 0.82rem;
    font-weight: 700;
}

.dashboard-system .ds-quick-groups {
    gap: 12px;
}

.dashboard-system .quick-actions .ds-card-body {
    display: block;
}

.dashboard-system .ds-quick-group {
    min-height: 100%;
}

.dashboard-system .ds-quick-tiles {
    gap: 8px;
}

.dashboard-system .ds-quick-tile {
    min-height: 88px;
}

.dashboard-system .ds-card-subtitle {
    margin: 4px 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #607b8f;
}

.dashboard-system :is(button, a, input, select, textarea):focus-visible,
.header-notif-btn:focus-visible,
.header-notif-panel button:focus-visible,
.sidebar-menu a:focus-visible,
.isp-nav-link:focus-visible {
    outline: 3px solid rgba(12, 90, 135, 0.28);
    outline-offset: 2px;
}

.dashboard-system .btn,
.dashboard-system button,
.dashboard-system .period-select,
.dashboard-system .refresh-btn {
    min-height: 36px;
    font-weight: 600;
}

.dashboard-system .btn:disabled,
.dashboard-system button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Notification dropdown boundary and stacking fixes */
.header-notifications {
    position: relative;
    margin-right: 8px;
}

.header-notif-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #d6e3ef;
    background: #ffffff;
    color: #4a6478;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-notif-btn:hover {
    background: #f4f9ff;
    color: #134a70;
}

.header-notif-badge {
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.67rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.header-notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, calc(100vw - 24px));
    max-height: min(60vh, 480px);
    overflow: auto;
    border-radius: 14px;
    border: 1px solid #d8e6f1;
    background: #fff;
    box-shadow: 0 20px 42px rgba(11, 35, 55, 0.16);
    z-index: 1200;
    display: none;
}

.header-notif-panel.open {
    display: block;
}

.header-notif-panel-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e7f0f8;
    background: #f8fbff;
}

.header-notif-panel-head button {
    border: 1px solid #d7e6f4;
    background: #fff;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.75rem;
    color: #315870;
}

.header-notif-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: grid;
    gap: 8px;
}

.header-notif-item {
    border: 1px solid #e2edf6;
    border-radius: 10px;
    background: #fbfdff;
    padding: 8px 10px;
    display: grid;
    gap: 2px;
}

.header-notif-item strong {
    font-size: 0.82rem;
    color: #103149;
}

.header-notif-item p {
    margin: 0;
    font-size: 0.78rem;
    color: #4b667b;
}

.header-notif-item span {
    font-size: 0.72rem;
    color: #70899a;
}

.header-notif-empty {
    margin: 0;
    padding: 12px;
    text-align: center;
    color: #6f8798;
    font-size: 0.8rem;
}

@media (max-width: 1280px) {
    .dashboard-content {
        padding: 20px !important;
    }

    .dashboard-system .kpi-grid > * {
        grid-column: span 4 !important;
    }
}

@media (max-width: 992px) {
    .dashboard-content {
        padding: 16px !important;
    }

    .dashboard-system {
        gap: 12px !important;
    }

    .dashboard-system .kpi-grid > * {
        grid-column: span 6 !important;
        min-height: 150px;
    }

    .dashboard-system .hero-row {
        padding: 16px !important;
    }

    .header-notif-panel {
        right: -8px;
        width: min(340px, calc(100vw - 20px));
    }
}

@media (max-width: 640px) {
    .dashboard-content {
        padding: 12px !important;
    }

    .dashboard-system .kpi-grid > * {
        grid-column: span 12 !important;
    }

    .dashboard-system .hero-row,
    .dashboard-system .utility-banner {
        padding: 12px !important;
    }

    .header-notifications {
        margin-right: 4px;
    }

    .header-notif-panel {
        left: 0;
        right: auto;
        width: min(360px, calc(100vw - 16px));
    }
}

/* Unified recent-list and table readability layer */
.dashboard-system .feed-list,
.dashboard-system .rank-list,
.dashboard-system .activity-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.dashboard-system .feed-row,
.dashboard-system .feed-list li,
.dashboard-system .rank-list li,
.dashboard-system .activity-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    border: 1px solid #deebf5;
    border-radius: 12px;
    background: #fbfdff;
    padding: 10px 12px;
}

.dashboard-system .feed-list li:nth-child(even),
.dashboard-system .rank-list li:nth-child(even),
.dashboard-system .activity-list li:nth-child(even) {
    background: #f6fbff;
}

.dashboard-system .feed-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.dashboard-system .feed-main strong {
    color: #103149;
    font-size: 0.86rem;
    line-height: 1.25;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-system .feed-meta,
.dashboard-system .feed-time {
    color: #688196;
    font-size: 0.75rem;
    line-height: 1.35;
}

.dashboard-system .feed-side {
    display: grid;
    justify-items: end;
    gap: 4px;
    min-width: 110px;
}

.dashboard-system .feed-amount,
.dashboard-system .rank-list em {
    font-style: normal;
    color: #0f5132;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-system .feed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    border-radius: 999px;
    border: 1px solid #d3e3f1;
    background: #eff6ff;
    color: #174b73;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0 8px;
}

.dashboard-system .feed-badge-success,
.dashboard-system .feed-badge-active,
.dashboard-system .feed-badge-paid {
    border-color: #c7ebd6;
    background: #eafaf1;
    color: #0f5132;
}

.dashboard-system .feed-badge-pending,
.dashboard-system .feed-badge-warning,
.dashboard-system .feed-badge-overdue {
    border-color: #f4dfaf;
    background: #fff8e6;
    color: #7a4f00;
}

.dashboard-system .feed-badge-suspended,
.dashboard-system .feed-badge-failed,
.dashboard-system .feed-badge-cancelled {
    border-color: #f2c7c7;
    background: #fff1f1;
    color: #8b1e1e;
}

.dashboard-system .panel-head .panel-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f4f79;
    text-decoration: none;
}

.dashboard-system .panel-head .panel-link:hover {
    text-decoration: underline;
}

.dashboard-system .ds-table-wrap {
    border-radius: 12px;
    overflow: auto;
}

.dashboard-system .ds-data-table {
    margin: 0 !important;
    width: 100%;
    border-collapse: collapse;
}

.dashboard-system .ds-data-table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #5d788d;
    background: #f4f9ff;
    border-bottom: 1px solid #dbe8f4;
    white-space: nowrap;
}

.dashboard-system .ds-data-table tbody td {
    vertical-align: middle;
    color: #12384f;
    font-size: 0.82rem;
    border-bottom: 1px solid #e8f1f8;
}

.dashboard-system .ds-data-table tbody tr:nth-child(even) {
    background: #fbfdff;
}

.dashboard-system .ds-data-table tbody tr:hover {
    background: #f1f8ff;
}

@media (max-width: 900px) {
    .dashboard-system .feed-row,
    .dashboard-system .feed-list li,
    .dashboard-system .rank-list li,
    .dashboard-system .activity-list li {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .dashboard-system .feed-main strong {
        white-space: normal;
    }

    .dashboard-system .feed-side {
        justify-items: start;
        min-width: 0;
    }
}

/* -------------------------------------------------------------------------- */
/* Accessibility layer (Phase 4)                                               */
/* -------------------------------------------------------------------------- */

/* Skip-to-content link */
.skip-to-content {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 9999;
    padding: 10px 18px;
    background: #0c3c5e;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 0 0 10px 10px;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid #4da6e0;
    outline-offset: 0;
}

/* Screen-reader-only utility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Ensure muted text meets WCAG AA contrast (4.5:1) */
.dashboard-system .kpi-label,
.dashboard-system .stat-label,
.dashboard-system .feed-meta,
.dashboard-system .feed-time,
.dashboard-system .kpi-sub,
.dashboard-system .ds-card-subtitle {
    color: #4f6c7f !important;
}

/* Trend arrows: remove emoji-only semantics – wrap in accessible span */
.dashboard-system .kpi-trend {
    font-size: 0.78rem !important;
}

/* Focused interactive dashboard elements get a visible ring */
.dashboard-system a:focus-visible,
.dashboard-system button:focus-visible,
.dashboard-system select:focus-visible,
.dashboard-system input:focus-visible {
    outline: 3px solid #4da6e0 !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}

/* Alert and status banners */
.dashboard-system .alert-banner {
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.83rem;
    font-weight: 500;
    margin-top: 12px;
}

.dashboard-system .alert-banner.alert-danger {
    background: #fff0f0;
    border: 1px solid #f2baba;
    color: #7e1c1c;
}

.dashboard-system .alert-banner.alert-soft {
    background: #f0f7ff;
    border: 1px solid #bcd5ee;
    color: #1a4263;
}

.dashboard-system .alert-banner i {
    flex-shrink: 0;
    font-size: 1rem;
}

/* Feed badge color contrast enforcement */
.dashboard-system .feed-badge {
    color: #1a4a68 !important;
}

.dashboard-system .feed-badge-success,
.dashboard-system .feed-badge-active,
.dashboard-system .feed-badge-paid {
    color: #0a4027 !important;
}

.dashboard-system .feed-badge-pending,
.dashboard-system .feed-badge-warning,
.dashboard-system .feed-badge-overdue {
    color: #5f3700 !important;
}

.dashboard-system .feed-badge-suspended,
.dashboard-system .feed-badge-failed,
.dashboard-system .feed-badge-cancelled {
    color: #6b1414 !important;
}

/* Disable all transition/animation for reduce-motion users */
@media (prefers-reduced-motion: reduce) {
    .skip-to-content {
        transition: none;
    }

    .dashboard-system *,
    .ds-quick-tile,
    .isp-nav-link,
    .sidebar-menu a {
        transition: none !important;
        animation: none !important;
    }

    .gnet-dashboard > section,
    .gnet-admin-dashboard > section {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* High-contrast media query: ensure borders visible */
@media (forced-colors: active) {
    .ds-card,
    .dashboard-system .panel,
    .dashboard-system .tile,
    .feed-row,
    .feed-badge,
    .ds-quick-tile {
        border: 1px solid ButtonText !important;
    }

    .skip-to-content {
        background: ButtonText;
        color: ButtonFace;
    }
}

/* -------------------------------------------------------------------------- */
/* Modern dashboard snapshots and activity feed                                */
/* -------------------------------------------------------------------------- */

.dashboard-system .summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--ds-space-2);
}

.dashboard-system .summary-card {
    padding: 18px;
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-border);
    background: linear-gradient(180deg, var(--ds-surface) 0%, var(--ds-surface-soft) 100%);
    box-shadow: var(--ds-shadow-card);
    display: grid;
    gap: 6px;
    min-height: 146px;
}

.dashboard-system .summary-card strong {
    font-size: clamp(1.2rem, 2vw, 2rem);
    line-height: 1;
    color: var(--ds-text-strong);
}

.dashboard-system .summary-card p {
    margin: 0;
    font-size: 0.96rem;
    color: var(--ds-text-body);
    font-weight: 700;
}

.dashboard-system .summary-card small {
    color: var(--ds-text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.dashboard-system .summary-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--ds-text-muted);
}

.dashboard-system .summary-card-customers {
    border-top: 4px solid #0ea5e9;
}

.dashboard-system .summary-card-finance {
    border-top: 4px solid #16a34a;
}

.dashboard-system .summary-card-operations {
    border-top: 4px solid #f59e0b;
}

.dashboard-system .summary-card-network {
    border-top: 4px solid #2563eb;
}

.dashboard-system .summary-card-employees {
    border-top: 4px solid #7c3aed;
}

.dashboard-system .activity-feed-panel {
    display: grid;
    gap: var(--ds-space-2);
}

.dashboard-system .activity-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.dashboard-system .activity-feed-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
}

.dashboard-system .activity-feed-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dashboard-system .activity-feed-main strong {
    font-size: 0.95rem;
    color: var(--ds-text-strong);
}

.dashboard-system .activity-feed-main span {
    color: var(--ds-text-body);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-system .activity-feed-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: right;
}

.dashboard-system .activity-feed-meta em,
.dashboard-system .activity-feed-meta strong,
.dashboard-system .activity-feed-meta small {
    font-style: normal;
    font-size: 0.8rem;
    color: var(--ds-text-muted);
}

.dashboard-system .activity-feed-meta strong {
    color: var(--ds-text-strong);
}

.dashboard-system .activity-feed-customers {
    box-shadow: inset 3px 0 0 #0ea5e9;
}

.dashboard-system .activity-feed-payments {
    box-shadow: inset 3px 0 0 #16a34a;
}

.dashboard-system .activity-feed-tickets {
    box-shadow: inset 3px 0 0 #f59e0b;
}

.dashboard-system .activity-feed-work_orders,
.dashboard-system .activity-feed-work-orders {
    box-shadow: inset 3px 0 0 #7c3aed;
}

.dashboard-system .activity-feed-network_events,
.dashboard-system .activity-feed-network-events {
    box-shadow: inset 3px 0 0 #2563eb;
}

@media (max-width: 1280px) {
    .dashboard-system .summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .dashboard-system .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-system .summary-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-system .activity-feed-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-system .activity-feed-meta {
        justify-content: flex-start;
        text-align: left;
    }
}

html[data-theme='dark'] .dashboard-system .summary-card,
html[data-theme='dark'] .dashboard-system .activity-feed-item {
    background: var(--gnet-bg-elevated);
    border-color: var(--gnet-border);
}

html[data-theme='dark'] .dashboard-system .activity-feed-main span,
html[data-theme='dark'] .dashboard-system .summary-card small,
html[data-theme='dark'] .dashboard-system .summary-eyebrow,
html[data-theme='dark'] .dashboard-system .activity-feed-meta em,
html[data-theme='dark'] .dashboard-system .activity-feed-meta strong,
html[data-theme='dark'] .dashboard-system .activity-feed-meta small {
    color: var(--gnet-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Reference-inspired polish: dense metrics and cleaner section rhythm         */
/* -------------------------------------------------------------------------- */

.dashboard-system .hero-row {
    border: 1px solid color-mix(in srgb, var(--ds-border) 88%, transparent);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(11, 35, 55, 0.05);
}

.dashboard-system .summary-card {
    min-height: 132px;
    padding: 14px 14px 12px;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.dashboard-system .summary-card::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ds-brand) 14%, #ffffff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-brand) 28%, transparent);
}

.dashboard-system .summary-card strong {
    font-size: clamp(1.1rem, 1.8vw, 1.7rem);
}

.dashboard-system .summary-card p {
    font-size: 0.85rem;
    font-weight: 700;
}

.dashboard-system .summary-card small {
    font-size: 0.75rem;
}

.dashboard-system .panel {
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--ds-border) 88%, transparent);
}

.dashboard-system .panel-head {
    padding: 10px 12px;
    border-bottom: 1px solid #e8f1fa;
    background: linear-gradient(180deg, #f9fcff 0%, #f5faff 100%);
    border-radius: 13px 13px 0 0;
}

.dashboard-system .panel-head h3 {
    font-size: 0.92rem;
}

.dashboard-system .panel-head p {
    font-size: 0.76rem;
    margin: 0;
}

.dashboard-system .activity-feed-item {
    border-radius: 12px;
    padding: 11px 12px;
}

.dashboard-system .activity-feed-main strong {
    font-size: 0.84rem;
}

.dashboard-system .activity-feed-main span {
    font-size: 0.82rem;
}

.dashboard-system .activity-feed-meta em,
.dashboard-system .activity-feed-meta strong,
.dashboard-system .activity-feed-meta small {
    font-size: 0.72rem;
}

.dashboard-system .kpi-card {
    min-height: 146px;
    border-radius: 12px;
    padding: 12px;
}

.dashboard-system .kpi-label {
    font-size: 0.66rem;
}

.dashboard-system .kpi-value {
    font-size: clamp(1.1rem, 1.8vw, 1.58rem);
}

.dashboard-system .kpi-sub {
    font-size: 0.74rem;
}

html[data-theme='dark'] .dashboard-system .hero-row,
html[data-theme='dark'] .dashboard-system .panel-head {
    background: var(--gnet-bg-soft);
    border-color: var(--gnet-border);
}

html[data-theme='dark'] .dashboard-system .summary-card::after {
    background: color-mix(in srgb, var(--gnet-brand, #53c5f5) 24%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gnet-brand, #53c5f5) 38%, transparent);
}

/* -------------------------------------------------------------------------- */
/* Comparison-inspired refinement layer 2                                     */
/* -------------------------------------------------------------------------- */

.dashboard-system .kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid #d8e7f6;
    background: #f5faff;
    padding: 0 8px;
    font-size: 0.7rem !important;
    letter-spacing: 0.01em;
    font-weight: 700;
}

.dashboard-system .kpi-trend.trend-up {
    background: #ecfdf3;
    border-color: #bde7cc;
    color: #10663c !important;
}

.dashboard-system .kpi-trend.trend-down {
    background: #fff3f3;
    border-color: #f1c3c3;
    color: #8b2323 !important;
}

.dashboard-system .activity-feed-list {
    border: 1px solid #e3edf7;
    border-radius: 12px;
    overflow: hidden;
    gap: 0;
}

.dashboard-system .activity-feed-item {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #e8f1fa;
    background: #ffffff;
    padding: 10px 12px;
    min-height: 52px;
}

.dashboard-system .activity-feed-item:last-child {
    border-bottom: 0;
}

.dashboard-system .activity-feed-item:nth-child(even) {
    background: #f8fbff;
}

.dashboard-system .activity-feed-main {
    gap: 1px;
}

.dashboard-system .activity-feed-main strong {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.69rem;
    color: #5a7488;
}

.dashboard-system .activity-feed-main span {
    font-size: 0.84rem;
    color: #163a52;
}

.dashboard-system .activity-feed-meta {
    gap: 8px;
}

.dashboard-system .activity-feed-meta em,
.dashboard-system .activity-feed-meta strong,
.dashboard-system .activity-feed-meta small {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    border-radius: 999px;
    padding: 0 7px;
    background: #eef5fc;
    border: 1px solid #d9e7f3;
    font-size: 0.68rem;
}

.dashboard-system .activity-feed-meta strong {
    background: #eefaf3;
    border-color: #cde8d5;
    color: #0f5132;
}

.dashboard-system .kpi-card,
.dashboard-system .summary-card,
.dashboard-system .panel {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-system .kpi-card:hover,
.dashboard-system .summary-card:hover,
.dashboard-system .panel:hover {
    transform: translateY(-1px);
}

html[data-theme='dark'] .dashboard-system .kpi-trend {
    background: color-mix(in srgb, var(--gnet-bg-soft) 92%, transparent);
    border-color: var(--gnet-border);
}

html[data-theme='dark'] .dashboard-system .kpi-trend.trend-up {
    background: color-mix(in srgb, #0f5132 35%, var(--gnet-bg-elevated));
    border-color: color-mix(in srgb, #0f5132 50%, var(--gnet-border));
}

html[data-theme='dark'] .dashboard-system .kpi-trend.trend-down {
    background: color-mix(in srgb, #7f1d1d 35%, var(--gnet-bg-elevated));
    border-color: color-mix(in srgb, #7f1d1d 50%, var(--gnet-border));
}

html[data-theme='dark'] .dashboard-system .activity-feed-list {
    border-color: var(--gnet-border);
}

html[data-theme='dark'] .dashboard-system .activity-feed-item {
    border-bottom-color: var(--gnet-border);
}

html[data-theme='dark'] .dashboard-system .activity-feed-item:nth-child(even) {
    background: color-mix(in srgb, var(--gnet-bg-soft) 70%, transparent);
}

html[data-theme='dark'] .dashboard-system .activity-feed-main strong {
    color: var(--gnet-text-muted);
}

html[data-theme='dark'] .dashboard-system .activity-feed-main span {
    color: var(--gnet-text);
}

html[data-theme='dark'] .dashboard-system .activity-feed-meta em,
html[data-theme='dark'] .dashboard-system .activity-feed-meta strong,
html[data-theme='dark'] .dashboard-system .activity-feed-meta small {
    background: var(--gnet-bg-soft);
    border-color: var(--gnet-border);
    color: var(--gnet-text-muted);
}

@media (max-width: 640px) {
    .dashboard-system .hero-row {
        padding: 10px !important;
    }

    .dashboard-system .summary-card {
        min-height: 116px;
        padding: 10px 10px 9px;
    }

    .dashboard-system .summary-card strong {
        font-size: 1.05rem;
    }

    .dashboard-system .summary-card p {
        font-size: 0.8rem;
    }

    .dashboard-system .summary-card small {
        font-size: 0.7rem;
    }

    .dashboard-system .kpi-card {
        min-height: 132px;
        padding: 10px;
    }

    .dashboard-system .kpi-value {
        font-size: 1.1rem;
    }

    .dashboard-system .activity-feed-item {
        padding: 9px 10px;
    }
}

/* -------------------------------------------------------------------------- */
/* Comparison-inspired refinement layer 3                                     */
/* -------------------------------------------------------------------------- */

.dashboard-system .ops-micro-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-system .ops-micro-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid #dfeaf4;
    background: #f8fbff;
    color: #4f6b80;
}

.dashboard-system .ops-micro-item small {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #688196;
}

.dashboard-system .ops-micro-item strong {
    margin-left: auto;
    font-size: 0.78rem;
    color: #103149;
    white-space: nowrap;
}

.dashboard-system .ops-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dashboard-system .ops-dot-good {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.dashboard-system .ops-dot-warn {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.dashboard-system .ops-dot-danger {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.dashboard-system .panel-head .panel-link,
.dashboard-system .action-card,
.dashboard-system .ds-quick-tile,
.dashboard-system .btn,
.dashboard-system button,
.dashboard-system .period-select,
.dashboard-system .refresh-btn {
    min-height: 32px;
}

.dashboard-system .panel-head .panel-link {
    border: 1px solid #dce8f3;
    border-radius: 999px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    background: #f5faff;
}

.dashboard-system .panel-head .panel-link:hover {
    background: #ebf5ff;
    border-color: #c8dff2;
}

html[data-theme='dark'] .dashboard-system .ops-micro-item {
    background: var(--gnet-bg-soft);
    border-color: var(--gnet-border);
}

html[data-theme='dark'] .dashboard-system .ops-micro-item small,
html[data-theme='dark'] .dashboard-system .ops-micro-item strong {
    color: var(--gnet-text-muted);
}

html[data-theme='dark'] .dashboard-system .panel-head .panel-link {
    background: var(--gnet-bg-soft);
    border-color: var(--gnet-border);
    color: var(--gnet-text);
}

@media (max-width: 992px) {
    .dashboard-system .ops-micro-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-system .ops-micro-legend {
        grid-template-columns: 1fr;
    }

    .dashboard-system .ops-micro-item {
        min-height: 34px;
        padding: 6px 9px;
    }
}