/* Custom application styles */

/* Editable cell styles */
.editable-amount-input {
  max-width: 150px;
}

/* Table column widths */
.col-month {
  width: 25%;
}

.col-allocation {
  width: 30%;
}

.col-amount {
  width: 25%;
}

.col-actions {
  width: 20%;
}

/* Daily tracker styles - Mobile-optimized */
.daily-container {
  max-width: 600px;
}

.daily-amount-label {
  font-size: 1.1rem;
}

.daily-amount-symbol {
  font-size: 1.5rem;
}

.daily-amount-input {
  font-size: 1.5rem;
}

.daily-submit-btn {
  font-size: 1.3rem;
  padding: 1rem;
}

.daily-total-card {
  border-left: 5px solid #dc3545;
}

.daily-total-label {
  font-size: 1.2rem;
}

.daily-total-amount {
  font-size: 1.5rem;
}

.daily-entry-amount {
  font-size: 1.2rem;
}

.daily-empty-icon {
  font-size: 3rem;
  opacity: 0.3;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
  body {
    font-size: 16px; /* Prevents iOS zoom on input focus */
  }

  input:focus,
  select:focus,
  textarea:focus {
    font-size: 16px; /* Prevents iOS zoom on input focus */
  }
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Collapse icon rotation */
.collapse-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

[aria-expanded="false"] .collapse-icon {
  transform: rotate(-90deg);
}

[aria-expanded="true"] .collapse-icon {
  transform: rotate(0deg);
}

/* Month selector responsive styles */
.month-selector-container {
  width: 100%;
}

/* Mobile: 2 columns grid for better touch targets */
@media (max-width: 576px) {
  .month-selector-container .d-flex {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .month-selector-container .btn {
    flex-grow: 1 !important;
  }
}

/* Tablet: 3 columns */
@media (min-width: 577px) and (max-width: 768px) {
  .month-selector-container .d-flex {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
}

/* Desktop: 4 columns */
@media (min-width: 769px) and (max-width: 992px) {
  .month-selector-container .d-flex {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }
}

/* Large desktop: flex wrap (original behavior) */
@media (min-width: 993px) {
  .month-selector-container .d-flex {
    gap: 0.25rem;
  }
}