/* ============================================================
   Citadel · Homepage skin — Option 1A "Terminal — dense rows"
   Source of truth: plans/dashboard-mockups/gethomepage/Citadel Homepage.html
   Design owner: Atif · rendered via Claude Design

   Palette (locked):
     ground        #0f1114     card interior
     ground-outer  #0a0c0f     page background outside the card
     surface       #1a1d23     each service row
     surface-hi    #20242b     row hover
     well          #15181d     search box, monogram tiles
     border        rgba(255,255,255,0.06)  hairlines everywhere
     text          #d7dade     values, primary labels
     text-2        #b9bdc3     group names + link names
     muted         #8b8f96     descriptions
     faint         #5f636a     labels, units, meta chips
     amber         #d4a85a     temp value · group index · > prompt · rationed accents
     ok            #4ade80     healthy status dot
     bad           #f87171     error state
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --cit-ground: #0f1114;
  --cit-ground-outer: #0a0c0f;
  --cit-surface: #1a1d23;
  --cit-surface-hi: #20242b;
  --cit-well: #15181d;
  --cit-border: rgba(255,255,255,0.06);
  --cit-border-hi: rgba(255,255,255,0.09);
  --cit-text: #d7dade;
  --cit-text-2: #b9bdc3;
  --cit-muted: #8b8f96;
  --cit-faint: #5f636a;
  --cit-amber: #d4a85a;
  --cit-ok: #4ade80;
  --cit-bad: #f87171;
  --cit-sans: 'Space Grotesk', system-ui, sans-serif;
  --cit-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---- 1 · outer + wrapper ---------------------------------- */
body {
  background: var(--cit-ground-outer) !important;
  color: var(--cit-text);
  font-family: var(--cit-sans) !important;
  -webkit-font-smoothing: antialiased;
  padding: 24px 32px !important;
}
#page_container,
#page_wrapper,
.app-container,
body > div {
  background: var(--cit-ground) !important;
  border: 1px solid var(--cit-border) !important;
  border-radius: 14px !important;
  padding: 26px 28px 22px !important;
  max-width: 1500px;
  margin: 0 auto;
}
/* nested wrappers should stay transparent so we don't stack cards */
#page_container > div,
#page_wrapper > div,
.app-container > div,
body > div > div {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
* { backdrop-filter: none !important; text-shadow: none !important; }
.shadow, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none !important; }

/* ---- 2 · command bar --------------------------------------- */
#information-widgets {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 0 0 16px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--cit-border) !important;
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-radius: 0 !important;
}
/* Citadel wordmark: 30×30 castle icon + two-line badge, on the left. */
#information-widgets::before {
  content: "";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='12' y='11' width='6' height='7' fill='%23c3c7cd'/%3E%3Crect x='21' y='11' width='6' height='7' fill='%23c3c7cd'/%3E%3Crect x='30' y='11' width='6' height='7' fill='%23c3c7cd'/%3E%3Crect x='12' y='17' width='24' height='23' fill='%23c3c7cd'/%3E%3Crect x='22' y='24' width='4' height='10' fill='%23d4a85a'/%3E%3Crect x='8' y='41' width='32' height='3' rx='1.5' fill='%238b8f96'/%3E%3C/svg%3E") no-repeat center / contain;
}
#information-widgets::after {
  content: "CITADEL\A HOME NODE";
  flex-shrink: 0;
  font-family: var(--cit-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--cit-text);
  white-space: pre;
  line-height: 1.55;
  padding-right: 18px;
  border-right: 1px solid var(--cit-border);
  align-self: center;
}

/* greeting text — light gray, sans, 15px */
#information-widgets .font-medium,
#information-widgets h1 {
  font-family: var(--cit-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--cit-text-2) !important;
}

/* every figure is mono in the command bar */
#information-widgets span,
#information-widgets div {
  font-family: var(--cit-mono) !important;
}

/* resource meter values — WHITE by default; only temp is amber */
.information-widget-resource .text-theme-800,
.information-widget-resource .text-theme-200,
.information-widget-resource .font-medium,
.information-widget-resource .font-bold {
  color: var(--cit-text) !important;
  font-family: var(--cit-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
/* temp = the last resource in widgets.yaml, gets amber */
.information-widget-resource:last-of-type .text-theme-800,
.information-widget-resource:last-of-type .text-theme-200,
.information-widget-resource:last-of-type .font-medium,
.information-widget-resource:last-of-type .font-bold {
  color: var(--cit-amber) !important;
}

/* resource labels + widget-command labels — 10px, faint, wide track */
#information-widgets .text-\[8px\],
#information-widgets .text-\[10px\],
#information-widgets .text-xs {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--cit-faint) !important;
}

/* icons inside resource widgets */
.information-widget-resource svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--cit-muted) !important;
  opacity: 0.85;
}

/* meters (progress rails) — 2px hairline rules, not pills */
#information-widgets .rounded-full { border-radius: 1px !important; background: rgba(255,255,255,0.06) !important; height: 2px !important; }
#information-widgets .rounded-full > div { border-radius: 1px !important; background: var(--cit-muted) !important; }

/* datetime + weather block — sits between resources and search */
.information-widget-datetime span,
.information-widget-openmeteo span {
  color: var(--cit-text) !important;
  font-size: 13px !important;
}
.information-widget-openmeteo,
.information-widget-datetime {
  padding: 0 6px !important;
}

/* search box — 170px well, > prompt, muted placeholder */
#information-widgets input,
input[type="text"] {
  background: var(--cit-well) !important;
  border: 1px solid var(--cit-border) !important;
  border-radius: 7px !important;
  font-family: var(--cit-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--cit-text) !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  width: 170px !important;
}
#information-widgets input::placeholder { color: var(--cit-faint) !important; }
#information-widgets input:focus { border-color: rgba(212,168,90,0.45) !important; outline: none !important; }

