/* HID Global status page — official brand palette (hidglobal.com / brand guidelines)
   Dark Blue #002D56 | HID Blue #003087 | Medium Blue #0057B7 | Light Blue #93C2F8 */

:root {
    --hid-dark-blue: #002d56;
    --hid-blue: #003087;
    --hid-medium-blue: #0057b7;
    --hid-light-blue: #93c2f8;
    --hid-white: #ffffff;
    --hid-surface-tint: #f5f8fc;
    --hid-surface-muted: #eef3f9;
    --hid-border: #d4dfed;
    --hid-border-strong: #b8c9de;
    --hid-text-body: #3d4f63;
    --hid-text-muted: #5c6f87;
    --hid-surface-dark: #003466;
    --hid-surface-raised: #00407f;
    --hid-border-dark: #1a5588;
}

html[data-theme='light'] {
    color-scheme: light;
    --accent: var(--hid-blue);
    --accent-content: var(--hid-blue);
    --accent-foreground: var(--hid-white);
    --accent-background: var(--hid-white);
    --status-text-primary: var(--hid-dark-blue);
    --status-text-secondary: var(--hid-text-body);
    --status-text-muted: var(--hid-text-muted);
    --status-surface: var(--hid-white);
    --status-surface-muted: var(--hid-surface-tint);
    background-color: var(--hid-white) !important;
    color: var(--status-text-secondary) !important;
}

html[data-theme='dark'] {
    color-scheme: dark;
    --accent: var(--hid-medium-blue);
    --accent-content: var(--hid-light-blue);
    --accent-foreground: var(--hid-white);
    --accent-background: var(--hid-dark-blue);
    --status-text-primary: #f0f6fc;
    --status-text-secondary: #d4e3f2;
    --status-text-muted: #9eb5cc;
    --status-surface: var(--hid-surface-dark);
    --status-surface-muted: var(--hid-surface-raised);
    background-color: var(--hid-dark-blue) !important;
    color: var(--status-text-secondary) !important;
}

html[data-theme='light'] body {
    background-color: var(--hid-white);
    color: var(--hid-text-body);
}

html[data-theme='dark'] body {
    background-color: var(--hid-dark-blue);
    color: var(--status-text-secondary);
}

/* Header */
html[data-theme='light'] .cachet-status-header {
    background: var(--hid-white);
    border-bottom: 3px solid var(--hid-blue);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--hid-blue) 10%, transparent);
}

html[data-theme='dark'] .cachet-status-header {
    background: var(--hid-surface-dark);
    border-bottom: 3px solid var(--hid-medium-blue);
}

.cachet-brand-link {
    display: inline-flex;
    align-items: center;
}

.cachet-brand-logo {
    display: block;
    height: 2.25rem;
    width: auto;
    max-width: min(100%, 15.5rem);
}

.cachet-brand-logomark {
    display: block;
    height: 2.25rem;
    width: auto;
}

html[data-theme='dark'] .cachet-brand-logo,
html[data-theme='dark'] .cachet-brand-logomark {
    border-radius: 0.25rem;
}

/* Titles */
html[data-theme='light'] h1,
html[data-theme='light'] h2,
html[data-theme='light'] h3,
html[data-theme='light'] h4,
html[data-theme='light'] .font-semibold {
    color: var(--hid-dark-blue) !important;
}

html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3,
html[data-theme='dark'] h4,
html[data-theme='dark'] .font-semibold {
    color: var(--status-text-primary) !important;
}

/* Prose / about text */
html[data-theme='light'] .prose,
html[data-theme='light'] .prose-zinc {
    --tw-prose-body: var(--hid-text-body);
    --tw-prose-headings: var(--hid-dark-blue);
    --tw-prose-lead: var(--hid-text-body);
    --tw-prose-links: var(--hid-medium-blue);
    --tw-prose-bold: var(--hid-dark-blue);
    --tw-prose-counters: var(--hid-text-muted);
    --tw-prose-bullets: var(--hid-text-muted);
    --tw-prose-hr: var(--hid-border);
    --tw-prose-quotes: var(--hid-dark-blue);
    --tw-prose-quote-borders: var(--hid-border-strong);
    --tw-prose-captions: var(--hid-text-muted);
    color: var(--hid-text-body) !important;
}

html[data-theme='light'] .prose p,
html[data-theme='light'] .prose li,
html[data-theme='light'] .prose strong {
    color: var(--hid-text-body) !important;
}

html[data-theme='light'] .prose a,
html[data-theme='light'] .prose-a\:text-accent-content {
    color: var(--hid-medium-blue) !important;
}

html[data-theme='dark'] .prose,
html[data-theme='dark'] .prose-zinc,
html[data-theme='dark'] .prose-invert {
    --tw-prose-body: var(--status-text-secondary);
    --tw-prose-headings: var(--status-text-primary);
    --tw-prose-links: var(--hid-light-blue);
    color: var(--status-text-secondary) !important;
}

/* Body text utilities */
html[data-theme='light'] .text-zinc-500,
html[data-theme='light'] .text-zinc-600,
html[data-theme='light'] .text-zinc-700,
html[data-theme='light'] .text-zinc-800 {
    color: var(--hid-text-body) !important;
}

html[data-theme='light'] .text-zinc-300,
html[data-theme='light'] .text-zinc-400 {
    color: var(--hid-text-muted) !important;
}

html[data-theme='dark'] .text-zinc-500,
html[data-theme='dark'] .text-zinc-700,
html[data-theme='dark'] .text-zinc-800,
html[data-theme='dark'] .dark\:text-zinc-300,
html[data-theme='dark'] .dark\:text-zinc-400 {
    color: var(--status-text-muted) !important;
}

