/*
 * Najo admin panel — presentation layer.
 *
 * Layered on top of Filament's compiled stylesheet, so it deliberately styles
 * only `.fi-*` structural classes and Najo's own `.najo-*` classes. Everything
 * here is theme-aware: colours are expressed through Filament's CSS variables or
 * duplicated for `.dark`, so light and dark both look intentional.
 */

:root {
    --najo-radius: 1rem;
    --najo-radius-sm: 0.65rem;
    --najo-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px -12px rgb(15 23 42 / 0.12);
    --najo-shadow-lift: 0 2px 4px rgb(15 23 42 / 0.06), 0 18px 40px -18px rgb(15 23 42 / 0.28);
    --najo-border: rgb(226 232 240 / 0.9);
    --najo-surface: rgb(255 255 255 / 0.82);
    --najo-surface-solid: #ffffff;
    --najo-muted: rgb(100 116 139);
    --najo-grid: rgb(148 163 184 / 0.16);
    --najo-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.dark {
    --najo-shadow: 0 1px 2px rgb(0 0 0 / 0.24), 0 8px 24px -12px rgb(0 0 0 / 0.5);
    --najo-shadow-lift: 0 2px 6px rgb(0 0 0 / 0.32), 0 22px 48px -20px rgb(0 0 0 / 0.7);
    --najo-border: rgb(51 65 85 / 0.75);
    --najo-surface: rgb(30 41 59 / 0.72);
    --najo-surface-solid: rgb(30 41 59);
    --najo-muted: rgb(148 163 184);
    --najo-grid: rgb(148 163 184 / 0.14);
}

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */

.fi-body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

.fi-header-heading {
    font-weight: 700;
    letter-spacing: -0.022em;
}

.fi-header-subheading {
    color: var(--najo-muted);
    font-size: 0.875rem;
}

.fi-section-header-heading,
.fi-wi-chart .fi-section-header-heading {
    font-weight: 600;
    letter-spacing: -0.012em;
}

/* Tabular figures keep numeric columns aligned. */
.fi-wi-stats-overview-stat-value,
.najo-numeric,
.fi-ta-text-item-label:has(+ .fi-ta-text-item-suffix),
.fi-pagination-overview {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Surfaces — sections, widgets, tables and modals share one silhouette
   --------------------------------------------------------------------------- */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn,
.fi-modal-window {
    border-radius: var(--najo-radius);
}

.fi-section,
.fi-ta-ctn {
    border-color: var(--najo-border);
    box-shadow: var(--najo-shadow);
    backdrop-filter: saturate(1.05);
}

.fi-section {
    transition: box-shadow 240ms var(--najo-ease), border-color 240ms var(--najo-ease);
}

.fi-section:hover {
    box-shadow: var(--najo-shadow-lift);
}

.fi-section-content {
    padding-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Stat cards — glass surface, accent wash, sparkline bleed
   --------------------------------------------------------------------------- */

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    border-color: var(--najo-border);
    background: var(--najo-surface);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: var(--najo-shadow);
    transition:
        transform 320ms var(--najo-ease),
        box-shadow 320ms var(--najo-ease),
        border-color 320ms var(--najo-ease);
}

/* A soft accent wash in the top-right corner, tinted by the stat's colour. */
.fi-wi-stats-overview-stat::after {
    content: '';
    position: absolute;
    inset: -40% -30% auto auto;
    width: 14rem;
    height: 14rem;
    border-radius: 9999px;
    background: radial-gradient(
        circle at center,
        rgb(var(--primary-500) / 0.22),
        transparent 68%
    );
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 320ms var(--najo-ease), transform 420ms var(--najo-ease);
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--najo-shadow-lift);
}

.fi-wi-stats-overview-stat:hover::after {
    opacity: 1;
    transform: scale(1.08);
}

.najo-stat--success::after {
    background: radial-gradient(circle at center, rgb(var(--success-500) / 0.2), transparent 68%);
}

.najo-stat--warning::after {
    background: radial-gradient(circle at center, rgb(var(--warning-500) / 0.2), transparent 68%);
}

.najo-stat--danger::after {
    background: radial-gradient(circle at center, rgb(var(--danger-500) / 0.2), transparent 68%);
}

.najo-stat--info::after {
    background: radial-gradient(circle at center, rgb(var(--info-500) / 0.2), transparent 68%);
}

.najo-stat--gray::after {
    background: radial-gradient(circle at center, rgb(var(--gray-500) / 0.16), transparent 68%);
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--najo-muted);
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

@media (min-width: 1536px) {
    .fi-wi-stats-overview-stat-value {
        font-size: 2rem;
    }
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Let the sparkline sit flush against the bottom edge of the card. */
.fi-wi-stats-overview-stat-chart {
    margin: 0 -1.5rem -1.5rem;
    opacity: 0.9;
}

/* ---------------------------------------------------------------------------
   Charts
   --------------------------------------------------------------------------- */

.fi-wi-chart canvas {
    animation: najo-fade-in 480ms var(--najo-ease) both;
}

@keyframes najo-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Tables — sticky header, quiet rows, pinned actions
   --------------------------------------------------------------------------- */

/* Scroll the rows, not the page, so the header can stay put. Only engages once
   a table is taller than the region; short tables are unaffected. */
.fi-ta-content {
    max-height: min(72vh, 60rem);
    overflow: auto;
    scrollbar-width: thin;
}

.fi-modal .fi-ta-content,
.fi-wi .fi-ta-content {
    max-height: none;
}

.fi-ta-header-cell {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--najo-surface-solid);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 -1px 0 var(--najo-border);
}

.fi-ta-row {
    transition: background-color 160ms var(--najo-ease);
}

.fi-ta-row:hover {
    background-color: rgb(var(--primary-500) / 0.04);
}

.dark .fi-ta-row:hover {
    background-color: rgb(var(--primary-400) / 0.07);
}

/* Keep row actions reachable on wide tables. */
.fi-ta-actions-cell {
    position: sticky;
    right: 0;
    z-index: 4;
    background-color: var(--najo-surface-solid);
    box-shadow: -12px 0 12px -12px rgb(15 23 42 / 0.18);
}

.fi-ta-row:hover .fi-ta-actions-cell {
    background-color: color-mix(in srgb, var(--najo-surface-solid) 92%, rgb(var(--primary-500)));
}

@media (max-width: 640px) {
    /* Sticky cells fight with the mobile card layout. */
    .fi-ta-actions-cell {
        position: static;
        box-shadow: none;
    }
}

.fi-ta-empty-state {
    padding-block: 3.5rem;
}

.fi-ta-empty-state-icon-ctn {
    border-radius: 9999px;
    background: rgb(var(--primary-500) / 0.08);
}

/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */

.fi-sidebar-nav {
    scrollbar-width: thin;
}

.fi-sidebar-item-button {
    border-radius: var(--najo-radius-sm);
    transition: background-color 180ms var(--najo-ease), color 180ms var(--najo-ease);
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(
        90deg,
        rgb(var(--primary-500) / 0.16),
        rgb(var(--primary-500) / 0.04)
    );
    box-shadow: inset 2px 0 0 rgb(var(--primary-500));
}

.fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--najo-muted);
}

