/**
 * Header Component - Design System Implementation
 * 
 * Pixel-perfect match to design.html top-bar
 * Includes: Logo, Input Pill, Actions (Sobre button, Copy/Dropdown)
 */

@layer components {
  /* ═══════════════════════════════════════════════════════════
     PAGE WRAPPER
     ═══════════════════════════════════════════════════════════ */
  
  .page-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-bg);
  }
  
  /* ═══════════════════════════════════════════════════════════
     TOP BAR / HEADER
     ═══════════════════════════════════════════════════════════ */
  
  .top-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    position: relative;
  }
  
  .logo {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-2);
    border: none; /* No border */
    border-radius: var(--radius-sm); /* 6px */
    background: transparent; /* No background */
    box-shadow: none; /* No shadow */
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-md-size);
    color: var(--color-text);
    letter-spacing: var(--text-lg-tracking);
    line-height: var(--text-lg-leading);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-micro) var(--ease-emphasized-decelerate);
  }
  
  /* Hover state: foreground color at 4% opacity */
  /* The Ω is the app icon's glyph (Inter v20 greek, wght 500), drawn as SVG: the Inter subsets the
     page serves have no Ω, so as text it fell back to a system font. Sized to Inter's cap height. */
  .logo-mark {
    width: calc(0.7275em * 1360 / 1510);
    height: 0.7275em;
    fill: currentColor;
    flex-shrink: 0;
    align-self: baseline; /* its bottom sits on the text baseline, as the glyph did */
  }
  
  .logo > span {
    align-self: baseline;
  }
  
  @media (hover: hover) and (pointer: fine) {
    .logo:hover {
      background: var(--color-hover-tint);
    }
  }
  
  
  .top-bar-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
  }
  
  /* ═══════════════════════════════════════════════════════════
     INPUT PILL (Results View)
     ═══════════════════════════════════════════════════════════ */
  
  .input-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: var(--space-5);
    width: fit-content; /* Fit content instead of fixed width */
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm); /* Match btn-slot border-radius */
    display: none;
  }
  
  .results-view .input-pill {
    display: block;
    animation: pillAppear var(--duration-medium) var(--ease-emphasized-decelerate) forwards;
  }
  
  @keyframes pillAppear {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(var(--space-3) * -1)) scale(0.97);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }
  }
  
  .input-pill-inner {
    display: flex;
    align-items: center;
    border: 0.5px solid var(--color-highlight);
    border-radius: var(--radius-sm); /* Match segmented-btn border-radius */
    box-shadow: var(--shadow-xs);
    position: relative;
    background: transparent;
  }

  /* No hover on the pill itself: only its × is a control, and it has the button's own hover (C-9) */
  
  /* Estimate mode: the delete button sets the 32px height and closes the pill on the right */
  .input-pill-inner:has(.input-pill-estimado) {
    padding: 0 0 0 var(--space-2);
    gap: 0; /* the 32px button's own inset spaces the × from the value */
    min-height: var(--control-height-sm);
  }
  
  /* Preciso mode: the same, with the PDF icon closer to the edge */
  .input-pill-inner:has(.input-pill-preciso) {
    padding: 0 0 0 var(--space-1-5);
    gap: var(--space-2); /* 8px gap between icon and content */
    min-height: var(--control-height-sm);
  }
  
  /* Preciso mode without PDF icon (manual): no gap, content starts immediately */
  .input-pill:not(.pdf-source) .input-pill-inner:has(.input-pill-preciso) {
    gap: 0; /* No gap when manual entry (no PDF icon) */
  }
  
  
  /* Child elements inside input-pill-inner inherit parent's border-radius calculation */
  .input-pill-inner > * {
    border-radius: calc(var(--radius-sm) - 0.5px); /* Parent radius - border */
  }
  
  .input-pill-content {
    display: flex;
    align-items: center;
    border: none;
    box-shadow: none;
  }
  
  /* Add gap between PDF icon and data content */
  .input-pill-content.input-pill-preciso {
    gap: var(--space-2); /* 8px gap between icon and content */
  }
  
  /* Estimate mode content: gap between mode and value */
  .input-pill-estimado {
    gap: var(--space-2); /* 8px gap between mode section and value section */
  }
  
  /* Estimate mode section: gap between icon and text */
  .input-pill-mode {
    display: flex;
    align-items: center;
    gap: var(--space-1); /* 4px gap between icon and "Estimado" text - matches Figma */
  }
    
  
  .input-pill-mode span {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-base-size);
    line-height: var(--text-default-leading);
    color: var(--color-text);
  }
  
  .input-pill-value {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  
  .input-pill-value .amount {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-base-size);
    line-height: var(--text-default-leading);
    color: var(--color-text);
  }
  
  .input-pill-value .period {
    font-family: var(--font-sans); /* the unit in Inter, as the text around it (Roboto Mono was never loaded) */
    font-weight: var(--font-normal);
    font-size: var(--text-base-size);
    line-height: var(--text-default-leading);
    letter-spacing: var(--text-default-tracking);
    color: var(--color-text-secondary);
  }
  
  /* The delete button is a square ghost button (components-buttons.css); the pill keeps it from shrinking */
  .input-pill-delete {
    flex-shrink: 0;
  }

  /* On touch the logo reaches 44 px, and the × stays 32 px inside the pill and takes taps over 44 px
     (components-buttons.css) */
  @media (pointer: coarse) {
    .logo {
      min-block-size: 2.75rem; /* 44px, as every button on touch (components-buttons.css) */
    }

    .btn[data-square].input-pill-delete {
      min-block-size: var(--control-height-sm);
      min-inline-size: var(--control-height-sm);
    }

    .input-pill-delete::after {
      content: '';
      position: absolute;
      inset: 50% auto auto 50%;
      inline-size: 2.75rem; /* 44px */
      block-size: 2.75rem;
      translate: -50% -50%;
    }
  }
  
  /* ═══════════════════════════════════════════════════════════
     INPUT PILL - TWO MODES
     Estimado (simple) vs Preciso (invoice data)
     ═══════════════════════════════════════════════════════════ */
  
  /* Estimado mode - shown by default */
  .input-pill-estimado {
    display: flex;
  }
  
  /* Preciso mode - hidden by default */
  .input-pill-preciso {
    display: none;
  }
  
  /* When pill is in preciso mode (class on input-pill) */
  .input-pill.preciso-mode .input-pill-estimado {
    display: none;
  }
  
  .input-pill.preciso-mode .input-pill-preciso {
    display: flex;
  }
  
  /* Preciso mode: fit content with max-width constraint */
  .input-pill.preciso-mode {
    max-width: calc(100vw - 22.5rem); /* Leave room for logo and actions */
  }
  
  /* Responsive: reduce max-width on smaller screens */
  @media (max-width: 48rem) { /* 768px */
    .input-pill.preciso-mode {
      max-width: calc(100vw - 12.5rem);
    }
    
    .input-pill-data {
      flex-wrap: wrap;
      gap: var(--space-1);
    }
  }
  
  /* Mobile: position input pill below navbar to avoid overlap */
  @media (max-width: 48rem) { /* 768px */
    .top-bar {
      flex-wrap: wrap; /* Allow wrapping on mobile */
      padding: var(--space-3); /* Reduce padding on mobile */
    }
    
    .top-bar-actions {
      flex-shrink: 0; /* Prevent actions from shrinking */
    }
    
    .input-pill {
      position: relative;
      left: auto;
      transform: none;
      top: auto;
      order: 3; /* Place after logo and actions */
      width: 100%;
      margin-top: var(--space-3); /* Add spacing below navbar */
      justify-content: center; /* display stays none until .results-view, below */
      padding: 0; /* No padding */
    }
    
    .results-view .input-pill {
      display: flex; /* Override display: block */
      animation: pillAppearMobile var(--duration-medium) var(--ease-emphasized-decelerate) forwards;
    }
    
    @keyframes pillAppearMobile {
      0% {
        opacity: 0;
        transform: translateY(calc(var(--space-2) * -1));
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .input-pill.preciso-mode {
      max-width: 100%; /* Full width on mobile */
    }
    
    .input-pill-inner {
      width: 100%; /* Fill container width on mobile */
      max-width: 100%; /* Ensure inner content doesn't overflow */
      justify-content: space-between; /* Space between content and delete button */
    }
    
    /* Remove gap on mobile since we're using space-between */
    .input-pill-inner:has(.input-pill-estimado) {
      gap: 0; /* Remove gap, use space-between instead */
    }
    
    .input-pill-inner:has(.input-pill-preciso) {
      gap: 0; /* Remove gap, use space-between instead */
    }
  }
  
  /* Preciso pill icon container - smaller size to match card */
  .input-pill-icon {
    width: calc(var(--text-base-size) + var(--space-2)); /* Icon size (14px) + padding (8px) = 22px */
    height: calc(var(--text-base-size) + var(--space-2)); /* Icon size (14px) + padding (8px) = 22px */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--color-highlight);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-icon);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  
  /* PDF icon - hidden by default, shown only when data comes from PDF */
  .input-pill-icon-pdf {
    display: none;
    background: var(--color-highlight-soft);
  }
  
  /* Show PDF icon when input-pill has pdf-source class (set when PDF is loaded) */
  .input-pill.pdf-source .input-pill-icon-pdf {
    display: flex;
  }
  
  .input-pill-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-icon-inset);
    pointer-events: none;
  }
    
  
  /* Preciso pill data - matches Figma: py-[6px], gap-[8px] */
  .input-pill-data {
    display: flex;
    align-items: center;
    gap: var(--space-3); /* 12px gap between items (increased from 8px) */
    padding: var(--space-1-5) 0;
  }
  
  .pill-provider,
  .pill-value {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-base-size);
    line-height: var(--text-default-leading);
    white-space: nowrap;
  }
  
  .pill-provider {
    color: var(--color-text);
  }
  
  /* Pill item - icon + value container */
  .pill-item {
    display: flex;
    align-items: center;
    gap: var(--space-1); /* 4px gap between icon and value */
  }
  
  .pill-item .icon {
    color: var(--color-text);
    opacity: 0.6; /* Match label opacity */
  }
  
  .pill-value {
    color: var(--color-text);
  }
  
  /* Separators removed from design - hide them */
  .pill-separator {
    display: none;
  }
}