/* Component / group cards — Tailwind dark: uses prefers-color-scheme; bridge data-theme */
html[data-theme='dark'] .bg-white {
    background-color: var(--hid-surface-dark) !important;
}

html[data-theme='dark'] .bg-zinc-50 {
    background-color: var(--hid-surface-raised) !important;
}

html[data-theme='dark'] .hover\:bg-zinc-100:hover {
    background-color: color-mix(in srgb, var(--hid-medium-blue) 22%, var(--hid-surface-dark)) !important;
}

html[data-theme='dark'] .border-zinc-900\/10,
html[data-theme='dark'] .border-white\/15,
html[data-theme='dark'] .divide-zinc-900\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme='dark'] .ring-zinc-900\/10,
html[data-theme='dark'] .ring-white\/15 {
    --tw-ring-color: rgba(255, 255, 255, 0.15) !important;
}

/* Missing from published Tailwind build */
.size-6 {
    width: 1.5rem;
    height: 1.5rem;
}

/* Component / group cards */
html[data-theme='light'] .bg-white,
html[data-theme='light'] .ring-zinc-900\/10 {
    background-color: var(--hid-white) !important;
    border-color: var(--hid-border) !important;
}

html[data-theme='light'] .text-zinc-800.dark\:border-zinc-600,
html[data-theme='light'] .border-zinc-800 {
    color: var(--hid-dark-blue) !important;
    border-color: var(--hid-border-strong) !important;
}

/* Borders */
html[data-theme='light'] .border-zinc-200,
html[data-theme='light'] .dark\:border-zinc-700 {
    border-color: var(--hid-border) !important;
}

html[data-theme='dark'] .border-zinc-200,
html[data-theme='dark'] .dark\:border-zinc-700 {
    border-color: var(--hid-border-dark) !important;
}

/* Primary dashboard button */
html[data-theme='light'] a.bg-accent,
html[data-theme='light'] .bg-accent {
    background-color: var(--hid-blue) !important;
    color: var(--hid-white) !important;
}

html[data-theme='dark'] a.bg-accent,
html[data-theme='dark'] .bg-accent {
    background-color: var(--hid-medium-blue) !important;
    color: var(--hid-white) !important;
}

/* Theme toggle */
.cachet-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

html[data-theme='light'] .cachet-theme-toggle {
    background: var(--hid-surface-muted);
    border-color: var(--hid-border-strong);
    color: var(--hid-blue);
}

html[data-theme='light'] .cachet-theme-toggle:hover {
    background: var(--hid-border);
}

html[data-theme='dark'] .cachet-theme-toggle {
    background: var(--hid-surface-raised);
    border-color: var(--hid-border-dark);
    color: var(--hid-light-blue);
}

html[data-theme='dark'] .cachet-theme-toggle:hover {
    background: color-mix(in srgb, var(--hid-medium-blue) 35%, var(--hid-surface-raised));
}

.cachet-theme-toggle .icon-sun,
.cachet-theme-toggle .icon-moon {
    width: 1.125rem;
    height: 1.125rem;
}

html[data-theme='light'] .cachet-theme-toggle .icon-sun {
    display: none;
}

html[data-theme='light'] .cachet-theme-toggle .icon-moon {
    display: block;
}

html[data-theme='dark'] .cachet-theme-toggle .icon-sun {
    display: block;
}

html[data-theme='dark'] .cachet-theme-toggle .icon-moon {
    display: none;
}

/* Footer */
html[data-theme='light'] footer {
    background: var(--hid-white) !important;
    border-color: var(--hid-border) !important;
    color: var(--hid-text-muted) !important;
}

html[data-theme='dark'] footer {
    background: var(--hid-surface-dark) !important;
    border-color: var(--hid-border-dark) !important;
    color: var(--status-text-muted) !important;
}

/* Status banner — semantic colors (avoid Filament custom-* variable clashes) */
html[data-theme='light'] .cachet-status-bar {
    border-style: solid;
    border-width: 1px;
}

html[data-theme='light'] .cachet-status-bar--operational {
    background-color: #dcfce7 !important;
    border-color: #86efac !important;
    --tw-ring-color: rgba(22, 163, 74, 0.35) !important;
}

html[data-theme='light'] .cachet-status-bar--operational .cachet-status-bar__label,
html[data-theme='light'] .cachet-status-bar--operational .cachet-status-bar__icon {
    color: #14532d !important;
    background: transparent !important;
}

html[data-theme='light'] .cachet-status-bar--partial-outage {
    background-color: #fef3c7 !important;
    border-color: #fcd34d !important;
}

html[data-theme='light'] .cachet-status-bar--partial-outage .cachet-status-bar__label,
html[data-theme='light'] .cachet-status-bar--partial-outage .cachet-status-bar__icon {
    color: #78350f !important;
    background: transparent !important;
}

html[data-theme='light'] .cachet-status-bar--major-outage {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
}

html[data-theme='light'] .cachet-status-bar--major-outage .cachet-status-bar__label,
html[data-theme='light'] .cachet-status-bar--major-outage .cachet-status-bar__icon {
    color: #7f1d1d !important;
    background: transparent !important;
}

html[data-theme='light'] .cachet-status-bar--under-maintenance {
    background-color: #ffedd5 !important;
    border-color: #fdba74 !important;
}

