/* ══════════════════════════════════════════════════════
   Finance Dashboard Pro — Unified Form Inputs
   Every input, select, textarea, and button shares
   the same height, radius, colors, and padding.
   ══════════════════════════════════════════════════════ */

/* ── Base: All form controls ── */
body.fd-app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="hidden"]),
body.fd-app select,
body.fd-app textarea {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--fd-input-text, #fff);
  background: var(--fd-input-bg, rgba(15,23,42,0.8));
  border: 1px solid var(--fd-input-border, rgba(71,85,105,0.4));
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  line-height: 36px;
}
body.fd-app textarea {
  height: auto;
  min-height: 60px;
  padding: 8px 12px;
  line-height: 1.4;
  resize: vertical;
}
body.fd-app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="hidden"]):focus,
body.fd-app select:focus,
body.fd-app textarea:focus {
  border-color: rgba(96,165,250,0.5);
  box-shadow: 0 0 0 2px rgba(96,165,250,0.12);
}
body.fd-app input::placeholder,
body.fd-app textarea::placeholder {
  color: rgba(148,163,184,0.5);
  font-size: 0.8rem;
}
body.fd-app select {
  cursor: pointer;
  appearance: auto;
  padding-right: 28px;
}

/* ── Buttons ── */
body.fd-app button,
body.fd-app .btn,
body.fd-app .fd-btn,
body.fd-app .ts-chip-btn,
body.fd-app .ts-btn,
body.fd-app input[type="submit"] {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  font-family: inherit;
  border-radius: 8px !important;
  line-height: 36px !important;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid rgba(71,85,105,0.4);
  background: var(--fd-input-bg, rgba(15,23,42,0.8));
  color: var(--fd-input-text, #fff);
  transition: background 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
body.fd-app button:hover,
body.fd-app .btn:hover,
body.fd-app input[type="submit"]:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(96,165,250,0.3);
}

/* Submit / primary buttons */
body.fd-app button[type="submit"],
body.fd-app .btn.primary,
body.fd-app .ts-chip-btn.primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  border: none !important;
  color: #fff !important;
}
body.fd-app button[type="submit"]:hover,
body.fd-app .btn.primary:hover,
body.fd-app .ts-chip-btn.primary:hover {
  background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
}

/* Delete / danger buttons */
body.fd-app .btn-danger,
body.fd-app .fd-btn-danger,
body.fd-app button.btn-danger {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 0.75rem !important;
  line-height: 30px !important;
  background: rgba(220,38,38,0.15) !important;
  border: 1px solid rgba(220,38,38,0.3) !important;
  color: #ef4444 !important;
}
body.fd-app .btn-danger:hover,
body.fd-app button.btn-danger:hover {
  background: rgba(220,38,38,0.25) !important;
}

/* ── Forms: grid layout with auto-fill for compact rows ── */
body.fd-app form.card-gap,
body.fd-app #incomeForm,
body.fd-app #expenseForm {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  align-items: end !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
body.fd-app #incomeForm > *,
body.fd-app #expenseForm > * {
  min-width: 0;
  width: 100%;
}
body.fd-app #incomeForm > button[type="submit"],
body.fd-app #expenseForm > button[type="submit"] {
  grid-column: -2 / -1;
}

/* Loan & repayment forms: also inline grid */
body.fd-app #employeeLoanForm,
body.fd-app #repaymentForm {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  align-items: end !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
body.fd-app #employeeLoanForm label:not(.inline-checkbox),
body.fd-app #repaymentForm label:not(.inline-checkbox) {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fd-card-muted, #94a3b8);
  align-self: center;
}

/* Notice form: inline grid */
body.fd-app #noticeForm {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 8px !important;
  align-items: end !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
body.fd-app #noticeForm > textarea {
  grid-column: 1 / -1;
}

/* Employer form stays flex */
body.fd-app #employerAccessForm {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 0 !important;
}

