/* Shared OPENPC top header module.
   Pages keep their own content, but header layout/actions use these classes.
   Toggle visibility with body/page classes or data-header-show-* attributes. */
:root {
  --openpc-header-height: 54px;
  --openpc-header-pad-x: 18px;
  --openpc-header-gap: 10px;
  --openpc-header-bg: var(--hdr-bg, var(--panel, rgba(255, 255, 255, .92)));
  --openpc-header-border: var(--border, var(--line, rgba(148, 163, 184, .28)));
  --openpc-header-ink: var(--ink, var(--text, #1e293b));
  --openpc-header-muted: var(--muted, var(--dim, #64748b));
  --openpc-header-accent: var(--accent, #6d4df3);
}

.hdr,
.openpc-header {
  min-height: var(--openpc-header-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--openpc-header-gap);
}

.hdr-right,
.hdr-actions,
.openpc-header .actions,
.openpc-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
}

.hdr-logo,
.openpc-header .logo,
.openpc-header .brand,
.openpc-logo,
.openpc-brand {
  flex-shrink: 0;
}

.lang-toggle,
.openpc-lang-toggle {
  order: 999;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 11px;
  border: 1px solid var(--openpc-header-border);
  border-radius: 999px;
  background: var(--bg3, var(--panel2, rgba(255, 255, 255, .82)));
  color: var(--openpc-header-muted);
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-ui, var(--font, sans-serif));
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.2;
  flex-shrink: 0;
}
.lang-toggle:hover,
.openpc-lang-toggle:hover {
  border-color: var(--border2, var(--openpc-header-accent));
  color: var(--openpc-header-ink);
}

.openpc-header-btn,
.hdr-back,
.btn-a2a,
.btn-console {
  flex-shrink: 0;
}

.openpc-header-meta,
#clock,
.conn,
.refresh {
  flex-shrink: 0;
}

/* Homepage requirement: hide time/connection/auto-refresh in the top display. */
body.openpc-home #clock,
body.openpc-home .conn,
body.openpc-home .refresh,
.openpc-header[data-show-clock="false"] #clock,
.openpc-header[data-show-connection="false"] .conn,
.openpc-header[data-show-refresh="false"] .refresh {
  display: none !important;
}

/* Optional generic slots: page-specific actions can exist but be hidden per page. */
.openpc-header [data-header-visible="false"],
.openpc-header-slot[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .hdr,
  .openpc-header {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
  .hdr-left,
  .openpc-header .hdr-left {
    min-width: 0;
    flex: 1 1 auto;
  }
  .hdr-title,
  .openpc-header .hdr-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hdr-right,
  .hdr-actions,
  .openpc-header .actions,
  .openpc-header-actions {
    width: auto;
    max-width: 62vw;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-end;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hdr-right::-webkit-scrollbar,
  .hdr-actions::-webkit-scrollbar,
  .openpc-header .actions::-webkit-scrollbar,
  .openpc-header-actions::-webkit-scrollbar {
    display: none;
  }
  .lang-toggle,
  .openpc-lang-toggle {
    padding: 5px 9px;
    font-size: 11px;
    margin-left: 0;
  }
}

@media (max-width: 420px) {
  .hdr,
  .openpc-header {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .hdr-right,
  .hdr-actions,
  .openpc-header .actions,
  .openpc-header-actions {
    max-width: 58vw;
  }
}