/* App-specific overrides, layered on top of theme.css. */

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--text-secondary);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(var(--calendar-days), minmax(180px, 1fr));
  gap: .5rem;
  overflow-x: auto;
  align-items: stretch;
}

.calendar-month {
  grid-template-columns: repeat(7, minmax(125px, 1fr));
}

.calendar-day {
  min-height: 230px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.calendar-month .calendar-day {
  min-height: 145px;
}

.calendar-day-muted {
  background: var(--surface-2);
  color: var(--text-secondary);
}

.calendar-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--border);
  text-transform: capitalize;
  color: var(--brand-800);
  font-size: .8rem;
}

.calendar-dropzone {
  min-height: 180px;
  padding: .45rem;
}

.calendar-month .calendar-dropzone {
  min-height: 95px;
}

.calendar-empty {
  padding: 1rem .3rem;
  color: var(--border-strong);
  text-align: center;
  font-size: .85rem;
}

.calendar-slots-label {
  padding: .75rem .25rem .35rem;
  color: var(--text-secondary);
  font-size: .75rem;
}

.calendar-slot {
  min-height: 24px;
  padding: .15rem .35rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-size: .7rem;
}

.calendar-slot:hover {
  background: var(--brand-50);
  border-color: var(--brand-500);
}

.appointment-card {
  margin-bottom: .45rem;
  border-left: 4px solid var(--text-secondary);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  cursor: grab;
  font-size: .85rem;
}

.appointment-card:active {
  cursor: grabbing;
}

.appointment-link {
  display: grid;
  gap: .1rem;
  padding: .45rem .55rem;
  color: inherit;
  text-decoration: none;
}

.appointment-link:hover {
  color: inherit;
  background: var(--brand-50);
}

.appointment-link small {
  color: var(--text-secondary);
}

.status-pending { border-color: var(--warning); }
.status-confirmed { border-color: var(--brand-600); }
.status-completed { border-color: var(--success); }
.status-cancelled { border-color: var(--danger); opacity: .65; }
.status-noshow { border-color: var(--brand-400); }

.appointment-form, .customer-form {
  max-width: 850px;
}

@media (max-width: 767.98px) {
  .calendar-grid:not(.calendar-month) {
    grid-template-columns: repeat(var(--calendar-days), minmax(230px, 1fr));
  }
}