.fi-topbar {
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
}

/* ---------------------------------------------------------------------------
   Forms & buttons
   --------------------------------------------------------------------------- */

.fi-input-wrp,
.fi-btn,
.fi-badge,
.fi-dropdown-panel {
    border-radius: var(--najo-radius-sm);
}

.fi-btn {
    font-weight: 600;
    letter-spacing: -0.006em;
    transition: transform 180ms var(--najo-ease), box-shadow 180ms var(--najo-ease);
}

.fi-btn:active {
    transform: translateY(1px);
}

.fi-badge {
    font-weight: 600;
    letter-spacing: 0.005em;
}

.fi-fo-field-wrp-label {
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Loading states
   --------------------------------------------------------------------------- */

.fi-loading-section,
.najo-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--najo-radius);
    background: rgb(var(--gray-500) / 0.08);
}

.fi-loading-section::after,
.najo-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(255 255 255 / 0.28),
        transparent
    );
    transform: translateX(-100%);
    animation: najo-shimmer 1.6s infinite;
}

.dark .fi-loading-section::after,
.dark .najo-skeleton::after {
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.08), transparent);
}

@keyframes najo-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Livewire keeps polled regions in place; fade them while they refresh. */
[wire\:loading\.delay] {
    transition: opacity 180ms var(--najo-ease);
}

/* ---------------------------------------------------------------------------
   Najo components — cards, timeline, map, calendar
   --------------------------------------------------------------------------- */

