/* ==========================================================================
   Eigene Styles für die Haushaltsplan-App
   Ergänzt Tailwind um Dinge, die sich schlecht als Utility ausdrücken lassen.
   ========================================================================== */

/* --- Scrollbars dezent gestalten ----------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(148 163 184 / 0.4); border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: rgb(100 116 139 / 0.4); }

/* --- Sanfte Übergänge ----------------------------------------------------- */
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-1px); }

/* --- Toast-Animation ------------------------------------------------------ */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-enter { animation: toast-in .18s ease-out; }

/* --- Modal-Animation ------------------------------------------------------ */
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-enter { animation: modal-in .16s ease-out; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.fade-enter { animation: fade-in .15s ease-out; }

/* --- Bottom-Nav Safe-Area (iOS) ------------------------------------------- */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* --- Toggle-Switch -------------------------------------------------------- */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 9999px;
  background: rgb(148 163 184 / .5); transition: background .2s;
}
.switch .slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  border-radius: 50%; background: white; transition: transform .2s;
  box-shadow: 0 1px 2px rgb(0 0 0 / .25);
}
.switch input:checked + .slider { background: #6366f1; }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:disabled + .slider { opacity: .5; cursor: not-allowed; }

/* --- Kategorie-Farb-Chip --------------------------------------------------- */
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 9999px; flex: none; }

/* --- Tabellen auf Mobile kompakter ----------------------------------------- */
@media (max-width: 640px) {
  .table-compact td, .table-compact th { padding-left: .5rem; padding-right: .5rem; }
}