/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: background var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
  min-height: 2.75rem;
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; pointer-events: none; }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover { background: var(--color-primary-dark); }

.btn--secondary {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.btn--secondary:hover { background: var(--color-border); }

.btn--danger {
  background: var(--color-error);
  color: var(--color-on-primary);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.btn--ghost:hover { background: var(--color-surface-muted); }

.btn--icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--radius-full);
  min-height: auto;
}

.btn--block { width: 100%; }

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.card--interactive:active {
  transform: scale(0.99);
}

/* Activity icon */
.activity-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-icon .material-symbols-outlined { font-size: 1.5rem; }

.activity-icon--pumping { background: var(--color-pumping-bg); color: var(--color-pumping); }
.activity-icon--feeding { background: var(--color-feeding-bg); color: var(--color-feeding); }
.activity-icon--sleep { background: var(--color-sleep-bg); color: var(--color-sleep); }
.activity-icon--diaper { background: var(--color-diaper-bg); color: var(--color-diaper); }
.activity-icon--growth { background: var(--color-growth-bg); color: var(--color-growth); }
.activity-icon--vaccine { background: var(--color-primary-light); color: var(--color-primary); }
.activity-icon--appointment { background: var(--color-warning-bg); color: var(--color-warning); }

.activity-icon--round {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
}

.activity-icon--sm {
  width: 2rem;
  height: 2rem;
}

.activity-icon--sm .material-symbols-outlined {
  font-size: 1.125rem;
}

/* Quick access */
.quick-access-host {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.quick-access-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.quick-access-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  container-type: inline-size;
  container-name: quick-access;
  padding: var(--space-1) var(--page-padding);
}

.quick-access-track {
  --quick-access-cols: 5;
  --quick-access-row-height: clamp(3.625rem, 17cqi, 4.125rem);
  --quick-access-gap: clamp(0.3125rem, 2.4cqi, 0.625rem);
  display: grid;
  grid-template-columns: repeat(var(--quick-access-cols), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--quick-access-row-height), auto);
  gap: var(--quick-access-gap);
  width: 100%;
}