.najo-card {
    border: 1px solid var(--najo-border);
    border-radius: var(--najo-radius);
    background: var(--najo-surface);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: var(--najo-shadow);
}

.najo-card--flush {
    padding: 0;
    overflow: hidden;
}

.najo-grid {
    display: grid;
    gap: 1rem;
}

.najo-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--najo-muted);
}

.najo-value {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Activity timeline */
.najo-timeline {
    position: relative;
    padding-left: 1.75rem;
}

.najo-timeline::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.6875rem;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--najo-grid) 12%,
        var(--najo-grid) 88%,
        transparent
    );
}

.najo-timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
}

.najo-timeline-dot {
    position: absolute;
    left: -1.75rem;
    top: 0.125rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    border: 1px solid var(--najo-border);
    background: var(--najo-surface-solid);
}

/* Notification feed */
.najo-feed-item {
    display: flex;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: var(--najo-radius-sm);
    transition: background-color 180ms var(--najo-ease);
}

.najo-feed-item:hover {
    background: rgb(var(--primary-500) / 0.05);
}

.najo-feed-item--unread {
    background: rgb(var(--primary-500) / 0.06);
    box-shadow: inset 2px 0 0 rgb(var(--primary-500));
}

/* Live map */
.najo-map {
    height: min(68vh, 40rem);
    width: 100%;
    border-radius: var(--najo-radius);
    z-index: 0;
}

.najo-map .leaflet-tile-pane {
    filter: none;
}

.dark .najo-map .leaflet-tile-pane {
    filter: invert(1) hue-rotate(185deg) brightness(0.92) contrast(0.92) saturate(0.7);
}

.dark .najo-map .leaflet-popup-content-wrapper,
.dark .najo-map .leaflet-popup-tip {
    background: rgb(30 41 59);
    color: rgb(226 232 240);
}

.najo-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.najo-map-dot {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.6);
}

.dark .najo-map-dot {
    box-shadow: 0 0 0 3px rgb(15 23 42 / 0.7);
}

/* Calendar */
.najo-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.375rem;
}

.najo-calendar-cell {
    min-height: 5.5rem;
    padding: 0.5rem;
    border: 1px solid var(--najo-border);
    border-radius: var(--najo-radius-sm);
    background: var(--najo-surface);
    transition: border-color 180ms var(--najo-ease), transform 180ms var(--najo-ease);
}

.najo-calendar-cell:hover {
    border-color: rgb(var(--primary-500) / 0.6);
    transform: translateY(-1px);
}

.najo-calendar-cell--muted {
    opacity: 0.45;
}

.najo-calendar-cell--today {
    border-color: rgb(var(--primary-500));
    box-shadow: inset 0 0 0 1px rgb(var(--primary-500) / 0.5);
}

.najo-calendar-date {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .najo-calendar {
        gap: 0.25rem;
    }

    .najo-calendar-cell {
        min-height: 4rem;
        padding: 0.375rem;
    }
}

/* Permissions matrix */
.najo-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

.najo-matrix th,
.najo-matrix td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--najo-border);
    text-align: left;
    white-space: nowrap;
}

.najo-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--najo-surface-solid);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--najo-muted);
}

.najo-matrix tbody th {
    position: sticky;
    left: 0;
    background: var(--najo-surface-solid);
    font-weight: 500;
    white-space: normal;
    min-width: 14rem;
}

.najo-matrix td {
    text-align: center;
}

.najo-scroll-x {
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Report preview */
.najo-report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

.najo-report-table th,
.najo-report-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--najo-border);
    text-align: left;
    vertical-align: top;
}

.najo-report-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--najo-surface-solid);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--najo-muted);
}

.najo-report-table tbody tr:hover {
    background: rgb(var(--primary-500) / 0.04);
}

/* ---------------------------------------------------------------------------
   Motion & accessibility
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .fi-wi-stats-overview-stat:hover {
        transform: none;
    }
}

@media print {
    .fi-sidebar,
    .fi-topbar,
    .fi-header-actions,
    .fi-pagination {
        display: none !important;
    }

    .fi-main {
        padding: 0 !important;
        max-width: none !important;
    }

    .fi-ta-content {
        max-height: none;
        overflow: visible;
    }
}

/* ---------------------------------------------------------------------------
   Topbar notification badge
   --------------------------------------------------------------------------- */

