/**
 * Input Views Component - Design System Implementation
 * 
 * Pixel-perfect match to design.html input card and views
 * Includes: Card structure, Estimado input, Preciso PDF upload, Manual form, View transitions
 */

@layer components {
  /* ═══════════════════════════════════════════════════════════
     CARD STRUCTURE
     ═══════════════════════════════════════════════════════════ */
  
  .card {
    width: var(--content-width);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-top-card);
  }
  
  .title-section {
    padding: var(--space-3);
    margin-bottom: var(--space-3); /* 12px */
  }
  
  .title {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-xl-size);
    line-height: var(--text-xl-leading);
    letter-spacing: var(--text-xl-tracking);
    color: var(--color-text);
  }
  
  .subtitle {
    font-family: var(--font-sans);
    font-weight: var(--font-medium);
    font-size: var(--text-xl-size);
    line-height: var(--text-xl-leading);
    letter-spacing: var(--text-xl-tracking);
    color: var(--color-text-secondary);
    text-wrap: balance; /* a short display line, set like the heading above it */
  }
  
  /* ═══════════════════════════════════════════════════════════
     INPUT CARD (SLOT)
     ═══════════════════════════════════════════════════════════ */
  
  /* Household size checkbox, below the input card */
  .household-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) 0;
    font-family: var(--font-sans);
    font-size: var(--text-base-size);
    color: var(--color-text);
  }

  /* The checkbox, drawn from the tokens so every browser shows the same one (audit C-11): an edge in
     the text colour, the accent fill and a check in the text on the accent when checked. The check is
     two borders turned 45 degrees, so no image is needed (the CSP allows no data: URIs). Focus is the
     reset's ring */
  .household-option input {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-content: center;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid currentColor;
    border-radius: calc(var(--radius-sm) / 2); /* 3px: half the control radius on a 16px box */
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--duration-micro) var(--ease-emphasized-decelerate);
  }

  .household-option input::before {
    content: '';
    width: 0.3125rem; /* 5px */
    height: 0.5625rem; /* 9px */
    margin-block-start: -0.125rem; /* the turned check sits optically centred */
    border: solid var(--color-text-on-accent);
    border-width: 0 2px 2px 0;
    rotate: 45deg;
    visibility: hidden;
  }

  .household-option input:checked {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
  }

  .household-option input:checked::before {
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .household-option input {
      transition: none;
    }
  }

  /* Forced colours drop the fill, so the box paints its own system colours: the field's edge, and
     the highlight with its text when checked */
  @media (forced-colors: active) {
    .household-option input {
      forced-color-adjust: none;
      border-color: FieldText;
      background-color: Field;
    }

    .household-option input::before {
      border-color: HighlightText;
    }

    .household-option input:checked {
      border-color: Highlight;
      background-color: Highlight;
    }
  }


  .input-slot {
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: border var(--duration-micro) var(--ease-emphasized-decelerate);
  }
  
  /* A bill the status line refused (main.js fieldError): the card's edge takes the error colour */
  .input-slot:has(.value-input[aria-invalid="true"]) {
    border-color: var(--color-error);
  }
  
  .input-content {
    border: 1px solid var(--color-highlight);
    /* Child radius = parent radius (16px) - parent border (0.5px) ≈ 15.5px */
    border-radius: calc(var(--radius-xl) - 0.5px);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: 
      background var(--duration-medium) var(--ease-emphasized-decelerate),
      border-color var(--duration-medium) var(--ease-emphasized-decelerate),
      box-shadow var(--duration-medium) var(--ease-emphasized-decelerate);
  }
  
  .input-content::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: var(--shadow-inset-light);
    /* Inherits parent's border-radius */
    border-radius: calc(var(--radius-xl) - 0.5px);
    transition: opacity var(--duration-medium) var(--ease-emphasized-decelerate);
  }
  
  /* Preciso mode - dashed border: the drop zone. The manual form is a form, so it keeps the solid
     card (audit C-10) */
  .input-slot.preciso-mode:not(.manual-mode) {
    border: 1px dashed var(--color-border-dashed);
    transition: border var(--duration-micro) var(--ease-emphasized-decelerate);
  }
  
  .input-slot.preciso-mode:not(.manual-mode) .input-content {
    background: var(--color-bg-drop-area);
    border: 1px solid var(--color-highlight-soft);
    box-shadow: none;
  }
  
  .input-slot.preciso-mode:not(.manual-mode) .input-content::after {
    opacity: 0;
  }
  
  /* Dragging state */
  .input-slot.preciso-mode.dragging {
    border-color: var(--color-border-drag);
  }
  
  .input-slot.preciso-mode.dragging .input-content {
    background: var(--color-bg-drop-area-dragging);
  }
  
  /* ═══════════════════════════════════════════════════════════
     VIEWS CONTAINER - Transition animations
     ═══════════════════════════════════════════════════════════ */
  
  .views-container {
    position: relative;
  }
  
  /* A hidden view is also visibility: hidden, so its controls leave the tab order and the
     accessibility tree. visibility flips at the end of the fade out and at the start of the fade in,
     so the animation still shows. */
  .input-group,
  .drop-area {
    transition: 
      opacity var(--duration-medium) var(--ease-emphasized-decelerate),
      transform var(--duration-medium) var(--ease-emphasized-decelerate),
      filter var(--duration-medium) var(--ease-emphasized-decelerate),
      visibility var(--duration-medium);
  }
  
  /* The view being shown is visible at once (0s), so a script can focus a field in it in the same
     frame; only the view being hidden waits for its fade out. Durations follow the transition list
     above and in .manual-form: opacity, transform, filter, visibility. */
  .input-slot:not(.preciso-mode) .input-group,
  .preciso-mode:not(.manual-mode) .drop-area,
  .preciso-mode.manual-mode .manual-form {
    transition-duration: var(--duration-medium), var(--duration-medium), var(--duration-medium), 0s;
    transition-timing-function: var(--ease-emphasized-decelerate);
  }
  
  /* The view being hidden leaves on the exit pair (about 80% of the enter, accelerate curve) */
  .preciso-mode .input-group,
  .input-slot:not(.preciso-mode) .drop-area,
  .preciso-mode.manual-mode .drop-area,
  .input-slot:not(.preciso-mode) .manual-form,
  .input-slot:not(.manual-mode) .manual-form {
    transition-duration: var(--duration-exit-medium);
    transition-timing-function: var(--ease-emphasized-accelerate);
  }
  
  /* Estimado view - default visible, RELATIVE position */
  .input-group {
    display: flex;
    align-items: center;
    height: 3.5rem; /* 56px - fixed height for input field */
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    pointer-events: auto;
    position: relative; /* NOT absolute by default */
  }
  
  /* Drop area - hidden by default, ABSOLUTE so it doesn't take space */
  .drop-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-3) var(--drop-area-padding-end);
    width: 100%;
    cursor: pointer;
    opacity: 0;
    transform: translateY(var(--space-2));
    filter: blur(2px); /* Fixed blur value - not responsive */
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Preciso mode - swap visibility */
  .preciso-mode .input-group {
    opacity: 0;
    transform: translateY(calc(var(--space-2) * -1));
    filter: blur(2px); /* Fixed blur value - not responsive */
    pointer-events: none;
    visibility: hidden;
    position: absolute; /* NOW becomes absolute */
    top: 0;
    left: 0;
    right: 0;
  }
  
  .preciso-mode .drop-area {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    pointer-events: auto;
    visibility: visible;
    position: relative; /* NOW becomes relative to take space */
  }
  
  /* ═══════════════════════════════════════════════════════════
     ESTIMADO INPUT GROUP
     ═══════════════════════════════════════════════════════════ */
  
  /* Form inside input-group must inherit flex */
  .input-group form,
  .input-group > form {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
  }
  
  .input-field {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3);
  }
  
  .input-value {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
  }
  
  .currency {
    font-family: var(--font-sans);
    font-weight: var(--font-normal); /* 400 */
    font-size: var(--text-xl-size); /* 24px - large input size */
    line-height: var(--text-xl-leading);
    letter-spacing: var(--text-xl-tracking);
    color: var(--color-text-secondary);
  }
  
  .value-input {
    font-family: var(--font-sans);
    font-weight: var(--font-normal); /* 400 */
    font-size: var(--text-xl-size); /* 24px - large input size */
    line-height: var(--text-xl-leading);
    letter-spacing: var(--text-xl-tracking);
    color: var(--color-text);
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    /* Remove browser default number input styling */
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Remove spinner buttons from number inputs */
  .value-input::-webkit-outer-spin-button,
  .value-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /* The ring goes on the whole row (.input-field below), so the € and /mês sit inside it */
  .value-input:focus {
    outline: none;
  }
  
  .input-field:has(.value-input:focus-visible) {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    /* Drawn inside the row: the input slot clips anything outside it */
    outline-offset: calc((var(--focus-ring-width) + var(--focus-ring-offset)) * -1);
    border-radius: var(--radius-md);
  }
  
  .value-input::placeholder {
    color: var(--color-text-secondary);
    font-size: var(--text-xl-size); /* Same as value-input */
    font-weight: var(--font-normal);
    letter-spacing: var(--text-xl-tracking);
    opacity: 1; /* Ensure placeholder is fully visible */
  }
  
  .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); /* 14px */
    line-height: var(--text-default-leading);
    letter-spacing: var(--text-default-tracking);
    color: var(--color-text-secondary);
  }
  
  .input-divider {
    width: 0.5px;
    height: var(--space-6);
    background: var(--color-border);
  }
  
  .submit-slot {
    padding: var(--space-3);
  }
  
  /* ═══════════════════════════════════════════════════════════
     DROP AREA (Preciso PDF Upload)
     ═══════════════════════════════════════════════════════════ */
  
  .drop-area-icon {
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--color-highlight);
    border-radius: var(--radius-sm);
    background: var(--color-bg-drop-area);
    box-shadow: var(--shadow-icon);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(var(--space-1));
    transition: 
      opacity var(--duration-medium) var(--ease-emphasized-decelerate),
      transform var(--duration-medium) var(--ease-emphasized-decelerate);
  }
  
  .preciso-mode .drop-area-icon {
    opacity: 1;
    transform: translateY(0);
  }
  
  .drop-area-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-icon-inset);
    pointer-events: none;
  }
    
  
  /* Drop area text - contains paragraph and manual link */
  .drop-area-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    width: clamp(20rem, 90vw, 33.25rem); /* 320px → 532px, responsive */
    text-align: center;
    line-height: var(--text-default-leading); /* the text buttons inherit it */
    letter-spacing: var(--text-default-tracking);
    opacity: 0;
    transform: translateY(var(--space-1));
    transition: 
      opacity var(--duration-medium) var(--ease-emphasized-decelerate) calc(var(--stagger-delay) * 2.5),
      transform var(--duration-medium) var(--ease-emphasized-decelerate) calc(var(--stagger-delay) * 2.5);
  }
  
  .preciso-mode .drop-area-text {
    opacity: 1;
    transform: translateY(0);
  }
  
  .drop-area-text p {
    font-family: var(--font-sans);
    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);
  }
  
  /* The two states (index.html) lay out as if their children were direct ones */
  .drop-area-empty,
  .drop-area-loaded {
    display: contents;
  }
  
  /* The second text button sits a little below the first */
  .drop-area-empty .link-button + .link-button {
    margin-top: var(--space-2);
  }
  
  .file-input {
    display: none;
  }
  
  /* ═══════════════════════════════════════════════════════════
     MANUAL FORM (Preciso mode)
     ═══════════════════════════════════════════════════════════ */
  
  /* Manual form - hidden by default */
  .manual-form {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-3);
    opacity: 0;
    pointer-events: none;
    visibility: hidden; /* see .input-group, .drop-area above */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(var(--space-2));
    filter: blur(2px); /* Fixed blur value - not responsive */
    transition: 
      opacity var(--duration-medium) var(--ease-emphasized-decelerate),
      transform var(--duration-medium) var(--ease-emphasized-decelerate),
      filter var(--duration-medium) var(--ease-emphasized-decelerate),
      visibility var(--duration-medium);
  }
  
  /* Show manual form when manual-mode is active */
  .preciso-mode.manual-mode .manual-form {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    position: relative;
    transform: translateY(0);
    filter: blur(0);
  }
  
  .preciso-mode.manual-mode .drop-area {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    transform: translateY(calc(var(--space-2) * -1));
    filter: blur(2px); /* Fixed blur value - not responsive */
  }
  
  .form-note {
    padding: 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-base-size);
    color: var(--color-text);
  }

  /* Status line under the input card (main.js setStatus); empty and spaceless when idle */
  .form-status:has(.form-status-text:not(:empty)) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-3) 0;
  }
  
  .form-status-text {
    font-family: var(--font-sans);
    font-size: var(--text-base-size);
    color: var(--color-text);
  }
  
  .form-status[data-kind="error"] .form-status-text {
    color: var(--color-error);
  }
  
  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    padding: var(--space-3);
  }
  
  .form-field {
    flex: 1;
    min-width: 7.5rem; /* 120px - fixed minimum for form fields */
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .form-field.full-width {
    flex: 1 1 100%;
  }
  
  .form-label {
    font-family: var(--font-sans);
    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);
  }
  
  .form-input-slot {
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  
  .form-input-content {
    display: flex;
    align-items: center;
    height: 2.5rem; /* 40px - fixed height for form inputs */
    /* Translucent box, opaque text: the 75% applies to the fill and the edge only, so typed
       values keep full contrast */
    border: 1px solid var(--color-highlight-strong);
    /* Child radius = parent radius (6px) - parent border (0.5px) ≈ 5.5px */
    border-radius: calc(var(--radius-sm) - 0.5px);
    box-shadow: none; /* Shadow removed */
    position: relative;
    background: color-mix(in oklch, var(--color-bg-form-input) 75%, transparent);
    transition: 
      border-color var(--duration-fast) var(--ease-emphasized-decelerate);
  }
  
  .form-input-content::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Inherits parent's border-radius */
    border-radius: calc(var(--radius-sm) - 0.5px);
    box-shadow: none; /* Shadow removed */
    pointer-events: none;
  }
  
  /* A value the status line refused (main.js fieldError) */
  .form-input-content:has(.form-input[aria-invalid="true"]) {
    border-color: var(--color-error);
  }
  
  /* The ring goes on the box, for text fields and selects alike (the select itself has none).
     Text fields match :focus-visible on every focus, so the ring shows for mouse and keyboard */
  .form-input-content:has(.form-input:focus-visible, .form-select:focus-visible) {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
  }
  
  .form-input {
    flex: 1;
    height: 100%;
    padding: var(--space-1-5) var(--space-2);
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-weight: var(--font-normal);
    font-size: max(1rem, var(--text-base-size)); /* 16 px floor: iOS zooms into smaller fields */
    line-height: var(--text-default-leading);
    letter-spacing: var(--text-default-tracking);
    color: var(--color-text-field);
    outline: none;
  }
  
  .form-input::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
  }
  
  .form-input-suffix {
    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);
    padding-right: var(--space-3);
    flex-shrink: 0;
  }
  
  /* Select dropdown */
  /* min-width: 0 on both: a select's min-content width is its longest option, so as a flex item it
     would not shrink below it and would push its chevron out of the box (Fornecedor at 375 px) */
  .form-select-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    min-width: 0;
  }
  
  .form-select {
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis; /* a long supplier name ends in … at 375 px */
    height: 100%;
    padding: var(--space-1-5) var(--space-2);
    padding-right: var(--space-8);
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-weight: var(--font-normal);
    font-size: max(1rem, var(--text-base-size)); /* 16 px floor: iOS zooms into smaller fields */
    line-height: var(--text-default-leading);
    letter-spacing: var(--text-default-tracking);
    color: var(--color-text-field);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }
  
  /* The "Selecionar" prompt (the empty option) reads as a prompt, not a value, until one is chosen
     (audit C-7). The open list keeps its options in the field colour */
  .form-select:has(option:checked[value=""]) {
    color: var(--color-text-secondary);
  }

  .form-select option {
    color: var(--color-text-field);
  }
  
  .form-select-icon {
    position: absolute;
    right: var(--space-2); /* 8px - matches padding */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.44;
    transition: transform var(--duration-medium) var(--ease-emphasized-decelerate);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  
  /* Form footer */
  .form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    line-height: var(--text-default-leading); /* the text button inherits it */
    letter-spacing: var(--text-default-tracking);
  }

  /* ═══════════════════════════════════════════════════════════
     LINK BUTTON
     ═══════════════════════════════════════════════════════════ */

  /* The one text button, on a <button> or an <a>: "do this other thing" next to the main action.
     Used in the drop area, the form, the status line, the results and sobre.html. Font comes from
     the context; focus is the reset ring. data-variant="quiet" is the secondary one. */
  .link-button {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    letter-spacing: inherit; /* buttons reset it in the browser's own styles */
    color: var(--color-text);
    text-align: start;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: var(--space-1);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-emphasized-decelerate);
  }

  .link-button[data-variant="quiet"] {
    font-weight: var(--font-normal);
    color: var(--color-text-secondary);
  }

  @media (hover: hover) and (pointer: fine) {
    .link-button:hover {
      text-decoration-thickness: 2px;
    }
  }

  /* The press of every other control (components-buttons.css); an inline <a> in a sentence ignores
     transforms, so it stays put */
  .link-button:active {
    transform: scale(0.97);
  }

  /* Touch screens (audit C-4): fields and the household label take a 44 px tap, like the buttons
     (components-buttons.css); the label's padding makes its whole row the checkbox's target */
  @media (pointer: coarse) {
    .value-input {
      min-block-size: 2.75rem; /* 44px */
    }

    .form-input-content {
      height: calc(2.75rem + 2px); /* its 1px edges sit outside the 44 px the field fills */
    }

    /* A text button standing on its own line takes a 44 px tap; a link inside a sentence does not */
    button.link-button {
      min-block-size: 2.75rem;
    }

    .drop-area-empty .link-button + .link-button {
      margin-top: 0;
    }

    .household-option label {
      padding-block: var(--space-3);
    }

    .household-option {
      padding-block-start: 0;
    }

    /* The select fills the field's box, so the whole box opens it */
    .form-select-wrapper {
      align-self: stretch;
    }
  }
}