/* =============================================================
   7777labs design system — Homepage skin v2
   Design tokens sourced from Homepage Dashboard _standalone_.html (2026-05-18)
   ============================================================= */

/* ── Self-hosted variable fonts ──────────────────────────────── */
@font-face {
  font-family: 'Exo 2';
  src: url('/fonts/Exo2-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  --bg:        #0b1623;
  --bg-elev:   #11202f;
  --bg-card:   rgba(255,255,255,0.018);
  --bg-card-h: rgba(255,255,255,0.04);

  --hair:      rgba(160,200,235,0.07);
  --hair-b:    rgba(160,200,235,0.16);
  --hair-s:    rgba(160,200,235,0.28);

  --ink:       #d8e6f5;
  --ink-mute:  #8aa1bc;
  --ink-dim:   #5a738c;
  --ink-deep:  #3d556e;

  --cyan:      #5ee5ff;
  --cyan-d:    rgba(94,229,255,0.18);
  --lime:      #b9f23b;
  --lime-d:    rgba(185,242,59,0.18);
  --magenta:   #ff3e8a;
  --magenta-d: rgba(255,62,138,0.18);
  --orange:    #ff9542;
  --orange-d:  rgba(255,149,66,0.18);

  --st-up:     #6ee7a0;
  --st-warn:   #ff9542;
  --st-down:   #ff3e8a;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Exo 2', system-ui, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--mono) !important;
  position: relative;
}

/* Corner crosshair brackets */
body::after {
  content: "";
  position: fixed;
  inset: 14px;
  pointer-events: none;
  z-index: 9998;
  background:
    linear-gradient(var(--hair-s), var(--hair-s)) top    left  / 18px 1px  no-repeat,
    linear-gradient(var(--hair-s), var(--hair-s)) top    left  / 1px  18px no-repeat,
    linear-gradient(var(--hair-s), var(--hair-s)) top    right / 18px 1px  no-repeat,
    linear-gradient(var(--hair-s), var(--hair-s)) top    right / 1px  18px no-repeat,
    linear-gradient(var(--hair-s), var(--hair-s)) bottom left  / 18px 1px  no-repeat,
    linear-gradient(var(--hair-s), var(--hair-s)) bottom left  / 1px  18px no-repeat,
    linear-gradient(var(--hair-s), var(--hair-s)) bottom right / 18px 1px  no-repeat,
    linear-gradient(var(--hair-s), var(--hair-s)) bottom right / 1px  18px no-repeat;
}

/* ── Page wrapper ─────────────────────────────────────────────── */
#page_wrapper,
#inner_wrapper {
  background: transparent !important;
}

/* ── Header / info-widgets strip ─────────────────────────────── */
#information-widgets {
  background: transparent !important;
  border-bottom: 1px dashed var(--hair-b) !important;
  margin-bottom: 4px !important;
}

/* Resource + datetime text */
.widget-container,
.information-widget-resource,
.information-widget-datetime {
  font-family: var(--mono) !important;
  color: var(--ink-mute) !important;
}

/* Override Tailwind text-theme-* inside widgets */
#information-widgets .text-theme-800,
#information-widgets .dark\:text-theme-200 {
  color: var(--ink-dim) !important;
}

/* Resource progress bars */
.resource-usage > div {
  background: var(--cyan) !important;
  opacity: 0.7;
}

/* Datetime big clock */
.information-widget-datetime {
  font-family: var(--sans) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
}

/* ── Section group headings ───────────────────────────────────── */
h2.service-group-name {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;

  /* layout: icon (if any) | // | name | rule */
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 10px !important;

  /* default accent = cyan */
  color: var(--cyan) !important;
}

/* // prefix */
h2.service-group-name::before {
  content: "//";
  color: inherit;
  opacity: 0.55;
  font-weight: 500;
  flex-shrink: 0;
}

/* gradient rule line */
h2.service-group-name::after {
  content: "";
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: linear-gradient(90deg, currentColor 0%, rgba(94,229,255,0.08) 30%, transparent 70%);
  opacity: 0.35;
}

/* ── Per-section accent color cycling ────────────────────────── */
/* 1 → cyan, 2 → magenta, 3 → lime, 4 → orange, then repeats  */

.services-group:nth-child(4n+1) h2.service-group-name { color: var(--cyan)    !important; }
.services-group:nth-child(4n+2) h2.service-group-name { color: var(--magenta) !important; }
.services-group:nth-child(4n+3) h2.service-group-name { color: var(--lime)    !important; }
.services-group:nth-child(4n+4) h2.service-group-name { color: var(--orange)  !important; }

