/* /ftf/app/_shared/header.css — styles for the shared top header partial.
   Pages that include header.php should also link this stylesheet. */

.ftf-header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid #1a1a1a;
  background: #0a0a0a;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: #d4d4d4;
}

/* Brand block */
.ftf-header .ftf-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; text-decoration: none; color: inherit; }
.ftf-header .ftf-brand-img { height: 27px; width: auto; display: block; }
.ftf-header .ftf-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.ftf-header .ftf-brand-text .l1, .ftf-header .ftf-brand-text .l2 { font-size: 10px; color: #888; letter-spacing: 0.02em; font-weight: 500; }

/* Search */
.ftf-header .ftf-search { flex: 1; max-width: 420px; position: relative; }
.ftf-header .ftf-search input {
  width: 100%; padding: 7px 56px 7px 32px;
  background: #0f0f0f; border: 1px solid #1f1f1f; border-radius: 7px;
  color: #e4e4e4; font-size: 12px;
  font-family: "JetBrains Mono", monospace;
}
.ftf-header .ftf-search input:focus { outline: none; border-color: #2a2a2a; }
.ftf-header .ftf-search input::placeholder { color: #555; }
.ftf-header .ftf-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #555; }
.ftf-header .ftf-search-go {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  padding: 3px 9px;
  background: #0a0a0a; border: 1px solid #2a2a2a; border-radius: 4px;
  color: #888; font-size: 9px; font-weight: 600; letter-spacing: 0.1em;
  cursor: pointer; font-family: "Inter", system-ui, sans-serif;
}
.ftf-header .ftf-search-go:hover { color: #fff; border-color: #3a3a3a; }

/* Stock Filter button + other header buttons */
.ftf-header .ftf-header-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: #0f0f0f; border: 1px solid #1f1f1f; border-radius: 7px;
  color: #d4d4d4; font-size: 12px; font-weight: 500;
  text-decoration: none;
  cursor: pointer; flex-shrink: 0;
}
.ftf-header .ftf-header-btn:hover { border-color: #2a2a2a; color: #fff; }

/* Status pill (System Online) */
.ftf-header .ftf-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(74,222,128,0.25); background: rgba(74,222,128,0.05);
  color: #4ade80; font-size: 11px; flex-shrink: 0;
}
.ftf-header .ftf-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }

/* Meta strings (last updated, market data) */
.ftf-header .ftf-meta { font-size: 11px; color: #888; font-family: "JetBrains Mono", monospace; white-space: nowrap; flex-shrink: 0; }
.ftf-header .ftf-meta-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; margin-right: 6px; vertical-align: middle; }

/* User pill */
.ftf-header .ftf-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 13px 3px 3px;
  background: linear-gradient(90deg, #1d4ed8, #0891b2);
  border-radius: 999px;
  color: #fff; font-size: 12px; font-weight: 500;
  text-decoration: none; flex-shrink: 0;
}
.ftf-header .ftf-user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.ftf-header .ftf-login-link {
  padding: 6px 14px;
  background: #2563eb; border-radius: 7px;
  color: #fff; font-size: 12px; font-weight: 600;
  text-decoration: none; flex-shrink: 0;
}
.ftf-header .ftf-login-link:hover { background: #1d4ed8; }