/* ── Self-hosted Inter (Tabler's default font, loaded locally) ───────────── */
@font-face {
    font-family: 'Inter';
    src: url('/css/fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal oblique;
    font-display: block;
}
/* ── TSMonitor theme — v1 colors, reapplied as Tabler variable overrides ──
   Scope: :root + [data-bs-theme="dark"] (the app is always dark, but this
   keeps the override honest as a proper theme rather than a global reset). ── */
:root,
[data-bs-theme="dark"] {
    /* Font */
    --tblr-font-sans-serif: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* Base surfaces */
    --tblr-body-bg:               rgb(8, 9, 13);
    --tblr-body-bg-rgb:           8, 9, 13;
    --tblr-bg-surface:            rgb(14, 15, 22);
    --tblr-bg-surface-secondary:  rgb(20, 21, 32);
    --tblr-bg-surface-tertiary:   rgb(20, 21, 32);
    --tblr-card-bg:               rgb(14, 15, 22);

    /* Text */
    --tblr-body-color:            rgb(161, 161, 170);
    --tblr-body-color-rgb:        161, 161, 170;
    --tblr-emphasis-color:        #ffffff;
    --tblr-heading-color:         #ffffff;
    --tblr-secondary-color:       rgb(100, 100, 115);
    --tblr-secondary-color-rgb:   100, 100, 115;

    /* Borders — kept faint on purpose, just enough to separate surfaces */
    --tblr-border-color:             rgba(255, 255, 255, .04);
    --tblr-border-color-translucent: rgba(255, 255, 255, .07);
    --tblr-card-border-color:        rgba(255, 255, 255, .04);

    /* Links */
    --tblr-link-color:       #4493f8;
    --tblr-link-hover-color: #6ba7fa;

    /* Brand / status colors */
    --tblr-primary:      #4493f8;
    --tblr-primary-rgb:  68, 147, 248;
    --tblr-primary-fg:   #ffffff;
    --tblr-success:      #22c55e;
    --tblr-success-rgb:  34, 197, 94;
    --tblr-danger:       #ef4444;
    --tblr-danger-rgb:   239, 68, 68;
    --tblr-warning:      #fbbf24;
    --tblr-warning-rgb:  251, 191, 36;

    /* Vertical navbar (sidebar) */
    --tblr-navbar-bg:                var(--tblr-bg-surface);
    --tblr-navbar-border-color:      var(--tblr-border-color);
    --tblr-navbar-color:             rgb(161, 161, 170);
    --tblr-navbar-active-color:      #4493f8;
    --tblr-navbar-active-bg:         rgba(68, 147, 248, .1);
    --tblr-navbar-hover-color:       #ffffff;
    --tblr-navbar-brand-color:       #ffffff;
    --tblr-navbar-brand-hover-color: #ffffff;
}

/* Belt & suspenders: Tabler's own .navbar base rule redefines
   --tblr-navbar-active-bg (a plain 8% primary tint) directly on any element
   carrying the .navbar class, which otherwise wins over the :root value
   above since it targets the element itself rather than being inherited.
   Same specificity as .navbar, loaded after it, so this wins deterministically. */
.navbar-vertical {
    --tblr-navbar-active-bg:    rgba(68, 147, 248, .1);
    --tblr-navbar-active-color: #4493f8;
}

/* Same belt & suspenders for the link color itself: declared explicitly
   with an ID selector so it always wins, instead of trusting the
   --tblr-nav-link-color -> --tblr-navbar-color chain to resolve as expected.
   Only .active should be primary — everything else stays the sidebar's
   default muted color (project names get their own white/bold rule below). */
#sidebar-menu .nav-link {
    color: var(--tblr-navbar-color);
}
#sidebar-menu .nav-link.active {
    color: var(--tblr-navbar-active-color);
}

/* ── Sidebar brand/logo: smaller, centered, breathing room from the edges ──
   #tsm-brand (ID) is needed for --tblr-sidebar-brand-padding-x: Tabler's own
   .navbar-vertical.navbar-expand-lg .navbar-brand rule sets it directly on
   this same element with higher specificity than any class of ours could
   reach, so a plain class override here would silently lose to it. ──────── */
#tsm-brand {
    --tblr-navbar-brand-font-size: 1.1rem;
    --tblr-sidebar-brand-padding-x: 1.5rem;
}

/* ── Chart.js reads these directly (canvas can't consume Tabler utility classes) ── */
:root {
    --tsm-chart-text:  var(--tblr-secondary-color, #9aa0ac);
    --tsm-chart-grid:  rgba(255, 255, 255, .08);
}

/* ── Sidebar density — Tabler's default row padding (0.75rem) reads looser
   than v1; tighten to match without touching the component structure. ──── */
#sidebar-menu .navbar-nav {
    --tblr-sidebar-nav-padding-y: .5rem;
    --tblr-sidebar-nav-padding-x: .625rem;
}

/* Target sub-list: no extra right inset (the % badge already has its own
   spacing), left indent comes from the link's own ps-4 utility instead. */
#sidebar-menu .tsm-subnav {
    padding-inline-end: 0;
}

/* Guard rail: make sure long project/target names always truncate instead
   of pushing the % out of view, regardless of Tabler's own breakpoint rules. */
#sidebar-menu .nav-link { min-width: 0; }
#sidebar-menu .nav-link-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Nav % indicator — plain text (no pill/background), like v1 ─────────── */
.nav-pct {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--tblr-secondary-color);
    flex-shrink: 0;
}
.nav-link.active .nav-pct { color: inherit; }

/* ── Project vs target row styling ────────────────────────────────────────
   Default: project names bold + white, target names normal weight + grey
   (grey is just the navbar's own default color — nothing to set).
   Selected: both switch to primary blue text (handled by Tabler's own
   --tblr-navbar-active-color), overriding the white default here. ───────── */
.nav-project-link .nav-link-title {
    color: #ffffff;
    font-weight: 700;
}
.nav-project-link.active .nav-link-title {
    color: var(--tblr-navbar-active-color);
}

/* ── Small functional affordances not covered by a Tabler utility class ─── */
.tsm-clickable { cursor: pointer; }
.tsm-clickable:hover { border-color: rgba(var(--tblr-primary-rgb), .5); }

.sky-chart-wrap { position: relative; height: 220px; }
.sky-chart-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.sky-chart-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--tblr-secondary-color);
    font-size: .8125rem;
    pointer-events: none;
}
.sky-moon-badge { display: inline-flex; align-items: center; gap: 4px; }

.aladin-wrap { border-radius: var(--tblr-border-radius); overflow: hidden; position: relative; background: #000; aspect-ratio: 1 / 1; }
.aladin-wrap .aladin-location { display: none !important; }
#aladin-lite-div { width: 100% !important; height: 100% !important; position: absolute; inset: 0; }

.view { animation: tsm-fadein .18s ease; }
@keyframes tsm-fadein { from { opacity: 0 } to { opacity: 1 } }