/* Modal Container - Restored working structure */
#expenseModal.modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Light background */
  z-index: 10000; /* Ensure it's above navigation */
  justify-content: center;
  align-items: center;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Simple Working Modal */
.modal-content {
  background-color: white;
  padding: 24px;
  border-radius: 4px;
  border: 1px solid #e1e1e1;
  width: 90%;
  max-width: 600px;
  /* Use dynamic viewport units to keep content in view on mobile */
  max-height: calc(100svh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
}

@supports (height: 100dvh) {
  .modal-content {
    max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

/* Close Button */
.close-btn {
  color: #666;
  font-size: 24px;
  font-weight: 400;
  position: absolute;
  top: 20px;
  right: 24px;
  cursor: pointer;
  transition: color 0.15s ease;
  z-index: 1001;
  pointer-events: auto;
  background: transparent;
  border: none;
  padding: 4px;
}

.close-btn:hover,
.close-btn:focus {
  color: #2d2d2d;
}

/* Tab Navigation */
.tab-nav {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 0;
  position: relative;
}

.tab-nav::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50%;
  height: 2px;
  background-color: #9f7aea;
  transform: translateX(0);
  transition: transform 0.15s ease;
  z-index: 1;
}

.tab-link {
  background: none;
  border: none;
  padding: 12px 20px 12px 20px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: #666;
  position: relative;
  transition: color 0.15s ease;
  flex: 1;
  text-align: center;
}

.tab-link.active {
  color: #2d2d2d;
}

/* Move indicator to second tab when Add Income is active */
.tab-link:nth-child(2).active ~ .tab-nav::after,
.tab-nav:has(.tab-link:nth-child(2).active)::after {
  transform: translateX(100%);
}

.tab-content h2 {
  display: none;
}

/* Form Labels */
form label {
  display: block;
  margin-bottom: 4px;
  margin-top: 8px;
  font-weight: 600;
  color: #2d2d2d;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Currency and Amount Container */
.currency-amount {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin-bottom: 16px; /* Align section spacing with other fields */
}


/* Currency dropdown: compact fixed width; amount grows */
.currency-amount select,
.currency-amount .choices {
  flex: 0 0 88px;
  width: 88px !important;
  max-width: 100px;
  min-width: 72px;
  margin-bottom: 0;
}

.currency-amount input {
  flex: 1 1 auto;
  width: auto;
  margin-bottom: 0;
}

/* Uniform height for specific form fields */
#currencySelect,
#amountInput,
#category,
#date,
#location,
#vendor,
#paymentMethodSelect,
#paymentMethodInput,
#editPaymentMethodSelect,
#editPaymentMethodInput,
#incomeAmount,
#incomeSource,
#incomeDate {
  height: 44px;
}

.currency-amount select {
  flex: 0 0 88px;
  width: 88px !important;
  margin-right: 10px;
  padding: 8px;
}

.currency-amount input {
  flex: 1 1 auto;
  width: auto;
  padding: 8px;
}

/* Error message container styling */
#error-message,
#category-error-message,
#income-error-message {
  width: 100%;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: rgba(211, 47, 47, 0.1);
  border: 1px solid rgba(211, 47, 47, 0.3);
  border-radius: 4px;
  padding: 12px;
  color: #d32f2f;
  font-size: 0.875rem;
  margin-top: -8px;
  margin-bottom: 8px;
}

/* Choices.js Styling - Functional & Clean */
.choices {
  position: relative;
  margin-bottom: 16px;
  min-height: 44px; /* Ensure minimum height */
  display: block !important; /* Force display */
}

.choices__inner {
  border: 1px solid #e1e1e1 !important;
  border-radius: 4px !important;
  min-height: 44px !important;
  height: 44px !important; /* Fixed height for consistency */
  box-sizing: border-box !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  background-color: white !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease !important;
  position: relative !important;
}

.choices__inner:hover {
  border-color: #999 !important;
}

.choices__inner:focus,
.choices.is-focused .choices__inner {
  border-color: #9f7aea !important;
  outline: none !important;
}

.choices__inner .choices__item--selectable {
  font-size: 0.9rem !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
  background: transparent !important;
  border: none !important;
  color: #2d2d2d !important;
  display: block !important;
  width: 100% !important;
  font-weight: 400 !important;
}

.choices__list {
  margin: 0 !important;
}

.choices__list--dropdown {
  background: white !important;
  border: 1px solid #e1e1e1 !important;
  border-radius: 4px !important;
  margin-top: 1px !important;
  z-index: 10002 !important; /* Higher z-index for mobile */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  position: absolute !important;
  width: 100% !important;
}

.choices__list--dropdown .choices__item--choice {
  font-size: 0.9rem !important;
  padding: 8px 16px !important;
  background: white !important;
  color: #2d2d2d !important;
}

.choices__list--dropdown .choices__item--choice:hover,
.choices__list--dropdown .choices__item--choice.is-highlighted {
  background: rgba(159, 122, 234, 0.1) !important;
  color: #9f7aea !important;
}

.choices__list--dropdown .choices__input {
  font-size: 0.9rem !important;
  padding: 8px 16px !important;
  border: none !important;
  background: white !important;
  color: #2d2d2d !important;
}


/* Ensure proper z-index for modal context */
.modal .choices__list--dropdown {
  z-index: 10002 !important;
}

/* Specific desktop fixes for category dropdowns */
#category.choices,
#editCategory.choices,
select#category + .choices,
select#editCategory + .choices {
  display: block !important;
  min-height: 44px !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

#category.choices .choices__inner,
#editCategory.choices .choices__inner,
select#category + .choices .choices__inner,
select#editCategory + .choices .choices__inner {
  height: 44px !important;
  min-height: 44px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid #e1e1e1 !important;
  padding: 0 12px !important;
  background: white !important;
  cursor: pointer !important;
}