html[data-theme='light'] .cachet-status-bar--under-maintenance .cachet-status-bar__label,
html[data-theme='light'] .cachet-status-bar--under-maintenance .cachet-status-bar__icon {
    color: #7c2d12 !important;
    background: transparent !important;
}

html[data-theme='dark'] .cachet-status-bar {
    border-style: solid;
    border-width: 1px;
}

html[data-theme='dark'] .cachet-status-bar--operational {
    background-color: rgba(22, 163, 74, 0.18) !important;
    border-color: rgba(74, 222, 128, 0.35) !important;
}

html[data-theme='dark'] .cachet-status-bar--operational .cachet-status-bar__label,
html[data-theme='dark'] .cachet-status-bar--operational .cachet-status-bar__icon {
    color: #bbf7d0 !important;
    background: transparent !important;
}

html[data-theme='dark'] .cachet-status-bar--partial-outage {
    background-color: rgba(217, 119, 6, 0.2) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}

html[data-theme='dark'] .cachet-status-bar--partial-outage .cachet-status-bar__label,
html[data-theme='dark'] .cachet-status-bar--partial-outage .cachet-status-bar__icon {
    color: #fde68a !important;
    background: transparent !important;
}

html[data-theme='dark'] .cachet-status-bar--major-outage {
    background-color: rgba(220, 38, 38, 0.2) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

html[data-theme='dark'] .cachet-status-bar--major-outage .cachet-status-bar__label,
html[data-theme='dark'] .cachet-status-bar--major-outage .cachet-status-bar__icon {
    color: #fecaca !important;
    background: transparent !important;
}

html[data-theme='dark'] .cachet-status-bar--under-maintenance {
    background-color: rgba(234, 88, 12, 0.2) !important;
    border-color: rgba(251, 146, 60, 0.35) !important;
}

html[data-theme='dark'] .cachet-status-bar--under-maintenance .cachet-status-bar__label,
html[data-theme='dark'] .cachet-status-bar--under-maintenance .cachet-status-bar__icon {
    color: #fed7aa !important;
    background: transparent !important;
}

/* Legacy Filament custom banner selectors (incident alerts) */
html[data-theme='light'] .rounded-md.p-4[class*='bg-custom'] p,
html[data-theme='light'] .rounded-lg.p-4[class*='bg-custom'] p,
html[data-theme='light'] .rounded-md.p-4[class*='bg-custom'] svg,
html[data-theme='light'] .rounded-lg.p-4[class*='bg-custom'] svg {
    color: var(--hid-dark-blue) !important;
    background: transparent !important;
    font-weight: 600;
}

html[data-theme='light'] .rounded-md.p-4[class*='bg-custom'],
html[data-theme='light'] .rounded-lg.p-4[class*='bg-custom'] {
    border-color: currentColor !important;
    border-opacity: 0.35;
}

/* Availability strips & history calendars */
html[data-theme='light'] {
    --availability-up: #16a34a;
    --availability-degraded: #ca8a04;
    --availability-down: #dc2626;
    --availability-maintenance: #ea580c;
    --availability-unknown: #7b8fa6;
    --availability-empty: var(--hid-border);
    --availability-track-bg: var(--hid-surface-muted);
    --availability-track-border: var(--hid-border-strong);
    --availability-hint: var(--hid-text-muted);
    --availability-axis: var(--hid-text-muted);
    --availability-event-bg: var(--hid-surface-tint);
    --availability-event-border: var(--hid-border);
    --availability-text: var(--hid-dark-blue);
    --availability-text-muted: var(--hid-text-muted);
}

html[data-theme='dark'] {
    --availability-up: #4ade80;
    --availability-degraded: #facc15;
    --availability-down: #f87171;
    --availability-maintenance: #fb923c;
    --availability-unknown: #7b9ab8;
    --availability-empty: var(--hid-border-dark);
    --availability-track-bg: var(--hid-surface-raised);
    --availability-track-border: var(--hid-border-dark);
    --availability-hint: var(--status-text-muted);
    --availability-axis: var(--status-text-muted);
    --availability-event-bg: var(--hid-surface-dark);
    --availability-event-border: var(--hid-border-dark);
    --availability-text: var(--status-text-primary);
    --availability-text-muted: var(--status-text-muted);
}

.cachet-availability-day--up,
.cachet-availability-segment.cachet-availability-day--up {
    background-color: var(--availability-up);
}

.cachet-availability-day--degraded,
.cachet-availability-segment.cachet-availability-day--degraded {
    background-color: var(--availability-degraded);
}

.cachet-availability-day--down,
.cachet-availability-segment.cachet-availability-day--down {
    background-color: var(--availability-down);
}

.cachet-availability-day--maintenance,
.cachet-availability-segment.cachet-availability-day--maintenance {
    background-color: var(--availability-maintenance);
}

.cachet-availability-day--unknown,
.cachet-availability-segment.cachet-availability-day--unknown {
    background-color: var(--availability-unknown);
}

.cachet-availability-day--empty,
.cachet-availability-segment.cachet-availability-day--empty {
    background-color: var(--availability-empty);
    opacity: 0.85;
}

/* Strip layout */
.cachet-availability-strip {
    border-top: 1px solid var(--availability-track-border);
    padding-top: 1rem;
}

.cachet-availability-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.cachet-availability-uptime-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    background: var(--availability-track-bg);
    border: 1px solid var(--availability-track-border);
    color: var(--availability-text);
}

.cachet-availability-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.875rem;
}

.cachet-availability-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--availability-text-muted);
    white-space: nowrap;
}

