/*
 * zitro.works window content system
 *
 * Desktop chrome and app identities stay expressive. The work surfaces inside
 * windows are deliberately quieter: one spacing rhythm, flat layers, precise
 * separators and restrained status colour.
 */
#zw-desktop {
  --zw-content-canvas: #f4f6f7;
  --zw-content-surface: #ffffff;
  --zw-content-subtle: #eef1f3;
  --zw-content-ink: #182b38;
  --zw-content-muted: #667985;
  --zw-content-line: #d8dfe3;
  --zw-content-line-strong: #bdc8ce;
  --zw-content-accent: #176b86;
  --zw-content-accent-soft: #e5f1f4;
  --zw-content-good: #23745e;
  --zw-content-good-soft: #e8f3ee;
  --zw-content-warn: #93601f;
  --zw-content-warn-soft: #f7efe1;
  --zw-content-danger: #a5424d;
  --zw-content-danger-soft: #f8eaec;
  --zw-content-radius: 4px;
  --zw-content-space: 16px;
}

/* Base work surface and type hierarchy */
#zw-desktop .zw-window-body {
  color: var(--zw-content-ink);
  background: var(--zw-content-canvas);
  font-size: 12px;
  line-height: 1.5;
}

#zw-desktop .zw-window-body h1,
#zw-desktop .zw-window-body h2,
#zw-desktop .zw-window-body h3 {
  color: var(--zw-content-ink);
  letter-spacing: -.015em;
}

#zw-desktop .zw-window-body h1 { font-size: 21px; font-weight: 680; }
#zw-desktop .zw-window-body h2 { font-size: 18px; font-weight: 680; }
#zw-desktop .zw-window-body h3 { font-size: 13px; font-weight: 680; }

#zw-desktop .zw-window-body .zw-kicker,
#zw-desktop .zw-dialog .zw-kicker {
  color: var(--zw-content-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: none;
}

#zw-desktop .zw-window-body .zw-muted,
#zw-desktop .zw-window-body .zw-small { color: var(--zw-content-muted); }
#zw-desktop .zw-window-body .zw-small { font-size: 10.5px; }

/* Shared navigation */
#zw-desktop .zw-app-shell,
#zw-desktop .zw-system-layout,
#zw-desktop .zw-help-layout { background: var(--zw-content-canvas); }

#zw-desktop .zw-app-side,
#zw-desktop .zw-system-nav,
#zw-desktop .zw-help-index {
  padding: 12px 8px;
  border-color: var(--zw-content-line);
  background: #eceff1;
}

#zw-desktop .zw-side-title {
  padding: 2px 9px 9px;
  color: var(--zw-content-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: none;
}

#zw-desktop .zw-side-btn,
#zw-desktop .zw-system-nav .zw-side-btn {
  position: relative;
  min-height: 34px;
  padding: 7px 9px 7px 12px;
  border: 0;
  border-radius: 2px;
  color: #415560;
  background: transparent;
  font-size: 11px;
  font-weight: 520;
}

#zw-desktop .zw-side-btn:hover,
#zw-desktop .zw-system-nav .zw-side-btn:hover { background: #e2e7ea; }

#zw-desktop .zw-side-btn.active,
#zw-desktop .zw-system-nav .zw-side-btn.active {
  color: #173847;
  background: var(--zw-content-surface);
  box-shadow: inset 3px 0 var(--zw-content-accent);
  font-weight: 680;
}

#zw-desktop .zw-side-btn:disabled { color: #87959d; background: transparent; }

/* Main headers are tool headers, not hero cards */
#zw-desktop .zw-app-main,
#zw-desktop .zw-system-content { padding: 18px 20px; background: var(--zw-content-canvas); }

#zw-desktop .zw-app-head,
#zw-desktop .zw-system-hero,
#zw-desktop .zw-operational-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--zw-content-line);
  border-radius: 0;
  background: transparent;
}

