/* Dashboard Styles
   Loaded AFTER demo1/style.css in both hosts (ProviderAdmin App.razor; each shared role
   component's IsMobile block), so equal-specificity rules here win over the theme.

   Scoping convention: generic element/theme selectors (.card, .btn, .badge, headings…) are
   scoped under .dashboard-page so they stop leaking into every other ProviderAdmin page.
   Both hosts put .dashboard-page on the dashboard wrapper (ProviderAdmin Dashboard.razor,
   SpringFire.App Home.razor). Component-namespaced classes (.quick-action-card,
   .activity-*, .stat-card, .shift-card, .dash-icon-*, .bg-light-*) stay global — they are
   collision-safe and the shared role components rely on them on MAUI. */

/* ---- Chart/series palette — single source of truth.
   dashboard-charts.js reads these at render time; the strip's HTML legend uses the
   .text-created/.text-completed classes below. Change colours here, nowhere else. */
:root {
    --dash-series-created: #6571ff;        /* NobleUI primary (matches --bs-primary) */
    --dash-series-created-rgb: 101, 113, 255;
    --dash-series-completed: #05a34a;      /* NobleUI success */
    --dash-series-completed-rgb: 5, 163, 74;
}

.text-created { color: var(--dash-series-created); }
.text-completed { color: var(--dash-series-completed); }

/* ---- Icon size scale — replaces the ad-hoc inline font-size styles that were scattered
   across the dashboard page, the template strip, and the shared role components. */
.dash-icon-dot { font-size: .5rem; }
.dash-icon-sm { font-size: 1rem; }
.dash-icon-md { font-size: 1.5rem; }
.dash-icon-lg { font-size: 2rem; }
.dash-icon-xl { font-size: 3rem; }

/* Quick Action Cards */
.quick-action-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.quick-action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.quick-action-card .icon-wrapper {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Activity Timeline */
.activity-timeline {
    position: relative;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.activity-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 1rem;
}

.activity-content {
    flex-grow: 1;
}

.activity-content h6 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.activity-content p {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.activity-content small {
    font-size: 0.75rem;
}

/* Background utilities for activity icons.
   Primary tracks the app accent via --bs-primary-rgb (NobleUI #6571ff), not Bootstrap's
   default blue; the rest match their Bootstrap hues. */
.bg-light-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.bg-light-success {
    background-color: rgba(25, 135, 84, 0.1);
}

.bg-light-info {
    background-color: rgba(13, 202, 240, 0.1);
}

.bg-light-warning {
    background-color: rgba(255, 193, 7, 0.1);
}

.bg-light-danger {
    background-color: rgba(220, 53, 69, 0.1);
}

.bg-light-secondary {
    background-color: rgba(108, 117, 125, 0.1);
}

/* Stat Cards */
.stat-card {
    transition: all 0.2s ease;
}

.stat-card:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Shift Cards */
.shift-card {
    transition: all 0.2s ease;
}

.shift-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Avatar Placeholder */
.avatar-placeholder {
    font-weight: 600;
    font-size: 1rem;
}

/* Timeline Wrapper */
.timeline-wrapper {
    position: relative;
}

/* Responsive Grid Margins */
.grid-margin {
    margin-bottom: 1.5rem;
}

/* Icon Styling */
.bi {
    vertical-align: middle;
}

/* Page Content */
.page-content {
    padding: 1.5rem;
}

/* ===================================================================================
   Dashboard-scoped rules — apply only inside .dashboard-page (both hosts).
   These were previously unscoped and leaked to every ProviderAdmin page.
   =================================================================================== */

.dashboard-page .list-group-item-action {
    transition: all 0.2s ease;
}

.dashboard-page .list-group-item-action:hover {
    transform: translateX(5px);
}

/* Card Enhancements */
.dashboard-page .card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
    animation: fadeIn 0.3s ease-in-out;
}

.dashboard-page .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Headings use Bootstrap emphasis tokens so they follow the app's [data-bs-theme]
   toggle automatically — never hardcoded light-mode hex. */
.dashboard-page .card-title {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.dashboard-page .card-body h3 {
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.dashboard-page .card-body h4,
.dashboard-page .card-body h5 {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.dashboard-page .card-body h6 {
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* Badge Enhancements */
.dashboard-page .badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
}

/* One progress-bar height across every dashboard widget (was 8px inline on the page
   widgets and 6px inline on the strip's form cards). */
.dashboard-page .progress {
    height: .5rem;
}

/* Table Enhancements */
.dashboard-page .table-responsive {
    border-radius: 8px;
}

.dashboard-page .table-hover tbody tr {
    transition: background-color 0.2s ease;
}

.dashboard-page .table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Button Improvements */
.dashboard-page .btn {
    transition: all 0.2s ease;
}

.dashboard-page .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Alert Enhancements */
.dashboard-page .alert {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Empty State Styling */
.dashboard-page .text-center.text-muted i {
    opacity: 0.3;
}

/* Loading State */
.dashboard-page .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Keyboard focus on click-to-navigate tiles (divs with role="button") */
.dashboard-page [role="button"]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Compliance widget legend / headline links: read as plain text until hovered, then show
   they drill through to the /compliance page (colour is inherited from the status dot row). */
.dashboard-page .dash-legend-link {
    text-decoration: none;
}

.dashboard-page .dash-legend-link:hover,
.dashboard-page .dash-legend-link:focus-visible {
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .grid-margin {
        margin-bottom: 1rem;
    }

    .activity-item {
        padding: 0.75rem;
    }

    .activity-icon {
        width: 35px;
        height: 35px;
        margin-right: 0.75rem;
    }

    .dashboard-page .card-body {
        padding: 1rem;
    }
}

/* Smooth animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}