.cachet-availability-legend-swatch {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.cachet-availability-hint {
    margin: 0 0 0.625rem;
    font-size: 0.6875rem;
    line-height: 1.25rem;
    color: var(--availability-text-muted);
}

.cachet-availability-track-wrap {
    position: relative;
    overflow: visible;
}

.cachet-availability-track {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-height: 1.75rem;
    padding: 0.375rem;
    border-radius: 0.5rem;
    border: 1px solid var(--availability-track-border);
    background: var(--availability-track-bg);
    overflow: visible;
}

.cachet-availability-segment {
    position: relative;
    flex: 1 1 0;
    min-width: 3px;
    height: 1.25rem;
    border-radius: 2px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    text-decoration: none;
    color: inherit;
}

.cachet-availability-segment--week-start {
    box-shadow: -1px 0 0 rgba(148, 163, 184, 0.45);
}

html[data-theme='dark'] .cachet-availability-segment--week-start {
    box-shadow: -1px 0 0 rgba(148, 163, 184, 0.25);
}

.cachet-availability-segment:hover,
.cachet-availability-segment:focus-visible {
    transform: scaleY(1.35);
    z-index: 2;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--accent, var(--hid-blue));
    outline: none;
}

html[data-theme='dark'] .cachet-availability-segment:hover,
html[data-theme='dark'] .cachet-availability-segment:focus-visible {
    box-shadow: 0 0 0 2px var(--hid-dark-blue), 0 0 0 3px var(--accent-content, var(--hid-light-blue));
}

.cachet-availability-segment--has-incident {
    cursor: pointer;
}

.cachet-availability-segment--has-incident::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 1px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

.cachet-availability-tooltip {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    z-index: 30;
    transform: translateX(-50%);
    max-width: none;
    min-width: max-content;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.125rem;
    white-space: nowrap;
    pointer-events: none;
    background: var(--hid-dark-blue);
    color: var(--hid-white);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--hid-dark-blue) 35%, transparent);
}

html[data-theme='dark'] .cachet-availability-tooltip {
    background: var(--hid-white);
    color: var(--hid-dark-blue);
}

.cachet-availability-tooltip--grid {
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.cachet-availability-axis {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--availability-axis);
}

.cachet-availability-heading {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--availability-text-muted);
}

.cachet-availability-uptime-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cachet-availability-uptime-hint {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--availability-text-muted);
}

/* Active incidents callout */
.cachet-active-incidents {
    border-left: 4px solid var(--availability-down);
    background: color-mix(in srgb, var(--availability-down) 10%, var(--status-surface));
    --tw-ring-color: color-mix(in srgb, var(--availability-down) 40%, transparent);
}

html[data-theme='dark'] .cachet-active-incidents {
    background: color-mix(in srgb, var(--availability-down) 14%, var(--status-surface));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--availability-down) 32%, transparent),
        0 8px 24px color-mix(in srgb, var(--availability-down) 12%, transparent);
}

.cachet-active-incidents__header {
    border-bottom: 1px solid color-mix(in srgb, var(--availability-down) 26%, transparent);
    background: color-mix(in srgb, var(--availability-down) 8%, var(--status-surface-muted));
}

html[data-theme='dark'] .cachet-active-incidents__header {
    background: color-mix(in srgb, var(--availability-down) 12%, var(--status-surface-muted));
}

.cachet-active-incidents__subtitle {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--status-text-muted);
}

.cachet-active-incidents__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    color: var(--availability-down);
    background: color-mix(in srgb, var(--availability-down) 16%, var(--status-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-down) 32%, transparent);
    flex-shrink: 0;
}

.cachet-active-incidents__header h3 {
    color: var(--status-text-primary) !important;
}

.cachet-active-incidents__count {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7f1d1d;
    background: color-mix(in srgb, var(--availability-down) 14%, #fef2f2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-down) 32%, transparent);
}

html[data-theme='dark'] .cachet-active-incidents__count {
    color: #fecaca;
    background: color-mix(in srgb, var(--availability-down) 18%, #450a0a);
}

.cachet-active-incidents__list {
    border-color: color-mix(in srgb, var(--availability-down) 20%, transparent);
}

.cachet-active-incidents__item {
    background: color-mix(in srgb, var(--availability-down) 3%, var(--status-surface));
}

html[data-theme='dark'] .cachet-active-incidents__item {
    background: color-mix(in srgb, var(--availability-down) 5%, var(--status-surface));
}

.cachet-active-incidents__affected {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--availability-down) 80%, var(--status-text-secondary));
}

.cachet-active-incidents__title {
    color: var(--status-text-primary) !important;
}

.cachet-active-incidents__when {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--status-text-secondary);
}

.cachet-active-incidents__when-separator {
    color: color-mix(in srgb, var(--availability-down) 55%, var(--status-text-muted));
    opacity: 0.8;
}

.cachet-active-incidents__message {
    color: var(--status-text-secondary) !important;
}

.cachet-active-incidents__message p {
    margin: 0;
}

.cachet-active-incidents__updates {
    border-color: color-mix(in srgb, var(--availability-down) 16%, transparent);
}

/* Planned maintenance callout */
.cachet-planned-maintenance {
    border-left: 4px solid var(--availability-maintenance);
    background: color-mix(in srgb, var(--availability-maintenance) 12%, var(--status-surface));
    --tw-ring-color: color-mix(in srgb, var(--availability-maintenance) 45%, transparent);
}