.quick-access-track .quick-nav {
  width: 100%;
  min-width: 0;
  min-height: var(--quick-access-row-height);
  box-sizing: border-box;
  padding: clamp(0.25rem, 1.4cqi, 0.5rem) clamp(0.125rem, 0.8cqi, 0.25rem);
  gap: clamp(2px, 0.9cqi, 4px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.quick-access-track .quick-nav__label {
  font-size: clamp(0.5rem, 2.6cqi, 0.5625rem);
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-access-track .activity-icon--sm {
  width: clamp(1.5rem, 7.5cqi, 1.75rem);
  height: clamp(1.5rem, 7.5cqi, 1.75rem);
}

.quick-access-track .activity-icon--sm .material-symbols-outlined {
  font-size: clamp(0.8125rem, 4.2cqi, 0.9375rem);
}

/* Legacy grid (unused on dashboard) */
.quick-access {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
  gap: var(--space-2);
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  text-align: center;
  cursor: pointer;
}

.quick-action:hover { border-color: rgba(0, 97, 255, 0.4); }
.quick-action:active { transform: scale(0.97); }

.quick-action__value {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
}

.quick-action__value--compact {
  font-size: var(--text-sm);
}

.quick-action__label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  line-height: 1.2;
}

.quick-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-lg);
  text-align: center;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.quick-nav:hover {
  transform: translateY(-1px);
}

.quick-nav:active {
  transform: scale(0.97);
}

.quick-nav__label {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
}

.quick-nav--growth {
  background: var(--color-growth-bg);
  border-color: color-mix(in srgb, var(--color-growth) 30%, var(--color-border));
}

.quick-nav--growth .quick-nav__label { color: var(--color-growth); }

.quick-nav--vaccine {
  background: var(--color-primary-light);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.quick-nav--vaccine .quick-nav__label { color: var(--color-primary); }

.quick-nav--appointment {
  background: var(--color-warning-bg);
  border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
}

.quick-nav--appointment .quick-nav__label { color: var(--color-warning); }

.quick-nav--milestone {
  background: var(--color-milestone-bg);
  border-color: color-mix(in srgb, var(--color-milestone) 30%, var(--color-border));
}

.quick-nav--milestone .quick-nav__label { color: var(--color-milestone); }

.quick-nav--profile {
  background: var(--color-profile-bg);
  border-color: color-mix(in srgb, var(--color-profile) 30%, var(--color-border));
}

.quick-nav--profile .quick-nav__label { color: var(--color-profile); }

.quick-nav--diaper {
  background: var(--color-diaper-bg);
  border-color: color-mix(in srgb, var(--color-diaper) 30%, var(--color-border));
}

.quick-nav--diaper .quick-nav__label { color: var(--color-diaper); }

.quick-nav--feeding {
  background: var(--color-feeding-bg);
  border-color: color-mix(in srgb, var(--color-feeding) 30%, var(--color-border));
}

.quick-nav--feeding .quick-nav__label { color: var(--color-feeding); }

.quick-nav--sleep {
  background: var(--color-sleep-bg);
  border-color: color-mix(in srgb, var(--color-sleep) 30%, var(--color-border));
}

.quick-nav--sleep .quick-nav__label { color: var(--color-sleep); }

.quick-nav--pumping {
  background: var(--color-pumping-bg);
  border-color: color-mix(in srgb, var(--color-pumping) 30%, var(--color-border));
}

.quick-nav--pumping .quick-nav__label { color: var(--color-pumping); }

.quick-nav--reports {
  background: var(--color-reports-bg);
  border-color: color-mix(in srgb, var(--color-reports) 30%, var(--color-border));
}

.quick-nav--reports .quick-nav__label { color: var(--color-reports); }

.activity-icon--nav-growth { background: var(--color-growth); color: #fff; }
.activity-icon--nav-vaccine { background: var(--color-primary); color: var(--color-on-primary); }
.activity-icon--nav-appointment { background: var(--color-warning); color: #fff; }
.activity-icon--nav-milestone { background: var(--color-milestone); color: #fff; }
.activity-icon--nav-profile { background: var(--color-profile); color: #fff; }
.activity-icon--nav-diaper { background: var(--color-diaper); color: #fff; }
.activity-icon--nav-feeding { background: var(--color-feeding); color: #fff; }
.activity-icon--nav-sleep { background: var(--color-sleep); color: #fff; }
.activity-icon--nav-pumping { background: var(--color-pumping); color: #fff; }
.activity-icon--nav-reports { background: var(--color-reports); color: #fff; }

/* Dashboard module filter */
.module-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

.module-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  opacity: 0.4;
  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.module-filter-btn .material-symbols-outlined {
  font-size: 1.125rem;
}

.module-filter-btn:active {
  transform: scale(0.94);
}

.module-filter-btn--active {
  opacity: 1;
}

.module-filter-btn--active.module-filter-btn--diaper {
  background: var(--color-diaper-bg);
  color: var(--color-diaper);
}

.module-filter-btn--active.module-filter-btn--feeding {
  background: var(--color-feeding-bg);
  color: var(--color-feeding);
}

.module-filter-btn--active.module-filter-btn--sleep {
  background: var(--color-sleep-bg);
  color: var(--color-sleep);
}

.module-filter-btn--active.module-filter-btn--pumping {
  background: var(--color-pumping-bg);
  color: var(--color-pumping);
}

.module-filter-btn--active.module-filter-btn--growth {
  background: var(--color-growth-bg);
  color: var(--color-growth);
}

.module-filter-btn--active.module-filter-btn--vaccine {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.module-filter-btn--active.module-filter-btn--appointment {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* Badge / Chip */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge--wet { background: #dbeafe; color: #1d4ed8; }
.badge--dirty { background: #fef3c7; color: #b45309; }
.badge--both { background: #fce7f3; color: #be185d; }
.badge--dry { background: var(--color-diaper-bg); color: var(--color-diaper); }

/* Form */
.form-group { margin-bottom: var(--space-4); }

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  color: var(--color-text);
  min-height: 3rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 97, 255, 0.15);
}

.form-textarea {
  min-height: 6rem;
  resize: vertical;
}

/* Option grid (bez durumu vb.) */
.option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.option-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.option-card:hover { border-color: rgba(0, 97, 255, 0.3); }

.option-card--selected {
  border-color: var(--color-primary);
  background: rgba(0, 97, 255, 0.06);
}

.option-card__icon { font-size: 1.75rem; color: var(--color-text-muted); }
.option-card--selected .option-card__icon { color: var(--color-primary); }
.option-card__title { font-weight: 700; font-size: var(--text-base); }
.option-card__desc { font-size: var(--text-xs); color: var(--color-text-secondary); }

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

.option-card--center {
  align-items: center;
  text-align: center;
}

.option-card--center .option-card__desc { text-align: center; }

.option-card__emoji {
  font-size: 1.75rem;
  line-height: 1;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-stack .form-group,
.form-grid-2 .form-group {
  min-width: 0;
  margin-bottom: 0;
}

.form-input--datetime {
  min-width: 0;
  width: 100%;
  font-size: var(--text-sm);
}

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

.option-card--multi.option-card--selected {
  border-color: var(--color-primary);
  background: rgba(0, 97, 255, 0.06);
}

/* Food picker — kategorili kompakt chip grid */
.food-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.food-picker__hint {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.food-picker__count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
}

.food-group__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.food-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.food-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 4.25rem;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.food-chip:active {
  transform: scale(0.97);
}

.food-chip--selected {
  border-color: var(--color-primary);
  background: rgba(0, 97, 255, 0.08);
}

.food-chip__emoji {
  font-size: 1.375rem;
  line-height: 1;
}

.food-chip__label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  line-height: 1.2;
}

.food-chip--selected .food-chip__label {
  color: var(--color-primary);
}

@media (min-width: 380px) {
  .food-chip-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.form-input-wrap { position: relative; }

.form-input-wrap .form-input { padding-right: 2.75rem; }

.form-input-wrap .form-input__suffix {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* Modal form sections */
.modal-section { margin-bottom: var(--space-5); }
.modal-section:last-child { margin-bottom: 0; }

.modal-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

.modal-section__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.modal-section__row .modal-section__title {
  margin-bottom: 0;
}

.modal-section .form-group:last-child { margin-bottom: 0; }

.tabs {
  display: flex;
  gap: var(--space-1);
  background: var(--color-surface-muted);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.tab {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tab--active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Period toggle */
.period-toggle {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.period-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  transition: all var(--transition-fast);
}

.period-btn--active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.period-toggle--stretch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.period-toggle--stretch .period-btn {
  text-align: center;
  padding: var(--space-3) var(--space-2);
}

.period-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-secondary);
}

.empty-state__icon {
  font-size: 3rem;
  color: var(--color-border-strong);
  margin-bottom: var(--space-3);
}

/* List item */
.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: nowrap;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-3);
  transition: border-color var(--transition-fast);
}

.list-item:hover { border-color: rgba(0, 97, 255, 0.3); }

.list-item__content { flex: 1; min-width: 0; }
.list-item__title { font-weight: 700; margin-bottom: var(--space-1); }
.list-item__meta { font-size: var(--text-xs); color: var(--color-text-secondary); }
.list-item__time { text-align: right; flex-shrink: 0; }
.list-item__time-value { font-size: var(--text-sm); font-weight: 500; }
.list-item__time-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.list-item__actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.list-item__actions .btn--icon {
  color: var(--color-text-muted);
}

.list-item__actions .btn--icon:hover {
  color: var(--color-primary);
  background: var(--color-surface-muted);
}

.list-item__actions [data-action="delete"]:hover {
  color: var(--color-error);
}

/* Material icons */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

.material-symbols-outlined--filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}