/* The ring has to match whatever the topbar is actually painted, not a fixed
   gray — Filament's default `ring-white dark:ring-gray-900` left the badge
   floating on the dark bar with no separation. */
/* Positioned here rather than with Tailwind utilities: Filament ships a
   precompiled stylesheet, so offsets it never scanned (-right-1.5) simply do
   not exist and the badge falls back on top of the bell. */
.najo-topbar-badge {
    position: absolute;
    top: -0.15rem;
    right: -0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.95rem;
    min-width: 0.95rem;
    padding: 0 0.22rem;
    border-radius: 9999px;
    background-color: #e11d48;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.fi-topbar .najo-topbar-badge {
    box-shadow:
        0 0 0 2px rgb(255 255 255),
        0 1px 2px rgb(15 23 42 / 0.25);
}

.dark .fi-topbar .najo-topbar-badge {
    box-shadow:
        0 0 0 2px rgb(15 23 42),
        0 1px 2px rgb(0 0 0 / 0.5);
}

/* The bell sat at gray-500 against a near-black topbar and effectively
   disappeared, leaving the count floating on its own. */
.fi-topbar a[aria-label='Notification centre'] {
    color: rgb(100 116 139);
}

.dark .fi-topbar a[aria-label='Notification centre'] {
    color: rgb(148 163 184);
}

.fi-topbar a[aria-label='Notification centre']:hover {
    color: rgb(var(--primary-500));
}

/* ===========================================================================
   Card hierarchy
   ---------------------------------------------------------------------------
   The dashboard used to present twelve stat cards at identical weight. These
   two classes are set by BuildsStatCards: the headline widget opts in to
   `--primary`, everything else falls to `--secondary`, so the eye lands on the
   four operational numbers first and reads the rest as support.
   =========================================================================== */

.najo-stat--primary {
    padding: 1.4rem 1.5rem;
    background-image: linear-gradient(
        135deg,
        rgb(var(--primary-500) / 0.10),
        transparent 62%
    );
    border-color: rgb(var(--primary-500) / 0.28);
}

.najo-stat--primary .fi-wi-stats-overview-stat-value {
    font-size: 2.6rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.najo-stat--primary .fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.najo-stat--secondary .fi-wi-stats-overview-stat-value {
    font-size: 1.65rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.najo-stat--secondary {
    padding: 1.05rem 1.15rem;
}

.najo-stat--secondary .fi-wi-stats-overview-stat-label {
    font-size: 0.78125rem;
    color: var(--najo-muted);
}

/* An empty description leaves a stray gap under the number. */
.najo-stat .fi-wi-stats-overview-stat-description:empty {
    display: none;
}

/* ===========================================================================
   Tables — the last column was unreadable
   ---------------------------------------------------------------------------
   The actions cell is sticky so row actions stay reachable on wide tables, but
   it was painted over the final data column: "Requested At" rendered as
   "14 Aug 2026 13:0" with the rest underneath it. Reserving a gutter equal to
   the cell's width lets the content scroll clear of it instead.
   =========================================================================== */

/* The gutter has to clear the sticky actions cell itself (~3.5rem plus its
   own padding), not merely add breathing room — at 1.25rem the last column's
   text still ran underneath it and read as truncated. */
.fi-ta-row > .fi-ta-cell:nth-last-child(2),
.fi-ta-header-cell:nth-last-child(2) {
    padding-right: 4.75rem;
}

.fi-ta-actions-cell {
    /* A real edge rather than a soft shadow, so an overlapped column reads as
       "there is more behind this" instead of as clipped text. */
    box-shadow:
        -1px 0 0 var(--najo-border),
        -14px 0 14px -14px rgb(15 23 42 / 0.35);
}

.dark .fi-ta-actions-cell {
    box-shadow:
        -1px 0 0 var(--najo-border),
        -14px 0 16px -14px rgb(0 0 0 / 0.6);
}

/* Numbers in tables should line up. */
.fi-ta-cell .fi-ta-text-item-label {
    font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   Empty states
   =========================================================================== */

.fi-ta-empty-state {
    padding-block: 3.5rem;
}

.fi-ta-empty-state-heading {
    font-size: 1rem;
    font-weight: 600;
}

.fi-ta-empty-state-description {
    max-width: 30rem;
    margin-inline: auto;
    color: var(--najo-muted);
}

/* ===========================================================================
   Request timeline
   ---------------------------------------------------------------------------
   Rendered by filament/infolists/request-timeline. Completed stages read
   quietly, the open stage is emphasised, and a bad outcome is marked in the
   danger tone — status is never carried by colour alone, every row has a glyph.
   =========================================================================== */

.najo-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.najo-timeline__item {
    position: relative;
    display: flex;
    gap: 0.85rem;
    padding-bottom: 1.35rem;
}

.najo-timeline__item:last-child {
    padding-bottom: 0;
}

/* The connecting rail, drawn between markers rather than through them. */
.najo-timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 0.84rem;
    top: 1.85rem;
    bottom: 0.15rem;
    width: 1px;
    background: var(--najo-border);
}

.najo-timeline__marker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 9999px;
    border: 1px solid var(--najo-border);
    background: var(--najo-surface-solid);
    color: var(--najo-muted);
}

.najo-timeline__item--done .najo-timeline__marker {
    color: rgb(var(--success-600));
    border-color: rgb(var(--success-600) / 0.4);
    background: rgb(var(--success-600) / 0.08);
}

.najo-timeline__item--bad .najo-timeline__marker {
    color: rgb(var(--danger-600));
    border-color: rgb(var(--danger-600) / 0.4);
    background: rgb(var(--danger-600) / 0.08);
}

.najo-timeline__item--current .najo-timeline__marker {
    color: rgb(var(--primary-600));
    border-color: rgb(var(--primary-600) / 0.55);
    background: rgb(var(--primary-600) / 0.1);
    box-shadow: 0 0 0 4px rgb(var(--primary-500) / 0.12);
}

.najo-timeline__body {
    min-width: 0;
    padding-top: 0.1rem;
}

.najo-timeline__label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(15 23 42);
}