#zw-desktop .zw-app-head p,
#zw-desktop .zw-operational-hero p,
#zw-desktop .zw-system-hero p {
  max-width: 700px;
  margin-top: 4px;
  color: var(--zw-content-muted);
  font-size: 11px;
  line-height: 1.45;
}

#zw-desktop .zw-operational-app {
  padding: 18px 20px;
  background: var(--zw-content-canvas);
}

/* Controls */
#zw-desktop .zw-window-body .zw-btn,
#zw-desktop .zw-dialog .zw-btn {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--zw-content-line-strong);
  border-radius: var(--zw-content-radius);
  color: #263d49;
  background: var(--zw-content-surface);
  box-shadow: none;
  font-size: 11px;
  font-weight: 640;
}

#zw-desktop .zw-window-body .zw-btn:hover,
#zw-desktop .zw-dialog .zw-btn:hover {
  border-color: #9fadb4;
  background: #f6f8f9;
}

#zw-desktop .zw-window-body .zw-btn.primary,
#zw-desktop .zw-dialog .zw-btn.primary {
  border-color: var(--zw-content-accent);
  color: #fff;
  background: var(--zw-content-accent);
  box-shadow: none;
}

#zw-desktop .zw-window-body .zw-btn.primary:hover,
#zw-desktop .zw-dialog .zw-btn.primary:hover { background: #125c74; }

#zw-desktop .zw-window-body .zw-btn.quiet {
  border-color: transparent;
  color: var(--zw-content-accent);
  background: transparent;
}

#zw-desktop .zw-window-body .zw-btn:disabled { opacity: .48; }

#zw-desktop .zw-window-body .zw-search,
#zw-desktop .zw-window-body .zw-field input,
#zw-desktop .zw-window-body .zw-field select,
#zw-desktop .zw-dialog .zw-field input,
#zw-desktop .zw-dialog .zw-field select {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--zw-content-line-strong);
  border-radius: var(--zw-content-radius);
  color: var(--zw-content-ink);
  background: var(--zw-content-surface);
  box-shadow: none;
}

#zw-desktop .zw-window-body .zw-search:focus,
#zw-desktop .zw-window-body .zw-field input:focus,
#zw-desktop .zw-window-body .zw-field select:focus,
#zw-desktop .zw-dialog .zw-field input:focus,
#zw-desktop .zw-dialog .zw-field select:focus {
  border-color: var(--zw-content-accent);
  outline: 2px solid #176b8626;
  outline-offset: 0;
}

#zw-desktop .zw-window-body .zw-badge,
#zw-desktop .zw-dialog .zw-badge {
  min-height: 21px;
  padding: 2px 6px;
  border: 1px solid var(--zw-content-line-strong);
  border-radius: 3px;
  color: #53656e;
  background: transparent;
  font-size: 9.5px;
  font-weight: 650;
}

#zw-desktop .zw-window-body .zw-badge.good {
  border-color: #a8cbbc;
  color: var(--zw-content-good);
  background: var(--zw-content-good-soft);
}

#zw-desktop .zw-window-body .zw-badge.warn {
  border-color: #d9c39f;
  color: var(--zw-content-warn);
  background: var(--zw-content-warn-soft);
}

/* Shared panels and data rows */
#zw-desktop .zw-card,
#zw-desktop .zw-operational-card,
#zw-desktop .zw-instance-fact,
#zw-desktop .zw-system-panel,
#zw-desktop .zw-system-stat,
#zw-desktop .zw-files-backend {
  border: 1px solid var(--zw-content-line);
  border-radius: var(--zw-content-radius);
  color: var(--zw-content-ink);
  background: var(--zw-content-surface);
  background-image: none;
  box-shadow: none;
}

#zw-desktop .zw-card.soft { background: var(--zw-content-subtle); }

#zw-desktop .zw-operational-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--zw-content-line);
  border-radius: var(--zw-content-radius);
  background: var(--zw-content-surface);
}

