/* css/forms.css */
/* Material Design 3 Enterprise Forms & Inputs */

/* ========================================================================
   FORM GRID LAYOUTS
   ======================================================================== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--md-sys-spacing-4) var(--md-sys-spacing-5); /* 16px row, 20px col */
}

.meta-grid {
  grid-template-columns: repeat(2, 1fr);
}

.meta-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.field-span-2 {
  grid-column: span 2;
}

/* Responsive Grids */
@media (max-width: 1100px) {
  .meta-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .form-grid,
  .meta-grid,
  .meta-grid-3 {
    grid-template-columns: 1fr;
  }
  
  .field-span-2 {
    grid-column: span 1;
  }
}

/* ========================================================================
   FORM FIELD (Label + Input wrapper)
   ======================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-1); /* 4px gap between label and input */
}

/* Field Label */
.field > span {
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Required Asterisk */
.req {
  color: var(--md-sys-color-danger);
}

/* ========================================================================
   INPUTS, SELECTS, TEXTAREAS (MD3 Outlined Style)
   ======================================================================== */
.field input,
.field select,
.field textarea,
.toolbar select,
.search-box input,
.edit-field input,
.edit-field select {
  width: 100%;
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-input); /* 16px */
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large); /* 16px prevents iOS zoom, standard for inputs */
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  min-height: 40px; /* Standard touch target / input height */
  transition: border-color var(--md-sys-motion-duration-short) linear,
              box-shadow var(--md-sys-motion-duration-short) linear,
              background-color var(--md-sys-motion-duration-short) linear;
}

.field textarea {
  min-height: 80px;
  resize: vertical;
  padding-top: var(--md-sys-spacing-3);
  padding-bottom: var(--md-sys-spacing-3);
}

/* Hover State */
.field input:hover,
.field select:hover,
.field textarea:hover,
.toolbar select:hover,
.search-box input:hover {
  border-color: var(--md-sys-color-on-surface-variant);
}

/* Focus State (MD3 Primary Outline) */
.field input:focus,
.field select:focus,
.field textarea:focus,
.toolbar select:focus,
.search-box input:focus,
.edit-field input:focus,
.edit-field select:focus {
  border-color: var(--md-sys-color-primary);
  /* Use box-shadow to simulate the thicker border without layout shift */
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
  outline: none;
}

/* Disabled State */
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  border-color: var(--md-sys-color-outline-variant);
  opacity: 0.38;
}

/* ========================================================================
   CUSTOM INPUT VARIANTS
   ======================================================================== */
/* Input with Currency Tag */
.input-with-cur {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-with-cur input {
  padding-right: 48px; /* Make room for the currency tag */
}

.om-currency-tag {
  position: absolute;
  right: var(--md-sys-spacing-3);
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none; /* Let clicks pass through to input */
  user-select: none;
}

/* Search Box specific styling */
.search-box input {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20" fill="%23444746"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>');
  background-repeat: no-repeat;
  background-position: 12px center;
  padding-left: 40px;
  border-radius: var(--md-sys-shape-corner-full); /* Search boxes are usually fully rounded */
}

/* ========================================================================
   CHECKBOXES & RADIOS
   ======================================================================== */
/* MD3 native styled checkbox wrapper */
label.field[style*="flex-direction: row"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--md-sys-spacing-2);
  cursor: pointer;
}

label.field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: auto;
  accent-color: var(--md-sys-color-primary);
  margin: 0;
  cursor: pointer;
}

/* ========================================================================
   SECTION TITLES inside Forms
   ======================================================================== */
.field-section-title {
  grid-column: 1 / -1; /* Span all columns */
  font: var(--md-sys-typescale-title-small);
  color: var(--md-sys-color-primary);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding-bottom: var(--md-sys-spacing-2);
  margin-top: var(--md-sys-spacing-4);
  margin-bottom: var(--md-sys-spacing-1);
}

/* ========================================================================
   FORM ACTIONS (Bottom button area)
   ======================================================================== */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  margin-top: var(--md-sys-spacing-6);
  flex-wrap: wrap;
}

.save-hint {
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-success);
  margin-left: var(--md-sys-spacing-2);
}