.dark .najo-timeline__label {
    color: rgb(241 245 249);
}

.najo-timeline__item--current .najo-timeline__label {
    color: rgb(var(--primary-600));
}

.dark .najo-timeline__item--current .najo-timeline__label {
    color: rgb(var(--primary-400));
}

.najo-timeline__time {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--najo-muted);
}

.najo-timeline__ago {
    opacity: 0.75;
}

.najo-timeline__time--open {
    font-style: italic;
}

.najo-timeline__note {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--najo-muted);
    overflow-wrap: anywhere;
}

.najo-timeline__empty {
    font-size: 0.8125rem;
    color: var(--najo-muted);
}

/* ===========================================================================
   MECHANIC PROFILE
   ---------------------------------------------------------------------------
   Shared vocabulary for the mechanic module: the operational status card, the
   service chips, the fact grids, the weekly activity bars and the compact
   in-panel tables.

   Written as real CSS rather than Tailwind utilities on purpose. Filament ships
   a precompiled stylesheet, so an arbitrary utility class written in a Blade
   view here simply does not exist at runtime — an earlier attempt at the
   notification badge rendered a transparent pill for exactly that reason.

   Semantic tones are literal colours for the same reason: `rgb(var(--danger-600))`
   resolves to nothing outside Filament's own components.
   =========================================================================== */

.najo-status {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── The verdict: can this mechanic work right now ────────────────────────── */

.najo-verdict {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    border-radius: var(--najo-radius-sm);
    border: 1px solid var(--najo-border);
    background: var(--najo-surface);
}

.najo-verdict__icon {
    display: flex;
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.najo-verdict__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: rgb(15 23 42);
}

.dark .najo-verdict__title {
    color: rgb(241 245 249);
}

.najo-verdict__detail {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--najo-muted);
}

.najo-verdict--good {
    border-color: rgb(16 185 129 / 0.4);
    background: rgb(16 185 129 / 0.08);
}

.najo-verdict--good .najo-verdict__icon {
    color: rgb(5 150 105);
}

.najo-verdict--idle {
    border-color: rgb(100 116 139 / 0.4);
    background: rgb(100 116 139 / 0.08);
}

.najo-verdict--idle .najo-verdict__icon {
    color: rgb(100 116 139);
}

.najo-verdict--bad {
    border-color: rgb(239 68 68 / 0.4);
    background: rgb(239 68 68 / 0.08);
}

.najo-verdict--bad .najo-verdict__icon {
    color: rgb(220 38 38);
}

.dark .najo-verdict--good .najo-verdict__icon { color: rgb(52 211 153); }
.dark .najo-verdict--bad .najo-verdict__icon { color: rgb(248 113 113); }
.dark .najo-verdict--idle .najo-verdict__icon { color: rgb(148 163 184); }

