/* Nákupy: základné štýly UI. */
*{box-sizing:border-box}
:root{
  --bg:#f0f4f8; --card:#fff; --txt:#1f2937; --muted:#6b7280;
  --ordered:#e74c3c; --paid:#f39c12; --shipped:#3498db; --delivered:#2ecc71;
}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--txt)}
.wrap{max-width:720px;margin:0 auto;padding:12px}
h1{margin:.25rem 0 1rem 0;font-size:28px}
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap}
.toolbar select,.toolbar button{padding:10px 12px;border-radius:10px;border:1px solid #d0d7de;background:#fff}
.toolbar button{background:#111827;color:#fff;border:none}
.toolbar .ghost{background:#fff;color:#111;border:1px solid #d0d7de}

#groups .group{margin:14px 0}
.group>h2{margin:0;padding:10px 12px;border-radius:12px;color:#fff;font-size:16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.group[data-status="ordered"]>h2{background:var(--ordered)}
.group[data-status="paid"]>h2{background:var(--paid)}
.group[data-status="shipped"]>h2{background:var(--shipped)}
.group[data-status="delivered"]>h2{background:var(--delivered)}
.group .container{display:none;padding:8px}

.card{background:var(--card);border-radius:14px;padding:12px;margin:10px 0;box-shadow:0 1px 6px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:8px;border-left:6px solid #e5e7eb}
.card .top{display:flex;justify-content:space-between;align-items:center;min-height:28px}
.card .title{font-weight:600;flex:1;min-height:1em}
.tag{padding:4px 10px;border-radius:999px;color:#fff;font-size:12px}
.tag.ordered{background:var(--ordered)}
.tag.paid{background:var(--paid)}
.tag.shipped{background:var(--shipped)}
.tag.delivered{background:var(--delivered)}

.card .body{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.card .shop{font-weight:600;color:#111827}
.card .dates{margin-left:auto;text-align:right;min-width:140px;display:flex;flex-direction:column;gap:2px;color:var(--muted);font-size:14px}
.card .date-row{display:flex;gap:6px;justify-content:flex-end}
.card .date-label{opacity:.8}
.date-badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2f7;color:inherit}
.date-badge.warn{background:#fff3cd;color:#9a6700}
.date-badge.danger{background:#fde2e1;color:#b42318}

.card .actions{display:flex;gap:8px;justify-content:flex-end;align-self:flex-end;width:100%}
.card .actions button{padding:6px 10px;border:1px solid #d1d5db;background:#fff;border-radius:8px}

.hidden{display:none !important}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.overlay.hidden{display:none !important}
.overlay-card{width:min(520px,94vw);background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.25);padding:16px}
.overlay-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.75rem}
.overlay-actions .ghost{background:#fff;border:1px solid #d1d5db;color:#111}
.overlay-actions button{padding:10px 14px;border-radius:10px;border:none;background:#111827;color:#fff}
.muted{color:#6b7280;font-size:12px}

label{display:block;margin:8px 0;font-size:14px}
input,textarea,select{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:10px;background:#fff}

.toast{position:sticky;top:12px;z-index:30;margin:0 0 14px 0;padding:12px 14px;border-radius:14px;border:1px solid #dbe4ee;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.toast.success{border-color:#b7ebc6;background:#effaf3;color:#166534}
.toast.error{border-color:#f5c2c7;background:#fff1f2;color:#b42318}
.toast.warning{border-color:#fde68a;background:#fffbeb;color:#92400e}
.form-message{margin:0 0 10px 0;padding:10px 12px;border-radius:12px;border:1px solid #f5c2c7;background:#fff1f2;color:#b42318;font-size:14px}
.form-message.hidden{display:none !important}
.input-error{border-color:#ef4444 !important;box-shadow:0 0 0 3px rgba(239,68,68,.12)}
button:disabled{opacity:.65;cursor:not-allowed}
.danger-outline{border-color:#ef4444 !important;color:#b42318}
.confirm-card{width:min(420px,94vw)}
.note{color:#374151;background:#f8fafc;border-radius:10px;padding:8px 10px;line-height:1.45;max-height:7.25em;overflow-y:auto;white-space:pre-wrap;word-break:break-word}