#zw-desktop .zw-operational-card {
  border: 0;
  border-right: 1px solid var(--zw-content-line);
  border-bottom: 1px solid var(--zw-content-line);
  border-radius: 0;
}

#zw-desktop .zw-operational-card:nth-child(2n) { border-right: 0; }
#zw-desktop .zw-operational-card:nth-last-child(-n+2) { border-bottom: 0; }

#zw-desktop .zw-instance-facts { gap: 0; border: 1px solid var(--zw-content-line); border-radius: var(--zw-content-radius); overflow: hidden; }
#zw-desktop .zw-instance-fact { border: 0; border-right: 1px solid var(--zw-content-line); border-radius: 0; }
#zw-desktop .zw-instance-fact:last-child { border-right: 0; }

#zw-desktop .zw-system-summary { gap: 0; overflow: hidden; border: 1px solid var(--zw-content-line); border-radius: var(--zw-content-radius); }
#zw-desktop .zw-system-stat { border: 0; border-right: 1px solid var(--zw-content-line); border-radius: 0; }
#zw-desktop .zw-system-stat:last-child { border-right: 0; }
#zw-desktop .zw-system-stat span,
#zw-desktop .zw-instance-fact span { color: var(--zw-content-muted); font-size: 9.5px; letter-spacing: .035em; text-transform: none; }
#zw-desktop .zw-system-stat strong { color: var(--zw-content-ink); font-size: 15px; }

#zw-desktop .zw-system-item {
  gap: 12px;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--zw-content-line);
  border-radius: 0;
  background: transparent;
}

#zw-desktop .zw-system-item:last-child { border-bottom: 0; }
#zw-desktop .zw-system-item small { color: var(--zw-content-muted); line-height: 1.45; }

#zw-desktop .zw-row { border-color: var(--zw-content-line); }

/* Empty states read like useful workspace messages, not promo cards */
#zw-desktop .zw-operational-empty,
#zw-desktop .zw-system-empty,
#zw-desktop .zw-files-empty,
#zw-desktop .zw-help-empty {
  min-height: 0;
  place-items: start;
  margin-top: 14px;
  padding: 22px;
  border: 1px solid var(--zw-content-line);
  border-radius: var(--zw-content-radius);
  color: var(--zw-content-muted);
  background: var(--zw-content-surface);
  text-align: left;
}

#zw-desktop .zw-operational-empty > div { max-width: 650px; }
#zw-desktop .zw-operational-empty svg { width: 27px; height: 27px; margin: 0 0 12px; color: var(--zw-content-accent); }
#zw-desktop .zw-operational-empty h3 { color: var(--zw-content-ink); }

/* App-specific structures use the same visual grammar */
#zw-desktop .zw-files-backend { margin-top: 0; padding: 14px; }
#zw-desktop .zw-files-live-list { gap: 0; border-top: 1px solid var(--zw-content-line); }
#zw-desktop .zw-files-live-entry {
  min-height: 38px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--zw-content-line);
  border-radius: 0;
  background: transparent;
}
#zw-desktop .zw-files-live-entry:hover { background: var(--zw-content-subtle); }

#zw-desktop .zw-package-note {
  padding: 10px 12px;
  border: 0;
  border-left: 3px solid #c19a59;
  border-radius: 0;
  color: #5f5647;
  background: var(--zw-content-warn-soft);
}

#zw-desktop .zw-security-note {
  padding: 11px 12px;
  border: 0;
  border-left: 3px solid var(--zw-content-good);
  border-radius: 0;
  color: #2b5548;
  background: var(--zw-content-good-soft);
}

#zw-desktop .zw-security-note.warn {
  border-left-color: var(--zw-content-warn);
  color: #654e2e;
  background: var(--zw-content-warn-soft);
}