/* Form Inputs */
form input,
form select:not(.choices__input),
form textarea {
  width: 100%;
  height: 44px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.9rem;
  transition: border-color 0.15s ease;
  background: white;
  color: #2d2d2d;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Roboto', sans-serif;
}

/* Don't style the original select when using Choices.js */
form select.choices__input {
  display: none !important;
}

/* Hide native selects momentarily to prevent FOUC until Choices attaches */
select.choices-pending {
  visibility: hidden;
}

form textarea {
  height: 80px;
  resize: vertical;
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: #9f7aea;
}

form input:hover,
form select:hover,
form textarea:hover {
  border-color: #999;
}

/* Submit Button - Sticky at bottom with clear separation */
form button {
  background-color: #9f7aea;
  color: white;
  padding: 14px 20px;
  border: 1px solid #9f7aea;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.15s ease;
  margin-top: 8px;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Roboto', sans-serif;
}

/* Add padding above button for separation */
form button::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -24px;
  right: -24px;
  height: 16px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
}

form button:hover {
  background-color: #8b5fb8;
  border-color: #8b5fb8;
}

form button:active {
  background-color: #7c4dac;
  border-color: #7c4dac;
}

form button:focus {
  outline: none;
}

/* Hide spinner in number input for all modern browsers */
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  -webkit-appearance: none;   /* Chrome, Safari */
  appearance: none;           /* Other browsers */
}

/* Additional styling for Webkit-based browsers (Chrome, Safari) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Fix date input width overflow on mobile */
input[type="date"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  font-size: 16px !important; /* Prevent iOS zoom */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding: 12px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  text-align: left; /* Prefer left alignment for consistency */
}

/* Improve text alignment on WebKit (iOS Safari/Chrome) */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

/* Footer container and primary button */
.modal-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eaeaea;
  padding: 12px 20px;
  z-index: 3;
  box-sizing: border-box;
}

.btn-primary {
  background-color: #9f7aea;
  color: white;
  padding: 14px 18px;
  border: 1px solid #9f7aea;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  display: block;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus { outline: none; }
.btn-primary:hover { background-color: #8b5fb8; border-color: #8b5fb8; }

/* Lock body scroll when modal is open - apply to all screen sizes */
body.modal-open {
  overflow: hidden;
}

/* Clean Responsive Design */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    padding: 24px 20px;
    margin: 20px;
    max-height: calc(100vh - 40px);
  }
}

