/* =====================================================================
   header.css — Sticky glassmorphism header
   ===================================================================== */

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  min-height: var(--header-h);
}

/* ---- Brand ---- */
.header-brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.brand-logo {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #fff, #f0f3f8);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.brand-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand-subtitle {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.project-name { font-weight: var(--fw-semibold); color: var(--color-primary); }
.project-name:not(:empty)::before { content: "·"; margin: 0 4px; color: var(--text-faint); }

.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5);
  animation: pulse-dot 2s infinite var(--ease);
}

/* ---- Actions ---- */
.header-actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }

.header-clock {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
  padding-right: var(--sp-1);
}
.clock-time { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--fs-base); }
.clock-date { font-size: var(--fs-xs); color: var(--text-muted); }

/* Refresh ring + countdown */
.refresh-status { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.refresh-ring { transform: rotate(-90deg); }
.refresh-ring .ring-bg { fill: none; stroke: var(--color-border); stroke-width: 3; }
.refresh-ring .ring-fg {
  fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 97.4; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke var(--t-base);
}
.refresh-status.is-refreshing .ring-fg { stroke: var(--color-info); }
.refresh-countdown {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; color: var(--text-muted);
}

/* Search */
.search-box {
  position: relative; display: flex; align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0 var(--sp-3);
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
  min-width: 260px;
}
.search-box:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
  background: #fff;
}
.search-icon { color: var(--text-faint); flex-shrink: 0; }
.search-input {
  border: none; outline: none; background: transparent;
  padding: var(--sp-2) var(--sp-2);
  font-size: var(--fs-md); width: 100%; color: var(--text-default);
}
.search-input::placeholder { color: var(--text-faint); }
.search-clear {
  font-size: 20px; line-height: 1; color: var(--text-faint);
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.search-clear:hover { color: var(--text-strong); background: var(--color-border); }

/* Icon buttons */
.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.icon-btn:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.is-active { background: var(--color-primary); color: #fff; }
.icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
#refresh-btn.is-spinning svg { animation: spin 0.8s linear infinite; }

/* Export dropdown menu */
.export-menu {
  position: absolute; right: var(--sp-6); top: calc(var(--header-h) - 4px);
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: var(--sp-1); min-width: 210px; z-index: var(--z-dropdown);
  animation: drop-in var(--t-base) var(--ease-out);
}
.export-menu button {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  font-size: var(--fs-md); color: var(--text-default);
  transition: background var(--t-fast);
}
.export-menu button:hover { background: var(--color-primary-soft); color: var(--color-primary); }

/* Diagnostics panel */
.diagnostics-panel {
  margin: var(--sp-3) var(--sp-6) 0;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  animation: drop-in var(--t-base) var(--ease-out);
}
.diagnostics-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.diag-item {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.diag-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.diag-value { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.diag-value.ok { color: var(--color-success); }
.diag-value.warn { color: var(--color-warning); }
.diag-value.bad { color: var(--color-danger); }