#zw-desktop .zw-help-index { padding: 12px 8px; }
#zw-desktop .zw-help-search { padding: 2px 4px 11px; background: #eceff1; }
#zw-desktop .zw-help-results { gap: 1px; }
#zw-desktop .zw-help-result {
  padding: 9px 10px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
}
#zw-desktop .zw-help-result:hover { background: #e2e7ea; }
#zw-desktop .zw-help-result.active {
  border-color: var(--zw-content-accent);
  background: var(--zw-content-surface);
}
#zw-desktop .zw-help-article { padding: 24px 30px; background: var(--zw-content-surface); }
#zw-desktop .zw-help-article h2 { color: var(--zw-content-ink); font-size: 22px; }
#zw-desktop .zw-help-article p { color: #526873; }
#zw-desktop .zw-help-steps {
  padding: 12px 16px 12px 30px;
  border: 0;
  border-left: 3px solid #8faebb;
  border-radius: 0;
  color: #38525f;
  background: var(--zw-content-subtle);
}

#zw-desktop .zw-project-map { border: 1px solid var(--zw-content-line); border-radius: var(--zw-content-radius); background-color: var(--zw-content-subtle); }
#zw-desktop .zw-node,
#zw-desktop .zw-project-tool,
#zw-desktop .zw-package,
#zw-desktop .zw-vm,
#zw-desktop .zw-vm-stat { border-color: var(--zw-content-line); border-radius: var(--zw-content-radius); background: var(--zw-content-surface); }
#zw-desktop .zw-event { border-radius: 2px; }

/* Dialogs share the work-surface language without changing the login screen */
#zw-desktop .zw-dialog {
  border-color: var(--zw-content-line-strong);
  border-radius: 6px;
  color: var(--zw-content-ink);
  background: var(--zw-content-surface);
  box-shadow: 0 24px 70px #00182f52;
}
#zw-desktop .zw-dialog-head,
#zw-desktop .zw-dialog-foot { border-color: var(--zw-content-line); background: var(--zw-content-subtle); }
#zw-desktop .zw-dialog-body { background: var(--zw-content-surface); }
#zw-desktop .zw-dialog-row { border-color: var(--zw-content-line); }
#zw-desktop .zw-dialog .zw-check { border-radius: var(--zw-content-radius); background: var(--zw-content-subtle); }
#zw-desktop .zw-secret-block { border-radius: var(--zw-content-radius); background: #f1f4f5; }

@media (max-width: 720px) {
  #zw-desktop .zw-app-main,
  #zw-desktop .zw-system-content,
  #zw-desktop .zw-operational-app { padding: 13px; }

  #zw-desktop .zw-app-head,
  #zw-desktop .zw-system-hero,
  #zw-desktop .zw-operational-hero { display: grid; gap: 10px; padding-bottom: 12px; }

  #zw-desktop .zw-system-nav {
    gap: 1px;
    padding: 7px;
    background: #eceff1;
  }

  #zw-desktop .zw-system-nav .zw-side-btn { padding: 7px 10px; }
  #zw-desktop .zw-system-nav .zw-side-btn.active { box-shadow: inset 0 -3px var(--zw-content-accent); }

  #zw-desktop .zw-operational-grid,
  #zw-desktop .zw-instance-facts { display: grid; grid-template-columns: 1fr; }
  #zw-desktop .zw-operational-card,
  #zw-desktop .zw-operational-card:nth-child(2n),
  #zw-desktop .zw-operational-card:nth-last-child(-n+2),
  #zw-desktop .zw-instance-fact {
    border-right: 0;
    border-bottom: 1px solid var(--zw-content-line);
  }
  #zw-desktop .zw-operational-card:last-child,
  #zw-desktop .zw-instance-fact:last-child { border-bottom: 0; }

  #zw-desktop .zw-system-summary { display: grid; grid-template-columns: 1fr; }
  #zw-desktop .zw-system-stat { border-right: 0; border-bottom: 1px solid var(--zw-content-line); }
  #zw-desktop .zw-system-stat:last-child { border-bottom: 0; }

  #zw-desktop .zw-help-article { padding: 18px; }
  #zw-desktop .zw-operational-empty { padding: 17px; }
}