@import url("../assets/css/eisrose.css");

/* FoodJournal: Navigation, Tabellen und Seitenaufteilung. */
.fj-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fj-nav form { margin: 0; }
.fj-nav button { padding: 7px 12px; font-size: 14px; }
.fj-nav input[type=hidden] { display: none; }
.user-row { padding: 12px 0 24px; border-bottom: 1px solid var(--border); }
.user-row h3 { margin-bottom: 0; }
.status-form { margin-top: 18px; }
.dates{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dates a{text-decoration:none;font-weight:650}
.dates form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fj-diary .grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.actions{display:flex;align-items:center;gap:20px;margin-top:24px}
.summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:24px 0}
.total strong{display:block;font-size:24px}
.total small{font-size:12px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
th,td{padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.num{text-align:right;white-space:nowrap}
.row-actions{display:flex;gap:12px;align-items:center;white-space:nowrap}
.confirm{display:flex;gap:10px;align-items:center;margin-top:8px}
.confirm button{padding:5px 8px;font-size:13px}
.name{min-width:160px}
ul{margin:0;padding-left:20px}
.fj-products .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.nutrients{grid-template-columns:repeat(5,minmax(0,1fr))}
td.num,th.num{text-align:right;white-space:nowrap}
td.name{min-width:180px}
.section-label{margin:24px 0 12px;font-weight:650}

.dates input { margin: 0; width: auto; }
.total { border-radius: 12px; padding: 18px; }
small { display: block; font-weight: 400; }
@media (max-width: 650px) {
  .fj-nav { gap: 12px; font-size: 14px; }
  header { align-items: flex-start; flex-direction: column; }
  .fj-diary .grid, .fj-products .grid { grid-template-columns: 1fr; }
  .nutrients, .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dates { flex-wrap: wrap; }
  .dates form { order: 3; width: 100%; justify-content: center; }
  .total strong { font-size: 22px; }
  .actions { flex-wrap: wrap; }
}

/* Eisfarben: nur FoodJournal lädt diese Datei. */
:root {
  --ink: #e7f2fa;
  --text: #e7f2fa;
  --muted: #bfd0df;
  --border: rgba(205, 230, 248, .28);
  --card: rgba(25, 48, 70, .8);
  --paper: var(--card);
  --link: #b8def5;
  --link-hover: #e0f3ff;
  --green: var(--link);
  --shadow: 0 12px 30px rgba(4, 15, 30, .22);
}
main {
  background: linear-gradient(135deg, rgba(35, 61, 84, .94), rgba(13, 32, 51, .94));
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(240, 249, 255, .12), var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.card {
  background: linear-gradient(135deg, rgba(153, 190, 217, .12), rgba(13, 31, 49, .55));
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(240, 249, 255, .08), 0 8px 22px rgba(4, 15, 30, .12);
}
.brand, .logo, h1, h2, h3, strong { color: #e3f3ff; }
.brand, .logo { font-weight: 550; letter-spacing: .06em; }
h1, h2 { font-weight: 550; letter-spacing: .025em; }
input, select {
  background: rgba(9, 25, 41, .78);
  color: #edf7ff;
  border-color: rgba(190, 219, 239, .45);
}
input::placeholder { color: #b5c8d8; }
select option { background: #162e44; color: #edf7ff; }
input:focus, select:focus {
  outline-color: #a7d4ef;
  border-color: #d1ecff;
}
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: #c4e7fc; }
button {
  background: #365c78;
  color: #f2f9ff;
  border: 1px solid rgba(202, 230, 249, .45);
  box-shadow: inset 0 1px 0 rgba(240, 249, 255, .12);
}
button:hover { background: #426e8c; }
.secondary { background: #2b4359; color: var(--text); border-color: var(--border); }
.secondary:hover { background: #38556f; }
.total {
  background: linear-gradient(135deg, rgba(115, 169, 205, .22), rgba(22, 47, 69, .8));
  border-color: rgba(205, 230, 248, .32);
}
.total strong { color: #e3f3ff; }
thead { background: rgba(164, 206, 235, .08); }
th { color: #c7dfef; }
tbody tr:nth-child(even) { background: rgba(190, 220, 240, .035); }
tbody tr:hover { background: rgba(164, 206, 235, .09); }
th, td { border-bottom-color: rgba(205, 230, 248, .18); }
.delete { background: transparent; color: #ffb8c4; border: 0; box-shadow: none; }
.delete:hover { background: transparent; color: #ffdee5; }
/* Erfolgs- und Fehlermeldungen behalten unterscheidbare Signalfarben. */
.message { background: #1a4148; color: #dbf8ec; border-color: #638e94; }
.error, .message.error { background: #482c3c; color: #ffe4ec; border-color: #b77f98; }