/* public/css/app.css */

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

/* ===========================================================
   Rose Pine — Dawn (Light) als Default
   Quelle: rosepinetheme.com/palette
   =========================================================== */
:root,
[data-theme="light"] {
  --bg: #faf4ed;            /* base */
  --card: #fffaf3;          /* surface */
  --overlay: #f2e9e1;       /* overlay */
  --ink: #575279;           /* text */
  --ink2: #797593;          /* subtle */
  --ink3: #9893a5;          /* muted */
  --accent: #286983;        /* pine */
  --accent-light: #f4ede8;  /* highlight low — als Tag-Hintergrund */
  --accent-dark: #1d4f63;   /* pine, leicht verdunkelt für Hover */
  --accent-fg: #ffffff;     /* Text auf Accent */
  --tag-bg: #dfdad9;        /* highlight med */
  --border: #dfdad9;        /* highlight med */
  --danger: #b4637a;        /* love */
  --success: #56949f;       /* foam — wird für visit-badge / aktiv genutzt */
  --warn: #ea9d34;          /* gold */

  /* Topbar — in Light & Dark gleich dunkel, Brand-Identity */
  --topbar-bg: #1f1d2e;
  --topbar-fg: #e0def4;
  --topbar-muted: #908caa;
  --topbar-mark-bg: #286983;

  /* Form-Inputs */
  --input-bg: #fffaf3;
  --input-bg-focus: #ffffff;

  /* Alerts */
  --alert-bg: #f5e0e0;
  --alert-fg: #b4637a;
  --alert-border: #e8c0c0;

  /* Status-Akzent (Card-Accent-Strich, Map-Marker) */
  --status-aktiv: #56949f;       /* foam */
  --status-offen: #ea9d34;       /* gold */
  --status-ausland: #907aa9;     /* iris */
  --status-abgeschlossen: #9893a5;

  /* Status-Pillen (bg + fg) */
  --pill-aktiv-bg: #dfeef0;
  --pill-aktiv-fg: #286983;
  --pill-offen-bg: #faecd5;
  --pill-offen-fg: #9c6d23;
  --pill-ausland-bg: #ebe0f3;
  --pill-ausland-fg: #5a4275;
  --pill-abgeschlossen-bg: #dfdad9;
  --pill-abgeschlossen-fg: #797593;

  --shadow: 0 1px 3px rgba(40,30,60,0.06), 0 4px 12px rgba(40,30,60,0.04);
}

/* ===========================================================
   Rose Pine — Main (Dark)
   =========================================================== */
[data-theme="dark"] {
  --bg: #191724;            /* base */
  --card: #1f1d2e;          /* surface */
  --overlay: #26233a;       /* overlay */
  --ink: #e0def4;           /* text */
  --ink2: #908caa;          /* subtle */
  --ink3: #6e6a86;          /* muted */
  --accent: #9ccfd8;        /* foam (heller, kontraststark auf dunkel) */
  --accent-light: #26233a;  /* overlay — als Tag-Hintergrund */
  --accent-dark: #c4a7e7;   /* iris — als Hover-Akzent */
  --accent-fg: #191724;     /* base als Text auf hellem Foam */
  --tag-bg: #26233a;
  --border: #403d52;        /* highlight med */
  --danger: #eb6f92;        /* love */
  --success: #9ccfd8;       /* foam */
  --warn: #f6c177;          /* gold */

  --topbar-bg: #1f1d2e;
  --topbar-fg: #e0def4;
  --topbar-muted: #908caa;
  --topbar-mark-bg: #31748f;

  --input-bg: #26233a;
  --input-bg-focus: #2a2740;

  --alert-bg: #2e1f28;
  --alert-fg: #eb6f92;
  --alert-border: #5a3447;

  --status-aktiv: #9ccfd8;
  --status-offen: #f6c177;
  --status-ausland: #c4a7e7;
  --status-abgeschlossen: #6e6a86;

  --pill-aktiv-bg: #21202e;
  --pill-aktiv-fg: #9ccfd8;
  --pill-offen-bg: #21202e;
  --pill-offen-fg: #f6c177;
  --pill-ausland-bg: #21202e;
  --pill-ausland-fg: #c4a7e7;
  --pill-abgeschlossen-bg: #26233a;
  --pill-abgeschlossen-fg: #6e6a86;

  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.25);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Wenn nichts gesetzt: System-Präferenz spiegeln */
    color-scheme: dark;
  }
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.5;
  transition: background-color 0.18s, color 0.18s;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbar */
.topbar {
  background: var(--topbar-bg);
  color: var(--topbar-fg);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 0.55rem; color: var(--topbar-fg); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 28px; height: 28px;
  background: var(--topbar-mark-bg);
  color: var(--topbar-fg);
  display: grid; place-items: center;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.95rem;
}
.brand-text { font-weight: 600; font-size: 0.98rem; }
.topnav { display: flex; align-items: center; gap: 0.85rem; }
.user-name { color: var(--topbar-muted); font-size: 0.85rem; font-family: 'DM Mono', monospace; }
.topnav .btn-link { color: var(--topbar-fg); }

/* Theme-Toggle */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(224, 222, 244, 0.15);
  color: var(--topbar-fg);
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  padding: 0;
  transition: background-color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: rgba(224, 222, 244, 0.08); border-color: rgba(224, 222, 244, 0.3); }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; line-height: 1; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon,
:root:not([data-theme]) .theme-toggle .icon-moon { display: block; }

/* Main */
.main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0 1.25rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.page-header h1 { font-size: 1.5rem; font-weight: 700; }
.btn-back {
  font-size: 0.88rem;
  color: var(--ink2);
  font-family: 'DM Mono', monospace;
}
.header-actions { display: flex; gap: 0.5rem; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { background: var(--tag-bg); text-decoration: none; }
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: var(--accent-fg); }
.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.btn-danger { color: var(--danger); }
.inline-form { display: inline; }

/* Map */
.map-section {
  margin-bottom: 1rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background: var(--card);
}
#map { width: 100%; height: 320px; }
/* Dark-Tiles aufhellen, damit der Kontrast besser passt */
[data-theme="dark"] .leaflet-tile-pane { filter: brightness(1.45) contrast(1.05) saturate(1.15); }

.map-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 var(--card), 1px -1px 0 var(--card),
    -1px  1px 0 var(--card), 1px  1px 0 var(--card);
}
.leaflet-popup-content-wrapper {
  font-family: 'DM Sans', sans-serif;
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
}
.leaflet-popup-tip { background: var(--card); }
.leaflet-popup-content { margin: 0.65rem 0.85rem; line-height: 1.5; }

/* Search */
.search-bar { margin-bottom: 0.75rem; }
.search-bar input {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--card);
  color: var(--ink);
  outline: none;
}
.search-bar input:focus { border-color: var(--accent); }

/* Placement list */
.placement-list { display: flex; flex-direction: column; gap: 0.6rem; }
.placement-card {
  display: flex;
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  color: inherit;
  transition: transform 0.1s, box-shadow 0.15s;
}
.placement-card:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 6px 18px rgba(0,0,0,0.06); }
.card-accent { width: 4px; flex-shrink: 0; background: var(--accent); }
.card-accent.status-aktiv { background: var(--status-aktiv); }
.card-accent.status-offen { background: var(--status-offen); }
.card-accent.status-ausland { background: var(--status-ausland); }
.card-accent.status-abgeschlossen { background: var(--status-abgeschlossen); }

.card-body { padding: 0.85rem 0.95rem; flex: 1; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.student { font-size: 1rem; font-weight: 600; }
.company { font-size: 0.85rem; color: var(--ink2); margin-top: 0.15rem; }
.company.muted { color: var(--ink3); font-style: italic; }
.meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  background: var(--accent-light);
  color: var(--accent);
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
}
.tag-muted { background: var(--tag-bg); color: var(--ink2); }
.visit-badge {
  font-size: 0.72rem;
  background: var(--success);
  color: var(--accent-fg);
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.card-chevron {
  display: grid;
  place-items: center;
  padding: 0 1rem;
  color: var(--ink3);
  font-size: 1.4rem;
}

/* Detail */
.detail-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}
.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.detail-head h1 { font-size: 1.4rem; font-weight: 700; }
.detail-head .company { font-size: 1rem; margin-top: 0.25rem; }
.status-pill {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  border-radius: 10px;
  text-transform: uppercase;
  background: var(--tag-bg);
  color: var(--ink2);
  white-space: nowrap;
}
.status-pill.status-aktiv { background: var(--pill-aktiv-bg); color: var(--pill-aktiv-fg); }
.status-pill.status-offen { background: var(--pill-offen-bg); color: var(--pill-offen-fg); }
.status-pill.status-ausland { background: var(--pill-ausland-bg); color: var(--pill-ausland-fg); }
.status-pill.status-abgeschlossen { background: var(--pill-abgeschlossen-bg); color: var(--pill-abgeschlossen-fg); }

.detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.2rem;
}
.detail-grid dt {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink3);
  text-transform: uppercase;
  align-self: start;
  padding-top: 0.1rem;
}
.detail-grid dd { color: var(--ink); }
.notes-block { white-space: pre-wrap; }
.link-maps { font-size: 0.85rem; }

/* Visits */
.visits-section h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.visit-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.visit-form label { display: block; margin-bottom: 0.65rem; }
.visit-form label span {
  display: block;
  font-size: 0.8rem;
  color: var(--ink2);
  margin-bottom: 0.3rem;
  font-weight: 500;
}
.visit-form input, .visit-form textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--input-bg);
  color: var(--ink);
  outline: none;
  resize: vertical;
}
.visit-form input:focus, .visit-form textarea:focus { border-color: var(--accent); background: var(--input-bg-focus); }
.form-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.form-row label { flex: 1; min-width: 140px; }

.empty-state {
  text-align: center;
  color: var(--ink3);
  font-style: italic;
  padding: 1rem;
}
.visit-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.visit-item {
  background: var(--card);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 0.75rem 0.95rem;
  box-shadow: var(--shadow);
}
.visit-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}
.visit-author {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink3);
}
.visit-notes { color: var(--ink2); white-space: pre-wrap; font-size: 0.9rem; }

/* Abwesenheiten */
.absences-section { margin-top: 1.5rem; }
.absence-item { border-left-color: var(--warn); }
.absence-type {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  letter-spacing: 0.03em;
}
.absence-type-krank { background: var(--pill-offen-bg); color: var(--pill-offen-fg); }
.absence-type-entschuldigt { background: var(--pill-aktiv-bg); color: var(--pill-aktiv-fg); }
.absence-type-unentschuldigt {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}
.muted-inline { color: var(--ink3); font-size: 0.88rem; }

/* Form */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.form-card h1 { font-size: 1.4rem; margin-bottom: 1.2rem; }
.placement-form fieldset {
  border: none;
  border-top: 1px solid var(--border);
  padding: 1rem 0 0;
  margin-bottom: 1rem;
}
.placement-form fieldset:first-of-type { border-top: none; padding-top: 0; }
.placement-form legend {
  font-size: 0.75rem;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 0.6rem;
  padding: 0;
}
.placement-form label { display: block; margin-bottom: 0.7rem; }
.placement-form label span {
  display: block;
  font-size: 0.82rem;
  color: var(--ink2);
  margin-bottom: 0.3rem;
}
.placement-form input, .placement-form select, .placement-form textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--input-bg);
  color: var(--ink);
  outline: none;
  resize: vertical;
}
.placement-form input:focus, .placement-form select:focus, .placement-form textarea:focus {
  border-color: var(--accent);
  background: var(--input-bg-focus);
}
.grow-1 { flex: 1; }
.grow-2 { flex: 2; }
.form-hint { font-size: 0.78rem; color: var(--ink3); margin-top: -0.25rem; margin-bottom: 0.5rem; }
.addr-status.ok { color: var(--success); }

/* Autocomplete-Dropdown für Adress-Suche */
.addr-suggest {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  margin-top: 4px;
  box-shadow: var(--shadow);
  max-height: 280px;
  overflow-y: auto;
}
.addr-suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.55rem 0.85rem;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.addr-suggest-item:last-child { border-bottom: none; }
.addr-suggest-item:hover, .addr-suggest-item.active { background: var(--accent-light); color: var(--accent); }
.form-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Login */
.login-wrap {
  min-height: calc(100vh - 60px);
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}
.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 360px;
}
.login-card h1 { font-size: 1.4rem; margin-bottom: 1.25rem; }
.login-card label { display: block; margin-bottom: 0.85rem; }
.login-card label span { display: block; font-size: 0.82rem; color: var(--ink2); margin-bottom: 0.3rem; }
.login-card input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--input-bg);
  color: var(--ink);
  outline: none;
}
.login-card input:focus { border-color: var(--accent); background: var(--input-bg-focus); }
.login-card .btn { width: 100%; margin-top: 0.5rem; }
.alert {
  background: var(--alert-bg);
  color: var(--alert-fg);
  border: 1px solid var(--alert-border);
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.88rem;
}

/* Error */
.error-page {
  text-align: center;
  padding: 3rem 1rem;
}
.error-page h1 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.error-page p { color: var(--ink2); margin-bottom: 1.5rem; }

@media (max-width: 600px) {
  .detail-grid { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .detail-grid dt { margin-top: 0.6rem; }
  .detail-grid dt:first-child { margin-top: 0; }
}