/* Analytics Dashboard Styles
 * Extracted from inline styles and refactored to use design system
 * Uses Tailwind utilities where possible, custom CSS only where needed
 */

/* Chart Canvas Sizing - Custom CSS needed for Chart.js */
.analytics-chart-canvas {
    width: 100% !important;
    max-width: 100%;
    height: 100% !important;
    max-height: 100%;
    object-fit: contain;
}

/* Alert Item Severity Border Accent - Custom CSS for left border styling */
.alert-item-critical {
    border-left: 4px solid #dc2626;
}

.alert-item-high {
    border-left: 4px solid #f97316;
}

.alert-item-medium {
    border-left: 4px solid #fbbf24;
}

.alert-item-low {
    border-left: 4px solid #3b82f6;
}

/* Collector Item Status Border Accent - Custom CSS for left border styling */
.collector-item-active {
    border-left: 4px solid #10b981;
}

.collector-item-inactive {
    border-left: 4px solid #6b7280;
}

.collector-item-error {
    border-left: 4px solid #dc2626;
}

/* Error Alert Styles - Custom styling for error messages */
.analytics-error-alert {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c00;
    padding: 15px;
    border-radius: var(--themes-border-border-radius-rounded-sm);
    margin-bottom: 20px;
}

/* Loading State - Custom styling for HTMX loading states */
.analytics-loading {
    text-align: center;
    color: #6b7280;
    padding: 40px 20px;
    font-size: 14px;
}

/* Smooth Transitions - Apply to interactive elements */
.analytics-transition {
    transition: all 0.2s ease;
}

/* Hover Effects for Cards - Subtle lift on hover */
.analytics-card-hover:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Chart Container - Ensure proper containment */
.chart-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.chart-container canvas {
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

/* Chart Container Responsive Sizing */
@media (max-width: 768px) {
    .chart-container {
        height: 250px !important;
    }
}

/* Grid Gap Utilities - Consistent with design system spacing */
.analytics-grid-gap {
    gap: var(--primitives-spacing-5);
}

/* Widget Spacing - Consistent bottom margin */
.analytics-widget-spacing {
    margin-bottom: 30px;
}

/* No Data States - Centered empty state styling */
.analytics-no-data {
    text-align: center;
    color: var(--fg-4);
    font-family: var(--font-base);
    font-size: var(--fs-base);
    padding: var(--sp-5);
}

/* ─── Card subtitle (the "Last 30 days" / "Last 7 days" line under each
   chart-card title). Was Tailwind text-sm text-gray-500 — bumped to
   default body size (14px) with secondary-fg so it reads cleanly next
   to the 18px Ubuntu Sans panel title. */
.analytics-card-subtitle {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    color: var(--fg-4);
    line-height: var(--lh-base);
    margin: 0;
}

/* ─── Info / warning banners (dev-mode + fallback-data) — design-system
   card chrome (12px radius, 1px border, .04 shadow) with semantic
   variant colours. Replaces the bespoke bg-blue-50/bg-yellow-50 Tailwind
   stack. */
.analytics-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--colors-border-border-base, #e5e7eb);
    background-color: #ffffff;
    box-shadow: 0 1px 0.5px 0.05px rgba(29, 41, 61, 0.02);
}

.analytics-banner-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.analytics-banner-body {
    flex: 1;
    min-width: 0;
}

.analytics-banner-title {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--fg-1);
    margin: 0 0 var(--sp-1) 0;
}

.analytics-banner-body p {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--fg-3);
    margin: 0;
}

.analytics-banner-body p + p {
    margin-top: var(--sp-1);
}

.analytics-banner-info {
    background-color: #eff6ff; /* blue-50 */
    border-color: #bfdbfe; /* blue-200 */
}

.analytics-banner-info .analytics-banner-icon {
    color: #2563eb; /* blue-600 */
}

.analytics-banner-warning {
    background-color: #fffbeb; /* amber-50 */
    border-color: #fde68a; /* amber-200 */
}

.analytics-banner-warning .analytics-banner-icon {
    color: #d97706; /* amber-600 */
}

/* ─── Recent Alerts list (.analytics-alert-*). Row chrome reads as a
   tinted neutral card; type scale matches the design system (14px body,
   12px meta — no Tailwind text-xs on the content). */
.analytics-alert-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.analytics-alert-item {
    background-color: var(--bg-2, #f9fafb);
    border: 1px solid var(--colors-border-border-base, #e5e7eb);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    transition:
        background-color var(--t-fast),
        box-shadow var(--t-fast);
}

.analytics-alert-item:hover {
    background-color: #f3f4f6;
    box-shadow: var(--shadow-sm);
}

.analytics-alert-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}

/* Recent-alerts LAF + device links use the design-system patterns
   .link-glossary (book-open prefix) and .link-internal (arrow suffix);
   see design-system.css §"Link affordance convention". No bespoke
   colour / hover rules here — the design system owns them. */

.analytics-alert-time {
    margin-left: auto;
    font-family: var(--font-base);
    font-size: var(--fs-sm);
    color: var(--fg-4);
}

.analytics-alert-title {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--fg-1);
    line-height: var(--lh-base);
    margin-bottom: var(--sp-1);
}