/* ── The four statuses, side by side ──────────────────────────────────────── */

.najo-status__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.najo-status__tile {
    padding: 0.85rem 0.95rem;
    border-radius: var(--najo-radius-sm);
    border: 1px solid var(--najo-border);
    /* A quiet left edge carries the tone; the badge glyph carries the meaning. */
    border-left-width: 3px;
    background: var(--najo-surface-solid);
    min-width: 0;
}

.najo-status__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--najo-muted);
}

.najo-status__value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.35rem 0 0;
    font-size: 0.9375rem;
    font-weight: 650;
    color: rgb(15 23 42);
    overflow-wrap: anywhere;
}

.dark .najo-status__value {
    color: rgb(241 245 249);
}

.najo-status__glyph {
    display: flex;
    flex: 0 0 auto;
}

.najo-status__note {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--najo-muted);
    overflow-wrap: anywhere;
}

.najo-status__tile--success { border-left-color: rgb(16 185 129); }
.najo-status__tile--success .najo-status__glyph { color: rgb(5 150 105); }
.najo-status__tile--warning { border-left-color: rgb(245 158 11); }
.najo-status__tile--warning .najo-status__glyph { color: rgb(217 119 6); }
.najo-status__tile--danger { border-left-color: rgb(239 68 68); }
.najo-status__tile--danger .najo-status__glyph { color: rgb(220 38 38); }
.najo-status__tile--gray { border-left-color: rgb(148 163 184); }
.najo-status__tile--gray .najo-status__glyph { color: rgb(100 116 139); }

.dark .najo-status__tile--success .najo-status__glyph { color: rgb(52 211 153); }
.dark .najo-status__tile--warning .najo-status__glyph { color: rgb(251 191 36); }
.dark .najo-status__tile--danger .najo-status__glyph { color: rgb(248 113 113); }
.dark .najo-status__tile--gray .najo-status__glyph { color: rgb(148 163 184); }

/* ── Service chips ────────────────────────────────────────────────────────── */

.najo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.najo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid var(--najo-border);
    background: var(--najo-surface-solid);
    font-size: 0.8125rem;
    font-weight: 550;
    color: rgb(15 23 42);
    max-width: 100%;
}

.dark .najo-chip {
    color: rgb(226 232 240);
}

.najo-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The catalogue id matching actually compares on, kept visually subordinate. */
.najo-chip__id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--najo-muted);
}

.najo-note {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--najo-muted);
}

.najo-muted {
    color: var(--najo-muted);
}

/* ── Empty and warning blocks ─────────────────────────────────────────────── */

.najo-empty {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: var(--najo-radius-sm);
    border: 1px dashed var(--najo-border);
    background: var(--najo-surface);
    color: var(--najo-muted);
}

.najo-empty--tight {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
}

.najo-empty--warn {
    border-style: solid;
    border-color: rgb(245 158 11 / 0.45);
    background: rgb(245 158 11 / 0.08);
}

.najo-empty--warn > :first-child {
    color: rgb(217 119 6);
    flex: 0 0 auto;
}

.dark .najo-empty--warn > :first-child {
    color: rgb(251 191 36);
}

.najo-empty__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 650;
    color: rgb(15 23 42);
}

.dark .najo-empty__title {
    color: rgb(241 245 249);
}

.najo-empty__body {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* ── Fact grid (subscription) ─────────────────────────────────────────────── */

.najo-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.9rem 1.25rem;
}

.najo-fact {
    min-width: 0;
}

.najo-fact__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--najo-muted);
}

.najo-fact__value {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    font-weight: 550;
    color: rgb(15 23 42);
    overflow-wrap: anywhere;
}

.dark .najo-fact__value {
    color: rgb(241 245 249);
}

.najo-fact__value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

.najo-fact__aside {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--najo-muted);
}

/* ── Pills, reused by the subscription and job-history tables ─────────────── */

.najo-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.najo-pill--success { background: rgb(16 185 129 / 0.14); color: rgb(4 120 87); }
.najo-pill--warning { background: rgb(245 158 11 / 0.16); color: rgb(180 83 9); }
.najo-pill--danger { background: rgb(239 68 68 / 0.14); color: rgb(185 28 28); }
.najo-pill--info { background: rgb(59 130 246 / 0.14); color: rgb(29 78 216); }
.najo-pill--gray { background: rgb(148 163 184 / 0.18); color: rgb(71 85 105); }

