/* =============================================================================
   Custom Kener theme — ported from the VioServe design system
   (/var/www/vioserve/nextjs-frontend/src/styles/tokens.css)
   Docs: https://kener.ing/docs/v4/guides/custom-js-css-guide
   ============================================================================= */

:root {
  /* Typography — matches VioServe's actual computed font stack (no Google Fonts, system UI font) */
  --font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Radius — VioServe uses a tighter, more square radius scale */
  --radius: 0.375rem;
  /* Tailwind's rounded-3xl token — Kener's floating nav/pill buttons use this via inline styles */
  --radius-3xl: 0.5rem;

  /* Surfaces (light) */
  --background: #f4f4f5;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --popover: #ffffff;
  --popover-foreground: #09090b;

  /* Brand */
  --primary: #e63b2e;
  --primary-foreground: #ffffff;
  --secondary: #f0f0f2;
  --secondary-foreground: #09090b;
  --muted: #f0f0f2;
  --muted-foreground: #71717a;
  --accent: #f0f0f2;
  --accent-foreground: #e63b2e;
  --destructive: #ef4444;

  --border: rgba(0, 0, 0, 0.08);
  --input: rgba(0, 0, 0, 0.1);
  --ring: rgba(230, 59, 46, 0.5);

  --sidebar: #ffffff;
  --sidebar-foreground: #09090b;
  --sidebar-primary: #e63b2e;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f0f0f2;
  --sidebar-accent-foreground: #09090b;
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --sidebar-ring: #e63b2e;

  /* Glass header tokens — copied 1:1 from vioserve's tokens.css / Navbar.tsx */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.2);
}

.dark {
  /* Surfaces (dark) — matches VioServe's near-black theme */
  --background: #0b0b0f;
  --foreground: #fafafa;
  --card: #131318;
  --card-foreground: #fafafa;
  --popover: #131318;
  --popover-foreground: #fafafa;

  /* Brand */
  --primary: #e63b2e;
  --primary-foreground: #ffffff;
  --secondary: #1c1c22;
  --secondary-foreground: #fafafa;
  --muted: #1c1c22;
  --muted-foreground: #9ca3af;
  --accent: #1c1c22;
  --accent-foreground: #ff6b5e;
  --destructive: #ef4444;

  --border: rgba(255, 255, 255, 0.07);
  --input: rgba(255, 255, 255, 0.08);
  --ring: rgba(230, 59, 46, 0.5);

  --sidebar: #131318;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #e63b2e;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1c1c22;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: rgba(255, 255, 255, 0.07);
  --sidebar-ring: #e63b2e;

  --glass-bg: rgba(38, 39, 45, 0.8);
  --glass-border: rgba(255, 255, 255, 0.045);
}

/* ── Micro-interactions, ported from VioServe's .power-btn / .card ───────── */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(230, 59, 46, 0.15);
}

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

/* ── Navbar — vioserve glass styling, WITHOUT changing height ─────────────
   Source: /var/www/vioserve/nextjs-frontend/src/components/layout/Navbar.tsx
     <header class="sticky top-0 z-[100] h-16 lg:h-20 bg-[var(--glass-bg)]
       backdrop-blur-xl border-b border-[var(--glass-border)]
       shadow-[0_1px_3px_rgba(0,0,0,0.2)]">

   IMPORTANT: Kener hardcodes a fixed vertical offset for the content below
   this bar (pt-18 / sticky top-18 = 4.5rem) that assumes the bar's default
   height. Changing height/padding here without updating those offsets causes
   a visible gap or overlap between this bar and the .theme-plus-bar row
   underneath — so only background/blur/border/shadow/radius are touched,
   height and padding are left as Kener renders them. ──────────────────────── */
.fixed.inset-x-0.top-0.z-10.py-2 {
  padding: 0;
  /* Kener reserves exactly 4.5rem (pt-18 / sticky top-18) for this bar further
     down the page. Force the bar to actually fill that reserved space so it
     reads as one solid navbar instead of leaving a gap before .theme-plus-bar. */
  height: 4.5rem;
  display: flex;
  align-items: stretch;
  /* Background/blur/border live on this FULL-WIDTH element (not the centered
     max-width child below) so the bar spans edge-to-edge like vioserve's
     header, with only the inner content constrained to a max width. */
  border-radius: 0 !important;
  border-style: none !important;
  border-bottom: 1px solid var(--glass-border) !important;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.fixed.inset-x-0.top-0.z-10.py-2 > div {
  max-width: 1400px;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  align-items: center;
}

@media (min-width: 1024px) {
  .fixed.inset-x-0.top-0.z-10.py-2 > div {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.fixed.inset-x-0.top-0.z-10.py-2 > div > div {
  border-radius: 0 !important;
  border-style: none !important;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  height: 100%;
  width: 100%;
}

/* Nav links inside the bar — rounded-lg + hover surface, like vioserve's nav items */
nav[aria-label="main"] a {
  border-radius: 0.5rem !important;
  font-weight: 500;
}

/* Navbar brand logo (top-left) — square, not circular */
.fixed.inset-x-0.top-0.z-10.py-2 img {
  border-radius: 0.375rem !important;
}

/* Monitor list icons (Avatar) — vioserve uses square/rounded-md icons, not circles.
   shadcn's Avatar primitive hardcodes rounded-full on [data-slot="avatar"], so we
   override it here scoped to the public status page only. */
.kener-public [data-slot="avatar"] {
  border-radius: 0.5rem !important;
}

.kener-public [data-slot="avatar-image"],
.kener-public [data-slot="avatar-fallback"] {
  border-radius: 0.5rem !important;
}

/* ── theme-plus-bar (page switcher + RSS/share/theme/lang/timezone/bell) ───
   This is page-level content in Kener (rendered per-page, not part of the
   shared layout), not a real second navbar. Giving it its own glass/blur
   background made it compete visually with KenerNav above and read as
   "two navbars stacked". Instead keep it transparent — just a lightweight
   row of icon buttons sitting under the real navbar, like vioserve has no
   equivalent second bar at all. The individual buttons keep Kener's own
   pill styling (bg-background/80 + border), so it still looks intentional
   without needing a full-width colored strip. ─────────────────────────── */
.theme-plus-bar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Main heading — bolder / tighter, matching vioserve's headline weight */
main.kener-public h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}