html[data-theme='dark'] .cachet-planned-maintenance {
    background: color-mix(in srgb, var(--availability-maintenance) 16%, var(--status-surface));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--availability-maintenance) 35%, transparent),
        0 8px 24px color-mix(in srgb, var(--availability-maintenance) 12%, transparent);
}

.cachet-planned-maintenance__header {
    border-bottom: 1px solid color-mix(in srgb, var(--availability-maintenance) 28%, transparent);
    background: color-mix(in srgb, var(--availability-maintenance) 10%, var(--status-surface-muted));
}

html[data-theme='dark'] .cachet-planned-maintenance__header {
    background: color-mix(in srgb, var(--availability-maintenance) 14%, var(--status-surface-muted));
}

.cachet-planned-maintenance__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    color: var(--availability-maintenance);
    background: color-mix(in srgb, var(--availability-maintenance) 18%, var(--status-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-maintenance) 35%, transparent);
}

.cachet-planned-maintenance__header h3 {
    color: var(--status-text-primary) !important;
}

.cachet-planned-maintenance__count {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--availability-maintenance);
    background: color-mix(in srgb, var(--availability-maintenance) 16%, var(--status-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-maintenance) 35%, transparent);
}

.cachet-planned-maintenance__list {
    border-color: color-mix(in srgb, var(--availability-maintenance) 22%, transparent);
}

.cachet-planned-maintenance__item {
    background: color-mix(in srgb, var(--availability-maintenance) 4%, var(--status-surface));
}

html[data-theme='dark'] .cachet-planned-maintenance__item {
    background: color-mix(in srgb, var(--availability-maintenance) 6%, var(--status-surface));
}

.cachet-planned-maintenance__affected {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--availability-maintenance);
}

.cachet-planned-maintenance__title {
    color: var(--status-text-primary) !important;
}

.cachet-planned-maintenance__when {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--status-text-secondary);
}

.cachet-planned-maintenance__when-separator {
    color: var(--availability-maintenance);
    opacity: 0.65;
}

.cachet-planned-maintenance__message {
    color: var(--status-text-secondary) !important;
}

.cachet-planned-maintenance__message p {
    margin: 0;
}

.cachet-planned-maintenance__updates {
    border-color: color-mix(in srgb, var(--availability-maintenance) 18%, transparent);
}