/* ---- 3 · group headers = numbered hairline rules ----------- */
.services-group { counter-increment: cit-group; margin-bottom: 22px !important; }
#myservices { counter-reset: cit-group; }
.services-group > h2,
#myservices h2 {
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--cit-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--cit-text-2) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: none !important;
}
.services-group > h2::before {
  content: "0" counter(cit-group);
  color: var(--cit-amber);
  letter-spacing: 0.14em;
  flex-shrink: 0;
}
.services-group > h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cit-border);
}

/* ---- 4 · services as 2-column rows -------------------------- */
.services-group > ul,
#myservices ul {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 1px !important;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--cit-border);
  border-radius: 10px;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}
.service, li.service { margin: 0 !important; }
.service-card, li.service > div {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  min-height: 52px;
  padding: 11px 15px !important;
  background: var(--cit-surface) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 110ms ease;
}
.service-card:hover, li.service > div:hover { background: var(--cit-surface-hi) !important; }

/* service icon — replaces the design's monogram tile.
   26×26 rounded square, subtle border. Icon inside desaturated. */
.service-icon,
.service-card img,
.service-card svg:not(.status-icon) {
  width: 26px !important;
  height: 26px !important;
  flex-shrink: 0;
  border: 1px solid var(--cit-border-hi);
  border-radius: 5px;
  padding: 3px;
  background: var(--cit-well);
  opacity: 0.9;
}

.service-title,
.service-name {
  font-family: var(--cit-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--cit-text) !important;
}
.service-description {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  color: var(--cit-faint) !important;
}

/* widget stats: right-aligned inline column-stack pairs */
.service-widget { margin-left: auto !important; flex-shrink: 0; }
.service-widget > div, .service-widget ul {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.service-block, .service-widget > div > div {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  text-align: right !important;
}
.service-block .font-bold, .service-widget .font-bold, .service-widget .font-medium {
  font-family: var(--cit-mono) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--cit-text) !important;
}
.service-block .uppercase, .service-widget .uppercase,
.service-block .text-\[10px\], .service-widget .text-\[10px\] {
  font-family: var(--cit-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--cit-faint) !important;
  white-space: nowrap;
}

/* ---- 5 · status: dots + quiet error chip ------------------- */
[class*="status-"] {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}
.status-online, .status-running {
  background: var(--cit-ok) !important;
  box-shadow: 0 0 6px rgba(74,222,128,0.4);
}
.status-partial, .status-paused {
  background: var(--cit-amber) !important;
  box-shadow: 0 0 6px rgba(212,168,90,0.4);
}
.status-offline, .status-dead, .status-exited, .status-down {
  background: var(--cit-bad) !important;
  box-shadow: none;
}

.widget-error, .service-widget [class*="rose-"] {
  margin-left: auto !important;
  padding: 3px 7px !important;
  background: rgba(248,113,113,0.09) !important;
  border: 1px solid rgba(248,113,113,0.3) !important;
  border-radius: 5px !important;
  font-family: var(--cit-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--cit-bad) !important;
  white-space: nowrap;
  box-shadow: none !important;
}
.widget-error svg, .widget-error img { display: none !important; }
.widget-error span { font-size: 0 !important; }
.widget-error::after { content: "api err"; font-size: 10px; }

/* ---- 6 · bookmarks as dense link columns ------------------- */
.bookmark-group > h2 {
  font-family: var(--cit-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--cit-faint) !important;
  padding-bottom: 8px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid var(--cit-border) !important;
}
.bookmark-group > h2::after { content: none !important; }
.bookmark-text,
.bookmark-group li > a > div {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 2px !important;
  box-shadow: none !important;
}
.bookmark-text:hover { background: rgba(255,255,255,0.022) !important; }
.bookmark-name {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--cit-text-2) !important;
}
.bookmark-description {
  margin-left: auto !important;
  font-family: var(--cit-mono) !important;
  font-size: 10px !important;
  color: var(--cit-faint) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.bookmark-icon,
.bookmark-text > .rounded {
  width: 18px !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--cit-mono) !important;
  font-size: 10px !important;
  color: var(--cit-faint) !important;
}

/* ---- 7 · footer -------------------------------------------- */
#footer, .footer {
  font-family: var(--cit-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cit-faint) !important;
  border-top: 1px solid var(--cit-border);
  margin-top: 26px;
  padding-top: 14px;
}

/* ---- 8 · laptop breakpoint: single column ------------------ */
@media (max-width: 1280px) {
  .services-group > ul, #myservices ul {
    grid-template-columns: minmax(0,1fr) !important;
  }
  #information-widgets { flex-wrap: wrap !important; }
  body { padding: 12px !important; }
  #page_container, #page_wrapper, .app-container, body > div {
    padding: 18px !important;
    border-radius: 10px !important;
  }
}

/* ------------------------------------------------------------
   Notes
   · Faithful to Option 1A in
     plans/dashboard-mockups/gethomepage/Citadel Homepage.html.
   · Two design elements are NOT achievable via pure CSS on
     Homepage's current DOM and are omitted:
     - 2-letter service monograms (would replace icons — needs
       custom.js to rewrite each tile)
     - Per-group "N svc · X degraded" summary chip on the right
       (would need counted DOM traversal — custom.js)
     If either becomes worth building, add a custom.js in the
     same config dir; Homepage loads it automatically.
   · Homepage's Tailwind class names shift between releases. If
     a rule misses, inspect the element and add its class beside
     the matching selector — the variables above stay valid.
   ------------------------------------------------------------ */