.dark .najo-pill--success { color: rgb(52 211 153); }
.dark .najo-pill--warning { color: rgb(251 191 36); }
.dark .najo-pill--danger { color: rgb(248 113 113); }
.dark .najo-pill--info { color: rgb(147 197 253); }
.dark .najo-pill--gray { color: rgb(203 213 225); }

/* ── Performance figures ──────────────────────────────────────────────────── */

.najo-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.9rem 1.25rem;
}

.najo-figure {
    min-width: 0;
}

.najo-figure__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--najo-muted);
}

.najo-figure__value {
    margin: 0.25rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgb(15 23 42);
    overflow-wrap: anywhere;
}

.dark .najo-figure__value {
    color: rgb(241 245 249);
}

.najo-figure__value--good { color: rgb(5 150 105); }
.najo-figure__value--warn { color: rgb(217 119 6); }

/* A figure that cannot be calculated is stated at text size, not headline
   size — it is an absence, and should not read as a result. */
.najo-figure__value--muted {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--najo-muted);
}

.dark .najo-figure__value--good { color: rgb(52 211 153); }
.dark .najo-figure__value--warn { color: rgb(251 191 36); }

.najo-figure__note {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: var(--najo-muted);
}

/* ── Weekly activity bars ─────────────────────────────────────────────────── */

.najo-bars {
    margin: 1.5rem 0 0;
}

.najo-bars__caption {
    margin: 0 0 0.85rem;
    font-size: 0.75rem;
    color: var(--najo-muted);
}

.najo-bars__plot {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 9rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid var(--najo-border);
    position: relative;
}

.najo-bars__col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.najo-bars__stack {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    height: 100%;
    border-radius: 0.3rem 0.3rem 0 0;
    overflow: hidden;
}

.najo-bars__seg {
    display: block;
    width: 100%;
    min-height: 0;
}

.najo-bars__seg--good { background: rgb(16 185 129 / 0.85); }
.najo-bars__seg--bad { background: rgb(239 68 68 / 0.7); }
.najo-bars__seg--other { background: rgb(59 130 246 / 0.6); }

/* A week with no jobs still gets a visible baseline, so the gap reads as
   "nothing happened" rather than as a rendering failure. */
.najo-bars__none {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--najo-grid);
}

.najo-bars__tick {
    position: absolute;
    bottom: -1.2rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.625rem;
    color: var(--najo-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.najo-bars__key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin-top: 0.6rem;
    font-size: 0.75rem;
    color: var(--najo-muted);
}

.najo-bars__key span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.najo-bars__swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.2rem;
}

.najo-bars__swatch--good { background: rgb(16 185 129 / 0.85); }
.najo-bars__swatch--bad { background: rgb(239 68 68 / 0.7); }
.najo-bars__swatch--other { background: rgb(59 130 246 / 0.6); }

/* ── Compact in-panel tables (job history, subscription history) ──────────── */

.najo-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.najo-mini-table__caption {
    caption-side: top;
    text-align: left;
    padding-bottom: 0.6rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--najo-muted);
}

.najo-mini-table th,
.najo-mini-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    white-space: nowrap;
}

.najo-mini-table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--najo-muted);
    border-bottom: 1px solid var(--najo-border);
}

.najo-mini-table tbody td {
    border-bottom: 1px solid var(--najo-grid);
    color: rgb(15 23 42);
}

.dark .najo-mini-table tbody td {
    color: rgb(226 232 240);
}

.najo-mini-table tbody tr:last-child td {
    border-bottom: 0;
}

.najo-mini-table--linked tbody tr:hover td {
    background: var(--najo-grid);
}

.najo-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.najo-link {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    color: rgb(37 99 235);
    text-decoration: none;
}

.najo-link:hover {
    text-decoration: underline;
}

.dark .najo-link {
    color: rgb(96 165 250);
}

/* The trial tone. `info` was the one semantic colour the status tiles never
   needed until free trials arrived — a trial is neither a success (they have
   not paid) nor a warning (they are entitled to work). */
.najo-status__tile--info { border-left-color: rgb(59 130 246); }
.najo-status__tile--info .najo-status__glyph { color: rgb(37 99 235); }
.dark .najo-status__tile--info .najo-status__glyph { color: rgb(96 165 250); }