@media (max-width: 480px) {
  /* Enhanced mobile body scroll lock */
  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* Fixed positioning for mobile - no more floating */
  #expenseModal.modal {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0; /* remove bottom padding to avoid gap under footer */
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* Prevent iOS bounce scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
  }

  .modal-content {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Enable internal scrolling only */
    overflow: hidden;
    /* iOS safe area support */
    padding-top: env(safe-area-inset-top, 0);
    /* Reserve space for fixed footer so content never hides behind it */
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0));
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  /* Fixed header with tabs */
  .tab-nav {
    padding: 16px 16px 0 16px;
    background: white;
    flex-shrink: 0;
    border-bottom: 1px solid #e1e1e1;
    position: relative;
    z-index: 2;
  }

  /* Close button positioning */
  .close-btn {
    top: 12px;
    right: 16px;
    padding: 8px;
    font-size: 20px;
    z-index: 3;
  }

  /* Scrollable form container */
  #form-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Let child elements handle scrolling */
  }

  /* Form adjustments for mobile */
  form {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Keep amount section spacing consistent on mobile */
  .currency-amount { 
    margin-bottom: 12px; 
  }

  /* Scrollable form fields area */
  .form-content {
    flex: 1;
    padding: 20px 20px 0 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* If no .form-content wrapper, apply scrolling to form directly */
  form:not(:has(.form-content)) {
    padding: 20px 20px 0 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    gap: 12px; /* Reduce gap between fields */
  }

  /* Form field styles */
  form input,
  form select:not(.choices__input),
  form textarea {
    padding: 12px 16px;
    font-size: 16px; /* Prevent iOS zoom */
    border-radius: 4px;
    min-height: 44px;
    box-sizing: border-box;
    margin-bottom: 12px;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Roboto', sans-serif;
  }

  /* Don't override Choices.js select elements */
  form select.choices__input {
    display: none !important; /* Hide original select when using Choices.js */
  }

  form textarea {
    min-height: 100px;
    resize: none; /* Prevent resize on mobile */
  }

  /* Fixed submit button at bottom */
  form button { margin: 0; width: 100%; }

  /* Remove the gradient overlay on mobile for cleaner look */
  form button::before {
    display: none;
  }

  /* Currency amount container adjustments */
  .currency-amount {
    gap: 8px;
  }

  .currency-amount select,
  .currency-amount .choices {
    min-width: 88px;
  }

  /* Prevent text selection during touch interactions - but allow button touches */
  .modal-content * {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    -webkit-touch-callout: none;
  }

  /* Allow text selection in input fields */
  .modal-content input,
  .modal-content textarea {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Improve button touch responsiveness */
  .modal-content button,
  .modal-content .btn {
    -webkit-tap-highlight-color: rgba(45, 45, 45, 0.2);
    touch-action: manipulation;
    cursor: pointer;
  }

  /* iOS Compatibility - moved inside main mobile query */
  form input,
  form select,
  form textarea {
    font-size: 16px !important;
  }

  /* Choices.js mobile fixes */
  .choices {
    margin-bottom: 12px !important;
    display: block !important;
    min-height: 44px !important;
    width: 100% !important;
  }

  .choices__inner {
    min-height: 44px !important;
    height: 44px !important; /* Fixed height for mobile */
    padding: 12px 16px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 4px !important;
  }

  .choices__inner .choices__item--selectable {
    font-size: 16px !important;
    color: #2d2d2d !important;
    display: block !important;
    width: 100% !important;
    line-height: 1.4 !important;
  }

  /* Specific fix for both category dropdowns */
  #category.choices,
  #editCategory.choices,
  select#category + .choices,
  select#editCategory + .choices {
    display: block !important;
    min-height: 44px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  #category.choices .choices__inner,
  #editCategory.choices .choices__inner,
  select#category + .choices .choices__inner,
  select#editCategory + .choices .choices__inner {
    height: 44px !important;
    min-height: 44px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #e1e1e1 !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    border-radius: 4px !important;
  }

  .choices__inner .choices__item--selectable,
  .choices__list--dropdown .choices__item--choice,
  .choices__list--dropdown .choices__input {
    font-size: 16px !important;
  }

  .choices__list--dropdown {
    z-index: 10002 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e1e1e1 !important;
  }

  /* Ensure proper display on mobile */
  select#category + .choices,
  select#editCategory + .choices {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
  }

  /* Fix for Choices.js reinitialization on modal reopen */
  .choices[data-type="select-one"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .choices[data-type="select-one"] .choices__inner {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  /* Footer: mobile fixed to viewport bottom, edge-to-edge */
  .modal-footer-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(120%) blur(6px);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eaeaea;
    z-index: 10005; /* above modal content */
    box-sizing: border-box;
  }
  /* Hide any in-form footer on mobile; we use the fixed variant */
  #expenseModal form .modal-footer { display: none; }
  /* Hide the original submit button inside the add expense/income modal on mobile */
  #expenseModal form button[type="submit"] { display: none; }
}

/* Utility class to hide elements */
.hidden {
  display: none !important;
}