.cachet-planned-maintenance__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cachet-planned-maintenance__badge--upcoming {
    color: #7c2d12;
    background: color-mix(in srgb, var(--availability-maintenance) 22%, #fff7ed);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-maintenance) 45%, transparent);
}

html[data-theme='dark'] .cachet-planned-maintenance__badge--upcoming {
    color: #ffedd5;
    background: color-mix(in srgb, var(--availability-maintenance) 28%, #1c1917);
}

.cachet-planned-maintenance__badge--in-progress {
    color: #713f12;
    background: color-mix(in srgb, var(--availability-degraded) 24%, #fefce8);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-degraded) 45%, transparent);
}

html[data-theme='dark'] .cachet-planned-maintenance__badge--in-progress {
    color: #fef9c3;
    background: color-mix(in srgb, var(--availability-degraded) 24%, #1c1917);
}

.cachet-planned-maintenance__badge--complete {
    color: #14532d;
    background: color-mix(in srgb, var(--availability-up) 20%, #f0fdf4);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-up) 40%, transparent);
}

html[data-theme='dark'] .cachet-planned-maintenance__badge--complete {
    color: #dcfce7;
    background: color-mix(in srgb, var(--availability-up) 20%, #052e16);
}

/* Recent completed maintenance */
.cachet-completed-maintenance {
    border-left: 4px solid var(--availability-up);
    background: color-mix(in srgb, var(--availability-up) 8%, var(--status-surface));
    --tw-ring-color: color-mix(in srgb, var(--availability-up) 30%, transparent);
}

html[data-theme='dark'] .cachet-completed-maintenance {
    background: color-mix(in srgb, var(--availability-up) 10%, var(--status-surface));
}

.cachet-completed-maintenance__header {
    border-bottom: 1px solid color-mix(in srgb, var(--availability-up) 22%, transparent);
    background: color-mix(in srgb, var(--availability-up) 6%, var(--status-surface-muted));
}

.cachet-completed-maintenance__subtitle {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--status-text-muted);
}

.cachet-completed-maintenance__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    color: var(--availability-up);
    background: color-mix(in srgb, var(--availability-up) 14%, var(--status-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-up) 30%, transparent);
}

.cachet-completed-maintenance__count {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #14532d;
    background: color-mix(in srgb, var(--availability-up) 16%, #f0fdf4);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-up) 35%, transparent);
}

html[data-theme='dark'] .cachet-completed-maintenance__count {
    color: #dcfce7;
    background: color-mix(in srgb, var(--availability-up) 18%, #052e16);
}

.cachet-completed-maintenance__list {
    border-color: color-mix(in srgb, var(--availability-up) 18%, transparent);
}

.cachet-completed-maintenance__item {
    background: color-mix(in srgb, var(--availability-up) 3%, var(--status-surface));
}

.cachet-completed-maintenance__title {
    color: var(--status-text-primary) !important;
}

.cachet-completed-maintenance__when,
.cachet-completed-maintenance__affected {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--status-text-secondary);
}

.cachet-completed-maintenance__affected {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--availability-up) 70%, var(--status-text-muted));
}

.cachet-completed-maintenance__when-separator {
    color: color-mix(in srgb, var(--availability-up) 55%, var(--status-text-muted));
    opacity: 0.8;
}

.cachet-completed-maintenance__message {
    color: var(--status-text-secondary) !important;
}

.cachet-completed-maintenance__message p {
    margin: 0;
}

.cachet-completed-maintenance__updates {
    border-color: color-mix(in srgb, var(--availability-up) 16%, transparent);
}

.cachet-completed-maintenance__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cachet-completed-maintenance__badge--complete {
    color: #14532d;
    background: color-mix(in srgb, var(--availability-up) 22%, #f0fdf4);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-up) 45%, transparent);
}

html[data-theme='dark'] .cachet-completed-maintenance__badge--complete {
    color: #dcfce7;
    background: color-mix(in srgb, var(--availability-up) 24%, #052e16);
}

/* Status page section rhythm — flex gap, no negative margins (prevents card overlap) */
.cachet-status-page,
.container.mx-auto.flex.max-w-5xl.flex-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cachet-status-page > *,
.container.mx-auto.flex.max-w-5xl.flex-col > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.cachet-overall-status {
    position: relative;
    z-index: auto;
    margin: 0 !important;
    flex-shrink: 0;
    isolation: isolate;
}

.cachet-overall-status .cachet-status-bar {
    margin: 0;
}

.cachet-component-group {
    position: relative;
    z-index: auto;
    flex-shrink: 0;
    isolation: isolate;
}

.cachet-about-support {
    margin: 0;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--accent, var(--hid-blue)) 25%, transparent);
    background: color-mix(in srgb, var(--accent, var(--hid-blue)) 8%, var(--status-surface));
    color: var(--status-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

html[data-theme='dark'] .cachet-about-support {
    background: color-mix(in srgb, var(--accent, var(--hid-medium-blue)) 14%, var(--status-surface));
    border-color: color-mix(in srgb, var(--accent-content, var(--hid-light-blue)) 30%, transparent);
}

.cachet-about-support a {
    color: var(--accent-content, var(--hid-blue));
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cachet-incident-range-form {
    font-size: 0.875rem;
}

.cachet-incident-date-input {
    min-height: 2.25rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    border: 1px solid var(--availability-track-border);
    background: var(--availability-track-bg);
    color: var(--availability-text);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.cachet-incident-date-input:focus-visible {
    outline: 2px solid var(--accent, var(--hid-blue));
    outline-offset: 1px;
}

html[data-theme='dark'] .cachet-incident-date-input {
    color-scheme: dark;
}

.cachet-incident-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.75;
}

.cachet-incident-range-separator {
    color: var(--availability-text-muted);
}

.cachet-incident-range-submit {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--availability-track-border);
    background: var(--accent, var(--hid-blue));
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

html[data-theme='dark'] .cachet-incident-range-submit {
    background: var(--accent-content, var(--hid-medium-blue));
    color: #ffffff;
}

.cachet-incident-range-submit:hover {
    opacity: 0.92;
}

.cachet-availability-events-disclosure {
    margin-top: 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--availability-event-border);
    background: var(--availability-event-bg);
    overflow: hidden;
}

.cachet-availability-events-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--availability-text);
}

.cachet-availability-events-summary::-webkit-details-marker {
    display: none;
}

.cachet-availability-events-summary-label {
    flex: 1;
    min-width: 0;
}

.cachet-availability-events-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--availability-track-bg);
    border: 1px solid var(--availability-track-border);
    color: var(--availability-text);
}

.cachet-availability-events-chevron {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    opacity: 0.65;
    margin-left: 0.125rem;
}

.cachet-availability-events-disclosure[open] .cachet-availability-events-chevron {
    transform: rotate(-135deg);
    margin-top: 0.2rem;
}

.cachet-availability-events-list {
    margin: 0;
    padding: 0 0.75rem 0.75rem;
    list-style: none;
    display: grid;
    gap: 0.375rem;
    border-top: 1px solid var(--availability-event-border);
}

.cachet-availability-events-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: var(--availability-text);
}

.cachet-availability-events-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.cachet-availability-events-item--up .cachet-availability-events-dot {
    background: var(--availability-up);
}

.cachet-availability-events-item--degraded .cachet-availability-events-dot {
    background: var(--availability-degraded);
}

.cachet-availability-events-item--down .cachet-availability-events-dot {
    background: var(--availability-down);
}

.cachet-availability-events-item--maintenance .cachet-availability-events-dot {
    background: var(--availability-maintenance);
}

.cachet-availability-events-item--empty .cachet-availability-events-dot,
.cachet-availability-events-item--unknown .cachet-availability-events-dot {
    background: var(--availability-unknown);
}

.cachet-availability-events-label {
    min-width: 0;
    font-weight: 500;
    color: var(--availability-text);
}

.cachet-availability-events-link {
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color: var(--accent, var(--hid-blue));
}

html[data-theme='dark'] .cachet-availability-events-link {
    color: var(--accent-content, var(--hid-light-blue));
}

.cachet-availability-events-link:hover {
    text-decoration: underline;
}

/* History tab */
.cachet-history-month {
    border: 1px solid var(--availability-track-border);
    border-radius: 0.75rem;
    background: var(--status-surface);
    padding: 1rem;
}

.cachet-history-month-header {
    margin-bottom: 0.75rem;
    text-align: center;
}

.cachet-history-month-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--availability-text);
    margin: 0;
}

.cachet-history-month-header p {
    font-size: 0.75rem;
    color: var(--availability-text-muted);
    margin: 0.25rem 0 0;
}

.cachet-history-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    text-align: center;
}

.cachet-history-weekday {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--availability-text-muted);
}