.analytics-alert-device {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    color: var(--fg-3);
}

/* ─── Collector grid + items. Same type scale as alerts list. */
.analytics-collector-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 768px) {
    .analytics-collector-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .analytics-collector-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.analytics-collector-item {
    background-color: var(--bg-2, #f9fafb);
    border: 1px solid var(--colors-border-border-base, #e5e7eb);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    transition:
        background-color var(--t-fast),
        box-shadow var(--t-fast);
}

.analytics-collector-item:hover {
    background-color: #f3f4f6;
    box-shadow: var(--shadow-sm);
}

.analytics-collector-name {
    font-family: var(--font-base);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--fg-1);
    margin-bottom: var(--sp-2);
}

.analytics-collector-status {
    margin-bottom: var(--sp-2);
}

.analytics-collector-last-seen {
    font-family: var(--font-base);
    font-size: var(--fs-sm);
    color: var(--fg-4);
}

/* ─── Bar-list widgets (server-rendered, used by Top Devices and Alerts
   by Type — both replaced canvas-based Chart.js charts so the labels
   can be real <a> links into /devices/<id> and /glossary/alerts/<code>
   respectively).

   Row layout: [leader] · [name] · [bar] · [stats]
   - leader: a rank-number chip (.analytics-bar-rank) or a color swatch
     (.analytics-bar-swatch) depending on the widget.
   - name: a link styled with brand-green, Inter 14 medium.
   - bar: 20px-tall pill track + solid brand-green (or per-row colour) fill.
   - stats: count (tabular 16 semibold) + percentage (12 muted). */
.analytics-bar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    counter-reset: bar-rank;
}

.analytics-bar-row {
    display: grid;
    grid-template-columns: 28px minmax(140px, 240px) 1fr minmax(96px, auto);
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-3);
    border-radius: var(--radius-md);
    transition: background-color var(--t-fast);
}

.analytics-bar-row + .analytics-bar-row {
    border-top: 1px solid var(--colors-border-border-base, #e5e7eb);
}

.analytics-bar-row:hover {
    background-color: rgba(
        37,
        175,
        136,
        0.05
    ); /* brand-green 5% per design system */
}

.analytics-bar-rank {
    counter-increment: bar-rank;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background-color: var(--bg-2, #f3f4f6);
    color: var(--fg-3);
    font-family: var(--font-base);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}

.analytics-bar-rank::before {
    content: counter(bar-rank);
}

.analytics-bar-swatch {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-pill);
    background-color: var(--analytics-bar-color, var(--color-brand-green));
    /* Centre the 12px swatch inside the 28px leader column. */
    margin-left: 8px;
}

/* The actual <a> in the name column uses the design-system .link-internal
   (for device-detail nav, diagonal-arrow suffix) or .link-glossary (for
   glossary lookups, book-open prefix) — see design-system.css. The row
   grid track caps width at 240px; on long content the design-system
   ellipsis treatment doesn't apply because those classes are inline-flex
   (icon + text), which is fine for the data we see today (device names
   and LAF tokens are short). */
.analytics-bar-row > a.link-internal,
.analytics-bar-row > a.link-glossary {
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
}

/* LAF token mono styling moved to design-system.css as ``.laf-code`` so
   the same treatment is available on every surface that renders a LAF
   alert code (analytics dashboard, alerts list, recent-alerts widget,
   etc) — see design-system.css §"LAF code token". */

.analytics-bar-track {
    position: relative;
    height: 20px;
    background-color: var(--bg-2, #f3f4f6);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.analytics-bar-fill {
    display: block;
    height: 100%;
    background-color: var(--analytics-bar-color, var(--color-brand-green));
    border-radius: var(--radius-pill);
    transition: width var(--t-base);
}

.analytics-bar-stats {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    justify-content: flex-end;
    font-family: var(--font-base);
}

.analytics-bar-count {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}

.analytics-bar-pct {
    font-size: var(--fs-sm);
    color: var(--fg-4);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    /* Stack the bar under the name on narrow viewports so the name
       isn't cropped. */
    .analytics-bar-row {
        grid-template-columns: 28px 1fr minmax(80px, auto);
        grid-template-areas: "leader name stats" "leader bar bar";
        row-gap: var(--sp-2);
    }
    .analytics-bar-rank,
    .analytics-bar-swatch {
        grid-area: leader;
    }
    .analytics-bar-name {
        grid-area: name;
    }
    .analytics-bar-track {
        grid-area: bar;
    }
    .analytics-bar-stats {
        grid-area: stats;
    }
}