/* ── Filter bars: compact inline ── */
body.fd-app .expense-search-container,
body.fd-app .income-filter-bar,
body.fd-app .expense-filter-bar,
body.fd-app .loan-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
}
body.fd-app .expense-search-container input,
body.fd-app .expense-search-container select,
body.fd-app .expense-search-container button,
body.fd-app .income-filter-bar input,
body.fd-app .income-filter-bar button,
body.fd-app .income-filter-bar select,
body.fd-app .expense-filter-bar input,
body.fd-app .expense-filter-bar button,
body.fd-app .expense-filter-bar select,
body.fd-app .loan-filter-bar input,
body.fd-app .loan-filter-bar select {
  height: 36px !important;
  min-height: 36px !important;
  font-size: 0.82rem !important;
}
body.fd-app .expense-search-container input[type="text"],
body.fd-app .expense-search-container .search-input {
  flex: 1 1 200px;
}
body.fd-app .expense-search-container input[type="date"],
body.fd-app .income-filter-bar input[type="date"] {
  flex: 0 0 auto;
  width: auto;
}
body.fd-app .expense-search-container select,
body.fd-app .income-filter-bar select {
  flex: 0 0 auto;
  min-width: 120px;
}
body.fd-app .expense-search-container button,
body.fd-app .income-filter-bar button,
body.fd-app .expense-filter-bar button {
  flex: 0 0 auto !important;
}

/* ── Month filter bars ── */
body.fd-app .income-filter-bar,
body.fd-app .expense-filter-bar {
  padding: 8px 0;
}
body.fd-app .income-filter-bar label,
body.fd-app .expense-filter-bar label,
body.fd-app .loan-filter-bar label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fd-card-muted, #94a3b8);
  white-space: nowrap;
}

/* ── Branch form (add/delete branch) ── */
body.fd-app .branch-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

/* ── Autocomplete container ── */
body.fd-app .autocomplete-container {
  flex: 1 1 auto;
  min-width: 100px;
  position: relative;
}
body.fd-app .autocomplete-container input {
  width: 100%;
}

/* ── Controls bar (dashboard) ── */
body.fd-app .fd-ctrl-input,
body.fd-app .fd-ctrl-select,
body.fd-app .fd-ctrl-btn {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
}

/* ── Management sections: equal height alignment ── */
.grid.full-width.management-sections-two > section {
  display: flex !important;
  flex-direction: column !important;
}

/* ── Inline checkboxes inside grid forms ── */
body.fd-app .inline-checkbox {
  display: flex !important;
  align-items: center;
  gap: 4px;
  height: 36px;
  font-size: clamp(0.6rem, 0.7vw + 3px, 0.75rem);
  color: var(--fd-card-text, #e2e8f0);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}
body.fd-app .inline-checkbox span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
}
body.fd-app .inline-checkbox input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  padding: 0 !important;
  margin: 0;
  flex-shrink: 0;
}

/* ── Flex-center-wrap cards: compact ── */
.flex-center-wrap > .summary-card {
  padding: 12px 14px;
}
.flex-center-wrap > .summary-card h3 {
  margin: 0 0 10px;
  font-size: 0.9rem;
}

/* ── Mobile: stack form fields ── */
@media (max-width: 600px) {
  body.fd-app form.card-gap,
  body.fd-app #incomeForm,
  body.fd-app #expenseForm,
  body.fd-app #employeeLoanForm,
  body.fd-app #repaymentForm,
  body.fd-app #noticeForm {
    grid-template-columns: 1fr !important;
  }
  body.fd-app #incomeForm > button[type="submit"],
  body.fd-app #expenseForm > button[type="submit"] {
    grid-column: auto;
  }
  body.fd-app .expense-search-container,
  body.fd-app .income-filter-bar,
  body.fd-app .expense-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  body.fd-app .expense-search-container > *,
  body.fd-app .income-filter-bar > *,
  body.fd-app .expense-filter-bar > * {
    width: 100% !important;
  }
}