/* Toasts and confirm dialog (static/ui.js). Self-contained colours, so it
   also works on pages that do not load Base.css (sign-in). */
.pk-toasts {
    position: fixed; z-index: 3000; inset-inline: 0; bottom: 1.2rem;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    pointer-events: none; direction: rtl; padding: 0 1rem;
}
.pk-toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: .6rem;
    max-width: min(520px, 100%); padding: .7rem .8rem .7rem 1rem;
    border: 1px solid rgba(99, 255, 255, 0.3); border-inline-start: 4px solid #27d3d0;
    border-radius: 10px; background: #0f1d21; color: #eaffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    font-family: 'Heebo', system-ui, sans-serif; font-size: .92rem; line-height: 1.45;
    animation: pk-in .2s ease-out;
}
.pk-toast.success { border-inline-start-color: #27d3d0; }
.pk-toast.success i { color: #27d3d0; }
.pk-toast.error { border-inline-start-color: #ff6b6b; }
.pk-toast.error i { color: #ff6b6b; }
.pk-toast.info i { color: #9fc3c5; }
.pk-toast span { flex: 1; }
.pk-toast.out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.pk-toast-x {
    border: none; background: none; color: #7fa6a8; font-size: 1.2rem; line-height: 1;
    cursor: pointer; padding: 0 .2rem;
}
.pk-toast-x:hover { color: #eaffff; }
@keyframes pk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.pk-confirm-overlay {
    position: fixed; inset: 0; z-index: 3100; display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); direction: rtl;
}
.pk-confirm {
    width: min(400px, 100%); padding: 1.2rem 1.3rem;
    border: 1px solid rgba(99, 255, 255, 0.28); border-radius: 12px; background: #111f24; color: #eaffff;
    font-family: 'Heebo', system-ui, sans-serif; animation: pk-in .15s ease-out;
}
.pk-confirm-text { margin: 0 0 1rem; font-size: .98rem; line-height: 1.55; white-space: pre-line; }
.pk-confirm-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pk-btn {
    padding: .5rem 1.1rem; border-radius: 8px; border: 1px solid transparent;
    font-family: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.pk-btn.primary { background: #18a8a5; color: #04181a; }
.pk-btn.danger { background: #d9534f; color: #fff; }
.pk-btn.ghost { background: transparent; color: #9fc3c5; border-color: rgba(127, 166, 168, 0.45); }
.pk-btn:focus-visible { outline: 2px solid #63ffff; outline-offset: 2px; }

/* ── Nutrition target panel (static/nutrition_target.js) ─────────────────── */
.tg { direction: rtl; display: flex; flex-direction: column; gap: .55rem; font-size: .86rem; color: #eaffff; }
.tg-summary { display: flex; flex-direction: column; gap: .2rem; }
.tg-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.tg-kcal { font-size: 1.15rem; color: #63ffff; }
.tg-macros { color: #cfe9ea; }
.tg-muted { font-size: .76rem; color: #7fa6a8; }
.tg-menu { font-size: .78rem; color: #9fc3c5; }
.tg-menu.off { color: #ffb950; }
.tg-link { font-size: .78rem; color: #63ffff; }
.tg-suggest {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .5rem .7rem;
    border: 1px solid rgba(255, 185, 80, 0.35); border-inline-start: 3px solid #ffb950; border-radius: 8px;
    background: rgba(255, 185, 80, 0.06); font-size: .8rem;
}
.tg-suggest span { flex: 1 1 200px; }
.tg-form { display: flex; flex-direction: column; gap: .45rem; }
.tg-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.tg-field { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: #7fa6a8; }
.tg-field input {
    width: 92px; padding: .35rem .5rem; border: 1px solid rgba(99, 255, 255, 0.18); border-radius: 6px;
    background: rgba(0, 0, 0, 0.3); color: #eaffff; font-family: inherit; font-size: .88rem; color-scheme: dark;
}
.tg-grow { width: 100%; }
.tg-grow input { width: 100%; }
.tg-error { color: #ff6b6b; font-size: .78rem; }
.tg-error:empty { display: none; }
.tg-btn {
    padding: .35rem .8rem; border-radius: 6px; border: 1px solid rgba(99, 255, 255, 0.35);
    background: rgba(14, 162, 159, 0.2); color: #eaffff; font-family: inherit; font-size: .8rem; cursor: pointer;
}
.tg-btn.primary { background: #18a8a5; color: #04181a; font-weight: 700; border-color: transparent; }
.tg-btn.ghost { background: transparent; color: #9fc3c5; border-color: rgba(127, 166, 168, 0.4); }
.tg-link-btn {
    align-self: flex-start; border: none; background: none; padding: 0; color: #63ffff;
    font-family: inherit; font-size: .78rem; text-decoration: underline; cursor: pointer;
}