/* Shared app navigation header (see _app_nav_header.html).
       Keeps legacy class names (.header, .hdr-action-btn, .theme-toggle-btn)
       intact, but uses the design-system tokens from /static/css/app.css. */
    .header.app-main-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--ds-space-4);
      flex-wrap: wrap;
      padding: var(--ds-space-3) var(--ds-space-4);
      margin: var(--ds-space-3) 0 var(--ds-space-5);
      background: var(--ds-surface-elev, var(--ds-surface));
      border: 1px solid var(--ds-border-muted);
      border-radius: var(--ds-radius-lg);
      box-shadow: var(--ds-shadow-xs);
      overflow: hidden;
    }
    /* Brand gradient accent bar along the top edge of the header. */
    .header.app-main-header::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--ds-brand-gradient-line);
      pointer-events: none;
    }
    .header.app-main-header .header-left { display: flex; flex-direction: column; min-width: 0; }
    .header.app-main-header h1 {
      font-size: var(--ds-fs-xl);
      font-weight: 800;
      letter-spacing: 0.02em;
      margin: 0;
      /* Gradient-filled wordmark. The solid `color` is a fallback for
         engines lacking -webkit-text-fill-color; modern browsers paint
         the gradient via background-clip: text. */
      color: var(--ds-primary);
      background: var(--ds-brand-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .app-header-actions {
      display: flex;
      align-items: center;
      gap: var(--ds-space-2);
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .hdr-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      border: 1px solid var(--ds-border);
      background: var(--ds-surface);
      color: var(--ds-text);
      text-decoration: none;
      font-family: inherit;
      font-size: var(--ds-fs-sm);
      font-weight: 600;
      border-radius: var(--ds-radius-sm);
      line-height: 1;
      transition:
        background var(--ds-duration-fast) var(--ds-ease),
        border-color var(--ds-duration-fast) var(--ds-ease),
        color var(--ds-duration-fast) var(--ds-ease),
        box-shadow var(--ds-duration-fast) var(--ds-ease),
        transform var(--ds-duration-fast) var(--ds-ease);
    }
    .hdr-action-btn:hover {
      background: var(--ds-bg-muted);
      border-color: var(--ds-border-strong);
      color: var(--ds-text);
      text-decoration: none;
      box-shadow: var(--ds-shadow-xs);
    }
    .hdr-action-btn:active { transform: translateY(1px); }
    .hdr-action-btn:focus-visible {
      outline: none;
      box-shadow: var(--ds-focus-ring);
    }

    .hdr-action-btn--admin { color: var(--ds-primary); border-color: var(--ds-primary); background: var(--ds-primary-soft); }
    .hdr-action-btn--admin:hover { color: var(--ds-primary); border-color: var(--ds-primary); background: var(--ds-primary-soft); filter: brightness(0.97); }
    .hdr-action-btn--logout { color: var(--ds-danger); border-color: var(--ds-border); }
    .hdr-action-btn--logout:hover { color: var(--ds-danger); border-color: var(--ds-danger); background: var(--ds-danger-soft); }
    .hdr-action-btn--login { background: var(--ds-accent); color: var(--ds-text-on-accent); border-color: var(--ds-accent); }
    .hdr-action-btn--login:hover { background: var(--ds-accent-hover); border-color: var(--ds-accent-hover); color: var(--ds-text-on-accent); }

    /* Inline SVG icon used inside header buttons / chips */
    .hdr-ico {
      width: 16px; height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    /* Shared theme toggle button (reused on any page) */
    .theme-toggle-btn, .hdr-theme-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--ds-surface);
      border: 1px solid var(--ds-border);
      border-radius: var(--ds-radius-sm);
      cursor: pointer;
      padding: 7px 10px;
      line-height: 1;
      color: var(--ds-text);
      transition:
        background var(--ds-duration-fast) var(--ds-ease),
        border-color var(--ds-duration-fast) var(--ds-ease);
    }
    .theme-toggle-btn:hover, .hdr-theme-toggle:hover {
      background: var(--ds-bg-muted);
      border-color: var(--ds-border-strong);
    }
    .theme-toggle-btn:focus-visible, .hdr-theme-toggle:focus-visible {
      outline: none; box-shadow: var(--ds-focus-ring);
    }
    /* Show the correct sun/moon glyph based on the current theme */
    .hdr-theme-toggle .hdr-ico-sun { display: none; }
    .hdr-theme-toggle .hdr-ico-moon { display: inline-block; }
    [data-theme="dark"] .hdr-theme-toggle .hdr-ico-sun { display: inline-block; }
    [data-theme="dark"] .hdr-theme-toggle .hdr-ico-moon { display: none; }

    /* Profile/user chip in the header */
    .app-user-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      font-size: var(--ds-fs-sm);
      color: var(--ds-text-muted);
      border-radius: var(--ds-radius-pill);
      background: var(--ds-bg-muted);
      text-decoration: none;
      border: 1px solid var(--ds-border-muted);
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .app-user-chip:hover { color: var(--ds-text); border-color: var(--ds-border); }