.cachet-history-grid-cells {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.cachet-history-nav {
    color: var(--availability-text);
    border-color: var(--availability-track-border) !important;
    background: var(--status-surface);
}

.cachet-history-nav:hover {
    background: var(--status-surface-muted);
}

html[data-theme='light'] #component,
html[data-theme='light'] .cachet-history select {
    color: var(--hid-dark-blue);
    background: var(--hid-white);
    border-color: var(--hid-border-strong);
}

html[data-theme='dark'] #component,
html[data-theme='dark'] .cachet-history select {
    color: var(--status-text-primary);
    background: var(--hid-surface-raised);
    border-color: var(--hid-border-dark);
}

/* History calendar cells */
.cachet-history-grid {
    position: relative;
}

.cachet-history-cell {
    width: 100%;
    aspect-ratio: 1;
    min-height: 0;
    max-height: 2.25rem;
    border-radius: 0.25rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cachet-history-cell:hover,
.cachet-history-cell:focus-visible {
    z-index: 2;
    box-shadow: inset 0 0 0 2px var(--accent, var(--hid-blue));
    outline: none;
}

html[data-theme='dark'] .cachet-history-cell:hover,
html[data-theme='dark'] .cachet-history-cell:focus-visible {
    box-shadow: inset 0 0 0 2px var(--accent-content, var(--hid-light-blue));
}

.cachet-history-cell--incident {
    cursor: pointer;
    text-decoration: none;
}

.cachet-period-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cachet-period-selector-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--availability-text-muted);
}

.cachet-period-selector-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cachet-period-option {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--availability-track-border);
    background: var(--status-surface);
    color: var(--availability-text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cachet-period-option:hover {
    background: var(--status-surface-muted);
}

.cachet-period-option--active {
    border-color: var(--accent, var(--hid-blue));
    background: var(--accent, var(--hid-blue));
    color: #ffffff;
}

html[data-theme='dark'] .cachet-period-option--active {
    border-color: var(--accent-content, var(--hid-medium-blue));
    background: var(--accent-content, var(--hid-medium-blue));
    color: #ffffff;
}

.cachet-history-months {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 640px) {
    .cachet-history-months {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .cachet-history-months {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .cachet-history-months {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cachet-availability-strip--inline {
    margin-top: 0;
}

.cachet-group-availability {
    background: color-mix(in srgb, var(--accent, var(--hid-blue)) 6%, var(--status-surface-muted));
    border-top: 1px solid color-mix(in srgb, var(--accent, var(--hid-blue)) 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent, var(--hid-blue)) 12%, transparent);
}

html[data-theme='dark'] .cachet-group-availability {
    background: color-mix(in srgb, var(--accent, var(--hid-medium-blue)) 12%, var(--status-surface-muted));
}

.cachet-component-group {
    border-left: 4px solid var(--accent, var(--hid-blue));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent, var(--hid-blue)) 10%, transparent);
}

html[data-theme='dark'] .cachet-component-group {
    border-left-color: var(--accent-content, var(--hid-light-blue));
}

.cachet-component-group__header {
    background: color-mix(in srgb, var(--accent, var(--hid-blue)) 5%, var(--status-surface));
    color: var(--status-text-primary);
}

html[data-theme='dark'] .cachet-component-group__header {
    background: color-mix(in srgb, var(--accent, var(--hid-medium-blue)) 10%, var(--status-surface));
}

.cachet-component-group__header:hover {
    background: color-mix(in srgb, var(--accent, var(--hid-blue)) 9%, var(--status-surface));
}

html[data-theme='dark'] .cachet-component-group__header:hover {
    background: color-mix(in srgb, var(--accent, var(--hid-medium-blue)) 16%, var(--status-surface));
}

.cachet-component-group__marker {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: var(--accent, var(--hid-blue));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--hid-blue)) 20%, transparent);
    flex-shrink: 0;
}

html[data-theme='dark'] .cachet-component-group__marker {
    background: var(--accent-content, var(--hid-light-blue));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-content, var(--hid-light-blue)) 20%, transparent);
}

.cachet-component-group__eyebrow {
    margin: 0 0 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent, var(--hid-blue));
}

html[data-theme='dark'] .cachet-component-group__eyebrow {
    color: var(--accent-content, var(--hid-light-blue));
}

.cachet-component-group__title {
    color: var(--status-text-primary) !important;
    font-size: 1.125rem;
}

.cachet-component-group__incidents {
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--status-text-secondary);
    background: var(--status-surface-muted);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-track-border) 80%, transparent);
}

.cachet-component-group__chevron {
    color: var(--accent, var(--hid-blue));
}

html[data-theme='dark'] .cachet-component-group__chevron {
    color: var(--accent-content, var(--hid-light-blue));
}

.cachet-component-group__panel {
    background: color-mix(in srgb, var(--status-surface-muted) 70%, var(--status-surface));
}

.cachet-component-group__services-heading {
    margin: 0;
    padding: 0.875rem 1rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--availability-text-muted);
}

