/* ------------------------------------------------- GRUNDREGELN ------------------------------------------------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden;
}

body.no-scroll {
  height: 100vh;
  overflow: hidden;
}

/* ------------------------------------------------- FARBEN ----------------------------------------------------- */

:root {
  --color-background:      #FFF8F2;
  --color-surface:         #FFFCFA;

  --color-primary:         #D5B4EB;
  --color-secondary:       #6244B4;
  --color-text:            #0f0b1d;

  --color-status-good:     #7BC47F;
  --color-status-warning:  #F4AB4F;
  --color-status-critical: #DA5045;

  --surface2:              #F0EFF8;
  --border:                #E8E6F5;
  --text-secondary:        #7A7899;
  --shadow:                0 2px 12px rgba(98, 68, 180, 0.08);
  --shadow-md:             0 4px 24px rgba(98, 68, 180, 0.13);
  --purple-dark:           #4a3490;
  --red-light:             #FEF0F0;

  --color-check-border:    #C4B5FD;
  --color-token:           #d97706;
  --color-placeholder:     #B8B6D0;
}

/* ------------------------------------------------- DARK MODE ----------------------------------------------------- */

[data-theme="dark"] {
  --color-background: #12111F;
  --color-surface:    #1E1D30;
  --color-text:       #F0EFF8;
  --color-primary:    #2A2650;
  --color-secondary:  #7C6FF7;
  --surface2:         #282640;
  --border:           #2E2C4A;
  --text-secondary:   #9C9ABE;
  --shadow:           0 2px 12px rgba(0, 0, 0, 0.25);
  --shadow-md:        0 4px 24px rgba(0, 0, 0, 0.35);
  --red-light:        #2A1A1A;
}

/* ── Dark Mode Fixes ── */
[data-theme="dark"] .task-card,
[data-theme="dark"] .mini-kid-card,
[data-theme="dark"] .mini-pet-card,
[data-theme="dark"] .child-card,
[data-theme="dark"] .naepfe-card,
[data-theme="dark"] .register-animal-form,
[data-theme="dark"] .register-child-form,
[data-theme="dark"] .kids-modal {
  background: var(--color-surface);
}

[data-theme="dark"] .task-row {
  background: var(--surface2);
}

[data-theme="dark"] .task-check {
  background: var(--surface2);
  border-color: var(--border);
}

[data-theme="dark"] .animal-task-row {
  background: var(--surface2);
}

[data-theme="dark"] .animal-task-check {
  background: var(--surface2);
  border-color: var(--border);
}

[data-theme="dark"] .icon-option {
  background: var(--surface2);
  border-color: var(--border);
}

[data-theme="dark"] .icon-option.selected {
  background: var(--color-primary);
  border-color: var(--color-secondary);
}

[data-theme="dark"] .register-animal-form input,
[data-theme="dark"] .register-animal-form select,
[data-theme="dark"] .register-child-form input,
[data-theme="dark"] .kids-modal input[type="number"] {
  background: var(--surface2);
  color: var(--color-text);
  border-color: var(--border);
}

[data-theme="dark"] .device-card {
  background: var(--surface2);
  border-color: var(--border);
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-cancel,
[data-theme="dark"] .btn-logout,
[data-theme="dark"] .modal-btn-cancel {
  background: var(--surface2);
  color: var(--color-text);
}

/* ------------------------------------------------- FONTS & BASIS ----------------------------------------------------- */

body {
  font-family: 'Nunito', sans-serif;
  color: var(--color-text);
  background-color: var(--color-background);
  min-height: 100vh;
  padding: 1rem;
}

/* ------------------------------------------------- ABSTÄNDE UND LAYOUT ----------------------------------------------------- */

.page {
  padding: 1.75rem 1rem 8.75rem;
  max-width: 30rem;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 1.5rem;
}

.page-header h1 {
  font-size: 1.625rem;
  margin-bottom: 0.25rem;
  letter-spacing: -0.025em;
}

.page-header p {
  font-size: 0.812rem;
  color: var(--text-secondary);
  margin: 0;
}

#panel-hub .page-header,
.panel .page-header {
  padding-top: 1.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ------------------------------------------------- BILDER ----------------------------------------------------- */

img {
  max-width: 100%;
  display: block;
}

/* ------------------------------------------------- LINKS ----------------------------------------------------- */

a {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 600;
}

/* ------------------------------------------------- BUTTONS ----------------------------------------------------- */

button {
  display: inline-block;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 1rem;
  background-color: var(--color-primary);
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
  text-decoration: none;
  transition: 0.2s ease;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

button:active {
  background-color: var(--color-secondary);
  transform: scale(0.97);
}

.btn-primary {
  flex: 1;
  padding: 0.812rem;
  background: var(--color-primary);
  color: var(--color-text);
  border-radius: 0.75rem;
  font-size: 0.937rem;
  font-weight: 700;
  margin: 0;
}

.btn-secondary {
  flex: 1;
  padding: 0.812rem;
  background: var(--border);
  color: var(--color-text);
  border-radius: 0.75rem;
  font-size: 0.937rem;
  font-weight: 700;
  margin: 0;
}

.btn-back {
  background: none;
  border: none;
  color: var(--color-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0;
  margin: 0 0 0.75rem;
  cursor: pointer;
}

/* ------------------------------------------------- FORMULARE ----------------------------------------------------- */

label {
  display: block;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  font-weight: 600;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 0.75rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
  border-color: var(--color-secondary);
}

/* ------------------------------------------------- HILFSELEMENTE ----------------------------------------------------- */

.empty-hint {
  font-size: 0.812rem;
  color: var(--text-secondary);
  margin: 0;
}