/* Left accent bar inherits section color */
.services-group:nth-child(4n+1) .service-container::before { background: var(--cyan);    }
.services-group:nth-child(4n+2) .service-container::before { background: var(--magenta); }
.services-group:nth-child(4n+3) .service-container::before { background: var(--lime);    }
.services-group:nth-child(4n+4) .service-container::before { background: var(--orange);  }

/* ── Service grid ─────────────────────────────────────────────
   grid-auto-rows: 72px  →  each li is 72px tall
   useEqualHeights: true (settings.yaml) makes each card div use
   Tailwind's h-[calc(100%-0.5rem)] = calc(72px - 8px) = 64px.
   mb-2 (8px) on the card div is the visual gap between rows.
   ─────────────────────────────────────────────────────────── */
ul.services-list {
  grid-auto-rows: 72px !important;
  align-items: stretch !important;
}

/* ── Service item (li) — must match grid row exactly ─────────── */
li.service {
  height: 72px !important;
  min-height: 0 !important;
  max-height: 72px !important;
  overflow: hidden !important;
}

/* ── Card div ────────────────────────────────────────────────── */
/* Height is set by Tailwind's h-[calc(100%-0.5rem)] via
   useEqualHeights. We only override visual styling here. */
.service-container {
  background: var(--bg-card) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
  transition: background 120ms ease, border-color 120ms ease !important;
}

/* Inner title row */
.service-title {
  height: 100% !important;
  overflow: hidden !important;
}

/* Name + description column */
.service-title-text {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Single-line truncation */
.service-name,
.service-description {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Status tag */
.service-tag {
  flex-shrink: 0 !important;
  align-self: center !important;
  overflow: hidden !important;
}

.service-container:hover {
  background: var(--bg-card-h) !important;
  border-color: var(--hair-b) !important;
}

/* Left accent bar */
.service-container::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--cyan);
  opacity: 0.45;
  transition: opacity 120ms, width 120ms;
  z-index: 5;
  flex-shrink: 0;
}
.service-container:hover::before {
  opacity: 1;
  width: 3px;
}

/* Icon area separator */
.service-icon {
  border-right: 1px solid var(--hair) !important;
  background: transparent !important;
}

/* Icon images — slight cyan glow */
.service-icon img {
  opacity: 0.9;
  filter: drop-shadow(0 0 5px rgba(94,229,255,0.12));
}

/* ── Service name + description ───────────────────────────────── */
.service-name {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

.service-description {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-style: italic !important;
  color: var(--ink-mute) !important;
  letter-spacing: 0 !important;
}

/* Override Tailwind color classes on name/desc */
.service-name.text-theme-700,
.dark\:text-theme-300.service-name {
  color: var(--ink) !important;
}
.service-description.text-theme-500,
.dark\:text-theme-300.service-description {
  color: var(--ink-mute) !important;
}

/* ── Status indicators ────────────────────────────────────────── */
/* Up / healthy */
.text-emerald-500 { color: var(--st-up)   !important; }
.bg-emerald-500   { background: var(--st-up)   !important; }

/* Warning / slow */
.text-yellow-500  { color: var(--st-warn)  !important; }
.bg-yellow-500    { background: var(--st-warn)  !important; }
.text-orange-400  { color: var(--st-warn)  !important; }

/* Down / error */
.text-red-500     { color: var(--st-down)  !important; }
.bg-red-500       { background: var(--st-down)  !important; }

/* Pending / unknown */
.text-gray-500    { color: var(--ink-dim)  !important; }

/* ── Search dialog ────────────────────────────────────────────── */
dialog {
  background: var(--bg-elev) !important;
  border: 1px solid var(--hair-b) !important;
  border-radius: 4px !important;
}

dialog input[type="text"] {
  background: var(--bg-elev) !important;
  color: var(--ink) !important;
  font-family: var(--mono) !important;
  font-size: 14px !important;
  border-color: var(--hair-b) !important;
}

dialog input[type="text"]:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 2px var(--cyan-d) !important;
  outline: none !important;
}

/* ── Tab bar (if tabs present) ───────────────────────────────── */
#tabs-header li button {
  font-family: var(--mono) !important;
  color: var(--ink-dim) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

#tabs-header li button[aria-selected="true"] {
  color: var(--cyan) !important;
  background: var(--cyan-d) !important;
}

/* ── Footer / pagefoot strip ─────────────────────────────────── */
footer,
#page-footer {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ink-dim) !important;
  border-top: 1px dashed var(--hair-b) !important;
  background: transparent !important;
}