@media (min-width: 640px) {
    .cachet-component-group__services-heading {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.cachet-service-item {
    background: var(--status-surface);
}

.cachet-service-item__inner {
    margin: 0.5rem 0.75rem 0.75rem;
    padding-left: 0.875rem;
    border-left: 3px solid color-mix(in srgb, var(--accent, var(--hid-blue)) 35%, var(--availability-track-border));
    border-radius: 0 0.5rem 0.5rem 0;
    background: color-mix(in srgb, var(--status-surface-muted) 55%, var(--status-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--availability-track-border) 65%, transparent);
}

html[data-theme='dark'] .cachet-service-item__inner {
    border-left-color: color-mix(in srgb, var(--accent-content, var(--hid-light-blue)) 35%, var(--availability-track-border));
}

@media (min-width: 640px) {
    .cachet-service-item__inner {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }
}

.cachet-service-item__marker {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.cachet-service-item__marker--up {
    background: var(--availability-up);
}

.cachet-service-item__marker--degraded {
    background: var(--availability-degraded);
}

.cachet-service-item__marker--down {
    background: var(--availability-down);
}

.cachet-service-item__marker--maintenance {
    background: var(--availability-maintenance);
}

.cachet-service-item__marker--unknown {
    background: var(--availability-unknown);
}

.cachet-service-item__title {
    font-size: 0.9375rem;
    color: var(--status-text-primary) !important;
}

.cachet-availability-strip--group {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.cachet-availability-strip--group .cachet-availability-uptime-badge {
    background: color-mix(in srgb, var(--accent, var(--hid-blue)) 10%, var(--status-surface));
    border-color: color-mix(in srgb, var(--accent, var(--hid-blue)) 25%, transparent);
    color: var(--status-text-primary);
}

.cachet-availability-strip--service {
    margin-top: 0.75rem;
    padding-top: 0;
    border-top: 0;
}

.cachet-availability-strip--service .cachet-availability-legend,
.cachet-availability-strip--service .cachet-availability-hint {
    display: none;
}

.cachet-availability-strip--service .cachet-availability-header {
    margin-bottom: 0.375rem;
}

.cachet-availability-strip--service .cachet-availability-uptime-badge {
    font-size: 0.75rem;
    padding: 0.1875rem 0.625rem;
}

.cachet-availability-strip--service .cachet-availability-track {
    min-height: 1.5rem;
    padding: 0.25rem;
}

.cachet-availability-strip--service .cachet-availability-segment {
    height: 1rem;
}

.cachet-status-tabs {
    display: flex !important;
    visibility: visible !important;
}

.cachet-status-tabs .cachet-status-tab {
    display: inline-block !important;
}

.cachet-status-tabs .cachet-status-tab.border-accent {
    border-color: var(--accent, var(--hid-blue)) !important;
    color: var(--accent, var(--hid-blue)) !important;
}

html[data-theme='dark'] .cachet-status-tabs .cachet-status-tab.border-accent {
    border-color: var(--accent-content, var(--hid-light-blue)) !important;
    color: var(--accent-content, var(--hid-light-blue)) !important;
}

/* Bridge Tailwind zinc utilities to data-theme (dark: variant uses prefers-color-scheme) */
html[data-theme='dark'] .text-zinc-900,
html[data-theme='dark'] .text-zinc-800,
html[data-theme='dark'] .text-zinc-700,
html[data-theme='dark'] .text-zinc-600,
html[data-theme='dark'] .hover\:text-zinc-900:hover {
    color: var(--status-text-secondary) !important;
}

html[data-theme='dark'] .text-zinc-500,
html[data-theme='dark'] .text-zinc-400,
html[data-theme='dark'] .dark\:text-zinc-300,
html[data-theme='dark'] .dark\:text-zinc-400,
html[data-theme='dark'] .dark\:text-zinc-100,
html[data-theme='dark'] .dark\:text-zinc-200 {
    color: var(--status-text-muted) !important;
}

html[data-theme='light'] .text-zinc-100,
html[data-theme='light'] .text-zinc-200,
html[data-theme='light'] .text-zinc-300,
html[data-theme='light'] .dark\:text-zinc-100,
html[data-theme='light'] .dark\:text-zinc-200,
html[data-theme='light'] .dark\:text-zinc-300,
html[data-theme='light'] .dark\:text-zinc-400 {
    color: var(--status-text-secondary) !important;
}

html[data-theme='dark'] .text-zinc-900.dark\:text-zinc-100,
html[data-theme='dark'] h2.text-zinc-900,
html[data-theme='dark'] .cachet-status-tab {
    color: var(--status-text-primary) !important;
}

html[data-theme='light'] .cachet-status-tab {
    color: var(--status-text-muted) !important;
}

html[data-theme='dark'] .cachet-status-tab:hover,
html[data-theme='light'] .cachet-status-tab:hover {
    color: var(--status-text-primary) !important;
}

html[data-theme='dark'] button[x-disclosure\:button],
html[data-theme='dark'] button[x-disclosure\:button] h3 {
    color: var(--status-text-primary) !important;
}

html[data-theme='light'] button[x-disclosure\:button],
html[data-theme='light'] button[x-disclosure\:button] h3 {
    color: var(--hid-dark-blue) !important;
}

html[data-theme='dark'] .bg-zinc-100 {
    background-color: var(--hid-surface-raised) !important;
}

html[data-theme='dark'] .hover\:bg-white:hover,
html[data-theme='dark'] a.hover\:bg-white:hover {
    background-color: color-mix(in srgb, var(--hid-medium-blue) 25%, var(--hid-surface-raised)) !important;
    color: var(--status-text-primary) !important;
}

html[data-theme='dark'] .rounded-lg.bg-white.px-5.py-10.text-center.text-sm.text-zinc-500,
html[data-theme='dark'] .rounded-lg.bg-white.px-5.py-10 {
    background-color: var(--status-surface) !important;
    color: var(--status-text-muted) !important;
}

html[data-theme='light'] .rounded-lg.bg-white.px-5.py-10.text-center.text-sm.text-zinc-500 {
    color: var(--status-text-muted) !important;
}